@weni/unnnic-system 3.12.3-alpha-teleports.1 → 3.12.3-alpha.1

package/src/components/Select/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div
+    class="unnnic-select"
+    @keydown="handleKeyDown"
+  >
+    <Popover
+      :open="openPopover"
+      @update:open="openPopover = $event"
+    >
+      <PopoverTrigger>
+        <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', '')"
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        :style="{
+          maxHeight: calculatedMaxHeight,
+          overflow: 'auto',
+        }"
+      >
+        <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"
+          />
+          <PopoverOption
+            v-for="(option, index) in filteredOptions"
+            :key="option[props.itemValue]"
+            :data-option-index="index"
+            data-testid="select-option"
+            :label="option[props.itemLabel]"
+            :active="
+              option[props.itemValue] === selectedItem?.[props.itemValue]
+            "
+            :focused="focusedOptionIndex === index"
+            :disabled="option.disabled"
+            @click="handleSelectOption(option)"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue';
+import UnnnicInput from '../Input/Input.vue';
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverOption,
+} from '../ui/popover/index';
+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/components/Switch/Switch.vue

@@ -8,7 +8,12 @@
       class="unnnic-switch__label"
     />
 
-    <label :class="['unnnic-switch__input-wrapper', {'unnnic-switch__input-wrapper--disabled': disabled}]">
+    <label
+      :class="[
+        'unnnic-switch__input-wrapper',
+        { 'unnnic-switch__input-wrapper--disabled': disabled },
+      ]"
+    >
       <input
         class="unnnic-switch__input"
         type="checkbox"
@@ -78,7 +83,7 @@ export default {
       type: String,
       default: '',
     },
-    
+
     helper: {
       type: String,
       default: '',
@@ -176,7 +181,9 @@ $switch-height: 20px;
     background-repeat: no-repeat;
     background-position: 4px center;
 
-    transition: 120ms linear background-position, 120ms linear background-color;
+    transition:
+      120ms linear background-position,
+      120ms linear background-color;
 
     cursor: pointer;
 

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -75,7 +75,10 @@
         {{ template?.footer }}
       </footer>
     </section>
-    <footer v-if="hasButtons" class="unnnic-template-preview__buttons">
+    <footer
+      v-if="hasButtons"
+      class="unnnic-template-preview__buttons"
+    >
       <section
         v-for="(button, index) in template?.buttons"
         :key="`button-${index}`"
@@ -96,15 +99,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed } from 'vue';
 
-import type { Template } from "./types";
+import type { Template } from './types';
 
-import imagePreview from "../../assets/img/previews/image-preview.png";
-import documentPreview from "../../assets/img/previews/doc-preview.png";
-import videoPreview from "../../assets/img/previews/video-preview.png";
+import imagePreview from '../../assets/img/previews/image-preview.png';
+import documentPreview from '../../assets/img/previews/doc-preview.png';
+import videoPreview from '../../assets/img/previews/video-preview.png';
 
-import UnnnicIcon from "../Icon.vue";
+import UnnnicIcon from '../Icon.vue';
 
 interface Props {
   template?: Template | null;
@@ -115,30 +118,30 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const hasHeader = computed(
-  () => props.template?.header && props.template.header.type
+  () => props.template?.header && props.template.header.type,
 );
 const hasHeaderMedia = computed(
-  () => !!props.template?.header && props.template.header.type === "MEDIA"
+  () => !!props.template?.header && props.template.header.type === 'MEDIA',
 );
 const hasBody = computed(
-  () => !!props.template?.body && props.template.body.length > 0
+  () => !!props.template?.body && props.template.body.length > 0,
 );
 const hasFooter = computed(
-  () => !!props.template?.footer && props.template.footer.length > 0
+  () => !!props.template?.footer && props.template.footer.length > 0,
 );
 const hasButtons = computed(
-  () => !!props.template?.buttons && props.template.buttons.length > 0
+  () => !!props.template?.buttons && props.template.buttons.length > 0,
 );
 const parsedBody = computed(() => {
-  if (!hasBody.value) return "";
+  if (!hasBody.value) return '';
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const result = props
-    .template!.body!.replaceAll("\n", "<br/>")
-    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
-    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
-    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
-    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
+    .template!.body!.replaceAll('\n', '<br/>')
+    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, '<strong>$1</strong>')
+    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, '<i>$1</i>')
+    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, '<s>$1</s>')
+    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, '<tt>$1</tt>')
     .replaceAll(/{{.*?}}/g, (match) => `<strong>${match}</strong>`);
 
   return result;
@@ -146,19 +149,19 @@ const parsedBody = computed(() => {
 
 const getButtonIcon = (buttonType) => {
   const buttonMapper = {
-    PHONE_NUMBER: "phone",
-    URL: "open_in_new",
-    COPY_CODE: "content_copy",
-    FLOW: "",
-    QUICK_REPLY: "reply",
+    PHONE_NUMBER: 'phone',
+    URL: 'open_in_new',
+    COPY_CODE: 'content_copy',
+    FLOW: '',
+    QUICK_REPLY: 'reply',
   };
 
-  return buttonMapper[buttonType] || "";
+  return buttonMapper[buttonType] || '';
 };
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-template-preview {
   display: flex;

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,9 +1,9 @@
 <template>
   <UnnnicModalDialog
-    :model-value="modelValue"
+    :modelValue="modelValue"
     @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
-    :show-close-icon="true"
+    :showCloseIcon="true"
     class="unnnic-template-preview-modal"
   >
     <UnnnicTemplatePreview :template="template" />
@@ -11,16 +11,16 @@
 </template>
 
 <script lang="ts" setup>
-import UnnnicTemplatePreview from "./TemplatePreview.vue";
-import UnnnicModalDialog from "../ModalDialog/ModalDialog.vue";
+import UnnnicTemplatePreview from './TemplatePreview.vue';
+import UnnnicModalDialog from '../ModalDialog/ModalDialog.vue';
 
-import type { Template } from "./types";
+import type { Template } from './types';
 
 const defaultTranslations = {
   title: {
-    "pt-br": "Visualizar modelo",
-    en: "Template preview",
-    es: "Vista previa de plantilla",
+    'pt-br': 'Visualizar modelo',
+    en: 'Template preview',
+    es: 'Vista previa de plantilla',
   },
 };
 
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  locale: "en",
+  locale: 'en',
 });
 
 defineEmits<{
@@ -40,7 +40,7 @@ defineEmits<{
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
+@use '@/assets/scss/unnnic' as *;
 
 :deep(.unnnic-modal-dialog__container__content) {
   display: flex;

package/src/components/TemplatePreview/types.d.ts

@@ -1,14 +1,14 @@
 export interface Template {
   header: {
-    type: "TEXT" | "MEDIA";
-    mediaType?: "IMAGE" | "VIDEO" | "DOCUMENT";
+    type: 'TEXT' | 'MEDIA';
+    mediaType?: 'IMAGE' | 'VIDEO' | 'DOCUMENT';
     text?: string | null;
     src?: string | null;
   };
   body?: string;
   footer?: string;
   buttons?: Array<{
-    type: "QUICK_REPLY" | "PHONE_NUMBER";
+    type: 'QUICK_REPLY' | 'PHONE_NUMBER';
     text: string;
     countryCode?: string;
     phoneNumber?: string;

package/src/components/Toast/Toast.vue

@@ -7,9 +7,9 @@
   >
     <aside
       v-if="isVisible"
-      :class="['unnnic-toast', `unnnic-toast--${type}`]"
-      :role="type === 'error' ? 'alert' : 'status'"
-      :aria-live="type === 'error' ? 'assertive' : 'polite'"
+      :class="['unnnic-toast', `unnnic-toast--${validType}`]"
+      :role="validType === 'error' ? 'alert' : 'status'"
+      :aria-live="validType === 'error' ? 'assertive' : 'polite'"
       data-testid="toast"
       :style="{ zIndex: toastZIndex }"
     >
@@ -23,7 +23,7 @@
         >
           <UnnnicIcon
             :icon="typeConfig.icon"
-            :scheme="typeConfig.scheme"
+            :scheme="typeConfig.scheme as SchemeColor"
             size="ant"
             data-testid="toast-type-icon"
           />
@@ -97,6 +97,13 @@ const emit = defineEmits<ToastEmits>();
 const isVisible = ref(false);
 let timeoutId: number | null = null;
 
+const validType = computed(() => {
+  if (['informational', 'attention', 'success', 'error'].includes(props.type)) {
+    return props.type;
+  }
+  return 'informational';
+});
+
 const typeConfig = computed(() => {
   const configMap = {
     informational: { icon: 'info', scheme: 'blue-500' },
@@ -105,10 +112,7 @@ const typeConfig = computed(() => {
     error: { icon: 'cancel', scheme: 'red-500' },
   };
 
-  return configMap[props.type || 'informational'] as {
-    icon: string;
-    scheme: SchemeColor;
-  };
+  return configMap[validType.value];
 });
 
 const toastZIndex = useLayerZIndex('toast');

package/src/components/index.ts

@@ -33,10 +33,10 @@ import modal from './Modal/Modal.vue';
 import modalUpload from './ModalUpload/ModalUpload.vue';
 import { callAlert, callModal } from '../utils/call';
 import selectSmart from './SelectSmart/SelectSmart.vue';
-// import select from './Select/Select.vue';
+import select from './Select/index.vue';
 import selectItem from './Select/SelectItem.vue';
 // import selectListItem from './SelectListItem/SelectListItem.vue';
-import multiSelect from './MultiSelect/MultiSelect.vue';
+import multiSelect from './MultiSelect/index.vue';
 import alert from './Alert/Alert.vue';
 // import autocomplete from './Input/Autocomplete.vue';
 // import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
@@ -168,10 +168,10 @@ export const components: ComponentsMap = {
   unnnicModalDialog: ModalDialog,
   unnnicModalUpload: modalUpload,
   unnnicSelectSmart: selectSmart,
-  // unnnicSelect: select,
+  unnnicSelect: select,
   unnnicSelectItem: selectItem,
   // unnnicSelectListItem: selectListItem,
-  unnnicMultiSelect: multiSelect,
+  unnnicMultiSelect: multiSelect as VueComponent,
   unnnicAlert: alert,
   unnnicCallAlert: callAlert,
   unnnicCallModal: callModal,
@@ -264,7 +264,7 @@ export const unnnicFontSize = fontSize;
 export const unnnicFormElement = formElement;
 export const unnnicInput = input;
 export const unnnicInputNext = inputNext;
-export const unnnicInputDatePicker = inputDatePicker;
+export const unnnicInputDatePicker = inputDatePicker as VueComponent;
 export const unnnicButton = button;
 export const unnnicButtonIcon = buttonIcon;
 export const unnnicSidebar = sidebar;
@@ -296,7 +296,7 @@ export const unnnicModalDialog = ModalDialog;
 export const unnnicModalNext = ModalNext;
 export const unnnicModalUpload = modalUpload;
 export const unnnicSelectSmart = selectSmart as VueComponent;
-// export const unnnicSelect = select;
+export const unnnicSelect = select as VueComponent;
 export const unnnicSelectItem = selectItem;
 // export const unnnicSelectListItem = selectListItem;
 export const unnnicMultiSelect = multiSelect as VueComponent;
@@ -423,7 +423,7 @@ export const UnnnicModalDialog = ModalDialog;
 export const UnnnicModalNext = ModalNext;
 export const UnnnicModalUpload = modalUpload;
 export const UnnnicSelectSmart = selectSmart as VueComponent;
-// export const UnnnicSelect = select;
+export const UnnnicSelect = select as VueComponent;
 export const UnnnicSelectItem = selectItem;
 // export const UnnnicSelectListItem = selectListItem;
 export const UnnnicMultiSelect = multiSelect as VueComponent;

package/src/components/ui/dialog/DialogClose.vue

@@ -6,9 +6,7 @@ defineOptions({
   name: 'UnnnicDialogClose',
 });
 
-const props = withDefaults(defineProps<DialogCloseProps>(), {
-  asChild: true,
-});
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
@@ -21,6 +19,8 @@ const props = withDefaults(defineProps<DialogCloseProps>(), {
 </template>
 
 <style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
 .unnnic-dialog-close {
   > * {
     width: 100%;

package/src/components/ui/drawer/DrawerClose.vue

@@ -6,9 +6,7 @@ defineOptions({
   name: 'UnnnicDrawerClose',
 });
 
-const props = withDefaults(defineProps<DrawerCloseProps>(), {
-  asChild: true,
-});
+const props = defineProps<DrawerCloseProps>();
 </script>
 
 <template>
@@ -24,6 +22,14 @@ const props = withDefaults(defineProps<DrawerCloseProps>(), {
 @use '@/assets/scss/unnnic' as *;
 
 .unnnic-drawer__close {
+  display: flex;
+
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+
   > * {
     width: 100%;
   }

package/src/components/ui/popover/PopoverOption.vue

@@ -98,6 +98,10 @@ const schemeColor = computed(() => {
   }
 
   &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
     @each $name, $color in $unnnic-scheme-colors {
       &.unnnic-popover-option__label--#{$name} {
         color: $color;

package/src/lib/layer-manager.ts

@@ -14,14 +14,14 @@ export type LayerToken = keyof typeof layerScale;
 
 const DEFAULT_STEP = 5;
 
-const activeValues: Record<LayerToken, number[]> = {
-  hide: [],
-  base: [],
-  drawer: [],
-  modal: [],
-  popover: [],
-  tooltip: [],
-  toast: [],
+const counters: Record<LayerToken, number> = {
+  hide: 0,
+  base: 0,
+  drawer: 0,
+  modal: 0,
+  popover: 0,
+  tooltip: 0,
+  toast: 0,
 };
 
 interface Allocation {
@@ -34,14 +34,10 @@ const allocations = new Map<symbol, Allocation>();
 
 function acquire(type: LayerToken): Allocation {
   const id = Symbol('layer');
-  const list = activeValues[type];
-  const lastValue = list.length ? list[list.length - 1] : layerScale[type];
-  const value = lastValue + DEFAULT_STEP;
+  counters[type] = (counters[type] ?? 0) + 1;
+  const value = layerScale[type] + counters[type] * DEFAULT_STEP;
   const allocation: Allocation = { id, type, value };
-
-  list.push(value);
   allocations.set(id, allocation);
-
   return allocation;
 }
 
@@ -52,12 +48,8 @@ function release(id: symbol) {
   }
 
   allocations.delete(id);
-  const list = activeValues[allocation.type];
-  const index = list.indexOf(allocation.value);
-
-  if (index !== -1) {
-    list.splice(index, 1);
-  }
+  const current = Math.max((counters[allocation.type] ?? 1) - 1, 0);
+  counters[allocation.type] = current;
 }
 
 export interface LayerZIndexOptions {