@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.3

package/ui/components/molecules/vc-radio-group/vc-radio-group.stories.ts

@@ -0,0 +1,248 @@
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { VcRadioGroup } from "@ui/components/molecules/vc-radio-group";
+import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
+
+const options = [
+  { label: "Card", value: "card" },
+  { label: "Invoice", value: "invoice" },
+  { label: "Cash", value: "cash" },
+];
+
+/**
+ * `VcRadioGroup` wraps radio controls into an accessible fieldset/radiogroup.
+ */
+const meta = {
+  title: "Molecules/VcRadioGroup",
+  component: VcRadioGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      description: "Selected option value",
+      control: "text",
+      table: {
+        type: { summary: "any" },
+      },
+    },
+    options: {
+      description: "List of radio options",
+      control: "object",
+      table: {
+        type: { summary: "RadioGroupOption[]" },
+      },
+    },
+    label: {
+      description: "Group label",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    hint: {
+      description: "Hint text",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    error: {
+      description: "Error state",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    errorMessage: {
+      description: "Error message",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    disabled: {
+      description: "Disables all options",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    orientation: {
+      description: "Options layout orientation",
+      control: "select",
+      options: ["vertical", "horizontal"],
+      table: {
+        type: { summary: "'vertical' | 'horizontal'" },
+        defaultValue: { summary: "'vertical'" },
+      },
+    },
+    name: {
+      description: "Shared name for native radios",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+  },
+  args: {
+    modelValue: "card",
+    label: "Payment method",
+    hint: "Only one option can be selected",
+    options,
+    orientation: "vertical",
+  },
+} satisfies Meta<typeof VcRadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic vertical radio group from options.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcRadioGroup },
+    setup: () => {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg tw-space-y-3">
+        <VcRadioGroup v-bind="args" v-model="value" />
+        <div class="tw-text-sm tw-text-gray-600">Selected: {{ value }}</div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Horizontal layout.
+ */
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+  render: (args) => ({
+    components: { VcRadioGroup },
+    setup: () => {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <VcRadioGroup v-bind="args" v-model="value" />
+    `,
+  }),
+};
+
+/**
+ * One option can be disabled.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      { label: "Card", value: "card" },
+      { label: "Invoice", value: "invoice", disabled: true },
+      { label: "Cash", value: "cash" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcRadioGroup },
+    setup: () => {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <VcRadioGroup v-bind="args" v-model="value" />
+    `,
+  }),
+};
+
+/**
+ * Group-level validation error.
+ */
+export const ErrorState: Story = {
+  args: {
+    modelValue: null,
+    required: true,
+    error: true,
+    errorMessage: "Select one payment method",
+  },
+  render: (args) => ({
+    components: { VcRadioGroup },
+    setup: () => {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <VcRadioGroup v-bind="args" v-model="value" />
+    `,
+  }),
+};
+
+/**
+ * Custom rendering via slot while keeping group semantics.
+ */
+export const CustomSlot: Story = {
+  render: () => ({
+    components: { VcRadioGroup, VcRadioButton },
+    setup: () => {
+      const value = ref("weekly");
+      return { value };
+    },
+    template: `
+      <div class="tw-max-w-lg tw-space-y-3">
+        <VcRadioGroup
+          v-model="value"
+          label="Newsletter frequency"
+          hint="Custom layout through default slot"
+          orientation="horizontal"
+          name="newsletter-frequency"
+        >
+          <VcRadioButton v-model="value" value="daily" label="Daily" />
+          <VcRadioButton v-model="value" value="weekly" label="Weekly" />
+          <VcRadioButton v-model="value" value="monthly" label="Monthly" />
+        </VcRadioGroup>
+        <div class="tw-text-sm tw-text-gray-600">Selected: {{ value }}</div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Accessibility demo: inspect role, legend and describedby links.
+ */
+export const Accessibility: Story = {
+  render: () => ({
+    components: { VcRadioGroup },
+    setup: () => {
+      const value = ref("card");
+      return { value };
+    },
+    template: `
+      <div class="tw-max-w-lg tw-space-y-4">
+        <VcRadioGroup
+          v-model="value"
+          label="Payment method"
+          hint="Inspect radiogroup role and aria-describedby"
+          :options="[
+            { label: 'Card', value: 'card' },
+            { label: 'Invoice', value: 'invoice' },
+            { label: 'Cash', value: 'cash' }
+          ]"
+          name="payment-method"
+        />
+
+        <div class="tw-p-3 tw-bg-blue-50 tw-rounded tw-text-blue-700 tw-text-sm">
+          <strong>Inspect in DOM:</strong>
+          <ul class="tw-list-disc tw-pl-5 tw-mt-1">
+            <li>container is a <code>fieldset</code> with <code>role=&quot;radiogroup&quot;</code></li>
+            <li><code>legend</code> labels the whole radio set</li>
+            <li>all radios share group <code>name</code></li>
+            <li>group hint/error is linked by <code>aria-describedby</code></li>
+          </ul>
+        </div>
+      </div>
+    `,
+  }),
+};

package/ui/components/molecules/vc-radio-group/vc-radio-group.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import VcRadioGroup from "@ui/components/molecules/vc-radio-group/vc-radio-group.vue";
+
+describe("VcRadioGroup", () => {
+  it("emits update:modelValue when option changes", async () => {
+    const wrapper = mount(VcRadioGroup as any, {
+      props: {
+        modelValue: "card",
+        name: "payment",
+        options: [
+          { label: "Card", value: "card" },
+          { label: "Invoice", value: "invoice" },
+        ],
+      },
+    });
+
+    const radios = wrapper.findAll('input[type="radio"]');
+    await radios[1].setValue(true);
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["invoice"]);
+  });
+
+  it("propagates name and group-level error accessibility to options", async () => {
+    const wrapper = mount(VcRadioGroup as any, {
+      props: {
+        modelValue: null,
+        name: "shipping-speed",
+        error: true,
+        errorMessage: "Choose one option",
+        options: [
+          { label: "Standard", value: "standard" },
+          { label: "Express", value: "express" },
+        ],
+      },
+    });
+
+    await nextTick();
+
+    const fieldset = wrapper.find("fieldset");
+    const describedBy = fieldset.attributes("aria-describedby") || "";
+    const radios = wrapper.findAll('input[type="radio"]');
+
+    expect(fieldset.attributes("role")).toBe("radiogroup");
+    expect(fieldset.attributes("aria-invalid")).toBe("true");
+    expect(radios[0].attributes("name")).toBe("shipping-speed");
+    expect(radios[1].attributes("name")).toBe("shipping-speed");
+    expect(radios[0].attributes("aria-describedby")).toContain(describedBy);
+  });
+});

package/ui/components/molecules/vc-radio-group/vc-radio-group.vue

@@ -0,0 +1,92 @@
+<template>
+  <VcInputGroup
+    class="vc-radio-group"
+    :label="label"
+    :tooltip="tooltip"
+    :hint="hint"
+    :error="error"
+    :error-message="errorMessage"
+    :required="required"
+    :disabled="disabled"
+    :orientation="orientation"
+    role="radiogroup"
+    :name="resolvedName"
+  >
+    <slot v-if="$slots.default" />
+
+    <template v-else>
+      <VcRadioButton
+        v-for="(option, index) in options"
+        :key="getOptionKey(option, index)"
+        :model-value="modelValue"
+        :value="option.value"
+        :label="option.label"
+        :disabled="option.disabled"
+        :name="resolvedName"
+        @update:model-value="onUpdate"
+      />
+    </template>
+  </VcInputGroup>
+</template>
+
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { computed, useId } from "vue";
+import { VcInputGroup } from "@ui/components/molecules/vc-input-group";
+import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
+
+export interface RadioGroupOption {
+  label: string;
+  value: any;
+  disabled?: boolean;
+}
+
+export interface Props {
+  modelValue: any;
+  options?: RadioGroupOption[];
+  label?: string;
+  tooltip?: string;
+  hint?: string;
+  error?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  disabled?: boolean;
+  orientation?: "vertical" | "horizontal";
+  name?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: any): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [],
+  orientation: "vertical",
+});
+
+const emit = defineEmits<Emits>();
+
+const uid = useId();
+const generatedName = computed(() => `vc-radio-group-${uid}`);
+const resolvedName = computed(() => props.name || generatedName.value);
+
+function onUpdate(value: any) {
+  emit("update:modelValue", value);
+}
+
+function getOptionKey(option: RadioGroupOption, index: number) {
+  if (typeof option.value === "string" || typeof option.value === "number") {
+    return `${option.value}`;
+  }
+
+  return `${index}`;
+}
+</script>
+
+<style lang="scss">
+.vc-radio-group {
+  .vc-radio-button {
+    @apply tw-min-h-5;
+  }
+}
+</style>

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

@@ -1 +1 @@
-export { default as VcRating } from "./vc-rating.vue";
+export { default as VcRating } from "@ui/components/molecules/vc-rating/vc-rating.vue";

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

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import { Meta, StoryObj } from "@storybook/vue3-vite";
-import VcRating from "./vc-rating.vue";
+import VcRating from "@ui/components/molecules/vc-rating/vc-rating.vue";
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 const meta: Meta<typeof VcRating> = {

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

@@ -14,21 +14,25 @@
       </template>
     </VcLabel>
 
-    <!-- Rating icon -->
-    <div class="vc-rating__content">
+    <!-- Rating display -->
+    <div
+      class="vc-rating__content"
+      role="img"
+      :aria-label="modelValue ? `Rating: ${modelValue} out of ${max}` : placeholder || 'No rating'"
+    >
       <template v-if="modelValue">
         <template v-if="variant === 'stars'">
           <div class="vc-rating__stars">
             <VcIcon
               v-for="index in modelValue"
               :key="index"
-              icon="material-star"
+              icon="lucide-star"
               class="vc-rating__icon"
             ></VcIcon>
             <VcIcon
               v-for="index in max - modelValue"
               :key="index"
-              icon="material-star"
+              icon="lucide-star"
               class="vc-rating__icon vc-rating__icon--empty"
             ></VcIcon>
           </div>
@@ -37,7 +41,7 @@
           <div class="vc-rating__text-container">
             <VcIcon
               v-if="variant === 'star-and-text'"
-              icon="material-star"
+              icon="lucide-star"
               class="vc-rating__icon"
             ></VcIcon>
             <span class="vc-rating__rating">{{ modelValue }}/{{ max }}</span>
@@ -54,7 +58,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VNode } from "vue";
-import { VcLabel, VcIcon } from "./../../";
+import { VcLabel, VcIcon } from "@ui/components";
 
 export interface Props {
   label?: string;
@@ -75,6 +79,8 @@ defineSlots<{
 <style lang="scss">
 :root {
   --rating-placeholder-color: var(--neutrals-400);
+  --rating-star-size: 1em;
+  --rating-gap: 2px;
 
   --rating-special-color: var(--warning-500);
   --rating-special-color-hover: var(--warning-600);
@@ -90,6 +96,7 @@ defineSlots<{
 
   &__stars {
     @apply tw-flex tw-flex-row tw-items-center;
+    gap: var(--rating-gap);
   }
 
   &__text-container {
@@ -101,8 +108,8 @@ defineSlots<{
   }
 
   &__icon {
-    @apply tw-text-[color:var(--rating-special-color)] tw-mr-1;
-    font-size: inherit;
+    @apply tw-text-[color:var(--rating-special-color)];
+    font-size: var(--rating-star-size);
 
     &--empty {
       @apply tw-opacity-40;

package/ui/components/molecules/vc-select/_internal/SelectDropdown.vue

@@ -25,25 +25,9 @@
           @keydown.enter.stop
         />
 
-        <!-- Scroll up button -->
-        <div
-          class="vc-select__scroll-button"
-          :class="{ 'tw-opacity-0 tw-pointer-events-none': !canScrollUp }"
-          aria-hidden="true"
-          @pointerenter="startScroll('up')"
-          @pointerleave="stopScroll"
-        >
-          <VcIcon
-            icon="lucide-chevron-up"
-            size="xs"
-          />
-        </div>
-
-        <!-- Scrollable viewport -->
-        <div
-          ref="viewportRef"
-          class="vc-select__viewport"
-          @scroll="updateScrollState"
+        <VcScrollableContainer
+          ref="scrollContainerRef"
+          class="vc-select__scroll-container"
         >
           <!-- Render existing options -->
           <div
@@ -110,32 +94,18 @@
             ref="loadMoreRef"
             class="vc-select__load-more-trigger"
           ></span>
-        </div>
-
-        <!-- Scroll down button -->
-        <div
-          class="vc-select__scroll-button"
-          :class="{ 'tw-opacity-0 tw-pointer-events-none': !canScrollDown }"
-          aria-hidden="true"
-          @pointerenter="startScroll('down')"
-          @pointerleave="stopScroll"
-        >
-          <VcIcon
-            icon="lucide-chevron-down"
-            size="xs"
-          />
-        </div>
+        </VcScrollableContainer>
       </div>
     </Transition>
   </teleport>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick } from "vue";
+import { ref, computed, watch, nextTick } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { VcIcon } from "./../../../";
+import { VcIcon, VcScrollableContainer } from "@ui/components";
 import { useI18n } from "vue-i18n";
-import { useTeleportTarget, useScrollArrows } from "../../../../composables";
+import { useTeleportTarget } from "@ui/composables";
 
 const props = defineProps<{
   isOpened: boolean;
@@ -177,11 +147,10 @@ const { teleportTarget } = useTeleportTarget();
 
 const dropdownElRef = ref<HTMLElement | null>(null);
 const searchInputRef = ref<HTMLInputElement | null>(null);
-const viewportRef = ref<HTMLElement | null>(null);
+const scrollContainerRef = ref<InstanceType<typeof VcScrollableContainer> | null>(null);
 const loadMoreRef = ref<HTMLElement | null>(null);
 
-const { canScrollUp, canScrollDown, startScroll, stopScroll, updateScrollState } =
-  useScrollArrows(viewportRef);
+const viewportRef = computed<HTMLElement | null>(() => scrollContainerRef.value?.viewportRef ?? null);
 
 function onDropdownWheel(event: WheelEvent) {
   const el = viewportRef.value;
@@ -200,16 +169,14 @@ function onDropdownWheel(event: WheelEvent) {
     event.preventDefault();
     el.scrollTop += event.deltaY;
   }
-  updateScrollState();
+  scrollContainerRef.value?.updateScrollState();
 }
 
 watch(
   () => props.isOpened,
   (opened) => {
     if (opened) {
-      nextTick(updateScrollState);
-    } else {
-      stopScroll();
+      nextTick(() => scrollContainerRef.value?.updateScrollState());
     }
   },
 );
@@ -218,7 +185,7 @@ watch(
   () => props.optionScope.length,
   () => {
     if (props.isOpened) {
-      nextTick(updateScrollState);
+      nextTick(() => scrollContainerRef.value?.updateScrollState());
     }
   },
 );

package/ui/components/molecules/vc-select/_internal/SelectTrigger.vue

@@ -220,7 +220,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcHint, VcIcon } from "./../../../";
+import { VcHint, VcIcon } from "@ui/components";
 import { useI18n } from "vue-i18n";
 
 defineProps<{

package/ui/components/molecules/vc-select/composables/index.ts

@@ -1,7 +1,7 @@
-export { useSelectValueMapping, type OptionProp } from "./useSelectValueMapping";
-export { useSelectVisibility } from "./useSelectVisibility";
-export { useSelectDropdown } from "./useSelectDropdown";
-export { useSelectDefaultValue } from "./useSelectDefaultValue";
-export { useSelectOptions } from "./useSelectOptions";
-export { useSelectSearch } from "./useSelectSearch";
-export { useSelectSelection } from "./useSelectSelection";
+export { useSelectValueMapping, type OptionProp } from "@ui/components/molecules/vc-select/composables/useSelectValueMapping";
+export { useSelectVisibility } from "@ui/components/molecules/vc-select/composables/useSelectVisibility";
+export { useSelectDropdown } from "@ui/components/molecules/vc-select/composables/useSelectDropdown";
+export { useSelectDefaultValue } from "@ui/components/molecules/vc-select/composables/useSelectDefaultValue";
+export { useSelectOptions } from "@ui/components/molecules/vc-select/composables/useSelectOptions";
+export { useSelectSearch } from "@ui/components/molecules/vc-select/composables/useSelectSearch";
+export { useSelectSelection } from "@ui/components/molecules/vc-select/composables/useSelectSelection";

package/ui/components/molecules/vc-select/composables/useSelectDropdown.ts

@@ -1,6 +1,6 @@
 import { ref, computed, type Ref, watch } from "vue";
 import { offset as uiOffset, flip, shift, type Middleware, type Placement } from "@floating-ui/vue";
-import { useFloatingPosition } from "../../../../composables";
+import { useFloatingPosition } from "@ui/composables";
 
 type FloatingInstanceType = ReturnType<typeof useFloatingPosition> & {
   middlewareData: Ref<{

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

@@ -1,2 +1,2 @@
-export { default as VcSelect } from "./vc-select.vue";
-export type { OptionProp } from "./composables/useSelectValueMapping";
+export { default as VcSelect } from "@ui/components/molecules/vc-select/vc-select.vue";
+export type { OptionProp } from "@ui/components/molecules/vc-select/composables/useSelectValueMapping";

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcSelect } from "./";
+import { VcSelect } from "@ui/components/molecules/vc-select";
 import { ref, h, computed } from "vue";
-import { VcIcon } from "../../atoms/vc-icon";
-import { VcButton } from "../../atoms/vc-button";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcButton } from "@ui/components/atoms/vc-button";
 
 /**
  * `VcSelect` is a versatile dropdown component for selecting single or multiple options.
@@ -1678,7 +1678,6 @@ export const Accessibility: Story = {
 /**
  * When the dropdown has many options, scroll arrow buttons appear at the top and bottom
  * of the list. Hovering over them continuously scrolls the content in that direction.
- * Inspired by shadcn-vue's scrollable select pattern.
  */
 export const Scrollable: Story = {
   args: {