@weni/unnnic-system 3.2.9-alpha.11 → 3.2.9-alpha.12

package/src/components/Select/index.vue

@@ -1,55 +1,29 @@
 <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>
+    <div class="unnnic-select" @keydown="handleKeyDown">
+        <UnnnicPopover v-model="openPopover" :popover-balloon-props="{ maxHeight: calculatedMaxHeight }">
+            <template #trigger>
+                <UnnnicInput :model-value="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">
@@ -60,186 +34,162 @@ import UnnnicSelectOption from './SelectOption.vue';
 import UnnnicI18n from '../../mixins/i18n';
 
 defineOptions({
-  name: 'UnnnicSelect',
-  mixins: [UnnnicI18n],
-});
+    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;
+    // 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,
-});
+    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];
-}>();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    'update:modelValue': [value: any]
+    'update:search': [value: string]
+}>()
 
-const openPopover = ref(false);
+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 (!openPopover.value) {
+        handleSearch('')
+    } else {
+        focusedOptionIndex.value = -1
     }
-    if (key === 'Enter') {
-      handleSelectOption(filteredOptions.value[focusedOptionIndex.value]);
+
+    if(openPopover.value && props.modelValue) {
+        const selectedOptionIndex = props.options.findIndex(option => option[props.itemValue] === selectedItem.value[props.itemValue])
+        scrollToOption(selectedOptionIndex, "instant", 'center')
     }
-  }
-};
-
-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 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`;
-});
+    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;
+    if (props.returnObject) return props.modelValue
 
-  return props.options.find(
-    (option) => option[props.itemValue] === props.modelValue,
-  );
-});
+    return props.options.find(option => option[props.itemValue] === props.modelValue)
+})
 
 const inputValue = computed(() => {
-  return selectedItem.value?.[props.itemLabel];
-});
+    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;
-};
+    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);
-};
+    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()),
-  );
-});
+    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;
+    cursor: pointer;
 }
 
 :deep(.unnnic-select__input-search) {
-  > .icon-left {
-    color: $unnnic-color-fg-base;
-  }
+    >.icon-left {
+        color: $unnnic-color-fg-base;
+    }
 }
 
 :deep(.unnnic-select__input) {
-  > .icon-right {
-    color: $unnnic-color-fg-base;
-  }
+    >.icon-right {
+        color: $unnnic-color-fg-base;
+    }
 }
 
 .unnnic-select {
-  &__content {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    gap: $unnnic-space-1;
-  }
+    &__content {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        gap: $unnnic-space-1;
+    }
 }
-</style>
+</style>

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -75,10 +75,7 @@
         {{ 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}`"
@@ -99,15 +96,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;
@@ -118,30 +115,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;
@@ -149,19 +146,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
-    :modelValue="modelValue"
+    :model-value="modelValue"
     @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
-    :showCloseIcon="true"
+    :show-close-icon="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/stories/Button.stories.js

@@ -36,7 +36,13 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'warning',
+        'attention',
+      ],
     },
     size: {
       control: { type: 'select' },

package/src/stories/Input.stories.js

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

package/src/stories/Popover.stories.js

@@ -6,9 +6,9 @@ export default {
   render: (args) => ({
     components: { UnnnicPopover },
     setup() {
-      return {
-        args,
-      };
+        return {
+            args,
+        }
     },
     template: `
     <div>
@@ -28,12 +28,12 @@ export default {
 
 export const Default = {
   args: {
-    modelValue: false,
-  },
+    modelValue: false
+  }
 };
 
 export const WithModelValue = {
-  args: {
-    modelValue: true,
-  },
-};
+    args: {
+        modelValue: true,
+    }
+}