@weni/unnnic-system 3.9.1-alpha.5 → 3.9.1-alpha.6

package/src/components/Select/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div
+    class="unnnic-select"
+    @keydown="handleKeyDown"
+  >
+    <UnnnicPopover
+      v-model="openPopover"
+      :popoverBalloonProps="{ maxHeight: calculatedMaxHeight }"
+    >
+      <template #trigger>
+        <UnnnicInput
+          :modelValue="inputValue"
+          class="unnnic-select__input"
+          readonly
+          :forceActiveStatus="openPopover"
+          :size="props.size"
+          :placeholder="props.placeholder"
+          :label="props.label"
+          :errors="props.errors"
+          :message="props.message"
+          :iconRight="openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+          :disabled="props.disabled"
+          showClear
+          @clear="emit('update:modelValue', '')"
+        />
+      </template>
+      <template #content>
+        <div class="unnnic-select__content">
+          <UnnnicInput
+            v-if="props.enableSearch"
+            class="unnnic-select__input-search"
+            :modelValue="props.search"
+            :placeholder="$t('search')"
+            iconLeft="search"
+            @update:model-value="handleSearch"
+          />
+          <UnnnicSelectOption
+            v-for="(option, index) in filteredOptions"
+            :key="option[props.itemValue]"
+            :data-option-index="index"
+            :label="option[props.itemLabel]"
+            :active="
+              option[props.itemValue] === selectedItem?.[props.itemValue]
+            "
+            :focused="focusedOptionIndex === index"
+            :disabled="option.disabled"
+            @click="handleSelectOption(option)"
+          />
+        </div>
+      </template>
+    </UnnnicPopover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue';
+import UnnnicInput from '../Input/Input.vue';
+import UnnnicPopover from '../Popover/index.vue';
+import UnnnicSelectOption from './SelectOption.vue';
+import UnnnicI18n from '../../mixins/i18n';
+
+defineOptions({
+  name: 'UnnnicSelect',
+  mixins: [UnnnicI18n],
+});
+
+interface SelectProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options: Array<{ [key: string]: any }>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modelValue: any;
+  returnObject?: boolean;
+  itemLabel?: string;
+  itemValue?: string;
+  placeholder?: string;
+  label?: string;
+  type?: 'normal' | 'error';
+  errors?: string | Array<string>;
+  message?: string;
+  size?: 'sm' | 'md';
+  optionsLines?: number;
+  enableSearch?: boolean;
+  search?: string;
+  locale?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  size: 'md',
+  type: 'normal',
+  placeholder: '',
+  optionsLines: 5,
+  returnObject: false,
+  itemLabel: 'label',
+  itemValue: 'value',
+  locale: 'en',
+  enableSearch: false,
+  disabled: false,
+  label: '',
+  errors: '',
+  message: '',
+  search: '',
+});
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  'update:modelValue': [value: any];
+  'update:search': [value: string];
+}>();
+
+const openPopover = ref(false);
+
+watch(openPopover, () => {
+  if (!openPopover.value) {
+    handleSearch('');
+  } else {
+    focusedOptionIndex.value = -1;
+  }
+
+  if (openPopover.value && props.modelValue) {
+    const selectedOptionIndex = props.options.findIndex(
+      (option) =>
+        option[props.itemValue] === selectedItem.value?.[props.itemValue],
+    );
+    scrollToOption(selectedOptionIndex, 'instant', 'center');
+  }
+});
+
+const handleKeyDown = (event) => {
+  const { key } = event;
+  const validKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
+  if (validKeys.includes(key)) {
+    event.preventDefault();
+    if (key === 'ArrowUp') {
+      if (focusedOptionIndex.value === 0) return;
+      focusedOptionIndex.value--;
+      scrollToOption(focusedOptionIndex.value);
+    }
+    if (key === 'ArrowDown') {
+      if (focusedOptionIndex.value === filteredOptions.value.length - 1) return;
+      focusedOptionIndex.value++;
+      scrollToOption(focusedOptionIndex.value);
+    }
+    if (key === 'Enter') {
+      handleSelectOption(filteredOptions.value[focusedOptionIndex.value]);
+    }
+  }
+};
+
+const focusedOptionIndex = ref<number>(-1);
+
+const scrollToOption = (
+  index: number,
+  behavior: 'smooth' | 'instant' = 'smooth',
+  block: 'center' | 'start' | 'end' | 'nearest' = 'center',
+) => {
+  nextTick(() => {
+    const option = document.querySelector(`[data-option-index="${index}"]`);
+    if (option) {
+      option.scrollIntoView({ behavior, block });
+    }
+  });
+};
+
+const calculatedMaxHeight = computed(() => {
+  if (!props.options || props.options.length === 0) return 'unset';
+  const popoverPadding = 32;
+  const popoverGap = 4;
+  // 37 = 21px (height) + 16px (padding)
+  const fieldsHeight = 37 * props.optionsLines;
+  const size =
+    fieldsHeight + popoverPadding + (popoverGap * props.optionsLines - 2);
+  return `${props.enableSearch ? size + 54 : size}px`;
+});
+
+const selectedItem = computed(() => {
+  if (props.returnObject) return props.modelValue;
+
+  return props.options.find(
+    (option) => option[props.itemValue] === props.modelValue,
+  );
+});
+
+const inputValue = computed(() => {
+  return selectedItem.value?.[props.itemLabel];
+});
+
+const handleSelectOption = (option) => {
+  if (
+    option[props.itemValue] === selectedItem.value?.[props.itemValue] ||
+    option.disabled
+  )
+    return;
+
+  emit(
+    'update:modelValue',
+    props.returnObject ? option : option[props.itemValue],
+  );
+  openPopover.value = false;
+};
+
+const handleSearch = (value: string) => {
+  emit('update:search', value);
+};
+
+const filteredOptions = computed(() => {
+  if (!props.enableSearch || !props.search) return props.options;
+
+  return props.options.filter(
+    (option) =>
+      option[props.itemLabel]
+        .toLowerCase()
+        .includes(props.search?.toLowerCase()) ||
+      option[props.itemValue]
+        .toLowerCase()
+        .includes(props.search?.toLowerCase()),
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+:deep(.unnnic-select__input) {
+  cursor: pointer;
+}
+
+:deep(.unnnic-select__input-search) {
+  > .icon-left {
+    color: $unnnic-color-fg-base;
+  }
+}
+
+:deep(.unnnic-select__input) {
+  > .icon-right {
+    color: $unnnic-color-fg-base;
+  }
+}
+
+.unnnic-select {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    gap: $unnnic-space-1;
+  }
+}
+</style>

package/src/locales/en.json

@@ -41,5 +41,6 @@
       "flags": "Flags",
       "custom": "Custom"
     }
-  }
+  },
+  "search": "Search"
 }

package/src/locales/es.json

@@ -41,5 +41,6 @@
       "flags": "Banderas",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar"
 }

package/src/locales/pt_br.json

@@ -41,5 +41,6 @@
       "flags": "Bandeiras",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar"
 }

package/src/stories/MultiSelectV2.stories.js

@@ -0,0 +1,158 @@
+import UnnnicMultiSelect from '../components/MultiSelectV2/index.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
+
+export default {
+  title: 'Form/MultiSelectV2',
+  component: UnnnicMultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'MultiSelect is designed to solve common problems related to multiple option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match a list of the return type of the key specified by `itemValue`, or the entire options object when the `returnObject` property is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
+    },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicMultiSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: [],
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};

package/src/stories/Select.stories.js

@@ -0,0 +1,158 @@
+import UnnnicSelect from '../components/Select/index.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
+
+export default {
+  title: 'Form/Select',
+  component: UnnnicSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Select is designed to solve common problems related to option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match the return type of the key specified by `itemValue`, or the entire options object when `returnObject` prop is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
+    },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: null,
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};