@weni/unnnic-system 3.12.6 → 3.12.8-alpha.0

package/src/components/Select/index.vue

@@ -0,0 +1,308 @@
+<template>
+  <div
+    class="unnnic-select"
+    @keydown="handleKeyDown"
+  >
+    <Popover
+      :open="openPopover"
+      @update:open="openPopover = $event"
+    >
+      <PopoverTrigger class="w-full">
+        <UnnnicInput
+          ref="selectInputRef"
+          :modelValue="inputValue"
+          class="unnnic-select__input"
+          readonly
+          useFocusProp
+          :focus="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="!!selectedItem"
+          @clear="emit('update:modelValue', '')"
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        :class="'h-full'"
+        :style="popoverContentCustomStyles"
+        :width="inputWidthString"
+      >
+        <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"
+          />
+          <p
+            v-if="filteredOptions.length === 0"
+            class="unnnic-select__content-no-results"
+          >
+            {{ $t('without_results') }}
+          </p>
+          <PopoverOption
+            v-for="(option, index) in filteredOptions"
+            v-else
+            :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 { useElementSize } from '@vueuse/core';
+
+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);
+const selectInputRef = ref<HTMLInputElement | null>(null);
+const { width: inputWidth } = useElementSize(selectInputRef);
+
+const inputWidthString = computed(() => {
+  return `${inputWidth.value}px`;
+});
+
+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' && focusedOptionIndex.value !== -1) {
+      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 calculatedPopoverHeight = 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 gapsCompensation = props.enableSearch ? 1 : 2;
+
+  const size =
+    fieldsHeight +
+    popoverPadding +
+    (popoverGap * props.optionsLines - gapsCompensation);
+
+  return `${props.enableSearch ? size + 45 + 1 : size}px`;
+});
+
+const popoverContentCustomStyles = computed(() => {
+  const emptyFilteredOptions = filteredOptions.value?.length === 0;
+  return {
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: calculatedPopoverHeight.value,
+    maxHeight: emptyFilteredOptions ? 'unset' : calculatedPopoverHeight.value,
+    height: emptyFilteredOptions ? calculatedPopoverHeight.value : 'unset',
+  };
+});
+
+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;
+
+    height: -webkit-fill-available;
+
+    &-no-results {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font: $unnnic-font-emphasis;
+      color: $unnnic-color-fg-muted;
+    }
+  }
+}
+</style>

package/src/components/Switch/Switch.vue

@@ -19,8 +19,8 @@
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue"
-        @change="toggleState"
         v-bind="pick($attrs, ['id', 'name'])"
+        @change="toggleState"
       />
 
       <p

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

@@ -4,7 +4,9 @@ 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="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm 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 data-v-b4e39fac="" class="tab-head">tab1<div data-v-b3d24f2b="" class="unnnic-tooltip-trigger" data-testid="tooltip-trigger" data-state="closed" data-grace-area-trigger=""><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span></div>
+        <!--teleport start-->
+        <!--teleport end-->
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -13,11 +13,11 @@
         }`"
       >
         <img
-          class="unnnic-template-preview__header__media__preview"
           v-if="
             template?.header.type === 'MEDIA' &&
             template?.header.mediaType === 'IMAGE'
           "
+          class="unnnic-template-preview__header__media__preview"
           :src="template.header.src || imagePreview"
         />
         <template
@@ -50,8 +50,8 @@
           />
         </template>
         <h1
-          class="unnnic-template-preview__header__text__preview"
           v-else-if="template?.header.type === 'TEXT'"
+          class="unnnic-template-preview__header__text__preview"
         >
           {{ template.header.text }}
         </h1>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,10 +1,10 @@
 <template>
   <UnnnicModalDialog
     :modelValue="modelValue"
-    @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
     :showCloseIcon="true"
     class="unnnic-template-preview-modal"
+    @update:model-value="$event === false && $emit('close')"
   >
     <UnnnicTemplatePreview :template="template" />
   </UnnnicModalDialog>

package/src/components/Toast/Toast.vue

@@ -7,10 +7,11 @@
   >
     <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 }"
     >
       <section
         class="unnnic-toast__content"
@@ -22,7 +23,7 @@
         >
           <UnnnicIcon
             :icon="typeConfig.icon"
-            :scheme="typeConfig.scheme"
+            :scheme="typeConfig.scheme as SchemeColor"
             size="ant"
             data-testid="toast-type-icon"
           />
@@ -74,6 +75,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 import UnnnicIcon from '@/components/Icon.vue';
 import UnnnicButton from '@/components/Button/Button.vue';
+import { useLayerZIndex } from '@/lib/layer-manager';
 
 import type { ToastProps, ToastEmits } from './types';
 import type { SchemeColor } from '@/types/scheme-colors';
@@ -95,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' },
@@ -103,12 +112,11 @@ 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');
+
 const handleClose = () => {
   isVisible.value = false;
   emit('close');
@@ -152,7 +160,6 @@ onUnmounted(() => {
   position: fixed;
   bottom: $unnnic-space-4;
   right: $unnnic-space-4;
-  z-index: 9999;
 
   display: flex;
   align-items: flex-end;

package/src/components/ToolTip/ToolTip.vue

@@ -1,23 +1,25 @@
 <template>
-  <div
-    ref="tooltip"
-    :class="{
-      'unnnic-tooltip': enabled || forceOpen,
-      'force-open': forceOpen,
-    }"
-    @mouseover="handleResize"
+  <Tooltip
+    :disabled="!(enabled || forceOpen)"
+    :open="forceOpen || undefined"
+    data-testid="tooltip-wrapper"
   >
-    <slot />
-    <span
-      v-show="enabled || forceOpen"
-      ref="label"
+    <TooltipTrigger data-testid="tooltip-trigger">
+      <slot />
+    </TooltipTrigger>
+
+    <TooltipContent
       :class="['unnnic-tooltip-label', `unnnic-tooltip-label-${side}`]"
-      :style="{ maxWidth: maxWidth, left: leftPos, top: topPos }"
-      data-testid="tooltip-label"
+      :style="{ maxWidth: maxWidth }"
+      :side="side"
+      data-testid="tooltip-content"
     >
       <template v-if="enableHtml">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <section v-html="text"></section>
+        <section
+          data-testid="tooltip-html-content"
+          v-html="text"
+        ></section>
       </template>
       <template
         v-for="(line, index) in text.split('\n')"
@@ -27,22 +29,20 @@
         {{ line }}
         <br />
       </template>
-
-      <template v-if="shortcutText">
-        <span
-          class="unnnic-tooltip-label-shortcut"
-          data-testid="tooltip-label-shortcut"
-        >
-          {{ shortcutText }}
-        </span>
-      </template>
-    </span>
-  </div>
+    </TooltipContent>
+  </Tooltip>
 </template>
 
 <script>
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
 export default {
   name: 'UnnnicTooltip',
+  components: {
+    Tooltip,
+    TooltipTrigger,
+    TooltipContent,
+  },
   props: {
     text: {
       type: String,
@@ -67,162 +67,10 @@ export default {
       type: String,
       default: '',
     },
-    shortcutText: {
-      type: String,
-      default: null,
-    },
     enableHtml: {
       type: Boolean,
       default: false,
     },
   },
-  data() {
-    return {
-      topPos: null,
-      leftPos: null,
-    };
-  },
-  watch: {
-    side() {
-      this.getRightPost(this.$refs.tooltip);
-    },
-  },
-  mounted() {
-    this.handleResize();
-
-    window.addEventListener('scroll', this.handleResize);
-    window.addEventListener('resize', this.handleResize);
-  },
-  unmounted() {
-    window.removeEventListener('scroll', this.handleResize);
-    window.removeEventListener('resize', this.handleResize);
-  },
-  methods: {
-    handleResize() {
-      this.getRightPost(this.$refs.tooltip);
-    },
-    getRightPost(element) {
-      const elementPos = element.getBoundingClientRect();
-
-      if (element && this.$refs.label) {
-        if (this.side === 'right') {
-          this.leftPos = `${elementPos.x + elementPos.width + 8}px`;
-          this.topPos = `${elementPos.y + elementPos.height / 2 - this.$refs.label.offsetHeight / 2}px`;
-        } else if (this.side === 'left') {
-          this.leftPos = `${elementPos.x - this.$refs.label.offsetWidth - 8}px`;
-          this.topPos = `${elementPos.y + elementPos.height / 2 - this.$refs.label.offsetHeight / 2}px`;
-        } else if (this.side === 'top') {
-          this.leftPos = `${elementPos.x + elementPos.width / 2 - this.$refs.label.clientWidth / 2}px`;
-          this.topPos = `${elementPos.y - this.$refs.label.offsetHeight - 8}px`;
-        } else if (this.side === 'bottom') {
-          this.leftPos = `${elementPos.x + elementPos.width / 2 - this.$refs.label.clientWidth / 2}px`;
-          this.topPos = `${elementPos.y + elementPos.height + 8}px`;
-        }
-      }
-    },
-  },
 };
 </script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-tooltip {
-  position: relative;
-  display: inline-block;
-  overflow-wrap: break-word;
-}
-
-.unnnic-tooltip-label {
-  z-index: 1;
-  visibility: hidden;
-  text-align: center;
-  position: fixed;
-  width: max-content;
-  min-width: 2 * $unnnic-font-size;
-  box-sizing: border-box;
-  width: auto;
-  display: flex;
-  justify-content: center;
-  gap: $unnnic-spacing-xs;
-  align-items: center;
-
-  background-color: $unnnic-color-neutral-black;
-  color: $unnnic-color-neutral-snow;
-  border-radius: $unnnic-border-radius-sm;
-  padding: $unnnic-inset-nano;
-  box-shadow: $unnnic-shadow-level-near;
-  font-size: $unnnic-font-size-body-md;
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-regular;
-  line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 5px;
-    border-style: solid;
-  }
-
-  &-top {
-    position: fixed;
-    &::after {
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-color: $unnnic-color-neutral-black transparent transparent
-        transparent;
-    }
-  }
-
-  &-bottom {
-    position: fixed;
-    &::after {
-      bottom: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-color: transparent transparent $unnnic-color-neutral-black
-        transparent;
-    }
-  }
-  &-right {
-    position: fixed;
-    &::after {
-      top: 50%;
-      right: 100%;
-      margin-top: -5px;
-      border-color: transparent $unnnic-color-neutral-black transparent
-        transparent;
-    }
-  }
-  &-left {
-    position: fixed;
-    &::after {
-      top: 50%;
-      left: 100%;
-      margin-top: -5px;
-      border-color: transparent transparent transparent
-        $unnnic-color-neutral-black;
-    }
-  }
-
-  &-shortcut {
-    background-color: $unnnic-color-neutral-darkest;
-    border-radius: $unnnic-border-radius-sm;
-    padding: calc($unnnic-inset-nano / 2) $unnnic-inset-nano;
-  }
-}
-
-.unnnic-tooltip.force-open {
-  .unnnic-tooltip-label {
-    visibility: visible;
-  }
-}
-
-.unnnic-tooltip:hover {
-  .unnnic-tooltip-label {
-    visibility: visible;
-    width: auto;
-  }
-}
-</style>