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

package/ui/components/molecules/vc-checkbox/vc-checkbox.stories.ts

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

package/ui/components/molecules/vc-editor/vc-editor.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcEditor, type CustomToolbarButton, type CustomToolbarDropdown } from "./";
 import { ref, defineComponent, h } from "vue";
 import type { Editor } from "@tiptap/vue-3";

package/ui/components/molecules/vc-field/vc-field.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import VcField from "./vc-field.vue";
 
 const TYPE = ["text", "date", "date-ago", "link", "email"];

package/ui/components/molecules/vc-file-upload/vc-file-upload.stories.ts

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

package/ui/components/molecules/vc-form/vc-form.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcForm } from "./";
 import { VcInput } from "../vc-input";
 import { VcButton } from "../../atoms/vc-button";

package/ui/components/molecules/vc-input/vc-input.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcInput } from "./";
 import { VcButton, VcIcon } from "../..";
 import { ref, computed } from "vue";

package/ui/components/molecules/vc-input-currency/vc-input-currency.stories.ts

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

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.stories.ts

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

package/ui/components/molecules/vc-multivalue/vc-multivalue.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 { VcMultivalue } from ".";
 
 /**

package/ui/components/molecules/vc-pagination/vc-pagination.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 { VcPagination } from "./";
 
 /**

package/ui/components/molecules/vc-radio-button/vc-radio-button.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 { VcRadioButton } from "./";
 
 /**

package/ui/components/molecules/vc-rating/vc-rating.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { Meta, StoryObj } from "@storybook/vue3";
+import { Meta, StoryObj } from "@storybook/vue3-vite";
 import VcRating from "./vc-rating.vue";
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export

package/ui/components/molecules/vc-select/vc-select.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcSelect } from "./";
 import { ref, h, computed } from "vue";
 import { VcIcon } from "../../atoms/vc-icon";

package/ui/components/molecules/vc-slider/vc-slider.stories.ts

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

package/ui/components/molecules/vc-switch/vc-switch.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 VcSwitch from "./vc-switch.vue";
 import VcHint from "../../atoms/vc-hint/vc-hint.vue";
 

package/ui/components/molecules/vc-textarea/vc-textarea.stories.ts

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

package/ui/components/molecules/vc-toast/vc-toast.stories.ts

@@ -1,5 +1,5 @@
 import { ref, defineComponent } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcToast } from ".";
 import { notification } from "../../../../shared/components/notifications";
 

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

@@ -60,11 +60,10 @@ import { ChangePasswordButton } from "../../../../shared/components/change-passw
 import { LogoutButton } from "../../../../shared/components/logout-button";
 import { provideGlobalSearch } from "../../../../core/composables/useGlobalSearch";
 import { provideDashboardService } from "../../../../core/composables/useDashboard";
-import { DynamicModulesKey, EMBEDDED_MODE, AuthProviderKey } from "../../../../injection-keys";
+import { DynamicModulesKey, EMBEDDED_MODE } from "../../../../injection-keys";
 import { provideMenuService } from "../../../../core/composables/useMenuService";
 import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
 import { useUserManagement } from "../../../../core/composables/useUserManagement";
-import { shouldEnablePlatformFeatures } from "../../../../core/providers/auth-provider-utils";
 
 export interface Props {
   isReady: boolean;
@@ -98,23 +97,6 @@ console.debug("vc-app: Init vc-app");
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
 const dynamicModules = inject(DynamicModulesKey, undefined);
 
-// Inject auth provider to check if platform features should be enabled
-const authProvider = inject(AuthProviderKey);
-
-// Automatically disable app switcher for custom authentication providers
-const shouldDisableAppSwitcher = computed(() => {
-  // If explicitly disabled via prop, respect that
-  if (props.disableAppSwitcher) return true;
-
-  // If using custom auth provider, disable platform-specific features
-  if (!shouldEnablePlatformFeatures(authProvider)) {
-    console.log("[VcApp] App Switcher disabled - custom authentication provider detected");
-    return true;
-  }
-
-  return false;
-});
-
 const isAppReady = ref(props.isReady);
 
 const route = useRoute();
@@ -241,7 +223,7 @@ provideAppSlots(
   slots,
   {
     disableMenu: props.disableMenu,
-    disableAppSwitcher: shouldDisableAppSwitcher.value,
+    disableAppSwitcher: props.disableAppSwitcher,
     version: props.version,
     avatar: props.avatar,
     name: props.name,

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -503,6 +503,10 @@ const value = computed({
       // Return empty array as fallback
       return [];
     }
+    // For boolean and other types, extract value from PropertyValue object if needed
+    if (internalModel.value && typeof internalModel.value === "object" && "value" in internalModel.value) {
+      return internalModel.value.value;
+    }
     return internalModel.value;
   },
   set(newValue) {

package/ui/components/organisms/vc-gallery/vc-gallery.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import { VcGallery } from "./";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";

package/ui/components/organisms/vc-popup/vc-popup.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { ref } from "vue";
 import { VcPopup } from ".";
 import VcButton from "../../atoms/vc-button/vc-button.vue";

package/core/providers/README.md

@@ -1,176 +0,0 @@
-# Authentication Providers
-
-This directory contains authentication provider implementations for the vc-shell framework.
-
-## Overview
-
-The vc-shell framework uses a pluggable authentication system that allows you to implement custom authentication logic while maintaining compatibility with all framework pages (Login, ResetPassword, ChangePassword, Invite).
-
-## Available Providers
-
-### PlatformAuthProvider (Default)
-
-The default authentication provider that uses VirtoCommerce Platform API for authentication.
-
-```typescript
-import { PlatformAuthProvider } from "@vc-shell/framework";
-
-const authProvider = new PlatformAuthProvider();
-```
-
-This provider is used automatically if no custom provider is specified.
-
-## Creating a Custom Provider
-
-To create a custom authentication provider, implement the `IAuthProvider` interface:
-
-```typescript
-import { IAuthProvider, UserDetail, SignInResult } from "@vc-shell/framework";
-import { computed, ref } from "vue";
-
-export class CustomAuthProvider implements IAuthProvider {
-  private _user = ref<UserDetail | undefined>();
-  private _loading = ref(false);
-
-  get user() {
-    return computed(() => this._user.value);
-  }
-
-  get loading() {
-    return computed(() => this._loading.value);
-  }
-
-  get isAuthenticated() {
-    return computed(() => this._user.value?.userName != null);
-  }
-
-  get isAdministrator() {
-    return computed(() => this._user.value?.isAdministrator);
-  }
-
-  async loadUser(): Promise<UserDetail> {
-    // Your custom logic to load user
-    // Example: from localStorage, file, custom API, etc.
-  }
-
-  async signIn(username: string, password: string): Promise<SignInResult> {
-    // Your custom sign-in logic
-  }
-
-  async signOut(): Promise<void> {
-    // Your custom sign-out logic
-  }
-
-  // Implement other required methods...
-}
-```
-
-See `example-custom-auth-provider.ts` for a complete implementation example.
-
-## Required Methods
-
-All authentication providers must implement the following methods:
-
-### Core Methods
-- `loadUser()` - Load current authenticated user
-- `signIn(username, password)` - Authenticate user with credentials
-- `signOut()` - Sign out current user
-
-### Password Management Methods
-- `validateToken(userId, token)` - Validate password reset token
-- `validatePassword(password)` - Validate password strength
-- `resetPasswordByToken(userId, password, token)` - Reset password using token
-- `requestPasswordReset(loginOrEmail)` - Request password reset email
-- `changeUserPassword(oldPassword, newPassword)` - Change current user password
-
-### Additional Methods
-- `getLoginType()` - Get available login types (e.g., local, external)
-
-### Properties
-- `user` - Current user details (ComputedRef)
-- `loading` - Loading state (ComputedRef)
-- `isAuthenticated` - Authentication status (ComputedRef)
-- `isAdministrator` - Administrator status (ComputedRef)
-
-## Using a Custom Provider
-
-To use a custom authentication provider in your application:
-
-```typescript
-import VirtoShellFramework from "@vc-shell/framework";
-import { CustomAuthProvider } from "./auth/custom-provider";
-
-const app = createApp(App);
-const customAuthProvider = new CustomAuthProvider();
-
-app.use(VirtoShellFramework, {
-  router,
-  authProvider: customAuthProvider, // Pass your custom provider
-  i18n: {
-    locale: "en",
-    fallbackLocale: "en",
-  },
-});
-```
-
-## Type Safety
-
-All providers use the same types from the platform API:
-- `UserDetail` - User information
-- `SignInResult` - Sign-in result
-- `SecurityResult` - Security operation result
-- `IdentityResult` - Identity validation result
-- `LoginType` - Login type enumeration
-
-This ensures compatibility across all authentication pages and interceptors.
-
-## Integration with Framework
-
-The authentication provider integrates with:
-
-1. **Login Pages** - All auth pages (Login, ResetPassword, ChangePassword, Invite) automatically use the provided auth provider
-2. **HTTP Interceptors** - Automatically handles 401 errors and redirects to login
-3. **Route Guards** - Checks authentication status before route navigation
-4. **Composables** - Available via `useUser()` and `useUserManagement()` composables
-
-## Example Use Cases
-
-### File-based Authentication
-```typescript
-class FileAuthProvider implements IAuthProvider {
-  async signIn(username: string, password: string) {
-    const credentials = await fetch("/auth-data.json");
-    const users = await credentials.json();
-    // Validate against file data
-  }
-}
-```
-
-### Custom API Authentication
-```typescript
-class CustomApiAuthProvider implements IAuthProvider {
-  async signIn(username: string, password: string) {
-    const response = await fetch("https://my-custom-api.com/auth", {
-      method: "POST",
-      body: JSON.stringify({ username, password }),
-    });
-    // Handle custom API response
-  }
-}
-```
-
-### OAuth/OIDC Provider
-```typescript
-class OAuthAuthProvider implements IAuthProvider {
-  async signIn(username: string, password: string) {
-    // Redirect to OAuth provider
-    window.location.href = "https://oauth-provider.com/authorize";
-  }
-}
-```
-
-## Backward Compatibility
-
-If no custom provider is specified, the framework automatically uses `PlatformAuthProvider`, ensuring full backward compatibility with existing applications.
-
-

package/core/providers/auth-provider-manager.ts

@@ -1,74 +0,0 @@
-import { IAuthProvider } from "../types/auth-provider";
-import { PlatformAuthProvider } from "./platform-auth-provider";
-
-/**
- * Global auth provider manager
- * Provides access to auth provider before Vue app context is available
- * This is necessary for early initialization scenarios where composables
- * are called before app.use(VirtoShellFramework)
- */
-class AuthProviderManager {
-  private provider: IAuthProvider | null = null;
-  private defaultProvider: IAuthProvider | null = null;
-  private configureWasCalled = false;
-
-  /**
-   * Set the global auth provider
-   * Should be called via VirtoShellFramework.configure() before any composables
-   * If custom provider is provided, it will replace the default
-   */
-  setProvider(provider: IAuthProvider): void {
-    console.log("[AuthProviderManager] Setting auth provider:", provider.constructor.name);
-    this.configureWasCalled = true;
-    this.provider = provider;
-  }
-
-  /**
-   * Get the global auth provider
-   * Lazy-initializes default PlatformAuthProvider if no custom provider was set
-   */
-  getProvider(): IAuthProvider {
-    // If custom provider was set, use it
-    if (this.provider) {
-      return this.provider;
-    }
-
-    // Lazy-initialize default platform provider only when needed (backward compatibility)
-    if (!this.defaultProvider) {
-      console.log("[AuthProviderManager] Lazy-initializing default PlatformAuthProvider");
-
-      // Show deprecation warning only if configure() was never called
-      if (!this.configureWasCalled) {
-        console.warn(
-          "[AuthProviderManager] DEPRECATION WARNING: " +
-          "Automatic PlatformAuthProvider creation will be removed in a future version. " +
-          "Please use VirtoShellFramework.configure({ authProvider }) explicitly before calling useUser()."
-        );
-      }
-
-      this.defaultProvider = new PlatformAuthProvider();
-    }
-
-    return this.defaultProvider;
-  }
-
-  /**
-   * Check if provider is available
-   */
-  hasProvider(): boolean {
-    return this.provider !== null || this.defaultProvider !== null;
-  }
-
-  /**
-   * Reset manager (for testing)
-   */
-  reset(): void {
-    this.provider = null;
-    this.defaultProvider = null;
-    this.configureWasCalled = false;
-  }
-}
-
-// Global singleton instance
-export const authProviderManager = new AuthProviderManager();
-

package/core/providers/auth-provider-utils.ts

@@ -1,26 +0,0 @@
-import { IAuthProvider } from "../types/auth-provider";
-import { PlatformAuthProvider } from "./platform-auth-provider";
-
-/**
- * Check if the provider is a platform provider
- * Centralized logic for determining platform-specific features availability
- */
-export function isPlatformProvider(provider: IAuthProvider | null | undefined): boolean {
-  return provider instanceof PlatformAuthProvider;
-}
-
-/**
- * Check if platform-specific features should be enabled
- * This is the main function to use throughout the framework
- */
-export function shouldEnablePlatformFeatures(provider: IAuthProvider | null | undefined): boolean {
-  return isPlatformProvider(provider);
-}
-
-/**
- * Get a safe provider instance with fallback
- * Handles null/undefined cases gracefully
- */
-export function getSafeProvider(provider: IAuthProvider | null | undefined): IAuthProvider | null {
-  return provider || null;
-}

package/core/providers/example-custom-auth-provider.ts

@@ -1,162 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * Example Custom Authentication Provider
- *
- * This is an example implementation showing how to create a custom authentication provider.
- * You can use this as a template to implement your own authentication logic.
- *
- * @example
- * ```typescript
- * import { CustomAuthProvider } from './auth/custom-provider';
- *
- * const customAuthProvider = new CustomAuthProvider();
- *
- * app.use(VirtoShellFramework, {
- *   router,
- *   authProvider: customAuthProvider,
- *   i18n: { ... }
- * });
- * ```
- */
-
-import { computed, Ref, ref, ComputedRef } from "vue";
-import {
-  UserDetail,
-  SecurityResult,
-  IdentityResult,
-  LoginType,
-  SignInResult,
-  IIdentityResult,
-} from "../api/platform";
-import { RequestPasswordResult } from "../types";
-import { IAuthProvider } from "../types/auth-provider";
-
-export class CustomAuthProvider implements IAuthProvider {
-
-  private _user: Ref<UserDetail | undefined> = ref();
-  private _loading: Ref<boolean> = ref(false);
-
-  get user(): ComputedRef<UserDetail | undefined> {
-    return computed(() => this._user.value);
-  }
-
-  get loading(): ComputedRef<boolean> {
-    return computed(() => this._loading.value);
-  }
-
-  get isAuthenticated(): ComputedRef<boolean> {
-    return computed(() => this._user.value?.userName != null);
-  }
-
-  get isAdministrator(): ComputedRef<boolean | undefined> {
-    return computed(() => this._user.value?.isAdministrator);
-  }
-
-  async loadUser(): Promise<UserDetail> {
-    // Implement your custom user loading logic
-    // Example: Load from localStorage, custom API, etc.
-    console.debug("[CustomAuthProvider] Loading user...");
-
-    this._loading.value = true;
-
-    try {
-      // Example: Load from localStorage
-      const storedUser = localStorage.getItem("customUser");
-      if (storedUser) {
-        this._user.value = JSON.parse(storedUser) as UserDetail;
-      }
-    } catch (e) {
-      console.error("Failed to load user:", e);
-    } finally {
-      this._loading.value = false;
-    }
-
-    return { ...this._user.value } as UserDetail;
-  }
-
-  async signIn(
-    username: string,
-    password: string,
-  ): Promise<SignInResult | { succeeded: boolean; error?: any; status?: number }> {
-    console.debug("[CustomAuthProvider] Signing in...");
-
-    this._loading.value = true;
-
-    try {
-      // Implement your custom sign-in logic
-      // Example: Validate against local file, custom API, etc.
-
-      // Example implementation:
-      if (username === "demo" && password === "demo") {
-        this._user.value = {
-          userName: username,
-          isAdministrator: true,
-          // ... other user properties
-        } as UserDetail;
-
-        // Store user in localStorage
-        localStorage.setItem("customUser", JSON.stringify(this._user.value));
-
-        return { succeeded: true } as SignInResult;
-      }
-
-      return { succeeded: false, error: "Invalid credentials" };
-    } catch (e: any) {
-      console.error("Sign in failed:", e);
-      return { succeeded: false, error: e.message };
-    } finally {
-      this._loading.value = false;
-    }
-  }
-
-  async signOut(): Promise<void> {
-    console.debug("[CustomAuthProvider] Signing out...");
-
-    this._user.value = undefined;
-    localStorage.removeItem("customUser");
-  }
-
-  async validateToken(userId: string, token: string): Promise<boolean> {
-    // Implement your custom token validation logic
-    console.debug("[CustomAuthProvider] Validating token...");
-    return false;
-  }
-
-  async validatePassword(password: string): Promise<IIdentityResult> {
-    // Implement your custom password validation logic
-    console.debug("[CustomAuthProvider] Validating password...");
-    return { succeeded: true } as IIdentityResult;
-  }
-
-  async resetPasswordByToken(
-    userId: string,
-    password: string,
-    token: string,
-  ): Promise<SecurityResult> {
-    // Implement your custom password reset logic
-    console.debug("[CustomAuthProvider] Resetting password...");
-    return { succeeded: true } as SecurityResult;
-  }
-
-  async requestPasswordReset(loginOrEmail: string): Promise<RequestPasswordResult> {
-    // Implement your custom password reset request logic
-    console.debug("[CustomAuthProvider] Requesting password reset...");
-    return { succeeded: true };
-  }
-
-  async changeUserPassword(
-    oldPassword: string,
-    newPassword: string,
-  ): Promise<SecurityResult | undefined> {
-    // Implement your custom password change logic
-    console.debug("[CustomAuthProvider] Changing password...");
-    return { succeeded: true } as SecurityResult;
-  }
-
-  async getLoginType(): Promise<LoginType[]> {
-    // Return supported login types for your custom provider
-    console.debug("[CustomAuthProvider] Getting login types...");
-    return [];
-  }
-}
-

package/core/providers/index.ts

@@ -1,3 +0,0 @@
-export { PlatformAuthProvider } from "./platform-auth-provider";
-export { authProviderManager } from "./auth-provider-manager";
-