@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -0,0 +1,263 @@
+<template>
+  <div
+    class="vc-blade-header"
+    :class="{
+      'vc-blade-header--mobile': $isMobile.value,
+    }"
+  >
+    <slot name="prepend"></slot>
+
+    <div class="vc-blade-header__status-container">
+      <div
+        v-if="typeof modified !== 'undefined'"
+        ref="tooltipIconRef"
+        :class="{
+          'vc-blade-header__status-not-edited': !modified,
+          'vc-blade-header__status-edited': modified,
+        }"
+        class="vc-blade-header__status"
+        @mouseenter="tooltipVisible = true"
+        @mouseleave="tooltipVisible = false"
+      >
+        <teleport :to="teleportTarget" defer>
+          <span
+            v-if="tooltipVisible"
+            ref="tooltipRef"
+            :style="floatingStyle"
+            class="vc-blade-header__tooltip"
+          >
+            {{
+              modified
+                ? $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.UNSAVED_CHANGES")
+                : $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.NO_CHANGES")
+            }}
+          </span>
+        </teleport>
+      </div>
+
+      <div
+        v-if="icon"
+        class="vc-blade-header__icon"
+      >
+        <VcIcon
+          :icon="icon"
+          size="xxl"
+        />
+      </div>
+
+      <div class="vc-blade-header__wrapper">
+        <div class="vc-blade-header__content">
+          <div
+            class="vc-blade-header__title"
+            :class="{
+              'vc-blade-header__title-no-subtitle': !subtitle,
+            }"
+          >
+            {{ title }}
+          </div>
+          <div
+            v-if="subtitle"
+            class="vc-blade-header__subtitle"
+          >
+            {{ subtitle }}
+          </div>
+        </div>
+
+        <div
+          v-if="$slots['actions']"
+          class="vc-blade-header__actions"
+        >
+          <slot name="actions"></slot>
+        </div>
+      </div>
+
+      <div
+        v-if="!$isMobile.value"
+        class="vc-blade-header__controls"
+      >
+        <template v-if="blade.expandable">
+          <div
+            v-if="blade.maximized"
+            class="vc-blade-header__button"
+            @click="onCollapse"
+          >
+            <VcIcon icon="material-minimize" />
+          </div>
+          <div
+            v-else
+            class="vc-blade-header__button"
+            @click="onExpand"
+          >
+            <VcIcon icon="material-toolbar" />
+          </div>
+        </template>
+        <div
+          v-if="closable"
+          class="vc-blade-header__button"
+          @click="onClose"
+        >
+          <VcIcon icon="material-close" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "./../../../";
+import { inject, ref } from "vue";
+import { shift } from "@floating-ui/vue";
+import { BladeInstance } from "../../../../../injection-keys";
+import { DEFAULT_BLADE_INSTANCE } from "../constants";
+import { useFloatingPosition, useTeleportTarget } from "../../../../composables";
+
+export interface Props {
+  closable?: boolean;
+  title?: string;
+  subtitle?: string;
+  icon?: string;
+  modified?: boolean;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  close: [];
+  expand: [];
+  collapse: [];
+}>();
+
+const blade = inject(BladeInstance, DEFAULT_BLADE_INSTANCE);
+const tooltipVisible = ref(false);
+const tooltipIconRef = ref<HTMLElement | null>(null);
+const tooltipRef = ref<HTMLElement | null>(null);
+const { teleportTarget } = useTeleportTarget();
+const { floatingStyle } = useFloatingPosition(tooltipIconRef, tooltipRef, {
+  placement: "bottom-start",
+  middleware: () => [shift()],
+});
+
+function onExpand(): void {
+  if (blade.value.expandable) {
+    emit("expand");
+  }
+}
+
+function onCollapse(): void {
+  if (blade.value.expandable) {
+    emit("collapse");
+  }
+}
+
+function onClose(): void {
+  if (props.closable) {
+    emit("close");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-header-height: 70px;
+  --blade-header-mobile-height: 60px;
+  --blade-header-background-color: var(--additional-50);
+  --blade-header-button-color: var(--neutrals-400);
+  --blade-header-button-color-hover: var(--neutrals-500);
+  --blade-header-breadcrumbs-button-color: var(--neutrals-500);
+  --blade-header-breadcrumbs-button-color-hover: var(--neutrals-700);
+  --blade-header-icon-color: var(--secondary-500);
+  --blade-header-title-font-size: 19px;
+  --blade-header-title-color: var(--neutrals-950);
+  --blade-header-subtitle-color: var(--secondary-500);
+  --blade-not-edited: var(--success-400);
+  --blade-edited: var(--warning-500);
+  --blade-header-border-color: var(--neutrals-200);
+  --blade-tooltip-background: var(--additional-50);
+  --blade-tooltip-border: var(--neutrals-200);
+  --blade-tooltip-text: var(--neutrals-600);
+}
+
+.vc-blade-header {
+  @apply tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-6 tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)];
+
+  &--mobile {
+    @apply tw-h-[var(--blade-header-mobile-height)];
+
+    .vc-blade-header__title {
+      @apply tw-text-lg/[22px];
+    }
+
+    .vc-blade-header__content {
+      @apply tw-shrink-0;
+      min-width: 40px;
+    }
+
+    .vc-blade-header__actions {
+      @apply tw-shrink tw-min-w-0 tw-overflow-hidden tw-flex tw-items-center tw-gap-1;
+
+      > * {
+        @apply tw-truncate tw-min-w-0;
+      }
+    }
+  }
+
+  &--hidden {
+    @apply tw-hidden;
+  }
+
+  &__wrapper {
+    @apply tw-flex tw-items-center tw-justify-between tw-grow tw-basis-0 tw-overflow-hidden;
+  }
+
+  &__actions {
+    @apply tw-overflow-hidden tw-flex-shrink-0;
+  }
+
+  &__status {
+    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-[10px];
+  }
+
+  &__status-container {
+    @apply tw-flex tw-flex-1 tw-flex-row tw-items-center tw-truncate;
+  }
+
+  &__status-not-edited {
+    @apply tw-bg-[color:var(--blade-not-edited)] #{!important};
+  }
+
+  &__status-edited {
+    @apply tw-bg-[color:var(--blade-edited)] #{!important};
+  }
+
+  &__tooltip {
+    @apply tw-absolute tw-z-10 tw-bg-[color:var(--blade-tooltip-background)] tw-border tw-border-solid tw-border-[color:var(--blade-tooltip-border)] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:var(--blade-tooltip-text)] tw-font-normal tw-py-1 tw-px-2 tw-ml-4;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--blade-header-icon-color)] tw-mr-3;
+  }
+
+  &__content {
+    @apply tw-overflow-hidden;
+  }
+
+  &__title {
+    @apply tw-text-[color:var(--blade-header-title-color)] tw-text-xl/[23px] tw-truncate;
+  }
+
+  &__title-no-subtitle {
+    @apply tw-text-[length:var(--blade-header-title-font-size)] tw-font-semibold #{!important};
+  }
+
+  &__subtitle {
+    @apply tw-text-[color:var(--blade-header-subtitle-color)] tw-text-xs tw-mt-1;
+  }
+
+  &__controls {
+    @apply tw-flex tw-items-center;
+  }
+
+  &__button {
+    @apply tw-text-[color:var(--blade-header-button-color)] tw-ml-2.5 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)];
+  }
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <!-- Error banner -->
+  <div
+    v-if="hasError"
+    class="vc-blade-status-banners__error"
+  >
+    <VcIcon
+      size="s"
+      icon="material-warning"
+    />
+    <div class="vc-blade-status-banners__error-text">{{ shortErrorMessage }}</div>
+    <VcButton
+      text
+      class="vc-blade-status-banners__error-button"
+      @click="openErrorDetails"
+    >
+      {{ t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}
+    </VcButton>
+  </div>
+
+  <!-- Unsaved changes banner -->
+  <div
+    v-if="modified"
+    class="vc-blade-status-banners__unsaved-changes"
+  >
+    <VcIcon
+      size="s"
+      icon="material-info"
+    />
+    <div class="vc-blade-status-banners__unsaved-changes-text">
+      {{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+import { useI18n } from "vue-i18n";
+import { VcButton, VcIcon } from "../../..";
+import { BladeInstance } from "../../../../../injection-keys";
+import { DEFAULT_BLADE_INSTANCE } from "../constants";
+import { useBladeError } from "./composables/useBladeError";
+
+interface Props {
+  modified?: boolean;
+}
+
+defineProps<Props>();
+
+const blade = inject(BladeInstance, DEFAULT_BLADE_INSTANCE);
+const { t } = useI18n({ useScope: "global" });
+const { hasError, shortErrorMessage, openErrorDetails } = useBladeError(blade);
+</script>
+
+<style lang="scss">
+.vc-blade-status-banners {
+  &__error {
+    @apply tw-text-[color:var(--blade-text-color)] tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)];
+  }
+
+  &__error-text {
+    @apply tw-line-clamp-1 tw-w-full tw-mx-2;
+  }
+
+  &__error-button {
+    @apply tw-shrink-0 tw-opacity-80 hover:tw-opacity-100 hover:tw-text-[color:var(--blade-text-color)];
+    @apply tw-text-[color:var(--blade-text-color)] !important;
+  }
+
+  &__unsaved-changes {
+    @apply tw-text-[color:var(--blade-text-color)] tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)];
+  }
+
+  &__unsaved-changes-text {
+    @apply tw-line-clamp-1 tw-w-full tw-ml-2;
+  }
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="vc-blade-toolbar"
+    :class="{
+      'vc-blade-toolbar--mobile': $isMobile.value,
+    }"
+  >
+    <div class="vc-blade-toolbar__content">
+      <div class="vc-blade-toolbar__buttons">
+        <ToolbarMobile
+          v-if="$isMobile.value"
+          :items="visibleItems"
+        />
+        <ToolbarDesktop
+          v-else
+          :items="visibleItems"
+          :is-expanded="isExpanded"
+        />
+      </div>
+
+      <slot
+        v-if="$slots['widgets-container']"
+        name="widgets-container"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRef } from "vue";
+import type { IBladeToolbar } from "../../../../../core/types";
+import ToolbarMobile from "./toolbar/ToolbarMobile.vue";
+import ToolbarDesktop from "./toolbar/ToolbarDesktop.vue";
+import { useToolbarRegistration } from "./composables/useToolbarRegistration";
+
+export interface Props {
+  items: IBladeToolbar[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+
+const isExpanded = true;
+const { visibleItems } = useToolbarRegistration(toRef(props, "items"));
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-height: 54px;
+  --blade-toolbar-height-expanded: 54px;
+  --blade-toolbar-background-color: var(--additional-50);
+  --blade-toolbar-border-color: var(--neutrals-200);
+  --blade-toolbar-icon-color: var(--neutrals-700);
+  --blade-toolbar-icon-hover-color: var(--primary-600);
+}
+
+.vc-blade-toolbar {
+  @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-flex-row tw-w-full tw-relative tw-overflow-hidden tw-min-h-[var(--blade-toolbar-height)];
+  }
+
+  &__buttons {
+    @apply tw-relative tw-overflow-hidden tw-flex tw-flex-1 tw-min-w-0;
+  }
+
+  &--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/composables/useBladeError.ts

@@ -0,0 +1,64 @@
+import { computed, defineComponent, h, type ComputedRef } from "vue";
+import type { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
+import { usePopup } from "../../../../../../shared";
+import { useI18n } from "vue-i18n";
+import { VcLink } from "../../../..";
+import vcPopupError from "../../../../../../shared/components/common/popup/vc-popup-error.vue";
+
+/**
+ * Encapsulates blade error state and the "error details" popup logic.
+ *
+ * Extracts three computeds and the `usePopup` setup that were previously
+ * inline in vc-blade.vue's `<script setup>`.
+ */
+export function useBladeError(blade: ComputedRef<IBladeInstance>) {
+  const { t } = useI18n({ useScope: "global" });
+
+  const error = computed(() => blade.value.error ?? null);
+
+  const hasError = computed(() => Boolean(error.value));
+
+  const shortErrorMessage = computed(() => {
+    const err = error.value;
+    if (!err) return "";
+    return err instanceof Error ? err.message : String(err);
+  });
+
+  const errorDetails = computed(() => {
+    const err = error.value;
+    if (!err) return "";
+    if (err instanceof Error) {
+      return (err as Error & { details?: string }).details || err.stack || String(err);
+    }
+    return String(err);
+  });
+
+  const { open } = usePopup({
+    component: vcPopupError,
+    slots: {
+      default: errorDetails,
+      header: defineComponent({
+        render: () =>
+          h("div", [
+            t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
+            " ",
+            h(
+              VcLink,
+              { onClick: () => navigator.clipboard.writeText(errorDetails.value) },
+              `(${t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.COPY_ERROR")})`,
+            ),
+          ]),
+      }),
+    },
+  });
+
+  function openErrorDetails() {
+    open();
+  }
+
+  return {
+    hasError,
+    shortErrorMessage,
+    openErrorDetails,
+  };
+}

package/ui/components/organisms/vc-blade/_internal/composables/useToolbarRegistration.ts

@@ -0,0 +1,114 @@
+import { type ComputedRef, type Ref, computed, inject, onBeforeUnmount, ref, watch } from "vue";
+import { useBlade, usePermissions, useToolbar } from "../../../../../../core/composables";
+import type { IBladeToolbar } from "../../../../../../core/types";
+import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
+import type { IToolbarItem } from "../../../../../../core/services";
+import { resolveVisibility, resolveReactiveBoolean } from "../../utils";
+
+const PROP_ITEM_ID_PREFIX = "prop_toolbar_item_";
+
+/**
+ * Manages the lifecycle of toolbar items:
+ * - Converts `IBladeToolbar[]` props to `IToolbarItem[]` for the ToolbarService
+ * - Registers/unregisters items as props or blade ID change
+ * - Filters by permissions, visibility, and disabled-on-mobile
+ * - Sorts by priority
+ * - Cleans up on unmount
+ */
+export function useToolbarRegistration(items: Ref<IBladeToolbar[]>) {
+  const { hasAccess } = usePermissions();
+  const {
+    registerToolbarItem,
+    unregisterToolbarItem,
+    getToolbarItems,
+    updateToolbarItem,
+  } = useToolbar({ autoCleanup: false });
+
+  const blade = useBlade();
+  const bladeId = computed(() => (blade.value?.id ?? FALLBACK_BLADE_ID).toLowerCase());
+
+  const isMobile = inject<ComputedRef<boolean>>(
+    "isMobile",
+    computed(() => false),
+  );
+
+  const registeredItemIds = new Set<string>();
+  const registrationBladeId = ref(bladeId.value);
+
+  function convertToToolbarItem(item: IBladeToolbar, index: number): IToolbarItem {
+    const activeBladeId = registrationBladeId.value;
+    const id = item.id || `${PROP_ITEM_ID_PREFIX}${activeBladeId}_${index}`;
+
+    return {
+      ...item,
+      id,
+      bladeId: activeBladeId,
+      priority: index * -1,
+    } as IToolbarItem;
+  }
+
+  function updateItems(): void {
+    const activeBladeId = registrationBladeId.value;
+    const nextRegisteredIds = new Set<string>();
+
+    items.value.forEach((item, index) => {
+      const toolbarItem = convertToToolbarItem(item, index);
+      const id = toolbarItem.id;
+      nextRegisteredIds.add(id);
+
+      if (registeredItemIds.has(id)) {
+        updateToolbarItem(id, toolbarItem, activeBladeId);
+      } else {
+        registerToolbarItem(toolbarItem, activeBladeId);
+      }
+    });
+
+    for (const id of registeredItemIds) {
+      if (!nextRegisteredIds.has(id)) {
+        unregisterToolbarItem(id, activeBladeId);
+      }
+    }
+
+    registeredItemIds.clear();
+    nextRegisteredIds.forEach((id) => registeredItemIds.add(id));
+  }
+
+  function clearToolbarItems(targetBladeId = registrationBladeId.value): void {
+    for (const id of registeredItemIds) {
+      unregisterToolbarItem(id, targetBladeId);
+    }
+    registeredItemIds.clear();
+  }
+
+  const visibleItems = computed(() => {
+    // getToolbarItems reads from reactive registry (blade-scoped + global "*"),
+    // so Vue automatically tracks changes to toolbar items for this blade.
+    return getToolbarItems(registrationBladeId.value)
+      .filter(
+        (item) =>
+          hasAccess(item.permissions) &&
+          resolveVisibility(item.isVisible, blade.value) &&
+          (isMobile.value ? !resolveReactiveBoolean(item.disabled) : true),
+      )
+      .sort((a, b) => {
+        const priorityA = a.priority ?? 0;
+        const priorityB = b.priority ?? 0;
+        return priorityB - priorityA;
+      });
+  });
+
+  watch(items, () => updateItems(), { deep: true, immediate: true });
+
+  watch(bladeId, (newBladeId, oldBladeId) => {
+    if (newBladeId === oldBladeId) return;
+    clearToolbarItems(oldBladeId);
+    registrationBladeId.value = newBladeId;
+    updateItems();
+  });
+
+  onBeforeUnmount(() => {
+    clearToolbarItems();
+  });
+
+  return { visibleItems };
+}

package/ui/components/organisms/vc-blade/_internal/toolbar/ToolbarBaseButton.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { computed, nextTick, ref } from "vue";
+
+vi.mock("../../../../", () => ({
+  VcIcon: {
+    name: "VcIcon",
+    props: ["icon", "size"],
+    template: "<i class='vc-icon-stub' />",
+  },
+}));
+
+import ToolbarBaseButton from "./ToolbarBaseButton.vue";
+
+describe("ToolbarBaseButton", () => {
+  it("treats computed disabled as reactive and blocks click", async () => {
+    const onClick = vi.fn();
+
+    const wrapper = mount(ToolbarBaseButton as any, {
+      props: {
+        icon: "material-add",
+        title: "Create",
+        disabled: computed(() => true),
+        onClick,
+      },
+    });
+
+    await wrapper.find("button").trigger("click");
+
+    expect(onClick).not.toHaveBeenCalled();
+    expect(wrapper.find("button").classes()).toContain("vc-blade-toolbar-base-button--disabled");
+  });
+
+  it("locks repeated async clicks while handler is pending", async () => {
+    let resolveClick: (() => void) | undefined;
+    const onClick = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveClick = resolve;
+        }),
+    );
+
+    const wrapper = mount(ToolbarBaseButton as any, {
+      props: {
+        icon: "material-add",
+        title: "Create",
+        disabled: false,
+        onClick,
+      },
+    });
+
+    const button = wrapper.find("button");
+    await button.trigger("click");
+    await button.trigger("click");
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    resolveClick?.();
+    await nextTick();
+  });
+
+  it("renders reactive title values from Ref", async () => {
+    const title = ref("Initial");
+
+    const wrapper = mount(ToolbarBaseButton as any, {
+      props: {
+        icon: "material-add",
+        title,
+      },
+    });
+
+    expect(wrapper.text()).toContain("Initial");
+
+    title.value = "Updated";
+    await nextTick();
+
+    expect(wrapper.text()).toContain("Updated");
+  });
+});