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

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

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

package/ui/components/molecules/vc-color-input/index.ts

@@ -1 +1 @@
-export { default as VcColorInput } from "./vc-color-input.vue";
+export { default as VcColorInput } from "@ui/components/molecules/vc-color-input/vc-color-input.vue";

package/ui/components/molecules/vc-color-input/vc-color-input.stories.ts

@@ -1,152 +1,152 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcColorInput } from "./";
-import { ref } from "vue";
-
-const meta = {
-  title: "Molecules/VcColorInput",
-  component: VcColorInput,
-  tags: ["autodocs"],
-  args: {
-    label: "Pick a color",
-    placeholder: "Enter hex color...",
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-### VcColorInput Component
-
-A standalone color input component extracted from VcInput. Combines a text input for hex values with a color swatch square that opens the native color picker.
-
-- **Dual input**: Type hex values or use the native color picker via the swatch
-- **Color name support**: Accepts CSS color names (e.g., "red") and converts to hex
-- **Accessible**: Auto-generated IDs, \`aria-describedby\`, \`aria-invalid\`
-- **Consistent styling**: Uses the same CSS variables and shadcn-inspired focus rings as VcInput
-        `,
-      },
-    },
-  },
-} satisfies Meta<typeof VcColorInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
-          <strong>Value:</strong> "{{ value ?? 'null' }}"
-        </div>
-      </div>
-    `,
-  }),
-};
-
-export const WithValue: Story = {
-  args: {
-    label: "Brand color",
-    modelValue: "#3b82f6",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
-          <strong>Value:</strong> "{{ value ?? 'null' }}"
-        </div>
-      </div>
-    `,
-  }),
-};
-
-export const WithError: Story = {
-  args: {
-    error: true,
-    errorMessage: "Please enter a valid hex color",
-    modelValue: "invalid",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    label: "Disabled color",
-    modelValue: "#ef4444",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
-
-export const Clearable: Story = {
-  args: {
-    clearable: true,
-    label: "Clearable color",
-    modelValue: "#22c55e",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    label: "Small color input",
-    modelValue: "#a855f7",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { VcColorInput } from "@ui/components/molecules/vc-color-input";
+import { ref } from "vue";
+
+const meta = {
+  title: "Molecules/VcColorInput",
+  component: VcColorInput,
+  tags: ["autodocs"],
+  args: {
+    label: "Pick a color",
+    placeholder: "Enter hex color...",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### VcColorInput Component
+
+A standalone color input component extracted from VcInput. Combines a text input for hex values with a color swatch square that opens the native color picker.
+
+- **Dual input**: Type hex values or use the native color picker via the swatch
+- **Color name support**: Accepts CSS color names (e.g., "red") and converts to hex
+- **Accessible**: Auto-generated IDs, \`aria-describedby\`, \`aria-invalid\`
+- **Consistent styling**: Uses the same CSS variables and focus rings as VcInput
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcColorInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
+          <strong>Value:</strong> "{{ value ?? 'null' }}"
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithValue: Story = {
+  args: {
+    label: "Brand color",
+    modelValue: "#3b82f6",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
+          <strong>Value:</strong> "{{ value ?? 'null' }}"
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithError: Story = {
+  args: {
+    error: true,
+    errorMessage: "Please enter a valid hex color",
+    modelValue: "invalid",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    label: "Disabled color",
+    modelValue: "#ef4444",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};
+
+export const Clearable: Story = {
+  args: {
+    clearable: true,
+    label: "Clearable color",
+    modelValue: "#22c55e",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    label: "Small color input",
+    modelValue: "#a855f7",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};

package/ui/components/molecules/vc-color-input/vc-color-input.vue

@@ -3,8 +3,8 @@
     class="vc-color-input"
     :class="[
       {
-        'vc-color-input_error': error,
-        'vc-color-input_disabled': disabled,
+        'vc-color-input_error': invalid,
+        'vc-color-input_disabled': resolvedDisabled,
         'vc-color-input_focused': isFocused,
       },
     ]"
@@ -17,7 +17,7 @@
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
-      :error="error"
+      :error="invalid"
     >
       <span>{{ label }}</span>
       <template
@@ -42,10 +42,10 @@
             v-model="textValue"
             :placeholder="placeholder"
             type="text"
-            :disabled="disabled"
+            :disabled="resolvedDisabled"
             :name="name"
             :autofocus="autofocus"
-            :aria-invalid="error || undefined"
+            :aria-invalid="invalid || undefined"
             :aria-describedby="ariaDescribedBy"
             :aria-labelledby="label ? labelId : undefined"
             class="vc-color-input__input"
@@ -57,13 +57,12 @@
 
           <!-- Color picker swatch -->
           <div class="vc-color-input__color-container">
-            <div
+            <button
+              type="button"
               class="vc-color-input__color-square"
               :style="{ backgroundColor: colorValue || '#ffffff' }"
-              tabindex="0"
+              :aria-label="`Pick color${colorValue ? ': ' + colorValue : ''}`"
               @click="openColorPicker"
-              @keydown.enter="openColorPicker"
-              @keydown.space="openColorPicker"
             >
               <!-- Hidden native color input -->
               <input
@@ -71,24 +70,25 @@
                 type="color"
                 :value="colorValue"
                 class="vc-color-input__color-picker-hidden"
+                tabindex="-1"
+                aria-hidden="true"
                 @change="handleColorPickerChange"
               />
-            </div>
+            </button>
           </div>
 
-          <div
+          <button
             v-if="clearable && textValue && !disabled"
+            type="button"
             class="vc-color-input__clear"
-            tabindex="0"
+            aria-label="Clear color"
             @click="onReset"
-            @keydown.enter="onReset"
-            @keydown.space="onReset"
           >
             <VcIcon
               size="xs"
               icon="lucide-x"
             ></VcIcon>
-          </div>
+          </button>
         </div>
 
         <div
@@ -113,6 +113,7 @@
           v-if="errorMessage"
           :id="errorId"
           class="vc-color-input__hint-error"
+          :error="true"
           >{{ errorMessage }}</VcHint
         >
       </div>
@@ -130,27 +131,14 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, ref, useId, watch, nextTick } from "vue";
-import { VcLabel, VcIcon, VcHint } from "./../../";
-import { convertColorNameToHex, isValidHexColor, normalizeHexColor } from "../../../../shared/utilities";
+import { ref, watch, nextTick } from "vue";
+import { useFormField } from "@ui/composables/useFormField";
+import { VcLabel, VcIcon, VcHint } from "@ui/components";
+import { convertColorNameToHex, isValidHexColor, normalizeHexColor } from "@shared/utilities";
+import type { ITextFieldProps } from "@ui/types";
 
-export interface VcColorInputProps {
+export interface VcColorInputProps extends ITextFieldProps {
   modelValue?: string | null;
-  label?: string;
-  placeholder?: string;
-  hint?: string;
-  disabled?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-  required?: boolean;
-  clearable?: boolean;
-  loading?: boolean;
-  autofocus?: boolean;
-  size?: "default" | "small";
-  tooltip?: string;
-  multilanguage?: boolean;
-  currentLanguage?: string;
-  name?: string;
 }
 
 export interface VcColorInputEmits {
@@ -166,19 +154,7 @@ const props = withDefaults(defineProps<VcColorInputProps>(), {
 
 const emit = defineEmits<VcColorInputEmits>();
 
-// Accessibility IDs
-const uid = useId();
-const inputId = computed(() => `vc-color-input-${uid}`);
-const labelId = computed(() => `vc-color-input-${uid}-label`);
-const hintId = computed(() => `vc-color-input-${uid}-hint`);
-const errorId = computed(() => `vc-color-input-${uid}-error`);
-
-const ariaDescribedBy = computed(() => {
-  const ids: string[] = [];
-  if (props.error && props.errorMessage) ids.push(errorId.value);
-  if (props.hint) ids.push(hintId.value);
-  return ids.length ? ids.join(" ") : undefined;
-});
+const { fieldId: inputId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
 
 // State
 const isFocused = ref(false);
@@ -295,8 +271,13 @@ defineExpose({ focus });
   --input-text-color-error: var(--danger-500);
   --input-border-color-error: var(--danger-500);
   --input-border-color-focus: var(--primary-500);
-  --input-focus-ring-color: rgba(59, 130, 246, 0.3);
-  --input-error-ring-color: rgba(239, 68, 68, 0.2);
+  --input-focus-ring-color: var(--primary-100);
+  --input-error-ring-color: var(--danger-100);
+
+  --color-input-swatch-size: 20px;
+  --color-input-swatch-border-radius: 4px;
+  --color-input-swatch-border-color: var(--neutrals-300);
+  --color-input-swatch-border-color-hover: var(--neutrals-400);
 }
 
 .vc-color-input {
@@ -342,10 +323,15 @@ defineExpose({ focus });
   }
 
   &__color-square {
-    @apply tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-gray-300 tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-ml-2;
+    @apply tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-ml-2
+      tw-border tw-border-solid tw-bg-transparent tw-p-0 tw-outline-none;
+    width: var(--color-input-swatch-size);
+    height: var(--color-input-swatch-size);
+    border-radius: var(--color-input-swatch-border-radius);
+    border-color: var(--color-input-swatch-border-color);
 
     &:hover {
-      @apply tw-border-gray-400;
+      border-color: var(--color-input-swatch-border-color-hover);
     }
 
     &:focus-visible {
@@ -359,7 +345,8 @@ defineExpose({ focus });
 
   &__clear {
     @apply tw-cursor-pointer tw-pl-3 tw-text-[color:var(--input-clear-color)]
-      hover:tw-text-[color:var(--input-clear-color-hover)] tw-flex tw-items-center;
+      hover:tw-text-[color:var(--input-clear-color-hover)] tw-flex tw-items-center
+      tw-border-none tw-bg-transparent tw-outline-none tw-p-0;
   }
 
   &__loading {
@@ -371,7 +358,7 @@ defineExpose({ focus });
   }
 
   &__hint-error {
-    @apply tw-mt-1 [--hint-color:var(--input-text-color-error)];
+    @apply tw-mt-1 [--hint-error-color:var(--input-text-color-error)];
   }
 
   &__desc {

package/ui/components/molecules/vc-date-picker/index.ts

@@ -1 +1 @@
-export { default as VcDatePicker } from "./vc-date-picker.vue";
+export { default as VcDatePicker } from "@ui/components/molecules/vc-date-picker/vc-date-picker.vue";