@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -1,96 +1,96 @@
-<template>
-  <!-- Text -->
-  <template v-if="type === 'text'">
-    <div class="vc-field-type">
-      <div class="vc-field-type__text-wrap">
-        <p class="vc-field-type__text">{{ value }}</p>
-      </div>
-    </div>
-  </template>
-
-  <!-- Date -->
-  <template v-if="type === 'date'">
-    <div class="vc-field-type">
-      <div class="vc-field-type__text-wrap">
-        <p class="vc-field-type__text">{{ value instanceof Date ? value.toLocaleDateString() : value }}</p>
-      </div>
-    </div>
-  </template>
-
-  <!-- Date ago -->
-  <template v-if="type === 'date-ago'">
-    <div class="vc-field-type">
-      <div class="vc-field-type__text-wrap">
-        <p class="vc-field-type__text">{{ value instanceof Date ? (moment(value).fromNow() ?? "N/A") : value }}</p>
-      </div>
-    </div>
-  </template>
-
-  <!-- Link -->
-  <template v-if="type === 'link'">
-    <div class="vc-field-type">
-      <div class="vc-field-type__text-wrap">
-        <VcLink
-          class="vc-field-type__link"
-          @click="onLinkClick"
-          >{{ value }}</VcLink
-        >
-      </div>
-      <slot></slot>
-    </div>
-  </template>
-
-  <!-- Email -->
-  <template v-if="type === 'email'">
-    <div class="vc-field-type">
-      <div class="vc-field-type__text-wrap">
-        <a
-          :href="`mailto:${value}`"
-          class="vc-field-type__link"
-          >{{ value }}</a
-        >
-      </div>
-      <slot></slot>
-    </div>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import moment from "moment";
-
-export interface Props {
-  type: "text" | "date" | "date-ago" | "link" | "email";
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
-}
-
-export interface Emits {
-  (event: "click"): void;
-  (event: "copy"): void;
-}
-
-defineEmits<Emits>();
-const props = defineProps<Props>();
-
-function onLinkClick() {
-  location.href = props.value;
-}
-</script>
-
-<style lang="scss">
-.vc-field-type {
-  @apply tw-flex tw-flex-row tw-justify-stretch tw-truncate;
-
-  &__text-wrap {
-    @apply tw-text-wrap;
-  }
-
-  &__text {
-    @apply tw-text-sm;
-  }
-
-  &__link {
-    @apply tw-text-sm tw-truncate tw-w-full;
-  }
-}
-</style>
+<template>
+  <!-- Text -->
+  <template v-if="type === 'text'">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <p class="vc-field-type__text">{{ value }}</p>
+      </div>
+    </div>
+  </template>
+
+  <!-- Date -->
+  <template v-if="type === 'date'">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <p class="vc-field-type__text">{{ value instanceof Date ? value.toLocaleDateString() : value }}</p>
+      </div>
+    </div>
+  </template>
+
+  <!-- Date ago -->
+  <template v-if="type === 'date-ago'">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <p class="vc-field-type__text">{{ value instanceof Date ? (moment(value).fromNow() ?? "N/A") : value }}</p>
+      </div>
+    </div>
+  </template>
+
+  <!-- Link -->
+  <template v-if="type === 'link'">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <VcLink
+          class="vc-field-type__link"
+          @click="onLinkClick"
+          >{{ value }}</VcLink
+        >
+      </div>
+      <slot></slot>
+    </div>
+  </template>
+
+  <!-- Email -->
+  <template v-if="type === 'email'">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <a
+          :href="`mailto:${value}`"
+          class="vc-field-type__link"
+          >{{ value }}</a
+        >
+      </div>
+      <slot></slot>
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment";
+
+export interface Props {
+  type: "text" | "date" | "date-ago" | "link" | "email";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+}
+
+export interface Emits {
+  (event: "click"): void;
+  (event: "copy"): void;
+}
+
+defineEmits<Emits>();
+const props = defineProps<Props>();
+
+function onLinkClick() {
+  location.href = props.value;
+}
+</script>
+
+<style lang="scss">
+.vc-field-type {
+  @apply tw-flex tw-flex-row tw-justify-stretch tw-truncate;
+
+  &__text-wrap {
+    @apply tw-text-wrap;
+  }
+
+  &__text {
+    @apply tw-text-sm;
+  }
+
+  &__link {
+    @apply tw-text-sm tw-truncate tw-w-full;
+  }
+}
+</style>

package/ui/components/molecules/vc-field/index.ts

@@ -1 +1 @@
-export { default as VcField } from "./vc-field.vue";
+export { default as VcField } from "./vc-field.vue";

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

@@ -1,114 +1,114 @@
-import { StoryFn, Meta } from "@storybook/vue3";
-import VcField from "./vc-field.vue";
-
-const TYPE = ["text", "date", "date-ago", "link", "email"];
-const ORIENTATION = ["vertical", "horizontal"];
-
-export default {
-  title: "molecules/VcField",
-  component: VcField,
-  args: {
-    label: "Field Label",
-    tooltip: "Field Tooltip",
-    type: "text",
-    modelValue: "Field Value",
-    orientation: "vertical",
-    aspectRatio: [1, 1],
-  },
-  argTypes: {
-    type: {
-      control: "radio",
-
-      options: TYPE,
-      table: {
-        type: {
-          summary: TYPE.join(" | "),
-        },
-      },
-    },
-    orientation: {
-      control: "radio",
-      options: ORIENTATION,
-      table: {
-        type: {
-          summary: ORIENTATION.join(" | "),
-        },
-      },
-    },
-    aspectRatio: {
-      control: "object",
-      table: {
-        type: {
-          summary: "number[]",
-        },
-      },
-    },
-  },
-} satisfies Meta;
-
-const Template: StoryFn = (args) => ({
-  components: { VcField },
-  setup() {
-    return { args };
-  },
-  template: `
-    <vc-field v-bind="args" />
-  `,
-  args: {},
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  ...Template.args,
-  type: "text",
-  modelValue: "Field Value",
-};
-
-export const DateType = Template.bind({});
-DateType.args = {
-  ...Template.args,
-  type: "date",
-  modelValue: new Date(),
-};
-
-export const DateAgo = Template.bind({});
-DateAgo.args = {
-  ...Template.args,
-  type: "date-ago",
-  modelValue: new Date(),
-};
-
-export const Link = Template.bind({});
-Link.args = {
-  ...Template.args,
-  type: "link",
-  modelValue: "https://virtocommerce.com/",
-};
-
-export const LinkCopyable = Template.bind({});
-LinkCopyable.args = {
-  ...Template.args,
-  type: "link",
-  modelValue: "https://virtocommerce.com/",
-  copyable: true,
-};
-
-export const Email = Template.bind({});
-Email.args = {
-  ...Template.args,
-  type: "email",
-  modelValue: "email@virtocommerce.com",
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  ...Template.args,
-  orientation: "horizontal",
-};
-
-export const HorizontalAspectRatio = Template.bind({});
-HorizontalAspectRatio.args = {
-  ...Template.args,
-  orientation: "horizontal",
-  aspectRatio: [1, 2],
-};
+import { StoryFn, Meta } from "@storybook/vue3";
+import VcField from "./vc-field.vue";
+
+const TYPE = ["text", "date", "date-ago", "link", "email"];
+const ORIENTATION = ["vertical", "horizontal"];
+
+export default {
+  title: "molecules/VcField",
+  component: VcField,
+  args: {
+    label: "Field Label",
+    tooltip: "Field Tooltip",
+    type: "text",
+    modelValue: "Field Value",
+    orientation: "vertical",
+    aspectRatio: [1, 1],
+  },
+  argTypes: {
+    type: {
+      control: "radio",
+
+      options: TYPE,
+      table: {
+        type: {
+          summary: TYPE.join(" | "),
+        },
+      },
+    },
+    orientation: {
+      control: "radio",
+      options: ORIENTATION,
+      table: {
+        type: {
+          summary: ORIENTATION.join(" | "),
+        },
+      },
+    },
+    aspectRatio: {
+      control: "object",
+      table: {
+        type: {
+          summary: "number[]",
+        },
+      },
+    },
+  },
+} satisfies Meta;
+
+const Template: StoryFn = (args) => ({
+  components: { VcField },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-field v-bind="args" />
+  `,
+  args: {},
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  ...Template.args,
+  type: "text",
+  modelValue: "Field Value",
+};
+
+export const DateType = Template.bind({});
+DateType.args = {
+  ...Template.args,
+  type: "date",
+  modelValue: new Date(),
+};
+
+export const DateAgo = Template.bind({});
+DateAgo.args = {
+  ...Template.args,
+  type: "date-ago",
+  modelValue: new Date(),
+};
+
+export const Link = Template.bind({});
+Link.args = {
+  ...Template.args,
+  type: "link",
+  modelValue: "https://virtocommerce.com/",
+};
+
+export const LinkCopyable = Template.bind({});
+LinkCopyable.args = {
+  ...Template.args,
+  type: "link",
+  modelValue: "https://virtocommerce.com/",
+  copyable: true,
+};
+
+export const Email = Template.bind({});
+Email.args = {
+  ...Template.args,
+  type: "email",
+  modelValue: "email@virtocommerce.com",
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  ...Template.args,
+  orientation: "horizontal",
+};
+
+export const HorizontalAspectRatio = Template.bind({});
+HorizontalAspectRatio.args = {
+  ...Template.args,
+  orientation: "horizontal",
+  aspectRatio: [1, 2],
+};

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

@@ -1 +1 @@
-export { default as VcFileUpload } from "./vc-file-upload.vue";
+export { default as VcFileUpload } from "./vc-file-upload.vue";

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

@@ -1,39 +1,39 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcFileUpload } from "./";
-
-const VARIANT = ["gallery", "file-upload"];
-
-export default {
-  title: "molecules/VcFileUpload",
-  component: VcFileUpload,
-  args: {
-    variant: "gallery",
-  },
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: VARIANT,
-      table: {
-        type: {
-          summary: VARIANT.join(" | "),
-        },
-      },
-    },
-    rules: {
-      control: "object",
-      table: {
-        type: {
-          summary: "keyof IValidationRules | IValidationRules",
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcFileUpload>;
-
-export const Primary: StoryFn<typeof VcFileUpload> = (args) => ({
-  components: { VcFileUpload },
-  setup() {
-    return { args };
-  },
-  template: '<vc-file-upload v-bind="args"></vc-file-upload>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcFileUpload } from "./";
+
+const VARIANT = ["gallery", "file-upload"];
+
+export default {
+  title: "molecules/VcFileUpload",
+  component: VcFileUpload,
+  args: {
+    variant: "gallery",
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(" | "),
+        },
+      },
+    },
+    rules: {
+      control: "object",
+      table: {
+        type: {
+          summary: "keyof IValidationRules | IValidationRules",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcFileUpload>;
+
+export const Primary: StoryFn<typeof VcFileUpload> = (args) => ({
+  components: { VcFileUpload },
+  setup() {
+    return { args };
+  },
+  template: '<vc-file-upload v-bind="args"></vc-file-upload>',
+});

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

@@ -1,10 +1,10 @@
-import { VNode } from "vue";
-import _Form from "./vc-form.vue";
-
-export const VcForm = _Form as typeof _Form & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import { VNode } from "vue";
+import _Form from "./vc-form.vue";
+
+export const VcForm = _Form as typeof _Form & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -1,25 +1,25 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcForm } from "./";
-import { VcInput } from "../vc-input";
-
-export default {
-  title: "molecules/VcForm",
-  component: VcForm,
-} satisfies Meta<typeof VcForm>;
-
-export const Primary: StoryFn<typeof VcForm> = (args) => ({
-  components: { VcForm, VcInput },
-  setup() {
-    return { args };
-  },
-  template: `
-    <vc-form v-bind="args">
-      <template #default>
-        <div class="tw-flex tw-flex-col tw-gap-4">
-          <vc-input label="First Name" />
-          <vc-input label="Last Name" />
-          <vc-input label="Email" />
-        </div>
-      </template>
-    </vc-form>`,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcForm } from "./";
+import { VcInput } from "../vc-input";
+
+export default {
+  title: "molecules/VcForm",
+  component: VcForm,
+} satisfies Meta<typeof VcForm>;
+
+export const Primary: StoryFn<typeof VcForm> = (args) => ({
+  components: { VcForm, VcInput },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-form v-bind="args">
+      <template #default>
+        <div class="tw-flex tw-flex-col tw-gap-4">
+          <vc-input label="First Name" />
+          <vc-input label="Last Name" />
+          <vc-input label="Email" />
+        </div>
+      </template>
+    </vc-form>`,
+});

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

@@ -1,5 +1,5 @@
-<template>
-  <form>
-    <slot>vc-form</slot>
-  </form>
-</template>
+<template>
+  <form>
+    <slot>vc-form</slot>
+  </form>
+</template>

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

@@ -1 +1 @@
-export { default as VcInput } from "./vc-input.vue";
+export { default as VcInput } from "./vc-input.vue";