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

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,41 +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 class="vc-blade-toolbar__content">
-      <template
-        v-for="item in items"
-        :key="item.id"
-      >
-        <VcBladeToolbarButton
-          v-if="$hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible)"
-          :id="item.id"
-          :is-expanded="isExpanded"
-          :icon="item.icon"
-          :title="unref(item.title)"
-          :disabled="item.disabled as boolean"
-          :separator="item.separator"
-          :dropdown-items="item.dropdownItems"
-          :click-handler="item.clickHandler"
-        />
-      </template>
+      <VcBladeToolbarButtons
+        :items="visibleItems"
+        :is-expanded="isExpanded"
+      />
+
+      <slot
+        v-if="slots['widgets-container']"
+        name="widgets-container"
+      />
     </div>
-    <VcIcon
-      class="vc-blade-toolbar__icon"
-      :icon="`fas fa-chevron-${isExpanded ? 'up' : 'down'}`"
-      @click="toggleToolbar"
-    ></VcIcon>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { IBladeToolbar } from "./../../../../../../core/types";
-import { unref } 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 { usePermissions } from "../../../../../../core/composables";
+import { IBladeToolbar } from "./../../../../../../core/types";
+import VcBladeToolbarButtons from "./_internal/vc-blade-toolbar-buttons/vc-blade-toolbar-buttons.vue";
 
 export interface Props {
   items: IBladeToolbar[];
@@ -45,43 +35,38 @@ const props = withDefaults(defineProps<Props>(), {
   items: () => [],
 });
 
+const slots = useSlots();
 const isExpanded = useLocalStorage("VC_BLADE_TOOLBAR_IS_EXPANDED", true);
+const { hasAccess } = usePermissions();
 
-function toggleToolbar() {
-  isExpanded.value = !isExpanded.value;
-}
-
-function isToolbarVisible() {
-  const visibleItems = (props.items as { isVisible: boolean }[]).filter(
-    (item) => item.isVisible === undefined || item.isVisible,
+const visibleItems = computed(() => {
+  return props.items.filter(
+    (item) => hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible) && !item.disabled,
   );
-  return !!visibleItems.length;
-}
+});
+
+const isToolbarVisible = computed(() => visibleItems.value.length > 0);
 </script>
 
 <style lang="scss">
 :root {
-  --blade-toolbar-height: 36px;
-  --blade-toolbar-height-expanded: 50px;
+  --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-icon-color: var(--primary-500);
+  --blade-toolbar-icon-color: var(--neutrals-700);
   --blade-toolbar-icon-hover-color: var(--primary-600);
 }
 
 .vc-blade-toolbar {
-  @apply tw-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-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2;
+    @apply tw-flex tw-flex-row tw-w-full tw-relative tw-overflow-hidden tw-min-h-[var(--blade-toolbar-height)];
   }
 
-  &__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)];
+  &--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';

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="widget-container-desktop">
+    <div class="widget-container-desktop__content">
+      <component
+        :is="widget.component"
+        v-for="widget in displayedItems"
+        :key="widget.id"
+        v-bind="widget.props || {}"
+        v-on="widget.events || {}"
+      />
+
+      <GenericDropdown
+        v-if="showMoreButton"
+        :opened="showToolbar"
+        :items="overflowItems"
+        floating
+        placement="bottom-end"
+        variant="light"
+        @update:opened="showToolbar = $event"
+      >
+        <template #trigger="{ isActive }">
+          <div
+            class="widget-container-desktop__more"
+            :class="{ 'widget-container-desktop__more--active': isActive }"
+            @click="toggleToolbar"
+          >
+            <VcIcon :icon="ChevronDownIcon" />
+          </div>
+        </template>
+
+        <template #item="{ item }">
+          <component
+            :is="item.component"
+            v-bind="item.props || {}"
+            horizontal
+            v-on="item.events || {}"
+          />
+        </template>
+      </GenericDropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { IWidget } from "../../../../../../../core/types/widget";
+import { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
+import { VcIcon, ChevronDownIcon } from "../../../../..";
+
+interface Props {
+  widgets: IWidget[];
+}
+
+const props = defineProps<Props>();
+const showToolbar = ref(false);
+
+const displayedItems = computed(() => props.widgets.slice(0, 3));
+const overflowItems = computed(() => props.widgets.slice(3));
+const showMoreButton = computed(() => props.widgets.length > 3);
+
+const toggleToolbar = () => {
+  showToolbar.value = !showToolbar.value;
+};
+</script>
+
+<style lang="scss">
+.widget-container-desktop {
+  position: relative;
+  display: flex;
+  width: fit-content;
+  user-select: none;
+  background-color: var(--blade-toolbar-widgets-bg-color);
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  &__more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    height: 100%;
+    cursor: pointer;
+    color: var(--blade-toolbar-icon-color);
+
+    &:hover,
+    &--active {
+      color: var(--blade-toolbar-icon-hover-color);
+      background-color: var(--blade-toolbar-widgets-bg-hover-color);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,181 @@
+<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
+      ref="containerRef"
+      class="widget-container-mobile__content"
+    >
+      <component
+        :is="widget.component"
+        v-for="widget in displayedItems"
+        :key="widget.id"
+        v-bind="widget.props || {}"
+        v-on="widget.events || {}"
+      />
+
+      <GenericDropdown
+        v-if="showMoreButton"
+        :opened="showToolbar"
+        :items="overflowItems"
+        floating
+        placement="top-end"
+        variant="light"
+        @update:opened="showToolbar = $event"
+      >
+        <template #trigger="{ isActive }">
+          <div
+            class="widget-container-mobile__more"
+            :class="{ 'widget-container-mobile__more--active': isActive }"
+            @click="toggleToolbar"
+          >
+            <VcIcon :icon="ChevronUpIcon" />
+          </div>
+        </template>
+
+        <template #item="{ item }">
+          <component
+            :is="item.component"
+            v-bind="item.props || {}"
+            horizontal
+            v-on="item.events || {}"
+          />
+        </template>
+      </GenericDropdown>
+    </div>
+  </div>
+</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 { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
+import { VcIcon, ChevronUpIcon } from "../../../../..";
+
+interface Props {
+  widgets: IWidget[];
+}
+
+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 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 toggleToolbar = () => {
+  showToolbar.value = !showToolbar.value;
+};
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-widgets-mobile-height: 80px;
+}
+
+.widget-container-mobile {
+  position: fixed;
+  bottom: 0;
+  left: 0 !important;
+  right: 0;
+  width: 100%;
+  height: var(--blade-toolbar-widgets-mobile-height);
+  z-index: 100;
+  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;
+    gap: 4px;
+    height: var(--blade-toolbar-widgets-mobile-height);
+  }
+
+  &__more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    height: 100%;
+    cursor: pointer;
+    color: var(--blade-toolbar-icon-color);
+
+    &:hover,
+    &--active {
+      color: var(--blade-toolbar-icon-hover-color);
+      background-color: var(--blade-toolbar-widgets-bg-hover-color);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<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>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useWidgets } from "../../../../../../core/composables/useWidgets";
+import { WidgetContainerDesktop, WidgetContainerMobile } from "./_internal";
+
+interface Props {
+  bladeId: string;
+}
+
+const props = defineProps<Props>();
+const widgetService = useWidgets();
+const widgets = computed(() => widgetService.getWidgets(props.bladeId));
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-widgets-bg-color: var(--neutrals-100);
+  --blade-toolbar-widgets-bg-hover-color: var(--neutrals-200);
+  --blade-toolbar-widgets-bg-color-mobile: var(--additional-50);
+}
+
+.widget-container {
+  position: relative;
+  display: flex;
+  width: fit-content;
+  user-select: none;
+  background-color: var(--blade-toolbar-widgets-bg-color);
+
+  &--mobile {
+    position: fixed;
+    bottom: 0 !important;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: var(--blade-toolbar-widgets-mobile-height);
+    z-index: 100;
+
+    .widget-container__content {
+      height: 100%;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 30px;
+      height: 80px;
+      background-color: var(--blade-toolbar-widgets-bg-color-mobile);
+    }
+
+    .widget-container__measure {
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 30px;
+    }
+  }
+
+  &__measure {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    display: flex;
+    height: 0;
+    overflow: hidden;
+    left: -9999px;
+    gap: 4px;
+    width: 100%;
+  }
+
+  &__measure-item {
+    display: flex;
+  }
+
+  &__content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    gap: 4px;
+  }
+
+  &__more {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    height: 100%;
+    cursor: pointer;
+    color: var(--blade-toolbar-icon-color);
+
+    &:hover {
+      color: var(--blade-toolbar-icon-hover-color);
+    }
+
+    &--active {
+      color: var(--blade-toolbar-icon-hover-color);
+      background-color: var(--blade-toolbar-widgets-bg-hover-color);
+    }
+  }
+}
+</style>

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

@@ -1 +1 @@
-export { default as VcBlade } from "./vc-blade.vue";
+export { default as VcBlade } from "./vc-blade.vue";