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

package/ui/components/organisms/vc-app/vc-app.vue

@@ -1,252 +0,0 @@
-<template>
-  <VcLoading
-    v-if="!isAppReady"
-    active
-    class="vc-app__loader"
-  />
-  <div
-    v-else
-    ref="appRootRef"
-    class="vc-app"
-    :class="{
-      'vc-app--mobile': $isMobile.value,
-    }"
-  >
-    <div class="vc-app__main-content">
-      <!-- Layout: desktop sidebar or mobile top bar -->
-      <slot
-        name="layout"
-        :is-mobile="$isMobile.value"
-        :sidebar="sidebar"
-        :apps-list="appsList"
-        :switch-app="switchApp"
-        :open-root="openRoot"
-        :handle-menu-item-click="handleMenuItemClick"
-      >
-        <component
-          :is="$isDesktop.value ? DesktopLayout : MobileLayout"
-          :logo="logo"
-          :avatar="avatar"
-          :user-name="name"
-          :user-role="role"
-          :title="title"
-          :disable-menu="disableMenu"
-          :disable-app-switcher="disableAppSwitcher"
-          :apps-list="appsList"
-          @logo:click="openRoot"
-          @item:click="handleMenuItemClick"
-          @switch-app="switchApp"
-        >
-          <template
-            v-if="$slots['app-switcher'] && !disableAppSwitcher"
-            #app-switcher="{ appsList: slotAppsList, switchApp: slotSwitchApp }"
-          >
-            <slot
-              name="app-switcher"
-              :apps-list="slotAppsList"
-              :switch-app="slotSwitchApp"
-            />
-          </template>
-          <template
-            v-if="$slots.menu"
-            #menu="menuScope"
-          >
-            <slot
-              name="menu"
-              v-bind="menuScope"
-            />
-          </template>
-          <template
-            v-if="$slots['sidebar-header']"
-            #sidebar-header="headerScope"
-          >
-            <slot
-              name="sidebar-header"
-              v-bind="headerScope"
-            />
-          </template>
-          <template
-            v-if="$slots['sidebar-footer']"
-            #sidebar-footer="footerScope"
-          >
-            <slot
-              name="sidebar-footer"
-              v-bind="footerScope"
-            />
-          </template>
-        </component>
-      </slot>
-
-      <!-- Blade navigation / workspace -->
-      <slot
-        name="workspace"
-        :is-authenticated="isAuthenticated"
-      >
-        <div
-          v-if="isAuthenticated"
-          class="vc-app__workspace"
-        >
-          <VcBladeNavigation />
-          <!-- AI Agent Panel (shown when plugin is installed) -->
-          <VcAiAgentPanel v-if="aiAgentConfig?.url" />
-        </div>
-      </slot>
-
-      <!-- Popup container -->
-      <VcPopupContainer />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { inject, provide, ref, watch } from "vue";
-import DesktopLayout from "@ui/components/organisms/vc-app/_internal/layouts/DesktopLayout.vue";
-import MobileLayout from "@ui/components/organisms/vc-app/_internal/layouts/MobileLayout.vue";
-import { VcPopupContainer } from "@shared/components/popup-handler";
-import type { BladeRoutesRecord } from "@shared/components/blade-navigation/types";
-import type { AppDescriptor } from "@core/api/platform";
-import type { MenuItem } from "@core/types";
-import type { SidebarStateReturn } from "@core/composables/useSidebarState";
-import { VcAiAgentPanel } from "@core/plugins/ai-agent";
-import type { IAiAgentConfig } from "@core/plugins/ai-agent";
-import { notification } from "@shared/components/notifications/core/notification";
-import { useRoute } from "vue-router";
-import { AppRootElementKey, DynamicModulesKey, BladeRoutesKey, ModulesLoadErrorKey } from "@framework/injection-keys";
-import { createLogger } from "@core/utilities";
-import { provideSidebarState } from "@core/composables/useSidebarState";
-import { provideAppBarState } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarState";
-import { useShellBootstrap } from "@ui/components/organisms/vc-app/composables/useShellBootstrap";
-import { useShellNavigation } from "@ui/components/organisms/vc-app/composables/useShellNavigation";
-import { useShellLifecycle } from "@ui/components/organisms/vc-app/composables/useShellLifecycle";
-
-export interface Props {
-  isReady: boolean;
-  logo?: string;
-  version?: string;
-  title?: string;
-  avatar?: string;
-  name?: string;
-  disableMenu?: boolean;
-  disableAppSwitcher?: boolean;
-  role?: string;
-}
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-defineSlots<{
-  "app-switcher"?: (props: { appsList: AppDescriptor[]; switchApp: (app: AppDescriptor) => void }) => unknown;
-  layout?: (props: {
-    isMobile: boolean;
-    sidebar: SidebarStateReturn;
-    appsList: AppDescriptor[];
-    switchApp: (app: AppDescriptor) => void;
-    openRoot: () => void;
-    handleMenuItemClick: (item: MenuItem) => void;
-  }) => unknown;
-  menu?: (props: { expanded: boolean; onItemClick: (item: MenuItem) => void }) => unknown;
-  "sidebar-header"?: (props: { logo?: string; expanded: boolean; isMobile: boolean }) => unknown;
-  "sidebar-footer"?: (props: { avatar?: string; name?: string; role?: string }) => unknown;
-  workspace?: (props: { isAuthenticated: boolean }) => unknown;
-}>();
-
-const props = defineProps<Props>();
-
-const logger = createLogger("vc-app");
-logger.debug("Init vc-app");
-
-const route = useRoute();
-const isEmbedded = route.query.EmbeddedMode === "true";
-
-// App root element ref (for scoped Teleport targets)
-const appRootRef = ref<HTMLElement>();
-provide(AppRootElementKey, appRootRef);
-
-// Sidebar state (provide to all children)
-const sidebar = provideSidebarState();
-provideAppBarState();
-
-// Lifecycle: isReady/isAuthenticated watchers
-const { isAppReady, isAuthenticated, appsList, switchApp } = useShellLifecycle(props);
-
-// Navigation: menu click handling + blade resolution
-const { handleMenuItemClick, openRoot } = useShellNavigation();
-
-// Injected config from parent
-const internalRoutes = inject(BladeRoutesKey)!;
-const dynamicModules = inject(DynamicModulesKey, undefined);
-const aiAgentConfig = inject<IAiAgentConfig | undefined>("aiAgentConfig", undefined);
-const aiAgentAddGlobalToolbarButton = inject<boolean>("aiAgentAddGlobalToolbarButton", true);
-
-// Module load error state for notification toast
-// Default ref(false) = backward-compatible: no dynamic modules means no error
-const modulesLoadError = inject(ModulesLoadErrorKey, ref(false));
-
-// Bootstrap: provide services + register default shell UI
-useShellBootstrap({
-  isEmbedded,
-  internalRoutes,
-  dynamicModules,
-  aiAgentConfig,
-  aiAgentAddGlobalToolbarButton,
-});
-
-// Progressive loading: show error as notification toast instead of blocking overlay
-watch(modulesLoadError, (hasError) => {
-  if (hasError) {
-    notification.error(
-      "Unable to load application modules. Please check your connection and try refreshing the page.",
-      { timeout: 10000 },
-    );
-  }
-});
-</script>
-
-<style lang="scss">
-:root {
-  --app-background: var(--secondary-200);
-  // Shared transition timing for synchronized animations
-  --app-panel-transition-duration: 0.3s;
-  --app-panel-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.vc-app {
-  @apply tw-flex tw-flex-col tw-w-full tw-h-full tw-box-border tw-m-0 tw-overflow-hidden tw-text-base;
-  background: var(--app-background);
-
-  &__loader {
-    background: var(--app-background);
-  }
-
-  &__app-bar {
-    @apply tw-shrink-0;
-  }
-
-  &__app-menu {
-    @apply tw-shrink-0;
-  }
-
-  &__main-content {
-    @apply tw-overflow-hidden tw-flex tw-grow tw-basis-0;
-  }
-
-  &__workspace {
-    @apply tw-w-full tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative;
-
-    .vc-app--mobile & {
-      @apply tw-p-0;
-    }
-  }
-
-
-  &__user-dropdown-button {
-    @apply tw-p-0 tw-mb-2 tw-w-full tw-h-auto;
-  }
-
-  &--mobile {
-    .vc-app__main-content {
-      @apply tw-flex-col;
-    }
-  }
-}
-</style>

package/ui/components/organisms/vc-auth-layout/index.ts

@@ -1 +0,0 @@
-export { default as VcAuthLayout } from "@ui/components/organisms/vc-auth-layout/vc-auth-layout.vue";

package/ui/components/organisms/vc-auth-layout/vc-auth-layout.vue

@@ -1,193 +0,0 @@
-<template>
-  <main
-    class="vc-auth-layout"
-    :style="containerStyle"
-  >
-    <div class="vc-auth-layout__logo-wrapper">
-      <img
-        v-if="logo"
-        :src="logo"
-        :alt="logoAlt"
-        class="vc-auth-layout__logo"
-        :class="{ 'vc-auth-layout__logo--loaded': logoLoaded }"
-        @load="logoLoaded = true"
-      />
-    </div>
-
-    <div class="vc-auth-layout__card">
-      <div
-        v-if="title || subtitle"
-        class="vc-auth-layout__header"
-      >
-        <h2
-          v-if="title"
-          class="vc-auth-layout__title"
-        >
-          {{ title }}
-        </h2>
-        <p
-          v-if="subtitle"
-          class="vc-auth-layout__subtitle"
-        >
-          {{ subtitle }}
-        </p>
-      </div>
-
-      <div class="vc-auth-layout__content">
-        <slot></slot>
-      </div>
-    </div>
-
-    <div
-      v-if="$slots.footer"
-      class="vc-auth-layout__footer"
-    >
-      <slot name="footer"></slot>
-    </div>
-
-    <div
-      v-if="version"
-      class="vc-auth-layout__version"
-    >
-      {{ version }}
-    </div>
-  </main>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from "vue";
-import { useRouter } from "vue-router";
-
-export interface Props {
-  /** Path to logo image */
-  logo?: string;
-  /** Background image URL (legacy support). If provided, renders full-screen background-image */
-  background?: string;
-  /** Card heading */
-  title?: string;
-  /** Card subheading */
-  subtitle?: string;
-  /** Page background color override */
-  bgColor?: string;
-  /** Accessible alt text for logo image */
-  logoAlt?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  logoAlt: "Logo",
-});
-
-defineSlots<{
-  /** Form content (fields, buttons, SSO, errors) */
-  default: () => unknown;
-  /** Below card (terms of service, privacy links) */
-  footer: () => unknown;
-}>();
-
-const router = useRouter();
-const version = router.currentRoute.value.meta?.appVersion;
-
-const logoLoaded = ref(false);
-const bgLoaded = ref(false);
-
-// Preload background image to avoid pop-in
-watch(
-  () => props.background,
-  (url) => {
-    bgLoaded.value = false;
-    if (!url) return;
-    const img = new Image();
-    img.onload = () => {
-      bgLoaded.value = true;
-    };
-    img.src = url;
-  },
-  { immediate: true },
-);
-
-const containerStyle = computed(() => {
-  if (props.background) {
-    return {
-      background: bgLoaded.value ? `url(${props.background}) center / cover no-repeat` : undefined,
-      backgroundColor: props.bgColor || undefined,
-    };
-  }
-  if (props.bgColor) {
-    return { backgroundColor: props.bgColor };
-  }
-  return undefined;
-});
-</script>
-
-<style lang="scss">
-:root {
-  --auth-layout-bg: var(--neutrals-100);
-  --auth-layout-card-bg: var(--additional-50);
-  --auth-layout-card-border: var(--neutrals-200);
-  --auth-layout-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --auth-layout-card-radius: 12px;
-  --auth-layout-card-max-width: 420px;
-  --auth-layout-title-color: var(--neutrals-900);
-  --auth-layout-subtitle-color: var(--neutrals-400);
-  --auth-layout-version-color: var(--neutrals-400);
-}
-
-.vc-auth-layout {
-  @apply tw-w-full tw-h-full tw-min-h-screen tw-box-border
-    tw-flex tw-flex-col tw-items-center tw-justify-center
-    tw-bg-[var(--auth-layout-bg)]
-    tw-px-4 tw-py-8;
-  transition: background 0.3s ease;
-
-  &__logo-wrapper {
-    @apply tw-mb-8 tw-flex tw-items-center tw-justify-center;
-    min-height: 48px; // Reserve space for logo to prevent layout shift
-  }
-
-  &__logo {
-    @apply tw-h-12 tw-max-w-[280px] tw-object-contain;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    &--loaded {
-      opacity: 1;
-    }
-  }
-
-  &__card {
-    @apply tw-w-full tw-bg-[var(--auth-layout-card-bg)]
-      tw-border tw-border-solid tw-border-[var(--auth-layout-card-border)]
-      tw-rounded-[var(--auth-layout-card-radius)]
-      tw-overflow-y-auto;
-    max-width: var(--auth-layout-card-max-width);
-    box-shadow: var(--auth-layout-card-shadow);
-  }
-
-  &__header {
-    @apply tw-pt-8 tw-px-8 tw-text-center;
-  }
-
-  &__title {
-    @apply tw-text-2xl tw-font-semibold tw-text-[var(--auth-layout-title-color)]
-      tw-m-0 tw-leading-tight;
-  }
-
-  &__subtitle {
-    @apply tw-text-sm tw-text-[var(--auth-layout-subtitle-color)]
-      tw-mt-2 tw-mb-0;
-  }
-
-  &__content {
-    @apply tw-px-8 tw-pt-6 tw-pb-8;
-  }
-
-  &__footer {
-    @apply tw-mt-6 tw-text-center tw-text-xs tw-text-[var(--auth-layout-subtitle-color)];
-    max-width: var(--auth-layout-card-max-width);
-  }
-
-  &__version {
-    @apply tw-mt-4 tw-text-xs tw-text-[var(--auth-layout-version-color)];
-  }
-}
-</style>

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

@@ -1,113 +0,0 @@
-<template>
-  <div class="vc-blade-content-skeleton">
-    <!-- Section 1: main fields -->
-    <div class="vc-blade-content-skeleton__section">
-      <VcSkeleton
-        variant="block"
-        :width="130"
-        :height="14"
-      />
-      <div class="vc-blade-content-skeleton__fields">
-        <div
-          v-for="i in 3"
-          :key="'a' + i"
-          class="vc-blade-content-skeleton__field"
-        >
-          <VcSkeleton
-            variant="block"
-            :width="60 + i * 20"
-            :height="11"
-          />
-          <div class="vc-blade-content-skeleton__input" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Section 2: more fields + textarea -->
-    <div class="vc-blade-content-skeleton__section">
-      <VcSkeleton
-        variant="block"
-        :width="110"
-        :height="14"
-      />
-      <div class="vc-blade-content-skeleton__fields">
-        <div
-          v-for="i in 2"
-          :key="'b' + i"
-          class="vc-blade-content-skeleton__field"
-        >
-          <VcSkeleton
-            variant="block"
-            :width="70 + i * 15"
-            :height="11"
-          />
-          <div class="vc-blade-content-skeleton__input" />
-        </div>
-        <div class="vc-blade-content-skeleton__field">
-          <VcSkeleton
-            variant="block"
-            :width="95"
-            :height="11"
-          />
-          <div class="vc-blade-content-skeleton__input vc-blade-content-skeleton__input--tall" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Section 3: short section -->
-    <div class="vc-blade-content-skeleton__section">
-      <VcSkeleton
-        variant="block"
-        :width="150"
-        :height="14"
-      />
-      <div class="vc-blade-content-skeleton__fields">
-        <div
-          v-for="i in 2"
-          :key="'c' + i"
-          class="vc-blade-content-skeleton__field"
-        >
-          <VcSkeleton
-            variant="block"
-            :width="55 + i * 25"
-            :height="11"
-          />
-          <div class="vc-blade-content-skeleton__input" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { VcSkeleton } from "@ui/components/atoms/vc-skeleton";
-
-defineOptions({ name: "BladeContentSkeleton" });
-</script>
-
-<style lang="scss">
-.vc-blade-content-skeleton {
-  @apply tw-flex-1 tw-overflow-auto tw-p-5 tw-flex tw-flex-col tw-gap-6;
-
-  &__section {
-    @apply tw-flex tw-flex-col tw-gap-4;
-  }
-
-  &__fields {
-    @apply tw-flex tw-flex-col tw-gap-4;
-  }
-
-  &__field {
-    @apply tw-flex tw-flex-col tw-gap-1.5;
-  }
-
-  &__input {
-    @apply tw-h-9 tw-rounded-md tw-animate-pulse;
-    @apply tw-bg-[color:var(--vc-skeleton-bg)];
-
-    &--tall {
-      @apply tw-h-20;
-    }
-  }
-}
-</style>