@vc-shell/framework 1.0.59 → 1.0.61

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

@@ -31,7 +31,6 @@
             @dragover="onItemDragOver"
             @dragleave="onItemDragLeave"
             @drop="onItemDrop($event, image)"
-            @touchstart="onItemMouseDown"
           ></VcGalleryItem>
           <VcFileUpload
             v-if="!disabled && !hideAfterUpload"
@@ -69,7 +68,7 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import { IImage } from "../../../../core/types";
-import { VcLabel, VcFileUpload } from "./../../../components";
+import { VcLabel, VcFileUpload, VcHint } from "./../../";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
 
@@ -157,22 +156,24 @@ const updateOrder = () => {
 };
 
 function onItemMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
-  if (!props.disableDrag) {
+  if (!props.disableDrag && !props.disabled) {
     event.currentTarget.draggable = true;
     return;
   }
 }
 
 function onItemDragStart(event: DragEvent, item: IImage) {
-  draggedItem.value = item;
-  draggedElement.value = event.target as HTMLElement;
-  event.dataTransfer.setData("text", "gallery_reorder");
+  if (!props.disableDrag && !props.disabled) {
+    draggedItem.value = item;
+    draggedElement.value = event.target as HTMLElement;
+    event.dataTransfer.setData("text", "gallery_reorder");
+  }
 }
 
 function onItemDragOver(event: DragEvent) {
   let dropItem = findParentElement(event.target as HTMLElement);
 
-  if (!props.disableDrag && draggedItem.value && dropItem) {
+  if (!props.disableDrag && !props.disabled && draggedItem.value && dropItem) {
     event.preventDefault();
 
     let containerOffset = galleryRef.value.getBoundingClientRect();
@@ -201,7 +202,7 @@ function onItemDragOver(event: DragEvent) {
 }
 
 function onItemDragLeave(event: DragEvent) {
-  if (!props.disableDrag && draggedItem.value) {
+  if (!props.disableDrag && !props.disabled && draggedItem.value) {
     event.preventDefault();
 
     reorderGalleryRef.value.style.display = "none";

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

@@ -1,23 +1,22 @@
-/**
- * Login Form component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcLoginForm from "./vc-login-form.vue";
-import VcInput from "../../molecules/vc-input/vc-input.vue";
-import VcButton from "../../atoms/vc-button/vc-button.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcLoginForm } from "./";
+import { VcInput, VcButton } from "./../../";
 
-export default {
-  title: "organisms/vc-login-form",
+const meta: Meta<typeof VcLoginForm> = {
+  title: "organisms/VcLoginForm",
   component: VcLoginForm,
 };
 
-const Template: Story = (args) => ({
-  components: { VcLoginForm, VcInput, VcButton },
-  setup() {
-    return { args };
-  },
-  template: `<vc-login-form v-bind="args">
+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"
@@ -45,11 +44,9 @@ const Template: Story = (args) => ({
       </vc-button>
     </div>
   </vc-login-form>`,
-});
-
-export const LoginForm = Template.bind({});
-LoginForm.storyName = "vc-login-form";
-LoginForm.args = {
-  background: "images/background.jpg",
-  logo: "images/logo-white.svg",
+  }),
+  args: {
+    background: "images/background.jpg",
+    logo: "images/logo-white.svg",
+  },
 };

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -28,8 +28,8 @@
 
 <script lang="ts" setup>
 export interface Props {
-  logo: string;
-  background: string;
+  logo?: string;
+  background?: string;
   title?: string;
 }
 

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

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

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

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

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

@@ -88,7 +88,6 @@
 import { computed } from "vue";
 import moment from "moment";
 import { ITableColumns } from "./../../../../../../core/types";
-import { VcImage, VcStatus, VcStatusIcon, VcLink } from "./../../../../../components";
 
 export interface Props {
   cell: ITableColumns;

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

@@ -36,6 +36,7 @@
         v-if="isPanelVisible"
         @click.self="closePanel"
         ref="filterPanel"
+        :style="filterStyle"
       >
         <div
           class="vc-table-filter__panel-inner tw-bg-white tw-box-border tw-p-5 tw-flex tw-flex-col"
@@ -56,7 +57,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, ref, watch } from "vue";
+import { defineComponent, ref, watch, computed, nextTick } from "vue";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -64,8 +65,7 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import { createPopper, Instance } from "@popperjs/core";
-import { VcIcon } from "./../../../../../components";
+import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 
 export interface Props {
   title: string;
@@ -80,9 +80,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const isPanelVisible = ref(false);
-const filterToggle = ref();
-const filterPanel = ref();
-const popper = ref<Instance>();
+const filterToggle = ref<HTMLElement | null>();
+const filterPanel = ref<HTMLElement | null>();
+
+const popper = ref<ComputePositionReturn>();
 
 watch(
   () => props.parentExpanded,
@@ -91,45 +92,28 @@ watch(
   }
 );
 
+const filterStyle = computed(() => ({
+  top: `${popper.value?.y ?? 0}px`,
+  left: `${popper.value?.x ?? 0}px`,
+}));
+
 function openPanel(isMobile: boolean) {
   isPanelVisible.value = !isPanelVisible.value;
 
   if (!isMobile) {
-    const element = document.querySelector(".vc-blade");
     if (isPanelVisible.value) {
       nextTick(() => {
-        popper.value = createPopper(filterToggle.value, filterPanel.value, {
+        computePosition(filterToggle.value, filterPanel.value, {
           placement: "bottom-end",
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, 10],
-              },
-            },
-            {
-              name: "preventOverflow",
-              options: {
-                boundary: element,
-              },
-            },
-          ],
-        });
+          middleware: [offset(10)],
+        }).then((item) => (popper.value = item));
       });
-    } else {
-      destroyPopper();
     }
   }
 }
 
 function closePanel() {
   isPanelVisible.value = false;
-  destroyPopper();
-}
-
-function destroyPopper() {
-  // To prevent memory leaks Popper needs to be destroyed.
-  popper.value?.destroy();
 }
 </script>
 

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -121,7 +121,6 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 import { IActionBuilderResult } from "./../../../../../../core/types";
-import { VcIcon } from "./../../../../../components";
 
 export interface Props {
   item: {

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

@@ -1,28 +1,26 @@
-/**
- * Table component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcTable from "./vc-table.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { VcTable } from "./";
 import VcHint from "../../atoms/vc-hint/vc-hint.vue";
 import VcImage from "../../atoms/vc-image/vc-image.vue";
 
-export default {
-  title: "organisms/vc-table",
+const meta: Meta<typeof VcTable> = {
+  title: "organisms/VcTable",
   component: VcTable,
 };
 
-const Template: Story = (args) => ({
-  components: { VcTable, VcHint, VcImage },
-  setup() {
-    return { args };
-  },
-  template: `
+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_img="itemData">
-            <vc-image aspect="1x1" size="auto" :tw-border-ed="true" :src="itemData.item.img"></vc-image>
-         </template>
          <template v-slot:item_name="itemData">
             <div class= "tw-flex tw-flex-col">
                <div>{{ itemData.item.name }}</div>
@@ -32,68 +30,67 @@ const Template: Story = (args) => ({
       </vc-table>
     </div>
    `,
-});
+  }),
+  args: {
+    multiselect: true,
+    stateKey: "storybook_table",
 
-export const Table = Template.bind({});
-Table.storyName = "vc-table";
-Table.args = {
-  multiselect: true,
+    columns: [
+      {
+        id: "img",
+        title: "Pic",
+        width: 60,
+        type: "image",
+      },
+      {
+        id: "name",
+        title: "Name",
+        sortable: true,
+      },
+      {
+        id: "sku",
+        title: "SKU",
+        sortable: true,
+        width: 100,
+      },
+    ],
 
-  columns: [
-    {
-      id: "img",
-      title: "Pic",
-      width: 60,
-      class: "pr-0",
-    },
-    {
-      id: "name",
-      title: "Name",
-      sortable: true,
-    },
-    {
-      id: "sku",
-      title: "SKU",
-      sortable: true,
-      width: 100,
-    },
-  ],
-
-  items: [
-    {
-      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",
-    },
-  ],
+    items: [
+      {
+        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",
+      },
+    ],
+  },
 };