@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

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

@@ -1,417 +0,0 @@
-<template>
-  <div
-    class="vc-blade-toolbar-mobile"
-    role="toolbar"
-    :aria-label="$t('COMPONENTS.ORGANISMS.VC_BLADE.TOOLBAR')"
-  >
-    <!-- Backdrop with frosted glass -->
-    <Transition name="toolbar-mobile-backdrop">
-      <div
-        v-if="isExpanded"
-        class="vc-blade-toolbar-mobile__backdrop"
-        aria-hidden="true"
-        @click="closeMenu"
-      />
-    </Transition>
-
-    <!-- Staggered action items -->
-    <div
-      class="vc-blade-toolbar-mobile__menu"
-      :class="{ 'vc-blade-toolbar-mobile__menu--open': isExpanded }"
-      role="menu"
-      :aria-hidden="!isExpanded"
-    >
-      <button
-        v-for="(item, index) in items"
-        :key="item.id ?? index"
-        class="vc-blade-toolbar-mobile__action"
-        :style="getStaggerStyle(index)"
-        :disabled="isItemDisabled(item)"
-        :aria-label="resolveTitle(item)"
-        :tabindex="isExpanded ? 0 : -1"
-        role="menuitem"
-        @click="handleItemClick(item)"
-      >
-        <span class="vc-blade-toolbar-mobile__action-label">
-          {{ resolveTitle(item) }}
-        </span>
-        <span
-          class="vc-blade-toolbar-mobile__action-icon"
-          :class="{ 'vc-blade-toolbar-mobile__action-icon--primary': index === 0 }"
-          aria-hidden="true"
-        >
-          <VcIcon
-            :icon="resolveIcon(item)"
-            size="s"
-          />
-        </span>
-      </button>
-    </div>
-
-    <!-- FAB area -->
-    <Transition
-      name="toolbar-mobile-fab"
-      mode="out-in"
-    >
-      <!-- Expanded: close FAB -->
-      <button
-        v-if="isExpanded"
-        key="close"
-        class="vc-blade-toolbar-mobile__close-fab"
-        :aria-label="$t('COMPONENTS.ORGANISMS.VC_BLADE.CLOSE_MENU')"
-        aria-expanded="true"
-        @click="closeMenu"
-      >
-        <VcIcon
-          icon="material-close"
-          size="s"
-        />
-      </button>
-
-      <!-- Collapsed: pill -->
-      <div
-        v-else
-        key="pill"
-        class="vc-blade-toolbar-mobile__pill"
-      >
-        <button
-          v-if="items[0]"
-          class="vc-blade-toolbar-mobile__pill-action"
-          :aria-label="resolveTitle(items[0])"
-          @click="handlePrimaryClick"
-        >
-          <VcIcon
-            :icon="resolveIcon(items[0])"
-            size="s"
-            aria-hidden="true"
-          />
-          <span class="vc-blade-toolbar-mobile__pill-label">
-            {{ resolveTitle(items[0]) }}
-          </span>
-        </button>
-        <button
-          v-if="items.length > 1"
-          class="vc-blade-toolbar-mobile__pill-more"
-          :aria-label="$t('COMPONENTS.ORGANISMS.VC_BLADE.MORE')"
-          aria-haspopup="menu"
-          aria-expanded="false"
-          @click="openMenu"
-        >
-          <VcIcon
-            icon="material-keyboard_arrow_up"
-            size="xs"
-          />
-        </button>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, isRef, toValue } from "vue";
-import { VcIcon } from "@ui/components/atoms";
-import type { IBladeToolbar } from "@core/types";
-import { resolveReactiveBoolean } from "@ui/components/organisms/vc-blade/utils";
-
-const props = defineProps<{
-  items: IBladeToolbar[];
-}>();
-
-const isExpanded = ref(false);
-
-function resolveTitle(item: IBladeToolbar): string {
-  if (!item.title) return "";
-  if (isRef(item.title)) return toValue(item.title) ?? "";
-  return String(item.title);
-}
-
-function resolveIcon(item: IBladeToolbar): string {
-  if (!item.icon) return "";
-  if (typeof item.icon === "function") return item.icon();
-  return item.icon;
-}
-
-function isItemDisabled(item: IBladeToolbar): boolean {
-  return resolveReactiveBoolean(item.disabled);
-}
-
-function getStaggerStyle(index: number): Record<string, string> {
-  const delay = isExpanded.value
-    ? `${index * 40}ms`
-    : `${(props.items.length - 1 - index) * 25}ms`;
-  return { transitionDelay: delay };
-}
-
-function openMenu() {
-  isExpanded.value = true;
-}
-
-function closeMenu() {
-  isExpanded.value = false;
-}
-
-function handlePrimaryClick() {
-  if (props.items[0]) {
-    props.items[0].clickHandler?.();
-  }
-}
-
-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-action-bg: var(--surface-color);
-  --blade-toolbar-mobile-action-text: var(--neutrals-800);
-  // Circle button colors
-  --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);
-}
-
-// iOS-like spring timing function
-$spring: cubic-bezier(0.32, 0.72, 0, 1);
-$fab-bottom: 76px;
-$fab-right: 20px;
-// WCAG minimum touch target
-$touch-min: 44px;
-
-.vc-blade-toolbar-mobile {
-  // ── Backdrop ──────────────────────────────────────────────────────────
-  &__backdrop {
-    @apply tw-fixed tw-inset-0 tw-z-[55];
-    background: var(--overlay-bg);
-    backdrop-filter: blur(var(--overlay-blur));
-    -webkit-backdrop-filter: blur(var(--overlay-blur));
-  }
-
-  // ── Menu container ────────────────────────────────────────────────────
-  &__menu {
-    position: fixed;
-    bottom: calc(#{$fab-bottom} + #{$touch-min} + 8px);
-    right: $fab-right;
-    z-index: 60;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: flex-end;
-    pointer-events: none;
-
-    &--open {
-      pointer-events: auto;
-
-      .vc-blade-toolbar-mobile__action {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  }
-
-  // ── Individual action item ────────────────────────────────────────────
-  &__action {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 4px 4px 4px 16px;
-    min-height: $touch-min;
-    border: 1px solid var(--surface-border);
-    border-radius: 28px;
-    background: color-mix(in srgb, var(--blade-toolbar-mobile-action-bg) 92%, transparent);
-    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
-    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
-    box-shadow: var(--shadow-sm);
-    cursor: pointer;
-
-    opacity: 0;
-    transform: translateY(16px);
-    transition:
-      opacity 0.28s $spring,
-      transform 0.28s $spring;
-
-    &:hover:not(:disabled) {
-      background: var(--blade-toolbar-mobile-action-bg);
-      box-shadow: var(--shadow-md);
-      transition-duration: 0.15s;
-    }
-
-    &:active:not(:disabled) {
-      transform: scale(0.96) !important;
-      transition-duration: 0.08s;
-    }
-
-    &:disabled {
-      opacity: 0.4 !important;
-      cursor: default;
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--blade-toolbar-mobile-pill-bg-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &__action-label {
-    @apply tw-text-sm tw-font-medium tw-whitespace-nowrap tw-leading-none;
-    color: var(--blade-toolbar-mobile-action-text);
-  }
-
-  &__action-icon {
-    @apply tw-flex tw-items-center tw-justify-center tw-w-9 tw-h-9 tw-rounded-full tw-shrink-0;
-    background: var(--blade-toolbar-circle-button-bg-color);
-    color: var(--blade-toolbar-circle-button-text-color);
-
-    &--primary {
-      background: var(--blade-toolbar-circle-button-main-bg-color);
-    }
-  }
-
-  // ── Close FAB (expanded state) ────────────────────────────────────────
-  &__close-fab {
-    position: fixed;
-    bottom: $fab-bottom;
-    @supports (bottom: env(safe-area-inset-bottom)) {
-      bottom: calc(#{$fab-bottom} + env(safe-area-inset-bottom));
-    }
-    right: $fab-right;
-    z-index: 60;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $touch-min;
-    height: $touch-min;
-    border: none;
-    border-radius: 50%;
-    background: var(--blade-toolbar-mobile-pill-bg-color);
-    color: var(--blade-toolbar-mobile-toggle-icon-color);
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    box-shadow: var(--shadow-sm);
-
-    &:active {
-      transform: scale(0.92);
-      transition: transform 0.08s ease;
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--blade-toolbar-mobile-toggle-icon-color);
-      outline-offset: 2px;
-    }
-  }
-
-  // ── Pill (collapsed state) ────────────────────────────────────────────
-  &__pill {
-    position: fixed;
-    bottom: $fab-bottom;
-    @supports (bottom: env(safe-area-inset-bottom)) {
-      bottom: calc(#{$fab-bottom} + env(safe-area-inset-bottom));
-    }
-    right: $fab-right;
-    z-index: 60;
-    display: flex;
-    align-items: stretch;
-    height: $touch-min;
-    border-radius: calc(#{$touch-min} / 2);
-    background: var(--blade-toolbar-mobile-pill-bg-color);
-    overflow: hidden;
-    box-shadow: var(--shadow-sm);
-  }
-
-  &__pill-action {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 0 14px;
-    min-height: $touch-min;
-    border: none;
-    background: transparent;
-    color: var(--blade-toolbar-mobile-toggle-icon-color);
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-
-    &:active {
-      background: rgba(255, 255, 255, 0.12);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--blade-toolbar-mobile-toggle-icon-color);
-      outline-offset: -2px;
-    }
-  }
-
-  &__pill-label {
-    @apply tw-text-sm tw-font-semibold tw-whitespace-nowrap tw-leading-none;
-  }
-
-  &__pill-more {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: $touch-min;
-    padding: 0 12px;
-    border: none;
-    border-left: 1px solid rgba(255, 255, 255, 0.24);
-    background: transparent;
-    color: var(--blade-toolbar-mobile-toggle-icon-color);
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-
-    &:active {
-      background: rgba(255, 255, 255, 0.12);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--blade-toolbar-mobile-toggle-icon-color);
-      outline-offset: -2px;
-    }
-  }
-}
-
-// ── Backdrop transition ─────────────────────────────────────────────────
-.toolbar-mobile-backdrop-enter-active {
-  transition:
-    opacity 0.25s ease,
-    backdrop-filter 0.3s ease;
-}
-
-.toolbar-mobile-backdrop-leave-active {
-  transition:
-    opacity 0.2s ease 0.08s,
-    backdrop-filter 0.2s ease 0.08s;
-}
-
-.toolbar-mobile-backdrop-enter-from,
-.toolbar-mobile-backdrop-leave-to {
-  opacity: 0;
-  backdrop-filter: blur(0);
-  -webkit-backdrop-filter: blur(0);
-}
-
-// ── FAB morph transition ────────────────────────────────────────────────
-.toolbar-mobile-fab-enter-active {
-  transition:
-    opacity 0.15s ease,
-    transform 0.25s $spring;
-}
-
-.toolbar-mobile-fab-leave-active {
-  transition:
-    opacity 0.1s ease,
-    transform 0.15s ease;
-}
-
-.toolbar-mobile-fab-enter-from {
-  opacity: 0;
-  transform: scale(0.85);
-}
-
-.toolbar-mobile-fab-leave-to {
-  opacity: 0;
-  transform: scale(0.85);
-}
-</style>

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

@@ -1,14 +0,0 @@
-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/widgets/WidgetContainer.vue

@@ -1,38 +0,0 @@
-<template>
-  <WidgetContainerMobile
-    v-if="visibleWidgets.length > 0 && $isMobile.value"
-    :widgets="visibleWidgets"
-    :blade-id="normalizedBladeId"
-  />
-  <WidgetContainerDesktop
-    v-else-if="visibleWidgets.length > 0"
-    :widgets="visibleWidgets"
-    :blade-id="normalizedBladeId"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, inject, toValue } from "vue";
-import { useWidgets } from "@core/composables/useWidgets";
-import WidgetContainerDesktop from "@ui/components/organisms/vc-blade/_internal/widgets/WidgetContainerDesktop.vue";
-import WidgetContainerMobile from "@ui/components/organisms/vc-blade/_internal/widgets/WidgetContainerMobile.vue";
-import { BladeInstance } from "@framework/injection-keys";
-import { IWidget } from "@core/services/widget-service";
-import { DEFAULT_BLADE_INSTANCE } from "@ui/components/organisms/vc-blade/constants";
-import { resolveVisibility } from "@ui/components/organisms/vc-blade/utils";
-
-interface Props {
-  bladeId: string;
-}
-
-const props = defineProps<Props>();
-const normalizedBladeId = computed(() => props.bladeId.toLowerCase());
-const widgetService = useWidgets();
-const widgets = computed(() => widgetService.getWidgets(normalizedBladeId.value));
-
-const bladeInstance = inject(BladeInstance, DEFAULT_BLADE_INSTANCE);
-
-const visibleWidgets = computed(() =>
-  widgets.value.filter((widget: IWidget) => resolveVisibility(widget.isVisible, toValue(bladeInstance))),
-);
-</script>

package/ui/components/organisms/vc-blade/_internal/widgets/WidgetContainerDesktop.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="vc-widget-container-desktop">
-    <div class="vc-widget-container-desktop__content">
-      <component
-        :is="widget.component"
-        v-for="widget in displayedItems"
-        :key="widget.id"
-        v-bind="widget.props || {}"
-        :widget-id="widget.id"
-        v-on="widget.events || {}"
-      />
-
-      <VcDropdown
-        v-if="showMoreButton"
-        :model-value="showToolbar"
-        :items="overflowItems"
-        floating
-        placement="bottom-end"
-        variant="secondary"
-        @update:model-value="showToolbar = $event"
-      >
-        <template #trigger="{ isActive }">
-          <div
-            class="vc-widget-container-desktop__more"
-            :class="{ 'vc-widget-container-desktop__more--active': isActive }"
-            @click="showToolbar = !showToolbar"
-          >
-            <VcIcon icon="lucide-chevron-down" />
-          </div>
-        </template>
-
-        <template #item="{ item }">
-          <WidgetDropdownItem
-            v-if="item.trigger"
-            :icon="item.trigger.icon"
-            :title="item.trigger.title || item.title || ''"
-            :badge="item.trigger.badge"
-            :disabled="resolveDisabled(item.trigger.disabled)"
-            @click="handleTriggerClick(item)"
-          />
-          <component
-            v-else
-            :is="item.component"
-            class="tw-w-full"
-            v-bind="item.props || {}"
-            horizontal
-            :widget-id="item.id"
-            v-on="item.events || {}"
-            @click="showToolbar = false"
-          />
-        </template>
-      </VcDropdown>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, toValue, type Ref, type ComputedRef } from "vue";
-import { IWidget } from "@core/services/widget-service";
-import { useWidgets } from "@core/composables";
-import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import WidgetDropdownItem from "./WidgetDropdownItem.vue";
-
-interface Props {
-  widgets: IWidget[];
-  bladeId: string;
-}
-
-const props = defineProps<Props>();
-const showToolbar = ref(false);
-const widgetService = useWidgets();
-
-const displayedItems = computed(() => props.widgets.slice(0, 3));
-const overflowItems = computed(() => props.widgets.slice(3));
-const showMoreButton = computed(() => props.widgets.length > 3);
-
-function resolveDisabled(disabled: Ref<boolean> | ComputedRef<boolean> | boolean | undefined): boolean {
-  if (disabled === undefined) return false;
-  return typeof disabled === "boolean" ? disabled : toValue(disabled);
-}
-
-function handleTriggerClick(widget: IWidget) {
-  showToolbar.value = false;
-  if (widget.trigger?.onClick) {
-    widget.trigger.onClick();
-  }
-  widgetService.setActiveWidget({ widgetId: widget.id });
-}
-</script>
-
-<style lang="scss">
-:root {
-  --blade-toolbar-widgets-bg-color: var(--neutrals-100);
-  --blade-toolbar-widgets-bg-hover-color: var(--neutrals-200);
-}
-
-.vc-widget-container-desktop {
-  @apply tw-relative tw-flex tw-select-none tw-shrink-0;
-  width: fit-content;
-  background-color: var(--blade-toolbar-widgets-bg-color);
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-gap-1;
-  }
-
-  // Suppress widget's own hover inside dropdown — the dropdown item wrapper provides hover feedback
-  .vc-dropdown__item {
-    --widget-bg-hover-color: transparent;
-    --widget-icon-hover-color: var(--widget-icon-color);
-    --widget-title-hover-color: var(--widget-title-color);
-  }
-
-  &__more {
-    @apply tw-flex tw-items-center tw-justify-center tw-px-2 tw-h-full tw-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/widgets/WidgetContainerMobile.vue

@@ -1,114 +0,0 @@
-<template>
-  <div
-    v-show="isAnyVisible"
-    class="vc-widget-container-mobile"
-  >
-    <div
-      ref="containerRef"
-      class="vc-widget-container-mobile__content"
-    >
-      <component
-        :is="widget.component"
-        v-for="widget in visibleItems"
-        :key="widget.id"
-        v-bind="widget.props || {}"
-        :data-item-key="widget.id"
-        :widget-id="widget.id"
-        v-on="widget.events || {}"
-      />
-
-      <div
-        v-if="showMoreButton"
-        data-more-button
-        class="vc-widget-container-mobile__more"
-        @click="showOverflow = true"
-      >
-        <VcIcon icon="lucide-chevron-up" />
-      </div>
-    </div>
-
-    <VcSidebar
-      :model-value="showOverflow"
-      position="bottom"
-      size="sm"
-      draggable
-      drag-handle
-      :close-button="false"
-      :inset="false"
-      @update:model-value="showOverflow = $event"
-    >
-      <div class="vc-widget-container-mobile__overflow-list">
-        <component
-          :is="item.component"
-          v-for="item in hiddenItems"
-          :key="item.id"
-          class="tw-w-full"
-          v-bind="item.props || {}"
-          horizontal
-          :widget-id="item.id"
-          v-on="item.events || {}"
-          @click="showOverflow = false"
-        />
-      </div>
-    </VcSidebar>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useAdaptiveItems } from "@ui/composables/useAdaptiveItems";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
-import { IWidget } from "@core/services/widget-service";
-
-interface Props {
-  widgets: IWidget[];
-  bladeId: string;
-}
-
-const props = defineProps<Props>();
-const containerRef = ref<HTMLElement | null>(null);
-const showOverflow = ref(false);
-const isAnyVisible = computed(() => props.widgets.length > 0);
-
-const { visibleItems, showMoreButton, hiddenItems } = useAdaptiveItems<IWidget>({
-  containerRef,
-  items: computed(() => props.widgets),
-  getItemKey: (item: IWidget) => item.id ?? "",
-  moreButtonWidth: 70,
-  initialItemWidth: 80,
-});
-</script>
-
-<style lang="scss">
-:root {
-  --blade-toolbar-widgets-bg-color-mobile: var(--additional-50);
-  --blade-toolbar-widgets-mobile-height: 80px;
-}
-
-.vc-widget-container-mobile {
-  @apply tw-fixed tw-bottom-0 tw-left-0 tw-right-0 tw-w-full tw-z-[54];
-  height: var(--blade-toolbar-widgets-mobile-height);
-  background-color: var(--blade-toolbar-widgets-bg-color-mobile);
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-items-center tw-gap-1 tw-px-[22px];
-    height: var(--blade-toolbar-widgets-mobile-height);
-  }
-
-  &__more {
-    @apply tw-flex tw-items-center tw-justify-center tw-px-2 tw-h-full tw-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);
-    }
-  }
-
-  &__overflow-list {
-    @apply tw-flex tw-flex-col tw-gap-2 tw-p-4;
-  }
-}
-</style>