@vc-shell/framework 1.0.60 → 1.0.61

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -39,7 +39,7 @@
     >
       <template v-if="expandable">
         <div
-          v-if="expanded"
+          v-if="maximized"
           class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onCollapse"
         >
@@ -71,15 +71,15 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../../../../ui/components";
+import { VcIcon } from "./../../../../";
 
 export interface Props {
-  expandable?: boolean | undefined;
-  expanded?: boolean | undefined;
-  closable?: boolean | undefined;
-  title?: string | undefined;
-  subtitle?: string | undefined;
-  icon?: string | undefined;
+  expandable?: boolean;
+  maximized?: boolean;
+  closable?: boolean;
+  title?: string;
+  subtitle?: string;
+  icon?: string;
 }
 const props = defineProps<Props>();
 

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -27,6 +27,7 @@
           class="vc-blade-toolbar-button__dropdown"
           v-if="isDropActive"
           ref="bladeDropRef"
+          :style="dropStyle"
         >
           <div
             class="vc-blade-toolbar-button__dropdown-item"
@@ -47,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, ref } from "vue";
+import { defineComponent, ref, computed, nextTick } from "vue";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -55,8 +56,8 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../../../../../components";
-import { createPopper, Instance } from "@popperjs/core";
+import { VcIcon } from "./../../../../../../";
+import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 
 export interface Props {
@@ -65,7 +66,7 @@ export interface Props {
   title?: string | unknown;
   bladeOptions?: Record<string, unknown>;
   disabled?: boolean;
-  dropdownItems?: { id: number; title: string; icon?: string; clickHandler?(): void }[];
+  dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;
 }
 
@@ -84,13 +85,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const popper = ref<Instance>();
+const popper = ref<ComputePositionReturn>();
 const isWaiting = ref(false);
 const isDropActive = ref(false);
 const bladeDropToggle = ref();
 const dropButtonRef = ref();
 const bladeDropRef = ref();
 
+const dropStyle = computed(() => ({
+  top: `${popper.value?.y ?? 0}px`,
+  left: `${popper.value?.x ?? 0}px`,
+}));
+
 async function onClick(): Promise<void> {
   console.debug("vc-blade-toolbar-item#onClick()");
 
@@ -114,21 +120,14 @@ function toggleDropdown() {
   if (props.dropdownItems?.length) {
     if (isDropActive.value) {
       isDropActive.value = false;
-      popper.value?.destroy();
     } else {
       isDropActive.value = true;
+
       nextTick(() => {
-        popper.value = createPopper(bladeDropToggle.value, bladeDropRef.value, {
+        computePosition(bladeDropToggle.value, bladeDropRef.value, {
           placement: "bottom",
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [70, 5],
-              },
-            },
-          ],
-        });
+          middleware: [offset(10)],
+        }).then((item) => (popper.value = item));
       });
     }
   }

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -33,6 +33,7 @@
 import { IBladeToolbar } from "./../../../../../../core/types";
 import { ref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
+import { VcIcon } from "./../../../../";
 
 export interface Props {
   items: IBladeToolbar[];

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

@@ -1,45 +1,39 @@
-/**
- * Blade component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcBlade from "./vc-blade.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcBlade } from "./";
 
-export default {
-  title: "organisms/vc-blade",
+const meta: Meta<typeof VcBlade> = {
+  title: "organisms/VcBlade",
   component: VcBlade,
-  argTypes: {
-    collapse: { action: "collapse", name: "collapse" },
-    expand: { action: "expand", name: "expand" },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcBlade },
-  setup() {
-    return { args };
-  },
-  template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
-});
+export default meta;
+type Story = StoryObj<typeof VcBlade>;
 
-export const Blade = Template.bind({});
-Blade.storyName = "vc-blade";
-Blade.args = {
-  icon: "fas fa-star",
-  title: "My Awesome Blade",
-  subtitle: "Optional Subtitle",
-  width: 700,
-  closable: false,
-  searchable: false,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcBlade },
+    setup() {
+      return { args };
+    },
+    template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
+  }),
+  args: {
+    icon: "fas fa-star",
+    title: "My Awesome Blade",
+    subtitle: "Optional Subtitle",
+    width: 700,
+    closable: false,
+    expandable: false,
 
-  toolbarItems: [
-    { id: 1, icon: "fas fa-sync-alt", title: "Refresh" },
-    { id: 2, icon: "fas fa-plus", title: "Add" },
-    { id: 3, icon: "fas fa-trash", title: "Delete", disabled: true },
-    { id: 4, icon: "fas fa-download", title: "Import" },
-    { id: 5, icon: "fas fa-upload", title: "Export" },
-    { id: 6, icon: "fas fa-cut", title: "Cut", disabled: true },
-    { id: 7, icon: "fas fa-paste", title: "Paste", disabled: true },
-    { id: 8, icon: "fas fa-cubes", title: "Bulk export", disabled: true },
-  ],
+    toolbarItems: [
+      { id: "1", icon: "fas fa-sync-alt", title: "Refresh" },
+      { id: "2", icon: "fas fa-plus", title: "Add" },
+      { id: "3", icon: "fas fa-trash", title: "Delete", disabled: true },
+      { id: "4", icon: "fas fa-download", title: "Import" },
+      { id: "5", icon: "fas fa-upload", title: "Export" },
+      { id: "6", icon: "fas fa-cut", title: "Cut", disabled: true },
+      { id: "7", icon: "fas fa-paste", title: "Paste", disabled: true },
+      { id: "8", icon: "fas fa-cubes", title: "Bulk export", disabled: true },
+    ],
+  },
 };

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

@@ -1,19 +1,30 @@
 <template>
   <div
     class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
+    :class="[
+      $attrs.class,
+      {
+        '!tw-w-full': $isMobile.value,
+        '!tw-w-full !tw-shrink': expanded,
+        '!tw-absolute !tw-z-[2] !tw-top-0 !tw-bottom-0 !tw-left-0 ![width:-webkit-fill-available] !tw-mx-4 !tw-shrink':
+          maximized,
+      },
+    ]"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[$attrs.class, { '!tw-w-full !tw-shrink': $isMobile.value || expanded }]"
   >
     <!-- Init blade header -->
     <VcBladeHeader
       class="tw-shrink-0"
       v-if="!$isMobile.value || closable"
-      :expanded="expanded"
+      :maximized="maximized"
+      :expandable="isExpandable"
       :closable="closable"
       :icon="icon"
       :title="title"
       :subtitle="subtitle"
       @close="$emit('close')"
+      @expand="$emit('expand')"
+      @collapse="$emit('collapse')"
     >
       <template
         v-slot:actions
@@ -34,8 +45,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
+import { IBladeContainer } from "./../../../../shared";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -52,22 +64,35 @@ export interface Props {
   subtitle?: string;
   width?: number | string;
   expanded?: boolean;
+  maximized?: boolean;
+  expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
   onClose?: () => void;
+  blades?: IBladeContainer[];
 }
 
 export interface Emits {
   (event: "close"): void;
+  (event: "expand"): void;
+  (event: "collapse"): void;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   width: "30%",
   closable: true,
+  expandable: true,
   toolbarItems: () => [],
 });
 
 defineEmits<Emits>();
+
+const isExpandable = computed(() => {
+  if (!props.expandable) {
+    return props.expandable;
+  }
+  return props.blades?.length !== 0;
+});
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -329,6 +329,7 @@
 import { ref, onMounted, computed } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
+import { VcSelect, VcInput, VcTextarea, VcCheckbox, VcCodeEditor } from "./../../";
 
 export interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -71,6 +71,7 @@
 import { ref } from "vue";
 import { clickOutside as vClickOutside } from "./../../../../../../core/directives";
 import { IImage } from "./../../../../../../core/types";
+import { VcImage, VcIcon } from "./../../../../";
 
 export interface Props {
   image: IImage;

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

@@ -61,7 +61,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { VcPopup } from "./../../../../../components";
+import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
 import { IImage } from "./../../../../../../core/types";
 
 export interface Props {

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } 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> = {
+  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",
+        sortOrder: 0,
+      },
+      {
+        title: "Title",
+        name: "Name",
+        url: "https://placekitten.com/800/600",
+        sortOrder: 1,
+      },
+    ],
+    variant: "gallery",
+  },
+};

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: {