@vc-shell/framework 1.0.60 → 1.0.61

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

@@ -1,30 +1,25 @@
-/**
- * Link component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcLink from "./vc-link.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcLink } from "./";
 
-export default {
-  title: "atoms/vc-link",
+const meta: Meta<typeof VcLink> = {
+  title: "atoms/VcLink",
   component: VcLink,
-  argTypes: {
-    click: { action: "click", name: "click" },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcLink },
-  setup() {
-    return { args };
-  },
-  template: '<vc-link v-bind="args">This is a link</vc-link>',
-});
+export default meta;
+type Story = StoryObj<typeof VcLink>;
 
-export const Link = Template.bind({});
-Link.storyName = "vc-link";
-Link.args = {
-  to: undefined,
-  active: false,
-  disabled: false,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcLink },
+    setup() {
+      return { args };
+    },
+    template: '<vc-link v-bind="args">This is a link</vc-link>',
+  }),
+  args: {
+    to: undefined,
+    active: false,
+    disabled: false,
+  },
 };

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcLoading } from "./";
+
+const meta: Meta<typeof VcLoading> = {
+  title: "atoms/VcLoading",
+  component: VcLoading,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcLoading>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcLoading },
+    setup() {
+      return { args };
+    },
+    template: '<vc-loading v-bind="args"></vc-loading>',
+  }),
+  args: {
+    active: true,
+  },
+};

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

@@ -1,25 +1,24 @@
-/**
- * Progress component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcProgress from "./vc-progress.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcProgress } from "./";
 
-export default {
-  title: "atoms/vc-progress",
+const meta: Meta<typeof VcProgress> = {
+  title: "atoms/VcProgress",
   component: VcProgress,
 };
 
-const Template: Story = (args) => ({
-  components: { VcProgress },
-  setup() {
-    return { args };
-  },
-  template: '<vc-progress v-bind="args"></vc-progress>',
-});
+export default meta;
+type Story = StoryObj<typeof VcProgress>;
 
-export const Progress = Template.bind({});
-Progress.storyName = "vc-progress";
-Progress.args = {
-  value: 30,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcProgress },
+    setup() {
+      return { args };
+    },
+    template: '<vc-progress v-bind="args"></vc-progress>',
+  }),
+  args: {
+    value: 30,
+    variant: "striped",
+  },
 };

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcRow } from "./";
+import { VcImage } from "./../../";
+
+const meta: Meta<typeof VcRow> = {
+  title: "atoms/VcRow",
+  component: VcRow,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcRow>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcRow, VcImage },
+    setup() {
+      return { args };
+    },
+    template:
+      '<vc-row 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-row>',
+  }),
+  args: {},
+};

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

@@ -1,26 +1,23 @@
-/**
- * Status component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcStatus from "./vc-status.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcStatus } from "./";
 
-export default {
-  title: "atoms/vc-status",
+const meta: Meta<typeof VcStatus> = {
+  title: "atoms/VcStatus",
   component: VcStatus,
 };
 
-const Template: Story = (args) => ({
-  components: { VcStatus },
-  setup() {
-    return { args };
-  },
-  template: '<vc-status v-bind="args">Status text</vc-status>',
-});
+export default meta;
+type Story = StoryObj<typeof VcStatus>;
 
-export const Status = Template.bind({});
-Status.storyName = "vc-status";
-Status.args = {
-  disabled: false,
-  clickable: true,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcStatus },
+    setup() {
+      return { args };
+    },
+    template: '<vc-status v-bind="args">Status text</vc-status>',
+  }),
+  args: {
+    variant: "danger",
+  },
 };

package/ui/components/atoms/vc-status-icon/vc-status-icon.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcStatusIcon } from "./";
+
+const meta: Meta<typeof VcStatusIcon> = {
+  title: "atoms/VcStatusIcon",
+  component: VcStatusIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcStatusIcon>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcStatusIcon },
+    setup() {
+      return { args };
+    },
+    template: '<vc-status-icon v-bind="args"></vc-status-icon>',
+  }),
+  args: {
+    status: true,
+  },
+};

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

@@ -1,27 +1,22 @@
-/**
- * Switch component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcSwitch from "./vc-switch.vue";
-import VcHint from "../vc-hint/vc-hint.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcSwitch } from "./";
+import { VcHint } from "./../../";
 
-export default {
-  title: "atoms/vc-switch",
+const meta: Meta<typeof VcSwitch> = {
+  title: "atoms/VcSwitch",
   component: VcSwitch,
 };
 
-const Template: Story = (args) => ({
-  components: { VcSwitch, VcHint },
-  setup() {
-    return { args };
-  },
-  template: '<vc-switch v-bind="args"></vc-switch>',
-});
+export default meta;
+type Story = StoryObj<typeof VcSwitch>;
 
-export const Switch = Template.bind({});
-Switch.storyName = "vc-switch";
-Switch.args = {
-  checked: false,
-  disabled: false,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcSwitch, VcHint },
+    setup() {
+      return { args };
+    },
+    template: '<vc-switch v-bind="args"></vc-switch>',
+  }),
+  args: {},
 };

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts" setup>
+import { VcLabel, VcHint } from "./../../";
 export interface Props {
   modelValue: boolean;
   disabled?: boolean;

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcWidget } from "./";
+
+const meta: Meta<typeof VcWidget> = {
+  title: "atoms/VcWidget",
+  component: VcWidget,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcWidget>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: '<vc-widget v-bind="args"></vc-widget>',
+  }),
+  args: {
+    icon: "fas fa-save",
+    title: "Default",
+  },
+};

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts" setup>
+import { VcIcon } from "./../vc-icon";
 export interface Props {
   icon?: string;
   title?: string;

package/ui/components/index.ts

@@ -1,44 +1,44 @@
 /* Atoms */
-export { VcBadge } from "./atoms/vc-badge";
-export { VcButton } from "./atoms/vc-button";
-export { VcCard } from "./atoms/vc-card";
-export { VcCheckbox } from "./atoms/vc-checkbox";
-export { VcCol } from "./atoms/vc-col";
-export { VcContainer } from "./atoms/vc-container";
-export { VcHint } from "./atoms/vc-hint";
-export { VcIcon } from "./atoms/vc-icon";
-export { VcInfoRow } from "./atoms/vc-info-row";
-export { VcImage } from "./atoms/vc-image";
-export { VcLabel } from "./atoms/vc-label";
-export { VcLink } from "./atoms/vc-link";
-export { VcLoading } from "./atoms/vc-loading";
-export { VcProgress } from "./atoms/vc-progress";
-export { VcRow } from "./atoms/vc-row";
-export { VcStatus } from "./atoms/vc-status";
-export { VcStatusIcon } from "./atoms/vc-status-icon";
-export { VcSwitch } from "./atoms/vc-switch";
-export { VcWidget } from "./atoms/vc-widget";
+export * from "./atoms/vc-badge";
+export * from "./atoms/vc-button";
+export * from "./atoms/vc-card";
+export * from "./atoms/vc-checkbox";
+export * from "./atoms/vc-col";
+export * from "./atoms/vc-container";
+export * from "./atoms/vc-hint";
+export * from "./atoms/vc-icon";
+export * from "./atoms/vc-info-row";
+export * from "./atoms/vc-image";
+export * from "./atoms/vc-label";
+export * from "./atoms/vc-link";
+export * from "./atoms/vc-loading";
+export * from "./atoms/vc-progress";
+export * from "./atoms/vc-row";
+export * from "./atoms/vc-status";
+export * from "./atoms/vc-status-icon";
+export * from "./atoms/vc-switch";
+export * from "./atoms/vc-widget";
 
 /* Molecules */
-export { VcBreadcrumbs } from "./molecules/vc-breadcrumbs";
-export { VcCodeEditor } from "./molecules/vc-code-editor";
-export { VcEditor } from "./molecules/vc-editor";
-export { VcForm } from "./molecules/vc-form";
-export { VcFileUpload } from "./molecules/vc-file-upload";
-export { VcInput } from "./molecules/vc-input";
-export { VcInputCurrency } from "./molecules/vc-input-currency";
-export { VcNotification } from "./molecules/vc-notification";
-export { VcPagination } from "./molecules/vc-pagination";
-export { VcRating } from "./molecules/vc-rating";
-export { VcSelect } from "./molecules/vc-select";
-export { VcSlider } from "./molecules/vc-slider";
-export { VcTextarea } from "./molecules/vc-textarea";
+export * from "./molecules/vc-breadcrumbs";
+export * from "./molecules/vc-code-editor";
+export * from "./molecules/vc-editor";
+export * from "./molecules/vc-form";
+export * from "./molecules/vc-file-upload";
+export * from "./molecules/vc-input";
+export * from "./molecules/vc-input-currency";
+export * from "./molecules/vc-notification";
+export * from "./molecules/vc-pagination";
+export * from "./molecules/vc-rating";
+export * from "./molecules/vc-select";
+export * from "./molecules/vc-slider";
+export * from "./molecules/vc-textarea";
 
 /* Organisms */
-export { VcApp } from "./organisms/vc-app";
-export { VcBlade } from "./organisms/vc-blade";
-export { VcDynamicProperty } from "./organisms/vc-dynamic-property";
-export { VcGallery } from "./organisms/vc-gallery";
-export { VcLoginForm } from "./organisms/vc-login-form";
-export { VcPopup } from "./organisms/vc-popup";
-export { VcTable } from "./organisms/vc-table";
+export * from "./organisms/vc-app";
+export * from "./organisms/vc-blade";
+export * from "./organisms/vc-dynamic-property";
+export * from "./organisms/vc-gallery";
+export * from "./organisms/vc-login-form";
+export * from "./organisms/vc-popup";
+export * from "./organisms/vc-table";

package/ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../../../components";
+import { VcIcon } from "./../../../../";
 
 const props = defineProps({
   current: {

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

@@ -1,39 +1,40 @@
-/**
- * Breadcrumbs component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcBreadcrumbs from "./vc-breadcrumbs.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcBreadcrumbs } from "./";
 
-export default {
-  title: "molecules/vc-breadcrumbs",
+const meta: Meta<typeof VcBreadcrumbs> = {
+  title: "molecules/VcBreadcrumbs",
   component: VcBreadcrumbs,
 };
 
-const Template: Story = (args) => ({
-  components: { VcBreadcrumbs },
-  setup() {
-    return { args };
-  },
-  template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
-});
+export default meta;
+type Story = StoryObj<typeof VcBreadcrumbs>;
 
-export const Breadcrumbs = Template.bind({});
-Breadcrumbs.storyName = "vc-breadcrumbs";
-Breadcrumbs.args = {
-  items: [
-    {
-      id: 0,
-      title: "Back",
-      icon: "fas fa-arrow-left",
-    },
-    {
-      id: 1,
-      title: "Electronics",
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcBreadcrumbs },
+    setup() {
+      return { args };
     },
-    {
-      id: 2,
-      title: "Desktop",
-    },
-  ],
+    template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
+  }),
+  args: {
+    items: [
+      {
+        id: "0",
+        title: "Back",
+        icon: "fas fa-arrow-left",
+        current: false,
+      },
+      {
+        id: "1",
+        title: "Electronics",
+        current: false,
+      },
+      {
+        id: "2",
+        title: "Desktop",
+        current: true,
+      },
+    ],
+  },
 };

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -18,9 +18,9 @@ import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-it
 export interface Props {
   items?: {
     current: boolean;
-    icon: string;
+    icon?: string;
     title: string;
-    clickHandler: () => void;
+    clickHandler?: () => void;
     id: string;
   }[];
 }

package/ui/components/molecules/vc-code-editor/vc-code-editor.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcCodeEditor } from "./";
+
+const meta: Meta<typeof VcCodeEditor> = {
+  title: "molecules/VcCodeEditor",
+  component: VcCodeEditor,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcCodeEditor>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcCodeEditor },
+    setup() {
+      return { args };
+    },
+    template: '<vc-code-editor v-bind="args" v-on="$props"></vc-code-editor>',
+  }),
+  args: {
+    modelValue: "<div>HTML markup editor</div>",
+  },
+};

package/ui/components/molecules/vc-code-editor/vc-code-editor.vue

@@ -45,7 +45,8 @@
 import { VAceEditor } from "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/theme-chrome";
-import { ref, unref, watch } from "vue";
+import { ref, unref, watch, onMounted } from "vue";
+import { VcLabel, VcHint } from "./../../";
 
 export interface Props {
   placeholder?: string;
@@ -70,13 +71,9 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 const content = ref();
 
-watch(
-  () => props.modelValue,
-  (value) => {
-    let init = unref(value);
-    emit("update:modelValue", init);
-  }
-);
+onMounted(() => {
+  content.value = props.modelValue;
+});
 
 function onInput() {
   emit("update:modelValue", content.value);

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcEditor } from "./";
+
+const meta: Meta<typeof VcEditor> = {
+  title: "molecules/VcEditor",
+  component: VcEditor,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcEditor>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcEditor },
+    setup() {
+      return { args };
+    },
+    template: '<vc-editor v-bind="args" class="tw-h-[400px]"></vc-editor></>',
+  }),
+  args: {},
+};

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -51,6 +51,7 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { useUser } from "./../../../../core/composables";
 import { ref, unref, watch } from "vue";
 import ImageUploader from "quill-image-uploader";
+import { VcLabel, VcHint } from "./../../";
 
 export interface Props {
   placeholder?: string;

package/ui/components/molecules/vc-file-upload/vc-file-upload.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcFileUpload } from "./";
+
+const meta: Meta<typeof VcFileUpload> = {
+  title: "molecules/VcFileUpload",
+  component: VcFileUpload,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcFileUpload>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcFileUpload },
+    setup() {
+      return { args };
+    },
+    template: '<vc-file-upload v-bind="args"></vc-file-upload>',
+  }),
+  args: {},
+};

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -53,6 +53,7 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
+import { VcLoading, VcIcon, VcLink, VcHint } from "./../../";
 
 export interface Props {
   variant?: "gallery" | "file-upload";

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

@@ -1,23 +1,21 @@
-/**
- * Form component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcForm from "./vc-form.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcForm } from "./";
 
-export default {
-  title: "molecules/vc-form",
+const meta: Meta<typeof VcForm> = {
+  title: "molecules/VcForm",
   component: VcForm,
 };
 
-const Template: Story = (args) => ({
-  components: { VcForm },
-  setup() {
-    return { args };
-  },
-  template: '<vc-form v-bind="args"></vc-form>',
-});
+export default meta;
+type Story = StoryObj<typeof VcForm>;
 
-export const Form = Template.bind({});
-Form.storyName = "vc-form";
-Form.args = {};
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcForm },
+    setup() {
+      return { args };
+    },
+    template: '<vc-textarea v-bind="args"></vc-textarea>',
+  }),
+  args: {},
+};

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcInput } from "./";
+
+const meta: Meta<typeof VcInput> = {
+  title: "molecules/VcInput",
+  component: VcInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcInput>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcInput },
+    setup() {
+      return { args };
+    },
+    template: '<vc-input v-bind="args"></vc-input>',
+  }),
+  args: {},
+};