@weni/unnnic-system 3.2.9-alpha.1 → 3.2.9-alpha.10

package/src/components/Select/index.vue

@@ -0,0 +1,245 @@
+<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:modelValue="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,
+});
+
+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/components/Tab/Tab.vue

@@ -9,6 +9,7 @@
           class="tab-head"
           :class="{
             'tab-head--active': localValue === tab,
+            'tab-head--disabled': disabledTabs?.includes(tab),
           }"
           @click="change(tab)"
         >
@@ -20,10 +21,9 @@
             side="bottom"
           >
             <UnnnicIcon
-              icon="info"
+              icon="help"
               :size="size === 'sm' ? 'xs' : 'sm'"
-              filled
-              scheme="neutral-cleanest"
+              scheme="fg-base"
             />
           </UnnnicToolTip>
         </li>
@@ -65,6 +65,13 @@ export default {
     tabs: {
       type: Array,
       default: null,
+      validator: (tabs) => {
+        return tabs.every((tab) => typeof tab === 'string') && tabs.length <= 5;
+      },
+    },
+    disabledTabs: {
+      type: Array,
+      default: null,
     },
   },
   emits: ['change'],
@@ -105,6 +112,10 @@ export default {
       return '';
     },
     change(value) {
+      if (this.disabledTabs?.includes(value)) {
+        return;
+      }
+
       this.localValue = value;
       this.$emit('change', this.localValue);
     },
@@ -119,18 +130,15 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-neutral-cloudy;
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-bold;
-  font-size: $unnnic-font-size-body-lg;
-  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
-  margin-bottom: $unnnic-inset-sm;
-  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  color: $unnnic-color-fg-base;
+  font: $unnnic-font-action;
+  margin-bottom: $unnnic-space-4;
+  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-border-base;
 }
 
 .tab-content {
   display: flex;
-  gap: $unnnic-spacing-sm;
+  gap: $unnnic-space-6;
 
   margin: 0;
   padding: 0;
@@ -139,27 +147,24 @@ export default {
 
 .tab-head {
   display: flex;
-  gap: $unnnic-spacing-xs;
+  gap: $unnnic-space-2;
   align-items: center;
 
   cursor: pointer;
-  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
+  padding: $unnnic-space-2 $unnnic-space-4;
 
   .unnnic-tooltip {
     display: flex;
   }
 
   &:hover {
-    color: $unnnic-color-neutral-black;
+    color: $unnnic-color-fg-emphasized;
   }
 }
 
 .tab-head--active {
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-bold;
-  color: $unnnic-color-neutral-black;
-  font-size: $unnnic-font-size-body-lg;
-  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
+  color: $unnnic-color-fg-emphasized;
+  font: $unnnic-font-action;
   transition: 0.4s;
 
   position: relative;
@@ -168,14 +173,23 @@ export default {
     content: '';
 
     position: absolute;
-    bottom: -$unnnic-spacing-xs;
-    left: -$unnnic-spacing-sm;
+    bottom: 0;
+    left: 0;
 
     display: block;
 
-    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
+    width: 100%;
 
-    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-border-active;
+  }
+}
+
+.tab-head--disabled {
+  color: $unnnic-color-fg-muted;
+  cursor: default;
+
+  &:hover {
+    color: $unnnic-color-fg-muted;
   }
 }
 

package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm" data-testid="material-icon" translate="no">help</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

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/DataTable.stories.js

@@ -330,3 +330,63 @@ export const Loading = {
     isLoading: true,
   },
 };
+
+export const ControlledSort = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      let sortState = {
+        header: 'ID',
+        itemKey: 'id',
+        order: 'asc',
+      };
+
+      const handleSort = ({ order, header, itemKey }) => {
+        action('update:sort')({ order, header, itemKey });
+        sortState = { header, itemKey, order };
+
+        if (order === 'asc') {
+          args.items = [...args.items].sort((a, b) => {
+            if (itemKey === 'id') return a.id - b.id;
+            return a[itemKey] > b[itemKey] ? 1 : -1;
+          });
+        } else if (order === 'desc') {
+          args.items = [...args.items].sort((a, b) => {
+            if (itemKey === 'id') return b.id - a.id;
+            return a[itemKey] < b[itemKey] ? 1 : -1;
+          });
+        }
+      };
+
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sortState, handleSort, updatePage, itemClick };
+    },
+    template: `
+    <div>
+      <UnnnicDataTable
+        v-bind="args"
+        :headers="args.headers"
+        :items="args.items"
+        :pageTotal="125"
+        :pageInterval="5"
+        v-model:sort="sortState"
+        @update:sort="handleSort"
+        @update:page="updatePage"
+        @itemClick="itemClick"
+      >
+      </UnnnicDataTable>
+    </div>
+    `,
+  }),
+};

package/src/stories/Input.stories.js

@@ -94,6 +94,11 @@ export const Normal = {
   args: {
     type: 'normal',
     placeholder: 'Placeholder',
+    showClear: true,
+    iconLeft: 'expand-8-1',
+    iconRight: 'messaging-we-chat-3',
+    iconLeftClickable: true,
+    iconRightClickable: false,
   },
 };
 
@@ -102,6 +107,7 @@ export const NormalSm = {
     size: 'sm',
     type: 'normal',
     placeholder: 'Placeholder',
+    showClear: true,
   },
 };
 

package/src/stories/Popover.stories.js

@@ -0,0 +1,39 @@
+import UnnnicPopover from '../components/Popover/index.vue';
+
+export default {
+  title: 'example/Popover',
+  component: UnnnicPopover,
+  render: (args) => ({
+    components: { UnnnicPopover },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `
+    <div>
+      <unnnic-popover v-bind="args">
+        <template #trigger>
+          <button>Click me</button>
+        </template>
+        <template #content>
+          <p>Hello</p>
+        </template>
+      </unnnic-popover>
+      <p>label label</p>
+    </div>
+  `,
+  }),
+};
+
+export const Default = {
+  args: {
+    modelValue: false,
+  },
+};
+
+export const WithModelValue = {
+  args: {
+    modelValue: true,
+  },
+};

package/src/stories/Select.stories.js

@@ -0,0 +1,91 @@
+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,
+  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: '',
+  },
+};

package/src/stories/Tab.stories.js

@@ -3,9 +3,6 @@ import unnnicTab from '../components/Tab/Tab.vue';
 export default {
   title: 'tabs/Tab',
   component: unnnicTab,
-  argTypes: {
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-  },
   render: (args) => ({
     components: {
       unnnicTab,
@@ -36,6 +33,15 @@ export default {
             Second description
           </p>
         </template>
+        <template #tab-head-third>
+          Third
+        </template>
+        <template #tab-panel-third>
+          <h2 class="title">Third Content</h2>
+          <p class="description">
+            Third description
+          </p>
+        </template>
       </unnnic-tab>
     `,
   }),
@@ -44,6 +50,7 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second'],
+    tabs: ['first', 'second', 'third'],
+    disabledTabs: ['third'],
   },
 };