@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.2

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

@@ -0,0 +1,182 @@
+<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"
+        :key="item.id"
+      >
+        <VcBladeToolbarBaseButton
+          v-bind="item"
+          :show-title="isExpanded"
+          :on-click="item.clickHandler"
+        />
+      </template>
+
+      <GenericDropdown
+        v-if="showMoreButton"
+        :opened="isMenuOpen"
+        :items="overflowItems"
+        floating
+        placement="bottom-end"
+        variant="light"
+        @item:click="handleItemClick"
+        @update:opened="isMenuOpen = $event"
+      >
+        <template #trigger="{ isActive }">
+          <div
+            class="vc-blade-toolbar-desktop__more"
+            :class="{ 'vc-blade-toolbar-desktop__more--active': isActive }"
+            @click="toggleToolbar"
+          >
+            <VcIcon :icon="CircleDotsIcon" />
+            <span
+              v-if="isExpanded"
+              class="vc-blade-toolbar-desktop__more-text"
+            >
+              {{ $t("COMPONENTS.ORGANISMS.VC_BLADE.MORE") }}
+            </span>
+          </div>
+        </template>
+
+        <template #item="{ item, click }">
+          <VcBladeToolbarBaseButton
+            v-bind="item"
+            :show-title="true"
+            content-direction="row"
+            :on-click="
+              () => {
+                click();
+                item.clickHandler?.();
+              }
+            "
+          />
+        </template>
+      </GenericDropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, nextTick, computed, watch, toRef } from "vue";
+import { VcIcon } from "../../../../../../../../../";
+import { GenericDropdown } from "../../../../../../../../../shared/components/generic-dropdown";
+import { CircleDotsIcon } from "../../../../../../../atoms/vc-icon/icons";
+import { useVisibleElements } from "../../../../../../../../composables/useVisibleElements";
+import type { IBladeToolbar } from "../../../../../../../../../core/types";
+import VcBladeToolbarBaseButton from "../_internal/vc-blade-toolbar-button/vc-blade-toolbar-base-button.vue";
+
+const props = defineProps<{
+  items: IBladeToolbar[];
+  isExpanded: boolean;
+}>();
+
+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,
+  });
+
+function handleItemClick(item: IBladeToolbar) {
+  item.clickHandler?.();
+  isMenuOpen.value = false;
+}
+
+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);
+  },
+);
+
+// Set up resize observer
+setupResizeObserver();
+
+onBeforeUnmount(() => {
+  observer.disconnect();
+});
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-desktop-more-color: var(--neutrals-700);
+  --blade-toolbar-desktop-more-hover-color: var(--primary-600);
+}
+
+.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;
+  }
+
+  &__more {
+    @apply tw-flex tw-items-center tw-gap-2 tw-px-2 tw-cursor-pointer tw-text-[var(--blade-toolbar-desktop-more-color)] tw-flex-col;
+
+    &-text {
+      @apply tw-text-xs;
+    }
+
+    &:hover,
+    &--active {
+      @apply tw-text-[var(--blade-toolbar-desktop-more-hover-color)];
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="vc-blade-toolbar-mobile">
+    <!-- Main button with menu -->
+    <div
+      class="vc-blade-toolbar-mobile__pill"
+      :class="{ 'vc-blade-toolbar-mobile__pill--expanded': isExpanded }"
+    >
+      <VcBladeToolbarCircleButton
+        v-if="items[0]"
+        v-bind="items[0]"
+        :is-main="true"
+        :is-mobile="true"
+        :is-expanded="isExpanded"
+        :on-click="() => handleItemClick(items[0])"
+      />
+
+      <button
+        v-if="items.length > 1 && !isExpanded"
+        class="vc-blade-toolbar-mobile__toggle"
+        @click="toggleMenu"
+      >
+        <VcIcon icon="fas fa-chevron-up" />
+      </button>
+    </div>
+
+    <!-- Overlay -->
+    <Transition name="fade">
+      <div
+        v-show="isExpanded"
+        class="vc-blade-toolbar-mobile__overlay"
+        @click="closeMenu"
+      />
+    </Transition>
+
+    <!-- Vertical menu -->
+    <Transition name="menu">
+      <div
+        v-show="isExpanded"
+        class="vc-blade-toolbar-mobile__menu"
+      >
+        <VcBladeToolbarCircleButton
+          v-for="item in items.slice(1)"
+          :key="item.id"
+          v-bind="item"
+          :is-mobile="true"
+          :on-click="() => handleItemClick(item)"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { VcIcon } from "../../../../../../../../../";
+import type { IBladeToolbar } from "../../../../../../../../../core/types";
+import VcBladeToolbarCircleButton from "../_internal/vc-blade-toolbar-button/vc-blade-toolbar-circle-button.vue";
+
+defineProps<{
+  items: IBladeToolbar[];
+}>();
+
+const isExpanded = ref(false);
+
+function toggleMenu() {
+  isExpanded.value = !isExpanded.value;
+}
+
+function closeMenu() {
+  isExpanded.value = false;
+}
+
+function handleItemClick(item: IBladeToolbar) {
+  item.clickHandler?.();
+  closeMenu();
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-mobile-pill-bg-color: var(--primary-500);
+  --blade-toolbar-mobile-toggle-border-color: var(--primary-200);
+  --blade-toolbar-mobile-toggle-icon-color: var(--additional-50);
+  --blade-toolbar-mobile-overlay-bg-color: var(--additional-950);
+  --blade-toolbar-mobile-menu-shadow-base-color: var(--additional-950);
+  --blade-toolbar-mobile-shadow-color: rgb(from var(--blade-toolbar-mobile-menu-shadow-base-color) r g b / 25%);
+  --blade-toolbar-mobile-shadow-color-2: rgb(from var(--blade-toolbar-mobile-menu-shadow-base-color) r g b / 1%);
+}
+
+.vc-blade-toolbar-mobile {
+  &__pill {
+    @apply tw-fixed tw-bottom-28 tw-right-8 tw-flex tw-items-center tw-bg-[var(--blade-toolbar-mobile-pill-bg-color)] tw-rounded-full tw-shadow-lg tw-z-[60] tw-h-[48px];
+    box-shadow:
+      0px 4px 4px 0px var(--blade-toolbar-mobile-shadow-color),
+      0px 2px 10px 0px var(--blade-toolbar-mobile-shadow-color-2);
+
+    &--expanded {
+      @apply tw-bg-transparent tw-shadow-none;
+    }
+  }
+
+  &__toggle {
+    @apply tw-flex tw-items-center tw-justify-center tw-h-full tw-px-3 tw-border-0 tw-bg-transparent tw-border-l tw-border-solid tw-border-[var(--blade-toolbar-mobile-toggle-border-color)];
+    min-width: 40px;
+
+    .vc-icon {
+      @apply tw-text-[var(--blade-toolbar-mobile-toggle-icon-color)];
+      font-size: 14px;
+    }
+  }
+
+  &__overlay {
+    @apply tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[var(--blade-toolbar-mobile-overlay-bg-color)] tw-z-[55] tw-opacity-90;
+    transition: opacity 0.3s ease;
+  }
+
+  &__menu {
+    @apply tw-fixed tw-bottom-[167px] tw-right-[33px] tw-z-[60] tw-flex tw-flex-col tw-gap-2 tw-items-end;
+  }
+}
+
+.menu-enter-active,
+.menu-leave-active {
+  transition: all 0.3s ease;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.fade-enter-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+  transition-delay: 0.1s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="vc-blade-toolbar-buttons">
+    <VcBladeToolbarMobile
+      v-if="$isMobile.value"
+      :items="items"
+    />
+    <VcBladeToolbarDesktop
+      v-else
+      :items="items"
+      :is-expanded="isExpanded"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IBladeToolbar } from "../../../../../../../../core/types";
+import VcBladeToolbarMobile from "./mobile/vc-blade-toolbar-mobile.vue";
+import VcBladeToolbarDesktop from "./desktop/vc-blade-toolbar-desktop.vue";
+
+defineProps<{
+  items: IBladeToolbar[];
+  isExpanded: boolean;
+}>();
+</script>
+
+<style lang="scss">
+.vc-blade-toolbar-buttons {
+  @apply tw-relative tw-overflow-hidden tw-flex;
+  width: -webkit-fill-available;
+  width: -moz-available !important;
+}
+</style>

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

@@ -1,103 +1,31 @@
 <template>
   <div
-    v-if="isToolbarVisible()"
+    v-if="isToolbarVisible"
     class="vc-blade-toolbar"
-    :class="{ 'vc-blade-toolbar--expanded': isExpanded }"
+    :class="{
+      'vc-blade-toolbar--mobile': $isMobile.value,
+    }"
   >
-    <div
-      ref="toolbarContentRef"
-      class="vc-blade-toolbar__content"
-    >
-      <template v-if="slots['widgets-container']">
-        <template
-          v-for="item in displayedItems"
-          :key="item.id"
-        >
-          <VcBladeToolbarButton
-            :id="item.id"
-            :is-expanded="isExpanded"
-            :icon="item.icon"
-            :title="unref(item.title)"
-            :disabled="item.disabled as boolean"
-            :separator="item.separator"
-            :click-handler="item.clickHandler"
-          />
-        </template>
+    <div class="vc-blade-toolbar__content">
+      <VcBladeToolbarButtons
+        :items="visibleItems"
+        :is-expanded="isExpanded"
+      />
 
-        <GenericDropdown
-          :opened="showToolbar"
-          :items="overflowItems"
-          floating
-          placement="bottom-end"
-          :on-item-click="onItemClick"
-          @update:opened="showToolbar = $event"
-        >
-          <template #trigger>
-            <div
-              v-if="showMoreButton"
-              class="vc-blade-toolbar__more"
-              @click="toggleToolbar"
-            >
-              <VcIcon :icon="CircleDotsIcon" />
-              <span class="vc-blade-toolbar__more-text">More</span>
-            </div>
-          </template>
-
-          <template #item="{ item }">
-            <div class="vc-blade-toolbar__more-item">
-              <VcIcon
-                class="vc-blade-toolbar-button__icon"
-                :icon="typeof item.icon === 'function' ? item.icon() : item.icon"
-                size="m"
-              />
-              <div class="vc-blade-toolbar-button__title">{{ item.title }}</div>
-            </div>
-          </template>
-        </GenericDropdown>
-      </template>
-      <template v-else>
-        <template
-          v-for="item in visibleItems"
-          :key="item.id"
-        >
-          <VcBladeToolbarButton
-            :id="item.id"
-            :is-expanded="isExpanded"
-            :icon="item.icon"
-            :title="unref(item.title)"
-            :disabled="item.disabled as boolean"
-            :separator="item.separator"
-            :click-handler="item.clickHandler"
-          />
-        </template>
-      </template>
-    </div>
-
-    <div class="vc-blade-toolbar__toolbar-container">
-      <div
-        v-if="!slots['widgets-container']"
-        id="vc-blade-toolbar-container"
-        class="tw-w-full tw-max-w-[500px]"
-      ></div>
-      <div
+      <slot
         v-if="slots['widgets-container']"
-        class="vc-blade-toolbar__toolbar-container-inner"
-      >
-        <slot name="widgets-container"></slot>
-      </div>
+        name="widgets-container"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { IBladeToolbar } from "./../../../../../../core/types";
-import { unref, ref, computed, useSlots, onMounted, onBeforeUnmount, inject, ComputedRef, provide } from "vue";
-import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
-import { VcIcon } from "./../../../../";
+import { computed, useSlots } from "vue";
 import { useLocalStorage } from "@vueuse/core";
-import { GenericDropdown } from "../../../../../../shared/components/generic-dropdown";
 import { usePermissions } from "../../../../../../core/composables";
-import { CircleDotsIcon } from "../../../../atoms/vc-icon/icons";
+import { IBladeToolbar } from "./../../../../../../core/types";
+import VcBladeToolbarButtons from "./_internal/vc-blade-toolbar-buttons/vc-blade-toolbar-buttons.vue";
 
 export interface Props {
   items: IBladeToolbar[];
@@ -107,60 +35,9 @@ const props = withDefaults(defineProps<Props>(), {
   items: () => [],
 });
 
-defineSlots<{
-  "widgets-container": void;
-  "custom-container": void;
-}>();
-
+const slots = useSlots();
 const isExpanded = useLocalStorage("VC_BLADE_TOOLBAR_IS_EXPANDED", true);
 const { hasAccess } = usePermissions();
-const bladeExpanded = inject("$bladeExpanded") as ComputedRef<boolean>;
-const toolbarContainerId = "vc-blade-toolbar-container";
-
-const showToolbar = ref(false);
-
-const toggleToolbar = () => {
-  showToolbar.value = !showToolbar.value;
-};
-
-const slots = useSlots();
-
-function onItemClick(item: IBladeToolbar) {
-  item.clickHandler?.();
-}
-
-const toolbarContentRef = ref<HTMLElement | null>(null);
-const isOverflowing = ref(false);
-
-const toolbarSpace = ref(0);
-
-const checkOverflow = () => {
-  if (toolbarContentRef.value) {
-    const element = toolbarContentRef.value;
-    isOverflowing.value = element.scrollWidth > element.clientWidth;
-  }
-};
-
-// Setup resize observer
-onMounted(() => {
-  const resizeObserver = new ResizeObserver(checkOverflow);
-  if (toolbarContentRef.value) {
-    resizeObserver.observe(toolbarContentRef.value);
-  }
-
-  // Cleanup
-  onBeforeUnmount(() => {
-    resizeObserver.disconnect();
-  });
-
-  const container = document.getElementById(toolbarContainerId);
-  if (container) {
-    const observer = new ResizeObserver((entries) => {
-      toolbarSpace.value = entries[0].contentRect.width;
-    });
-    observer.observe(container);
-  }
-});
 
 const visibleItems = computed(() => {
   return props.items.filter(
@@ -168,40 +45,7 @@ const visibleItems = computed(() => {
   );
 });
 
-const displayedItems = computed(() => {
-  console.log("displayedItems", slots);
-  if (!slots["widgets-container"] || visibleItems.value.length <= 2) {
-    // If not overflowing and 2 or fewer items, show all
-    if (!isOverflowing.value) {
-      return visibleItems.value;
-    }
-  }
-  // If overflowing or 3+ items, show only first item
-  return visibleItems.value.slice(0, 1);
-});
-
-const overflowItems = computed(() => {
-  if (!slots["widgets-container"] && !isOverflowing.value) {
-    return [];
-  }
-  // If overflowing or has 3+ items, include remaining items
-  return visibleItems.value.length >= 3 || isOverflowing.value
-    ? visibleItems.value.slice(1)
-    : visibleItems.value.slice(2);
-});
-
-const showMoreButton = computed(() => {
-  return (slots["widgets-container"] && visibleItems.value.length >= 3) || isOverflowing.value;
-});
-
-function isToolbarVisible() {
-  const visibleItems = (props.items as { isVisible: boolean }[]).filter(
-    (item) => item.isVisible === undefined || item.isVisible,
-  );
-  return !!visibleItems.length;
-}
-
-provide("toolbarContainerId", "vc-blade-toolbar-container");
+const isToolbarVisible = computed(() => visibleItems.value.length > 0);
 </script>
 
 <style lang="scss">
@@ -215,41 +59,14 @@ provide("toolbarContainerId", "vc-blade-toolbar-container");
 }
 
 .vc-blade-toolbar {
-  @apply tw-min-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:var(--blade-toolbar-border-color)] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0;
-
-  /* &--expanded {
-    @apply tw-h-[var(--blade-toolbar-height-expanded)] #{!important};
-  } */
+  @apply tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:var(--blade-toolbar-border-color)] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0;
 
   &__content {
-    @apply tw-flex tw-content-start tw-items-center tw-px-2;
-    flex-grow: 1;
-    overflow: hidden;
-    width: auto;
-  }
-
-  &__toolbar-container {
-    @apply tw-grow-[2] tw-basis-0 tw-flex tw-justify-end tw-shrink-0 tw-items-center;
-  }
-
-  &__icon {
-    @apply tw-self-center tw-justify-self-center tw-text-[color:var(--blade-toolbar-icon-color)] tw-cursor-pointer tw-mr-4 hover:tw-text-[color:var(--blade-toolbar-icon-hover-color)];
-  }
-
-  &__more {
-    @apply tw-flex tw-flex-col tw-items-center tw-px-2 tw-cursor-pointer tw-text-[color:var(--blade-toolbar-icon-color)] hover:tw-text-[color:var(--blade-toolbar-icon-hover-color)];
-  }
-
-  &__more-text {
-    @apply tw-text-xs tw-mt-1 tw-font-normal;
-  }
-
-  &__more-item {
-    @apply tw-flex tw-items-center tw-gap-2 tw-px-2 tw-py-1 tw-cursor-pointer tw-text-[color:var(--blade-toolbar-icon-color)] hover:tw-text-[color:var(--blade-toolbar-icon-hover-color)];
+    @apply tw-flex tw-flex-row tw-w-full tw-relative tw-overflow-hidden tw-min-h-[var(--blade-toolbar-height)];
   }
 
-  &__toolbar-container-inner {
-    @apply tw-flex tw-flex-row tw-items-center tw-overflow-visible tw-w-full;
+  &--mobile {
+    @apply tw-fixed tw-bottom-0 tw-right-0 tw-z-50 tw-p-4 tw-bg-transparent tw-border-0 tw-w-auto;
   }
 }
 </style>

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

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