@vc-shell/framework 1.1.0-alpha.9 → 1.1.0

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

@@ -1,32 +1,16 @@
 <template>
   <div class="vc-blade-toolbar-desktop">
-    <!-- Measure container -->
-    <div class="vc-blade-toolbar-desktop__measure">
-      <template
-        v-for="item in items"
-        :key="`measure-${item.id}`"
-      >
-        <div class="vc-blade-toolbar-desktop__measure-item">
-          <VcBladeToolbarBaseButton
-            v-bind="item"
-            :ref="(el) => (el && '$el' in el ? setElementRef(item.id!, el?.$el) : null)"
-            :show-title="isExpanded"
-          />
-        </div>
-      </template>
-    </div>
-
-    <!-- Actual toolbar content -->
     <div
       ref="toolbarContentRef"
       class="vc-blade-toolbar-desktop__content"
     >
       <template
-        v-for="item in displayedItems"
+        v-for="item in visibleItems"
         :key="item.id"
       >
         <VcBladeToolbarBaseButton
           v-bind="item"
+          :data-item-key="item.id"
           :show-title="isExpanded"
           :on-click="item.clickHandler"
         />
@@ -35,10 +19,10 @@
       <GenericDropdown
         v-if="showMoreButton"
         :opened="isMenuOpen"
-        :items="overflowItems"
+        :items="hiddenItems"
         floating
         placement="bottom-end"
-        variant="light"
+        variant="secondary"
         @item-click="handleItemClick"
         @update:opened="isMenuOpen = $event"
       >
@@ -48,7 +32,7 @@
             :class="{ 'vc-blade-toolbar-desktop__more--active': isActive }"
             @click="toggleToolbar"
           >
-            <VcIcon :icon="CircleDotsIcon" />
+            <VcIcon icon="material-more" />
             <span
               v-if="isExpanded"
               class="vc-blade-toolbar-desktop__more-text"
@@ -60,6 +44,7 @@
 
         <template #item="{ item, click }">
           <VcBladeToolbarBaseButton
+            class="tw-p-3 tw-w-full"
             v-bind="item"
             :show-title="true"
             content-direction="row"
@@ -77,11 +62,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, nextTick, computed, watch, toRef } from "vue";
-import { VcIcon } from "../../../../../../../../../";
+import { ref, toRef, watch, nextTick } from "vue";
 import { GenericDropdown } from "../../../../../../../../../shared/components/generic-dropdown";
-import { CircleDotsIcon } from "../../../../../../../atoms/vc-icon/icons";
-import { useVisibleElements } from "../../../../../../../../composables/useVisibleElements";
+import { VcIcon } from "../../../../../../../atoms/vc-icon";
+import { useAdaptiveItems } from "../../../../../../../../composables/useAdaptiveItems";
 import type { IBladeToolbar } from "../../../../../../../../../core/types";
 import VcBladeToolbarBaseButton from "../_internal/vc-blade-toolbar-button/vc-blade-toolbar-base-button.vue";
 
@@ -93,13 +77,13 @@ const props = defineProps<{
 const isMenuOpen = ref(false);
 const toolbarContentRef = ref<HTMLElement | null>(null);
 
-const { setElementRef, displayedItems, overflowItems, showMoreButton, calculateVisibleElements, setupResizeObserver } =
-  useVisibleElements<IBladeToolbar>({
-    containerRef: toolbarContentRef,
-    items: toRef(props, "items"),
-    getItemId: (item: IBladeToolbar) => item.id ?? "",
-    moreButtonWidth: 70,
-  });
+const { visibleItems, hiddenItems, showMoreButton, recalculate, updateObserver } = useAdaptiveItems<IBladeToolbar>({
+  containerRef: toolbarContentRef,
+  items: toRef(props, "items"),
+  getItemKey: (item) => item.id ?? "",
+  moreButtonWidth: 70,
+  initialItemWidth: 60,
+});
 
 function handleItemClick(item: IBladeToolbar) {
   item.clickHandler?.();
@@ -110,38 +94,15 @@ const toggleToolbar = () => {
   isMenuOpen.value = !isMenuOpen.value;
 };
 
-// Observe DOM changes
-const observer = new MutationObserver(() => {
-  nextTick(calculateVisibleElements);
-});
-
-onMounted(() => {
-  nextTick(() => {
-    if (toolbarContentRef.value) {
-      observer.observe(toolbarContentRef.value, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-      });
-      calculateVisibleElements();
-    }
-  });
-});
-
-// Recalculate when isExpanded changes
 watch(
   () => props.isExpanded,
   () => {
-    nextTick(calculateVisibleElements);
+    nextTick(() => {
+      recalculate();
+      updateObserver();
+    });
   },
 );
-
-// Set up resize observer
-setupResizeObserver();
-
-onBeforeUnmount(() => {
-  observer.disconnect();
-});
 </script>
 
 <style lang="scss">
@@ -153,15 +114,6 @@ onBeforeUnmount(() => {
 .vc-blade-toolbar-desktop {
   @apply tw-w-full tw-relative;
 
-  &__measure {
-    @apply tw-absolute tw-px-4 tw-invisible tw-pointer-events-none tw-flex tw-h-0 tw-overflow-hidden;
-    left: -9999px;
-  }
-
-  &__measure-item {
-    @apply tw-flex;
-  }
-
   &__content {
     @apply tw-flex tw-items-center tw-px-4 tw-h-full;
   }

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

@@ -19,7 +19,7 @@
         class="vc-blade-toolbar-mobile__toggle"
         @click="toggleMenu"
       >
-        <VcIcon icon="fas fa-chevron-up" />
+        <VcIcon icon="material-keyboard_arrow_up" />
       </button>
     </div>
 

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

@@ -20,11 +20,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, useSlots } from "vue";
+import { ComputedRef, computed, inject, onBeforeMount, onBeforeUnmount, watch, useSlots } from "vue";
 import { useLocalStorage } from "@vueuse/core";
-import { usePermissions } from "../../../../../../core/composables";
-import { IBladeToolbar } from "./../../../../../../core/types";
+import { usePermissions, useToolbar } from "../../../../../../core/composables";
+import { IBladeToolbar } from "../../../../../../core/types";
 import VcBladeToolbarButtons from "./_internal/vc-blade-toolbar-buttons/vc-blade-toolbar-buttons.vue";
+import { BladeInstance } from "../../../../../../injection-keys";
+import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
+import { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
+import { IToolbarItem } from "../../../../../../core/services";
 
 export interface Props {
   items: IBladeToolbar[];
@@ -37,11 +41,84 @@ 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();
 
+// Get the ID of the current blade
+const blade = inject<ComputedRef<IBladeInstance>>(
+  BladeInstance,
+  computed(() => ({
+    id: FALLBACK_BLADE_ID,
+    expandable: false,
+    maximized: false,
+    error: undefined,
+    navigation: undefined,
+    breadcrumbs: undefined,
+  })),
+);
+
+const bladeId = computed(() => blade.value?.id ?? FALLBACK_BLADE_ID);
+
+// 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;
+}
+
+// Register prop items in the service
+function registerPropItems() {
+  // Unregister previous items first to avoid duplicates
+  unregisterPropItems();
+
+  // Register new items
+  props.items.forEach((item, index) => {
+    const toolbarItem = ensureItemHasId(item, index);
+    registerToolbarItem(toolbarItem);
+  });
+}
+
+// Unregister prop items from the service
+function unregisterPropItems() {
+  const itemsToRemove = getToolbarItems().filter((item) => item.id.startsWith(PROP_ITEM_ID_PREFIX + bladeId.value));
+
+  itemsToRemove.forEach((item) => {
+    unregisterToolbarItem(item.id);
+  });
+}
+
+// Filter visible items from service
 const visibleItems = computed(() => {
-  return props.items.filter(
-    (item) => hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible) && !item.disabled,
-  );
+  return getToolbarItems()
+    .filter((item) => hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible) && !item.disabled)
+    .sort((a, b) => {
+      const priorityA = a.priority ?? 0;
+      const priorityB = b.priority ?? 0;
+      return priorityB - priorityA;
+    });
+});
+
+// Watch for changes in props.items
+watch(
+  () => props.items,
+  () => {
+    registerPropItems();
+  },
+  { deep: true },
+);
+
+// Initial registration
+onBeforeMount(() => {
+  registerPropItems();
+});
+
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  unregisterPropItems();
 });
 </script>
 
@@ -50,7 +127,7 @@ const visibleItems = computed(() => {
   --blade-toolbar-height: 54px;
   --blade-toolbar-height-expanded: 54px;
   --blade-toolbar-background-color: var(--additional-50);
-  --blade-toolbar-border-color: var(--base-border-color, var(--neutrals-200));
+  --blade-toolbar-border-color: var(--neutrals-200);
   --blade-toolbar-icon-color: var(--neutrals-700);
   --blade-toolbar-icon-hover-color: var(--primary-600);
 }

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/index.ts

@@ -1,2 +1,2 @@
-export { default as WidgetContainerDesktop } from './vc-widget-container-desktop.vue';
-export { default as WidgetContainerMobile } from './vc-widget-container-mobile.vue';
+export { default as WidgetContainerDesktop } from "./vc-widget-container-desktop.vue";
+export { default as WidgetContainerMobile } from "./vc-widget-container-mobile.vue";

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-desktop.vue

@@ -15,7 +15,7 @@
         :items="overflowItems"
         floating
         placement="bottom-end"
-        variant="light"
+        variant="secondary"
         @update:opened="showToolbar = $event"
       >
         <template #trigger="{ isActive }">
@@ -31,6 +31,7 @@
         <template #item="{ item }">
           <component
             :is="item.component"
+            class="tw-p-3 tw-w-full"
             v-bind="item.props || {}"
             horizontal
             v-on="item.events || {}"
@@ -43,7 +44,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { IWidget } from "../../../../../../../core/types/widget";
+import { IWidget } from "../../../../../../../core/services";
 import { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
 import { VcIcon, ChevronDownIcon } from "../../../../..";
 
@@ -55,7 +56,11 @@ const props = defineProps<Props>();
 const showToolbar = ref(false);
 
 const displayedItems = computed(() => props.widgets.slice(0, 3));
-const overflowItems = computed(() => props.widgets.slice(3));
+
+const overflowItems = computed(() => {
+  return props.widgets.slice(3);
+});
+
 const showMoreButton = computed(() => props.widgets.length > 3);
 
 const toggleToolbar = () => {

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-mobile.vue

@@ -1,42 +1,29 @@
 <template>
-  <div class="widget-container-mobile">
-    <!-- Measure container -->
-    <div class="widget-container-mobile__measure">
-      <template
-        v-for="widget in widgets"
-        :key="`measure-${widget.id}`"
-      >
-        <div class="widget-container-mobile__measure-item">
-          <component
-            :is="widget.component"
-            v-bind="widget.props || {}"
-            :ref="(el: any) => (el && '$el' in el ? setElementRef(widget.id, el.$el) : null)"
-            v-on="widget.events || {}"
-          />
-        </div>
-      </template>
-    </div>
-
-    <!-- Actual widgets -->
+  <div
+    v-show="isAnyVisible"
+    class="widget-container-mobile"
+  >
     <div
       ref="containerRef"
       class="widget-container-mobile__content"
     >
       <component
         :is="widget.component"
-        v-for="widget in displayedItems"
+        v-for="widget in visibleItems"
         :key="widget.id"
         v-bind="widget.props || {}"
+        :data-item-key="widget.id"
         v-on="widget.events || {}"
       />
 
       <GenericDropdown
         v-if="showMoreButton"
         :opened="showToolbar"
-        :items="overflowItems"
+        :items="hiddenItems"
         floating
         placement="top-end"
-        variant="light"
+        variant="secondary"
+        class="widget-container-mobile__more-dropdown"
         @update:opened="showToolbar = $event"
       >
         <template #trigger="{ isActive }">
@@ -52,6 +39,7 @@
         <template #item="{ item }">
           <component
             :is="item.component"
+            class="tw-p-3 tw-w-full"
             v-bind="item.props || {}"
             horizontal
             v-on="item.events || {}"
@@ -63,11 +51,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick, computed } from "vue";
-import { useVisibleElements } from "../../../../../../composables/useVisibleElements";
-import { IWidget } from "../../../../../../../core/types/widget";
+import { ref, computed } from "vue";
+import { useAdaptiveItems } from "../../../../../../composables/useAdaptiveItems";
+
 import { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
 import { VcIcon, ChevronUpIcon } from "../../../../..";
+import { IWidget } from "../../../../../../../core/services";
 
 interface Props {
   widgets: IWidget[];
@@ -77,39 +66,14 @@ const props = defineProps<Props>();
 const containerRef = ref<HTMLElement | null>(null);
 const showToolbar = ref(false);
 
-const { setElementRef, displayedItems, overflowItems, showMoreButton, calculateVisibleElements } =
-  useVisibleElements<IWidget>({
-    containerRef,
-    items: computed(() => props.widgets),
-    getItemId: (item: IWidget) => item.id ?? "",
-    moreButtonWidth: 70,
-  });
+const isAnyVisible = computed(() => props.widgets.some((widget) => widget.isVisible));
 
-const observer = new MutationObserver(() => {
-  nextTick(calculateVisibleElements);
-});
-
-onMounted(() => {
-  nextTick(() => {
-    if (containerRef.value) {
-      observer.observe(containerRef.value, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-      });
-
-      const resizeObserver = new ResizeObserver(() => {
-        nextTick(calculateVisibleElements);
-      });
-
-      resizeObserver.observe(containerRef.value);
-      calculateVisibleElements();
-    }
-  });
-});
-
-onBeforeUnmount(() => {
-  observer.disconnect();
+const { visibleItems, showMoreButton, recalculate, hiddenItems, updateObserver } = useAdaptiveItems<IWidget>({
+  containerRef,
+  items: computed(() => props.widgets),
+  getItemKey: (item: IWidget) => item.id ?? "",
+  moreButtonWidth: 70,
+  initialItemWidth: 80,
 });
 
 const toggleToolbar = () => {
@@ -129,35 +93,15 @@ const toggleToolbar = () => {
   right: 0;
   width: 100%;
   height: var(--blade-toolbar-widgets-mobile-height);
-  z-index: 100;
+  z-index: 54;
   background-color: var(--blade-toolbar-widgets-bg-color-mobile);
 
-  &__measure {
-    position: absolute;
-    visibility: hidden;
-    pointer-events: none;
-    display: flex;
-    height: 0;
-    overflow: hidden;
-    left: -9999px;
-    gap: 4px;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 30px;
-  }
-
-  &__measure-item {
-    display: flex;
-  }
-
   &__content {
     height: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    padding: 0 30px;
+    padding: 0 22px;
     gap: 4px;
     height: var(--blade-toolbar-widgets-mobile-height);
   }
@@ -177,5 +121,9 @@ const toggleToolbar = () => {
       background-color: var(--blade-toolbar-widgets-bg-hover-color);
     }
   }
+
+  &__more-dropdown {
+    @apply tw-w-auto tw-ml-auto;
+  }
 }
 </style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/vc-widget-container.vue

@@ -1,20 +1,20 @@
 <template>
-  <template v-if="widgets.length > 0">
-  <WidgetContainerMobile
-    v-if="$isMobile.value"
-    :widgets="widgets"
-    :blade-id="bladeId"
-  />
-  <WidgetContainerDesktop
-    v-else
-    :widgets="widgets"
-    :blade-id="bladeId"
-  />
-</template>
+  <template v-if="visibleWidgets?.length > 0">
+    <WidgetContainerMobile
+      v-if="$isMobile.value"
+      :widgets="visibleWidgets"
+      :blade-id="bladeId"
+    />
+    <WidgetContainerDesktop
+      v-else
+      :widgets="visibleWidgets"
+      :blade-id="bladeId"
+    />
+  </template>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, toValue } from "vue";
 import { useWidgets } from "../../../../../../core/composables/useWidgets";
 import { WidgetContainerDesktop, WidgetContainerMobile } from "./_internal";
 
@@ -25,6 +25,17 @@ interface Props {
 const props = defineProps<Props>();
 const widgetService = useWidgets();
 const widgets = computed(() => widgetService.getWidgets(props.bladeId));
+
+const visibleWidgets = computed(() =>
+  widgets.value.filter((widget) => {
+    if (typeof widget.isVisible === "function") {
+      return widget.isVisible();
+    } else if (typeof widget.isVisible === "boolean") {
+      return widget.isVisible;
+    }
+    return toValue(widget.isVisible);
+  }),
+);
 </script>
 
 <style lang="scss">