@weni/unnnic-system 3.2.9-alpha.7 → 3.2.9

package/src/components/Select/index.vue

@@ -1,243 +0,0 @@
-<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"
-        />
-      </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/TemplatePreview/TemplatePreview.vue

@@ -1,252 +0,0 @@
-<template>
-  <section class="unnnic-template-preview">
-    <section
-      :class="[
-        'unnnic-template-preview__content',
-        { 'unnnic-template-preview__content--has-media': hasHeaderMedia },
-      ]"
-    >
-      <header
-        v-if="hasHeader"
-        :class="`unnnic-template-preview__header__${
-          template?.header.type === 'TEXT' ? 'text' : 'media'
-        }`"
-      >
-        <img
-          class="unnnic-template-preview__header__media__preview"
-          v-if="
-            template?.header.type === 'MEDIA' &&
-            template?.header.mediaType === 'IMAGE'
-          "
-          :src="template.header.src || imagePreview"
-        />
-        <template
-          v-else-if="
-            template?.header.type === 'MEDIA' &&
-            template?.header.mediaType === 'VIDEO'
-          "
-        >
-          <video
-            v-if="template.header.src"
-            class="unnnic-template-preview__header__media__preview"
-            :src="template.header.src"
-            controls
-          />
-          <img
-            v-else
-            class="unnnic-template-preview__header__media__preview"
-            :src="videoPreview"
-          />
-        </template>
-        <template
-          v-else-if="
-            template?.header.type === 'MEDIA' &&
-            template?.header.mediaType === 'DOCUMENT'
-          "
-        >
-          <img
-            class="unnnic-template-preview__header__media__preview"
-            :src="documentPreview"
-          />
-        </template>
-        <h1
-          class="unnnic-template-preview__header__text__preview"
-          v-else-if="template?.header.type === 'TEXT'"
-        >
-          {{ template.header.text }}
-        </h1>
-      </header>
-      <section
-        v-if="hasBody"
-        :class="[
-          'unnnic-template-preview__body',
-          { 'unnnic-template-preview__body--has-media': hasHeaderMedia },
-        ]"
-      >
-        <section v-html="parsedBody"></section>
-      </section>
-      <footer
-        v-if="hasFooter"
-        :class="[
-          'unnnic-template-preview__footer',
-          { 'unnnic-template-preview__footer--has-media': hasHeaderMedia },
-        ]"
-      >
-        {{ template?.footer }}
-      </footer>
-    </section>
-    <footer
-      v-if="hasButtons"
-      class="unnnic-template-preview__buttons"
-    >
-      <section
-        v-for="(button, index) in template?.buttons"
-        :key="`button-${index}`"
-        class="unnnic-template-preview__buttons__button"
-      >
-        <UnnnicIcon
-          class="unnnic-template-preview__buttons__button__icon"
-          :icon="getButtonIcon(button.type)"
-          scheme="aux-blue-500"
-          size="ant"
-        />
-        <p class="unnnic-template-preview__buttons__button__text">
-          {{ button.text }}
-        </p>
-      </section>
-    </footer>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-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 UnnnicIcon from '../Icon.vue';
-
-interface Props {
-  template?: Template | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  template: null,
-});
-
-const hasHeader = computed(
-  () => props.template?.header && props.template.header.type,
-);
-const hasHeaderMedia = computed(
-  () => !!props.template?.header && props.template.header.type === 'MEDIA',
-);
-const hasBody = computed(
-  () => !!props.template?.body && props.template.body.length > 0,
-);
-const hasFooter = computed(
-  () => !!props.template?.footer && props.template.footer.length > 0,
-);
-const hasButtons = computed(
-  () => !!props.template?.buttons && props.template.buttons.length > 0,
-);
-const parsedBody = computed(() => {
-  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>')
-    .replaceAll(/{{.*?}}/g, (match) => `<strong>${match}</strong>`);
-
-  return result;
-});
-
-const getButtonIcon = (buttonType) => {
-  const buttonMapper = {
-    PHONE_NUMBER: 'phone',
-    URL: 'open_in_new',
-    COPY_CODE: 'content_copy',
-    FLOW: '',
-    QUICK_REPLY: 'reply',
-  };
-
-  return buttonMapper[buttonType] || '';
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-template-preview {
-  display: flex;
-  flex-direction: column;
-  box-shadow: $unnnic-shadow-level-near;
-  background-color: $unnnic-color-background-white;
-  width: 368px;
-  border-radius: $unnnic-border-radius-md;
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-3;
-    padding: $unnnic-space-4 $unnnic-space-3;
-
-    &--has-media {
-      padding: $unnnic-space-1;
-    }
-  }
-
-  &__header {
-    &__text {
-      &__preview {
-        font-family: $unnnic-font-family-secondary;
-        font-weight: $unnnic-font-weight-bold;
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-        color: $unnnic-color-neutral-dark;
-
-        margin: $unnnic-space-0;
-      }
-    }
-
-    &__media {
-      &__preview {
-        width: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-
-  &__body {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-    color: $unnnic-color-neutral-cloudy;
-
-    &--has-media {
-      padding: $unnnic-space-0 $unnnic-space-2;
-    }
-  }
-
-  &__footer {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-md;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-    color: $unnnic-color-neutral-clean;
-
-    &--has-media {
-      padding: $unnnic-space-0 $unnnic-space-3 $unnnic-space-2;
-    }
-  }
-
-  &__buttons {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-bold;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-
-    &__button {
-      margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: $unnnic-space-2;
-      padding: $unnnic-space-3;
-      border-top: 1px solid $unnnic-color-neutral-light;
-
-      &__text {
-        color: $unnnic-color-aux-blue-500;
-        margin: $unnnic-space-0;
-      }
-    }
-  }
-}
-</style>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,51 +0,0 @@
-<template>
-  <UnnnicModalDialog
-    :modelValue="modelValue"
-    @update:modelValue="$event === false && $emit('close')"
-    :title="defaultTranslations.title[props.locale]"
-    :showCloseIcon="true"
-    class="unnnic-template-preview-modal"
-  >
-    <UnnnicTemplatePreview :template="template" />
-  </UnnnicModalDialog>
-</template>
-
-<script lang="ts" setup>
-import UnnnicTemplatePreview from './TemplatePreview.vue';
-import UnnnicModalDialog from '../ModalDialog/ModalDialog.vue';
-
-import type { Template } from './types';
-
-const defaultTranslations = {
-  title: {
-    'pt-br': 'Visualizar modelo',
-    en: 'Template preview',
-    es: 'Vista previa de plantilla',
-  },
-};
-
-interface Props {
-  locale?: string;
-  template: Template;
-  modelValue: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'en',
-});
-
-defineEmits<{
-  close: void;
-}>();
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-:deep(.unnnic-modal-dialog__container__content) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: $unnnic-color-neutral-lightest;
-}
-</style>

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

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