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

package/src/components/Select/index.vue

@@ -1,308 +0,0 @@
-<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/ui/dialog/Dialog.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
-import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialog',
-});
-
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>

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

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from 'reka-ui';
-import { DialogClose } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialogClose',
-});
-
-const props = withDefaults(defineProps<DialogCloseProps>(), {
-  asChild: true,
-});
-</script>
-
-<template>
-  <DialogClose
-    class="unnnic-dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
-
-<style lang="scss" scoped>
-.unnnic-dialog-close {
-  > * {
-    width: 100%;
-  }
-}
-</style>

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

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
-import type { HTMLAttributes, Component } from 'vue';
-import { computed, h } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import {
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui';
-import { cn } from '@/lib/utils';
-import { useLayerZIndex } from '@/lib/layer-manager';
-
-defineOptions({
-  name: 'UnnnicDialogContent',
-});
-
-const props = withDefaults(
-  defineProps<
-    DialogContentProps & {
-      parentClass?: HTMLAttributes['class'];
-      class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
-    }
-  >(),
-  {
-    size: 'medium',
-    parentClass: '', // This class should be temporary, to be discontinued with the ModalDialog component
-    class: '',
-  },
-);
-const emits = defineEmits<DialogContentEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class', 'parentClass');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
-const overlayZIndex = useLayerZIndex('modal', { offset: -2 });
-const modalZIndex = useLayerZIndex('modal');
-
-const contentClasses = computed(() =>
-  cn(
-    'unnnic-dialog-content',
-    `unnnic-dialog-content--size-${props.size}`,
-    'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-    props.class,
-  ),
-);
-
-// This component is used to wrap the DialogContent component in a section if the parentClass is provided
-// This is a temporary solution, to be discontinued with the ModalDialog component
-const ConditionalWrapper: Component = (_, { slots }) => {
-  const content = slots.default?.();
-  return props.parentClass
-    ? h('section', { class: props.parentClass }, content)
-    : content;
-};
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="unnnic-dialog-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-      :style="{ zIndex: overlayZIndex }"
-    />
-
-    <ConditionalWrapper>
-      <DialogContent
-        v-bind="forwarded"
-        :class="contentClasses"
-        :style="{ zIndex: modalZIndex }"
-      >
-        <slot />
-      </DialogContent>
-    </ConditionalWrapper>
-  </DialogPortal>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
-  background: rgba(53, 57, 69, 0.5);
-}
-
-.unnnic-dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  overflow: hidden;
-
-  transform: translate(-50%, -50%);
-
-  width: 100%;
-  max-height: calc(100% - $unnnic-space-20);
-
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: $unnnic-shadow-2;
-  border-radius: $unnnic-radius-4;
-  background-color: $unnnic-color-bg-base;
-
-  &--size-small {
-    max-width: 360px;
-  }
-
-  &--size-medium {
-    max-width: 560px;
-  }
-
-  &--size-large {
-    max-width: 800px;
-  }
-
-  > * {
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>

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

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-defineOptions({
-  name: 'UnnnicDialogFooter',
-});
-
-const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class']; divider?: boolean }>(),
-  {
-    divider: true,
-  },
-);
-</script>
-
-<template>
-  <footer
-    :class="
-      cn(
-        'unnnic-dialog-footer',
-        { 'unnnic-dialog-footer--with-divider': props.divider },
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: $unnnic-space-2;
-
-  padding: $unnnic-space-6;
-
-  &--with-divider {
-    border-top: 1px solid $unnnic-color-border-soft;
-  }
-
-  > * {
-    width: 100%;
-  }
-}
-</style>

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

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-import UnnnicButton from '@/components/Button/Button.vue';
-import DialogClose from './DialogClose.vue';
-import UnnnicIcon, { SchemeColor } from '@/components/Icon.vue';
-
-defineOptions({
-  name: 'UnnnicDialogHeader',
-});
-
-const props = withDefaults(
-  defineProps<{
-    class?: HTMLAttributes['class'];
-    divider?: boolean;
-    type?: 'default' | 'success' | 'warning' | 'attention';
-    closeButton?: boolean;
-  }>(),
-  {
-    divider: true,
-    closeButton: true,
-    type: 'default',
-  },
-);
-
-const iconsMapper = {
-  default: { icon: '', scheme: '' as SchemeColor },
-  success: { icon: 'check_circle', scheme: 'aux-green-500' as SchemeColor },
-  warning: { icon: 'warning', scheme: 'aux-red-500' as SchemeColor },
-  attention: { icon: 'error', scheme: 'aux-yellow-500' as SchemeColor },
-};
-</script>
-
-<template>
-  <header
-    :class="
-      cn(
-        'unnnic-dialog-header',
-        { 'unnnic-dialog-header--with-divider': props.divider },
-        props.class,
-      )
-    "
-  >
-    <UnnnicIcon
-      v-if="iconsMapper[props.type]?.icon"
-      :icon="iconsMapper[props.type]?.icon"
-      :scheme="iconsMapper[props.type]?.scheme"
-      size="md"
-    />
-    <slot />
-
-    <DialogClose
-      v-if="props.closeButton"
-      class="unnnic-dialog-header__close"
-    >
-      <UnnnicButton
-        type="tertiary"
-        iconCenter="close"
-        size="small"
-      />
-    </DialogClose>
-  </header>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-header {
-  display: flex;
-  align-items: center;
-  gap: $unnnic-space-2;
-
-  padding: $unnnic-space-6;
-
-  &--with-divider {
-    border-bottom: 1px solid $unnnic-color-border-soft;
-  }
-
-  &__close {
-    margin-left: auto;
-  }
-}
-</style>

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

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { DialogTitleProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { DialogTitle, useForwardProps } from 'reka-ui';
-import { cn } from '@/lib/utils';
-
-defineOptions({
-  name: 'UnnnicDialogTitle',
-});
-
-const props = defineProps<
-  DialogTitleProps & { class?: HTMLAttributes['class'] }
->();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-  <DialogTitle
-    v-bind="forwardedProps"
-    :class="cn('unnnic-dialog-title', props.class)"
-  >
-    <slot />
-  </DialogTitle>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-title {
-  font: $unnnic-font-display-2;
-  color: $unnnic-color-fg-emphasized;
-  margin: 0;
-}
-</style>

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

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { DialogTriggerProps } from 'reka-ui';
-import { DialogTrigger } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialogTrigger',
-});
-
-const props = defineProps<DialogTriggerProps>();
-</script>
-
-<template>
-  <DialogTrigger v-bind="props">
-    <slot />
-  </DialogTrigger>
-</template>

package/src/components/ui/dialog/index.ts

@@ -1,7 +0,0 @@
-export { default as Dialog } from './Dialog.vue';
-export { default as DialogClose } from './DialogClose.vue';
-export { default as DialogContent } from './DialogContent.vue';
-export { default as DialogFooter } from './DialogFooter.vue';
-export { default as DialogHeader } from './DialogHeader.vue';
-export { default as DialogTitle } from './DialogTitle.vue';
-export { default as DialogTrigger } from './DialogTrigger.vue';