@vc-shell/framework 1.0.110 → 1.0.112

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

@@ -24,8 +24,8 @@
             :actions="itemActions"
             :disable-drag="disableDrag"
             @preview="onPreviewClick(i)"
-            @edit="$emit('item:edit', $event)"
-            @remove="$emit('item:remove', $event)"
+            @edit="$emit('edit', $event)"
+            @remove="$emit('remove', $event)"
             @mousedown="onItemMouseDown"
             @dragstart="onItemDragStart($event, image)"
             @dragover="onItemDragOver"
@@ -40,6 +40,7 @@
             :multiple="multiple"
             :rules="rules"
             :name="name"
+            :loading="loading"
             @upload="onUpload"
           ></VcFileUpload>
         </div>
@@ -59,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { MaybeRef, computed, ref, unref, watch } from "vue";
 import { IImage } from "../../../../core/types";
 import { VcLabel, VcFileUpload, VcHint } from "./../../";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
@@ -87,13 +88,14 @@ export interface Props {
   hideAfterUpload?: boolean;
   rules?: string | Record<string, unknown>;
   name?: string;
+  loading?: boolean;
 }
 
 export interface Emits {
   (event: "upload", files: FileList): void;
   (event: "sort", sorted: IImage[]): void;
-  (event: "item:edit", image: IImage): void;
-  (event: "item:remove", image: IImage): void;
+  (event: "edit", image: IImage): void;
+  (event: "remove", image: IImage): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -113,7 +115,7 @@ const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
 const previewImageIndex = ref<number>();
 
-const defaultImages = ref<IImage[]>([]);
+const defaultImages = ref<MaybeRef<IImage[]>>([]);
 const draggedItem = ref<IImage>();
 const draggedElement = ref<HTMLElement>();
 const galleryRef = ref<HTMLElement>();
@@ -135,7 +137,7 @@ const { open } = usePopup(
 watch(
   () => props.images,
   (newVal) => {
-    defaultImages.value = newVal;
+    defaultImages.value = unref(newVal);
   },
   { deep: true, immediate: true }
 );

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

@@ -38,10 +38,16 @@ export interface Props {
   templates: NotificationTemplateConstructor[];
 }
 
+export interface Emits {
+  (event: "onClick"): void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
   notification: undefined,
 });
 
+const emit = defineEmits<Emits>();
+
 const locale = window.navigator.language;
 
 const notificationStyle = computed(() => ({
@@ -58,6 +64,9 @@ const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyTyp
 function notificationTemplateRenderer() {
   const notificationTemplate = currentTemplate.value;
 
-  return notificationTemplate && h(notificationTemplate, { notification: props.notification });
+  return (
+    notificationTemplate &&
+    h(notificationTemplate, { notification: props.notification, onNotificationClick: () => emit("onClick") })
+  );
 }
 </script>

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

@@ -62,11 +62,11 @@
             v-for="item in notifications"
             :key="`notification_${item.id}`"
             class="tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-cursor-pointer last-of-type:tw-border-b-0"
-            @click="handleClick(item)"
           >
             <NotificationItem
               :notification="item"
               :templates="templates"
+              @on-click="() => (isDropdownVisible = false)"
             />
           </div>
         </VcCol>
@@ -96,21 +96,12 @@ export interface Props {
   notifications: PushNotification[];
   templates?: NotificationTemplateConstructor[];
   onOpen?: () => void;
-  onClick?: (notification: PushNotification) => void;
 }
 
 const props = defineProps<Props>();
 const { t } = useI18n({ useScope: "global" });
 const isDropdownVisible = ref(false);
 
-const handleClick = async (notification: PushNotification) => {
-  isDropdownVisible.value = false;
-
-  if (props.onClick && typeof props.onClick === "function") {
-    props.onClick(notification);
-  }
-};
-
 function toggleNotificationsDrop() {
   isDropdownVisible.value = !isDropdownVisible.value;
   if (props.onOpen && typeof props.onOpen === "function") {

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

@@ -1,3 +1 @@
-import _Table from "./vc-table.vue";
-
-export const VcTable = _Table as typeof _Table;
+export { default as VcTable } from "./vc-table.vue";

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

@@ -1,8 +1,8 @@
 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";
+// import VcHint from "../../atoms/vc-hint/vc-hint.vue";
+// import VcImage from "../../atoms/vc-image/vc-image.vue";
 
 const meta: Meta<typeof VcTable> = {
   title: "organisms/VcTable",
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof VcTable>;
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { VcTable, VcHint, VcImage },
+    // components: { VcTable, VcHint, VcImage },
     setup() {
       return { args };
     },

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

@@ -55,10 +55,10 @@
       </div>
     </slot>
 
-    <div class="tw-flex tw-relative tw-overflow-hidden tw-grow">
-      <!-- Table loading overlay -->
-      <VcLoading :active="loading"></VcLoading>
-
+    <div
+      v-loading="unref(loading)"
+      class="tw-flex tw-relative tw-overflow-hidden tw-grow"
+    >
       <!-- Table scroll container -->
       <VcContainer
         v-if="items && items.length"
@@ -143,7 +143,7 @@
               >
                 <div
                   class="tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3"
-                  :class="tableAlignment[item.align as string]"
+                  :class="tableAlignment[item.align]"
                 >
                   <div class="tw-truncate">
                     <slot :name="`header_${item.id}`">{{ item.title }}</slot>
@@ -325,7 +325,7 @@
               <td
                 v-for="cell in filteredCols"
                 :key="`${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`"
-                class="tw-box-border tw-overflow-hidden tw-px-3 tw-truncate"
+                class="tw-box-border tw-overflow-hidden tw-px-3 [&~:not(.vc-image)]:tw-truncate"
                 :class="cell.class"
                 :style="{ maxWidth: cell.width, width: cell.width }"
               >
@@ -423,7 +423,19 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends TableItem | string">
-import { computed, ref, watch, onBeforeUpdate, onBeforeUnmount, Ref, onUpdated, onBeforeMount, nextTick } from "vue";
+import {
+  unref,
+  computed,
+  ref,
+  watch,
+  onBeforeUpdate,
+  onBeforeUnmount,
+  Ref,
+  onUpdated,
+  onBeforeMount,
+  nextTick,
+  MaybeRef,
+} 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";
@@ -432,7 +444,7 @@ import VcTableColumnSwitcher from "./_internal/vc-table-column-switcher/vc-table
 import { offset, flip, arrow, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import { useLocalStorage, useCurrentElement } from "@vueuse/core";
-import { VcContainer, VcInput, VcCheckbox, VcIcon, VcPagination, VcButton, VcLoading } from "./../../";
+import { VcContainer, VcInput, VcCheckbox, VcIcon, VcPagination, VcButton } from "./../../";
 import { useI18n } from "vue-i18n";
 
 export interface StatusImage {
@@ -472,7 +484,7 @@ const props = withDefaults(
     currentPage?: number;
     searchPlaceholder?: string;
     searchValue?: string;
-    loading?: boolean;
+    loading?: MaybeRef<boolean>;
     empty?: StatusImage;
     notfound?: StatusImage;
     header?: boolean;
@@ -515,14 +527,15 @@ interface ITableItemRef {
 }
 
 const emit = defineEmits<{
-  (event: "paginationClick", page: number): void;
-  (event: "selectionChanged", values: T[]): void;
-  (event: "search:change", value: string): void;
-  (event: "headerClick", value: Record<string, unknown>): void;
-  (event: "itemClick", item: T): void;
-  (event: "scroll:ptr"): void;
-  (event: "row:reorder", args: { dragIndex: number; dropIndex: number; value: T[] }): void;
-  (event: "select:all", values: boolean): void;
+  paginationClick: [page: number];
+  selectionChanged: [values: T[]];
+  "search:change": [value: string | number | Date];
+  headerClick;
+  value: [Record<string, unknown>];
+  itemClick: [item: T];
+  "scroll:ptr": [];
+  "row:reorder": [args: { dragIndex: number; dropIndex: number; value: T[] }];
+  "select:all": [values: boolean];
 }>();
 
 const { t } = useI18n({ useScope: "global" });