@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/_internal/vc-blade-toolbar-button/vc-blade-toolbar-base-button.vue

@@ -0,0 +1,136 @@
+<template>
+  <VcTooltip
+    placement="bottom"
+    :offset="{ crossAxis: 0, mainAxis: 0 }"
+    :delay="1000"
+  >
+    <template #tooltip>{{ title }}</template>
+    <button
+      class="vc-blade-toolbar-base-button"
+      :class="{
+        'vc-blade-toolbar-base-button--disabled': disabled || isWaiting,
+        'vc-blade-toolbar-base-button--with-separator-left': separator === 'left',
+        'vc-blade-toolbar-base-button--with-separator-right': separator === 'right',
+        'vc-blade-toolbar-base-button--with-separator-both': separator === 'both',
+      }"
+      :data-test-id="id ?? 'vc-blade-toolbar-button'"
+      v-bind="$attrs"
+      @click="handleClick"
+    >
+      <div
+        class="vc-blade-toolbar-base-button__content"
+        :style="{ flexDirection: contentDirection }"
+      >
+        <VcIcon
+          class="vc-blade-toolbar-base-button__icon"
+          :class="iconClassName"
+          :icon="icon"
+          :size="size"
+        />
+        <span
+          class="vc-blade-toolbar-base-button__title"
+          :class="titleClassName"
+        >
+          {{ title }}
+        </span>
+      </div>
+    </button>
+  </VcTooltip>
+</template>
+
+<script lang="ts" setup>
+import { ref, ComputedRef, Ref } from "vue";
+import { VcIcon, VcTooltip } from "../../../../../../../../";
+
+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,
+  size: "m",
+  separator: undefined,
+  contentDirection: "column",
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const isWaiting = ref(false);
+
+async function handleClick(): Promise<void> {
+  if (props.disabled || isWaiting.value || !props.onClick) return;
+
+  isWaiting.value = true;
+  try {
+    await props.onClick();
+  } finally {
+    isWaiting.value = false;
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-base-button-separator-color: var(--base-border-color, var(--neutrals-200));
+  --blade-toolbar-base-button-title-color: var(--neutrals-600);
+  --blade-toolbar-base-button-hover-color: var(--primary-600);
+  --blade-toolbar-base-button-disabled-color: var(--neutrals-400);
+  --blade-toolbar-base-button-icon-color: var(--neutrals-700);
+}
+
+.vc-blade-toolbar-base-button {
+  @apply tw-px-3 tw-bg-transparent tw-border-0 tw-cursor-pointer tw-shrink;
+
+  &__content {
+    @apply tw-inline-flex tw-items-center tw-gap-2;
+  }
+
+  &__icon {
+    @apply tw-text-[var(--blade-toolbar-base-button-icon-color)];
+    @apply tw-flex #{!important};
+  }
+
+  &__title {
+    @apply tw-text-xs tw-text-[var(--blade-toolbar-base-button-title-color)] tw-text-nowrap;
+  }
+
+  &--with-separator-left {
+    @apply tw-border-l tw-border-solid tw-border-[var(--blade-toolbar-base-button-separator-color)];
+  }
+
+  &--with-separator-right {
+    @apply tw-border-r tw-border-solid tw-border-[var(--blade-toolbar-base-button-separator-color)];
+  }
+
+  &--with-separator-both {
+    @apply tw-border-l tw-border-r tw-border-solid tw-border-[var(--blade-toolbar-base-button-separator-color)];
+  }
+
+  &:hover:not(&--disabled) {
+    .vc-blade-toolbar-base-button__icon,
+    .vc-blade-toolbar-base-button__title {
+      @apply tw-text-[var(--blade-toolbar-base-button-hover-color)];
+    }
+  }
+
+  &--disabled {
+    @apply tw-cursor-default;
+
+    .vc-blade-toolbar-base-button__icon,
+    .vc-blade-toolbar-base-button__title {
+      @apply tw-text-[var(--blade-toolbar-base-button-disabled-color)];
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/{vc-blade-toolbar-button → vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button}/vc-blade-toolbar-button.vue

@@ -5,6 +5,7 @@
       crossAxis: 0,
       mainAxis: 0,
     }"
+    :delay="1000"
   >
     <template #tooltip>{{ title }}</template>
     <div
@@ -12,69 +13,48 @@
       :class="{
         'vc-blade-toolbar-button_disabled': disabled || isWaiting,
         'vc-blade-toolbar-button_separator-left': separator === 'left',
+        'vc-blade-toolbar-button_horizontal': horizontal,
+        'vc-blade-toolbar-button_circle': circle,
+        'vc-blade-toolbar-button_main-action': mainAction,
       }"
       :data-test-id="id ?? 'vc-blade-toolbar-button'"
       @click="onClick"
     >
-      <div ref="dropButtonRef">
+      <div
+        type="button"
+        class="vc-blade-toolbar-button__wrap"
+      >
+        <VcIcon
+          class="vc-blade-toolbar-button__icon"
+          :icon="icon as string"
+          :size="circle ? 's' : 'm'"
+        ></VcIcon>
         <div
-          ref="bladeDropToggle"
-          type="button"
-          class="vc-blade-toolbar-button__wrap"
+          v-if="isExpanded || horizontal"
+          class="vc-blade-toolbar-button__title"
         >
-          <VcIcon
-            class="vc-blade-toolbar-button__icon"
-            :icon="icon as string"
-            size="m"
-          ></VcIcon>
-          <div
-            v-if="isExpanded"
-            class="vc-blade-toolbar-button__title"
-          >
-            {{ title }}
-          </div>
+          {{ title }}
         </div>
-        <teleport to="body">
-          <div
-            v-if="isDropActive"
-            ref="bladeDropRef"
-            class="vc-blade-toolbar-button__dropdown"
-            :style="dropStyle"
-          >
-            <div
-              v-for="(item, i) in dropdownItems"
-              :key="i"
-              class="vc-blade-toolbar-button__dropdown-item"
-              @click="handleDropItemClick(item)"
-            >
-              <VcIcon
-                :icon="item.icon"
-                class="vc-blade-toolbar-button__dropdown-item-icon"
-              />
-              {{ item.title }}
-            </div>
-          </div>
-        </teleport>
       </div>
     </div>
   </VcTooltip>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, nextTick } from "vue";
-import { VcIcon, VcTooltip } from "./../../../../../../";
-import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
-import { IBladeDropdownItem } from "./../../../../../../../../core/types";
+import { ref } from "vue";
+import { VcIcon, VcTooltip } from "../../../../../../../../";
 
 export interface Props {
   isExpanded: boolean;
   icon?: string | (() => string);
   title?: string;
   disabled?: boolean;
-  dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;
   separator?: "left" | "right" | "both";
   id?: string;
+  horizontal?: boolean;
+  circle?: boolean;
+  mainAction?: boolean;
 }
 
 export interface Emits {
@@ -92,21 +72,13 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   dropdownItems: () => [],
   clickHandler: undefined,
+  horizontal: false,
+  circle: false,
 });
 
 const emit = defineEmits<Emits>();
 
-const popper = ref<ComputePositionReturn>();
 const isWaiting = ref(false);
-const isDropActive = ref(false);
-const bladeDropToggle = ref();
-const dropButtonRef = ref();
-const bladeDropRef = ref();
-
-const dropStyle = computed(() => ({
-  top: `${popper.value?.y ?? 0}px`,
-  left: `${popper.value?.x ?? 0}px`,
-}));
 
 async function onClick(): Promise<void> {
   console.debug("vc-blade-toolbar-item#onClick()");
@@ -119,52 +91,26 @@ async function onClick(): Promise<void> {
       } finally {
         isWaiting.value = false;
       }
-    } else if (props.dropdownItems?.length) {
-      toggleDropdown();
     } else {
       emit("click");
     }
   }
 }
-
-function toggleDropdown() {
-  if (props.dropdownItems?.length) {
-    if (isDropActive.value) {
-      isDropActive.value = false;
-    } else {
-      isDropActive.value = true;
-
-      nextTick(() => {
-        computePosition(bladeDropToggle.value, bladeDropRef.value, {
-          placement: "bottom",
-          middleware: [offset(10)],
-        }).then((item) => (popper.value = item));
-      });
-    }
-  }
-}
-
-function handleDropItemClick(item: IBladeDropdownItem) {
-  if (item.clickHandler && typeof item.clickHandler === "function") {
-    item.clickHandler();
-    toggleDropdown();
-  }
-}
 </script>
 
 <style lang="scss">
 :root {
-  --blade-toolbar-button-title-color: var(--base-text-color, var(--neutrals-950));
-  --blade-toolbar-button-title-color-hover: var(--base-text-color, var(--neutrals-950));
+  --blade-toolbar-button-title-color: var(--neutrals-600);
+  --blade-toolbar-button-title-color-hover: var(--primary-600);
   --blade-toolbar-button-title-color-disabled: var(--neutrals-400);
 
-  --blade-toolbar-button-icon-color: var(--primary-500);
+  --blade-toolbar-button-icon-color: var(--neutrals-700);
   --blade-toolbar-button-icon-color-hover: var(--primary-600);
   --blade-toolbar-button-icon-color-disabled: var(--neutrals-400);
 
-  --blade-toolbar-button-background-color: var(--additional-50);
-  --blade-toolbar-button-background-color-hover: var(--additional-50);
-  --blade-toolbar-button-background-color-disabled: var(--additional-50);
+  --blade-toolbar-button-background-color: trans;
+  --blade-toolbar-button-background-color-hover: transparent;
+  --blade-toolbar-button-background-color-disabled: transparent;
 
   --blade-toolbar-button-border-color: var(--base-border-color, var(--neutrals-200));
 
@@ -177,12 +123,22 @@ function handleDropItemClick(item: IBladeDropdownItem) {
 }
 
 .vc-blade-toolbar-button {
-  @apply tw-px-2 tw-bg-[color:var(--blade-toolbar-button-background-color)] tw-box-border tw-cursor-pointer;
+  @apply tw-px-2 tw-bg-[color:var(--blade-toolbar-button-background-color)] tw-box-border tw-cursor-pointer tw-justify-center tw-flex;
 
   &__wrap {
     @apply tw-inline-flex tw-flex-col tw-justify-center tw-items-center tw-relative;
   }
 
+  &_horizontal {
+    .vc-blade-toolbar-button__wrap {
+      @apply tw-flex-row tw-gap-2;
+    }
+
+    .vc-blade-toolbar-button__title {
+      @apply tw-mt-0 tw-ml-1;
+    }
+  }
+
   &__title {
     @apply tw-text-xs tw-whitespace-nowrap tw-mt-1 tw-text-[color:var(--blade-toolbar-button-title-color)];
   }
@@ -232,8 +188,28 @@ function handleDropItemClick(item: IBladeDropdownItem) {
     }
   }
 
-  &.vc-blade-toolbar-button_separator-left {
+  &_separator-left {
     @apply tw-border-l tw-border-solid tw-border-[color:var(--blade-toolbar-button-border-color)];
   }
+
+  &_circle {
+    .vc-blade-toolbar-button__wrap {
+      @apply tw-flex-row-reverse;
+    }
+
+    .vc-blade-toolbar-button__icon {
+      @apply tw-w-9 tw-h-9 tw-bg-[var(--neutrals-500)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--additional-50)];
+    }
+
+    .vc-blade-toolbar-button__title {
+      @apply tw-text-[var(--additional-50)] tw-text-xs;
+    }
+  }
+
+  &_main-action {
+    .vc-blade-toolbar-button__icon {
+      @apply tw-w-[46px] tw-h-[46px] tw-bg-[var(--primary-500)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--additional-50)];
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,101 @@
+<template>
+  <VcBladeToolbarBaseButton
+    v-bind="$props"
+    class="vc-blade-toolbar-circle-button"
+    :class="{
+      'vc-blade-toolbar-circle-button--main': isMain,
+      'vc-blade-toolbar-circle-button--mobile': isMobile,
+      'vc-blade-toolbar-circle-button--expanded': isExpanded,
+    }"
+    :content-direction="contentDirection"
+    :icon-class-name="iconClassName"
+    :title-class-name="titleClassName"
+  />
+</template>
+
+<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";
+
+export interface Props extends Omit<BaseButtonProps, "size" | "contentDirection" | "iconClassName"> {
+  isMain?: boolean;
+  isMobile?: boolean;
+  isExpanded?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMain: false,
+  isMobile: false,
+  isExpanded: false,
+  size: "s",
+});
+
+const contentDirection = computed(() => {
+  if (props.isMobile && props.isMain && !props.isExpanded) {
+    return "row";
+  }
+  return "row-reverse";
+});
+
+const iconClassName = computed(() => {
+  const classes = ["vc-blade-toolbar-circle-button__icon"];
+  if (props.isMain) {
+    classes.push("vc-blade-toolbar-circle-button__icon--main");
+  }
+  if (props.isExpanded) {
+    classes.push("vc-blade-toolbar-circle-button__icon--main-expanded");
+  }
+  return classes.join(" ");
+});
+
+const titleClassName = computed(() => {
+  const classes = ["vc-blade-toolbar-circle-button__title"];
+  if (props.isMain) {
+    classes.push("vc-blade-toolbar-circle-button__title--main");
+  }
+
+  return classes.join(" ");
+});
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-circle-button-text-color: var(--additional-50);
+  --blade-toolbar-circle-button-bg-color: var(--neutrals-500);
+  --blade-toolbar-circle-button-main-bg-color: var(--primary-500);
+}
+
+.vc-blade-toolbar-circle-button {
+  &:hover:not(.vc-blade-toolbar-base-button--disabled) {
+    .vc-blade-toolbar-base-button__title,
+    .vc-blade-toolbar-base-button__icon {
+      @apply tw-text-[var(--blade-toolbar-circle-button-text-color)] #{!important};
+    }
+  }
+
+  &__icon {
+    @apply tw-w-9 tw-h-9 tw-bg-[var(--blade-toolbar-circle-button-bg-color)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--blade-toolbar-circle-button-text-color)];
+
+    &--main {
+      @apply tw-flex tw-w-auto tw-bg-[var(--blade-toolbar-circle-button-main-bg-color)] tw-ml-2;
+    }
+
+    &--main-expanded {
+      @apply tw-flex tw-w-[46px] tw-h-[46px] tw-bg-[var(--blade-toolbar-circle-button-main-bg-color)] tw-ml-0;
+    }
+  }
+
+  &__title {
+    @apply tw-text-xs tw-text-[var(--blade-toolbar-circle-button-text-color)];
+
+    &--main {
+      @apply tw-text-[var(--blade-toolbar-circle-button-text-color)];
+    }
+  }
+
+  &--main {
+    @apply tw-px-2;
+  }
+}
+</style>

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>