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

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -1,176 +0,0 @@
-<template>
-  <nav
-    v-if="items && items.length"
-    aria-label="Breadcrumb"
-    class="vc-breadcrumbs"
-  >
-    <ol
-      ref="contentRef"
-      class="vc-breadcrumbs__content"
-      :class="{
-        'vc-breadcrumbs__content--separated': separated,
-      }"
-    >
-      <VcDropdown
-        v-if="showMoreButton"
-        :items="hiddenItems"
-        :model-value="showBreadcrumbs"
-        floating
-        variant="secondary"
-        placement="bottom-start"
-        :offset="{
-          mainAxis: 10,
-        }"
-        @item-click="onItemClick"
-        @update:model-value="showBreadcrumbs = $event"
-      >
-        <template #trigger="{ isActive }">
-          <slot
-            name="trigger"
-            :click="toggleBreadcrumbs"
-            :is-active="isActive"
-          >
-            <VcButton
-              text
-              icon="lucide-ellipsis-vertical"
-              icon-size="xl"
-              data-more-button
-              class="vc-breadcrumbs__expand-button"
-              :class="{
-                'vc-breadcrumbs__expand-button--active': isActive,
-              }"
-              @click="toggleBreadcrumbs"
-            />
-          </slot>
-        </template>
-        <template #item="{ item, click }">
-          <VcDropdownItem
-            :title="typeof item.title === 'string' ? item.title : item.title?.value ?? ''"
-            :icon="item.icon"
-            @click="click"
-          />
-        </template>
-      </VcDropdown>
-
-      <template
-        v-for="(item, i) in visibleItems"
-        :key="item?.id ?? `breadcrumb-item-${i}`"
-      >
-        <li
-          v-if="item && item.title"
-          class="vc-breadcrumbs__item-wrapper"
-          :data-item-key="item.id"
-        >
-          <span
-            v-if="separated && i !== 0"
-            class="vc-breadcrumbs__item-separator"
-            aria-hidden="true"
-          >
-            /
-          </span>
-          <VcBreadcrumbsItem
-            class="vc-breadcrumbs__item"
-            v-bind="item"
-            :current="i === visibleItems.length - 1"
-            :aria-current="i === visibleItems.length - 1 ? 'page' : undefined"
-            :variant="variant"
-          />
-        </li>
-      </template>
-    </ol>
-  </nav>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, toRef, VNode, nextTick } from "vue";
-import type { Breadcrumbs } from "../../../types/index";
-import VcBreadcrumbsItem from "@ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { VcDropdown } from "..";
-import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
-import { useAdaptiveItems } from "@ui/composables/useAdaptiveItems";
-
-export interface Props {
-  items?: Breadcrumbs[];
-  variant?: "default" | "light";
-  separated?: boolean;
-  /** When true, all items are placed in the dropdown behind the trigger. */
-  collapsed?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  variant: "default",
-  separated: false,
-  collapsed: false,
-});
-
-defineSlots<{
-  trigger: (props: { click: () => void; isActive: boolean }) => VNode;
-}>();
-
-/** Width of the "more" button — the icon-only VcButton is ~36px */
-const MORE_BUTTON_WIDTH = 36;
-/** Conservative estimate per breadcrumb item (icon + truncated text) */
-const INITIAL_ITEM_WIDTH = 60;
-
-const contentRef = ref<HTMLElement | null>(null);
-const showBreadcrumbs = ref(false);
-
-const adaptive = useAdaptiveItems({
-  containerRef: contentRef,
-  items: toRef(props, "items"),
-  getItemKey: (item) => item.id!,
-  moreButtonWidth: MORE_BUTTON_WIDTH,
-  calculationStrategy: "reverse",
-  initialItemWidth: INITIAL_ITEM_WIDTH,
-});
-
-const visibleItems = computed(() => (props.collapsed ? [] : adaptive.visibleItems.value));
-const hiddenItems = computed(() => (props.collapsed ? props.items : adaptive.hiddenItems.value));
-const showMoreButton = computed(() => hiddenItems.value.length > 0);
-const recalculate = adaptive.recalculate;
-
-function toggleBreadcrumbs() {
-  showBreadcrumbs.value = !showBreadcrumbs.value;
-}
-
-function onItemClick(item: Breadcrumbs) {
-  item.clickHandler?.(item.id);
-}
-
-nextTick(recalculate);
-</script>
-
-<style lang="scss">
-:root {
-  --separator-color: var(--neutrals-400);
-  --breadcrumbs-item-border-color: var(--secondary-300);
-  --breadcrumbs-item-border-color-hover: var(--secondary-400);
-  --breadcrumbs-expand-button-color: var(--neutrals-500);
-  --breadcrumbs-expand-button-color-hover: var(--neutrals-600);
-}
-
-.vc-breadcrumbs {
-  @apply tw-flex tw-flex-grow tw-items-center tw-min-w-0 tw-overflow-hidden;
-
-  &__content {
-    @apply tw-flex tw-flex-grow tw-items-center tw-gap-2.5 tw-min-w-0 tw-list-none tw-m-0 tw-p-0;
-
-    &--separated {
-      @apply tw-gap-0;
-    }
-  }
-
-  &__item-wrapper {
-    @apply tw-flex tw-flex-row tw-items-center tw-justify-center tw-shrink-0;
-  }
-
-  &__item-separator {
-    @apply tw-text-[color:var(--separator-color)] tw-mx-2.5;
-  }
-
-  &__expand-button {
-    @apply tw-mr-1 tw-border-solid tw-rounded-[3px] tw-text-[color:var(--breadcrumbs-expand-button-color)] tw-cursor-pointer hover:tw-text-[color:var(--breadcrumbs-expand-button-color-hover)];
-  }
-}
-</style>

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

@@ -1,3 +0,0 @@
-import _Checkbox from "@ui/components/molecules/vc-checkbox/vc-checkbox.vue";
-
-export const VcCheckbox = _Checkbox as typeof _Checkbox;

package/ui/components/molecules/vc-checkbox/vc-checkbox.a11y.test.ts

@@ -1,39 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import axe from "axe-core";
-import VcCheckbox from "@ui/components/molecules/vc-checkbox/vc-checkbox.vue";
-
-describe("VcCheckbox a11y", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  const mountCheckbox = (props: Record<string, unknown> = {}) => {
-    wrapper = mount(VcCheckbox as any, {
-      props: { modelValue: false, ...props },
-      global: { stubs: { VcIcon: true } },
-      attachTo: document.body,
-    });
-    return wrapper;
-  };
-
-  it("has no a11y violations with label", async () => {
-    const w = mountCheckbox({ label: "Accept terms" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations when checked", async () => {
-    const w = mountCheckbox({ label: "Accept terms", modelValue: true });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations when disabled", async () => {
-    const w = mountCheckbox({ label: "Accept terms", disabled: true });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-});

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

@@ -1,356 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcCheckbox } from "@ui/components/molecules/vc-checkbox";
-import { ref } from "vue";
-
-/**
- * `VcCheckbox` represents a checkbox component for selecting options.
- * Supports various sizes, states, and styling options.
- */
-const meta = {
-  title: "Molecules/VcCheckbox",
-  component: VcCheckbox,
-  tags: ["autodocs"],
-  argTypes: {
-    modelValue: {
-      description: "Checkbox value (v-model)",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    disabled: {
-      description: "Disables the checkbox, making it non-interactive",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    required: {
-      description: "Marks the checkbox as required",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    name: {
-      description: "Name for the HTML name attribute of the input element",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Field" },
-      },
-    },
-    errorMessage: {
-      description: "Error message to display",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    trueValue: {
-      description: "Value representing the checked state",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-    },
-    falseValue: {
-      description: "Value representing the unchecked state",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    label: {
-      description: "Label text displayed above the checkbox",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    tooltip: {
-      description: "Tooltip text displayed next to the label",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    size: {
-      description: "Size of the checkbox",
-      control: "select",
-      options: ["s", "m", "l"],
-      table: {
-        type: { summary: "'s' | 'm' | 'l'" },
-        defaultValue: { summary: "'s'" },
-      },
-    },
-    outline: {
-      description: "Applies outline style to the checkbox",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    indeterminate: {
-      description: "Sets the checkbox to an indeterminate state",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    default: {
-      description: "Text content next to the checkbox",
-      control: "text",
-      table: {
-        category: "Slots",
-        type: { summary: "string" },
-      },
-    },
-  },
-  args: {
-    modelValue: true,
-    label: "Checkbox Label",
-    default: "Text next to the checkbox",
-    size: "s",
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcCheckbox component provides a styled checkbox input element with extended functionality:
-
-- Supports v-model for two-way binding
-- Offers three sizes: small (s), medium (m), and large (l)
-- Supports error, disabled, and indeterminate states
-- Ability to customize labels and tooltips
-        `,
-      },
-    },
-  },
-} satisfies Meta<typeof VcCheckbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Basic usage of the checkbox component
- */
-export const Basic: Story = {
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <div>
-        <vc-checkbox
-          v-bind="args"
-          v-model="checked"
-          @update:modelValue="(val) => console.log('Value updated:', val)">
-          {{args.default}}
-        </vc-checkbox>
-        <div class="tw-mt-4">Current value: {{checked}}</div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Disabled state of the checkbox
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        {{args.default}}
-      </vc-checkbox>
-    `,
-  }),
-};
-
-/**
- * Required checkbox with label
- */
-export const Required: Story = {
-  args: {
-    required: true,
-  },
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        {{args.default}}
-      </vc-checkbox>
-    `,
-  }),
-};
-
-/**
- * Checkbox with error state and message
- */
-export const Error: Story = {
-  args: {
-    modelValue: false,
-    errorMessage: "This field is required",
-  },
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        {{args.default}}
-      </vc-checkbox>
-    `,
-  }),
-};
-
-/**
- * Checkbox with tooltip
- */
-export const WithTooltip: Story = {
-  args: {
-    tooltip: "Additional information about the checkbox",
-  },
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        {{args.default}}
-      </vc-checkbox>
-    `,
-  }),
-};
-
-/**
- * Checkbox with different sizes
- */
-export const Sizes: Story = {
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    },
-    template: `
-      <div class="tw-space-y-4">
-        <vc-checkbox v-model="checked" size="s">Small checkbox</vc-checkbox>
-        <vc-checkbox v-model="checked" size="m">Medium checkbox</vc-checkbox>
-        <vc-checkbox v-model="checked" size="l">Large checkbox</vc-checkbox>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Checkbox with indeterminate state
- */
-export const Indeterminate: Story = {
-  args: {
-    indeterminate: true,
-  },
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(false);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        {{args.default}}
-      </vc-checkbox>
-    `,
-  }),
-};
-
-/**
- * Checkbox with outline style
- */
-export const Outline: Story = {
-  args: {
-    outline: true,
-  },
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        {{args.default}}
-      </vc-checkbox>
-    `,
-  }),
-};
-
-/**
- * Example of using a custom element in the default slot
- */
-export const CustomContent: Story = {
-  render: (args) => ({
-    components: { VcCheckbox },
-    setup() {
-      const checked = ref(args.modelValue);
-      return { args, checked };
-    },
-    template: `
-      <vc-checkbox
-        v-bind="args"
-        v-model="checked"
-        @update:modelValue="(val) => console.log('Value updated:', val)">
-        <div>
-          <span class="tw-font-bold">Custom content</span>
-          <p class="tw-text-sm tw-text-gray-500">This is a custom content inside the checkbox</p>
-        </div>
-      </vc-checkbox>
-    `,
-  }),
-};

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

@@ -1,75 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount } from "@vue/test-utils";
-import VcCheckbox from "@ui/components/molecules/vc-checkbox/vc-checkbox.vue";
-
-describe("VcCheckbox", () => {
-  const mountCheckbox = (props: Record<string, unknown> = {}) =>
-    mount(VcCheckbox as any, {
-      props: { modelValue: false, ...props },
-      global: { stubs: { VcIcon: true, VcLabel: false, VcHint: false } },
-    });
-
-  it("renders a native checkbox input", () => {
-    const wrapper = mountCheckbox();
-    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
-  });
-
-  it("sets aria-required when required prop is true", () => {
-    const wrapper = mountCheckbox({ required: true });
-    expect(wrapper.find("input").attributes("aria-required")).toBe("true");
-  });
-
-  it("does not set aria-required when not required", () => {
-    const wrapper = mountCheckbox();
-    expect(wrapper.find("input").attributes("aria-required")).toBeUndefined();
-  });
-
-  it("sets aria-invalid when error prop is true", () => {
-    const wrapper = mountCheckbox({ error: true });
-    expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
-  });
-
-  it("does not set aria-invalid in default state", () => {
-    const wrapper = mountCheckbox();
-    expect(wrapper.find("input").attributes("aria-invalid")).toBeUndefined();
-  });
-
-  it("links error message via aria-describedby", () => {
-    const wrapper = mountCheckbox({ error: true, errorMessage: "Must accept terms" });
-    const input = wrapper.find("input");
-    const describedBy = input.attributes("aria-describedby");
-
-    expect(describedBy).toBeTruthy();
-    expect(wrapper.find(`#${describedBy}`).exists()).toBe(true);
-    expect(wrapper.find(`#${describedBy}`).text()).toContain("Must accept terms");
-  });
-
-  it("shows error only when invalid and errorMessage are both present", () => {
-    const noError = mountCheckbox({ error: false });
-    expect(noError.find('[role="alert"]').exists()).toBe(false);
-
-    const withError = mountCheckbox({ error: true, errorMessage: "Required" });
-    expect(withError.find('[role="alert"]').exists()).toBe(true);
-  });
-
-  it("associates label with checkbox via for/id", () => {
-    const wrapper = mountCheckbox({ label: "I agree" });
-    const input = wrapper.find("input");
-    const label = wrapper.find("label[for]");
-
-    expect(label.exists()).toBe(true);
-    expect(label.attributes("for")).toBe(input.attributes("id"));
-  });
-
-  it("emits update:modelValue on toggle", async () => {
-    const wrapper = mountCheckbox({ modelValue: false });
-    await wrapper.find("input").setValue(true);
-    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
-  });
-
-  it("disables input when disabled prop is true", () => {
-    const wrapper = mountCheckbox({ disabled: true });
-    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
-    expect(wrapper.find(".vc-checkbox--disabled").exists()).toBe(true);
-  });
-});