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

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

@@ -1,204 +1,207 @@
-<template>
-  <div
-    ref="triggerRef"
-    class="vc-multivalue__field-wrapper"
-    :role="isDictionaryMode ? 'combobox' : undefined"
-    :tabindex="isDictionaryMode ? 0 : undefined"
-    :aria-expanded="isDictionaryMode ? isOpened : undefined"
-    :aria-haspopup="isDictionaryMode ? 'listbox' : undefined"
-    :aria-controls="isDictionaryMode && isOpened ? listboxId : undefined"
-    :aria-labelledby="labelId"
-    :aria-describedby="ariaDescribedBy"
-    :aria-invalid="error || undefined"
-  >
-    <div
-      v-if="$slots['prepend']"
-      class="vc-multivalue__prepend"
-    >
-      <slot name="prepend" />
-    </div>
-
-    <div class="vc-multivalue__control">
-      <div class="vc-multivalue__content">
-        <!-- Selected chips -->
-        <div
-          v-for="(item, i) in modelValue"
-          :key="item?.[optionValue as keyof typeof item] ?? i"
-          class="vc-multivalue__chip-wrapper"
-        >
-          <div
-            v-if="item"
-            class="vc-multivalue__chip"
-          >
-            <!-- Color square for color type -->
-            <div
-              v-if="type === 'color'"
-              class="vc-multivalue__color-square"
-              :style="{ backgroundColor: (item as any).colorCode || '#cccccc' }"
-              @click="emit('openColorPicker', i)"
-            >
-              <input
-                :ref="(el) => emit('setColorPickerRef', el as HTMLInputElement, i)"
-                type="color"
-                class="vc-multivalue__color-picker-hidden"
-                :value="(item as any).colorCode || '#000000'"
-                @change="(e) => emit('colorChange', e, i)"
-              />
-            </div>
-
-            <slot
-              name="selected-item"
-              :value="formatValue(item)"
-              :item="item"
-              :index="i"
-              :remove="() => emit('remove', i)"
-            >
-              <span class="vc-multivalue__chip-label">{{ formatValue(item) }}</span>
-            </slot>
-            <VcIcon
-              v-if="!disabled"
-              class="vc-multivalue__chip-remove"
-              icon="lucide-x"
-              size="xs"
-              tabindex="0"
-              role="button"
-              aria-label="Delete item"
-              @click="emit('remove', i)"
-              @keydown.enter="emit('remove', i)"
-              @keydown.space="emit('remove', i)"
-            />
-          </div>
-        </div>
-
-        <!-- Dictionary mode: Add button -->
-        <template v-if="isDictionaryMode">
-          <button
-            class="vc-multivalue__add-button"
-            :disabled="disabled"
-            tabindex="0"
-            type="button"
-            @click.stop="emit('toggleDropdown')"
-          >
-            <VcIcon
-              icon="lucide-plus"
-              size="xs"
-            />
-            <span>{{ $t("COMPONENTS.MOLECULES.VC_MULTIVALUE.ADD") }}</span>
-          </button>
-        </template>
-
-        <!-- Input mode: text input -->
-        <template v-else>
-          <input
-            :value="inputValue"
-            class="vc-multivalue__input"
-            :placeholder="placeholder"
-            :type="htmlInputType"
-            :disabled="disabled"
-            :aria-invalid="error || undefined"
-            :aria-labelledby="labelId"
-            :aria-describedby="ariaDescribedBy"
-            tabindex="0"
-            @input="emit('inputChange', ($event.target as HTMLInputElement).value)"
-            @keypress.enter.stop.prevent="emit('inputSubmit', $event)"
-            @blur="onInputBlur"
-            @keydown="emit('keyDown', $event)"
-            @focus="emit('focus')"
-          />
-        </template>
-      </div>
-
-      <!-- Clearable button -->
-      <div
-        v-if="clearable && modelValue && modelValue.length > 0 && !disabled"
-        class="vc-multivalue__clear"
-        role="button"
-        aria-label="Clear all"
-        tabindex="0"
-        @click="emit('clearAll')"
-        @keydown.enter="emit('clearAll')"
-        @keydown.space="emit('clearAll')"
-      >
-        <VcIcon
-          size="xs"
-          icon="lucide-x"
-        />
-      </div>
-
-      <!-- Loading -->
-      <div
-        v-if="loading"
-        class="vc-multivalue__loading"
-      >
-        <VcIcon
-          icon="lucide-loader-2"
-          class="tw-animate-spin"
-          size="m"
-        />
-      </div>
-    </div>
-
-    <div
-      v-if="$slots['append']"
-      class="vc-multivalue__append"
-    >
-      <slot name="append" />
-    </div>
-  </div>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { ref } from "vue";
-import { VcIcon } from "@ui/components";
-
-defineProps<{
-  modelValue?: any[];
-  isDictionaryMode: boolean;
-  type: string;
-  htmlInputType: string;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: boolean;
-  loading?: boolean;
-  clearable?: boolean;
-  optionValue: string;
-  inputValue?: string;
-  formatValue: (item: any) => any;
-  isOpened?: boolean;
-  labelId?: string;
-  listboxId?: string;
-  ariaDescribedBy?: string;
-}>();
-
-const emit = defineEmits<{
-  remove: [index: number];
-  toggleDropdown: [];
-  inputSubmit: [event: KeyboardEvent | FocusEvent];
-  inputChange: [value: string];
-  keyDown: [event: KeyboardEvent];
-  focus: [];
-  blur: [];
-  clearAll: [];
-  openColorPicker: [index: number];
-  setColorPickerRef: [el: HTMLInputElement, index: number];
-  colorChange: [event: Event, index: number];
-}>();
-
-defineSlots<{
-  "selected-item": (scope: { value: any; item: any; index: number; remove: () => void }) => any;
-  prepend: (props: any) => any;
-  append: (props: any) => any;
-}>();
-
-const triggerRef = ref<HTMLElement | null>(null);
-
-function onInputBlur(e: FocusEvent) {
-  emit("inputSubmit", e);
-  emit("blur");
-}
-
-defineExpose({
-  triggerRef,
-});
-</script>
+<template>
+  <div
+    ref="triggerRef"
+    class="vc-multivalue__field-wrapper"
+    :role="isDictionaryMode ? 'combobox' : undefined"
+    :tabindex="isDictionaryMode ? 0 : undefined"
+    :aria-expanded="isDictionaryMode ? isOpened : undefined"
+    :aria-haspopup="isDictionaryMode ? 'listbox' : undefined"
+    :aria-controls="isDictionaryMode && isOpened ? listboxId : undefined"
+    :aria-labelledby="labelId"
+    :aria-describedby="ariaDescribedBy"
+    :aria-required="ariaRequired"
+    :aria-invalid="error || undefined"
+  >
+    <div
+      v-if="$slots['prepend']"
+      class="vc-multivalue__prepend"
+    >
+      <slot name="prepend" />
+    </div>
+
+    <div class="vc-multivalue__control">
+      <div class="vc-multivalue__content">
+        <!-- Selected chips -->
+        <div
+          v-for="(item, i) in modelValue"
+          :key="item?.[optionValue as keyof typeof item] ?? i"
+          class="vc-multivalue__chip-wrapper"
+        >
+          <div
+            v-if="item"
+            class="vc-multivalue__chip"
+          >
+            <!-- Color square for color type -->
+            <div
+              v-if="type === 'color'"
+              class="vc-multivalue__color-square"
+              :style="{ backgroundColor: (item as any).colorCode || '#cccccc' }"
+              @click="emit('openColorPicker', i)"
+            >
+              <input
+                :ref="(el) => emit('setColorPickerRef', el as HTMLInputElement, i)"
+                type="color"
+                class="vc-multivalue__color-picker-hidden"
+                :value="(item as any).colorCode || '#000000'"
+                @change="(e) => emit('colorChange', e, i)"
+              />
+            </div>
+
+            <slot
+              name="selected-item"
+              :value="formatValue(item)"
+              :item="item"
+              :index="i"
+              :remove="() => emit('remove', i)"
+            >
+              <span class="vc-multivalue__chip-label">{{ formatValue(item) }}</span>
+            </slot>
+            <VcIcon
+              v-if="!disabled"
+              class="vc-multivalue__chip-remove"
+              icon="lucide-x"
+              size="xs"
+              tabindex="0"
+              role="button"
+              aria-label="Delete item"
+              @click="emit('remove', i)"
+              @keydown.enter="emit('remove', i)"
+              @keydown.space="emit('remove', i)"
+            />
+          </div>
+        </div>
+
+        <!-- Dictionary mode: Add button -->
+        <template v-if="isDictionaryMode">
+          <button
+            class="vc-multivalue__add-button"
+            :disabled="disabled"
+            tabindex="0"
+            type="button"
+            @click.stop="emit('toggleDropdown')"
+          >
+            <VcIcon
+              icon="lucide-plus"
+              size="xs"
+            />
+            <span>{{ $t("COMPONENTS.MOLECULES.VC_MULTIVALUE.ADD") }}</span>
+          </button>
+        </template>
+
+        <!-- Input mode: text input -->
+        <template v-else>
+          <input
+            :value="inputValue"
+            class="vc-multivalue__input"
+            :placeholder="placeholder"
+            :type="htmlInputType"
+            :disabled="disabled"
+            :aria-invalid="error || undefined"
+            :aria-required="ariaRequired"
+            :aria-labelledby="labelId"
+            :aria-describedby="ariaDescribedBy"
+            tabindex="0"
+            @input="emit('inputChange', ($event.target as HTMLInputElement).value)"
+            @keypress.enter.stop.prevent="emit('inputSubmit', $event)"
+            @blur="onInputBlur"
+            @keydown="emit('keyDown', $event)"
+            @focus="emit('focus')"
+          />
+        </template>
+      </div>
+
+      <!-- Clearable button -->
+      <div
+        v-if="clearable && modelValue && modelValue.length > 0 && !disabled"
+        class="vc-multivalue__clear"
+        role="button"
+        aria-label="Clear all"
+        tabindex="0"
+        @click="emit('clearAll')"
+        @keydown.enter="emit('clearAll')"
+        @keydown.space="emit('clearAll')"
+      >
+        <VcIcon
+          size="xs"
+          icon="lucide-x"
+        />
+      </div>
+
+      <!-- Loading -->
+      <div
+        v-if="loading"
+        class="vc-multivalue__loading"
+      >
+        <VcIcon
+          icon="lucide-loader-2"
+          class="tw-animate-spin"
+          size="m"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="$slots['append']"
+      class="vc-multivalue__append"
+    >
+      <slot name="append" />
+    </div>
+  </div>
+</template>
+
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { ref } from "vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+
+defineProps<{
+  modelValue?: any[];
+  isDictionaryMode: boolean;
+  type: string;
+  htmlInputType: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  loading?: boolean;
+  clearable?: boolean;
+  optionValue: string;
+  inputValue?: string;
+  formatValue: (item: any) => any;
+  isOpened?: boolean;
+  labelId?: string;
+  listboxId?: string;
+  ariaDescribedBy?: string;
+  ariaRequired?: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+  remove: [index: number];
+  toggleDropdown: [];
+  inputSubmit: [event: KeyboardEvent | FocusEvent];
+  inputChange: [value: string];
+  keyDown: [event: KeyboardEvent];
+  focus: [];
+  blur: [];
+  clearAll: [];
+  openColorPicker: [index: number];
+  setColorPickerRef: [el: HTMLInputElement, index: number];
+  colorChange: [event: Event, index: number];
+}>();
+
+defineSlots<{
+  "selected-item": (scope: { value: any; item: any; index: number; remove: () => void }) => any;
+  prepend: (props: any) => any;
+  append: (props: any) => any;
+}>();
+
+const triggerRef = ref<HTMLElement | null>(null);
+
+function onInputBlur(e: FocusEvent) {
+  emit("inputSubmit", e);
+  emit("blur");
+}
+
+defineExpose({
+  triggerRef,
+});
+</script>

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

@@ -98,6 +98,9 @@ export function useMultivalueDropdown(options: UseMultivalueDropdownOptions) {
     isFocused.value = false;
     keyboardNavigation.cleanupKeyboardNavigation();
     options.emit.close();
+    nextTick(() => {
+      dropdownToggleRef.value?.focus();
+    });
   }
 
   function toggleDropdown() {

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

@@ -2,13 +2,13 @@
   <div
     class="vc-multivalue"
     :class="[
-      `vc-multivalue_${type}`,
+      `vc-multivalue--${type}`,
       {
-        'vc-multivalue_opened': isOpened,
-        'vc-multivalue_error': invalid,
-        'vc-multivalue_disabled': resolvedDisabled,
-        'vc-multivalue_focused': isFocused,
-        'vc-multivalue_has-hint-or-error': invalid || hint,
+        'vc-multivalue--opened': isOpened,
+        'vc-multivalue--error': invalid,
+        'vc-multivalue--disabled': resolvedDisabled,
+        'vc-multivalue--focused': isFocused,
+        'vc-multivalue--has-hint-or-error': invalid || hint,
       },
     ]"
   >
@@ -50,6 +50,7 @@
       :label-id="label ? labelId : undefined"
       :listbox-id="listboxId"
       :aria-described-by="ariaDescribedBy"
+      :aria-required="ariaRequired"
       @remove="removeAtIndex"
       @toggle-dropdown="toggleDropdown"
       @input-submit="onInputSubmit"
@@ -121,6 +122,7 @@
           <VcHint
             :id="errorId"
             class="vc-multivalue__error"
+            :error="true"
           >
             {{ errorMessage }}
           </VcHint>
@@ -145,7 +147,8 @@
 <script lang="ts" setup generic="T extends { id?: string; colorCode?: string }">
 import { ref, computed, watchEffect } from "vue";
 import { useFormField } from "@ui/composables/useFormField";
-import { VcLabel, VcHint } from "@ui/components";
+import { VcLabel } from "@ui/components/atoms/vc-label";
+import { VcHint } from "@ui/components/atoms/vc-hint";
 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";
@@ -198,7 +201,8 @@ defineSlots<{
   append: (props: any) => any;
 }>();
 
-const { fieldId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
+const { fieldId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaRequired, ariaDescribedBy } =
+  useFormField(props);
 const listboxId = computed(() => `${fieldId.value}-listbox`);
 
 // --- Sub-component refs ---
@@ -328,11 +332,11 @@ function onSearch(event: Event) {
 }
 
 .vc-multivalue {
-  &_date,
-  &_datetime-local {
+  &--date,
+  &--datetime-local {
     @apply tw-max-w-[220px];
 
-    .vc-app_mobile & {
+    .vc-app--mobile & {
       @apply tw-max-w-full;
     }
   }
@@ -468,21 +472,21 @@ function onSearch(event: Event) {
   }
 
   // Focus state
-  &_focused &__field-wrapper {
+  &--focused &__field-wrapper {
     @apply tw-border-[color:var(--multivalue-border-color-focus)]
       tw-ring-[3px] tw-ring-[color:var(--multivalue-focus-ring-color)]
       tw-outline-none;
   }
 
   // Opened state
-  &_opened &__field-wrapper {
+  &--opened &__field-wrapper {
     @apply tw-border-[color:var(--multivalue-border-color-focus)]
       tw-ring-[3px] tw-ring-[color:var(--multivalue-focus-ring-color)]
       tw-outline-none;
   }
 
   // Error state
-  &_error &__field-wrapper {
+  &--error &__field-wrapper {
     @apply tw-border tw-border-solid tw-border-[color:var(--multivalue-border-color-error)]
       tw-ring-[3px] tw-ring-[color:var(--multivalue-error-ring-color)];
   }
@@ -496,17 +500,17 @@ function onSearch(event: Event) {
   }
 
   // Disabled state
-  &_disabled &__field-wrapper {
+  &--disabled &__field-wrapper {
     @apply tw-opacity-50;
   }
 
-  &_disabled &__field-wrapper,
-  &_disabled &__input {
+  &--disabled &__field-wrapper,
+  &--disabled &__input {
     @apply tw-cursor-not-allowed tw-pointer-events-none;
   }
 
   // Hint/error spacing
-  &_has-hint-or-error {
+  &--has-hint-or-error {
     @apply tw-pb-5;
   }
 
@@ -520,21 +524,6 @@ function onSearch(event: Event) {
     @apply tw-opacity-0 tw-absolute tw-w-0 tw-h-0 tw-pointer-events-none;
   }
 
-  // Slide-up transition
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: all 0.25s ease-out;
-  }
-
-  .slide-up-enter-from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-
-  .slide-up-leave-to {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
 }
 
 // Dropdown enter/leave transition

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

@@ -10,7 +10,7 @@
         v-if="effectiveShowFirstLast"
         type="button"
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
+        :class="{ 'vc-pagination__item--disabled': localCurrentPage === 1 }"
         :disabled="localCurrentPage === 1"
         aria-label="First page"
         @click="setPage(1)"
@@ -25,7 +25,7 @@
       <button
         type="button"
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
+        :class="{ 'vc-pagination__item--disabled': localCurrentPage === 1 }"
         :disabled="localCurrentPage === 1"
         aria-label="Previous page"
         @click="setPage(localCurrentPage - 1)"
@@ -42,8 +42,8 @@
         type="button"
         class="vc-pagination__item"
         :class="{
-          'vc-pagination__item_current': page === localCurrentPage,
-          'vc-pagination__item_hover': page !== localCurrentPage,
+          'vc-pagination__item--current': page === localCurrentPage,
+          'vc-pagination__item--hover': page !== localCurrentPage,
         }"
         :aria-current="page === localCurrentPage ? 'page' : undefined"
         :aria-label="`Page ${page}`"
@@ -56,7 +56,7 @@
       <button
         type="button"
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
+        :class="{ 'vc-pagination__item--disabled': localCurrentPage === pages }"
         :disabled="localCurrentPage === pages"
         aria-label="Next page"
         @click="setPage(localCurrentPage + 1)"
@@ -72,7 +72,7 @@
         v-if="effectiveShowFirstLast"
         type="button"
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
+        :class="{ 'vc-pagination__item--disabled': localCurrentPage === pages }"
         :disabled="localCurrentPage === pages"
         aria-label="Last page"
         @click="setPage(pages)"
@@ -89,7 +89,7 @@
 <script lang="ts" setup>
 import { ref, computed, inject, type Ref, watch } from "vue";
 import { IsMobileKey } from "@framework/injection-keys";
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 
 export interface Props {
   expanded?: boolean;
@@ -221,21 +221,21 @@ const pagesToShow = computed(() => {
       @apply tw-ring-[3px] tw-ring-[color:var(--pagination-focus-ring-color)] tw-outline-none;
     }
 
-    &_current,
-    &_current:hover {
+    &--current,
+    &--current:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-current)]
       tw-text-[color:var(--pagination-item-color-current)]
       tw-cursor-auto;
     }
 
     &:disabled,
-    &_disabled {
+    &--disabled {
       @apply tw-bg-[color:var(--pagination-item-background-color-disabled)]
       tw-text-[color:var(--pagination-item-color-disabled)]
       tw-cursor-not-allowed tw-opacity-50;
     }
 
-    &_hover {
+    &--hover {
       @apply hover:tw-bg-[color:var(--pagination-item-background-color-hover)]
     hover:tw-text-[color:var(--pagination-item-color-hover)] tw-cursor-pointer;
     }