@vc-shell/framework 1.1.3 → 1.1.5

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

@@ -5,8 +5,8 @@
       <!-- First page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === 1 }"
-        @click="currentPage !== 1 && setPage(1)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
+        @click="localCurrentPage !== 1 && setPage(1)"
       >
         <VcIcon
           size="xs"
@@ -17,8 +17,8 @@
       <!-- Previous page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === 1 }"
-        @click="currentPage !== 1 && setPage(currentPage - 1)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
+        @click="localCurrentPage !== 1 && setPage(localCurrentPage - 1)"
       >
         <VcIcon
           size="xs"
@@ -31,8 +31,8 @@
         :key="page"
         class="vc-pagination__item"
         :class="{
-          'vc-pagination__item_current': page === currentPage,
-          'vc-pagination__item_hover': page !== currentPage,
+          'vc-pagination__item_current': page === localCurrentPage,
+          'vc-pagination__item_hover': page !== localCurrentPage,
         }"
         @click="setPage(page)"
       >
@@ -42,8 +42,8 @@
       <!-- Next page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === pages }"
-        @click="currentPage !== pages && setPage(currentPage + 1)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
+        @click="localCurrentPage !== pages && setPage(localCurrentPage + 1)"
       >
         <VcIcon
           size="xs"
@@ -54,8 +54,8 @@
       <!-- Last page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === pages }"
-        @click="currentPage !== pages && setPage(pages)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
+        @click="localCurrentPage !== pages && setPage(pages)"
       >
         <VcIcon
           size="xs"
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, toRefs, inject, type Ref } from "vue";
+import { ref, computed, toRefs, inject, type Ref, watch } from "vue";
 import { VcIcon } from "./../../";
 import { ArrowLeftIcon, ArrowRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from "./../../atoms/vc-icon/icons";
 
@@ -92,20 +92,29 @@ const emit = defineEmits<Emits>();
 
 const isMobile = inject("isMobile") as Ref<boolean>;
 
-const { currentPage, variant } = toRefs(props);
+const { variant } = toRefs(props);
+const localCurrentPage = ref(props.currentPage);
+
+watch(
+  () => props.currentPage,
+  (newValue) => {
+    localCurrentPage.value = newValue;
+  },
+  { immediate: true },
+);
 
 const setPage = (page: number | string) => {
   if (typeof page === "undefined" || (typeof page === "number" && isNaN(page))) return;
   const pageNumber = typeof page === "string" ? parseInt(page) : page;
   if (pageNumber < 1 || pageNumber > props.pages) return;
-  currentPage.value = pageNumber;
+  localCurrentPage.value = pageNumber;
   emit("itemClick", pageNumber);
 };
 
 const pagesToShow = computed(() => {
   const pages = [];
   const totalPages = props.pages;
-  const current = currentPage.value;
+  const current = localCurrentPage.value;
   const maxPages = isMobile.value ? 3 : 5;
 
   if (totalPages <= maxPages) {

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarHeader.vue

@@ -132,10 +132,10 @@ const hasUnread = computed(() => {
     }
 
     &-image {
-      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-rounded-full tw-overflow-hidden tw-w-full tw-shrink-0;
+      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-overflow-hidden tw-w-full tw-shrink-0;
 
       &--mobile {
-        @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)];
+        @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)] tw-rounded-full;
       }
     }
   }

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -26,9 +26,8 @@
             <VcIcon
               v-show="true"
               class="vc-app-bar__collapse-button-icon"
-              :icon="ChevronLeftIcon"
+              :icon="state.isSidebarExpanded ? ChevronLeftIcon : ChevronRightIcon"
               size="xs"
-              :class="{ 'rotate-180': !state.isSidebarExpanded }"
             />
           </Transition>
         </div>
@@ -112,7 +111,7 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "../../../../";
-import { ChevronLeftIcon } from "../../../../atoms/vc-icon/icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../../../atoms/vc-icon/icons";
 import { useAppMenuState } from "../composables/useAppMenuState";
 import { useAppBarWidgets } from "./composables/useAppBarWidgets";
 import AppBarHeader from "./_internal/AppBarHeader.vue";

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/props.ts

@@ -0,0 +1,14 @@
+import { Ref, ComputedRef } from "vue";
+
+export interface Props {
+  id?: string;
+  icon?: string | (() => string);
+  disabled?: boolean | ComputedRef<boolean | undefined>;
+  title?: string | Ref<string> | ComputedRef<string>;
+  size?: "s" | "m";
+  separator?: "left" | "right" | "both";
+  contentDirection?: "row" | "row-reverse" | "column";
+  iconClassName?: string;
+  titleClassName?: string;
+  onClick?: () => Promise<void> | void;
+}

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

@@ -34,19 +34,8 @@
 <script lang="ts" setup>
 import { ref, ComputedRef, Ref } from "vue";
 import { VcIcon } from "../../../../../../../../";
+import type { Props } from "./props";
 
-export interface Props {
-  id?: string;
-  icon?: string | (() => string);
-  disabled?: boolean | ComputedRef<boolean | undefined>;
-  title?: string | Ref<string> | ComputedRef<string>;
-  size?: "s" | "m";
-  separator?: "left" | "right" | "both";
-  contentDirection?: "row" | "row-reverse" | "column";
-  iconClassName?: string;
-  titleClassName?: string;
-  onClick?: () => Promise<void> | void;
-}
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,

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

@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import VcBladeToolbarBaseButton from "./vc-blade-toolbar-base-button.vue";
-import type { Props as BaseButtonProps } from "./vc-blade-toolbar-base-button.vue";
+import type { Props as BaseButtonProps } from "./props";
 
 export interface Props extends Omit<BaseButtonProps, "size" | "contentDirection" | "iconClassName"> {
   isMain?: boolean;

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

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, computed, inject, onBeforeMount, onBeforeUnmount, watch, useSlots } from "vue";
+import { ComputedRef, computed, inject, onBeforeMount, onBeforeUnmount, watch, useSlots, reactive } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import { usePermissions, useToolbar } from "../../../../../../core/composables";
 import { IBladeToolbar } from "../../../../../../core/types";
@@ -41,7 +41,8 @@ const props = withDefaults(defineProps<Props>(), {
 const slots = useSlots();
 const isExpanded = useLocalStorage("VC_BLADE_TOOLBAR_IS_EXPANDED", true);
 const { hasAccess } = usePermissions();
-const { registerToolbarItem, unregisterToolbarItem, getToolbarItems, clearBladeToolbarItems } = useToolbar();
+const { registerToolbarItem, unregisterToolbarItem, getToolbarItems, clearBladeToolbarItems, updateToolbarItem } =
+  useToolbar();
 
 // Get the ID of the current blade
 const blade = inject<ComputedRef<IBladeInstance>>(
@@ -58,43 +59,80 @@ const blade = inject<ComputedRef<IBladeInstance>>(
 
 const bladeId = computed(() => blade.value?.id ?? FALLBACK_BLADE_ID);
 
+const isMobile = inject<ComputedRef<boolean>>(
+  "isMobile",
+  computed(() => false),
+);
+
 // Prefix for prop items to avoid ID conflicts
 const PROP_ITEM_ID_PREFIX = "prop_toolbar_item_";
 
-// Generate IDs for items without them
-function ensureItemHasId(item: IBladeToolbar, index: number): IToolbarItem {
-  const itemCopy = { ...item } as IToolbarItem;
-  if (!("id" in itemCopy) || !itemCopy.id) {
-    itemCopy.id = `${PROP_ITEM_ID_PREFIX}${bladeId.value}_${index}`;
-  }
-  return itemCopy;
-}
+// Create map to track registered item IDs
+const registeredItemIds = reactive(new Map<number, string>());
+
+// Convert IBladeToolbar to IToolbarItem
+function convertToToolbarItem(item: IBladeToolbar, index: number): IToolbarItem {
+  const id = item.id || `${PROP_ITEM_ID_PREFIX}${bladeId.value}_${index}`;
 
-// Register prop items in the service
-function registerPropItems() {
-  // Unregister previous items first to avoid duplicates
-  unregisterPropItems();
+  return {
+    ...item,
+    id,
+    bladeId: bladeId.value,
+    priority: index * -1,
+  } as unknown as IToolbarItem;
+}
 
-  // Register new items
+// Update all items from props
+function updateItems(): void {
+  // Register new items or update existing ones
   props.items.forEach((item, index) => {
-    const toolbarItem = ensureItemHasId(item, index);
-    registerToolbarItem(toolbarItem);
+    const id = registeredItemIds.get(index);
+
+    if (id) {
+      // Item already registered, update it
+      const toolbarItem = convertToToolbarItem(item, index);
+      updateToolbarItem(id, toolbarItem);
+    } else {
+      // New item, register it
+      const toolbarItem = convertToToolbarItem(item, index);
+      registerToolbarItem(toolbarItem);
+      registeredItemIds.set(index, toolbarItem.id);
+    }
+  });
+
+  // Remove items that no longer exist in props.items
+  const indices = [...registeredItemIds.keys()];
+  indices.forEach((index) => {
+    if (index >= props.items.length) {
+      const id = registeredItemIds.get(index);
+      if (id) {
+        unregisterToolbarItem(id);
+        registeredItemIds.delete(index);
+      }
+    }
   });
 }
 
-// Unregister prop items from the service
-function unregisterPropItems() {
-  const itemsToRemove = getToolbarItems().filter((item) => item.id.startsWith(PROP_ITEM_ID_PREFIX + bladeId.value));
+// Unregister all toolbar items
+function clearToolbarItems(): void {
+  // Clear all previously registered items
+  for (const id of registeredItemIds.values()) {
+    unregisterToolbarItem(id);
+  }
 
-  itemsToRemove.forEach((item) => {
-    unregisterToolbarItem(item.id);
-  });
+  // Clear the map
+  registeredItemIds.clear();
 }
 
 // Filter visible items from service
 const visibleItems = computed(() => {
   return getToolbarItems()
-    .filter((item) => hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible) && !item.disabled)
+    .filter(
+      (item) =>
+        hasAccess(item.permissions) &&
+        (item.isVisible === undefined || item.isVisible) &&
+        (isMobile.value ? !item.disabled : true),
+    )
     .sort((a, b) => {
       const priorityA = a.priority ?? 0;
       const priorityB = b.priority ?? 0;
@@ -106,19 +144,14 @@ const visibleItems = computed(() => {
 watch(
   () => props.items,
   () => {
-    registerPropItems();
+    updateItems();
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
-// Initial registration
-onBeforeMount(() => {
-  registerPropItems();
-});
-
 // Cleanup on unmount
 onBeforeUnmount(() => {
-  unregisterPropItems();
+  clearToolbarItems();
 });
 </script>
 

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

@@ -287,7 +287,7 @@ import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-cu
 import VcInput from "../../../../molecules/vc-input/vc-input.vue";
 import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
-import type { TableItem } from "../../vc-table.vue";
+import type { TableItem } from "../../types";
 import { ITableColumns } from "../../../../../../core/types";
 
 export interface Props {

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
-import { TableColPartial } from "../../vc-table.vue";
+import { TableColPartial } from "../../types";
 import { GenericDropdown } from "../../../../../../shared/components/generic-dropdown";
 
 export interface Props {

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-body/vc-table-body.vue

@@ -74,7 +74,7 @@
 import VcTableRow from "../vc-table-row/vc-table-row.vue";
 import VcTableEmpty from "../../../vc-table-empty/vc-table-empty.vue";
 import type { IActionBuilderResult } from "../../../../../../../../core/types";
-import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../../../vc-table.vue";
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../../../types";
 import { MaybeRef, useSlots } from "vue";
 
 defineProps<{

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-columns-header/vc-table-columns-header.vue

@@ -111,7 +111,7 @@
 import { toRefs, ref } from "vue";
 import { VcCheckbox, VcIcon } from "../../../../../..";
 import VcTableColumnSwitcher from "../../../vc-table-column-switcher/vc-table-column-switcher.vue";
-import type { TableItem, TableColPartial } from "../../../../vc-table.vue";
+import type { TableItem, TableColPartial } from "../../../../types";
 import { useTableColumnReorder } from "../../../../composables/useTableColumnReorder";
 import { useTableColumnResize } from "../../../../composables/useTableColumnResize";
 import { ITableColumns } from "../../../../../../../../core/types";

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-row/vc-table-row.vue

@@ -105,7 +105,7 @@
 <script lang="ts" setup generic="T extends TableItem | string">
 import { VcCheckbox, VcIcon, VcTooltip } from "../../../../../../";
 import VcTableCell from "../../../vc-table-cell/vc-table-cell.vue";
-import type { TableItem, TableColPartial } from "../../../../vc-table.vue";
+import type { TableItem, TableColPartial } from "../../../../types";
 import type { IActionBuilderResult, ITableColumns } from "../../../../../../../../core/types";
 import { MaybeRef } from "vue";
 defineProps<{

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/vc-table-desktop-view.vue

@@ -94,7 +94,7 @@ import VcTableSelectAllHeader from "./_internal/vc-table-select-all-header/vc-ta
 import VcTableBody from "./_internal/vc-table-body/vc-table-body.vue";
 import type { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
 import { useTableRowReorder } from "../../composables/useTableRowReorder";
-import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../vc-table.vue";
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../types";
 
 const props = defineProps<{
   items: T[];

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

@@ -189,7 +189,7 @@ import { computed } from "vue";
 import VcTableCell from "../vc-table-cell/vc-table-cell.vue";
 import VcTableEmpty from "../vc-table-empty/vc-table-empty.vue";
 import VcTableMobileItem from "../vc-table-mobile-item/vc-table-mobile-item.vue";
-import type { TableItem, StatusImage } from "../../vc-table.vue";
+import type { TableItem, StatusImage } from "../../types";
 import { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
 import { provideTableSwipe } from "../../composables/useTableSwipe";
 

package/ui/components/organisms/vc-table/composables/useTableActions.ts

@@ -1,6 +1,6 @@
 import { Ref, ref, shallowRef } from "vue";
 import { IActionBuilderResult } from "../../../../../core/types";
-import type { TableItem } from "./../vc-table.vue";
+import type { TableItem } from "./../types";
 
 export interface UseTableActionsOptions<T extends TableItem | string> {
   enableItemActions?: boolean;

package/ui/components/organisms/vc-table/composables/useTableColumnReorder.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from "vue";
-import { TableItem, TableColPartial } from "../vc-table.vue";
+import { TableItem, TableColPartial } from "../types";
 
 export function useTableColumnReorder<T extends TableItem | string>(
   internalColumns: Ref<TableColPartial[]>,

package/ui/components/organisms/vc-table/composables/useTableColumnResize.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from "vue";
-import { TableColPartial } from "../vc-table.vue";
+import { TableColPartial } from "../types";
 import * as _ from "lodash-es";
 
 export function useTableColumnResize(

package/ui/components/organisms/vc-table/composables/useTableRowReorder.ts

@@ -1,5 +1,5 @@
 import { computed, ref, Ref } from "vue";
-import { TableItem } from "../vc-table.vue";
+import { TableItem } from "../types";
 
 export function useTableRowReorder<T extends TableItem | string>(
   items: Ref<T[]>,

package/ui/components/organisms/vc-table/composables/useTableSelection.ts

@@ -1,5 +1,5 @@
 import { computed, ref, Ref, watch } from "vue";
-import { TableItem } from "../vc-table.vue";
+import { TableItem } from "../types";
 import * as _ from "lodash-es";
 
 type TableItemType = TableItem | string;

package/ui/components/organisms/vc-table/composables/useTableState.ts

@@ -2,7 +2,7 @@
 import { ref, Ref, computed, toValue, toRefs, MaybeRef } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import * as _ from "lodash-es";
-import { TableColPartial } from "../vc-table.vue";
+import { TableColPartial } from "../types";
 import { ITableColumns } from "../../../../../core/types";
 
 export interface UseTableStateOptions {

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

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Ref, VNode } from "vue";
+import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
+
+export interface TableSlots<T> {
+  header: (props: { header: VNode }) => any;
+  filters: (args: { closePanel: () => void }) => any;
+  "mobile-item": (args: { item: T }) => any;
+  [key: `header_${string}`]: (props: any) => any;
+  [key: `item_${string}`]: (args: { item: T; cell: ITableColumns | TableColPartial; index: number }) => any;
+  notfound: (props: any) => any;
+  empty: (props: any) => any;
+  footer: (props: any) => any;
+}
+
+export interface TableItem {
+  [x: string]: any;
+  actions?: IActionBuilderResult<any>[];
+}
+
+export type TableColPartial = Partial<
+  ITableColumns & {
+    predefined?: boolean;
+  }
+>;
+
+export interface StatusImage {
+  image?: string;
+  text: string | Ref<string>;
+  action?: string;
+  clickHandler?: () => void;
+}

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

@@ -168,7 +168,7 @@
       :pages="pages"
       :current-page="currentPage"
       :pagination-variant="paginationVariant"
-      @item-click="
+      @pagination-click="
         (event: number) => {
           //scroll table to top
           tableBody?.scrollTo(0, 0);
@@ -197,35 +197,7 @@ import VcTableDesktopView from "./_internal/vc-table-desktop-view/vc-table-deskt
 import VcTableHeader from "./_internal/vc-table-header/vc-table-header.vue";
 import VcTableSelectAll from "./_internal/vc-table-select-all/vc-table-select-all.vue";
 import VcTableFooter from "./_internal/vc-table-footer/vc-table-footer.vue";
-
-export interface StatusImage {
-  image?: string;
-  text: string | Ref<string>;
-  action?: string;
-  clickHandler?: () => void;
-}
-
-export interface TableItem {
-  [x: string]: any;
-  actions?: IActionBuilderResult<any>[];
-}
-
-export type TableColPartial = Partial<
-  ITableColumns & {
-    predefined?: boolean;
-  }
->;
-
-export interface TableSlots<T> {
-  header: (props: { header: VNode }) => any;
-  filters: (args: { closePanel: () => void }) => any;
-  "mobile-item": (args: { item: T }) => any;
-  [key: `header_${string}`]: (props: any) => any;
-  [key: `item_${string}`]: (args: { item: T; cell: ITableColumns | TableColPartial; index: number }) => any;
-  notfound: (props: any) => any;
-  empty: (props: any) => any;
-  footer: (props: any) => any;
-}
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "./types";
 
 defineSlots<TableSlots<T>>();