@vc-shell/framework 1.0.120 → 1.0.121

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

@@ -2,7 +2,7 @@
   <div
     class="vc-blade-toolbar-button"
     :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
-    :title="title as string"
+    :title="title"
     @click="onClick"
   >
     <div ref="dropButtonRef">
@@ -56,7 +56,7 @@ import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 export interface Props {
   isExpanded: boolean;
   icon?: string | (() => string);
-  title?: string | unknown;
+  title?: string;
   options?: Record<string, unknown>;
   disabled?: boolean;
   dropdownItems?: IBladeDropdownItem[];

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

@@ -13,7 +13,7 @@
           v-if="item.isVisible === undefined || item.isVisible"
           :is-expanded="isExpanded"
           :icon="item.icon"
-          :title="item.title"
+          :title="unref(item.title)"
           :options="item.options"
           :disabled="item.disabled as boolean"
           :dropdown-items="item.dropdownItems"
@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { IBladeToolbar } from "./../../../../../../core/types";
-import { ref } from "vue";
+import { ref, unref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
 import { VcIcon } from "./../../../../";
 

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

@@ -110,7 +110,7 @@ const { open } = usePopup({
     title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
   },
   slots: {
-    default: computed(() => error.value),
+    default: computed(() => error?.value),
   },
 });
 

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

@@ -191,7 +191,7 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends {[x:string]: any; id?: string}">
-import { ref, onMounted, computed, watch } from "vue";
+import { ref, onMounted, computed, Ref } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import { VcSelect, VcInput, VcTextarea, VcCheckbox } from "./../../";
@@ -244,7 +244,7 @@ const emit = defineEmits<{
 
 const { locale, te, t } = useI18n({ useScope: "global" });
 
-const items = ref([]);
+const items: Ref<any[]> = ref([]);
 const loading = ref(false);
 
 const computedProperty = computed(() => {
@@ -305,7 +305,7 @@ onMounted(async () => {
   await getOptions();
 });
 
-async function getOptions(keyword: string = null) {
+async function getOptions(keyword: string | undefined = undefined) {
   if (props.optionsGetter) {
     try {
       loading.value = true;

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

@@ -33,7 +33,7 @@
             @drop="onItemDrop($event, image)"
           ></VcGalleryItem>
           <VcFileUpload
-            v-if="!disabled && !hideAfterUpload"
+            v-if="!disabled && !defaultImages.length"
             class="tw-m-2"
             :icon="uploadIcon"
             :variant="variant"
@@ -84,8 +84,6 @@ export interface Props {
     edit: boolean;
     remove: boolean;
   };
-  disableDrag?: boolean;
-  hideAfterUpload?: boolean;
   rules?: string | Record<string, unknown>;
   name?: string;
   loading?: boolean;
@@ -123,6 +121,7 @@ const reorderGalleryRef = ref<HTMLElement>();
 const dropPosition = ref<number>();
 
 const currentIndex = computed(() => previewImageIndex.value);
+const disableDrag = computed(() => defaultImages.value.length <= 1);
 
 const { open } = usePopup(
   computed(() => ({
@@ -165,14 +164,14 @@ const updateOrder = () => {
 };
 
 function onItemMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
-  if (!props.disableDrag && !props.disabled) {
+  if (!disableDrag.value && !props.disabled) {
     event.currentTarget.draggable = true;
     return;
   }
 }
 
 function onItemDragStart(event: DragEvent, item: IImage) {
-  if (!props.disableDrag && !props.disabled) {
+  if (!disableDrag.value && !props.disabled) {
     draggedItem.value = item;
     draggedElement.value = event.target as HTMLElement;
     event.dataTransfer?.setData("text", "gallery_reorder");
@@ -182,7 +181,7 @@ function onItemDragStart(event: DragEvent, item: IImage) {
 function onItemDragOver(event: DragEvent) {
   const dropItem = findParentElement(event.target as HTMLElement);
 
-  if (!props.disableDrag && !props.disabled && draggedItem.value && dropItem) {
+  if (!disableDrag.value && !props.disabled && draggedItem.value && dropItem) {
     event.preventDefault();
 
     const containerOffset = galleryRef.value?.getBoundingClientRect();
@@ -213,7 +212,7 @@ function onItemDragOver(event: DragEvent) {
 }
 
 function onItemDragLeave(event: DragEvent) {
-  if (!props.disableDrag && !props.disabled && draggedItem.value && reorderGalleryRef.value) {
+  if (!disableDrag.value && !props.disabled && draggedItem.value && reorderGalleryRef.value) {
     event.preventDefault();
 
     reorderGalleryRef.value.style.display = "none";

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

@@ -9,6 +9,7 @@
           :color="notificationStyle.color"
           :title="notification.title ?? ''"
           :icon="notificationStyle.icon"
+          :notification="notification"
         >
           <VcHint
             v-if="notification.description"
@@ -17,18 +18,12 @@
           >
         </VcNotificationTemplate>
       </template>
-      <div class="tw-flex tw-shrink-0">
-        <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
-          {{ pushTime }}
-        </p>
-      </div>
     </VcRow>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, h } from "vue";
-import moment from "moment";
 import { PushNotification } from "./../../../../../../core/api/platform";
 import { VcRow, VcNotificationTemplate } from "./../../../../";
 import { NotificationTemplateConstructor } from "./../../../../../../core/types";
@@ -46,17 +41,11 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
-const locale = window.navigator.language;
-
 const notificationStyle = computed(() => ({
   color: "#A9BCCD",
   icon: "fas fa-info",
 }));
 
-const pushTime = computed(() => {
-  return moment(props.notification.created).locale(locale).format("L LT");
-});
-
 const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
 
 function notificationTemplateRenderer() {

package/ui/components/organisms/vc-notification-template/index.ts

@@ -1,3 +1 @@
-import _NotificationTemplate from "./vc-notification-template.vue";
-
-export const VcNotificationTemplate = _NotificationTemplate as typeof _NotificationTemplate;
+export { default as VcNotificationTemplate } from "./vc-notification-template.vue";

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

@@ -1,33 +1,51 @@
 <template>
-  <div class="tw-flex tw-items-center">
-    <div
-      class="tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-white tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0"
-      :style="{ 'background-color': color }"
-    >
-      <VcIcon
-        :icon="icon"
-        size="l"
-      ></VcIcon>
-    </div>
-    <div>
-      <p
-        class="tw-text-[color:var(--basic-black-color)] tw-text-xl tw-leading-[19px] tw-font-bold tw-m-0 tw-mb-1"
-        :class="{ 'tw-mr-4': $isDesktop.value }"
+  <div class="tw-flex flex-row tw-justify-between tw-grow tw-basis-0">
+    <div class="tw-flex tw-items-center">
+      <div
+        class="tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-white tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0"
+        :style="{ 'background-color': color }"
       >
-        {{ title }}
+        <VcIcon
+          :icon="icon"
+          size="l"
+        ></VcIcon>
+      </div>
+      <div>
+        <p
+          class="tw-text-[color:var(--basic-black-color)] tw-text-xl tw-leading-[19px] tw-font-bold tw-m-0 tw-mb-1"
+          :class="{ 'tw-mr-4': $isDesktop.value }"
+        >
+          {{ title }}
+        </p>
+        <slot></slot>
+      </div>
+    </div>
+    <div class="tw-flex tw-shrink-0">
+      <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
+        {{ pushTime }}
       </p>
-      <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { VcIcon } from "./../../";
+import moment from "moment";
+import { PushNotification } from "../../../../core/api/platform";
+
 export interface Props {
   color: string;
   icon: string;
   title: string;
+  notification: PushNotification;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const locale = window.navigator.language;
+
+const pushTime = computed(() => {
+  return moment(props.notification.created).locale(locale).format("L LT");
+});
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <!-- Money cell -->
   <template v-if="cell.type === 'money'">
-    <template v-if="value > 0">
+    <template v-if="typeof Number(value) === 'number' && Number(value) > 0">
       <span>{{ Math.trunc(Number(value)) }}</span
       ><span class="tw-text-[#a5a5a5] tw-text-xs"
         >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
@@ -33,8 +33,8 @@
         {{ moment(value).locale(locale).format(cell.format) }}
       </template>
       <template v-else>
-        <template v-if="cell.type === 'date'">{{ value.toLocaleDateString() }}</template>
-        <template v-if="cell.type === 'time'">{{ value.toLocaleTimeString() }}</template>
+        <template v-if="cell.type === 'date'">{{ value instanceof Date && value.toLocaleDateString() }}</template>
+        <template v-if="cell.type === 'time'">{{ value instanceof Date && value.toLocaleTimeString() }}</template>
         <template v-if="cell.type === 'date-time'">{{ value.toLocaleString() }}</template>
       </template>
     </template>
@@ -47,7 +47,7 @@
       :bordered="true"
       size="s"
       aspect="1x1"
-      :src="value"
+      :src="(value as string)"
       background="contain"
     />
   </template>
@@ -62,7 +62,7 @@
     v-else-if="cell.type === 'status-icon'"
     class="tw-flex tw-justify-center"
   >
-    <VcStatusIcon :status="value"></VcStatusIcon>
+    <VcStatusIcon :status="(value as boolean)"></VcStatusIcon>
   </div>
 
   <!-- Number cell -->
@@ -97,7 +97,7 @@ export interface Props {
 const props = defineProps<Props>();
 
 const locale = window.navigator.language;
-const value = computed(() => {
+const value = computed((): unknown => {
   return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {
     if (p && Array.isArray(p) && p.length) {
       const val = p && p[0][c];

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

@@ -270,7 +270,7 @@
                   class="vc-table__body-actions-container tw-relative tw-flex tw-justify-center tw-items-center tw-group"
                 >
                   <button
-                    :ref="(el: Element) => setActionToggleRefs(el, item.id)"
+                    :ref="(el) => setActionToggleRefs(el, item.id)"
                     class="tw-text-[#41afe6] tw-cursor-pointer tw-border-none tw-bg-transparent disabled:tw-text-[gray] tw-w-full"
                     :class="{
                       'group-hover:tw-text-[#319ed4]': itemActions[itemIndex] && itemActions[itemIndex].length,
@@ -285,7 +285,7 @@
                   </button>
                   <div
                     v-show="selectedRow === item.id"
-                    :ref="(el: Element) => setTooltipRefs(el, item.id)"
+                    :ref="(el) => setTooltipRefs(el, item.id)"
                     class="vc-table__body-tooltip tw-bg-white tw-rounded-[4px] tw-p-[15px] tw-z-[1] tw-absolute tw-right-0 tw-drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)] tw-w-max"
                     :style="tooltipStyle"
                     @mouseleave="closeActions"
@@ -314,7 +314,7 @@
                       </div>
                     </div>
                     <div
-                      :ref="(el: Element) => setTooltipArrowRefs(el, item.id)"
+                      :ref="(el) => setTooltipArrowRefs(el, item.id)"
                       class="vc-table__body-tooltip-arrow"
                       :style="arrowStyle"
                     ></div>
@@ -435,13 +435,14 @@ import {
   onBeforeMount,
   nextTick,
   MaybeRef,
+  ComponentPublicInstance,
 } from "vue";
 import VcTableCounter from "./_internal/vc-table-counter/vc-table-counter.vue";
 import VcTableFilter from "./_internal/vc-table-filter/vc-table-filter.vue";
 import VcTableMobileItem from "./_internal/vc-table-mobile-item/vc-table-mobile-item.vue";
 import VcTableCell from "./_internal/vc-table-cell/vc-table-cell.vue";
 import VcTableColumnSwitcher from "./_internal/vc-table-column-switcher/vc-table-column-switcher.vue";
-import { offset, flip, arrow, computePosition, ComputePositionReturn } from "@floating-ui/vue";
+import { offset, flip, arrow, computePosition, ComputePositionReturn, ReferenceElement } from "@floating-ui/vue";
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import { useLocalStorage, useCurrentElement } from "@vueuse/core";
 import { VcContainer, VcInput, VcCheckbox, VcIcon, VcPagination, VcButton } from "./../../";
@@ -522,7 +523,7 @@ const props = withDefaults(
 );
 
 interface ITableItemRef {
-  element: Element;
+  element: Element | ComponentPublicInstance;
   id: string;
 }
 
@@ -712,7 +713,7 @@ function rowCheckbox(item: T) {
   }
 }
 
-function setTooltipRefs(el: Element, id: string) {
+function setTooltipRefs(el: Element | ComponentPublicInstance | null, id: string) {
   if (el) {
     const isExists = tooltipRefs.value.some((item) => item.id === id);
     if (!isExists) {
@@ -721,7 +722,7 @@ function setTooltipRefs(el: Element, id: string) {
   }
 }
 
-function setActionToggleRefs(el: Element, id: string) {
+function setActionToggleRefs(el: Element | ComponentPublicInstance | null, id: string) {
   if (el) {
     const isExists = actionToggleRefs.value.some((item) => item.id === id);
     if (!isExists) {
@@ -730,7 +731,7 @@ function setActionToggleRefs(el: Element, id: string) {
   }
 }
 
-function setTooltipArrowRefs(el: Element, id: string) {
+function setTooltipArrowRefs(el: Element | ComponentPublicInstance | null, id: string) {
   if (el) {
     const isExists = tooltipArrowRefs.value?.some((item) => item.id === id);
     if (!isExists) {
@@ -754,7 +755,7 @@ function showActions(item: T, index: string) {
 
     if (toggleRef && tooltipRef && tooltipArrowRef) {
       nextTick(() => {
-        computePosition(toggleRef, tooltipRef as HTMLElement, {
+        computePosition(toggleRef as ReferenceElement, tooltipRef as HTMLElement, {
           placement: "bottom",
           middleware: [
             flip({ fallbackPlacements: ["top", "bottom"] }),
@@ -1145,11 +1146,11 @@ function onRowDragLeave(event: DragEvent) {
   rowElement.classList.remove("vc-table__drag-row-bottom");
 }
 
-function onRowDragEnd(event: DragEvent & { currentTarget?: { draggable: boolean } }) {
+function onRowDragEnd(event: DragEvent) {
   rowDragged.value = false;
   draggedRowIndex.value = undefined;
   droppedRowIndex.value = undefined;
-  event.currentTarget.draggable = false;
+  (event.currentTarget as HTMLElement).draggable = false;
 }
 
 function onRowDrop(event: DragEvent) {