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

package/src/stories/Tab.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Tab, { type TabProps } from '@/components/interactive/Tab.vue'
+
+const meta: Meta<typeof Tab> = {
+  title: 'Interactive/Tab',
+  component: Tab,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tabコンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    active: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    active: false,
+  },
+  render: (args) => ({
+    components: { 'rn-tab': Tab },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+          <rn-tab
+            :active=args.active
+          >
+            {{ args.slotText }}
+          </rn-tab>
+      </div>
+    `,
+  }),
+}
+export default meta
+
+type StoryArgs = TabProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, TabProps>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: 'tabText',
+  },
+  argTypes: {},
+}

package/src/stories/TabPanels.stories.ts

@@ -0,0 +1,67 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TabPanels, {
+  type TabPanelsProps,
+} from '@/components/interactive/TabPanels.vue'
+
+const meta: Meta<typeof TabPanels> = {
+  title: 'Interactive/TabPanels',
+  component: TabPanels,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'TabPanelsコンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    modelValue: {
+      control: 'number',
+    },
+  },
+  args: {
+    modelValue: 1,
+  },
+}
+export default meta
+
+type StoryArgs = TabPanelsProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, TabPanelsProps>
+}
+
+export const 基本: OverridesStory = {
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: {
+      'rn-tab-panels': TabPanels,
+    },
+    setup() {
+      const current = ref(0)
+
+      const updateTabIndex = (num: number) => {
+        current.value = num
+      }
+
+      return { args, current, updateTabIndex }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tab-panels
+          :modelValue=current
+          @on-change-index="updateTabIndex($event)"
+        >        
+          <template v-for="(_value, index) in new Array(10)" :key="index">
+            <span style="min-width: 300px; height: 100px;">
+              {{ index }}
+            </span>
+          </template>
+        </rn-tab-panels>
+        表示中：{{ current }}番目のコンテンツ
+      </div>
+    `,
+  }),
+}

package/src/stories/Tabs.stories.ts

@@ -0,0 +1,68 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Tabs, { type TabsProps } from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.vue'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Interactive/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tabsコンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    modelValue: {
+      control: 'number',
+    },
+    isScrollable: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    modelValue: 1,
+    isScrollable: true,
+  },
+  render: (args) => ({
+    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
+          :isScrollable=args.isScrollable
+          v-slot=slotProps
+        >
+          <rn-tab
+            v-for="(_value, index) in new Array(10)"
+            :active="slotProps.currentIndex === index"
+            @click=handleVisible(index)
+          >
+            tab {{ index }}
+          </rn-tab>
+        </rn-tabs>
+      </div>
+    `,
+  }),
+}
+export default meta
+
+type StoryArgs = TabsProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, TabsProps>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+}

package/src/stories/Text.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Text, { TextProps } from '@/components/elements/Text.vue'
+
+const meta: Meta<typeof Text> = {
+  title: 'Elements/Text',
+  component: Text,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['caption', 'body', 'subtitle', 'title', 'headline'],
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+    },
+    weight: {
+      control: 'select',
+      options: ['normal', 'bold'],
+    },
+    lineClamp: { control: 'number' },
+  },
+  args: {
+    size: 'body',
+    color: 'default',
+    weight: 'normal',
+  },
+}
+
+export default meta
+type StoryArgs = TextProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText:
+      '気がさですのはよく今をよしますですん。ついに嘉納さんのお話時分それほど附与と出な貧民その周囲みんなか発展でってお戦争ですなたでて、こういうほかは私か人物風俗に聞こえるが、大森さんののを画の私がすでに実安心とさてあなた金力がお落第がすようについご相当がいんなから、けっしていくらでも徴をなるありからいけでのがなるないます',
+  },
+  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 :lineClamp=args.lineClamp>
+          {{ args.slotText }}
+        </rn-text>
+      </div>
+    `,
+  }),
+}

package/src/stories/TextArea.stories.ts

@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TextArea, {
+  type TextAreaProps,
+} from '@/components/elements/TextArea.vue'
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Elements/TextArea',
+  component: TextArea,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    rows: {
+      control: 'number',
+    },
+    dynamicRows: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    rules: {
+      control: 'text',
+    },
+  },
+  args: {
+    label: 'label',
+    placeholder: 'メールアドレスを入力してください',
+    rows: 4,
+    dynamicRows: true,
+    disabled: false,
+    rules: '',
+  },
+  render: (args) => ({
+    components: { 'rn-text-area': TextArea },
+    setup() {
+      const myRef = ref()
+      const handleUpload = () => {
+        console.log(myRef.value)
+      }
+      return { args, myRef, handleUpload }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-text-area
+          v-model=myRef
+          :label=args.label
+          :rows=args.rows
+          :dynamicRows=args.dynamicRows
+          :disabled=args.disabled
+          :rules=args.rules
+          :placeholder=args.placeholder
+          @update:modelValue=handleUpload
+        >
+        </rn-text-area>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = TextAreaProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}

package/src/stories/TextField.stories.ts

@@ -0,0 +1,97 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TextField, {
+  type TextFieldProps,
+} from '@/components/elements/TextField.vue'
+
+const meta: Meta<typeof TextField> = {
+  title: 'Elements/TextField',
+  component: TextField,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    modelValue: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    rules: {
+      control: 'text',
+    },
+  },
+  args: {
+    label: 'label',
+    modelValue: 'value',
+    disabled: false,
+    rules: '',
+  },
+}
+
+export default meta
+type StoryArgs = TextFieldProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text-field': TextField },
+    setup() {
+      const myRef = ref()
+      const handleUpload = () => {
+        console.log(myRef.value)
+      }
+      return { args, myRef, handleUpload }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-text-field
+          v-model=myRef
+          :label=args.label
+          :disabled=args.disabled
+          :rules=args.rules
+          @update:modelValue=handleUpload
+        >
+        </rn-text-field>
+      </div>
+    `,
+  }),
+}
+
+export const 応用: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text-field': TextField },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-text-field
+          :label=args.label
+          :modelValue=args.modelValue
+          :disabled=args.disabled
+          :rules=args.rules
+        >
+          <template #prepend>
+            prepend
+          </template>
+          <template #append>
+            append  
+          </template>
+        </rn-text-field>
+      </div>
+    `,
+  }),
+}

package/src/stories/ToolChip.stories.ts

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ToolChip, {
+  type ToolChipProps,
+} from '@/components/elements/ToolChip.vue'
+import { StatusColorOptions } from '@/constants'
+import { StatusColor } from '@/types'
+
+const meta: Meta<typeof ToolChip> = {
+  title: 'Elements/ToolChip',
+  component: ToolChip,
+  tags: ['autodocs'],
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: [
+        'auto',
+        'auto-start',
+        'auto-end',
+        'top',
+        'top-start',
+        'top-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+    },
+    autoShow: {
+      control: 'boolean',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(StatusColorOptions) as StatusColor[],
+    },
+    message: {
+      control: 'text',
+    },
+    hasDone: {
+      control: 'boolean',
+    },
+    displayOnceId: {
+      control: 'text',
+    },
+  },
+  args: {
+    placement: 'bottom',
+    autoShow: false,
+    color: 'default',
+    message: 'message',
+    hasDone: false,
+  },
+}
+
+export default meta
+type StoryArgs = ToolChipProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: 'ToolChip',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-tool-chip': ToolChip },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tool-chip
+          :placement=args.placement
+          :autoShow=args.autoShow
+          :color=args.color
+          :message=args.message
+          :hasDone=args.hasDone
+          :displayOnceId=args.displayOnceId
+        >
+          {{ args.slotText }}
+        </rn-tool-chip>
+      </div>
+    `,
+  }),
+}
+
+export const 応用1: OverridesStory = {
+  args: {
+    slotText: 'ToolChip',
+    autoShow: true,
+    displayOnceId: '1',
+    hasDone: true,
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-tool-chip': ToolChip },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-tool-chip
+          :placement=args.placement
+          :autoShow=args.autoShow
+          :color=args.color
+          :message=args.message
+          :hasDone=args.hasDone
+          :displayOnceId=args.displayOnceId
+        >
+          {{ args.slotText }}
+        </rn-tool-chip>
+      </div>
+    `,
+  }),
+}

package/dist/components/elements/SkeltonLoader.vue.d.ts

@@ -1,7 +0,0 @@
-
-export type SkeltonLoaderProps = {
-    type: 'articleThumbnail';
-};
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=SkeltonLoader.vue.d.ts.map

package/dist/components/elements/SkeltonLoader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SkeltonLoader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/elements/SkeltonLoader.vue"],"names":[],"mappings":"AAEA,OAAO,0BAA0B,CAAA;AAIjC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,kBAAkB,CAAA;CACzB,CAAA;;AA4ID,wBAKG"}