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

package/shared/components/blade-navigation/components/vc-blade-navigation/_internal/vc-mobile-back-button.vue

@@ -1,78 +0,0 @@
-<template>
-  <VcBreadcrumbs
-    v-on-click-outside="hideBreadcrumbs"
-    :items="breadcrumbs"
-    collapsed
-  >
-    <template #trigger="{ click }">
-      <OnLongPress
-        as="button"
-        @trigger="click"
-      >
-        <VcButton
-          ref="buttonRef"
-          icon="material-arrow_back"
-          icon-class="tw-text-neutrals-500"
-          icon-size="l"
-          text
-          @click="onClick"
-          @contextmenu.prevent
-        />
-      </OnLongPress>
-    </template>
-  </VcBreadcrumbs>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-import { onLongPress } from "@vueuse/core";
-import { VcButton } from "@ui/components/atoms/vc-button";
-import VcBreadcrumbs from "@ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue";
-import type { Breadcrumbs } from "@ui/types";
-import { OnLongPress, vOnClickOutside } from "@vueuse/components";
-
-const props = defineProps<{
-  breadcrumbs: Breadcrumbs[];
-  onBack: () => void;
-}>();
-
-const buttonRef = ref<HTMLElement>();
-const showBreadcrumbs = ref(false);
-
-const onClick = () => {
-  props.onBack();
-};
-
-onLongPress(
-  buttonRef,
-  () => {
-    showBreadcrumbs.value = true;
-  },
-  { delay: 500 },
-);
-
-const hideBreadcrumbs = () => {
-  showBreadcrumbs.value = false;
-};
-</script>
-
-<style lang="scss">
-.vc-mobile-back-button {
-  position: relative;
-
-  &__breadcrumbs {
-    position: fixed;
-    z-index: 1000;
-    background: var(--additional-50);
-    border-radius: var(--blade-navigation-border-radius);
-    box-shadow: var(--blade-navigation-shadow);
-    padding: 0.5rem;
-
-    &-button {
-      &--active {
-        background-color: var(--neutrals-100);
-      }
-    }
-  }
-}
-</style>

package/shared/components/blade-navigation/components/vc-blade-navigation/index.ts

@@ -1,2 +0,0 @@
-export { default as VcBladeNavigation } from "@shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation-new.vue";
-export { default as VcBladeNavigationV2 } from "@shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation-new.vue";

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation-new.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="vc-blade-navigation tw-flex tw-flex-col tw-grow tw-basis-0 tw-min-w-0 tw-overflow-hidden">
-    <!-- Non-blade routes (Dashboard, etc.) -->
-    <RouterView v-if="!hasBlades" />
-
-    <!-- Blade stack -->
-    <div
-      v-else
-      class="tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative tw-min-w-0"
-    >
-      <VcBladeSlot
-        v-for="(descriptor, index) in blades"
-        :key="descriptor.id"
-        :descriptor="descriptor"
-        :closable="index > 0"
-        :expanded="descriptor.id === activeBlade?.id"
-        :visible="isBladeVisible(descriptor, index)"
-        :breadcrumbs="breadcrumbs.slice(0, index)"
-        :back-button="
-          bladeCount > 1
-            ? mobileBackButtonFor(index)
-            : undefined
-        "
-        @close="onClose"
-        @parent-call="onParentCall"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, h, inject, Ref, toRef } from "vue";
-import { IsMobileKey } from "@framework/injection-keys";
-import { RouterView, useRouter } from "vue-router";
-import { watchDebounced } from "@vueuse/core";
-import { VcBladeSlot } from "@shared/components/blade-navigation/components/vc-blade-slot";
-import VcMobileBackButton from "@shared/components/blade-navigation/components/vc-blade-navigation/_internal/vc-mobile-back-button.vue";
-import { useBladeStack } from "@shared/components/blade-navigation/composables/useBladeStack";
-import { useBladeMessaging } from "@shared/components/blade-navigation/composables/useBladeMessaging";
-import { createUrlSync } from "@shared/components/blade-navigation/utils/urlSync";
-import { useBreadcrumbs } from "@core/composables/useBreadcrumbs";
-import { AiAgentServiceKey } from "@framework/injection-keys";
-import type { BladeDescriptor, IParentCallArgs } from "@shared/components/blade-navigation/types";
-
-const bladeStack = useBladeStack();
-const messaging = useBladeMessaging();
-const router = useRouter();
-const { breadcrumbs, push, remove } = useBreadcrumbs();
-
-// ── URL sync helper (centralized in urlSync.ts) ─────────────────────────────
-
-const { syncUrlReplace } = createUrlSync(router, bladeStack);
-
-// ── Blade state ─────────────────────────────────────────────────────────────
-
-const blades = computed(() => bladeStack.blades.value);
-const activeBlade = computed(() => bladeStack.activeBlade.value);
-const hasBlades = computed(() => blades.value.length > 0);
-
-const bladeCount = computed(() => {
-  return blades.value.filter((b) => b.visible).length;
-});
-
-// ── Visibility logic ────────────────────────────────────────────────────────
-
-const isMobile = inject(IsMobileKey)!;
-
-const aiAgentService = inject(AiAgentServiceKey, undefined);
-const isAiPanelExpanded = computed(() => aiAgentService?.isExpanded.value ?? false);
-
-const visibleBladesCount = computed(() => {
-  if (isMobile.value) return 1;
-  if (isAiPanelExpanded.value) return 1;
-  return 2;
-});
-
-function isBladeVisible(descriptor: BladeDescriptor, index: number): boolean {
-  if (!descriptor.visible) return false;
-  return index >= bladeCount.value - visibleBladesCount.value;
-}
-
-// ── Breadcrumbs sync ────────────────────────────────────────────────────────
-
-watchDebounced(
-  blades,
-  (newVal) => {
-    // Clear existing breadcrumbs
-    breadcrumbs.value.forEach((bc) => bc && remove([bc.id]));
-
-    // Rebuild from current blade stack
-    newVal.forEach((descriptor, index) => {
-      push({
-        id: index.toString(),
-        title: toRef({ title: descriptor.name }, "title"),
-        clickHandler: async (id) => {
-          const targetIndex = parseInt(id) + 1;
-          const bladeToClose = blades.value[targetIndex];
-          if (bladeToClose) {
-            const prevented = await bladeStack.closeBlade(bladeToClose.id);
-            if (!prevented) {
-              syncUrlReplace();
-            }
-            return !prevented;
-          }
-          return true;
-        },
-      });
-    });
-  },
-  {
-    deep: true,
-    immediate: true,
-    flush: "post",
-    debounce: 10,
-  },
-);
-
-// ── Event handlers ──────────────────────────────────────────────────────────
-
-async function onClose(bladeId: string): Promise<void> {
-  const prevented = await bladeStack.closeBlade(bladeId);
-  if (!prevented) {
-    syncUrlReplace();
-  }
-}
-
-async function onParentCall(args: IParentCallArgs, bladeId: string): Promise<void> {
-  try {
-    const result = await messaging.callParent(bladeId, args.method as string, args.args);
-    args.callback?.(result);
-  } catch (error) {
-    console.warn("[VcBladeNavigation] Parent call failed:", error);
-  }
-}
-
-// ── Mobile back button ──────────────────────────────────────────────────────
-
-function mobileBackButtonFor(index: number): ReturnType<typeof h> | undefined {
-  if (index <= 0) return undefined;
-  return h(VcMobileBackButton, {
-    breadcrumbs: breadcrumbs.value.slice(0, index),
-    onBack: async () => {
-      const blade = blades.value[index];
-      if (blade) {
-        const prevented = await bladeStack.closeBlade(blade.id);
-        if (!prevented) syncUrlReplace();
-      }
-    },
-  });
-}
-</script>
-
-<style lang="scss">
-:root {
-  --blade-navigation-bg-color: var(--additional-50);
-  --blade-navigation-shadow-color: var(--additional-950);
-  --blade-navigation-shadow: 2px 2px 8px rgb(from var(--blade-navigation-shadow-color) r g b / 7%);
-  --blade-navigation-border-radius: var(--blade-border-radius);
-}
-</style>

package/shared/components/blade-navigation/components/vc-blade-slot/index.ts

@@ -1 +0,0 @@
-export { default as VcBladeSlot } from "@shared/components/blade-navigation/components/vc-blade-slot/vc-blade-slot.vue";

package/shared/components/blade-navigation/components/vc-blade-slot/vc-blade-slot.vue

@@ -1,143 +0,0 @@
-<template>
-  <ErrorInterceptor :capture="true">
-    <template #default="{ error: interceptorError, reset: resetInterceptor }">
-      <component
-        :is="bladeComponent"
-        v-if="bladeComponent"
-        v-show="visible"
-        ref="bladeInstanceRef"
-        :param="descriptor.param"
-        :options="descriptor.options"
-        :closable="closable"
-        :expanded="expanded"
-        @close:blade="onCloseBlade"
-        @parent:call="onParentCall"
-        @expand:blade="onExpand"
-        @collapse:blade="onCollapse"
-        @vue:unmounted="resetInterceptor"
-      />
-    </template>
-  </ErrorInterceptor>
-</template>
-
-<script lang="ts" setup>
-import { computed, onBeforeUnmount, provide, ref, watch, watchEffect } from "vue";
-import { useBladeRegistry } from "@core/composables/useBladeRegistry";
-import { BladeInstance as BladeInstanceKey, BLADE_BACK_BUTTON } from "@framework/injection-keys";
-import { ErrorInterceptor } from "@shared/components/error-interceptor";
-import { useBladeMessaging } from "@shared/components/blade-navigation/composables/useBladeMessaging";
-import { useBladeStack } from "@shared/components/blade-navigation/composables/useBladeStack";
-import type { BladeDescriptor, IBladeInstance, IParentCallArgs } from "@shared/components/blade-navigation/types";
-import { BladeDescriptorKey } from "@shared/components/blade-navigation/types";
-import type { CoreBladeExposed } from "@shared/components/blade-navigation/types";
-import type { Breadcrumbs } from "@ui/types";
-import type { Component } from "vue";
-
-const props = defineProps<{
-  descriptor: BladeDescriptor;
-  closable: boolean;
-  expanded: boolean;
-  visible: boolean;
-  breadcrumbs?: Breadcrumbs[];
-  backButton?: Component;
-}>();
-
-const emit = defineEmits<{
-  (e: "close", bladeId: string): void;
-  (e: "parentCall", args: IParentCallArgs, bladeId: string): void;
-}>();
-
-const bladeRegistry = useBladeRegistry();
-const bladeStack = useBladeStack();
-const maximized = ref(false);
-const bladeInstanceRef = ref<CoreBladeExposed>();
-
-// Resolve blade component from registry
-const bladeComponent = computed(() => {
-  return bladeRegistry.getBladeComponent(props.descriptor.name);
-});
-
-// ── Provide new injection key (BladeDescriptor) ─────────────────────────────
-provide(
-  BladeDescriptorKey,
-  computed(() => props.descriptor),
-);
-
-// ── Provide legacy injection key (BladeInstance) for backward compatibility ──
-provide(
-  BladeInstanceKey,
-  computed<IBladeInstance>(() => ({
-    id: props.descriptor.name.toLowerCase(),
-    param: props.descriptor.param,
-    options: props.descriptor.options,
-    expandable: props.closable, // expandable when there are multiple blades
-    maximized: maximized.value,
-    error: (props.descriptor.error as IBladeInstance["error"]) ?? null,
-    navigation: undefined, // No longer VNode-based
-    breadcrumbs: props.breadcrumbs,
-    title: bladeInstanceRef.value?.title,
-  })),
-);
-
-// Provide back button component
-provide(
-  BLADE_BACK_BUTTON,
-  computed(() => props.backButton),
-);
-
-// ── Auto-register exposed methods with BladeMessaging ───────────────────────
-// Bridges defineExpose() (old API) → exposeToChildren() (new BladeMessaging)
-const messaging = useBladeMessaging();
-
-watch(
-  bladeInstanceRef,
-  (instance) => {
-    if (!instance) return;
-    const methods: Record<string, (...args: any[]) => any> = {};
-    for (const key of Object.keys(instance)) {
-      if (typeof instance[key] === "function") {
-        methods[key] = instance[key];
-      }
-    }
-    if (Object.keys(methods).length > 0) {
-      messaging.exposeToChildren(props.descriptor.id, methods);
-    }
-  },
-  { flush: "post" },
-);
-
-// Clean up exposed methods when blade is removed from the stack.
-// Hidden blades (v-show via replaceCurrentBlade) stay mounted — their methods persist.
-// Only truly removed blades (v-for key removed) trigger onBeforeUnmount.
-onBeforeUnmount(() => {
-  messaging.cleanup(props.descriptor.id);
-});
-
-// ── Propagate exposed title to BladeStack ────────────────────────────────────
-// Uses watchEffect so it tracks reactivity of bladeInstanceRef.value?.title
-// (which may be a ref exposed via defineExpose)
-watchEffect(() => {
-  const title = bladeInstanceRef.value?.title;
-  if (title !== undefined) {
-    bladeStack.setBladeTitle(props.descriptor.id, title);
-  }
-});
-
-// ── Event handlers ──────────────────────────────────────────────────────────
-
-function onCloseBlade(): void {
-  emit("close", props.descriptor.id);
-}
-
-function onParentCall(args: IParentCallArgs): void {
-  emit("parentCall", args, props.descriptor.id);
-}
-
-function onExpand(): void {
-  maximized.value = true;
-}
-
-function onCollapse(): void {
-  maximized.value = false;
-}
-</script>

package/shared/components/blade-navigation/components/vc-blade-view/vc-blade-view.ts

@@ -1,188 +0,0 @@
-import {
-  h,
-  provide,
-  ref,
-  VNode,
-  PropType,
-  Component,
-  reactive,
-  computed,
-  toRefs,
-  Slot,
-  defineComponent,
-  SetupContext,
-  onErrorCaptured,
-} from "vue";
-import { BladeInstance, navigationViewLocation, BLADE_BACK_BUTTON } from "@framework/injection-keys";
-import { BladeVNode, CoreBladeExposed, IBladeInstance } from "@shared/components/blade-navigation/types";
-import { toRef, watchTriggerable } from "@vueuse/core";
-import { DisplayableError } from "@core/utilities/error";
-import { Breadcrumbs } from "@ui/types";
-import { FALLBACK_BLADE_ID } from "@core/constants";
-
-/**
- * Normalizes slot content
- * @param slot The slot to normalize
- * @param data The data to pass to the slot
- * @returns Normalized slot content or null
- */
-function normalizeSlot(slot: Slot | undefined, data: { Component: VNode }): VNode | VNode[] | null {
-  if (!slot) return null;
-  const slotContent = slot(data);
-  return slotContent.length === 1 ? slotContent[0] : slotContent;
-}
-
-// Define the props type for type safety
-interface BladeViewProps {
-  blade?: BladeVNode;
-  expandable?: boolean;
-  error?: DisplayableError | Error | null | undefined;
-  breadcrumbs?: Breadcrumbs[];
-  backButton?: Component;
-}
-
-export const VcBladeView = defineComponent({
-  name: "BladeView",
-  inheritAttrs: false,
-  props: {
-    blade: {
-      type: Object as PropType<BladeVNode>,
-    },
-    expandable: {
-      type: Boolean,
-    },
-    error: {
-      type: Object as PropType<DisplayableError | Error | null | undefined>,
-      default: null,
-    },
-    breadcrumbs: {
-      type: Array as PropType<Breadcrumbs[]>,
-    },
-    backButton: {
-      type: Object as PropType<Component>,
-      default: undefined,
-    },
-  },
-  setup(props: BladeViewProps, { attrs, slots }: SetupContext) {
-    const maximized = ref<boolean>(false);
-    const viewRef = ref<CoreBladeExposed | undefined>();
-
-    const bl = toRef(props.blade);
-    const { backButton } = toRefs(props);
-
-    /**
-     * Links the blade instance to its navigation object.
-     *
-     * This is a crucial part of the blade navigation system:
-     * 1. When a blade is mounted, we need to associate its instance with the navigation props
-     * 2. This creates a two-way reference where the blade knows about its navigation context
-     * 3. The navigation instance property is implemented as a getter to ensure it always returns
-     *    the current value of viewRef
-     *
-     * The flush:sync option ensures this happens immediately in the same tick to prevent
-     * timing issues where the instance might not be available when needed.
-     */
-    const linkBladeInstanceToNavigation = (): void => {
-      const instance = viewRef.value;
-      const blade = bl.value;
-
-      if (!instance || !blade || !blade.props?.navigation) {
-        return;
-      }
-
-      // Create a reactive getter for the instance property
-      // This ensures that navigation.instance always returns the current viewRef value
-      Object.defineProperty(blade.props.navigation, "instance", {
-        get: () => instance,
-        configurable: true,
-        enumerable: true,
-      });
-    };
-
-    // Use watchTriggerable to manually invoke the linking process when needed
-    const { trigger: syncNavigationWithInstance } = watchTriggerable(
-      () => [viewRef.value, bl.value] as const,
-      () => linkBladeInstanceToNavigation(),
-      { flush: "sync" },
-    );
-
-    // Provide the navigation view location without using non-null assertion
-    if (bl.value) {
-      provide(navigationViewLocation, bl.value);
-    }
-
-    provide(BLADE_BACK_BUTTON, backButton);
-
-    provide(
-      BladeInstance,
-      computed<IBladeInstance>(() => ({
-        id: (bl.value?.type.name ?? FALLBACK_BLADE_ID).toLowerCase(),
-        param: bl.value?.props?.param,
-        options: bl.value?.props?.options,
-        expandable: props.expandable ?? false,
-        maximized: maximized.value,
-        error: props.error ?? null,
-        navigation: bl.value?.props?.navigation,
-        breadcrumbs: props.breadcrumbs,
-        title: bl.value?.props?.navigation?.instance?.title,
-      })),
-    );
-
-    /**
-     * Handler for expanding the blade
-     */
-    const onExpand = (): void => {
-      maximized.value = true;
-    };
-
-    /**
-     * Handler for collapsing the blade
-     */
-    const onCollapse = (): void => {
-      maximized.value = false;
-    };
-
-    /**
-     * Callback function onClose, which is passed while opening blade, called when a BladeVNode is unmounted.
-     * @param vnode The unmounted VNode.
-     */
-    const onVnodeUnmounted: BladeVNode["props"]["onVnodeUnmounted"] = (vnode): void => {
-      if (vnode.component?.isUnmounted && typeof vnode.props?.navigation?.onClose === "function") {
-        vnode.props.navigation.onClose();
-      }
-    };
-
-    /**
-     * Callback function onOpen, which is passed while opening blade, called when a BladeVNode is mounted.
-     * @param vnode The mounted VNode.
-     */
-    const onVnodeMounted: BladeVNode["props"]["onVnodeMounted"] = (vnode): void => {
-      if (vnode.component?.isMounted) {
-        // Synchronize the blade instance with navigation when the component is mounted
-        syncNavigationWithInstance();
-
-        if (typeof vnode.props?.navigation?.onOpen === "function") {
-          vnode.props.navigation.onOpen();
-        }
-      }
-    };
-
-    return () => {
-      if (props.blade) {
-        const component = h(
-          props.blade as Component,
-          Object.assign({}, attrs, {
-            ref: viewRef,
-            onVnodeUnmounted,
-            onVnodeMounted,
-            "onExpand:blade": onExpand,
-            "onCollapse:blade": onCollapse,
-          }),
-        );
-
-        return normalizeSlot(slots.default, { Component: component });
-      }
-      return null;
-    };
-  },
-});

package/shared/components/blade-navigation/composables/index.ts

@@ -1,5 +0,0 @@
-export { useBladeNavigation } from "@shared/components/blade-navigation/composables/useBladeNavigationAdapter";
-export { useBladeNavigation as useBladeNavigationAdapter } from "@shared/components/blade-navigation/composables/useBladeNavigationAdapter";
-export type { IUseBladeNavigation } from "@shared/components/blade-navigation/composables/useBladeNavigationAdapter";
-export { createBladeStack, useBladeStack } from "@shared/components/blade-navigation/composables/useBladeStack";
-export { createBladeMessaging, useBladeMessaging } from "@shared/components/blade-navigation/composables/useBladeMessaging";