@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

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

@@ -7,6 +7,7 @@
       'vc-select_disabled': disabled,
       'vc-select_has-hint-or-error': error || hint,
       'vc-select_no-outline': !outline,
+      'vc-select_focused': isFocused,
     }"
   >
     <!-- Select label -->
@@ -16,6 +17,7 @@
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
+      :error="error"
     >
       <span>{{ label }}</span>
       <template
@@ -69,7 +71,12 @@
                       <div
                         data-test-id="dropdown-toggle"
                         class="vc-select__input"
+                        tabindex="0"
                         @click.stop="toggleDropdown"
+                        @keydown.enter.stop="toggleDropdown"
+                        @keydown.space.stop="toggleDropdown"
+                        @focus="isFocused = true"
+                        @blur="isFocused = false"
                       >
                         <div
                           v-if="!hasValue"
@@ -86,28 +93,28 @@
                               class="vc-select__selected-item"
                             >
                               <template v-if="multiple">
-                                <div class="vc-select__multiple-item">
-                                  <template v-if="loading">
-                                    <span class="vc-select__loading">{{
-                                      t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
-                                    }}</span>
-                                  </template>
-                                  <template v-else>
-                                    <slot
-                                      name="selected-item"
-                                      v-bind="item"
-                                    >
+                                <slot
+                                  name="selected-item"
+                                  v-bind="item"
+                                >
+                                  <div class="vc-select__multiple-item">
+                                    <template v-if="loading">
+                                      <span class="vc-select__loading">{{
+                                        t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
+                                      }}</span>
+                                    </template>
+                                    <template v-else>
                                       <span>{{ getOptionLabel(item.opt) }}</span>
-                                    </slot>
-                                  </template>
-                                  <VcIcon
-                                    v-if="!disabled"
-                                    class="vc-select__icon-remove"
-                                    icon="fas fa-times"
-                                    size="s"
-                                    @click.stop="removeAtIndex(item.index)"
-                                  ></VcIcon>
-                                </div>
+                                    </template>
+                                    <VcIcon
+                                      v-if="!disabled"
+                                      class="vc-select__icon-remove"
+                                      icon="material-close"
+                                      size="s"
+                                      @click.stop="removeAtIndex(item.index)"
+                                    ></VcIcon>
+                                  </div>
+                                </slot>
                               </template>
                               <template v-else-if="!multiple">
                                 <template v-if="loading">
@@ -141,11 +148,14 @@
                       <div
                         v-if="clearable && hasValue && !disabled"
                         class="vc-select__clear"
+                        tabindex="0"
                         @click="onReset"
+                        @keydown.enter="onReset"
+                        @keydown.space="onReset"
                       >
                         <VcIcon
                           size="s"
-                          icon="fas fa-times"
+                          icon="material-close"
                         ></VcIcon>
                       </div>
                     </div>
@@ -161,7 +171,8 @@
                       class="vc-select__loading-icon"
                     >
                       <VcIcon
-                        icon="fas fa-circle-notch tw-animate-spin"
+                        icon="lucide-loader"
+                        class="tw-animate-spin"
                         size="m"
                       ></VcIcon>
                     </div>
@@ -169,12 +180,15 @@
                     <div
                       v-if="!disabled"
                       class="vc-select__chevron-container"
+                      tabindex="0"
                       @click.stop="toggleDropdown"
+                      @keydown.enter.stop="toggleDropdown"
+                      @keydown.space.stop="toggleDropdown"
                     >
                       <div class="vc-select__chevron">
                         <VcIcon
                           size="s"
-                          icon="fas fa-chevron-down"
+                          icon="material-keyboard_arrow_down"
                         ></VcIcon>
                       </div>
                     </div>
@@ -227,12 +241,14 @@
           v-on-click-outside="[toggleDropdown, { ignore: [dropdownToggleRef] }]"
           data-test-id="dropdown"
           class="vc-select__dropdown"
+          role="menu"
           :style="dropdownStyle"
         >
           <input
             v-if="searchable"
             ref="searchRef"
             class="vc-select__search-input"
+            tabindex="0"
             @input="onInput"
           />
 
@@ -256,7 +272,11 @@
               class="vc-select__option"
               data-test-id="option"
               :class="{ 'vc-select__option--selected': item.selected }"
+              tabindex="0"
+              :data-index="i"
               @click="item.toggleOption(item.opt)"
+              @keydown.enter="item.toggleOption(item.opt)"
+              @keydown.space="item.toggleOption(item.opt)"
             >
               <slot
                 name="option"
@@ -293,6 +313,7 @@ import {
 } from "@floating-ui/vue";
 import { VcLabel, VcContainer, VcHint, VcIcon } from "./../../";
 import { useI18n } from "vue-i18n";
+import { useKeyboardNavigation } from "../../../../core/composables/useKeyboardNavigation";
 
 export type OptionProp<T> = ((option: T) => string) | string | undefined;
 type MaybeArray<T> = T | T[];
@@ -497,12 +518,6 @@ const props = withDefaults(
     size?: "default" | "small";
     outline?: boolean;
     placement?: Placement;
-    offset?:
-      | {
-          crossAxis?: number;
-          mainAxis?: number;
-        }
-      | number;
   }>(),
   {
     optionValue: "id",
@@ -516,7 +531,6 @@ const props = withDefaults(
     options: (): T[] => [],
     outline: true,
     placement: "bottom",
-    offset: -2,
   },
 );
 
@@ -548,6 +562,7 @@ const dropdownRef = ref();
 const root = ref();
 const el = ref();
 const listLoading = ref(false);
+const isFocused = ref(false);
 
 const filterString = ref();
 
@@ -580,7 +595,9 @@ const popper = useFloating(dropdownToggleRef, dropdownRef, {
     flip({ fallbackPlacements: ["top", "bottom"] }),
     shift({ mainAxis: false }),
     sameWidthChangeBorders(),
-    uiOffset(props.offset),
+    uiOffset({
+      mainAxis: 3,
+    }),
   ],
 }) as FloatingInstanceType;
 
@@ -823,6 +840,7 @@ function isOptionSelected(opt: Option) {
 function closeDropdown() {
   onDropdownClose();
   isOpened.value = false;
+  isFocused.value = false;
   emit("close");
 }
 
@@ -839,17 +857,25 @@ const onDropdownClose = async () => {
   filterString.value = undefined;
 };
 
-async function toggleDropdown() {
-  if (!props.disabled) {
-    if (isOpened.value) {
-      closeDropdown();
-    } else {
-      isOpened.value = true;
+function toggleDropdown() {
+  if (props.disabled) return;
 
-      nextTick(() => {
-        searchRef?.value?.focus();
-      });
-    }
+  isOpened.value = !isOpened.value;
+
+  if (isOpened.value) {
+    nextTick(() => {
+      if (dropdownRef.value) {
+        keyboardNavigation.initKeyboardNavigation(dropdownRef.value);
+
+        if (props.searchable && searchRef.value) {
+          searchRef.value.focus();
+        } else {
+          keyboardNavigation.focusFirstElement();
+        }
+      }
+    });
+  } else {
+    keyboardNavigation.cleanupKeyboardNavigation();
   }
 }
 
@@ -860,14 +886,17 @@ function sameWidthChangeBorders() {
       let borderTop;
       let borderBottom;
       let borderRadius;
+      let boxShadow;
       if (placement === "top") {
         borderTop = "1px solid var(--select-border-color)";
         borderBottom = "1px solid var(--select-background-color)";
         borderRadius = "var(--select-border-radius) var(--select-border-radius) 0 0";
+        boxShadow = "3px -9px 15px -3px rgba(0, 0, 0, 0.08), 0px 0px 6px -2px rgba(0, 0, 0, 0.1)";
       } else {
         borderBottom = "1px solid var(--select-border-color)";
         borderTop = "1px solid var(--select-background-color)";
         borderRadius = "0 0 var(--select-border-radius) var(--select-border-radius)";
+        boxShadow = "3px 9px 15px -3px rgba(0, 0, 0, 0.08), 0px 0px 6px -2px rgba(0, 0, 0, 0.1)";
       }
 
       const width = `${rects.reference.width}px`;
@@ -881,6 +910,7 @@ function sameWidthChangeBorders() {
               borderBottom,
               borderRadius,
               width,
+              boxShadow,
             }
           : {
               border: "1px solid var(--select-border-color)",
@@ -981,30 +1011,55 @@ function onReset() {
   }
   emit("update:modelValue", null);
 }
+
+const keyboardNavigation = useKeyboardNavigation({
+  onEnter: (element: HTMLElement) => {
+    const index = parseInt(element.getAttribute("data-index") || "0", 10);
+    if (optionScope.value && optionScope.value[index]) {
+      optionScope.value[index].toggleOption(optionScope.value[index].opt);
+    }
+  },
+  onEscape: () => {
+    isOpened.value = false;
+  },
+});
 </script>
 
 <style lang="scss">
 :root {
-  --select-height: 38px;
+  --select-height: 36px;
   --select-height-small: 28px;
-  --select-border-radius: 3px;
-  --select-border-color: var(--secondary-200);
-  --select-border-color-error: var(--base-error-color, var(--danger-500));
+  --select-border-radius: 4px;
+  --select-border-color: var(--neutrals-300);
+  --select-text-color: var(--neutrals-800);
+  --select-padding: 10px;
+
   --select-background-color: var(--additional-50);
-  --select-background-color-disabled: var(--neutrals-50);
+
   --select-placeholder-color: var(--neutrals-400);
   --select-chevron-color: var(--primary-500);
   --select-chevron-color-hover: var(--primary-600);
   --select-clear-color: var(--primary-500);
   --select-clear-color-hover: var(--primary-600);
-  --select-disabled-field-color: var(--neutrals-700);
 
   --select-loading-color: var(--info-500);
   --select-option-background-color-hover: var(--accent-100);
   --select-option-background-color-selected: var(--accent-200);
+  --select-multiple-options-background-color: var(--additional-50);
+  --select-multiple-options-border-color: var(--secondary-200);
   --select-border-color-input: var(--secondary-200);
 
   --select-search-background-color: var(--additional-50);
+
+  // Focus
+  --select-border-color-focus: var(--primary-100);
+
+  // Disabled
+  --select-background-color-disabled: var(--neutrals-200);
+  --select-disabled-text-color: var(--neutrals-500);
+
+  // Error
+  --select-border-color-error: var(--danger-500);
 }
 
 .vc-select {
@@ -1028,7 +1083,7 @@ function onReset() {
   }
 
   &__field-container {
-    @apply tw-flex tw-flex-nowrap tw-items-start tw-relative;
+    @apply tw-flex tw-flex-nowrap tw-items-start tw-relative tw-rounded-[var(--select-border-radius)];
   }
 
   &__dropdown-toggle {
@@ -1045,7 +1100,7 @@ function onReset() {
   }
 
   &__field-wrapper {
-    @apply tw-relative tw-flex tw-flex-auto tw-overflow-x-clip tw-truncate;
+    @apply tw-relative tw-flex tw-flex-auto tw-overflow-x-clip tw-truncate tw-rounded-[var(--select-border-radius)];
 
     &--default {
       @apply tw-min-h-[var(--select-height)];
@@ -1057,7 +1112,7 @@ function onReset() {
   }
 
   &__field {
-    @apply tw-truncate tw-relative tw-box-border tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-rounded-sm tw-bg-[color:var(--select-background-color)] tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-items-stretch;
+    @apply tw-truncate tw-relative tw-box-border tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-rounded-[var(--select-border-radius)] tw-bg-[color:var(--select-background-color)] tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-items-stretch tw-text-[color:var(--select-text-color)];
   }
 
   &__field-inner {
@@ -1065,7 +1120,7 @@ function onReset() {
   }
 
   &__field-content {
-    @apply tw-flex tw-flex-nowrap tw-flex-auto tw-h-full tw-px-3;
+    @apply tw-flex tw-flex-nowrap tw-flex-auto tw-h-full tw-px-[10px];
   }
 
   &__prepend-inner,
@@ -1107,7 +1162,7 @@ function onReset() {
   }
 
   &__multiple-item {
-    @apply tw-bg-[color:var(--select-option-background-color-selected)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-rounded-sm tw-flex tw-items-center tw-h-7 tw-box-border tw-px-2;
+    @apply tw-bg-[color:var(--select-multiple-options-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-multiple-options-border-color)] tw-rounded-[2px] tw-flex tw-items-center tw-h-7 tw-box-border tw-px-2;
   }
 
   &__loading {
@@ -1147,11 +1202,11 @@ function onReset() {
   }
 
   &__dropdown {
-    @apply tw-flex tw-flex-col tw-box-border tw-max-h-72 tw-h-auto tw-z-[101] tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-sm tw-p-2;
+    @apply tw-flex tw-flex-col tw-box-border tw-max-h-72 tw-h-auto tw-z-[101] tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-p-2;
   }
 
   &__search-input {
-    @apply tw-w-full tw-box-border tw-border tw-border-solid tw-border-[color:var(--select-border-color-input)] tw-bg-[color:var(--select-search-background-color)] tw-rounded-md tw-h-8 tw-leading-8 tw-outline-none tw-mb-3 tw-px-2;
+    @apply tw-w-full tw-box-border tw-border tw-border-solid tw-border-[color:var(--select-border-color-input)] tw-bg-transparent tw-rounded-[var(--select-border-radius)] tw-h-8 tw-leading-8 tw-outline-none tw-mb-3 tw-px-2;
   }
 
   &__no-options {
@@ -1163,10 +1218,10 @@ function onReset() {
   }
 
   &__option {
-    @apply tw-flex tw-items-center tw-min-h-9 tw-my-1 tw-box-border tw-px-2 tw-rounded-sm tw-cursor-pointer hover:tw-bg-[color:var(--select-option-background-color-hover)] tw-text-sm;
+    @apply tw-flex tw-items-center tw-min-h-9 tw-my-1 tw-box-border tw-px-2 tw-rounded-[var(--select-border-radius)] tw-cursor-pointer hover:tw-bg-[color:var(--select-option-background-color-hover)] tw-text-sm;
 
     &--selected {
-      @apply tw-bg-[color:var(--select-option-background-color-selected)];
+      @apply tw-bg-[color:var(--select-option-background-color-selected)] hover:tw-bg-[color:var(--select-option-background-color-selected)];
     }
   }
 
@@ -1175,7 +1230,11 @@ function onReset() {
   }
 
   &.vc-select_opened &__field {
-    @apply tw-rounded-t-sm tw-rounded-b-none;
+    @apply tw-rounded-[var(--select-border-radius)];
+  }
+
+  &.vc-select_opened &__field-wrapper {
+    @apply tw-outline tw-outline-2 tw-outline-[color:var(--select-border-color-focus)];
   }
 
   &.vc-select_error &__field-wrapper {
@@ -1185,7 +1244,11 @@ function onReset() {
   &.vc-select_disabled &__field-wrapper,
   &.vc-select_disabled &__field,
   &.vc-select_disabled &__input {
-    @apply tw-bg-[color:var(--select-background-color-disabled)] tw-text-[color:var(--select-disabled-field-color)] tw-cursor-auto;
+    @apply tw-bg-[color:var(--select-background-color-disabled)] tw-text-[color:var(--select-disabled-text-color)] tw-cursor-auto;
+  }
+
+  &_focused .vc-select__field {
+    @apply tw-outline-2 tw-outline tw-outline-[color:var(--select-border-color-focus)] tw-outline-offset-[0px];
   }
 
   &.vc-select_has-hint-or-error {