@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/SelectSmart/SelectSmart.vue

@@ -1,24 +1,35 @@
 <template>
-  <div @keydown="onKeyDownSelect" v-click-outside="onClickOutside" class="unnnic-select-smart">
-    <dropdown-skeleton type="manual" :value="active" position="bottom">
-      <text-input
+  <div
+    @keydown="onKeyDownSelect"
+    v-on-click-outside="onClickOutside"
+    class="unnnic-select-smart"
+  >
+    <DropdownSkeleton
+      type="manual"
+      :modelValue="active || null"
+      position="bottom"
+      ref="dropdown-skeleton"
+    >
+      <TextInput
         class="unnnic-select-smart__input"
         ref="selectSmartInput"
-        :value="inputValue"
+        :modelValue="inputValue"
         :placeholder="autocompletePlaceholder || selectedLabel"
         :type="type"
         :size="size"
         :disabled="disabled"
         :readonly="!isAutocompleteAllowed"
-        :icon-left="isAutocompleteAllowed && autocompleteIconLeft ? 'search-1' : ''"
-        :icon-right="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        :icon-right-clickable="!disabled"
+        :iconLeft="
+          isAutocompleteAllowed && autocompleteIconLeft ? 'search-1' : ''
+        "
+        :iconRight="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
+        :iconRightClickable="!disabled"
         @icon-right-click="handleClickInput"
-        @click="handleClickInput"
-        @input="searchValue = $event"
+        @click.stop="handleClickInput"
+        @update:modelValue="searchValue = $event"
       />
 
-      <template v-slot:inside="props">
+      <template #inside="props">
         <div
           v-if="active"
           :style="{ width: props.width }"
@@ -29,12 +40,14 @@
           }"
         >
           <div :style="{ overflow: 'auto' }">
-            <select-smart-multiple-header
+            <SelectSmartMultipleHeader
               v-if="multiple"
-              :selectedOptions="selectedOptions"
+              :selectedOptions="modelValue"
               :withoutSelectsMessage="multipleWithoutSelectsMessage"
               @clear-selected-options="clearSelectedOptions"
               @unselect-option="unselectOption"
+              :locale="locale"
+              :translations="translations"
             />
             <div
               ref="selectSmartOptionsScrollArea"
@@ -46,14 +59,16 @@
                 },
               ]"
             >
-              <select-smart-option
+              <SelectSmartOption
                 v-for="(option, index) in filterOptions(options)"
                 :key="option.value"
                 :label="option.label"
                 :description="option.description"
                 :tabindex="index"
                 :size="size"
-                :active="option.value === value || optionIsSelected(option)"
+                :active="
+                  option.value === modelValue || optionIsSelected(option)
+                "
                 :focused="focusedOption && focusedOption.value === option.value"
                 :allowCheckbox="!!multiple"
                 @click="handleSelect(option)"
@@ -62,25 +77,28 @@
                 v-if="filterOptions(options).length === 0"
                 class="unnnic-select-smart__options--no-results"
               >
-                {{ $t('select_smart.without_results') }}
+                {{ i18n('without_results') }}
               </p>
             </div>
           </div>
         </div>
       </template>
-    </dropdown-skeleton>
+    </DropdownSkeleton>
   </div>
 </template>
 
 <script>
-import vClickOutside from 'v-click-outside';
+import { vOnClickOutside } from '@vueuse/components';
+
 import SelectSmartOption from './SelectSmartOption.vue';
 import SelectSmartMultipleHeader from './SelectSmartMultipleHeader.vue';
 import TextInput from '../Input/TextInput.vue';
 import DropdownSkeleton from '../Dropdown/DropdownSkeleton.vue';
+import UnnnicI18n from '../../mixins/i18n';
 
 export default {
   name: 'UnnnicSelectSmart',
+  mixins: [UnnnicI18n],
   components: {
     TextInput,
     SelectSmartOption,
@@ -102,8 +120,9 @@ export default {
         },
       ],
     },
-    value: {
-      type: null,
+    modelValue: {
+      type: Array,
+      default: () => [],
     },
     size: {
       type: String,
@@ -118,7 +137,7 @@ export default {
     },
     disabled: {
       type: Boolean,
-      default: false,
+      default: null,
     },
     orderedByIndex: {
       type: Boolean,
@@ -155,8 +174,15 @@ export default {
       searchValue: '',
       isAutocompleteAllowed: false,
 
-      selectedOptions: [],
       multipleSelectedsTags: 2,
+
+      defaultTranslations: {
+        without_results: {
+          'pt-br': 'Nenhum resultado encontrado',
+          en: 'No results found',
+          es: 'Ningún resultado encontrado',
+        },
+      },
     };
   },
 
@@ -168,13 +194,23 @@ export default {
       this.isAutocompleteAllowed = true;
     }
 
-    if (this.options[0].value) {
-      this.selectOption(this.options[0]);
+    if (this.modelValue?.[0] && this.modelValue?.[0].value) {
+      this.modelValue.forEach((option) => this.selectOption(option));
+
+      if (this.isAutocompleteAllowed) {
+        this.$nextTick(() => {
+          this.searchValue = this.selectedLabel;
+        });
+      }
+    } else if (this.options?.[0] && this.options?.[0].value) {
+      this.selectOption(this.options?.[0]);
     }
   },
 
   watch: {
     active(newValue) {
+      this.$refs['dropdown-skeleton'].calculatePosition();
+
       this.$nextTick(() => {
         if (newValue && !this.multiple) {
           const activeOptionIndex = this.getOptionIndex('active');
@@ -186,17 +222,20 @@ export default {
       });
     },
 
-    searchValue() {
+    searchValue(newSearchValue, oldSearchValue) {
       this.focusedOption = null;
 
-      if (!this.active) this.active = true;
+      if (!this.active && oldSearchValue) this.active = true;
     },
 
-    selectedOptions(newSelectedOptions) {
-      this.$emit('onChange', newSelectedOptions);
-      this.$emit('input', newSelectedOptions);
+    modelValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('onChange', newValue);
+        this.$emit('update:modelValue', newValue);
 
-      this.onSelectOption(newSelectedOptions.at(-1));
+        this.onSelectOption(newValue.at(-1));
+      },
     },
 
     autocomplete(newAutocomplete) {
@@ -214,13 +253,14 @@ export default {
       }
 
       const selected = this.options.find((option) => {
-        const isValueMatch = option.value === this.value;
+        const isValueMatch = option.value === this.modelValue;
 
         if (this.isAutocompleteAllowed) {
           return isValueMatch && option.value !== '';
         }
 
-        const isEmptyOption = option.value === '' && this.value == null;
+        const isEmptyOption =
+          option.value === '' && this.modelValue.length === 0;
         return isEmptyOption || isValueMatch;
       });
 
@@ -229,16 +269,18 @@ export default {
       }
 
       if (this.multiple) {
-        const labels = this.selectedOptions.map((item) => item.label);
+        const labels = this.modelValue.map((item) => item.label);
         return labels.join(', ');
       }
 
-      const label = this.selectedOptions.at(-1)?.label || '';
+      const label = this.modelValue.at(-1)?.label || '';
       return label;
     },
 
     hasDescriptionOptions() {
-      return this.options.some((item) => typeof item.description !== 'undefined');
+      return this.options.some(
+        (item) => typeof item.description !== 'undefined',
+      );
     },
 
     autocompletePlaceholder() {
@@ -253,15 +295,13 @@ export default {
     },
 
     inputValue() {
-      const {
-        isAutocompleteAllowed, searchValue, multiple, selectedOptions,
-      } = this;
+      const { isAutocompleteAllowed, searchValue, multiple, modelValue } = this;
 
       if (isAutocompleteAllowed || multiple) {
         return searchValue;
       }
-      if (!multiple && selectedOptions.length !== 0) {
-        return selectedOptions[0].label;
+      if (!multiple && modelValue.length !== 0) {
+        return modelValue?.[0].label;
       }
 
       return '';
@@ -269,16 +309,18 @@ export default {
   },
 
   directives: {
-    clickOutside: vClickOutside.directive,
+    onClickOutside: vOnClickOutside,
   },
 
   methods: {
     optionIsSelected(option) {
-      return this.selectedOptions.some((selectedOption) => selectedOption.value === option.value);
+      return this.modelValue.some(
+        (selectedOption) => selectedOption.value === option.value,
+      );
     },
 
     clearSelectedOptions() {
-      this.selectedOptions = [];
+      this.$emit('update:modelValue', []);
     },
 
     handleSelect(option) {
@@ -312,21 +354,27 @@ export default {
         .replace(/[\u0300-\u036f]/g, '')
         .split(' ');
 
-      const normalizeLabel = (label) => label
-        .toString()
-        .toLowerCase()
-        .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '');
+      const normalizeLabel = (label) =>
+        label
+          .toString()
+          .toLowerCase()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '');
 
       const getNumber = (str) => parseInt(str.match(/\d+/)?.[0], 10) || 0;
 
-      const filteredOptions = options.filter(({ value, label }, index, self) => {
-        const labelWithoutAccents = normalizeLabel(label);
-        const isValueUnique = self.findIndex((option) => option.value === value) === index;
-        const matchesSearchTerms = searchTerms.every((term) => labelWithoutAccents.includes(term));
+      const filteredOptions = options.filter(
+        ({ value, label }, index, self) => {
+          const labelWithoutAccents = normalizeLabel(label);
+          const isValueUnique =
+            self.findIndex((option) => option.value === value) === index;
+          const matchesSearchTerms = searchTerms.every((term) =>
+            labelWithoutAccents.includes(term),
+          );
 
-        return isValueUnique && matchesSearchTerms && value;
-      });
+          return isValueUnique && matchesSearchTerms && value;
+        },
+      );
 
       if (this.orderedByIndex) {
         return filteredOptions;
@@ -359,10 +407,11 @@ export default {
       const options = this.filterOptions(this.options);
       let valueByType = '';
       if (type === 'active') {
-        valueByType = this.value?.[0]?.value;
+        valueByType = this.modelValue?.[0]?.value;
       }
       if (type === 'focused') {
-        valueByType = this.focusedOption?.value || this.selectedOptions.at(-1)?.value;
+        valueByType =
+          this.focusedOption?.value || this.modelValue.at(-1)?.value;
       }
       return options.findIndex((option) => option.value === valueByType);
     },
@@ -370,7 +419,11 @@ export default {
     scrollToOption(optionIndex, scrollBlock = 'nearest') {
       const elementScroll = this.$refs.selectSmartOptionsScrollArea;
 
-      if (elementScroll && optionIndex >= 0 && optionIndex < elementScroll.childNodes.length) {
+      if (
+        elementScroll &&
+        optionIndex >= 0 &&
+        optionIndex < elementScroll.childNodes.length
+      ) {
         const optionElement = elementScroll.childNodes[optionIndex];
 
         if (optionElement instanceof HTMLElement) {
@@ -380,20 +433,24 @@ export default {
     },
 
     selectOption(option) {
-      const selectedOption = option.value === null || option.value.length === 0 ? null : option;
+      const selectedOption =
+        option.value === null || option.value.length === 0 ? null : option;
 
-      this.selectedOptions = this.multiple
-        ? [...this.selectedOptions, selectedOption]
-        : [selectedOption];
+      this.$emit(
+        'update:modelValue',
+        this.multiple ? [...this.modelValue, selectedOption] : [selectedOption],
+      );
     },
 
     unselectOption(option) {
-      const indexToRemove = this.selectedOptions.findIndex(
-        (selectedOption) => selectedOption === option,
+      const indexToRemove = this.modelValue.findIndex(
+        (selectedOption) => selectedOption.value === option.value,
       );
 
       if (indexToRemove !== -1) {
-        this.selectedOptions.splice(indexToRemove, 1);
+        const newModelValue = this.modelValue;
+        newModelValue.splice(indexToRemove, 1);
+        this.$emit('update:modelValue', newModelValue);
       }
 
       if (this.multiple) {
@@ -451,9 +508,10 @@ export default {
               this.active = true;
               await this.$nextTick();
             }
-            newIndex = key === 'ArrowUp'
-              ? Math.max(focusedOptionIndex - 1, 0)
-              : Math.min(focusedOptionIndex + 1, options.length - 1);
+            newIndex =
+              key === 'ArrowUp'
+                ? Math.max(focusedOptionIndex - 1, 0)
+                : Math.min(focusedOptionIndex + 1, options.length - 1);
             if (!this.active) {
               this.handleSelect(options[newIndex]);
             }
@@ -464,7 +522,8 @@ export default {
           this.scrollToOption(newIndex);
         }
 
-        const newOption = options[newIndex === undefined ? focusedOptionIndex : newIndex];
+        const newOption =
+          options[newIndex === undefined ? focusedOptionIndex : newIndex];
         this.focusedOption = newOption;
       }
     },
@@ -562,17 +621,20 @@ export default {
 
   .unnnic-select-smart__input input {
     // entire class name to have higher priority in styles
+
+    color: $unnnic-color-neutral-dark;
+
     &:read-only {
       cursor: pointer;
 
       &::placeholder {
-        color: $unnnic-color-neutral-dark;
+        color: $unnnic-color-neutral-cloudy;
       }
     }
 
     &:not(:read-only :focus) {
       &::placeholder {
-        color: $unnnic-color-neutral-dark;
+        color: $unnnic-color-neutral-cloudy;
       }
     }
 
@@ -585,7 +647,8 @@ export default {
     }
 
     &:disabled {
-      border: 1px solid $unnnic-color-neutral-cleanest;
+      box-shadow: inset 0 0 0 $unnnic-border-width-thinner
+        $unnnic-color-neutral-cleanest;
 
       cursor: not-allowed;
 

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -5,7 +5,7 @@
       class="unnnic-select-smart__options__multiple__selecteds__container"
     >
       <div class="unnnic-select-smart__options__multiple__selecteds">
-        <tag
+        <Tag
           v-for="option in firstMultipleSelecteds"
           class="unnnic-select-smart__options__multiple__selecteds__option"
           :key="option.value"
@@ -20,7 +20,7 @@
           +{{ selectedOptions.length - multipleSelectedsTags }}
         </p>
       </div>
-      <icon-svg
+      <IconSvg
         class="unnnic-select-smart__options__multiple__selecteds__clear"
         icon="close-1"
         size="xs"
@@ -28,8 +28,11 @@
         @click="clearSelectedOptions"
       />
     </div>
-    <p v-if="!selectedOptions[0]" class="unnnic-select-smart__options__multiple--without-multiples">
-      {{ withoutSelectsMessage || $t('select_smart.without_multiple_selected') }}
+    <p
+      v-if="!selectedOptions[0]"
+      class="unnnic-select-smart__options__multiple--without-multiples"
+    >
+      {{ withoutSelectsMessage || i18n('without_multiple_selected') }}
     </p>
   </div>
 </template>
@@ -37,9 +40,11 @@
 <script>
 import Tag from '../Tag/Tag.vue';
 import IconSvg from '../Icon.vue';
+import UnnnicI18n from '../../mixins/i18n';
 
 export default {
   name: 'UnnnicSelectSmartMultipleHeader',
+  mixins: [UnnnicI18n],
   components: {
     Tag,
     IconSvg,
@@ -57,6 +62,14 @@ export default {
   data() {
     return {
       multipleSelectedsTags: 2,
+
+      defaultTranslations: {
+        without_multiple_selected: {
+          'pt-br': 'Nenhuma opção selecionada',
+          en: 'No option selected',
+          es: 'Ninguna opción seleccionada',
+        },
+      },
     };
   },
   computed: {
@@ -90,6 +103,7 @@ export default {
 
   &__selecteds {
     display: flex;
+    align-items: center;
 
     color: $unnnic-color-neutral-dark;
 

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    @click="$emit('click')"
     :class="{
       'unnnic-select-smart-option': true,
       'unnnic-select-smart-option--focused': focused,
@@ -11,21 +10,29 @@
     }"
     :title="label"
   >
-    <unnnic-checkbox v-if="allowCheckbox" ref="checkbox" :value="active" :size="size" />
+    <UnnnicCheckbox
+      v-if="allowCheckbox"
+      ref="checkbox"
+      :modelValue="active"
+      :size="size"
+    />
     <div>
       <span
-      :class="['unnnic-select-smart-option__label', `unnnic-select-smart-option__label--${size}`]"
-      >{{ label }}</span
-    >
-    <p
-      v-if="description"
-      :class="[
-        'unnnic-select-smart-option__description',
-        `unnnic-select-smart-option__description--${size}`,
-      ]"
-    >
-      {{ description }}
-    </p>
+        :class="[
+          'unnnic-select-smart-option__label',
+          `unnnic-select-smart-option__label--${size}`,
+        ]"
+        >{{ label }}</span
+      >
+      <p
+        v-if="description"
+        :class="[
+          'unnnic-select-smart-option__description',
+          `unnnic-select-smart-option__description--${size}`,
+        ]"
+      >
+        {{ description }}
+      </p>
     </div>
   </div>
 </template>
@@ -61,7 +68,7 @@ export default {
     },
     active: {
       type: Boolean,
-      default: false,
+      default: null,
     },
     allowCheckbox: {
       type: Boolean,