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

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

@@ -2,8 +2,8 @@
   <div
     class="vc-checkbox"
     :class="{
-      'vc-checkbox--disabled': disabled,
-      'vc-checkbox--error': !!errorMessage,
+      'vc-checkbox--disabled': resolvedDisabled,
+      'vc-checkbox--error': invalid,
       'vc-checkbox--indeterminate': indeterminate,
       [`vc-checkbox--size-${size}`]: true,
     }"
@@ -12,7 +12,7 @@
       v-if="label"
       class="vc-checkbox__label"
       :required="required"
-      :error="!!errorMessage"
+      :error="invalid"
     >
       <span>{{ label }}</span>
       <template
@@ -30,10 +30,11 @@
         :value="value"
         type="checkbox"
         class="vc-checkbox__input"
-        :disabled="disabled"
+        :name="resolvedName"
+        :disabled="resolvedDisabled"
         :true-value="trueValue"
         :false-value="falseValue"
-        :aria-invalid="!!errorMessage || undefined"
+        :aria-invalid="invalid || undefined"
         :aria-describedby="ariaDescribedBy"
         tabindex="0"
       />
@@ -72,44 +73,49 @@
       <span
         v-if="!label && required"
         class="vc-checkbox__required"
+        aria-hidden="true"
         >*</span
       >
     </label>
 
-    <slot
-      v-if="errorMessage"
-      name="error"
+    <Transition
+      name="slide-up"
+      mode="out-in"
     >
-      <VcHint :id="errorId" class="vc-checkbox__error">
-        {{ errorMessage }}
-      </VcHint>
-    </slot>
+      <div v-if="errorMessage">
+        <slot name="error">
+          <VcHint
+            :id="errorId"
+            class="vc-checkbox__error"
+            :error="true"
+          >
+            {{ errorMessage }}
+          </VcHint>
+        </slot>
+      </div>
+    </Transition>
   </div>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { MaybeRef, computed, unref, ref, watch, onMounted, useId } from "vue";
-import { VcHint } from "./../../atoms/vc-hint";
-import { VcLabel } from "../../atoms/vc-label";
-
-export interface Props {
-  modelValue: MaybeRef<boolean>;
+import { MaybeRef, computed, unref, ref, watch, onMounted } from "vue";
+import { VcHint } from "@ui/components/atoms/vc-hint";
+import { VcLabel } from "@ui/components/atoms/vc-label";
+import { useFormField } from "@ui/composables/useFormField";
+import type { IFormFieldProps } from "@ui/types";
+
+export interface Props extends IFormFieldProps {
+  modelValue: MaybeRef<boolean | any[]>;
   value?: any;
-  disabled?: boolean;
-  required?: boolean;
-  name?: string;
-  errorMessage?: string;
   trueValue?: boolean;
   falseValue?: boolean;
-  label?: string;
-  tooltip?: string;
   size?: "s" | "m" | "l";
   outline?: boolean;
   indeterminate?: boolean;
 }
 
 export interface Emits {
-  (event: "update:modelValue", value: boolean): void;
+  (event: "update:modelValue", value: boolean | any[]): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -127,23 +133,16 @@ defineSlots<{
   icon: (props: Record<string, never>) => any;
 }>();
 
-const checkboxRef = ref<HTMLInputElement | null>(null);
+const { fieldId: checkboxId, errorId, invalid, resolvedDisabled, resolvedName, ariaDescribedBy } = useFormField(props);
 
-const uid = useId();
-const checkboxId = computed(() => `vc-checkbox-${uid}`);
-const errorId = computed(() => `vc-checkbox-${uid}-error`);
-
-const ariaDescribedBy = computed(() => {
-  if (props.errorMessage) return errorId.value;
-  return undefined;
-});
+const checkboxRef = ref<HTMLInputElement | null>(null);
 
 const model = computed({
   get() {
     return unref(props.modelValue);
   },
   set(newValue) {
-    emit("update:modelValue", newValue);
+    emit("update:modelValue", newValue as boolean | any[]);
   },
 });
 
@@ -176,12 +175,13 @@ onMounted(() => {
 <style lang="scss">
 :root {
   /* Checkbox size */
-  --checkbox-size-s: 14px;
-  --checkbox-size-m: 18px;
+  --checkbox-size-s: 16px;
+  --checkbox-size-m: 20px;
   --checkbox-size-l: 24px;
 
   /* Main colors */
-  --checkbox-border-color: var(--neutrals-400);
+  --checkbox-border-color: var(--neutrals-300);
+  --checkbox-border-color-hover: var(--neutrals-400);
   --checkbox-bg-color: var(--additional-50);
   --checkbox-text-color: var(--neutrals-900);
 
@@ -191,91 +191,76 @@ onMounted(() => {
   --checkbox-icon-color: var(--additional-50);
 
   /* Indeterminate state */
-  --checkbox-indeterminate-bg-color: var(--neutrals-500);
-  --checkbox-indeterminate-border-color: var(--neutrals-500);
+  --checkbox-indeterminate-bg-color: var(--primary-500);
+  --checkbox-indeterminate-border-color: var(--primary-500);
   --checkbox-indeterminate-line-color: var(--additional-50);
 
   /* Error state */
   --checkbox-error-border-color: var(--danger-500);
   --checkbox-error-text-color: var(--danger-500);
-  --checkbox-error-ring-color: rgba(239, 68, 68, 0.2);
+  --checkbox-error-ring-color: var(--danger-100);
 
   /* Disabled state */
-  --checkbox-disabled-bg-color: var(--neutrals-200);
-  --checkbox-disabled-border-color: var(--neutrals-200);
   --checkbox-disabled-opacity: 0.5;
 
   /* Focus */
-  --checkbox-focus-shadow-color: rgba(59, 130, 246, 0.3);
-  --checkbox-focus-shadow-size: 3px;
+  --checkbox-focus-ring-color: var(--primary-100);
 
   /* Other */
-  --checkbox-border-radius: 2px;
+  --checkbox-border-radius: 4px;
   --checkbox-required-color: var(--danger-500);
-  --checkbox-transition-duration: 0.2s;
-  --checkbox-margin-spacing: 0.5rem;
+  --checkbox-transition-duration: 200ms;
+  --checkbox-label-spacing: 0.5rem;
   --checkbox-text-margin: 0.5rem;
 }
 
 .vc-checkbox {
-  display: flex;
-  flex-direction: column;
+  @apply tw-flex tw-flex-col;
 
   &__label {
-    margin-bottom: var(--checkbox-margin-spacing);
+    @apply tw-mb-[var(--checkbox-label-spacing)];
   }
 
   &__container {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
+    @apply tw-inline-flex tw-items-center tw-cursor-pointer tw-select-none;
   }
 
   &__input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
+    @apply tw-absolute tw-opacity-0 tw-w-0 tw-h-0;
 
     &:focus-visible + .vc-checkbox__custom-input {
-      box-shadow: 0 0 0 var(--checkbox-focus-shadow-size) var(--checkbox-focus-shadow-color);
+      @apply tw-ring-[3px] tw-outline-none;
+      ring-color: var(--checkbox-focus-ring-color);
     }
 
-    &:hover + .vc-checkbox__custom-input {
-      box-shadow: 0 0 0 var(--checkbox-focus-shadow-size) var(--checkbox-focus-shadow-color);
+    &:not(:disabled):not(:checked) + .vc-checkbox__custom-input:hover {
+      border-color: var(--checkbox-border-color-hover);
     }
 
     &:disabled + .vc-checkbox__custom-input {
-      background-color: var(--checkbox-disabled-bg-color);
-      border-color: var(--checkbox-disabled-border-color);
-      cursor: not-allowed;
+      @apply tw-cursor-not-allowed;
     }
   }
 
   &__custom-input {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--checkbox-border-color);
-    border-radius: var(--checkbox-border-radius);
+    @apply tw-flex tw-items-center tw-justify-center tw-shrink-0
+      tw-border tw-border-solid
+      tw-rounded-[var(--checkbox-border-radius)]
+      tw-transition-all tw-duration-200 tw-ease-in-out;
+    border-color: var(--checkbox-border-color);
     background-color: var(--checkbox-bg-color);
-    transition: all var(--checkbox-transition-duration) ease-in-out;
     color: var(--checkbox-icon-color);
 
     .vc-checkbox--size-s & {
-      width: var(--checkbox-size-s);
-      height: var(--checkbox-size-s);
+      @apply tw-w-[var(--checkbox-size-s)] tw-h-[var(--checkbox-size-s)];
     }
 
     .vc-checkbox--size-m & {
-      width: var(--checkbox-size-m);
-      height: var(--checkbox-size-m);
+      @apply tw-w-[var(--checkbox-size-m)] tw-h-[var(--checkbox-size-m)];
     }
 
     .vc-checkbox--size-l & {
-      width: var(--checkbox-size-l);
-      height: var(--checkbox-size-l);
+      @apply tw-w-[var(--checkbox-size-l)] tw-h-[var(--checkbox-size-l)];
     }
 
     .vc-checkbox__input:checked + & {
@@ -287,47 +272,73 @@ onMounted(() => {
       background-color: var(--checkbox-indeterminate-bg-color);
       border-color: var(--checkbox-indeterminate-border-color);
     }
-
-    .vc-checkbox--disabled & {
-      opacity: var(--checkbox-disabled-opacity);
-      cursor: not-allowed;
-    }
   }
 
   &__check-icon {
-    width: 100%;
-    height: 100%;
+    @apply tw-w-full tw-h-full;
+    animation: checkbox-check-in var(--checkbox-transition-duration) ease-out;
   }
 
   &__indeterminate-line {
+    @apply tw-block tw-rounded-full;
     width: 65%;
     height: 2px;
     background-color: var(--checkbox-indeterminate-line-color);
-    display: block;
   }
 
   &__text {
-    margin-left: var(--checkbox-text-margin);
-    font-size: 14px;
-    line-height: 21px;
+    @apply tw-text-sm tw-leading-[21px];
     color: var(--checkbox-text-color);
+    margin-left: var(--checkbox-text-margin);
   }
 
   &__required {
+    @apply tw-ml-1;
     color: var(--checkbox-required-color);
-    margin-left: 0.25rem;
   }
 
   &__error {
-    --hint-color: var(--checkbox-error-text-color);
-    margin-top: 0.25rem;
+    @apply tw-mt-1 [--hint-error-color:var(--checkbox-error-text-color)];
   }
 
   &--error {
     .vc-checkbox__custom-input {
+      @apply tw-ring-[3px];
       border-color: var(--checkbox-error-border-color);
-      box-shadow: 0 0 0 3px var(--checkbox-error-ring-color);
+      ring-color: var(--checkbox-error-ring-color);
     }
   }
+
+  &--disabled {
+    @apply tw-cursor-not-allowed tw-pointer-events-none;
+    opacity: var(--checkbox-disabled-opacity);
+  }
+
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
+  }
+
+  .slide-up-enter-from {
+    @apply tw-opacity-0 tw-translate-y-[5px];
+  }
+
+  .slide-up-leave-to {
+    @apply tw-opacity-0 tw--translate-y-[5px];
+  }
+}
+
+@keyframes checkbox-check-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 </style>

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

@@ -0,0 +1,2 @@
+export { default as VcCheckboxGroup } from "@ui/components/molecules/vc-checkbox-group/vc-checkbox-group.vue";
+export type { CheckboxGroupOption } from "@ui/components/molecules/vc-checkbox-group/vc-checkbox-group.vue";

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

@@ -0,0 +1,258 @@
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { VcCheckboxGroup } from "@ui/components/molecules/vc-checkbox-group";
+import { VcCheckbox } from "@ui/components/molecules/vc-checkbox";
+
+const options = [
+  { label: "Email", value: "email" },
+  { label: "SMS", value: "sms" },
+  { label: "Push", value: "push" },
+];
+
+/**
+ * `VcCheckboxGroup` wraps checkbox controls into an accessible fieldset.
+ */
+const meta = {
+  title: "Molecules/VcCheckboxGroup",
+  component: VcCheckboxGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      description: "Selected values",
+      control: "object",
+      table: {
+        type: { summary: "any[]" },
+      },
+    },
+    options: {
+      description: "List of checkbox options",
+      control: "object",
+      table: {
+        type: { summary: "CheckboxGroupOption[]" },
+      },
+    },
+    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 checkboxes",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    size: {
+      description: "Size for all checkbox controls",
+      control: "select",
+      options: ["s", "m", "l"],
+      table: {
+        type: { summary: "'s' | 'm' | 'l'" },
+        defaultValue: { summary: "'s'" },
+      },
+    },
+  },
+  args: {
+    modelValue: ["email"],
+    label: "Notification channels",
+    hint: "You can choose multiple options",
+    options,
+    orientation: "vertical",
+    size: "s",
+  },
+} satisfies Meta<typeof VcCheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic checkbox group from options.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcCheckboxGroup },
+    setup: () => {
+      const value = ref<string[]>(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg tw-space-y-3">
+        <VcCheckboxGroup 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: { VcCheckboxGroup },
+    setup: () => {
+      const value = ref<string[]>(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <VcCheckboxGroup v-bind="args" v-model="value" />
+    `,
+  }),
+};
+
+/**
+ * One option can be disabled.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      { label: "Email", value: "email" },
+      { label: "SMS", value: "sms", disabled: true },
+      { label: "Push", value: "push" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcCheckboxGroup },
+    setup: () => {
+      const value = ref<string[]>(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <VcCheckboxGroup v-bind="args" v-model="value" />
+    `,
+  }),
+};
+
+/**
+ * Group-level validation error.
+ */
+export const ErrorState: Story = {
+  args: {
+    modelValue: [],
+    required: true,
+    error: true,
+    errorMessage: "Select at least one channel",
+  },
+  render: (args) => ({
+    components: { VcCheckboxGroup },
+    setup: () => {
+      const value = ref<string[]>(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <VcCheckboxGroup v-bind="args" v-model="value" />
+    `,
+  }),
+};
+
+/**
+ * Custom rendering via slot while keeping group semantics.
+ */
+export const CustomSlot: Story = {
+  render: () => ({
+    components: { VcCheckboxGroup, VcCheckbox },
+    setup: () => {
+      const value = ref<string[]>(["feature-a"]);
+      return { value };
+    },
+    template: `
+      <div class="tw-max-w-lg tw-space-y-3">
+        <VcCheckboxGroup
+          v-model="value"
+          label="Feature flags"
+          hint="Custom layout through default slot"
+          orientation="horizontal"
+          name="feature-flags"
+        >
+          <VcCheckbox v-model="value" value="feature-a">Feature A</VcCheckbox>
+          <VcCheckbox v-model="value" value="feature-b">Feature B</VcCheckbox>
+          <VcCheckbox v-model="value" value="feature-c">Feature C</VcCheckbox>
+        </VcCheckboxGroup>
+        <div class="tw-text-sm tw-text-gray-600">Selected: {{ value }}</div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Accessibility demo: inspect fieldset semantics and aria links.
+ */
+export const Accessibility: Story = {
+  render: () => ({
+    components: { VcCheckboxGroup },
+    setup: () => {
+      const value = ref<string[]>(["email"]);
+      return { value };
+    },
+    template: `
+      <div class="tw-max-w-lg tw-space-y-4">
+        <VcCheckboxGroup
+          v-model="value"
+          label="Notification channels"
+          hint="Inspect fieldset, legend and aria-describedby"
+          :options="[
+            { label: 'Email', value: 'email' },
+            { label: 'SMS', value: 'sms' },
+            { label: 'Push', value: 'push' }
+          ]"
+          name="notification-channels"
+        />
+
+        <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 semantic <code>fieldset</code></li>
+            <li><code>legend</code> labels the whole checkbox set</li>
+            <li>checkboxes 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-checkbox-group/vc-checkbox-group.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import VcCheckboxGroup from "@ui/components/molecules/vc-checkbox-group/vc-checkbox-group.vue";
+
+describe("VcCheckboxGroup", () => {
+  it("emits updated array when option toggles", async () => {
+    const wrapper = mount(VcCheckboxGroup as any, {
+      props: {
+        modelValue: ["email"],
+        name: "channels",
+        options: [
+          { label: "Email", value: "email" },
+          { label: "SMS", value: "sms" },
+        ],
+      },
+    });
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]');
+    await checkboxes[1].setValue(true);
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([["email", "sms"]]);
+  });
+
+  it("applies group disabled state to all checkbox inputs", () => {
+    const wrapper = mount(VcCheckboxGroup as any, {
+      props: {
+        modelValue: [],
+        disabled: true,
+        options: [
+          { label: "Feature A", value: "a" },
+          { label: "Feature B", value: "b" },
+        ],
+      },
+    });
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]');
+    expect(checkboxes[0].attributes("disabled")).toBeDefined();
+    expect(checkboxes[1].attributes("disabled")).toBeDefined();
+  });
+});