@reni-corp/reni-2c-ui 0.4.8 → 0.4.10

package/src/stories/VariationSelector.stories.ts

@@ -0,0 +1,241 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VariationSelector, {
+  type VariationSelectorProps,
+} from '@/components/features/VariationSelector.vue'
+
+const meta: Meta<typeof VariationSelector> = {
+  title: 'Features/VariationSelector',
+  component: VariationSelector,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'バリエーション選択用コンポーネント。フラットモード（単純な選択肢）とグループモード（カテゴリ→商品名のようなカスケード選択）に対応。chip（横並びボタン）と list（縦リスト）の2つの表示バリアントをサポート。',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['chip', 'list'],
+      description: 'アイテムの表示バリアント',
+    },
+    groupVariant: {
+      control: 'select',
+      options: ['chip', 'list'],
+      description: 'グループの表示バリアント',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+      description: '選択状態のアクセントカラー',
+    },
+    label: {
+      control: 'text',
+      description: 'アイテム側のラベル',
+    },
+    groupLabel: {
+      control: 'text',
+      description: 'グループ側のラベル',
+    },
+  },
+  args: {
+    variant: 'chip',
+    color: 'default',
+  },
+}
+
+export default meta
+type Story = StoryObj<VariationSelectorProps>
+
+const sizeItems = [
+  { label: 'S', value: 's' },
+  { label: 'M', value: 'm' },
+  { label: 'L', value: 'l' },
+  { label: 'XL', value: 'xl' },
+]
+
+export const 基本: Story = {
+  args: {
+    label: 'サイズ',
+    items: sizeItems,
+    variant: 'chip',
+  },
+  render: (args) => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector v-bind="args" v-model="selectedValue" />
+        <p style="margin-top: 16px; font-size: 13px; color: #666;">
+          選択中: {{ selectedValue || '未選択' }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const リストバリアント: Story = {
+  args: {
+    label: '商品名',
+    items: [
+      { label: '白上フブキ', value: 'fubuki' },
+      { label: '百鬼あやめ', value: 'ayame' },
+      { label: '癒月ちょこ', value: 'choco' },
+      { label: '猫又おかゆ', value: 'okayu' },
+      { label: '兎田ぺこら', value: 'pekora' },
+    ],
+    variant: 'list',
+  },
+  render: (args) => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector v-bind="args" v-model="selectedValue" />
+        <p style="margin-top: 16px; font-size: 13px; color: #666;">
+          選択中: {{ selectedValue || '未選択' }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const グループモード: Story = {
+  render: () => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const categories = [
+        { label: '7th fes. STAGE1', value: 'stage1' },
+        { label: '7th fes. STAGE2', value: 'stage2' },
+        { label: '7th fes. STAGE3', value: 'stage3' },
+        { label: '7th fes. STAGE4', value: 'stage4' },
+      ]
+      const products = [
+        { label: '白上フブキ', value: 'fubuki', stageId: 'stage1' },
+        { label: '百鬼あやめ', value: 'ayame', stageId: 'stage1' },
+        { label: '癒月ちょこ', value: 'choco', stageId: 'stage1' },
+        { label: '猫又おかゆ', value: 'okayu', stageId: 'stage2' },
+        { label: '兎田ぺこら', value: 'pekora', stageId: 'stage2' },
+        { label: '不知火フレア', value: 'flare', stageId: 'stage2' },
+        { label: '角巻わため', value: 'watame', stageId: 'stage3' },
+        { label: '雪花ラミィ', value: 'lamy', stageId: 'stage3' },
+        { label: '尾丸ポルカ', value: 'polka', stageId: 'stage4' },
+        { label: '鷹嶺ルイ', value: 'lui', stageId: 'stage4' },
+      ]
+
+      const selectedCategory = ref('stage1')
+      const selectedProduct = ref('')
+
+      return { categories, products, selectedCategory, selectedProduct }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector
+          group-label="商品カテゴリ"
+          label="商品名"
+          :groups="categories"
+          :items="products"
+          item-group="stageId"
+          group-variant="chip"
+          variant="list"
+          v-model:group="selectedCategory"
+          v-model="selectedProduct"
+        />
+        <div style="margin-top: 16px; font-size: 13px; color: #666;">
+          <p>カテゴリ: {{ selectedCategory || '未選択' }}</p>
+          <p>商品: {{ selectedProduct || '未選択' }}</p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 無効化オプション: Story = {
+  args: {
+    label: 'サイズ',
+    items: [
+      { label: 'S', value: 's' },
+      { label: 'M', value: 'm' },
+      { label: 'L', value: 'l', disabled: true },
+      { label: 'XL', value: 'xl', disabled: true },
+    ],
+    variant: 'chip',
+  },
+  render: (args) => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector v-bind="args" v-model="selectedValue" />
+        <p style="margin-top: 16px; font-size: 13px; color: #666;">
+          選択中: {{ selectedValue || '未選択' }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const Shopify商品バリアント: Story = {
+  render: () => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedColor = ref('')
+      const selectedSize = ref('')
+      return { selectedColor, selectedSize }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px; display: flex; flex-direction: column; gap: 24px;">
+        <rn-variation-selector
+          label="カラー"
+          :items="[
+            { label: 'ホワイト', value: 'white' },
+            { label: 'ブラック', value: 'black' },
+            { label: 'ネイビー', value: 'navy' },
+          ]"
+          variant="chip"
+          v-model="selectedColor"
+        />
+        <rn-variation-selector
+          label="サイズ"
+          :items="[
+            { label: 'S', value: 's' },
+            { label: 'M', value: 'm' },
+            { label: 'L', value: 'l' },
+            { label: 'XL', value: 'xl', disabled: true },
+          ]"
+          variant="chip"
+          v-model="selectedSize"
+        />
+        <div style="padding: 16px; background: var(--rn-bg-muted); border-radius: 8px;">
+          <p style="margin: 0; font-size: 14px; font-weight: 600;">選択中のバリアント</p>
+          <p style="margin: 8px 0 0; font-size: 13px; color: #666;">
+            カラー: {{ selectedColor || '未選択' }} / サイズ: {{ selectedSize || '未選択' }}
+          </p>
+        </div>
+      </div>
+    `,
+  }),
+}

package/dist/components/renderless/OptionGroupSwitchController.vue.d.ts

@@ -1,41 +0,0 @@
-export type OptionGroupSwitchControllerProps = {
-    itemMapKey: string;
-    groupMapKey: string;
-    groups: any[];
-    items: any[];
-    defaultActiveValue: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            optionGroups: any[];
-            optionGroupByContents: {
-                isActive: boolean;
-                mapKey: any;
-                group: any;
-                items: any[];
-            }[];
-            activeValue: string;
-            updateActiveValue: (value: string) => void;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<OptionGroupSwitchControllerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OptionGroupSwitchControllerProps> & Readonly<{}>, {
-    items: any[];
-    itemMapKey: string;
-    groupMapKey: string;
-    groups: any[];
-    defaultActiveValue: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=OptionGroupSwitchController.vue.d.ts.map

package/dist/components/renderless/OptionGroupSwitchController.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionGroupSwitchController.vue.d.ts","sourceRoot":"","sources":["../../../src/components/renderless/OptionGroupSwitchController.vue"],"names":[],"mappings":"AAQA;AAkEA,MAAM,MAAM,gCAAgC,GAAG;IAC7C,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,GAAG,EAAE,CAAA;IACb,KAAK,EAAE,GAAG,EAAE,CAAA;IACZ,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAwDD,iBAAS,cAAc;WAwBT,OAAO,IAA6B;;;;;;;;;;;uCA/ChB,MAAM;YAqCX,GAAG;;;;EAe/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;WArGZ,GAAG,EAAE;gBAHA,MAAM;iBACL,MAAM;YACX,GAAG,EAAE;wBAEO,MAAM;6EA2G1B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}