@vc-shell/framework 1.0.180 → 1.0.182

package/ui/components/molecules/vc-multivalue/vc-multivalue.stories.ts

@@ -0,0 +1,120 @@
+import { ref } from "vue";
+import { VcMultivalue } from ".";
+import { StoryFn, type Meta } from "@storybook/vue3";
+
+const FIELD_TYPE = ["text", "number"];
+
+export default {
+  title: "molecules/VcMultivalue",
+  component: VcMultivalue as Record<keyof typeof VcMultivalue, unknown>,
+  args: {
+    placeholder: "Enter a value",
+    type: "text",
+    label: "Multivalue Field",
+    name: "multivalueField",
+    options: [
+      { id: "1", title: "Option 1" },
+      { id: "2", title: "Option 2" },
+      { id: "3", title: "Option 3" },
+    ],
+    optionValue: "id",
+    optionLabel: "title",
+    multivalue: true,
+  },
+  argTypes: {
+    type: {
+      control: "radio",
+      options: FIELD_TYPE,
+      table: {
+        type: {
+          summary: FIELD_TYPE.join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcMultivalue>;
+
+const Template: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+      <vc-multivalue v-bind="args" v-model="val"></vc-multivalue>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const Error = Template.bind({});
+Error.args = { errorMessage: "This is an error", error: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: "This is a tooltip" };
+
+export const SingleValue = Template.bind({});
+SingleValue.args = {
+  multivalue: false,
+};
+
+export const Hint = Template.bind({});
+Hint.args = {
+  hint: "This is a hint",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const CustomDropdownItemSlot: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+    <vc-multivalue v-bind="args" v-model="val">
+      <template #item="{ item }">
+        <div>
+          <h2 class="tw-font-bold">Item header</h2>
+          <div>{{ item.title }}</div>
+        </div>
+      </template>
+    </vc-multivalue>
+  `,
+});
+
+export const CustomHintSlot: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+    <vc-multivalue v-bind="args" v-model="val">
+      <template #hint>
+        <div class="tw-text-red-500">Custom hint</div>
+      </template>
+    </vc-multivalue>
+  `,
+});
+
+export const CustomErrorSlot: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+    <vc-multivalue v-bind="args" v-model="val" error>
+      <template #error>
+        <div class="tw-text-red-500">Custom error</div>
+      </template>
+    </vc-multivalue>
+  `,
+});

package/ui/components/molecules/vc-pagination/vc-pagination.stories.ts

@@ -1,21 +1,24 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcPagination } from "./";
 
-const meta: Meta<typeof VcPagination> = {
+export default {
   title: "molecules/VcPagination",
   component: VcPagination,
-};
+  args: {
+    pages: 20,
+    currentPage: 3,
+  },
+} satisfies Meta<typeof VcPagination>;
 
-export default meta;
-type Story = StoryObj<typeof VcPagination>;
+export const Template: StoryFn<typeof VcPagination> = (args) => ({
+  components: { VcPagination },
+  setup() {
+    return { args };
+  },
+  template: '<vc-pagination v-bind="args"></vc-pagination>',
+});
 
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcPagination },
-    setup() {
-      return { args };
-    },
-    template: '<vc-pagination v-bind="args"></vc-pagination>',
-  }),
-  args: {},
+export const Expanded = Template.bind({});
+Expanded.args = {
+  expanded: true,
 };

package/ui/components/molecules/vc-rating/vc-rating.stories.ts

@@ -1,23 +1,59 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcRating } from "./";
 
-const meta: Meta<typeof VcRating> = {
+const VARIANT = ["stars", "star-and-text", "text"];
+
+export default {
   title: "molecules/VcRating",
   component: VcRating,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcRating>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      return { args };
-    },
-    template: '<vc-rating v-bind="args"></vc-rating>',
-  }),
   args: {
     modelValue: 4,
+    max: 5,
+    variant: "stars",
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: VARIANT,
+    },
+  },
+} satisfies Meta<typeof VcRating>;
+
+export const Template: StoryFn<typeof VcRating> = (args) => ({
+  components: { VcRating },
+  setup() {
+    return { args };
   },
+  template: '<vc-rating v-bind="args"></vc-rating>',
+});
+
+export const Label = Template.bind({});
+Label.args = {
+  label: "Rating",
+};
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+  tooltip: "This is a tooltip",
 };
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  placeholder: "Select a rating",
+  modelValue: undefined,
+};
+
+export const AllVariants: StoryFn<typeof VcRating> = (args) => ({
+  components: { VcRating },
+  setup() {
+    return { args, variants: VARIANT };
+  },
+  template: `
+    <div class="tw-grid tw-gap-5 tw-grid-cols-3">
+      <div v-for="variant in variants">
+      <h2 class="tw-font-bold">Variant: {{variant}}</h2>
+        <vc-rating v-bind="args" :variant="variant" />
+      </div>
+    </div>
+  `,
+});