@vc-shell/framework 1.0.181 → 1.0.183

package/dist/ui/components/organisms/vc-table/vc-table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-table.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAI7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAiFrB,CAAC"}
+{"version":3,"file":"vc-table.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK7B,wBAkEiC;AAEjC,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,OAAO,OAAO,CAe1C,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAmB,CAAC;AAKxC,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAmB,CAAC;AAK9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAmB,CAAC;AAK9C,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAmB,CAAC;AAKxD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAmB,CAAC;AAK1D,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,OAAO,OAAO,CAmEtD,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,OAAO,OAAO,CAuBjD,CAAC"}

package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.181",
+  "version": "1.0.183",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "./*": "./*"
   },
   "scripts": {
-    "build": "tsx scripts/build.mts",
+    "build": "shx rm -rf ./dist && tsx scripts/build.mts",
     "build:lib": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "type-check": "vue-tsc --noEmit"
@@ -55,11 +55,12 @@
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.181",
-    "@vc-shell/config-generator": "^1.0.181",
-    "@vc-shell/ts-config": "^1.0.181",
+    "@vc-shell/api-client-generator": "^1.0.183",
+    "@vc-shell/config-generator": "^1.0.183",
+    "@vc-shell/ts-config": "^1.0.183",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
+    "shx": "^0.3.4",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -8,6 +8,7 @@
   >
     <template
       v-for="(slot, key) in popup.slots"
+      #[key]
       :key="key"
     >
       <div

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -12,7 +12,6 @@ import {
   MaybeRef,
   unref,
   DefineComponent,
-  h,
 } from "vue";
 import { PopupPlugin, UsePopupInternal, UsePopupProps } from "./../../types";
 import { popupPluginInstance } from "./../../plugin";
@@ -59,9 +58,11 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
 
   function destroy(confirmation: UsePopupProps<DefineComponent>): void {
     const popupInstanceInternal = usePopupInternal();
-    const index = popupInstanceInternal.popups.findIndex((x) => _.isEqualWith(x, confirmation, (val) => val.component));
+    const index = popupInstanceInternal?.popups?.findIndex((x) =>
+      _.isEqualWith(x, confirmation, (val) => val.component),
+    );
 
-    if (index !== -1) popupInstanceInternal.popups.splice(index, 1);
+    if (index !== -1) popupInstanceInternal?.popups?.splice(index, 1);
   }
 
   async function open(customInstance?: UsePopupProps<DefineComponent>) {
@@ -73,7 +74,7 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
 
     destroy(rawPopup || customInstance);
 
-    activeInstance?.popups.push(rawPopup || customInstance);
+    activeInstance?.popups?.push(rawPopup || customInstance);
   }
 
   function close(customInstance?: UsePopupProps<DefineComponent>) {
@@ -82,7 +83,7 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
       activeInstance = popupInstance;
     }
     const index = activeInstance?.popups.indexOf(rawPopup || customInstance);
-    if (index !== undefined && index !== -1) activeInstance?.popups.splice(index, 1);
+    if (index !== undefined && index !== -1) activeInstance?.popups?.splice(index, 1);
   }
 
   async function showConfirmation(message: string | Ref<string>): Promise<boolean> {
@@ -103,7 +104,7 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
         },
       },
       slots: {
-        content: message,
+        default: message,
       },
     });
 
@@ -128,7 +129,7 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
         },
       },
       slots: {
-        content: message,
+        default: message,
       },
     });
 

package/tailwind.config.ts

@@ -1,50 +1,6 @@
 /** @type { import('tailwindcss').Config } */
+import config from "@vc-shell/tailwind-config";
 export default {
-  prefix: "tw-",
+  ...config,
   content: ["./ui/components/**/*.{vue,js,ts,jsx,tsx}", "./shared/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    fontFamily: {
-      roboto: ["Roboto", "sans-serif"],
-    },
-    fontSize: {
-      xs: ["11px", "14px"],
-      sm: ["12px", "16px"],
-      base: ["13px", "18px"],
-      lg: ["14px", "19px"],
-      xl: ["16px", "22px"],
-      "2xl": ["23px", "28px"],
-    },
-    lineHeight: {
-      xs: "14px",
-      sm: "16px",
-      base: "18px",
-      lg: "19px",
-      xl: "22px",
-      "2xl": "28px",
-      header: "28px",
-    },
-    extend: {
-      keyframes: {
-        loadingMarker: {
-          "50%": { transform: "translateX(96px)" },
-        },
-        loadingMarkers: {
-          "50%": { transform: "translateX(-31px)" },
-        },
-        loadingProgress: {
-          from: {
-            "background-position": "0 0, left",
-          },
-          to: {
-            "background-position": "30px 0, left",
-          },
-        },
-      },
-      animation: {
-        loadingMarker: "loadingMarker 3s infinite",
-        loadingMarkers: "loadingMarkers 3s infinite",
-        loadingProgress: "loadingProgress 1s linear infinite",
-      },
-    },
-  },
 };

package/ui/components/atoms/vc-badge/index.ts

@@ -1,13 +1 @@
-import { VNode } from "vue";
-import _Badge from "./vc-badge.vue";
-
-export const VcBadge = _Badge as typeof _Badge & {
-  new (): {
-    $slots: {
-      /**
-       * Slot for component content
-       * */
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcBadge } from "./vc-badge.vue";

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -1,25 +1,53 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcBadge } from "./";
+import type { Meta, StoryFn } from "@storybook/vue3";
+import VcBadge from "./vc-badge.vue";
 
-const meta: Meta<typeof VcBadge> = {
+export default {
   title: "atoms/VcBadge",
   component: VcBadge,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcBadge>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcBadge },
-    setup() {
-      return { args };
-    },
-    template: '<vc-badge v-bind="args">42</vc-badge>',
-  }),
   args: {
-    active: false,
-    disabled: false,
-    clickable: true,
+    default: "42",
   },
-};
+  argTypes: {
+    default: {
+      control: "text",
+    },
+    active: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+    disabled: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+    clickable: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+  },
+} satisfies Meta<typeof VcBadge>;
+
+const Template: StoryFn<typeof VcBadge> = (args) => ({
+  components: { VcBadge },
+  setup: () => ({ args }),
+  template: `<VcBadge v-bind="args">{{args.default}}</VcBadge>`,
+});
+
+export const Basic = Template.bind({});
+
+export const Active = Template.bind({});
+Active.args = { active: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Clickable = Template.bind({});
+Clickable.args = { clickable: true };

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -1,26 +1,118 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcButton } from "./";
 
-const meta: Meta<typeof VcButton> = {
-  title: "atoms/VcButton",
-  component: VcButton,
-};
+const COLORS = ["primary", "warning", "danger"];
 
-export default meta;
-type Story = StoryObj<typeof VcButton>;
+const PROPERTY = ["disabled", "small", "outline", "selected", "text", "raised"];
 
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcButton },
-    setup() {
-      return { args };
-    },
-    template: '<vc-button v-bind="args">I am a button</vc-button>',
-  }),
+const ICON_SIZE = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+
+export default {
+  title: "atoms/VcButton",
+  component: VcButton,
   args: {
-    icon: "fas fa-star",
+    default: "I am a button",
     variant: "primary",
-    disabled: false,
-    small: false,
+    iconSize: "s",
   },
-};
+  argTypes: {
+    default: {
+      control: "text",
+    },
+    icon: { control: "text" },
+    iconClass: { control: "text" },
+    iconSize: {
+      control: "radio",
+      table: {
+        type: {
+          summary: ICON_SIZE.join(" | "),
+        },
+      },
+      options: ICON_SIZE,
+    },
+    variant: {
+      control: "radio",
+      options: ["primary", "warning", "danger"],
+      table: {
+        type: {
+          summary: COLORS.join(" | "),
+        },
+      },
+    },
+    disabled: { control: "boolean" },
+    small: { control: "boolean" },
+    outline: { control: "boolean" },
+    selected: { control: "boolean" },
+    text: { control: "boolean" },
+    raised: { control: "boolean" },
+  },
+} satisfies Meta<typeof VcButton>;
+
+export const Template: StoryFn<typeof VcButton> = (args) => ({
+  components: { VcButton },
+  setup() {
+    return { args };
+  },
+  template: '<VcButton v-bind="args">{{args.default}}</VcButton>',
+});
+
+export const Basic = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Small = Template.bind({});
+Small.args = { small: true };
+
+export const Outline = Template.bind({});
+Outline.args = { outline: true };
+
+export const Selected = Template.bind({});
+Selected.args = { selected: true };
+
+export const Text = Template.bind({});
+Text.args = { text: true };
+
+export const Raised = Template.bind({});
+Raised.args = { raised: true };
+
+export const Icon = Template.bind({});
+Icon.args = { icon: "fas fa-plus" };
+
+export const IconClass = Template.bind({});
+IconClass.args = { icon: "fas fa-plus", iconClass: "tw-text-red" };
+
+export const IconSize = Template.bind({});
+IconSize.args = { icon: "fas fa-plus", iconSize: "l" };
+
+export const Warning = Template.bind({});
+Warning.args = { variant: "warning" };
+
+export const Danger = Template.bind({});
+Danger.args = { variant: "danger" };
+
+export const AllStates: StoryFn<typeof VcButton> = () => ({
+  components: { VcButton },
+  setup: () => ({ colors: COLORS, properties: PROPERTY }),
+  template: `
+    <div class="tw-space-y-8">
+    <div v-for="property in properties" class="tw-space-y-8">
+
+    <h2 class="tw-font-bold tw-text-2xl">Property: {{property}}</h2>
+
+
+    <div v-for="color in colors" class="tw-space-y-2">
+      <p class="tw-font-bold">Color: {{color}}</p>
+      <div class="tw-flex tw-flex-row tw-space-x-4">
+          <div v-for="prop in properties.filter(x => x !== property)" class="tw-space-y-4">
+            <p class="tw-font-bold tw-text-sm">Property: {{prop}}</p>
+            <VcButton :[property]="true" :[prop]="true" :variant="color">I am a button</VcButton>
+
+          </div>
+      </div>
+    </div>
+
+    </div>
+    </div>
+  `,
+});

package/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -1,25 +1,103 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn, StoryObj } from "@storybook/vue3";
 import { VcCard } from ".";
-import { VcInput, VcCol } from "./../../";
+import { VcInput, VcCol, VcButton } from "./../../";
+import { h } from "vue";
 
-const meta: Meta<typeof VcCard> = {
+const VARIANT = ["default", "success", "danger"];
+
+export default {
   title: "atoms/VcCard",
   component: VcCard,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcCard>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcCard, VcInput, VcCol },
-    setup() {
-      return { args };
-    },
-    template: `<vc-card v-bind="args">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</vc-card>`,
-  }),
   args: {
+    header: "Card Title",
     variant: "default",
-    header: "Simple Card",
+    default: "Text",
+  },
+  argTypes: {
+    default: {
+      control: "radio",
+      options: ["Text", "Component"],
+      mapping: {
+        Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!",
+        Component: VcInput,
+      },
+    },
+    header: { control: "text" },
+    icon: { control: "text" },
+    isCollapsable: { control: "boolean" },
+    isCollapsed: { control: "boolean" },
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(" | "),
+        },
+      },
+    },
+    fill: { control: "boolean" },
+  },
+} satisfies Meta<typeof VcCard>;
+
+export const Template: StoryFn<typeof VcCard> = (args) => ({
+  components: { VcCard, VcInput, VcCol },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-card v-bind="args">
+      <template v-if="typeof args.default === 'string'">
+        <p class="tw-p-4">{{args.default}}</p>
+      </template>
+      <template v-else>
+        <component class="tw-p-4" :is="args.default" label="Input Field" placeholder="Input some text" />
+      </template>
+
+    </vc-card>`,
+});
+
+export const Header = Template.bind({});
+Header.args = { header: "Card Title" };
+
+export const Icon = Template.bind({});
+Icon.args = { icon: "fas fa-warehouse" };
+
+export const Collapsable = Template.bind({});
+Collapsable.args = { isCollapsable: true };
+
+export const Collapsed = Template.bind({});
+Collapsed.args = { isCollapsable: true, isCollapsed: true };
+
+export const Fill = Template.bind({});
+Fill.args = { fill: true, header: "Card Title" };
+
+export const Actions: StoryFn<typeof VcCard> = (args) => ({
+  components: {
+    VcCard,
+    VcButton,
+  },
+  setup: () => ({ args }),
+  template: `
+      <vc-card  :variant="variant" header="Card Title">
+        <p class="tw-p-4">{{args.default}}</p>
+
+        <template #actions>
+          <VcButton variant="danger">Action button</VcButton>
+        </template>
+      </vc-card>
+    `,
+});
+
+export const Variants: StoryFn<typeof VcCard> = (args) => ({
+  components: {
+    VcCard,
   },
-};
+  setup: () => ({ variants: VARIANT, args }),
+  template: `
+    <div class="tw-space-x-8 tw-flex tw-flex-row">
+      <vc-card v-for="variant in variants" :variant="variant" header="Card Title">
+        <p class="tw-p-4">{{args.default}}</p>
+      </vc-card>
+    </div>
+    `,
+});

package/ui/components/atoms/vc-checkbox/vc-checkbox.stories.ts

@@ -1,25 +1,84 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcCheckbox } from "./";
 import { VcLabel } from "../vc-label";
 
-const meta: Meta<typeof VcCheckbox> = {
+export default {
   title: "atoms/VcCheckbox",
   component: VcCheckbox,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcCheckbox>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcCheckbox, VcLabel },
-    setup() {
-      return { args };
-    },
-    template: '<vc-checkbox v-bind="args">Checkbox text content</vc-checkbox>',
-  }),
   args: {
     modelValue: true,
     label: "Checkbox label",
+    default: "Checkbox text content",
   },
-};
+  argTypes: {
+    modelValue: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    disabled: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    name: {
+      control: "text",
+    },
+    errorMessage: {
+      control: "text",
+    },
+    trueValue: {
+      control: "boolean",
+    },
+    falseValue: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    tooltip: {
+      control: "text",
+    },
+    default: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcCheckbox>;
+
+export const Template: StoryFn<typeof VcCheckbox> = (args) => ({
+  components: { VcCheckbox, VcLabel },
+  setup() {
+    return { args };
+  },
+  template: '<vc-checkbox v-bind="args">{{args.default}}</vc-checkbox>',
+});
+
+export const Basic = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Required = Template.bind({});
+Required.args = { required: true };
+
+export const Error = Template.bind({});
+Error.args = { errorMessage: "This is an error message" };
+
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: "This is a tooltip" };
+
+export const Label = Template.bind({});
+Label.args = { label: "Checkbox label" };
+
+export const Name = Template.bind({});
+Name.args = { name: "checkbox-name" };
+
+export const TrueValue = Template.bind({});
+TrueValue.args = { trueValue: false };
+
+export const FalseValue = Template.bind({});
+FalseValue.args = { falseValue: true };

package/ui/components/atoms/vc-col/vc-col.stories.ts

@@ -1,23 +1,22 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcCol } from "./";
+import { VcRow } from "./../vc-row";
 import { VcImage } from "./../../";
 
-const meta: Meta<typeof VcCol> = {
+export default {
   title: "atoms/VcCol",
   component: VcCol,
-};
+} satisfies Meta<typeof VcCol>;
 
-export default meta;
-type Story = StoryObj<typeof VcCol>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcCol, VcImage },
-    setup() {
-      return { args };
-    },
-    template:
-      '<vc-col v-bind="args"><vc-image src="https://placekitten.com/800/600" size="xl"/><vc-image src="https://placekitten.com/800/600" size="xl"/><vc-image src="https://placekitten.com/800/600" size="xl"/></vc-col>',
-  }),
-  args: {},
-};
+export const Primary: StoryFn<typeof VcCol> = (args) => ({
+  components: { VcCol, VcImage, VcRow },
+  setup() {
+    return { args };
+  },
+  template: `
+      <vc-col v-bind="args">
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+      </vc-col>`,
+});