@vc-shell/framework 1.0.118 → 1.0.120

package/shared/modules/dynamic/types/models.ts

@@ -95,6 +95,7 @@ export type IStatusField = {
 export type IInputField = {
   props: ComponentProps<typeof VcInput> | IControlBaseProps;
   options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcInput>, "append" | "prepend" | "append-inner" | "prepend-inner">>;
 } & FieldOpts<typeof VcInput>;
 
 export type IContentField = {

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

@@ -10,6 +10,11 @@
       :required="required"
     >
       <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        #tooltip
+        >{{ tooltip }}</template
+      >
     </VcLabel>
     <label class="vc-checkbox__label">
       <input
@@ -57,6 +62,7 @@ export interface Props {
   trueValue?: boolean;
   falseValue?: boolean;
   label?: string;
+  tooltip?: string;
 }
 
 export interface Emits {

package/ui/components/atoms/vc-col/index.ts

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

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

@@ -15,12 +15,17 @@ export interface Props {
 withDefaults(defineProps<Props>(), {
   size: "1",
 });
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
 </script>
 
 <style lang="scss">
-.vc-col {
-  .vc-app_mobile & {
-    @apply tw-grow #{!important};
-  }
-}
+// .vc-col {
+//   .vc-app_mobile & {
+//     @apply tw-grow #{!important};
+//   }
+// }
 </style>

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

@@ -99,7 +99,7 @@ $paddings: xs, s, m, l, xl, xxl;
 
   @each $padding in $paddings {
     &_#{$padding} {
-      @apply tw-w-[var(--image-size-#{$padding})];
+      @apply tw-w-[var(--image-size-#{$padding})] tw-max-w-full tw-min-w-0;
     }
   }
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="tw-flex tw-flex-nowrap tw-font-bold tw-relative">
-    <span><slot></slot></span>
+    <span class="tw-truncate"><slot></slot></span>
     <span
       v-if="required"
       class="tw-text-[color:var(--label-required-color)] tw-ml-1"

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

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

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

@@ -4,10 +4,17 @@
   </div>
 </template>
 
+<script setup lang="ts">
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
+</script>
+
 <style lang="scss">
 .vc-row {
   .vc-app_mobile & {
-    display: block;
+    display: grid;
   }
 }
 </style>

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

@@ -9,22 +9,22 @@
         >{{ tooltip }}</template
       ></VcLabel
     >
-    <div>
-      <VcFieldType
-        :value="modelValue"
-        :type="type"
-      >
-        <VcButton
-          v-if="copyable"
-          icon="far fa-copy"
-          size="m"
-          class="tw-ml-2"
-          text
-          @click="copy(modelValue)"
-        ></VcButton>
-      </VcFieldType>
-    </div>
+    <!-- <div> -->
+    <VcFieldType
+      :value="modelValue"
+      :type="type"
+    >
+      <VcButton
+        v-if="copyable"
+        icon="far fa-copy"
+        size="m"
+        class="tw-ml-2"
+        text
+        @click="copy(modelValue)"
+      ></VcButton>
+    </VcFieldType>
   </div>
+  <!-- </div> -->
 </template>
 
 <script lang="ts" setup>

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

@@ -7,7 +7,7 @@
     <template #title>
       <div>
         <span>{{ currentImage.name }} (</span>
-        <VcLink @click="copyLink(currentImage.url)">{{
+        <VcLink @click="copyLink(currentImage.url ?? '')">{{
           t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK")
         }}</VcLink>
         <span>)</span>

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

@@ -175,7 +175,7 @@ function onItemDragStart(event: DragEvent, item: IImage) {
   if (!props.disableDrag && !props.disabled) {
     draggedItem.value = item;
     draggedElement.value = event.target as HTMLElement;
-    event.dataTransfer.setData("text", "gallery_reorder");
+    event.dataTransfer?.setData("text", "gallery_reorder");
   }
 }
 
@@ -185,33 +185,35 @@ function onItemDragOver(event: DragEvent) {
   if (!props.disableDrag && !props.disabled && draggedItem.value && dropItem) {
     event.preventDefault();
 
-    const containerOffset = galleryRef.value.getBoundingClientRect();
+    const containerOffset = galleryRef.value?.getBoundingClientRect();
     const dropItemOffset = dropItem.getBoundingClientRect();
 
-    if (draggedElement.value !== dropItem) {
+    if (draggedElement.value !== dropItem && containerOffset) {
       const elementStyle = getComputedStyle(dropItem);
       const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
       const targetLeft = dropItemOffset.left - containerOffset.left;
       const columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
 
-      reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
-      reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
+      if (reorderGalleryRef.value) {
+        reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
+        reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
 
-      if (event.pageX > columnCenter) {
-        reorderGalleryRef.value.style.left = targetLeft + dropItemOffsetWidth + "px";
-        dropPosition.value = 1;
-      } else {
-        reorderGalleryRef.value.style.left = targetLeft - parseFloat(elementStyle.marginLeft) + "px";
-        dropPosition.value = -1;
-      }
+        if (event.pageX > columnCenter) {
+          reorderGalleryRef.value.style.left = targetLeft + dropItemOffsetWidth + "px";
+          dropPosition.value = 1;
+        } else {
+          reorderGalleryRef.value.style.left = targetLeft - parseFloat(elementStyle.marginLeft) + "px";
+          dropPosition.value = -1;
+        }
 
-      reorderGalleryRef.value.style.display = "block";
+        reorderGalleryRef.value.style.display = "block";
+      }
     }
   }
 }
 
 function onItemDragLeave(event: DragEvent) {
-  if (!props.disableDrag && !props.disabled && draggedItem.value) {
+  if (!props.disableDrag && !props.disabled && draggedItem.value && reorderGalleryRef.value) {
     event.preventDefault();
 
     reorderGalleryRef.value.style.display = "none";
@@ -241,10 +243,12 @@ function onItemDrop(event: DragEvent, item: IImage) {
       updateOrder();
     }
 
-    reorderGalleryRef.value.style.display = "none";
-    draggedElement.value.draggable = false;
-    draggedItem.value = null;
-    dropPosition.value = null;
+    if (reorderGalleryRef.value && draggedElement.value) {
+      reorderGalleryRef.value.style.display = "none";
+      draggedElement.value.draggable = false;
+      draggedItem.value = undefined;
+      dropPosition.value = undefined;
+    }
   }
 }
 
@@ -265,8 +269,8 @@ function findParentElement(element: HTMLElement) {
   } else {
     let parent = element.parentElement;
 
-    while (!parent.classList.contains("vc-gallery__item")) {
-      parent = parent.parentElement;
+    while (!(parent && parent.classList.contains("vc-gallery__item"))) {
+      parent = parent?.parentElement || null;
       if (!parent) break;
     }
     return parent;

package/ui/components/organisms/vc-notification-dropdown/_internal/notification/notification.vue

@@ -7,7 +7,7 @@
       <template v-else>
         <VcNotificationTemplate
           :color="notificationStyle.color"
-          :title="notification.title"
+          :title="notification.title ?? ''"
           :icon="notificationStyle.icon"
         >
           <VcHint
@@ -42,9 +42,7 @@ export interface Emits {
   (event: "onClick"): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  notification: undefined,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 

package/ui/components/organisms/vc-notification-dropdown/vc-notification-dropdown.vue

@@ -65,7 +65,7 @@
           >
             <NotificationItem
               :notification="item"
-              :templates="templates"
+              :templates="templates || []"
               @on-click="() => (isDropdownVisible = false)"
             />
           </div>

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

@@ -47,6 +47,11 @@ import VcPopupError from "./_internal/vc-popup-error/vc-popup-error.vue";
 import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
+  components: {
+    VcIcon,
+    VcPopupWarning,
+    VcPopupError,
+  },
   props: {
     title: {
       type: String,

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

@@ -58,7 +58,7 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, nextTick } from "vue";
-import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
+import { offset, computePosition, ComputePositionReturn, ReferenceElement } from "@floating-ui/vue";
 
 export interface Props {
   title?: string;
@@ -100,10 +100,12 @@ function openPanel(isMobile: boolean) {
   if (!isMobile) {
     if (isPanelVisible.value) {
       nextTick(() => {
-        computePosition(filterToggle.value, filterPanel.value, {
-          placement: "bottom-end",
-          middleware: [offset(10)],
-        }).then((item) => (popper.value = item));
+        if (filterToggle.value && filterPanel.value) {
+          computePosition(filterToggle.value as ReferenceElement, filterPanel.value, {
+            placement: "bottom-end",
+            middleware: [offset(10)],
+          }).then((item) => (popper.value = item));
+        }
       });
     }
   }

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

@@ -17,7 +17,7 @@
       <div
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].variant}`]"
-        @click.stop="leftSwipeActions[0].clickHandler(item)"
+        @click.stop="leftSwipeActions[0].clickHandler(item as T)"
       >
         <VcIcon :icon="leftSwipeActions[0].icon"></VcIcon>
         <div class="tw-mt-1 tw-text-lg">
@@ -40,7 +40,7 @@
       <div
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${rightSwipeActions[0].variant}`]"
-        @click.stop="rightSwipeActions[0].clickHandler(item)"
+        @click.stop="rightSwipeActions[0].clickHandler(item as T)"
       >
         <VcIcon :icon="rightSwipeActions[0].icon"></VcIcon>
         <div class="vc-table-mobile__item-action-text">
@@ -53,7 +53,7 @@
         v-if="rightSwipeActions.length === 2"
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${rightSwipeActions[1].variant}`]"
-        @click.stop="rightSwipeActions[1].clickHandler(item)"
+        @click.stop="rightSwipeActions[1].clickHandler(item as T)"
       >
         <VcIcon :icon="rightSwipeActions[1].icon"></VcIcon>
         <div class="tw-mt-1 tw-text-lg">
@@ -99,7 +99,7 @@
                   v-for="(itemAction, i) in itemActions"
                   :key="i"
                   class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
-                  @click="itemAction.clickHandler(item)"
+                  @click="itemAction.clickHandler(item as T)"
                 >
                   <VcIcon
                     :icon="itemAction.icon"
@@ -119,7 +119,7 @@
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
-import { computed, ref, watch } from "vue";
+import { Ref, computed, ref, watch } from "vue";
 import { IActionBuilderResult } from "./../../../../../../core/types";
 import { useI18n } from "vue-i18n";
 
@@ -133,16 +133,11 @@ export interface TableItem {
   actions?: IActionBuilderResult[];
 }
 
-const props = withDefaults(
-  defineProps<{
-    item: T;
-    actionBuilder?: (item: T) => IActionBuilderResult[];
-    swipingItem?: string;
-  }>(),
-  {
-    swipingItem: null,
-  }
-);
+const props = defineProps<{
+  item: T;
+  actionBuilder?: (item: T) => IActionBuilderResult[];
+  swipingItem?: string;
+}>();
 
 const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
@@ -154,7 +149,7 @@ const isMoving = ref(false);
 const threshold = 10;
 const maxWidth = 80;
 const isActionsPopupVisible = ref(false);
-const itemActions = ref([]);
+const itemActions: Ref<IActionBuilderResult<T>[]> = ref([]);
 
 watch(
   () => props.swipingItem,

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

@@ -143,7 +143,7 @@
               >
                 <div
                   class="tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3"
-                  :class="tableAlignment[item.align]"
+                  :class="item.align ? tableAlignment[item.align as keyof typeof tableAlignment] : ''"
                 >
                   <div class="tw-truncate">
                     <slot :name="`header_${item.id}`">{{ item.title }}</slot>
@@ -187,7 +187,7 @@
                 class="tw-sticky tw-h-[42px] tw-z-[1] tw-right-0 tw-top-0 tw-table-cell tw-align-middle tw-w-0"
               >
                 <VcTableColumnSwitcher
-                  :items="toggleCols"
+                  :items="toggleCols.filter((col): col is  ITableColumns => col !== undefined)"
                   @change="toggleColumn"
                 ></VcTableColumnSwitcher>
               </div>
@@ -547,8 +547,8 @@ const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
 
 // event listeners
-let columnResizeListener: (...args: any[]) => any = null;
-let columnResizeEndListener: (...args: any[]) => any = null;
+let columnResizeListener: ((...args: any[]) => any) | null = null;
+let columnResizeEndListener: ((...args: any[]) => any) | null = null;
 
 const selection = ref<T[]>([]) as Ref<T[]>;
 const allSelected = ref(false);
@@ -732,9 +732,9 @@ function setActionToggleRefs(el: Element, id: string) {
 
 function setTooltipArrowRefs(el: Element, id: string) {
   if (el) {
-    const isExists = tooltipArrowRefs.value.some((item) => item.id === id);
+    const isExists = tooltipArrowRefs.value?.some((item) => item.id === id);
     if (!isExists) {
-      tooltipArrowRefs.value.push({ element: el, id });
+      tooltipArrowRefs.value?.push({ element: el, id });
     }
   }
 }
@@ -748,9 +748,9 @@ function showActions(item: T, index: string) {
 
     selectedRow.value = item.id;
 
-    const toggleRef = actionToggleRefs.value.find((item) => item.id === index).element;
-    const tooltipRef = tooltipRefs.value.find((item) => item.id === index).element;
-    const tooltipArrowRef = tooltipArrowRefs.value.find((item) => item.id === index).element;
+    const toggleRef = actionToggleRefs.value.find((item) => item.id === index)?.element;
+    const tooltipRef = tooltipRefs.value.find((item) => item.id === index)?.element;
+    const tooltipArrowRef = tooltipArrowRefs.value?.find((item) => item.id === index)?.element;
 
     if (toggleRef && tooltipRef && tooltipArrowRef) {
       nextTick(() => {
@@ -868,42 +868,44 @@ function getOffset(element: HTMLElement) {
   const rect = element.getBoundingClientRect();
   const win = element.ownerDocument.defaultView;
   return {
-    top: rect.top + win.pageYOffset,
-    left: rect.left + win.pageXOffset,
+    top: rect.top + ((win && win.scrollY) ?? 0),
+    left: rect.left + ((win && win.scrollX) ?? 0),
   };
 }
 
 function onColumnResizeEnd() {
-  const delta = resizer.value.offsetLeft - lastResize.value;
+  const delta = resizer.value.offsetLeft - (lastResize.value ?? 0);
 
-  const columnElement: HTMLElement = table.value.querySelector(`#${resizeColumnElement.value.id}`);
+  const columnElement: HTMLElement | null = table.value.querySelector(`#${resizeColumnElement.value?.id}`);
 
-  const columnWidth = columnElement.offsetWidth;
-  const newColumnWidth = columnWidth + delta;
+  if (columnElement) {
+    const columnWidth = columnElement.offsetWidth;
+    const newColumnWidth = columnWidth + delta;
 
-  const minWidth = 15;
+    const minWidth = 15;
 
-  if (columnWidth + delta > parseInt(minWidth.toString(), 10) && resizeColumnElement.value) {
-    nextColumn.value = filteredCols.value[filteredCols.value.indexOf(resizeColumnElement.value) + 1];
+    if (columnWidth + delta > parseInt(minWidth.toString(), 10) && resizeColumnElement.value) {
+      nextColumn.value = filteredCols.value[filteredCols.value.indexOf(resizeColumnElement.value) + 1];
 
-    if (nextColumn.value) {
-      const nextColElement = table.value.querySelector(`#${nextColumn.value.id}`);
+      if (nextColumn.value) {
+        const nextColElement = table.value.querySelector(`#${nextColumn.value.id}`);
 
-      const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
-      if (newColumnWidth > 15 && nextColumnWidth > 15) {
-        resizeTableCells(newColumnWidth, nextColumnWidth);
-      }
-    } else {
-      if (newColumnWidth > 15) {
-        resizeColumnElement.value.width = newColumnWidth + "px";
+        const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
+        if (newColumnWidth > 15 && nextColumnWidth > 15) {
+          resizeTableCells(newColumnWidth, nextColumnWidth);
+        }
+      } else {
+        if (newColumnWidth > 15) {
+          resizeColumnElement.value.width = newColumnWidth + "px";
+        }
       }
     }
-  }
-  resizer.value.style.display = "none";
+    resizer.value.style.display = "none";
 
-  unbindColumnResizeEvents();
+    unbindColumnResizeEvents();
 
-  saveState();
+    saveState();
+  }
 }
 
 function resizeTableCells(newColumnWidth: number, nextColumnWidth: number) {