@vc-shell/framework 1.0.180 → 1.0.182

package/ui/components/organisms/vc-gallery/vc-gallery.stories.ts

@@ -1,47 +1,91 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcGallery } from "./";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
 import { VcLabel, VcFileUpload, VcHint } from "./../../";
 
-const meta: Meta<typeof VcGallery> = {
+export default {
   title: "organisms/VcGallery",
   component: VcGallery,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcGallery>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: {
-      VcGallery,
-      VcGalleryItem,
-      VcGalleryPreview,
-      VcLabel,
-      VcFileUpload,
-      VcHint,
-    },
-    setup() {
-      return { args };
-    },
-    template: '<div class="tw-flex tw-h-[400px] tw-overflow-hidden"><vc-gallery v-bind="args"></vc-gallery></div>',
-  }),
   args: {
     images: [
       {
         title: "Title",
         name: "Name",
-        url: "https://placekitten.com/800/600",
+        url: "https://picsum.photos/200",
         sortOrder: 0,
       },
       {
         title: "Title",
         name: "Name",
-        url: "https://placekitten.com/800/600",
+        url: "https://picsum.photos/200",
         sortOrder: 1,
       },
     ],
     variant: "gallery",
   },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["gallery", "file-upload"],
+    },
+  },
+} satisfies Meta<typeof VcGallery>;
+
+export const Primary: StoryFn = (args) => ({
+  components: {
+    VcGallery,
+    VcGalleryItem,
+    VcGalleryPreview,
+    VcLabel,
+    VcFileUpload,
+    VcHint,
+  },
+  setup() {
+    return { args };
+  },
+  template: '<div class="tw-flex tw-h-[400px] tw-overflow-hidden"><vc-gallery v-bind="args"></vc-gallery></div>',
+});
+
+export const Label = Primary.bind({});
+Label.args = {
+  label: "Gallery",
+};
+
+export const Disabled = Primary.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Required = Primary.bind({});
+Required.args = {
+  label: "Gallery",
+  required: true,
+};
+
+export const Tooltip = Primary.bind({});
+Tooltip.args = {
+  label: "Gallery",
+  tooltip: "Tooltip",
+};
+
+export const FileUploading = Primary.bind({});
+FileUploading.args = {
+  label: "Gallery",
+  loading: true,
+};
+
+export const SingleFileUpload = Primary.bind({});
+SingleFileUpload.args = {
+  label: "Gallery",
+  images: [],
+  variant: "file-upload",
+};
+
+export const SingleFileUploadWithCustomUploadIcon = Primary.bind({});
+SingleFileUploadWithCustomUploadIcon.args = {
+  label: "Gallery",
+  images: [],
+  variant: "file-upload",
+  uploadIcon: "fas fa-user",
 };

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -2,11 +2,14 @@
   <div class="vc-gallery">
     <VcLabel
       v-if="label"
-      :tooltip="tooltip"
       :required="required"
-      :tooltip-icon="tooltipIcon"
     >
-      {{ label }}
+      <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        #tooltip
+        >{{ tooltip }}</template
+      >
     </VcLabel>
 
     <template v-if="(defaultImages && defaultImages.length) || !disabled">
@@ -74,7 +77,6 @@ export interface Props {
   required?: boolean;
   label?: string;
   tooltip?: string;
-  tooltipIcon?: string;
   uploadIcon?: string;
   multiple?: boolean;
   variant?: "gallery" | "file-upload";
@@ -98,8 +100,7 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   images: () => [],
-  tooltipIcon: "fas fa-info",
-  uploadIcon: "fas fa-upload",
+  uploadIcon: "fas fa-cloud-upload-alt",
   variant: "gallery",
   itemActions: () => ({
     preview: true,

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -126,7 +126,7 @@ import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogTitle } fro
 interface Props {
   title?: string;
   closable?: boolean;
-  variant: "default" | "error" | "warning" | "success";
+  variant?: "default" | "error" | "warning" | "success";
   isMobileFullscreen?: boolean;
   isFullscreen?: boolean;
   modalWidth?: string;
@@ -144,6 +144,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  header: void;
+  content: void;
+  footer: (props: { close: () => void }) => void;
+}>();
+
 const isMobile = inject("isMobile") as Ref<boolean>;
 
 const icon = computed(() => {

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -133,6 +133,7 @@ export interface Props {
 
 const props = defineProps<Props>();
 
+// TODO fix on russian locale
 const locale = window.navigator.language;
 const value = computed((): unknown => {
   return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {

package/ui/components/organisms/vc-table/vc-table.stories.ts

@@ -1,36 +1,14 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcTable } from "./";
-// import VcHint from "../../atoms/vc-hint/vc-hint.vue";
-// import VcImage from "../../atoms/vc-image/vc-image.vue";
+import VcHint from "../../atoms/vc-hint/vc-hint.vue";
+import VcImage from "../../atoms/vc-image/vc-image.vue";
+import { ref, unref } from "vue";
 
-const meta: Meta<typeof VcTable> = {
+export default {
   title: "organisms/VcTable",
-  // component: VcTable,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcTable>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    // components: { VcTable, VcHint, VcImage },
-    setup() {
-      return { args };
-    },
-    template: `
-    <div class= "tw-flex tw-h-[400px] tw-overflow-hidden">
-      <vc-table v-bind="args">
-         <template v-slot:item_name="itemData">
-            <div class= "tw-flex tw-flex-col">
-               <div>{{ itemData.item.name }}</div>
-               <vc-hint>{{ itemData.item.description }}</vc-hint>
-            </div>
-         </template>
-      </vc-table>
-    </div>
-   `,
-  }),
+  component: VcTable as Record<keyof typeof VcTable, unknown>,
+  decorators: [() => ({ template: '<div class="tw-flex tw-h-[400px] tw-overflow-hidden"><story/></div>' })],
   args: {
     multiselect: true,
     stateKey: "storybook_table",
@@ -93,4 +71,140 @@ export const Primary: Story = {
       },
     ],
   },
+} satisfies Meta<typeof VcTable>;
+
+export const Primary: StoryFn<typeof VcTable> = (args) => ({
+  components: { VcTable, VcHint, VcImage } as Record<keyof typeof VcTable, unknown>,
+  setup() {
+    return { args };
+  },
+  template: `
+      <vc-table v-bind="args">
+         <template v-slot:item_name="itemData">
+            <div class= "tw-flex tw-flex-col">
+               <div>{{ itemData.item.name }}</div>
+               <vc-hint>{{ itemData.item.description }}</vc-hint>
+            </div>
+         </template>
+      </vc-table>
+   `,
+});
+
+export const Loading = Primary.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const WithoutHeader = Primary.bind({});
+WithoutHeader.args = {
+  header: false,
+};
+
+export const WithoutFooter = Primary.bind({});
+WithoutFooter.args = {
+  footer: false,
+};
+
+export const DisabledColumnsResizing = Primary.bind({});
+DisabledColumnsResizing.args = {
+  resizableColumns: false,
+};
+
+export const DisabledColumnsReordering = Primary.bind({});
+DisabledColumnsReordering.args = {
+  reorderableColumns: false,
 };
+
+export const WithReorderableRows: StoryFn<typeof VcTable> = (args) => ({
+  components: { VcTable, VcHint, VcImage } as Record<keyof typeof VcTable, unknown>,
+  setup() {
+    const items = ref([
+      {
+        id: "1",
+        img: "/images/1.jpg",
+        name: "Lenovo IdeaCentre 310S-08",
+        description: "Physical",
+        sku: "990555005",
+      },
+      {
+        id: "2",
+        img: "/images/2.jpg",
+        name: "BLU Win HD LTE X150Q 8GB",
+        description: "Physical",
+        sku: "003578948",
+      },
+      {
+        id: "3",
+        img: "/images/3.jpg",
+        name: "Samsung Galaxy S6 SM-G920F 32GB",
+        description: "Physical",
+        sku: "334590-095",
+      },
+      {
+        id: "4",
+        img: "/images/4.jpg",
+        name: "DJI Phantom 3 Professional Quadcopter",
+        description: "Physical",
+        sku: "000545432",
+      },
+      {
+        id: "5",
+        img: "/images/5.jpg",
+        name: "3DR X8-M Octocopter for Visual-Spectr",
+        description: "Physical",
+        sku: "435344443",
+      },
+    ]);
+    const itemsProxy = ref(items.value);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function sortRows(event: { dragIndex: number; dropIndex: number; value: any[] }) {
+      if (event.dragIndex !== event.dropIndex) {
+        const sorted = event.value.map((item, index) => {
+          item.sortOrder = index;
+          return item;
+        });
+
+        itemsProxy.value = sorted;
+      }
+    }
+    return { args, itemsProxy, sortRows };
+  },
+  template: `
+
+      <vc-table v-bind="args" reorderableRows :items="itemsProxy" @row:reorder="sortRows">
+         <template v-slot:item_name="itemData">
+            <div class= "tw-flex tw-flex-col">
+               <div>{{ itemData.item.name }}</div>
+               <vc-hint>{{ itemData.item.description }}</vc-hint>
+            </div>
+         </template>
+      </vc-table>
+
+   `,
+});
+
+export const SelectAllItems: StoryFn<typeof VcTable> = (args) => ({
+  components: { VcTable, VcHint, VcImage } as Record<keyof typeof VcTable, unknown>,
+  setup() {
+    const selectedIds = ref();
+    const onSelectionChanged = (i: any) => {
+      const item = unref(i)
+        .map((item: any) => item.id)
+        .filter((x: any): x is string => x !== null);
+
+      selectedIds.value = item;
+    };
+    return { args, onSelectionChanged, pages: 2 };
+  },
+  template: `
+      <vc-table v-bind="args" select-all @selection-changed="onSelectionChanged" :pages="pages">
+         <template v-slot:item_name="itemData">
+            <div class= "tw-flex tw-flex-col">
+               <div>{{ itemData.item.name }}</div>
+               <vc-hint>{{ itemData.item.description }}</vc-hint>
+            </div>
+         </template>
+      </vc-table>
+   `,
+});

package/ui/components/organisms/vc-table/vc-table.vue

@@ -174,7 +174,10 @@
                   </div>
                 </div>
                 <div
-                  class="tw-w-3 tw-top-0 tw-bottom-0 tw-cursor-col-resize tw-absolute tw-right-0 tw-flex tw-justify-end"
+                  class="tw-w-3 tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end"
+                  :class="{
+                    'tw-cursor-col-resize': props.resizableColumns,
+                  }"
                   @mousedown="handleMouseDown($event, item)"
                 >
                   <div class="tw-w-px tw-bg-[#e5e7eb] tw-h-full"></div>
@@ -818,12 +821,14 @@ function handleHeaderClick(item: ITableColumns) {
 }
 
 function handleMouseDown(e: MouseEvent, item: ITableColumns) {
-  const containerLeft = getOffset(table.value as HTMLElement).left;
-  resizeColumnElement.value = item;
-  columnResizing.value = true;
-  lastResize.value = e.pageX - containerLeft + table.value.scrollLeft;
+  if (props.resizableColumns) {
+    const containerLeft = getOffset(table.value as HTMLElement).left;
+    resizeColumnElement.value = item;
+    columnResizing.value = true;
+    lastResize.value = e.pageX - containerLeft + table.value.scrollLeft;
 
-  bindColumnResizeEvents();
+    bindColumnResizeEvents();
+  }
 }
 
 function bindColumnResizeEvents() {
@@ -975,7 +980,8 @@ function onColumnHeaderDragOver(event: DragEvent) {
     }
   }
 }
-
+// TODO column width fix
+// TODO tootip on date date ago full time on hover
 function onColumnHeaderDragLeave(event: DragEvent) {
   if (props.reorderableColumns && draggedColumn.value) {
     event.preventDefault();

package/dist/ui/components/organisms/vc-login-form/vc-login-form.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcLoginForm } from "./";
-declare const meta: Meta<typeof VcLoginForm>;
-export default meta;
-type Story = StoryObj<typeof VcLoginForm>;
-export declare const Primary: Story;
-//# sourceMappingURL=vc-login-form.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"vc-login-form.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-login-form/vc-login-form.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC"}

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

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcPopup } from "./";
-declare const meta: Meta<typeof VcPopup>;
-export default meta;
-type Story = StoryObj<typeof VcPopup>;
-export declare const Primary: Story;
-//# sourceMappingURL=vc-popup.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"vc-popup.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-popup/vc-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAE7B,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,KASrB,CAAC"}

package/ui/components/organisms/vc-login-form/vc-login-form.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcLoginForm } from "./";
-import { VcInput, VcButton } from "./../../";
-
-const meta: Meta<typeof VcLoginForm> = {
-  title: "organisms/VcLoginForm",
-  component: VcLoginForm,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcLoginForm>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcLoginForm, VcInput, VcButton },
-    setup() {
-      return { args };
-    },
-    template: `<vc-login-form v-bind="args">
-    <vc-input
-        ref="loginField"
-        class="tw-mb-4 tw-mt-1"
-        label="Username"
-        placeholder="Enter username"
-    ></vc-input>
-    <vc-input
-        ref="passwordField"
-        class="tw-mb-4"
-        label="Password"
-        placeholder="Enter password"
-        type="password"
-    ></vc-input>
-    <div
-        class="
-            flex
-            tw-justify-center
-            tw-items-center
-            tw-pt-2
-          "
-    >
-      <span class="tw-grow tw-basis-0"></span>
-      <vc-button >
-        Submit
-      </vc-button>
-    </div>
-  </vc-login-form>`,
-  }),
-  args: {
-    background: "images/background.jpg",
-    logo: "images/logo-white.svg",
-  },
-};

package/ui/components/organisms/vc-popup/vc-popup.stories.ts

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