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

package/shared/components/blade-navigation/utils/urlSync.test.ts

@@ -1,181 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { buildUrlFromStack, parseBladeUrl, buildQueryString } from "@shared/components/blade-navigation/utils/urlSync";
-import type { BladeDescriptor } from "@shared/components/blade-navigation/types";
-
-// ── Helper ──────────────────────────────────────────────────────────────────────
-
-function makeDescriptor(overrides: Partial<BladeDescriptor> = {}): BladeDescriptor {
-  return {
-    id: "blade_1",
-    name: "TestBlade",
-    visible: true,
-    ...overrides,
-  };
-}
-
-// ── buildUrlFromStack ───────────────────────────────────────────────────────────
-
-describe("buildUrlFromStack", () => {
-  it("returns root path for empty stack", () => {
-    const result = buildUrlFromStack("", []);
-    expect(result.path).toBe("/");
-    expect(result.query).toEqual({});
-  });
-
-  it("returns tenant root for empty stack with tenant prefix", () => {
-    const result = buildUrlFromStack("tenant-abc", []);
-    expect(result.path).toBe("/tenant-abc");
-  });
-
-  it("builds workspace-only URL", () => {
-    const stack = [makeDescriptor({ name: "Orders", url: "/orders" })];
-    const result = buildUrlFromStack("", stack);
-    expect(result.path).toBe("/orders");
-  });
-
-  it("builds workspace-only URL with tenant", () => {
-    const stack = [makeDescriptor({ name: "Orders", url: "/orders" })];
-    const result = buildUrlFromStack("seller-123", stack);
-    expect(result.path).toBe("/seller-123/orders");
-  });
-
-  it("builds workspace + child blade URL", () => {
-    const stack = [
-      makeDescriptor({ id: "ws", name: "Orders", url: "/orders" }),
-      makeDescriptor({ id: "child", name: "OrderDetails", url: "/order", param: "uuid-1", parentId: "ws" }),
-    ];
-    const result = buildUrlFromStack("", stack);
-    expect(result.path).toBe("/orders/order/uuid-1");
-  });
-
-  it("builds workspace + child blade URL with tenant", () => {
-    const stack = [
-      makeDescriptor({ id: "ws", name: "Orders", url: "/orders" }),
-      makeDescriptor({ id: "child", name: "OrderDetails", url: "/order", param: "abc-123", parentId: "ws" }),
-    ];
-    const result = buildUrlFromStack("seller-1", stack);
-    expect(result.path).toBe("/seller-1/orders/order/abc-123");
-  });
-
-  it("skips invisible child blades", () => {
-    const stack = [
-      makeDescriptor({ id: "ws", name: "Orders", url: "/orders" }),
-      makeDescriptor({ id: "child", name: "OrderDetails", url: "/order", param: "x", visible: false }),
-    ];
-    const result = buildUrlFromStack("", stack);
-    expect(result.path).toBe("/orders");
-  });
-
-  it("uses last visible child blade", () => {
-    const stack = [
-      makeDescriptor({ id: "ws", name: "Orders", url: "/orders" }),
-      makeDescriptor({ id: "c1", name: "OldBlade", url: "/old", param: "old-id", visible: false }),
-      makeDescriptor({ id: "c2", name: "NewBlade", url: "/new", param: "new-id" }),
-    ];
-    const result = buildUrlFromStack("", stack);
-    expect(result.path).toBe("/orders/new/new-id");
-  });
-
-  it("normalizes URLs with leading/trailing slashes", () => {
-    const stack = [makeDescriptor({ name: "Orders", url: "//orders/" })];
-    const result = buildUrlFromStack("", stack);
-    expect(result.path).toBe("/orders");
-  });
-
-  it("merges query params from visible blades", () => {
-    const stack = [
-      makeDescriptor({ name: "Orders", url: "/orders", query: { page: "1" } }),
-      makeDescriptor({ name: "Details", url: "/order", query: { tab: "info" }, parentId: "ws" }),
-    ];
-    const result = buildUrlFromStack("", stack);
-    expect(result.query).toEqual({ page: "1", tab: "info" });
-  });
-
-  it("ignores query from invisible blades", () => {
-    const stack = [
-      makeDescriptor({ name: "Orders", url: "/orders", query: { page: "1" } }),
-      makeDescriptor({ name: "Details", url: "/order", query: { tab: "info" }, visible: false }),
-    ];
-    const result = buildUrlFromStack("", stack);
-    expect(result.query).toEqual({ page: "1" });
-  });
-});
-
-// ── parseBladeUrl ───────────────────────────────────────────────────────────────
-
-describe("parseBladeUrl", () => {
-  it("returns empty for root path", () => {
-    expect(parseBladeUrl("/")).toEqual({});
-  });
-
-  it("returns empty for empty string", () => {
-    expect(parseBladeUrl("")).toEqual({});
-  });
-
-  it("parses workspace-only path", () => {
-    expect(parseBladeUrl("/orders")).toEqual({ workspaceUrl: "orders" });
-  });
-
-  it("parses workspace + blade path", () => {
-    expect(parseBladeUrl("/orders/order")).toEqual({
-      workspaceUrl: "orders",
-      bladeUrl: "order",
-    });
-  });
-
-  it("parses workspace + blade + param path", () => {
-    expect(parseBladeUrl("/orders/order/uuid-123")).toEqual({
-      workspaceUrl: "orders",
-      bladeUrl: "order",
-      param: "uuid-123",
-    });
-  });
-
-  it("strips tenant prefix", () => {
-    expect(parseBladeUrl("/seller-1/orders/order/id-1", "seller-1")).toEqual({
-      workspaceUrl: "orders",
-      bladeUrl: "order",
-      param: "id-1",
-    });
-  });
-
-  it("handles missing tenant prefix gracefully", () => {
-    expect(parseBladeUrl("/orders", "non-existent-tenant")).toEqual({
-      workspaceUrl: "orders",
-    });
-  });
-
-  it("handles path without leading slash", () => {
-    expect(parseBladeUrl("orders/order")).toEqual({
-      workspaceUrl: "orders",
-      bladeUrl: "order",
-    });
-  });
-});
-
-// ── buildQueryString ────────────────────────────────────────────────────────────
-
-describe("buildQueryString", () => {
-  it("returns empty string for empty object", () => {
-    expect(buildQueryString({})).toBe("");
-  });
-
-  it("builds single-param string", () => {
-    expect(buildQueryString({ page: "1" })).toBe("?page=1");
-  });
-
-  it("builds multi-param string", () => {
-    const result = buildQueryString({ page: "1", sort: "name" });
-    expect(result).toContain("page=1");
-    expect(result).toContain("sort=name");
-    expect(result.startsWith("?")).toBe(true);
-  });
-
-  it("encodes special characters", () => {
-    expect(buildQueryString({ q: "hello world" })).toBe("?q=hello%20world");
-  });
-
-  it("skips empty string values", () => {
-    expect(buildQueryString({ page: "1", empty: "" })).toBe("?page=1");
-  });
-});

package/shared/components/blade-navigation/utils/urlSync.ts

@@ -1,151 +0,0 @@
-import type { Router } from "vue-router";
-import type { BladeDescriptor, IBladeStack, ParsedBladeUrl } from "@shared/components/blade-navigation/types";
-
-/**
- * Build a URL path from the current blade stack.
- *
- * URL format: /<tenantPrefix>/<workspaceUrl>/<bladeUrl>/<param>
- * - tenantPrefix: optional seller/tenant ID
- * - workspaceUrl: from workspace blade's `url` (e.g. "/orders" → "orders")
- * - bladeUrl: from active child blade's `url` (e.g. "/order" → "order")
- * - param: entity ID
- *
- * @param tenantPrefix - Tenant/seller ID segment (empty string if none)
- * @param stack - Current blade stack
- * @returns path string and merged query params
- */
-export function buildUrlFromStack(
-  tenantPrefix: string,
-  stack: readonly BladeDescriptor[],
-): { path: string; query: Record<string, string> } {
-  if (stack.length === 0) {
-    return { path: tenantPrefix ? `/${tenantPrefix}` : "/", query: {} };
-  }
-
-  const workspace = stack[0];
-  const wsUrl = normalizeSegment(workspace.url);
-
-  // Find the last visible child blade (not the workspace)
-  let activeBlade: BladeDescriptor | undefined;
-  for (let i = stack.length - 1; i >= 1; i--) {
-    if (stack[i].visible) {
-      activeBlade = stack[i];
-      break;
-    }
-  }
-
-  // Build path: /tenant/workspace or /tenant/workspace/blade/param
-  let path = tenantPrefix ? `/${tenantPrefix}` : "";
-
-  if (wsUrl) {
-    path += `/${wsUrl}`;
-  }
-
-  if (activeBlade) {
-    const bladeUrl = normalizeSegment(activeBlade.url);
-    if (bladeUrl) {
-      path += `/${bladeUrl}`;
-    }
-    if (activeBlade.param) {
-      path += `/${activeBlade.param}`;
-    }
-  }
-
-  // Merge query params from all visible blades
-  const query: Record<string, string> = {};
-  for (const blade of stack) {
-    if (blade.visible && blade.query) {
-      Object.assign(query, blade.query);
-    }
-  }
-
-  return { path: path || "/", query };
-}
-
-/**
- * Parse a URL path into workspace, blade, and param segments.
- *
- * Handles both with and without tenant prefix:
- *   /orders                    → { workspaceUrl: "orders" }
- *   /orders/order/uuid         → { workspaceUrl: "orders", bladeUrl: "order", param: "uuid" }
- *   /tenant-id/orders          → { workspaceUrl: "orders" } (after stripping tenant)
- *   /tenant-id/orders/order/id → { workspaceUrl: "orders", bladeUrl: "order", param: "id" }
- *
- * @param hashPath - The path portion after the hash (e.g. "/orders/order/uuid")
- * @param tenantPrefix - Optional tenant/seller ID to strip from the beginning
- */
-export function parseBladeUrl(hashPath: string, tenantPrefix?: string): ParsedBladeUrl {
-  let segments = hashPath.split("/").filter(Boolean);
-
-  // Strip tenant prefix if present
-  if (tenantPrefix && segments.length > 0 && segments[0] === tenantPrefix) {
-    segments = segments.slice(1);
-  }
-
-  if (segments.length === 0) {
-    return {};
-  }
-
-  return {
-    workspaceUrl: segments[0],
-    bladeUrl: segments[1],
-    param: segments[2],
-  };
-}
-
-/**
- * Build query string from a record of key-value pairs.
- * Returns empty string if no params.
- */
-export function buildQueryString(query: Record<string, string>): string {
-  const entries = Object.entries(query).filter(([, v]) => v !== undefined && v !== "");
-  if (entries.length === 0) return "";
-  return "?" + entries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
-}
-
-/**
- * Normalize a URL segment by removing leading/trailing slashes.
- * "/orders/" → "orders", "orders" → "orders", undefined → undefined
- */
-function normalizeSegment(url: string | undefined): string | undefined {
-  if (!url) return undefined;
-  return url.replace(/^\/+|\/+$/g, "") || undefined;
-}
-
-// ── Centralized URL sync helpers ──────────────────────────────────────────────
-
-/**
- * Extract the tenant prefix from the current route params.
- * Convention: first string param value (e.g. sellerId segment).
- */
-export function getTenantPrefix(router: Router): string {
-  const params = router.currentRoute.value.params;
-  return (Object.values(params).find((v) => typeof v === "string" && v) as string) || "";
-}
-
-/**
- * Creates URL sync helpers bound to a specific router and blade stack.
- * Eliminates duplication between VcBladeNavigation and useBladeNavigationAdapter.
- *
- * @param router - Vue Router instance
- * @param bladeStack - BladeStack state machine
- */
-export function createUrlSync(router: Router, bladeStack: IBladeStack) {
-  /**
-   * Push URL to create a browser history entry (for blade open).
-   */
-  function syncUrlPush(): void {
-    const { path, query } = buildUrlFromStack(getTenantPrefix(router), bladeStack.blades.value);
-    router.push({ path, query });
-  }
-
-  /**
-   * Replace URL without creating a history entry (for blade close, cleanup).
-   */
-  function syncUrlReplace(): void {
-    const { path, query } = buildUrlFromStack(getTenantPrefix(router), bladeStack.blades.value);
-    router.replace({ path, query });
-  }
-
-  return { syncUrlPush, syncUrlReplace };
-}

package/shared/components/change-password/change-password.vue

@@ -1,231 +0,0 @@
-<template>
-  <VcPopup
-    :title="t('COMPONENTS.CHANGE_PASSWORD.TITLE')"
-    is-mobile-fullscreen
-    @close="cancelChange"
-  >
-    <template #content>
-      <!-- <div class="change-password tw-p-3 tw-overflow-scroll"> -->
-      <VcForm class="tw-flex tw-flex-col tw-flex-auto">
-        <div
-          v-if="forced"
-          class="tw-mb-4"
-        >
-          <vc-status
-            extend
-            :outline="false"
-            variant="info-dark"
-          >
-            <div class="tw-flex tw-flex-row tw-items-center tw-text-[color:var(--change-password-text-color)]">
-              <VcIcon
-                icon="material-lightbulb"
-                size="l"
-                class="tw-mr-3"
-              />
-              <div>
-                <p>{{ t("COMPONENTS.CHANGE_PASSWORD.FORCED.LABEL") }}</p>
-              </div>
-            </div>
-          </vc-status>
-        </div>
-
-        <Field
-          v-slot="{ field, errorMessage, errors }"
-          :label="t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
-          name="current"
-          rules="required|min:6"
-          :model-value="form.currentPassword"
-        >
-          <VcInput
-            v-bind="field"
-            ref="passwordField"
-            v-model="form.currentPassword"
-            class="tw-mb-4 tw-mt-1 tw-shrink-0"
-            :label="t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
-            :placeholder="t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.PLACEHOLDER')"
-            type="password"
-            required
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            @update:model-value="validate"
-          ></VcInput>
-        </Field>
-        <Field
-          v-slot="{ field, errorMessage, errors }"
-          :label="t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
-          name="new_pass"
-          rules="required|min:6"
-          :model-value="form.password"
-        >
-          <VcInput
-            v-bind="field"
-            ref="newPasswordField"
-            v-model="form.password"
-            class="tw-mb-4 tw-mt-1 tw-shrink-0"
-            :label="t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
-            :placeholder="t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.PLACEHOLDER')"
-            type="password"
-            required
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            @update:model-value="validate"
-          ></VcInput>
-        </Field>
-        <Field
-          v-slot="{ field, errorMessage, errors }"
-          :label="t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
-          name="confirm_pass"
-          rules="required|min:6"
-          :model-value="form.confirmPassword"
-        >
-          <VcInput
-            v-bind="field"
-            ref="confirmPasswordField"
-            v-model="form.confirmPassword"
-            class="tw-mb-4 tw-shrink-0"
-            :label="t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
-            :placeholder="t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
-            type="password"
-            required
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            @update:model-value="validate"
-          ></VcInput>
-        </Field>
-      </VcForm>
-    </template>
-    <template #footer>
-      <div class="tw-flex tw-flex-col tw-flex-auto">
-        <div class="tw-flex tw-justify-between tw-flex-auto">
-          <!-- <span
-          v-if="$isDesktop.value"
-          class="tw-grow tw-basis-0"
-        ></span> -->
-          <VcButton
-            variant="secondary"
-            class="tw-mr-3"
-            @click="cancelChange"
-          >
-            {{ t("COMPONENTS.CHANGE_PASSWORD.CANCEL") }}
-          </VcButton>
-          <VcButton
-            :disabled="loading || !form.isValid || isDisabled"
-            @click="changePassword"
-          >
-            {{ t("COMPONENTS.CHANGE_PASSWORD.SAVE") }}
-          </VcButton>
-        </div>
-        <VcHint
-          v-for="(err, i) in form.errors"
-          :key="i"
-          class="tw-mt-3 !tw-text-[color:var(--change-password-error-color)]"
-        >
-          <!-- TODO: stylizing-->
-          {{
-            (err as IIdentityError).code ? t(`COMPONENTS.CHANGE_PASSWORD.ERRORS.${(err as IIdentityError).code}`) : err
-          }}
-        </VcHint>
-      </div>
-    </template>
-
-    <!-- </div> -->
-  </VcPopup>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, reactive, computed } from "vue";
-import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
-import { VcInput } from "@ui/components/molecules/vc-input";
-import { VcHint } from "@ui/components/atoms/vc-hint";
-import { VcButton } from "@ui/components/atoms/vc-button";
-import { VcPopup } from "@ui/components/organisms/vc-popup";
-import { VcForm } from "@ui/components/molecules/vc-form";
-import { IIdentityError } from "@core/api/platform";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
-
-interface IChangePassForm {
-  isValid: boolean;
-  errors: IIdentityError[] | string[];
-  currentPassword: string;
-  password: string;
-  confirmPassword: string;
-}
-
-export interface Props {
-  forced?: boolean;
-  login?: string;
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (event: "close"): void;
-}
-
-const emit = defineEmits<Emits>();
-const { t } = useI18n({ useScope: "global" });
-const { changeUserPassword, loading, validatePassword, signOut } = useUserManagement();
-useForm({ validateOnMount: false });
-const isValid = useIsFormValid();
-const isDirty = useIsFormDirty();
-const router = useRouter();
-
-const form = reactive<IChangePassForm>({
-  isValid: false,
-  errors: [],
-  currentPassword: "",
-  password: "",
-  confirmPassword: "",
-});
-
-const isDisabled = computed(() => {
-  return !isDirty.value || !isValid.value;
-});
-
-async function cancelChange() {
-  if (props.forced) {
-    await signOut();
-    await router.push("/login");
-  } else {
-    emit("close");
-  }
-}
-
-async function changePassword() {
-  const result = await changeUserPassword(form.currentPassword, form.password);
-  if (result?.succeeded) {
-    if (props.forced) {
-      await router.push("/");
-    } else {
-      emit("close");
-    }
-  } else if (result?.errors) {
-    form.errors = result?.errors;
-    form.isValid = form.errors.length == 0;
-  }
-}
-
-function validate() {
-  nextTick(async () => {
-    if (form.password || form.confirmPassword) {
-      form.errors = (await validatePassword(form.password)).errors ?? [];
-      if (form.confirmPassword !== form.password) {
-        (form.errors as IIdentityError[]).push({ code: "Repeat-password" });
-      }
-      if (form.confirmPassword === form.currentPassword && form.password === form.currentPassword) {
-        (form.errors as IIdentityError[]).push({ code: "Equal-passwords" });
-      }
-      form.isValid = form.errors.length == 0;
-    }
-  });
-}
-</script>
-
-<style lang="scss">
-:root {
-  --change-password-error-color: var(--danger-500);
-  --change-password-text-color: var(--additional-950);
-}
-</style>

package/shared/components/change-password/index.ts

@@ -1,10 +0,0 @@
-import _ChangePassword from "@shared/components/change-password/change-password.vue";
-
-export const ChangePassword = _ChangePassword as typeof _ChangePassword;
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    ChangePassword: typeof ChangePassword;
-  }
-}

package/shared/components/change-password-button/change-password-button.stories.ts

@@ -1,63 +0,0 @@
-import { onUnmounted, provide } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import ChangePasswordButton from "@shared/components/change-password-button/change-password-button.vue";
-import { VcPopupContainer } from "@shared/components/popup-handler";
-import { CloseSettingsMenuKey } from "@framework/injection-keys";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { IdentityResult, SecurityResult } from "@core/api/platform";
-
-function patchUserManagement() {
-  const userManagement = useUserManagement();
-  const originalValidatePassword = userManagement.validatePassword;
-  const originalChangeUserPassword = userManagement.changeUserPassword;
-
-  userManagement.validatePassword = async () =>
-    new IdentityResult({
-      succeeded: true,
-      errors: [],
-    });
-  userManagement.changeUserPassword = async () =>
-    new SecurityResult({
-      succeeded: true,
-      errors: [],
-    });
-
-  onUnmounted(() => {
-    userManagement.validatePassword = originalValidatePassword;
-    userManagement.changeUserPassword = originalChangeUserPassword;
-  });
-}
-
-const meta = {
-  title: "Shared/ChangePasswordButton",
-  component: ChangePasswordButton,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      components: { VcPopupContainer },
-      setup() {
-        patchUserManagement();
-        provide(CloseSettingsMenuKey, () => {});
-      },
-      template: `
-        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-1">
-          <story />
-          <VcPopupContainer />
-        </div>
-      `,
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Settings menu action that opens change-password popup through popup-handler. Story includes popup container and safe user-management mocks for interactive preview.",
-      },
-    },
-  },
-} satisfies Meta<typeof ChangePasswordButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/shared/components/change-password-button/change-password-button.vue

@@ -1,23 +0,0 @@
-<template>
-  <SettingsMenuItem
-    icon="lucide-key"
-    :title="$t('SHELL.ACCOUNT.CHANGE_PASSWORD')"
-    @trigger:click="handleClick"
-  />
-</template>
-
-<script lang="ts" setup>
-import { inject } from "vue";
-import { CloseSettingsMenuKey } from "@framework/injection-keys";
-import { SettingsMenuItem } from "@shared/components/settings-menu-item";
-import { usePopup } from "@shared/components/popup-handler/composables/usePopup";
-import { ChangePassword } from "@shared/components/change-password";
-
-const { open } = usePopup({ component: ChangePassword });
-const closeSettingsMenu = inject(CloseSettingsMenuKey, undefined);
-
-const handleClick = () => {
-  closeSettingsMenu?.();
-  open();
-};
-</script>

package/shared/components/change-password-button/index.ts

@@ -1 +0,0 @@
-export { default as ChangePasswordButton } from "@shared/components/change-password-button/change-password-button.vue";