feat: BaseTextFieldにコンテキストメニューを追加

src/components/Base/BaseContextMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <ContextMenuRoot v-model:open="open">
+    <ContextMenuTrigger asChild>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent
+        class="ContextMenuContent"
+        :collisionPadding="8"
+        avoidCollisions
+        hideWhenDetached
+      >
+        <slot name="menu" />
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuTrigger,
+} from "reka-ui";
+
+const open = defineModel<boolean>("open", { default: false });
+</script>
+
+<style lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+
+.ContextMenuContent {
+  min-width: 240px;
+  background-color: colors.$background;
+  border-radius: vars.$radius-2;
+  overflow: hidden;
+  padding: vars.$padding-1;
+  border: 1px solid colors.$border;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  z-index: vars.$z-index-dropdown;
+}
+</style>

src/components/Base/BaseContextMenuItem.vue

@@ -0,0 +1,60 @@
+<template>
+  <ContextMenuItem
+    :disabled
+    class="ContextMenuItem"
+    @select="$emit('select', $event)"
+  >
+    {{ label }}
+    <div class="shortcut">{{ shortcut }}</div>
+  </ContextMenuItem>
+</template>
+
+<script setup lang="ts">
+import { ContextMenuItem } from "reka-ui";
+
+defineProps<{
+  label: string;
+  shortcut?: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  select: [event: Event];
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.ContextMenuItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: vars.$size-control;
+  padding: 0 vars.$padding-1;
+  padding-left: vars.$padding-2;
+  border-radius: vars.$radius-1;
+  color: colors.$display;
+  cursor: pointer;
+
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &[data-highlighted] {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.shortcut {
+  margin-left: auto;
+  color: colors.$display-sub;
+}
+</style>

src/components/Base/BaseContextMenuSeparator.vue

@@ -0,0 +1,18 @@
+<template>
+  <ContextMenuSeparator class="ContextMenuSeparator" />
+</template>
+
+<script setup lang="ts">
+import { ContextMenuSeparator } from "reka-ui";
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+
+.ContextMenuSeparator {
+  height: 1px;
+  background-color: colors.$border;
+  margin-block: vars.$padding-1;
+}
+</style>

src/components/Base/BaseTextField.stories.ts

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect } from "storybook/test";
 
 import BaseTextField from "./BaseTextField.vue";
+import { UnreachableError } from "@/type/utility";
 
 const meta: Meta<typeof BaseTextField> = {
   component: BaseTextField,
@@ -46,3 +48,23 @@ export const HasError: Story = {
       </BaseTextField>`,
   }),
 };
+
+export const UpdateModelValue: Story = {
+  name: "Update modelValue",
+  args: {
+    modelValue: "hoge",
+  },
+  play: async ({ canvasElement, args }) => {
+    const inputElement =
+      canvasElement.querySelector<HTMLDivElement>("div.input");
+    if (!inputElement) {
+      throw new UnreachableError("div.input is not found");
+    }
+    await expect(inputElement.textContent).toBe("hoge");
+    // @ts-expect-error modelValueがreadonlyだが、動いているかつ周りに影響がないため無視する
+    // TODO: ちゃんとした方法があればそちらに変更する
+    args.modelValue = "fuga";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await expect(inputElement.textContent).toBe("fuga");
+  },
+};