@reni-corp/reni-2c-ui 0.3.27 → 0.3.29

package/src/stories/ComboBox.stories.ts

@@ -0,0 +1,524 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ComboBox, {
+  type ComboBoxProps,
+} from '@/components/elements/ComboBox.vue'
+import Icon from '@/components/elements/Icon.vue'
+
+/**
+ * ComboBox - 複数選択可能なコンボボックスコンポーネント
+ *
+ * ## 特徴
+ * - 複数選択対応（チップ表示）
+ * - オートコンプリート（検索）機能
+ * - キーボードナビゲーション対応
+ * - vee-validate連携
+ * - アクセシビリティ対応（ARIA属性）
+ *
+ * ## キーボード操作
+ * - `↑` / `↓`: リスト内を移動
+ * - `Enter` / `Space`: 選択/解除
+ * - `Escape`: ドロップダウンを閉じる
+ * - `Backspace`: 最後の選択を削除（入力が空の場合）
+ */
+const meta: Meta<typeof ComboBox> = {
+  title: 'Elements/ComboBox',
+  component: ComboBox,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'object',
+      description: '選択された値の配列',
+    },
+    label: {
+      control: 'text',
+      description: 'ラベルテキスト',
+    },
+    itemTitle: {
+      control: 'text',
+      description: 'アイテムの表示名として使用するキー',
+    },
+    itemValue: {
+      control: 'text',
+      description: 'アイテムの値として使用するキー',
+    },
+    returnObject: {
+      control: 'boolean',
+      description: 'trueの場合、値としてオブジェクト全体を返す',
+    },
+    items: {
+      control: 'object',
+      description: '選択肢のリスト',
+    },
+    disabled: {
+      control: 'boolean',
+      description: '無効状態',
+    },
+    autocomplete: {
+      control: 'boolean',
+      description: 'オートコンプリート（検索）機能の有効化',
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'クリアボタンの表示',
+    },
+    name: {
+      control: 'text',
+      description: 'フォームフィールド名（vee-validate用）',
+    },
+    rules: {
+      control: 'text',
+      description: 'バリデーションルール',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'プレースホルダーテキスト',
+    },
+    noResultsText: {
+      control: 'text',
+      description: '検索結果がない場合のメッセージ',
+    },
+  },
+  args: {
+    modelValue: [],
+    label: 'お気に入りの果物',
+    itemTitle: 'label',
+    itemValue: 'value',
+    returnObject: false,
+    items: [
+      { value: 'apple', label: 'りんご' },
+      { value: 'banana', label: 'バナナ' },
+      { value: 'orange', label: 'オレンジ' },
+      { value: 'grape', label: 'ぶどう' },
+      { value: 'strawberry', label: 'いちご' },
+    ],
+    disabled: false,
+    autocomplete: true,
+    clearable: false,
+    name: 'fruits',
+    rules: '',
+    placeholder: '検索または選択してください',
+    noResultsText: '該当する項目がありません',
+  },
+}
+
+export default meta
+type StoryArgs = ComboBoxProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, unknown>
+}
+
+/**
+ * 基本的な使用方法
+ */
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox, 'rn-icon': Icon },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * クリアボタン付き
+ * - `clearable: true` で全選択をクリアするボタンを表示
+ */
+export const クリア可能: OverridesStory = {
+  args: {
+    clearable: true,
+    label: 'クリア可能なコンボボックス',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>(['apple', 'banana'])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * 必須入力バリデーション
+ * - `rules: 'required'` で必須チェックを有効化
+ * - 選択後にフォーカスを外すとバリデーションが実行される
+ */
+export const 必須チェック: OverridesStory = {
+  args: {
+    rules: 'required',
+    label: '必須選択項目',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * オブジェクト返却モード
+ * - `returnObject: true` でアイテム全体をオブジェクトとして返す
+ */
+export const returnObjectの場合: OverridesStory = {
+  args: {
+    returnObject: true,
+    label: 'オブジェクトを返す',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<unknown[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ JSON.stringify(selectedValues) }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * カスタムアイコン付き
+ * - `append-inner` スロットでカスタムアイコンを追加
+ */
+export const アイコン付き: OverridesStory = {
+  args: {
+    label: 'アイコン付きコンボボックス',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox, 'rn-icon': Icon },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        >
+          <template #append-inner>
+            <rn-icon icon="chevron-down" />
+          </template>
+        </rn-comboBox>
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * キーボード操作
+ *
+ * 以下のキーボード操作に対応しています：
+ * - `↑` / `↓`: リスト内のアイテムを移動
+ * - `Enter` / `Space`: フォーカス中のアイテムを選択/解除
+ * - `Escape`: ドロップダウンを閉じる
+ * - `Backspace`: 入力が空の場合、最後の選択を削除
+ */
+export const キーボード操作: OverridesStory = {
+  args: {
+    label: 'キーボードで操作してください',
+    placeholder: 'Tab→↓↑で移動→Enterで選択',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <p style="margin-bottom: 16px; color: #666; font-size: 14px;">
+          💡 <strong>キーボード操作:</strong><br />
+          ・<kbd>↑</kbd> / <kbd>↓</kbd>: リスト内を移動<br />
+          ・<kbd>Enter</kbd> / <kbd>Space</kbd>: 選択/解除<br />
+          ・<kbd>Escape</kbd>: ドロップダウンを閉じる<br />
+          ・<kbd>Backspace</kbd>: 最後の選択を削除
+        </p>
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * 無効状態
+ * - `disabled: true` で操作を無効化
+ */
+export const 無効状態: OverridesStory = {
+  args: {
+    disabled: true,
+    label: '無効なコンボボックス',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>(['apple', 'banana'])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * カスタム検索結果なしメッセージ
+ * - `noResultsText` propでメッセージをカスタマイズ
+ */
+export const カスタム検索結果なし: OverridesStory = {
+  args: {
+    label: '検索してみてください',
+    noResultsText: '🔍 見つかりませんでした...',
+    placeholder: '存在しない文字を入力してみてください',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * イベントハンドリング
+ * - `@open`: ドロップダウンが開いた時
+ * - `@close`: ドロップダウンが閉じた時
+ * - `@select`: アイテムが選択された時
+ * - `@deselect`: アイテムの選択が解除された時
+ */
+export const イベント: OverridesStory = {
+  args: {
+    label: 'イベントを確認',
+    clearable: true,
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      const eventLog = ref<string[]>([])
+
+      const onOpen = () => {
+        eventLog.value.push(`[${new Date().toLocaleTimeString()}] open`)
+      }
+      const onClose = () => {
+        eventLog.value.push(`[${new Date().toLocaleTimeString()}] close`)
+      }
+      const onSelect = (item: unknown) => {
+        eventLog.value.push(
+          `[${new Date().toLocaleTimeString()}] select: ${JSON.stringify(item)}`,
+        )
+      }
+      const onDeselect = (item: unknown) => {
+        eventLog.value.push(
+          `[${new Date().toLocaleTimeString()}] deselect: ${JSON.stringify(item)}`,
+        )
+      }
+
+      return { args, selectedValues, eventLog, onOpen, onClose, onSelect, onDeselect }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 400px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :returnObject="args.returnObject"
+          :items="args.items"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :clearable="args.clearable"
+          :name="args.name"
+          :rules="args.rules"
+          :placeholder="args.placeholder"
+          :noResultsText="args.noResultsText"
+          @open="onOpen"
+          @close="onClose"
+          @select="onSelect"
+          @deselect="onDeselect"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+        <div style="margin-top: 16px;">
+          <strong>イベントログ：</strong>
+          <ul style="font-size: 12px; font-family: monospace; max-height: 150px; overflow-y: auto; background: #f5f5f5; padding: 8px 8px 8px 24px; border-radius: 4px;">
+            <li v-for="(log, i) in eventLog" :key="i">{{ log }}</li>
+          </ul>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/Dialog.stories.ts

@@ -0,0 +1,174 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Dialog, { type DialogProps } from '@/components/interactive/Dialog.vue'
+import Button from '@/components/elements/Button.vue'
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Interactive/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Dialogコンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    visible: {
+      control: 'boolean',
+    },
+    scrollable: {
+      control: 'boolean',
+    },
+    type: {
+      control: 'select',
+      options: ['default', 'alert', 'confirm'],
+    },
+    persistent: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    title: 'Title',
+    visible: false,
+    scrollable: true,
+    type: 'default',
+    persistent: false,
+  },
+}
+
+export default meta
+type StoryArgs = DialogProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, DialogProps>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args) => ({
+    components: { 'rn-dialog': Dialog, 'rn-button': Button },
+    setup() {
+      const visible = ref(false)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 300px;'>
+          <rn-button @click="handleVisible">ダイアログを開く</rn-button>
+          <rn-dialog
+            :title=args.title
+            :visible="visible"
+            :scrollable=args.scrollable
+            :type=args.type
+            :persistent=args.persistent
+            @onChangeVisible=handleVisible
+          >
+          </rn-dialog>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 応用1: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'header,body,footerあり',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-dialog': Dialog, 'rn-button': Button },
+    setup() {
+      const visible = ref(false)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 300px;'>
+          <rn-button @click="handleVisible">ダイアログを開く</rn-button>
+          <rn-dialog
+            :title=args.title
+            :visible="visible"
+            :scrollable=args.scrollable
+            :type=args.type
+            :persistent=args.persistent
+            @onChangeVisible=handleVisible
+          >
+            <template #header>
+              header
+            </template>
+            <template #body>
+              <p>「ではみなさんは、そういうふうに川だと言われたり、乳の流れたあとだと言われたりしていた、このぼんやりと白いものがほんとうは何かご承知ですか」先生は、黒板につるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指しながら、みんなに問いをかけました。</p>
+              <p>カムパネルラが手をあげました。</p>
+              <p>それから四、五人手をあげました。</p>
+              <p>ジョバンニも手をあげようとして、急いでそのままやめました。</p>
+            </template>
+            <template #footer>
+              footer
+            </template>
+          </rn-dialog>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 応用2: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'header内のleftContent,rightContentあり',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-dialog': Dialog, 'rn-button': Button },
+    setup() {
+      const visible = ref(false)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 300px;'>
+          <rn-button @click="handleVisible">ダイアログを開く</rn-button>
+          <rn-dialog
+            :title=args.title
+            :visible="visible"
+            :scrollable=args.scrollable
+            :type=args.type
+            :persistent=args.persistent
+            @onChangeVisible=handleVisible
+          >
+            <template #headerLeftItem>
+              left
+            </template>
+            <template #headerRightItem>
+              right
+            </template>
+          </rn-dialog>
+        </div>
+      </div>
+    `,
+  }),
+}