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

package/ui/components/molecules/vc-multivalue/_internal/MultivalueDropdown.vue

@@ -1,216 +1,216 @@
-<template>
-  <teleport :to="teleportTarget" defer>
-    <Transition name="multivalue-dropdown">
-      <div
-        v-if="isOpened"
-        :id="listboxId"
-        ref="dropdownElRef"
-        v-on-click-outside="[() => emit('clickOutside'), { ignore: [dropdownToggleRef] }]"
-        class="vc-multivalue__dropdown"
-        role="listbox"
-        :aria-label="ariaLabel"
-        :style="dropdownStyle"
-        @wheel="onDropdownWheel"
-      >
-        <input
-          ref="searchInputRef"
-          class="vc-multivalue__search"
-          tabindex="0"
-          aria-label="Search options"
-          autocomplete="off"
-          @input="emit('search', $event)"
-          @keydown.space.stop
-          @keydown.enter.stop
-        />
-
-        <!-- Scroll up button -->
-        <div
-          class="vc-multivalue__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-multivalue__viewport"
-          @scroll="updateScrollState"
-        >
-          <div
-            v-for="(item, i) in availableOptions"
-            :key="i"
-            class="vc-multivalue__item"
-            tabindex="0"
-            role="option"
-            :data-index="i"
-            @click="emit('select', item)"
-          >
-            <slot
-              name="option"
-              :item="item"
-              :index="i"
-            >
-              {{ item[optionLabel as keyof typeof item] }}
-            </slot>
-          </div>
-
-          <!-- No options message -->
-          <div
-            v-if="availableOptions.length === 0"
-            class="vc-multivalue__no-options"
-          >
-            {{ $t("COMPONENTS.MOLECULES.VC_SELECT.NO_OPTIONS") }}
-          </div>
-        </div>
-
-        <!-- Scroll down button -->
-        <div
-          class="vc-multivalue__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>
-      </div>
-    </Transition>
-  </teleport>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { ref, watch, onBeforeUnmount, nextTick } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
-import { VcIcon } from "./../../../";
-import { useTeleportTarget } from "../../../../composables";
-
-const props = defineProps<{
-  isOpened: boolean;
-  dropdownStyle: Record<string, string | undefined>;
-  availableOptions: any[];
-  optionLabel: string;
-  ariaLabel: string;
-  listboxId?: string;
-  dropdownToggleRef: HTMLElement | null;
-}>();
-
-const emit = defineEmits<{
-  select: [item: any];
-  search: [event: Event];
-  clickOutside: [];
-}>();
-
-defineSlots<{
-  option: (scope: { item: any; index: number }) => any;
-}>();
-
-const dropdownElRef = ref<HTMLElement | null>(null);
-const searchInputRef = ref<HTMLInputElement | null>(null);
-const viewportRef = ref<HTMLElement | null>(null);
-const { teleportTarget } = useTeleportTarget();
-
-// --- Scroll arrow state ---
-const canScrollUp = ref(false);
-const canScrollDown = ref(false);
-let scrollAnimationId: number | null = null;
-
-function updateScrollState() {
-  const el = viewportRef.value;
-  if (!el) {
-    canScrollUp.value = false;
-    canScrollDown.value = false;
-    return;
-  }
-  canScrollUp.value = el.scrollTop > 0;
-  canScrollDown.value = Math.ceil(el.scrollTop) < el.scrollHeight - el.clientHeight;
-}
-
-function startScroll(direction: "up" | "down") {
-  stopScroll();
-  const el = viewportRef.value;
-  if (!el) return;
-
-  const speed = 2; // px per frame (~120px/s at 60fps) — smooth shadcn-like
-  function tick() {
-    if (!el) return;
-    el.scrollTop += direction === "up" ? -speed : speed;
-    updateScrollState();
-    scrollAnimationId = requestAnimationFrame(tick);
-  }
-  scrollAnimationId = requestAnimationFrame(tick);
-}
-
-function stopScroll() {
-  if (scrollAnimationId !== null) {
-    cancelAnimationFrame(scrollAnimationId);
-    scrollAnimationId = null;
-  }
-}
-
-function onDropdownWheel(event: WheelEvent) {
-  const el = viewportRef.value;
-  if (!el) return;
-
-  const isInViewport = el.contains(event.target as Node);
-
-  if (isInViewport) {
-    // Native scroll handles viewport scrolling.
-    // Only prevent page scroll at boundaries.
-    const atTop = el.scrollTop <= 0 && event.deltaY < 0;
-    const atBottom =
-      Math.ceil(el.scrollTop) >= el.scrollHeight - el.clientHeight && event.deltaY > 0;
-    if (atTop || atBottom) {
-      event.preventDefault();
-    }
-  } else {
-    // Cursor is on scroll buttons, search, or other non-viewport area —
-    // forward the wheel event to the viewport manually.
-    event.preventDefault();
-    el.scrollTop += event.deltaY;
-  }
-  updateScrollState();
-}
-
-watch(
-  () => props.isOpened,
-  (opened) => {
-    if (opened) {
-      nextTick(updateScrollState);
-    } else {
-      stopScroll();
-      canScrollUp.value = false;
-      canScrollDown.value = false;
-    }
-  },
-);
-
-watch(
-  () => props.availableOptions.length,
-  () => {
-    if (props.isOpened) {
-      nextTick(updateScrollState);
-    }
-  },
-);
-
-onBeforeUnmount(() => {
-  stopScroll();
-});
-
-defineExpose({
-  dropdownElRef,
-  searchInputRef,
-  viewportRef,
-});
-</script>
+<template>
+  <teleport :to="teleportTarget" defer>
+    <Transition name="multivalue-dropdown">
+      <div
+        v-if="isOpened"
+        :id="listboxId"
+        ref="dropdownElRef"
+        v-on-click-outside="[() => emit('clickOutside'), { ignore: [dropdownToggleRef] }]"
+        class="vc-multivalue__dropdown"
+        role="listbox"
+        :aria-label="ariaLabel"
+        :style="dropdownStyle"
+        @wheel="onDropdownWheel"
+      >
+        <input
+          ref="searchInputRef"
+          class="vc-multivalue__search"
+          tabindex="0"
+          aria-label="Search options"
+          autocomplete="off"
+          @input="emit('search', $event)"
+          @keydown.space.stop
+          @keydown.enter.stop
+        />
+
+        <!-- Scroll up button -->
+        <div
+          class="vc-multivalue__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-multivalue__viewport"
+          @scroll="updateScrollState"
+        >
+          <div
+            v-for="(item, i) in availableOptions"
+            :key="i"
+            class="vc-multivalue__item"
+            tabindex="0"
+            role="option"
+            :data-index="i"
+            @click="emit('select', item)"
+          >
+            <slot
+              name="option"
+              :item="item"
+              :index="i"
+            >
+              {{ item[optionLabel as keyof typeof item] }}
+            </slot>
+          </div>
+
+          <!-- No options message -->
+          <div
+            v-if="availableOptions.length === 0"
+            class="vc-multivalue__no-options"
+          >
+            {{ $t("COMPONENTS.MOLECULES.VC_SELECT.NO_OPTIONS") }}
+          </div>
+        </div>
+
+        <!-- Scroll down button -->
+        <div
+          class="vc-multivalue__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>
+      </div>
+    </Transition>
+  </teleport>
+</template>
+
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { ref, watch, onBeforeUnmount, nextTick } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { VcIcon } from "@ui/components";
+import { useTeleportTarget } from "@ui/composables";
+
+const props = defineProps<{
+  isOpened: boolean;
+  dropdownStyle: Record<string, string | undefined>;
+  availableOptions: any[];
+  optionLabel: string;
+  ariaLabel: string;
+  listboxId?: string;
+  dropdownToggleRef: HTMLElement | null;
+}>();
+
+const emit = defineEmits<{
+  select: [item: any];
+  search: [event: Event];
+  clickOutside: [];
+}>();
+
+defineSlots<{
+  option: (scope: { item: any; index: number }) => any;
+}>();
+
+const dropdownElRef = ref<HTMLElement | null>(null);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+const viewportRef = ref<HTMLElement | null>(null);
+const { teleportTarget } = useTeleportTarget();
+
+// --- Scroll arrow state ---
+const canScrollUp = ref(false);
+const canScrollDown = ref(false);
+let scrollAnimationId: number | null = null;
+
+function updateScrollState() {
+  const el = viewportRef.value;
+  if (!el) {
+    canScrollUp.value = false;
+    canScrollDown.value = false;
+    return;
+  }
+  canScrollUp.value = el.scrollTop > 0;
+  canScrollDown.value = Math.ceil(el.scrollTop) < el.scrollHeight - el.clientHeight;
+}
+
+function startScroll(direction: "up" | "down") {
+  stopScroll();
+  const el = viewportRef.value;
+  if (!el) return;
+
+  const speed = 2; // px per frame (~120px/s at 60fps) — smooth
+  function tick() {
+    if (!el) return;
+    el.scrollTop += direction === "up" ? -speed : speed;
+    updateScrollState();
+    scrollAnimationId = requestAnimationFrame(tick);
+  }
+  scrollAnimationId = requestAnimationFrame(tick);
+}
+
+function stopScroll() {
+  if (scrollAnimationId !== null) {
+    cancelAnimationFrame(scrollAnimationId);
+    scrollAnimationId = null;
+  }
+}
+
+function onDropdownWheel(event: WheelEvent) {
+  const el = viewportRef.value;
+  if (!el) return;
+
+  const isInViewport = el.contains(event.target as Node);
+
+  if (isInViewport) {
+    // Native scroll handles viewport scrolling.
+    // Only prevent page scroll at boundaries.
+    const atTop = el.scrollTop <= 0 && event.deltaY < 0;
+    const atBottom =
+      Math.ceil(el.scrollTop) >= el.scrollHeight - el.clientHeight && event.deltaY > 0;
+    if (atTop || atBottom) {
+      event.preventDefault();
+    }
+  } else {
+    // Cursor is on scroll buttons, search, or other non-viewport area —
+    // forward the wheel event to the viewport manually.
+    event.preventDefault();
+    el.scrollTop += event.deltaY;
+  }
+  updateScrollState();
+}
+
+watch(
+  () => props.isOpened,
+  (opened) => {
+    if (opened) {
+      nextTick(updateScrollState);
+    } else {
+      stopScroll();
+      canScrollUp.value = false;
+      canScrollDown.value = false;
+    }
+  },
+);
+
+watch(
+  () => props.availableOptions.length,
+  () => {
+    if (props.isOpened) {
+      nextTick(updateScrollState);
+    }
+  },
+);
+
+onBeforeUnmount(() => {
+  stopScroll();
+});
+
+defineExpose({
+  dropdownElRef,
+  searchInputRef,
+  viewportRef,
+});
+</script>

package/ui/components/molecules/vc-multivalue/_internal/MultivalueTrigger.vue

@@ -150,7 +150,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcIcon } from "./../../../";
+import { VcIcon } from "@ui/components";
 
 defineProps<{
   modelValue?: any[];

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

@@ -1,6 +1,6 @@
-export { useMultivalueMode, type MultivalueType } from "./useMultivalueMode";
-export { useMultivalueValues } from "./useMultivalueValues";
-export { useMultivalueInput } from "./useMultivalueInput";
-export { useMultivalueColor } from "./useMultivalueColor";
-export { useMultivalueDropdown } from "./useMultivalueDropdown";
-export { useMultivalueOptions } from "./useMultivalueOptions";
+export { useMultivalueMode, type MultivalueType } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueMode";
+export { useMultivalueValues } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueValues";
+export { useMultivalueInput } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueInput";
+export { useMultivalueColor } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueColor";
+export { useMultivalueDropdown } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueDropdown";
+export { useMultivalueOptions } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueOptions";

package/ui/components/molecules/vc-multivalue/composables/useMultivalueDropdown.ts

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

package/ui/components/molecules/vc-multivalue/composables/useMultivalueInput.ts

@@ -1,6 +1,6 @@
 import { ref } from "vue";
-import { convertColorNameToHex } from "../../../../../shared/utilities";
-import type { MultivalueType } from "./useMultivalueMode";
+import { convertColorNameToHex } from "@shared/utilities";
+import type { MultivalueType } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueMode";
 
 interface UseMultivalueInputOptions<T> {
   type: () => MultivalueType;

package/ui/components/molecules/vc-multivalue/composables/useMultivalueValues.ts

@@ -1,5 +1,5 @@
 import { computed, type ComputedRef } from "vue";
-import type { MultivalueType } from "./useMultivalueMode";
+import type { MultivalueType } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueMode";
 
 interface UseMultivalueValuesOptions<T> {
   modelValue: () => T[];

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

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

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

@@ -5,10 +5,10 @@
       `vc-multivalue_${type}`,
       {
         'vc-multivalue_opened': isOpened,
-        'vc-multivalue_error': error,
-        'vc-multivalue_disabled': disabled,
+        'vc-multivalue_error': invalid,
+        'vc-multivalue_disabled': resolvedDisabled,
         'vc-multivalue_focused': isFocused,
-        'vc-multivalue_has-hint-or-error': error || hint,
+        'vc-multivalue_has-hint-or-error': invalid || hint,
       },
     ]"
   >
@@ -20,7 +20,7 @@
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
-      :error="error"
+      :error="invalid"
     >
       <span>{{ label }}</span>
       <template
@@ -39,8 +39,8 @@
       :type="type"
       :html-input-type="htmlInputType"
       :placeholder="placeholder"
-      :disabled="disabled"
-      :error="error"
+      :disabled="resolvedDisabled"
+      :error="invalid"
       :loading="loading"
       :clearable="clearable"
       :option-value="optionValue"
@@ -116,10 +116,9 @@
       name="slide-up"
       mode="out-in"
     >
-      <div v-if="error">
+      <div v-if="invalid && errorMessage">
         <slot name="error">
           <VcHint
-            v-if="errorMessage"
             :id="errorId"
             class="vc-multivalue__error"
           >
@@ -144,33 +143,28 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends { id?: string; colorCode?: string }">
-import { ref, computed, watchEffect, useId } from "vue";
-import { VcLabel, VcHint } from "./../../";
-import MultivalueTrigger from "./_internal/MultivalueTrigger.vue";
-import MultivalueDropdown from "./_internal/MultivalueDropdown.vue";
-import { useMultivalueMode, type MultivalueType } from "./composables/useMultivalueMode";
-import { useMultivalueValues } from "./composables/useMultivalueValues";
-import { useMultivalueInput } from "./composables/useMultivalueInput";
-import { useMultivalueColor } from "./composables/useMultivalueColor";
-import { useMultivalueDropdown } from "./composables/useMultivalueDropdown";
-import { useMultivalueOptions } from "./composables/useMultivalueOptions";
-
-export interface Props<T> {
+import { ref, computed, watchEffect } from "vue";
+import { useFormField } from "@ui/composables/useFormField";
+import { VcLabel, VcHint } from "@ui/components";
+import MultivalueTrigger from "@ui/components/molecules/vc-multivalue/_internal/MultivalueTrigger.vue";
+import MultivalueDropdown from "@ui/components/molecules/vc-multivalue/_internal/MultivalueDropdown.vue";
+import { useMultivalueMode, type MultivalueType } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueMode";
+import { useMultivalueValues } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueValues";
+import { useMultivalueInput } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueInput";
+import { useMultivalueColor } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueColor";
+import { useMultivalueDropdown } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueDropdown";
+import { useMultivalueOptions } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueOptions";
+import type { IFormFieldProps } from "@ui/types";
+
+export interface Props<T> extends IFormFieldProps {
   placeholder?: string;
   modelValue?: T[];
-  required?: boolean;
-  disabled?: boolean;
   type?: MultivalueType;
-  label?: string;
-  tooltip?: string;
-  name?: string;
   hint?: string;
   options?: T[];
   optionValue?: string;
   optionLabel?: string;
   multivalue?: boolean;
-  error?: boolean;
-  errorMessage?: string;
   multilanguage?: boolean;
   currentLanguage?: string;
   loading?: boolean;
@@ -204,18 +198,8 @@ defineSlots<{
   append: (props: any) => any;
 }>();
 
-// --- Accessibility IDs ---
-const uid = useId();
-const labelId = computed(() => `vc-multivalue-${uid}-label`);
-const errorId = computed(() => `vc-multivalue-${uid}-error`);
-const hintId = computed(() => `vc-multivalue-${uid}-hint`);
-const listboxId = computed(() => `vc-multivalue-${uid}-listbox`);
-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, labelId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
+const listboxId = computed(() => `${fieldId.value}-listbox`);
 
 // --- Sub-component refs ---
 const triggerComponentRef = ref<InstanceType<typeof MultivalueTrigger> | null>(null);
@@ -329,12 +313,12 @@ function onSearch(event: Event) {
 
   // Error — reuse select tokens
   --multivalue-border-color-error: var(--select-border-color-error, var(--danger-500));
-  --multivalue-error-ring-color: var(--select-error-ring-color, rgba(239, 68, 68, 0.2));
+  --multivalue-error-ring-color: var(--select-error-ring-color, var(--danger-100));
   --multivalue-hint-color: var(--danger-500);
 
   // Focus — reuse select tokens
   --multivalue-border-color-focus: var(--select-border-color-focus, var(--primary-500));
-  --multivalue-focus-ring-color: var(--select-focus-ring-color, rgba(59, 130, 246, 0.3));
+  --multivalue-focus-ring-color: var(--select-focus-ring-color, var(--primary-100));
 
   // Disabled
   --multivalue-disabled-text-color: var(--neutrals-500);
@@ -470,7 +454,7 @@ function onSearch(event: Event) {
       tw-border-[color:var(--multivalue-search-border-color)]
       tw-bg-transparent tw-rounded-[var(--multivalue-border-radius)] tw-h-8 tw-leading-8
       tw-outline-none tw-mb-2 tw-px-2 tw-text-sm
-      focus:tw-border-[color:var(--multivalue-border-color-focus)] focus:tw-ring-[2px] focus:tw-ring-[color:var(--multivalue-focus-ring-color)]
+      focus:tw-border-[color:var(--multivalue-border-color-focus)] focus:tw-ring-[3px] focus:tw-ring-[color:var(--multivalue-focus-ring-color)]
       tw-transition-[color,box-shadow] tw-duration-150 tw-ease-in-out;
   }
 
@@ -528,7 +512,7 @@ function onSearch(event: Event) {
 
   // Color square
   &__color-square {
-    @apply tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-[color:var(--neutrals-300)]
+    @apply tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-neutrals-300
       tw-cursor-pointer tw-mr-2 tw-flex-shrink-0 tw-relative;
   }
 

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

@@ -1,3 +1,3 @@
-import _Pagination from "./vc-pagination.vue";
+import _Pagination from "@ui/components/molecules/vc-pagination/vc-pagination.vue";
 
 export const VcPagination = _Pagination as typeof _Pagination;

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

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcPagination } from "./";
+import { VcPagination } from "@ui/components/molecules/vc-pagination";
 
 /**
  * `VcPagination` is a navigation component that enables users to browse through multiple pages of content.