@weni/unnnic-system 3.4.1-alpha.2 → 3.5.1-alpha.0

package/src/components/Select/index.vue

@@ -1,245 +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"
-          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:model-value="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/Toast/Toast.vue

@@ -1,236 +0,0 @@
-<template>
-  <Transition
-    name="toast-slide"
-    appear
-    @after-leave="$emit('destroy')"
-  >
-    <aside
-      v-if="isVisible"
-      :class="['unnnic-toast', `unnnic-toast--${type}`]"
-      :role="type === 'error' ? 'alert' : 'status'"
-      :aria-live="type === 'error' ? 'assertive' : 'polite'"
-      data-testid="unnnic-toast"
-    >
-      <section class="unnnic-toast__content">
-        <header class="unnnic-toast__header">
-          <UnnnicIcon
-            :icon="typeConfig.icon"
-            :scheme="typeConfig.scheme"
-            size="ant"
-            data-testid="toast-type-icon"
-          />
-
-          <h3 class="unnnic-toast__title">
-            {{ title }}
-          </h3>
-
-          <UnnnicIcon
-            icon="close"
-            scheme="neutral-dark"
-            size="ant"
-            clickable
-            class="unnnic-toast__close"
-            data-testid="toast-close-button"
-            @click="handleClose"
-            @keydown.enter="handleClose"
-            @keydown.space.prevent="handleClose"
-          />
-        </header>
-
-        <p
-          v-if="description"
-          class="unnnic-toast__text"
-        >
-          {{ description }}
-        </p>
-      </section>
-
-      <UnnnicButton
-        v-if="button"
-        type="tertiary"
-        :text="button.text"
-        class="unnnic-toast__action-button"
-        data-testid="toast-action-button"
-        @click="handleAction"
-        @keydown.enter="handleAction"
-        @keydown.space.prevent="handleAction"
-      />
-    </aside>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-
-import UnnnicIcon from '@/components/Icon.vue';
-import UnnnicButton from '@/components/Button/Button.vue';
-
-import type { ToastProps, ToastEmits } from './types';
-import type { SchemeColor } from '@/types/scheme-colors';
-
-defineOptions({
-  name: 'UnnnicToast',
-});
-
-const props = withDefaults(defineProps<ToastProps>(), {
-  title: '',
-  description: '',
-  button: undefined,
-  timeout: 5000,
-  type: 'informational',
-});
-
-const emit = defineEmits<ToastEmits>();
-
-const isVisible = ref(false);
-let timeoutId: number | null = null;
-
-const typeConfig = computed(() => {
-  const configMap = {
-    informational: { icon: 'info', scheme: 'blue-500' },
-    attention: { icon: 'error', scheme: 'yellow-500' },
-    success: { icon: 'check_circle', scheme: 'green-500' },
-    error: { icon: 'cancel', scheme: 'red-500' },
-  };
-
-  return configMap[props.type || 'informational'] as {
-    icon: string;
-    scheme: SchemeColor;
-  };
-});
-
-const handleClose = () => {
-  isVisible.value = false;
-  emit('close');
-};
-
-const handleAction = () => {
-  if (props.button?.action) {
-    props.button.action();
-  }
-};
-
-const startTimeout = () => {
-  if (props.timeout > 0) {
-    timeoutId = window.setTimeout(() => {
-      handleClose();
-    }, props.timeout);
-  }
-};
-
-const clearTimeout = () => {
-  if (timeoutId) {
-    window.clearTimeout(timeoutId);
-    timeoutId = null;
-  }
-};
-
-onMounted(() => {
-  isVisible.value = true;
-  startTimeout();
-});
-
-onUnmounted(() => {
-  clearTimeout();
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-toast {
-  position: fixed;
-  bottom: $unnnic-space-4;
-  right: $unnnic-space-4;
-  z-index: 9999;
-
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-  gap: $unnnic-space-5;
-
-  min-width: 250px;
-  max-width: 450px;
-  padding: $unnnic-space-4;
-
-  border-radius: $unnnic-radius-2;
-  box-shadow: $unnnic-shadow-2;
-  border: 1px solid $unnnic-color-border-base;
-
-  &--informational {
-    border-color: $unnnic-color-border-info;
-    background-color: $unnnic-color-bg-info;
-  }
-
-  &--attention {
-    border-color: $unnnic-color-border-warning;
-    background-color: $unnnic-color-bg-warning;
-  }
-
-  &--success {
-    border-color: $unnnic-color-border-success;
-    background-color: $unnnic-color-bg-success;
-  }
-
-  &--error {
-    border-color: $unnnic-color-border-critical;
-    background-color: $unnnic-color-bg-critical;
-  }
-
-  &__content,
-  &__header {
-    width: 100%;
-
-    display: flex;
-    gap: $unnnic-space-2;
-  }
-
-  &__content {
-    flex-direction: column;
-    gap: $unnnic-space-2;
-  }
-
-  &__header {
-    align-items: center;
-  }
-
-  &__title {
-    flex: 1;
-
-    margin: 0;
-
-    font: $unnnic-font-action;
-    color: $unnnic-color-fg-emphasized;
-  }
-
-  &__text {
-    margin: 0;
-    margin-left: $unnnic-space-7;
-
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-emphasized;
-  }
-}
-
-// Animations
-.toast-slide-enter-active,
-.toast-slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.toast-slide-enter-from {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-.toast-slide-leave-to {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-.toast-slide-enter-to,
-.toast-slide-leave-from {
-  transform: translateY(0);
-  opacity: 1;
-}
-</style>

package/src/components/Toast/ToastManager.ts

@@ -1,110 +0,0 @@
-import { createApp } from 'vue';
-import Toast from './Toast.vue';
-import type {
-  ToastProps,
-  ToastInstance,
-  ToastOptions,
-  ToastCall,
-} from './types';
-
-class ToastManager implements ToastManager {
-  private toasts: Map<string, ToastInstance> = new Map();
-  private container: HTMLElement | null = null;
-  private nextId = 0;
-
-  private createContainer(): HTMLElement {
-    if (this.container) {
-      return this.container;
-    }
-
-    this.container = document.createElement('div');
-    this.container.setAttribute('unnnic-toast-container', 'true');
-
-    document.body.appendChild(this.container);
-    return this.container;
-  }
-
-  private generateId(): string {
-    return `toast-${++this.nextId}`;
-  }
-
-  show(props: ToastProps): ToastInstance {
-    const id = this.generateId();
-    const container = this.createContainer();
-
-    const toastWrapper = document.createElement('div');
-
-    // Create promise that resolves when toast is destroyed
-    let resolvePromise: () => void;
-    const promise = new Promise<void>((resolve) => {
-      resolvePromise = resolve;
-    });
-
-    const app = createApp(Toast, {
-      ...props,
-      onClose: () => {
-        this.close(id);
-      },
-      onDestroy: () => {
-        app.unmount();
-        toastWrapper.remove();
-        resolvePromise(); // Resolve the promise when toast is destroyed
-      },
-    });
-
-    app.mount(toastWrapper);
-    container.appendChild(toastWrapper);
-
-    const toastInstance: ToastInstance = {
-      id,
-      props,
-      close: () => this.close(id),
-      promise,
-    };
-
-    this.toasts.set(id, toastInstance);
-    return toastInstance;
-  }
-
-  close(id: string): void {
-    const toast = this.toasts.get(id);
-    if (toast) {
-      this.toasts.delete(id);
-    }
-  }
-}
-
-const toastManager = new ToastManager();
-
-export const toast: ToastCall = {
-  info: (title: string, description?: string, options?: ToastOptions) =>
-    toastManager.show({
-      title,
-      description,
-      ...options,
-      type: 'informational',
-    }).promise,
-  success: (title: string, description?: string, options?: ToastOptions) =>
-    toastManager.show({
-      title,
-      description,
-      ...options,
-      type: 'success',
-    }).promise,
-  attention: (title: string, description?: string, options?: ToastOptions) =>
-    toastManager.show({
-      title,
-      description,
-      ...options,
-      type: 'attention',
-    }).promise,
-  error: (title: string, description?: string, options?: ToastOptions) =>
-    toastManager.show({
-      title,
-      description,
-      ...options,
-      type: 'error',
-    }).promise,
-};
-
-export default toastManager;

package/src/components/Toast/types.ts

@@ -1,57 +0,0 @@
-export interface ToastManager {
-  show: (props: ToastProps) => ToastInstance;
-  close: (id: string) => void;
-}
-
-export interface ToastButton {
-  text: string;
-  action: () => void;
-}
-
-export type ToastType = 'informational' | 'attention' | 'success' | 'error';
-
-export interface ToastProps extends ToastOptions {
-  title: string;
-  description?: string;
-}
-
-export interface ToastOptions {
-  type?: ToastType;
-  button?: ToastButton;
-  timeout?: number;
-}
-
-export interface ToastEmits {
-  close: [];
-  destroy: [];
-}
-
-export interface ToastInstance {
-  id: string;
-  props: ToastProps;
-  close: () => void;
-  promise: Promise<void>;
-}
-
-export interface ToastCall {
-  info: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  success: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  attention: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  error: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-}