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

package/src/stories/Slider.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Slider, { type SliderProps } from '@/components/interactive/Slider.vue'
 import Stack from '@/components/layouts/Stack.vue'
 import Card from '@/components/layouts/Card.vue'
@@ -31,6 +31,23 @@ const meta: Meta<typeof Slider> = {
       control: 'boolean',
       description: 'ループ再生',
     },
+    centeredSlides: {
+      control: 'boolean',
+      description: 'スライドを中央配置',
+    },
+    pagination: {
+      control: 'select',
+      options: ['none', 'inside', 'outside'],
+      description: 'ページネーション位置（none/inside/outside）',
+    },
+    background: {
+      control: 'text',
+      description: '背景設定（transparent / dynamic / カラーコード / 画像URL）',
+    },
+    padding: {
+      control: 'text',
+      description: 'Swiperエリアのパディング（例: "40px 0"）',
+    },
   },
   args: {
     autoplay: false,
@@ -38,6 +55,10 @@ const meta: Meta<typeof Slider> = {
     slidesPerView: 1,
     spaceBetween: 0,
     loop: true,
+    centeredSlides: false,
+    pagination: 'inside',
+    background: 'transparent',
+    padding: '0',
   },
 }
 
@@ -60,18 +81,355 @@ export const 基本: OverridesStory = {
     },
     template: /* html */ `
       <div class='sb-canvas'>
-        <rn-slider 
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x400.png?text=Slide+1" />
+          <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x400.png?text=Slide+2" />
+          <rn-image src="https://placehold.jp/45b7d1/ffffff/900x400.png?text=Slide+3" />
+          <rn-image src="https://placehold.jp/f7dc6f/333333/900x400.png?text=Slide+4" />
+          <rn-image src="https://placehold.jp/a29bfe/ffffff/900x400.png?text=Slide+5" />
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const 複数スライド表示: OverridesStory = {
+  args: {
+    variant: 'slide',
+    slidesPerView: 2.5,
+    spaceBetween: 16,
+    loop: true,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-slider': Slider, 'rn-image': Image },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x400.png?text=Slide+1" />
+          <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x400.png?text=Slide+2" />
+          <rn-image src="https://placehold.jp/45b7d1/ffffff/900x400.png?text=Slide+3" />
+          <rn-image src="https://placehold.jp/f7dc6f/333333/900x400.png?text=Slide+4" />
+          <rn-image src="https://placehold.jp/a29bfe/ffffff/900x400.png?text=Slide+5" />
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const レスポンシブ設定: OverridesStory = {
+  argTypes: {
+    slidesPerView: { control: false },
+    spaceBetween: { control: false },
+    padding: { control: false },
+  },
+  render: () => ({
+    components: { 'rn-slider': Slider, 'rn-image': Image },
+    setup() {
+      const slidesPerView = { xs: 1.2, sm: 2, md: 3, lg: 4 }
+      const spaceBetween = { xs: 8, sm: 12, md: 16, lg: 20 }
+      const padding = { xs: '16px 8px', md: '24px 16px', lg: '32px 24px' }
+      return { slidesPerView, spaceBetween, padding }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :slides-per-view="slidesPerView"
+          :space-between="spaceBetween"
+          :padding="padding"
+          background="dynamic"
+          loop
+        >
+          <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x400.png?text=Slide+1" />
+          <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x400.png?text=Slide+2" />
+          <rn-image src="https://placehold.jp/45b7d1/ffffff/900x400.png?text=Slide+3" />
+          <rn-image src="https://placehold.jp/f7dc6f/333333/900x400.png?text=Slide+4" />
+          <rn-image src="https://placehold.jp/a29bfe/ffffff/900x400.png?text=Slide+5" />
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const 背景ブラー: OverridesStory = {
+  args: {
+    variant: 'slide',
+    background: 'dynamic',
+    loop: true,
+    padding: '40px 0',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-slider': Slider, 'rn-image': Image },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x400.png?text=Slide+1" />
+          <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x400.png?text=Slide+2" />
+          <rn-image src="https://placehold.jp/45b7d1/ffffff/900x400.png?text=Slide+3" />
+          <rn-image src="https://placehold.jp/f7dc6f/333333/900x400.png?text=Slide+4" />
+          <rn-image src="https://placehold.jp/a29bfe/ffffff/900x400.png?text=Slide+5" />
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const 背景ブラー_カード: OverridesStory = {
+  args: {
+    variant: 'slide',
+    background: 'dynamic',
+    loop: true,
+    padding: '40px 0',
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-slider': Slider,
+      'rn-text': Text,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <div style="background-color: #ff6b6b; padding: 60px; text-align: center;">
+            <rn-text style="color: white; font-size: 24px;">Card 1</rn-text>
+          </div>
+          <div style="background-color: #4ecdc4; padding: 60px; text-align: center;">
+            <rn-text style="color: white; font-size: 24px;">Card 2</rn-text>
+          </div>
+          <div style="background-color: #45b7d1; padding: 60px; text-align: center;">
+            <rn-text style="color: white; font-size: 24px;">Card 3</rn-text>
+          </div>
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const カードスライダー: OverridesStory = {
+  args: {
+    slidesPerView: 1.2,
+    spaceBetween: 16,
+    loop: true,
+    pagination: 'outside',
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-slider': Slider,
+      'rn-card': Card,
+      'rn-stack': Stack,
+      'rn-text': Text,
+      'rn-image': Image,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <rn-card title="お知らせ">
+            <rn-stack direction="vertical" gap="sm">
+              <rn-text>2025年の新商品ラインナップを公開しました。</rn-text>
+              <rn-text style="color: #999; font-size: 12px;">2025.01.15</rn-text>
+            </rn-stack>
+          </rn-card>
+          <rn-card title="キャンペーン">
+            <rn-stack direction="vertical" gap="sm">
+              <rn-text>春の特別セール開催中！最大50%OFF。</rn-text>
+              <rn-text style="color: #999; font-size: 12px;">2025.03.01</rn-text>
+            </rn-stack>
+          </rn-card>
+          <rn-card title="メンテナンス">
+            <rn-stack direction="vertical" gap="sm">
+              <rn-text>システムメンテナンスのお知らせ。</rn-text>
+              <rn-text style="color: #999; font-size: 12px;">2025.04.10</rn-text>
+            </rn-stack>
+          </rn-card>
+          <rn-card title="イベント">
+            <rn-stack direction="vertical" gap="sm">
+              <rn-text>オンライン展示会を開催します。</rn-text>
+              <rn-text style="color: #999; font-size: 12px;">2025.05.20</rn-text>
+            </rn-stack>
+          </rn-card>
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const 画像とテキスト: OverridesStory = {
+  args: {
+    loop: true,
+    pagination: 'outside',
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-slider': Slider,
+      'rn-stack': Stack,
+      'rn-text': Text,
+      'rn-image': Image,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <rn-stack direction="vertical" gap="none">
+            <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x300.png?text=Feature+1" />
+            <rn-stack direction="vertical" gap="xs" padding="md">
+              <rn-text style="font-size: 18px; font-weight: bold;">特集: 春のおすすめ</rn-text>
+              <rn-text style="color: #666; font-size: 14px;">今シーズン注目のアイテムをご紹介します。</rn-text>
+            </rn-stack>
+          </rn-stack>
+          <rn-stack direction="vertical" gap="none">
+            <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x300.png?text=Feature+2" />
+            <rn-stack direction="vertical" gap="xs" padding="md">
+              <rn-text style="font-size: 18px; font-weight: bold;">新着コレクション</rn-text>
+              <rn-text style="color: #666; font-size: 14px;">最新のコレクションが入荷しました。</rn-text>
+            </rn-stack>
+          </rn-stack>
+          <rn-stack direction="vertical" gap="none">
+            <rn-image src="https://placehold.jp/45b7d1/ffffff/900x300.png?text=Feature+3" />
+            <rn-stack direction="vertical" gap="xs" padding="md">
+              <rn-text style="font-size: 18px; font-weight: bold;">限定アイテム</rn-text>
+              <rn-text style="color: #666; font-size: 14px;">数量限定の特別なアイテムをお見逃しなく。</rn-text>
+            </rn-stack>
+          </rn-stack>
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const 背景カラーコード: OverridesStory = {
+  args: {
+    variant: 'slide',
+    background: '#1a1a2e',
+    loop: true,
+    padding: '40px 0',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-slider': Slider, 'rn-image': Image },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
+        >
+          <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x400.png?text=Slide+1" />
+          <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x400.png?text=Slide+2" />
+          <rn-image src="https://placehold.jp/45b7d1/ffffff/900x400.png?text=Slide+3" />
+        </rn-slider>
+      </div>
+    `,
+  }),
+}
+
+export const 背景画像: OverridesStory = {
+  args: {
+    variant: 'slide',
+    background: 'https://placehold.jp/e0e0e0/999999/1200x600.png?text=BG',
+    loop: true,
+    padding: '40px 0',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-slider': Slider, 'rn-image': Image },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider
           :autoplay="args.autoplay"
           :variant="args.variant"
           :slides-per-view="args.slidesPerView"
           :space-between="args.spaceBetween"
           :loop="args.loop"
+          :centered-slides="args.centeredSlides"
+          :pagination="args.pagination"
+          :background="args.background"
+          :padding="args.padding"
         >
-          <rn-image src="https://placehold.jp/900x400.png" />
-          <rn-image src="https://placehold.jp/900x400.png" />
-          <rn-image src="https://placehold.jp/900x400.png" />
-          <rn-image src="https://placehold.jp/900x400.png" />
-          <rn-image src="https://placehold.jp/900x400.png" />
+          <rn-image src="https://placehold.jp/ff6b6b/ffffff/900x400.png?text=Slide+1" />
+          <rn-image src="https://placehold.jp/4ecdc4/ffffff/900x400.png?text=Slide+2" />
+          <rn-image src="https://placehold.jp/45b7d1/ffffff/900x400.png?text=Slide+3" />
         </rn-slider>
       </div>
     `,

package/src/stories/SnsLink.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import SnsLink, { SnsLinkProps } from '@/components/features/SnsLink.vue'
 import { ColorOptions, SNSOptions } from '@/constants'
 import { Color } from '@/types'

package/src/stories/SpinButton.stories.ts

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

package/src/stories/Spinner.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Spinner, { SpinnerProps } from '@/components/elements/Spinner.vue'
 
 const meta: Meta<typeof Spinner> = {

package/src/stories/Stack.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Stack from '@/components/layouts/Stack.vue'
 import './assets/css/style.css'
 const meta: Meta<typeof Stack> = {

package/src/stories/Switch.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 Switch, { type SwitchProps } from '@/components/elements/Switch.vue'
 import { StatusColor } from '@/types'
 import { StatusColorOptions } from '@/constants'

package/src/stories/Tab.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Tab, { type TabProps } from '@/components/interactive/Tab.vue'
 
 const meta: Meta<typeof Tab> = {
@@ -8,7 +8,8 @@ const meta: Meta<typeof Tab> = {
   parameters: {
     docs: {
       description: {
-        component: 'Tabコンポーネント',
+        component:
+          'Tabコンポーネント。variant で見た目を切り替えられます。inline: 横並びテキスト中心、icon: 縦並びアイコン中心。',
       },
     },
   },
@@ -16,37 +17,53 @@ const meta: Meta<typeof Tab> = {
     active: {
       control: 'boolean',
     },
+    variant: {
+      control: 'select',
+      options: ['inline', 'icon'],
+    },
+    icon: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
   },
   args: {
     active: false,
+    variant: 'inline',
+    icon: 'check',
+    label: 'タブ',
   },
-  render: (args) => ({
+  render: (args: TabProps) => ({
     components: { 'rn-tab': Tab },
     setup() {
       return { args }
     },
     template: /* html */ `
-      <div class='sb-canvas'>
-          <rn-tab
-            :active=args.active
-          >
-            {{ args.slotText }}
-          </rn-tab>
+      <div class='sb-canvas' style="display: flex; gap: 0; max-width: 360px;">
+        <rn-tab :active="true" :icon="args.icon" label="アクティブ" :variant="args.variant" />
+        <rn-tab :active="false" :icon="args.icon" :label="args.label" :variant="args.variant" />
+        <rn-tab :active="false" :icon="args.icon" label="その他" :variant="args.variant" />
       </div>
     `,
   }),
 }
 export default meta
 
-type StoryArgs = TabProps & { slotText: string }
+type StoryArgs = TabProps
 type Story = StoryObj<StoryArgs>
 type OverridesStory = Omit<Story, 'argTypes'> & {
   argTypes?: Record<string, TabProps>
 }
 
 export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+}
+
+export const IconVariant: OverridesStory = {
   args: {
-    slotText: 'tabText',
+    variant: 'icon',
   },
   argTypes: {},
 }