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

package/ui/components/molecules/vc-dropdown/vc-dropdown-item.test.ts

@@ -1,59 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount } from "@vue/test-utils";
-import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
-
-describe("VcDropdownItem", () => {
-  it("renders title text", () => {
-    const wrapper = mount(VcDropdownItem, {
-      props: { title: "English" },
-    });
-
-    expect(wrapper.text()).toContain("English");
-  });
-
-  it("renders icon when provided", () => {
-    const wrapper = mount(VcDropdownItem, {
-      props: { title: "Settings", icon: "lucide-globe" },
-    });
-
-    expect(wrapper.find(".vc-dropdown-item__icon").exists()).toBe(true);
-    expect(wrapper.find(".vc-dropdown-item__icon-placeholder").exists()).toBe(false);
-  });
-
-  it("renders check icon when active", () => {
-    const wrapper = mount(VcDropdownItem, {
-      props: { title: "English", active: true },
-    });
-
-    expect(wrapper.find(".vc-dropdown-item__icon").exists()).toBe(true);
-    expect(wrapper.classes()).toContain("vc-dropdown-item--active");
-  });
-
-  it("renders placeholder when no icon and not active", () => {
-    const wrapper = mount(VcDropdownItem, {
-      props: { title: "English" },
-    });
-
-    expect(wrapper.find(".vc-dropdown-item__icon-placeholder").exists()).toBe(true);
-    expect(wrapper.find(".vc-dropdown-item__icon").exists()).toBe(false);
-  });
-
-  it("applies disabled class", () => {
-    const wrapper = mount(VcDropdownItem, {
-      props: { title: "Disabled", disabled: true },
-    });
-
-    expect(wrapper.classes()).toContain("vc-dropdown-item--disabled");
-  });
-
-  it("active check takes priority over icon prop", () => {
-    const wrapper = mount(VcDropdownItem, {
-      props: { title: "Active", icon: "lucide-globe", active: true },
-    });
-
-    // Should show check, not the globe icon — only one VcIcon rendered
-    const icons = wrapper.findAll(".vc-dropdown-item__icon");
-    expect(icons.length).toBe(1);
-    expect(wrapper.find(".vc-dropdown-item__icon-placeholder").exists()).toBe(false);
-  });
-});

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

@@ -1,394 +0,0 @@
-import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
-import { VcButton, VcIcon } from "@ui/components/atoms";
-
-type ActionItem = {
-  id: string;
-  title: string;
-  description: string;
-  shortcut: string;
-  danger?: boolean;
-  icon: string;
-};
-
-type WorkspaceItem = {
-  id: string;
-  title: string;
-  owner: string;
-};
-
-const actionItems: ActionItem[] = [
-  {
-    id: "open",
-    title: "Open project",
-    description: "Navigate to the selected project details",
-    shortcut: "O",
-    icon: "material-folder_open",
-  },
-  {
-    id: "duplicate",
-    title: "Duplicate",
-    description: "Create a copy with the same configuration",
-    shortcut: "D",
-    icon: "material-file_copy",
-  },
-  {
-    id: "archive",
-    title: "Archive",
-    description: "Hide from active workspace without deleting",
-    shortcut: "A",
-    icon: "material-inventory_2",
-  },
-  {
-    id: "delete",
-    title: "Delete",
-    description: "Permanently remove this project",
-    shortcut: "Del",
-    danger: true,
-    icon: "material-delete_outline",
-  },
-];
-
-const workspaceItems: WorkspaceItem[] = [
-  { id: "northwind", title: "Northwind B2B", owner: "Commerce Team" },
-  { id: "atlas", title: "Atlas Backoffice", owner: "Platform Team" },
-  { id: "horizon", title: "Horizon Storefront", owner: "Growth Team" },
-  { id: "spectrum", title: "Spectrum Integrations", owner: "Integration Team" },
-];
-
-/**
- * `VcDropdown` is a headless, accessible dropdown primitive for menus and listboxes.
- *
- * It provides:
- * - floating positioning via `@floating-ui`
- * - keyboard navigation (`ArrowUp/ArrowDown`, `Home/End`, `Enter`, `Escape`)
- * - ARIA roles (`menu` and `listbox`)
- * - flexible slot API for fully custom trigger and item rendering
- *
- * Use this component as the base for contextual menus, switchers, and compact option pickers.
- */
-const meta = {
-  title: "Molecules/VcDropdown",
-  component: VcDropdown,
-  tags: ["autodocs"],
-  args: {
-    floating: true,
-    placement: "bottom-start",
-    role: "menu",
-    variant: "default",
-    closeOnEscape: true,
-    closeOnClickOutside: true,
-    closeOnSelect: true,
-    maxHeight: 320,
-  },
-  argTypes: {
-    modelValue: {
-      control: "boolean",
-      table: { category: "Model", type: { summary: "boolean" } },
-      description: "Controls opened/closed state (v-model).",
-    },
-    items: {
-      control: "object",
-      table: { category: "Data", type: { summary: "T[]" } },
-      description: "Items to render in default layout or pass to custom slots.",
-    },
-    itemText: {
-      control: false,
-      table: { category: "Data", type: { summary: "(item: T) => string" } },
-      description: "Maps item to display text in default item renderer.",
-    },
-    isItemActive: {
-      control: false,
-      table: { category: "Data", type: { summary: "(item: T) => boolean" } },
-      description: "Marks selected item state (especially useful in listbox mode).",
-    },
-    placement: {
-      control: "select",
-      options: ["bottom", "bottom-start", "bottom-end", "top", "top-start", "top-end"],
-      table: { category: "Positioning", type: { summary: "Placement" } },
-    },
-    offset: {
-      control: "object",
-      table: { category: "Positioning", type: { summary: "{ mainAxis?: number; crossAxis?: number }" } },
-    },
-    floating: {
-      control: "boolean",
-      table: { category: "Positioning", type: { summary: "boolean" }, defaultValue: { summary: true } },
-    },
-    teleport: {
-      control: "boolean",
-      table: { category: "Positioning", type: { summary: "boolean | undefined" } },
-      description: "Force teleport behavior. By default follows `floating`.",
-    },
-    role: {
-      control: "select",
-      options: ["menu", "listbox"],
-      table: { category: "Accessibility", type: { summary: "'menu' | 'listbox'" } },
-    },
-    closeOnEscape: {
-      control: "boolean",
-      table: { category: "Behavior", type: { summary: "boolean" } },
-    },
-    closeOnClickOutside: {
-      control: "boolean",
-      table: { category: "Behavior", type: { summary: "boolean" } },
-    },
-    closeOnSelect: {
-      control: "boolean",
-      table: { category: "Behavior", type: { summary: "boolean" } },
-    },
-    variant: {
-      control: "select",
-      options: ["default", "secondary"],
-      table: { category: "Appearance", type: { summary: "'default' | 'secondary'" } },
-    },
-    maxHeight: {
-      control: "text",
-      table: { category: "Appearance", type: { summary: "number | string" } },
-    },
-    open: {
-      control: false,
-      table: { category: "Events", type: { summary: "() => void" } },
-    },
-    close: {
-      control: false,
-      table: { category: "Events", type: { summary: "(reason: 'outside' | 'escape' | 'action') => void" } },
-    },
-    "item-click": {
-      control: false,
-      table: { category: "Events", type: { summary: "(item: T) => void" } },
-    },
-  },
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "Use `VcDropdown` when you need headless control over trigger and item markup while keeping positioning, focus management, and keyboard interactions consistent across the UI kit.",
-      },
-    },
-  },
-} satisfies Meta<typeof VcDropdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ActionMenu: Story = {
-  args: {
-    items: actionItems,
-    placement: "bottom-start",
-    variant: "secondary",
-    closeOnSelect: true,
-  },
-  render: (args) => ({
-    components: { VcDropdown, VcButton, VcIcon },
-    setup() {
-      const opened = ref(false);
-      const selectedAction = ref("No action selected");
-
-      const onSelect = (item: ActionItem) => {
-        selectedAction.value = item.title;
-      };
-
-      return {
-        args,
-        opened,
-        selectedAction,
-        onSelect,
-      };
-    },
-    template: `
-      <div class="tw-min-h-[300px] tw-rounded-xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-gradient-to-br tw-from-additional-50 tw-to-neutrals-100 tw-p-6">
-        <div class="tw-mb-5 tw-flex tw-items-center tw-justify-between">
-          <div>
-            <p class="tw-text-sm tw-text-neutrals-500">Contextual action menu</p>
-            <p class="tw-text-base tw-font-semibold tw-text-neutrals-900">Project: Atlas Backoffice</p>
-          </div>
-          <span class="tw-rounded-full tw-bg-primary-100 tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-primary-700">
-            Last action: {{ selectedAction }}
-          </span>
-        </div>
-
-        <VcDropdown
-          v-bind="args"
-          :model-value="opened"
-          @update:modelValue="opened = $event"
-          @item-click="onSelect"
-        >
-          <template #trigger="{ isActive, toggle }">
-            <VcButton variant="secondary" @click="toggle">
-              <span class="tw-flex tw-items-center tw-gap-2">
-                <VcIcon icon="material-more_horiz" size="m" />
-                Actions
-                <VcIcon :icon="isActive ? 'material-expand_less' : 'material-expand_more'" size="m" />
-              </span>
-            </VcButton>
-          </template>
-
-          <template #item="{ item, click }">
-            <button
-              type="button"
-              class="tw-flex tw-w-[320px] tw-items-center tw-justify-between tw-gap-3 tw-border-0 tw-bg-transparent tw-px-2 tw-py-1.5 tw-text-left"
-              @click="click"
-            >
-              <div class="tw-flex tw-items-center tw-gap-2">
-                <VcIcon :icon="item.icon" size="s" class="tw-shrink-0 tw-text-neutrals-500" />
-                <span
-                  class="tw-text-sm"
-                  :class="item.danger ? 'tw-text-danger-600' : 'tw-text-neutrals-900'"
-                >
-                  {{ item.title }}
-                </span>
-              </div>
-              <kbd class="tw-rounded tw-border tw-border-solid tw-border-neutrals-200 tw-bg-neutrals-50 tw-px-1.5 tw-py-0.5 tw-font-mono tw-text-[11px] tw-text-neutrals-500">
-                {{ item.shortcut }}
-              </kbd>
-            </button>
-          </template>
-        </VcDropdown>
-      </div>
-    `,
-  }),
-};
-
-export const WorkspaceSwitcher: Story = {
-  args: {
-    items: workspaceItems,
-    role: "listbox",
-    placement: "bottom-end",
-    closeOnSelect: true,
-    variant: "default",
-  },
-  render: (args) => ({
-    components: { VcDropdown, VcButton, VcIcon },
-    setup() {
-      const opened = ref(false);
-      const activeWorkspaceId = ref("atlas");
-
-      const getTitle = (id: string) => workspaceItems.find((item) => item.id === id)?.title ?? "Choose workspace";
-
-      const onSelect = (item: WorkspaceItem) => {
-        activeWorkspaceId.value = item.id;
-      };
-
-      return {
-        args,
-        opened,
-        activeWorkspaceId,
-        getTitle,
-        onSelect,
-      };
-    },
-    template: `
-      <div class="tw-min-h-[300px] tw-rounded-xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-6">
-        <p class="tw-mb-1 tw-text-sm tw-text-neutrals-500">Workspace switcher</p>
-        <p class="tw-mb-5 tw-text-base tw-font-semibold tw-text-neutrals-900">Current: {{ getTitle(activeWorkspaceId) }}</p>
-
-        <VcDropdown
-          v-bind="args"
-          :model-value="opened"
-          :is-item-active="(item) => item.id === activeWorkspaceId"
-          @update:modelValue="opened = $event"
-          @item-click="onSelect"
-        >
-          <template #trigger="{ isActive, toggle }">
-            <VcButton variant="outline" @click="toggle">
-              <span class="tw-flex tw-items-center tw-gap-2">
-                <VcIcon icon="material-layers" size="m" />
-                {{ getTitle(activeWorkspaceId) }}
-                <VcIcon :icon="isActive ? 'material-expand_less' : 'material-expand_more'" size="m" />
-              </span>
-            </VcButton>
-          </template>
-
-          <template #item="{ item, click }">
-            <button
-              type="button"
-              class="tw-flex tw-w-[280px] tw-items-center tw-justify-between tw-border-0 tw-bg-transparent tw-px-2 tw-py-1.5 tw-text-left"
-              @click="click"
-            >
-              <div>
-                <p class="tw-text-sm tw-text-neutrals-900">{{ item.title }}</p>
-                <p class="tw-text-xs tw-text-neutrals-500">{{ item.owner }}</p>
-              </div>
-              <VcIcon
-                v-if="item.id === activeWorkspaceId"
-                icon="material-check"
-                size="s"
-                class="tw-text-primary-600"
-              />
-            </button>
-          </template>
-        </VcDropdown>
-      </div>
-    `,
-  }),
-};
-
-export const ScrollableList: Story = {
-  args: {
-    closeOnSelect: false,
-    role: "listbox",
-    maxHeight: 220,
-    items: Array.from({ length: 14 }, (_, index) => ({
-      id: `filter-${index + 1}`,
-      title: `Segment ${index + 1}`,
-      description: `Rule set ${index + 1}`,
-    })),
-  },
-  render: (args) => ({
-    components: { VcDropdown, VcButton, VcIcon },
-    setup() {
-      const opened = ref(true);
-      const activeId = ref("filter-3");
-
-      return {
-        args,
-        opened,
-        activeId,
-      };
-    },
-    template: `
-      <div class="tw-min-h-[340px] tw-rounded-xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-6">
-        <p class="tw-mb-1 tw-text-sm tw-text-neutrals-500">Long list + keyboard navigation</p>
-        <p class="tw-mb-5 tw-text-sm tw-text-neutrals-700">Use Arrow keys, Enter and Escape.</p>
-
-        <VcDropdown
-          v-bind="args"
-          :model-value="opened"
-          :is-item-active="(item) => item.id === activeId"
-          @update:modelValue="opened = $event"
-          @item-click="(item) => activeId = item.id"
-        >
-          <template #trigger="{ isActive, toggle }">
-            <VcButton variant="ghost" @click="toggle">
-              <span class="tw-flex tw-items-center tw-gap-2">
-                <VcIcon icon="material-filter_list" size="m" />
-                Audience segments
-                <VcIcon :icon="isActive ? 'material-expand_less' : 'material-expand_more'" size="m" />
-              </span>
-            </VcButton>
-          </template>
-
-          <template #item="{ item, click }">
-            <button
-              type="button"
-              class="tw-flex tw-w-[260px] tw-items-center tw-justify-between tw-border-0 tw-bg-transparent tw-px-2 tw-py-1.5 tw-text-left"
-              @click="click"
-            >
-              <div>
-                <p class="tw-text-sm tw-text-neutrals-900">{{ item.title }}</p>
-                <p class="tw-text-xs tw-text-neutrals-500">{{ item.description }}</p>
-              </div>
-              <div
-                class="tw-h-2 tw-w-2 tw-rounded-full"
-                :class="item.id === activeId ? 'tw-bg-primary-500' : 'tw-bg-neutrals-300'"
-              />
-            </button>
-          </template>
-        </VcDropdown>
-      </div>
-    `,
-  }),
-};

package/ui/components/molecules/vc-dropdown/vc-dropdown.test.ts

@@ -1,54 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount } from "@vue/test-utils";
-import { nextTick } from "vue";
-import VcDropdown from "@ui/components/molecules/vc-dropdown/vc-dropdown.vue";
-
-describe("VcDropdown", () => {
-  it("emits close reason and model update on Escape", async () => {
-    const items = [
-      { id: "1", title: "One" },
-      { id: "2", title: "Two" },
-    ];
-
-    const wrapper = mount(VcDropdown as any, {
-      props: {
-        modelValue: true,
-        items,
-        itemText: (item: { title: string }) => item.title,
-      },
-      attachTo: document.body,
-    });
-
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-    await nextTick();
-
-    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-    expect(wrapper.emitted("close")?.[0]).toEqual(["escape"]);
-
-    wrapper.unmount();
-  });
-
-  it("supports arrow navigation and selects focused item on Enter", async () => {
-    const items = [
-      { id: "1", title: "One" },
-      { id: "2", title: "Two" },
-    ];
-
-    const wrapper = mount(VcDropdown as any, {
-      props: {
-        modelValue: true,
-        items,
-        itemText: (item: { title: string }) => item.title,
-      },
-      attachTo: document.body,
-    });
-
-    const panel = wrapper.find(".vc-dropdown__dropdown");
-    await panel.trigger("keydown", { key: "ArrowDown" });
-    await panel.trigger("keydown", { key: "Enter" });
-
-    expect(wrapper.emitted("item-click")?.[0]).toEqual([items[1]]);
-
-    wrapper.unmount();
-  });
-});