@vc-shell/framework 1.1.99-alpha.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.99-alpha.1",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -90,9 +90,9 @@
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "1.1.99-alpha.1",
-    "@vc-shell/config-generator": "1.1.99-alpha.1",
-    "@vc-shell/ts-config": "1.1.99-alpha.1",
+    "@vc-shell/api-client-generator": "1.2.0",
+    "@vc-shell/config-generator": "1.2.0",
+    "@vc-shell/ts-config": "1.2.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",
@@ -112,7 +112,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "stableVersion": "1.1.90",
-  "npmTag": "alpha",
-  "gitHead": "104a5b740c2b93da7702cd073a2d39d17977c83e"
+  "gitHead": "b2d01aef92535f1a9b6af0d621a43f920d541ba8"
 }

package/shared/components/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -6,7 +6,7 @@
     @contextmenu.prevent
   >
     <GenericDropdown
-      opened
+      :opened="true"
       :items="appsList"
       :is-item-active="(item) => locationHandler(item.relativeUrl ?? '')"
       max-height="auto"
@@ -72,7 +72,7 @@ const switchApp = (app: AppDescriptor) => {
   @apply tw-relative tw-flex tw-shrink-0 tw-h-full;
 
   &__item {
-    @apply tw-flex tw-items-center tw-w-full tw-p-3;
+    @apply tw-flex tw-items-center tw-w-full tw-p-3 tw-w-full;
   }
 
   &__item-icon {

package/shared/components/app-switcher/composables/useAppSwitcher/index.ts

@@ -1,11 +1,8 @@
-import { computed, Ref, ref, inject } from "vue";
+import { computed, Ref, ref } from "vue";
 import { AppDescriptor, AppsClient } from "../../../../../core/api/platform";
 import { usePermissions } from "../../../../../core/composables";
 import { notification } from "./../../../notifications";
 import { i18n } from "../../../../../core/plugins";
-import { AuthProviderKey } from "../../../../../injection-keys";
-import { IAuthProvider } from "../../../../../core/types/auth-provider";
-import { shouldEnablePlatformFeatures } from "../../../../../core/providers/auth-provider-utils";
 
 interface IUseAppSwitcher {
   readonly appsList: Ref<AppDescriptor[]>;
@@ -17,23 +14,12 @@ export function useAppSwitcher(): IUseAppSwitcher {
   const { hasAccess } = usePermissions();
   const appsList = ref<AppDescriptor[]>([]);
 
-  // Inject auth provider to check if platform features should be enabled
-  const authProvider = inject(AuthProviderKey);
-
   async function getApiClient(): Promise<AppsClient> {
     const client = new AppsClient();
     return client;
   }
 
   async function getApps() {
-    // Skip loading apps for custom authentication providers
-    if (!shouldEnablePlatformFeatures(authProvider)) {
-      console.log("[useAppSwitcher] Skipping getApps - custom authentication provider detected");
-      appsList.value = []; // Ensure empty list for custom providers
-      return;
-    }
-
-    console.log("[useAppSwitcher] Loading apps from platform");
     const client = await getApiClient();
 
     try {

package/shared/components/sign-in/useExternalProvider.ts

@@ -1,8 +1,6 @@
 import { useLocalStorage } from "@vueuse/core";
-import { inject, type Ref } from "vue";
+import type { Ref } from "vue";
 import { ExternalSignInClient, ExternalSignInProviderInfo } from "../../../core/api/platform";
-import { shouldEnablePlatformFeatures } from "../../../core/providers/auth-provider-utils";
-import { AuthProviderKey } from "../../../injection-keys";
 
 export interface IUseExternalProvider {
   storage: Ref<{ providerType?: string | undefined }>;
@@ -14,9 +12,6 @@ export interface IUseExternalProvider {
 const VC_EXTERNAL_AUTH_DATA_KEY = "externalSignIn";
 
 export const useExternalProvider = (): IUseExternalProvider => {
-  // Check if we're using a custom auth provider
-  const authProvider = inject(AuthProviderKey);
-  const isPlatformProvider = shouldEnablePlatformFeatures(authProvider);
   const externalSecurityClient = new ExternalSignInClient();
   const externalSignInStorage = useLocalStorage<{ providerType?: string | undefined }>(
     VC_EXTERNAL_AUTH_DATA_KEY,
@@ -86,11 +81,6 @@ export const useExternalProvider = (): IUseExternalProvider => {
   }
 
   async function getExternalLoginProviders() {
-    if (!isPlatformProvider) {
-      console.log("[useExternalProvider] Skipping getExternalLoginProviders - custom authentication provider detected");
-      return undefined;
-    }
-
     let result: ExternalSignInProviderInfo[] | undefined = undefined;
     try {
       result = await externalSecurityClient.getExternalLoginProviders();

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -14,15 +14,7 @@ import { toRefs } from "@vueuse/core";
 import { unrefNested } from "./unrefNested";
 import { usePermissions } from "../../../../core/composables";
 
-// Lazy initialization to avoid calling composables at module level
-let hasAccess: ReturnType<typeof usePermissions>["hasAccess"] | null = null;
-function getHasAccess() {
-  if (!hasAccess) {
-    const permissions = usePermissions();
-    hasAccess = permissions.hasAccess;
-  }
-  return hasAccess;
-}
+const { hasAccess } = usePermissions();
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -177,7 +169,7 @@ function nodeBuilder<
     if (toValue(model) && Array.isArray(toValue(model))) {
       return toValue(model).map((modelItem: ToRefs<{ [x: string]: unknown; id: string }>) => {
         return controlSchema.fields.reduce((arr, fieldItem) => {
-          if (safeIn("permissions", fieldItem) && !getHasAccess()(fieldItem.permissions)) {
+          if (safeIn("permissions", fieldItem) && !hasAccess(fieldItem.permissions)) {
             return arr;
           }
 
@@ -206,7 +198,7 @@ function nodeBuilder<
 
     return [
       controlSchema.fields.reduce((arr, field) => {
-        if (safeIn("permissions", field) && !getHasAccess()(field.permissions)) {
+        if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
           return arr;
         }
 

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import VcBadge from "./vc-badge.vue";
 import { ref } from "vue";
 

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcButton } from "./";
 import { VcIcon } from "../vc-icon";
 

package/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcCard } from ".";
 import { VcInput, VcCol, VcButton } from "./../../";
 

package/ui/components/atoms/vc-col/vc-col.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcCol } from "./";
 import { VcRow } from "./../vc-row";
 import { VcImage } from "./../../";

package/ui/components/atoms/vc-container/vc-container.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcContainer } from "./";
 
 /**

package/ui/components/atoms/vc-hint/vc-hint.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcHint } from "./";
 
 /**

package/ui/components/atoms/vc-icon/vc-icon.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcIcon } from "./index";
 import VcIconTest from "./vc-icon-test.vue";
 import VcIconExamples from "./vc-icon-examples.vue";

package/ui/components/atoms/vc-image/vc-image.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcImage } from "./";
 
 /**

package/ui/components/atoms/vc-label/vc-label.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcLabel } from "./";
 
 /**

package/ui/components/atoms/vc-link/vc-link.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcLink } from "./";
 
 /**

package/ui/components/atoms/vc-progress/vc-progress.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcProgress } from "./";
 
 /**

package/ui/components/atoms/vc-row/vc-row.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcRow } from "./";
 import { VcImage } from "./../../";
 

package/ui/components/atoms/vc-skeleton/vc-skeleton.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import VcSkeleton from "./vc-skeleton.vue";
 
 /**

package/ui/components/atoms/vc-status/vc-status.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcStatus } from "./";
 import { VcIcon } from "../vc-icon";
 

package/ui/components/atoms/vc-status-icon/vc-status-icon.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcStatusIcon } from "./";
 
 /**

package/ui/components/atoms/vc-tooltip/vc-tooltip.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcTooltip } from "./";
 
 /**

package/ui/components/atoms/vc-video/vc-video.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcVideo } from "./";
 
 /**

package/ui/components/atoms/vc-widget/vc-widget.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcWidget } from "./";
 import { provideWidgetService } from "../../../../core/composables";
 

package/ui/components/molecules/index.ts

@@ -1,3 +1,4 @@
+export * from "./vc-accordion";
 export * from "./vc-breadcrumbs";
 export * from "./vc-editor";
 export * from "./vc-form";

package/ui/components/molecules/vc-accordion/_internal/vc-accordion-item/vc-accordion-item.vue

@@ -0,0 +1,251 @@
+<template>
+  <div
+    class="vc-accordion-item"
+    :class="{
+      'vc-accordion-item--expanded': isExpandedInternal,
+      'vc-accordion-item--disabled': disabled,
+      'vc-accordion-item--has-overflow': hasOverflow,
+    }"
+  >
+    <div
+      class="vc-accordion-item__header"
+      @click="toggle"
+    >
+      <div class="vc-accordion-item__title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <VcIcon
+        v-if="hasOverflow"
+        class="vc-accordion-item__icon"
+        :class="{ 'vc-accordion-item__icon--rotated': isExpandedInternal }"
+        icon="lucide-chevron-down"
+      />
+    </div>
+
+    <div
+      ref="contentWrapperRef"
+      class="vc-accordion-item__content-wrapper"
+      :class="{
+        'vc-accordion-item__content-wrapper--faded': hasOverflow && !isExpandedInternal,
+        'vc-accordion-item__content-wrapper--scrollable': isExpandedInternal && hasScrollInExpandedState,
+      }"
+      :style="contentWrapperStyle"
+    >
+      <div
+        ref="contentRef"
+        class="vc-accordion-item__content"
+      >
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { VcIcon } from "../../../../atoms/vc-icon";
+
+export interface Props {
+  title?: string;
+  collapsedHeight?: number;
+  maxExpandedHeight?: number;
+  isExpanded?: boolean;
+  disabled?: boolean;
+}
+
+export interface Emits {
+  (event: "toggle", value: boolean): void;
+  (event: "update:isExpanded", value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsedHeight: 0,
+  isExpanded: false,
+  disabled: false,
+});
+
+const emit = defineEmits<Emits>();
+
+defineOptions({
+  name: "VcAccordionItem",
+});
+
+defineSlots<{
+  default: (props?: any) => any;
+  title: (props?: any) => any;
+}>();
+
+const contentRef = ref<HTMLElement>();
+const contentWrapperRef = ref<HTMLElement>();
+const contentHeight = ref(0);
+const isExpandedInternal = ref(props.isExpanded);
+const resizeObserver = ref<ResizeObserver>();
+
+const hasOverflow = computed(() => {
+  return contentHeight.value > props.collapsedHeight;
+});
+
+const hasScrollInExpandedState = computed(() => {
+  return props.maxExpandedHeight !== undefined && contentHeight.value > props.maxExpandedHeight;
+});
+
+const contentWrapperStyle = computed(() => {
+  if (isExpandedInternal.value) {
+    // If maxExpandedHeight is set and content exceeds it, limit to maxExpandedHeight
+    if (props.maxExpandedHeight !== undefined && contentHeight.value > props.maxExpandedHeight) {
+      return {
+        maxHeight: `${props.maxExpandedHeight}px`,
+      };
+    }
+    // Otherwise use full content height
+    return {
+      maxHeight: `${contentHeight.value}px`,
+    };
+  } else {
+    return {
+      maxHeight: props.collapsedHeight > 0 ? `${props.collapsedHeight}px` : "0px",
+    };
+  }
+});
+
+function toggle() {
+  if (props.disabled || !hasOverflow.value) return;
+
+  isExpandedInternal.value = !isExpandedInternal.value;
+  emit("toggle", isExpandedInternal.value);
+  emit("update:isExpanded", isExpandedInternal.value);
+}
+
+function updateContentHeight() {
+  if (contentRef.value) {
+    contentHeight.value = contentRef.value.scrollHeight;
+  }
+}
+
+watch(
+  () => props.isExpanded,
+  (newValue) => {
+    isExpandedInternal.value = newValue;
+  },
+);
+
+onMounted(() => {
+  updateContentHeight();
+
+  // Setup ResizeObserver to track content height changes
+  if (contentRef.value) {
+    resizeObserver.value = new ResizeObserver(() => {
+      updateContentHeight();
+    });
+    resizeObserver.value.observe(contentRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect();
+  }
+});
+</script>
+
+<style lang="scss">
+:root {
+  --accordion-item-border-color: var(--neutrals-200);
+  --accordion-item-header-background: var(--additional-50);
+  --accordion-item-header-background-hover: var(--primary-50);
+  --accordion-item-header-color: var(--secondary-950);
+  --accordion-item-content-background: var(--additional-50);
+  --accordion-item-content-color: var(--secondary-950);
+  --accordion-item-transition-duration: 300ms;
+  --accordion-item-border-radius: 6px;
+  --accordion-item-fade-height: 60px;
+}
+
+.vc-accordion-item {
+  position: relative;
+  background: var(--accordion-item-header-background);
+  border-radius: var(--accordion-item-border-radius);
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--accordion-item-header-background);
+    color: var(--accordion-item-header-color);
+    transition: background-color var(--accordion-item-transition-duration) ease;
+    user-select: none;
+
+    .vc-accordion-item--has-overflow & {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--accordion-item-header-background-hover);
+      }
+    }
+  }
+
+  &__title {
+    flex: 1;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  &__icon {
+    margin-left: 12px;
+    transition: transform var(--accordion-item-transition-duration) ease;
+    flex-shrink: 0;
+
+    &--rotated {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__content-wrapper {
+    position: relative;
+    overflow: hidden;
+    transition: max-height var(--accordion-item-transition-duration) ease;
+
+    &--faded::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: var(--accordion-item-fade-height);
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--accordion-item-content-background) 100%);
+      pointer-events: none;
+    }
+
+    &--scrollable {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+
+  &__content {
+    background: var(--accordion-item-content-background);
+    color: var(--accordion-item-content-color);
+    padding: 16px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .vc-accordion-item__header {
+      cursor: not-allowed;
+
+      &:hover {
+        background: var(--accordion-item-header-background);
+      }
+    }
+  }
+}
+</style>

package/ui/components/molecules/vc-accordion/index.ts

@@ -0,0 +1,11 @@
+import _Accordion from "./vc-accordion.vue";
+import _AccordionItem from "./_internal/vc-accordion-item/vc-accordion-item.vue";
+
+export const VcAccordion = _Accordion as typeof _Accordion;
+export const VcAccordionItem = _AccordionItem as typeof _AccordionItem;
+
+export type { AccordionItem, Props as AccordionProps, Emits as AccordionEmits } from "./vc-accordion.vue";
+export type {
+  Props as AccordionItemProps,
+  Emits as AccordionItemEmits,
+} from "./_internal/vc-accordion-item/vc-accordion-item.vue";