@reni-corp/reni-2c-ui 0.3.291 → 0.4.1

package/src/stories/TabGroup.stories.ts

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TabGroup, {
+  type TabGroupProps,
+} from '@/components/interactive/TabGroup.vue'
+import Tabs from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.vue'
+import TabPanels from '@/components/interactive/TabPanels.vue'
+import TabPanel from '@/components/interactive/TabPanel.vue'
+import Icon from '@/components/elements/Icon.vue'
+
+const meta: Meta<typeof TabGroup> = {
+  title: 'Interactive/TabGroup',
+  component: TabGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'TabGroupコンポーネント。layout propsでタブの配置を切り替えられます。layout に応じて Tabs の variant と Tab の variant が自動解決されます。アクティブバーの色は --rn-tab-active-color CSS変数で設定可能です。',
+      },
+    },
+  },
+  argTypes: {
+    modelValue: {
+      control: 'number',
+      description: 'アクティブなタブのインデックス',
+    },
+    layout: {
+      control: 'select',
+      options: ['inline', 'bottom'],
+      description:
+        'タブのレイアウト。inline: 上部配置、bottom: 下部固定',
+    },
+  },
+  args: {
+    modelValue: 0,
+    layout: 'inline',
+  },
+}
+export default meta
+
+type StoryArgs = TabGroupProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, TabGroupProps>
+}
+
+const tabLabels = ['ホーム', 'カテゴリ', 'お気に入り', 'カート', 'マイページ']
+const tabIcons: string[] = [
+  'check',
+  'check',
+  'check',
+  'check',
+  'check',
+]
+
+export const Inline: OverridesStory = {
+  args: {
+    layout: 'inline',
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-tab-group': TabGroup,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-tab-panels': TabPanels,
+      'rn-tab-panel': TabPanel,
+    },
+    setup() {
+      const labels = tabLabels
+      return { args, labels }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tab-group v-bind="args">
+          <rn-tabs>
+            <rn-tab v-for="(label, index) in labels" :key="index" :label="label" />
+          </rn-tabs>
+          <rn-tab-panels>
+            <rn-tab-panel v-for="(label, index) in labels" :key="index">
+              <div style="padding: 24px;">
+                <h3>{{ label }}</h3>
+                <p>{{ label }}のコンテンツです。</p>
+              </div>
+            </rn-tab-panel>
+          </rn-tab-panels>
+        </rn-tab-group>
+      </div>
+    `,
+  }),
+}
+
+export const InlineWithIcon: OverridesStory = {
+  args: {
+    layout: 'inline',
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-tab-group': TabGroup,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-tab-panels': TabPanels,
+      'rn-tab-panel': TabPanel,
+    },
+    setup() {
+      const labels = tabLabels
+      const icons = tabIcons
+      return { args, labels, icons }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tab-group v-bind="args">
+          <rn-tabs>
+            <rn-tab v-for="(label, index) in labels" :key="index" :icon="icons[index]" :label="label" />
+          </rn-tabs>
+          <rn-tab-panels>
+            <rn-tab-panel v-for="(label, index) in labels" :key="index">
+              <div style="padding: 24px;">
+                <h3>{{ label }}</h3>
+                <p>icon + label プロップスで指定。inlineではアイコンがsmサイズで表示されます。</p>
+              </div>
+            </rn-tab-panel>
+          </rn-tab-panels>
+        </rn-tab-group>
+      </div>
+    `,
+  }),
+}
+
+export const InlineStretched: OverridesStory = {
+  args: {
+    layout: 'inline',
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-tab-group': TabGroup,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-tab-panels': TabPanels,
+      'rn-tab-panel': TabPanel,
+    },
+    setup() {
+      const labels = tabLabels
+      return { args, labels }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tab-group v-bind="args">
+          <rn-tabs :isStretched="true">
+            <rn-tab v-for="(label, index) in labels" :key="index" :label="label" />
+          </rn-tabs>
+          <rn-tab-panels>
+            <rn-tab-panel v-for="(label, index) in labels" :key="index">
+              <div style="padding: 24px;">
+                <h3>{{ label }}</h3>
+                <p>isStretched を有効にして、各タブが均等幅でストレッチしています。</p>
+              </div>
+            </rn-tab-panel>
+          </rn-tab-panels>
+        </rn-tab-group>
+      </div>
+    `,
+  }),
+}
+
+export const InlineWithCustomColor: OverridesStory = {
+  args: {
+    layout: 'inline',
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-tab-group': TabGroup,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-tab-panels': TabPanels,
+      'rn-tab-panel': TabPanel,
+    },
+    setup() {
+      const labels = tabLabels
+      return { args, labels }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tab-group v-bind="args" style="--rn-tab-active-color: #6c50d9;">
+          <rn-tabs>
+            <rn-tab v-for="(label, index) in labels" :key="index" :label="label" />
+          </rn-tabs>
+          <rn-tab-panels>
+            <rn-tab-panel v-for="(label, index) in labels" :key="index">
+              <div style="padding: 24px;">
+                <h3>{{ label }}</h3>
+                <p>--rn-tab-active-color でアクティブバーの色をカスタマイズしています。</p>
+              </div>
+            </rn-tab-panel>
+          </rn-tab-panels>
+        </rn-tab-group>
+      </div>
+    `,
+  }),
+}
+
+export const Bottom: OverridesStory = {
+  args: {
+    layout: 'bottom',
+  },
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => ({
+    components: {
+      'rn-tab-group': TabGroup,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-tab-panels': TabPanels,
+      'rn-tab-panel': TabPanel,
+    },
+    setup() {
+      const labels = tabLabels
+      const icons = tabIcons
+      return { args, labels, icons }
+    },
+    template: /* html */ `
+      <rn-tab-group v-bind="args">
+        <rn-tabs>
+          <rn-tab v-for="(label, index) in labels" :key="index" :icon="icons[index]" :label="label" />
+        </rn-tabs>
+        <rn-tab-panels>
+          <rn-tab-panel v-for="(label, index) in labels" :key="index">
+            <div style="padding: 24px;">
+              <h3>{{ label }}</h3>
+              <p>{{ label }}のコンテンツです。icon/labelプロップスで指定。アイコンはlg、ラベルは10pxで自動表示されます。</p>
+              <div style="height: 800px; background: linear-gradient(to bottom, #f0f0f0, #e0e0e0); border-radius: 8px; margin-top: 16px; display: flex; align-items: center; justify-content: center; color: #999;">
+                スクロール領域
+              </div>
+            </div>
+          </rn-tab-panel>
+        </rn-tab-panels>
+      </rn-tab-group>
+    `,
+  }),
+}
+
+export const BottomSlot: OverridesStory = {
+  args: {
+    layout: 'bottom',
+  },
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => ({
+    components: {
+      'rn-tab-group': TabGroup,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-tab-panels': TabPanels,
+      'rn-tab-panel': TabPanel,
+      'rn-icon': Icon,
+    },
+    setup() {
+      const labels = tabLabels
+      const icons = tabIcons
+      return { args, labels, icons }
+    },
+    template: /* html */ `
+      <rn-tab-group v-bind="args">
+        <rn-tabs>
+          <rn-tab v-for="(label, index) in labels" :key="index">
+            <rn-icon :icon="icons[index]" size="md" />
+            <span style="font-size: 10px;">{{ label }}</span>
+          </rn-tab>
+        </rn-tabs>
+        <rn-tab-panels>
+          <rn-tab-panel v-for="(label, index) in labels" :key="index">
+            <div style="padding: 24px;">
+              <h3>{{ label }}</h3>
+              <p>{{ label }}のコンテンツです。従来のslotベースの記述方法です。</p>
+            </div>
+          </rn-tab-panel>
+        </rn-tab-panels>
+      </rn-tab-group>
+    `,
+  }),
+}
+

package/src/stories/TabPanels.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import TabPanels, {
   type TabPanelsProps,
 } from '@/components/interactive/TabPanels.vue'

package/src/stories/Tabs.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Tabs, { type TabsProps } from '@/components/interactive/Tabs.vue'
 import Tab from '@/components/interactive/Tab.vue'
 
@@ -10,7 +10,8 @@ const meta: Meta<typeof Tabs> = {
   parameters: {
     docs: {
       description: {
-        component: 'Tabsコンポーネント',
+        component:
+          'Tabsコンポーネント。variant で見た目を切り替えられます。inline: 上部配置、bottom: ボトムバー風。',
       },
     },
   },
@@ -21,12 +22,17 @@ const meta: Meta<typeof Tabs> = {
     isScrollable: {
       control: 'boolean',
     },
+    variant: {
+      control: 'select',
+      options: ['inline', 'bottom'],
+    },
   },
   args: {
     modelValue: 1,
     isScrollable: true,
+    variant: 'inline',
   },
-  render: (args) => ({
+  render: (args: TabsProps) => ({
     components: { 'rn-tabs': Tabs, 'rn-tab': Tab },
     setup() {
       const current = ref(0)
@@ -66,3 +72,98 @@ export const 基本: OverridesStory = {
   args: {},
   argTypes: {},
 }
+
+export const WithIconLabel: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args: TabsProps) => ({
+    components: { 'rn-tabs': Tabs, 'rn-tab': Tab },
+    setup() {
+      const current = ref(0)
+      const handleVisible = (num: number) => {
+        current.value = num
+      }
+      return { args, handleVisible, current }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tabs
+          :modelValue=current
+          v-slot=slotProps
+        >
+          <rn-tab
+            v-for="(_value, index) in new Array(5)"
+            :active="slotProps.currentIndex === index"
+            :icon="'check'"
+            :label="'Tab ' + index"
+            @click=handleVisible(index)
+          />
+        </rn-tabs>
+      </div>
+    `,
+  }),
+}
+
+export const Bottom: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args: TabsProps) => ({
+    components: { 'rn-tabs': Tabs, 'rn-tab': Tab },
+    setup() {
+      const current = ref(0)
+      const handleVisible = (num: number) => {
+        current.value = num
+      }
+      return { args, handleVisible, current }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tabs
+          :modelValue=current
+          variant="bottom"
+          v-slot=slotProps
+        >
+          <rn-tab
+            v-for="(_value, index) in new Array(4)"
+            :active="slotProps.currentIndex === index"
+            :icon="'check'"
+            :label="'Tab ' + index"
+            @click=handleVisible(index)
+          />
+        </rn-tabs>
+      </div>
+    `,
+  }),
+}
+
+export const Stretched: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args: TabsProps) => ({
+    components: { 'rn-tabs': Tabs, 'rn-tab': Tab },
+    setup() {
+      const current = ref(0)
+      const handleVisible = (num: number) => {
+        current.value = num
+      }
+      return { args, handleVisible, current }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tabs
+          :modelValue=current
+          :isStretched="true"
+          v-slot=slotProps
+        >
+          <rn-tab
+            v-for="(_value, index) in new Array(5)"
+            :active="slotProps.currentIndex === index"
+            :icon="'check'"
+            :label="'Tab ' + index"
+            @click=handleVisible(index)
+          />
+        </rn-tabs>
+      </div>
+    `,
+  }),
+}

package/src/stories/Text.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Text, { TextProps } from '@/components/elements/Text.vue'
 
 const meta: Meta<typeof Text> = {
@@ -67,3 +67,26 @@ export const 基本: OverridesStory = {
     `,
   }),
 }
+
+export const Nl2br: OverridesStory = {
+  args: {
+    nl2br: true,
+    slotText: '1行目のテキスト\n2行目のテキスト\n3行目のテキスト',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-text :size=args.size :color=args.color :weight=args.weight :nl2br=args.nl2br>
+          {{ args.slotText }}
+        </rn-text>
+      </div>
+    `,
+  }),
+}

package/src/stories/TextArea.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import TextArea, {
   type TextAreaProps,
 } from '@/components/elements/TextArea.vue'
@@ -12,6 +12,10 @@ const meta: Meta<typeof TextArea> = {
     label: {
       control: 'text',
     },
+    variant: {
+      control: 'select',
+      options: ['default', 'floating'],
+    },
     placeholder: {
       control: 'text',
     },
@@ -30,6 +34,7 @@ const meta: Meta<typeof TextArea> = {
   },
   args: {
     label: 'label',
+    variant: 'default',
     placeholder: 'メールアドレスを入力してください',
     rows: 4,
     dynamicRows: true,
@@ -50,6 +55,7 @@ const meta: Meta<typeof TextArea> = {
         <rn-text-area
           v-model=myRef
           :label=args.label
+          :variant=args.variant
           :rows=args.rows
           :dynamicRows=args.dynamicRows
           :disabled=args.disabled
@@ -76,3 +82,74 @@ export const 基本: OverridesStory = {
     default: { table: { disable: true } },
   },
 }
+
+export const FloatingLabel: OverridesStory = {
+  args: {
+    variant: 'floating',
+    label: 'メッセージ',
+    modelValue: '',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text-area': TextArea },
+    setup() {
+      const myRef = ref('')
+      return { args, myRef }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='display: flex; flex-direction: column; gap: 24px;'>
+          <div>
+            <h3>未入力</h3>
+            <rn-text-area
+              variant='floating'
+              label='メッセージ'
+              :rows='4'
+            />
+          </div>
+          <div>
+            <h3>入力済み</h3>
+            <rn-text-area
+              variant='floating'
+              label='メッセージ'
+              modelValue='お問い合わせ内容を入力してください'
+              :rows='4'
+            />
+          </div>
+          <div>
+            <h3>プレースホルダー付き</h3>
+            <rn-text-area
+              variant='floating'
+              label='メッセージ'
+              placeholder='詳細を入力してください'
+              :rows='4'
+            />
+          </div>
+          <div>
+            <h3>エラー時</h3>
+            <rn-text-area
+              variant='floating'
+              label='メッセージ'
+              name='message'
+              rules='required'
+              :validateOnMount='true'
+              :rows='4'
+            />
+          </div>
+          <div>
+            <h3>無効時</h3>
+            <rn-text-area
+              variant='floating'
+              label='メッセージ'
+              modelValue='お問い合わせ内容'
+              :disabled='true'
+              :rows='4'
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/TextField.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import TextField, {
   type TextFieldProps,
 } from '@/components/elements/TextField.vue'
@@ -12,6 +12,10 @@ const meta: Meta<typeof TextField> = {
     label: {
       control: 'text',
     },
+    variant: {
+      control: 'select',
+      options: ['default', 'floating'],
+    },
     modelValue: {
       control: 'text',
     },
@@ -24,6 +28,7 @@ const meta: Meta<typeof TextField> = {
   },
   args: {
     label: 'label',
+    variant: 'default',
     modelValue: 'value',
     disabled: false,
     rules: '',
@@ -56,6 +61,7 @@ export const 基本: OverridesStory = {
         <rn-text-field
           v-model=myRef
           :label=args.label
+          :variant=args.variant
           :disabled=args.disabled
           :rules=args.rules
           @update:modelValue=handleUpload
@@ -80,6 +86,7 @@ export const 応用: OverridesStory = {
       <div class='sb-canvas'>
         <rn-text-field
           :label=args.label
+          :variant=args.variant
           :modelValue=args.modelValue
           :disabled=args.disabled
           :rules=args.rules
@@ -88,10 +95,76 @@ export const 応用: OverridesStory = {
             prepend
           </template>
           <template #append>
-            append  
+            append
           </template>
         </rn-text-field>
       </div>
     `,
   }),
 }
+
+export const FloatingLabel: OverridesStory = {
+  args: {
+    variant: 'floating',
+    label: 'ご注文番号',
+    modelValue: '',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text-field': TextField },
+    setup() {
+      const myRef = ref('')
+      return { args, myRef }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='display: flex; flex-direction: column; gap: 24px;'>
+          <div>
+            <h3>未入力</h3>
+            <rn-text-field
+              variant='floating'
+              label='ご注文番号'
+            />
+          </div>
+          <div>
+            <h3>入力済み</h3>
+            <rn-text-field
+              variant='floating'
+              label='ご注文番号'
+              modelValue='001'
+            />
+          </div>
+          <div>
+            <h3>プレースホルダー付き</h3>
+            <rn-text-field
+              variant='floating'
+              label='ご注文番号'
+              placeholder='注文番号を入力してください'
+            />
+          </div>
+          <div>
+            <h3>エラー時</h3>
+            <rn-text-field
+              variant='floating'
+              label='ご注文番号'
+              name='orderNumber'
+              rules='required'
+              :validateOnMount='true'
+            />
+          </div>
+          <div>
+            <h3>無効時</h3>
+            <rn-text-field
+              variant='floating'
+              label='ご注文番号'
+              modelValue='001'
+              :disabled='true'
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/ToolChip.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ToolChip, {
   type ToolChipProps,
 } from '@/components/elements/ToolChip.vue'