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

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

@@ -1,263 +0,0 @@
-<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">
-          <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 "@ui/components/atoms/vc-icon";
-import { inject, ref } from "vue";
-import { shift } from "@floating-ui/vue";
-import { BladeInstance } from "@framework/injection-keys";
-import { DEFAULT_BLADE_INSTANCE } from "@ui/components/organisms/vc-blade/constants";
-import { useFloatingPosition, useTeleportTarget } from "@ui/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/BladeHeaderSkeleton.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="vc-blade-header-skeleton">
-    <!-- Icon placeholder -->
-    <div class="vc-blade-header-skeleton__icon">
-      <VcSkeleton
-        variant="circle"
-        :width="24"
-        :height="24"
-      />
-    </div>
-
-    <div class="vc-blade-header-skeleton__text">
-      <!-- Title placeholder -->
-      <VcSkeleton
-        variant="block"
-        :width="180"
-        :height="19"
-      />
-      <!-- Subtitle placeholder -->
-      <div class="tw-mt-1.5">
-        <VcSkeleton
-          variant="block"
-          :width="120"
-          :height="12"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { VcSkeleton } from "@ui/components/atoms/vc-skeleton";
-
-defineOptions({ name: "BladeHeaderSkeleton" });
-</script>
-
-<style lang="scss">
-.vc-blade-header-skeleton {
-  @apply tw-shrink-0 tw-flex tw-items-center tw-gap-3 tw-px-6
-    tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)]
-    tw-bg-[color:var(--blade-header-background-color)];
-  height: var(--blade-header-height, 70px);
-
-  &__icon {
-    @apply tw-shrink-0;
-  }
-
-  &__text {
-    @apply tw-overflow-hidden;
-  }
-}
-</style>

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

@@ -1,195 +0,0 @@
-<template>
-  <!-- Error banner -->
-  <Transition name="banner-reveal">
-    <div v-if="hasError" class="vc-blade-status-banners__error" role="alert">
-      <div class="vc-blade-status-banners__error-accent" />
-
-      <!-- Collapsed header row -->
-      <div class="vc-blade-status-banners__error-header" @click="toggle">
-        <VcIcon size="s" icon="fas fa-exclamation-circle" class="vc-blade-status-banners__error-icon" />
-        <span class="vc-blade-status-banners__error-text">{{ shortErrorMessage }}</span>
-        <VcIcon size="xs" :icon="isExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
-          class="vc-blade-status-banners__error-chevron" />
-      </div>
-
-      <!-- Expandable details (useCollapsible: measured max-height transition) -->
-      <div ref="contentRef" class="vc-blade-status-banners__error-details-wrapper" :style="wrapperStyle">
-        <div class="vc-blade-status-banners__error-details">
-          <pre class="vc-blade-status-banners__error-details-text">{{ errorDetails }}</pre>
-          <button class="vc-blade-status-banners__error-copy"
-            :title="t('COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.COPY_ERROR')" @click.stop="handleCopy">
-            <VcIcon size="xs" :icon="copied ? 'fas fa-check' : 'fas fa-copy'" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </Transition>
-
-  <!-- Unsaved changes banner -->
-  <Transition name="banner-reveal">
-    <div v-if="modified" class="vc-blade-status-banners__unsaved" role="status">
-      <div class="vc-blade-status-banners__unsaved-accent" />
-      <VcIcon size="s" icon="fas fa-pen" class="vc-blade-status-banners__unsaved-icon" />
-      <span class="vc-blade-status-banners__unsaved-text">
-        {{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}
-      </span>
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts" setup>
-import { inject, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useCollapsible } from "@ui/composables/useCollapsible";
-import { BladeInstance } from "@framework/injection-keys";
-import { DEFAULT_BLADE_INSTANCE } from "@ui/components/organisms/vc-blade/constants";
-import { useBladeError } from "@ui/components/organisms/vc-blade/_internal/composables/useBladeError";
-
-interface Props {
-  modified?: boolean;
-}
-
-defineProps<Props>();
-
-const blade = inject(BladeInstance, DEFAULT_BLADE_INSTANCE);
-const { t } = useI18n({ useScope: "global" });
-const { hasError, shortErrorMessage, errorDetails, copyError } = useBladeError(blade);
-
-const { contentRef, isExpanded, wrapperStyle, toggle } = useCollapsible();
-const copied = ref(false);
-
-async function handleCopy() {
-  const ok = await copyError();
-  if (ok) {
-    copied.value = true;
-    setTimeout(() => {
-      copied.value = false;
-    }, 2000);
-  }
-}
-</script>
-
-<style lang="scss">
-// ── Banner entrance/exit (opacity + translateY, GPU-accelerated) ─────
-.banner-reveal-enter-active {
-  transition:
-    opacity 0.2s ease-out,
-    transform 0.2s ease-out;
-}
-
-.banner-reveal-leave-active {
-  transition:
-    opacity 0.15s ease-in,
-    transform 0.15s ease-in;
-}
-
-.banner-reveal-enter-from {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-
-.banner-reveal-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-// ── Error banner ──────────────────────────────────────────────────────
-.vc-blade-status-banners {
-  &__error {
-    @apply tw-relative tw-overflow-hidden;
-    background: var(--danger-50);
-    border-bottom: 1px solid var(--danger-100);
-  }
-
-  &__error-accent {
-    @apply tw-absolute tw-left-0 tw-top-0 tw-bottom-0;
-    width: 3px;
-    background: var(--danger-500);
-  }
-
-  &__error-header {
-    @apply tw-flex tw-items-center tw-cursor-pointer tw-select-none;
-    @apply tw-py-2 tw-pl-3 tw-pr-3;
-
-    &:hover {
-      background: var(--danger-100);
-    }
-  }
-
-  &__error-icon {
-    @apply tw-shrink-0 tw-mr-2;
-    color: var(--danger-500);
-  }
-
-  &__error-text {
-    @apply tw-flex-1 tw-min-w-0 tw-text-xs tw-font-medium tw-leading-snug tw-line-clamp-1;
-    color: var(--danger-800);
-  }
-
-  &__error-chevron {
-    @apply tw-shrink-0 tw-ml-2;
-    color: var(--danger-400);
-  }
-
-  &__error-details-wrapper {
-    @apply tw-overflow-hidden;
-    transition: max-height 0.25s ease;
-  }
-
-  &__error-details {
-    @apply tw-relative tw-rounded tw-overflow-hidden;
-    margin: 0 12px 8px;
-    background: var(--neutrals-50);
-    border: 1px solid var(--neutrals-200);
-  }
-
-  &__error-details-text {
-    @apply tw-text-[11px] tw-leading-relaxed tw-p-3 tw-pr-9;
-    @apply tw-whitespace-pre-wrap tw-break-words tw-overflow-y-auto;
-    @apply tw-m-0;
-    max-height: 120px;
-    color: var(--neutrals-700);
-    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
-  }
-
-  &__error-copy {
-    @apply tw-absolute tw-top-2 tw-right-2 tw-p-1 tw-rounded;
-    @apply tw-border-0 tw-cursor-pointer;
-    background: var(--neutrals-100);
-    color: var(--neutrals-500);
-    transition:
-      color 0.15s ease,
-      background-color 0.15s ease;
-
-    &:hover {
-      color: var(--neutrals-800);
-      background: var(--neutrals-200);
-    }
-  }
-
-  // ── Unsaved changes banner ────────────────────────────────────────
-  &__unsaved {
-    @apply tw-flex tw-items-center tw-relative;
-    @apply tw-py-[6px] tw-pl-3 tw-pr-3;
-    background: var(--warning-50);
-    border-bottom: 1px solid color-mix(in srgb, var(--warning-200) 60%, transparent);
-  }
-
-  &__unsaved-accent {
-    @apply tw-absolute tw-left-0 tw-top-0 tw-bottom-0;
-    width: 3px;
-    background: var(--warning-500);
-  }
-
-  &__unsaved-icon {
-    @apply tw-shrink-0 tw-mr-2;
-    color: var(--warning-600);
-  }
-
-  &__unsaved-text {
-    @apply tw-flex-1 tw-min-w-0 tw-text-xs tw-font-medium tw-leading-snug tw-line-clamp-1;
-    color: var(--warning-800);
-  }
-}
-</style>

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

@@ -1,73 +0,0 @@
-<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 "@ui/components/organisms/vc-blade/_internal/toolbar/ToolbarMobile.vue";
-import ToolbarDesktop from "@ui/components/organisms/vc-blade/_internal/toolbar/ToolbarDesktop.vue";
-import { useToolbarRegistration } from "@ui/components/organisms/vc-blade/_internal/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(--neutrals-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/BladeToolbarSkeleton.vue

@@ -1,34 +0,0 @@
-<template>
-  <div
-    class="vc-blade-toolbar vc-blade-toolbar-skeleton"
-    :class="{
-      'vc-blade-toolbar--mobile': $isMobile.value,
-    }"
-  >
-    <div class="vc-blade-toolbar__content">
-      <div class="vc-blade-toolbar-skeleton__buttons">
-        <VcSkeleton
-          v-for="i in 3"
-          :key="i"
-          variant="block"
-          :width="60"
-          :height="32"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { VcSkeleton } from "@ui/components/atoms/vc-skeleton";
-
-defineOptions({ name: "BladeToolbarSkeleton" });
-</script>
-
-<style lang="scss">
-.vc-blade-toolbar-skeleton {
-  &__buttons {
-    @apply tw-flex tw-items-center tw-gap-3 tw-px-4;
-  }
-}
-</style>

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

@@ -1,44 +0,0 @@
-import { computed, type ComputedRef } from "vue";
-import type { IBladeInstance } from "@shared/components/blade-navigation/types";
-
-/**
- * Encapsulates blade error state: reactive computeds for the banner
- * and a helper to copy full error details to clipboard.
- */
-export function useBladeError(blade: ComputedRef<IBladeInstance>) {
-  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);
-  });
-
-  async function copyError(): Promise<boolean> {
-    try {
-      const text = [shortErrorMessage.value, errorDetails.value].filter(Boolean).join("\n\n");
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  return {
-    hasError,
-    shortErrorMessage,
-    errorDetails,
-    copyError,
-  };
-}