@weni/unnnic-system 3.2.7 → 3.2.9-alpha.0

package/src/types/unnnic-utils.d.ts

@@ -1,88 +1,88 @@
 export type UnnnicColorToken =
-  | "background-solo"
-  | "background-sky"
-  | "background-grass"
-  | "background-carpet"
-  | "background-snow"
-  | "background-lightest"
-  | "background-white"
-  | "neutral-black"
-  | "neutral-darkest"
-  | "neutral-dark"
-  | "neutral-cloudy"
-  | "neutral-cleanest"
-  | "neutral-clean"
-  | "neutral-soft"
-  | "neutral-lightest"
-  | "neutral-light"
-  | "neutral-white"
-  | "neutral-snow"
-  | "feedback-red"
-  | "feedback-green"
-  | "feedback-yellow"
-  | "feedback-blue"
-  | "feedback-grey"
-  | "aux-blue"
-  | "aux-purple"
-  | "aux-orange"
-  | "aux-lemon"
-  | "aux-pink"
-  | "aux-baby-blue"
-  | "aux-baby-yellow"
-  | "aux-baby-red"
-  | "aux-baby-green"
-  | "aux-baby-pink"
-  | "aux-green-100"
-  | "aux-green-300"
-  | "aux-green-500"
-  | "aux-green-700"
-  | "aux-green-900"
-  | "aux-blue-100"
-  | "aux-blue-300"
-  | "aux-blue-500"
-  | "aux-blue-700"
-  | "aux-blue-900"
-  | "aux-purple-100"
-  | "aux-purple-300"
-  | "aux-purple-500"
-  | "aux-purple-700"
-  | "aux-purple-900"
-  | "aux-red-100"
-  | "aux-red-300"
-  | "aux-red-500"
-  | "aux-red-700"
-  | "aux-red-900"
-  | "aux-orange-100"
-  | "aux-orange-300"
-  | "aux-orange-500"
-  | "aux-orange-700"
-  | "aux-orange-900"
-  | "aux-yellow-100"
-  | "aux-yellow-300"
-  | "aux-yellow-500"
-  | "aux-yellow-700"
-  | "aux-yellow-900"
-  | "floweditor-blue"
-  | "floweditor-purple"
-  | "floweditor-wine"
-  | "floweditor-orange"
-  | "floweditor-pink"
-  | "floweditor-turquoise"
-  | "floweditor-green"
-  | "weni-50"
-  | "weni-100"
-  | "weni-200"
-  | "weni-300"
-  | "weni-400"
-  | "weni-500"
-  | "weni-600"
-  | "weni-700"
-  | "weni-800"
-  | "weni-900"
-  | "weni-950"
-  | "brand-weni"
-  | "brand-weni-dark"
-  | "brand-weni-soft"
-  | "brand-sec-dark"
-  | "brand-sec-soft"
-  | "brand-sec";
+  | 'background-solo'
+  | 'background-sky'
+  | 'background-grass'
+  | 'background-carpet'
+  | 'background-snow'
+  | 'background-lightest'
+  | 'background-white'
+  | 'neutral-black'
+  | 'neutral-darkest'
+  | 'neutral-dark'
+  | 'neutral-cloudy'
+  | 'neutral-cleanest'
+  | 'neutral-clean'
+  | 'neutral-soft'
+  | 'neutral-lightest'
+  | 'neutral-light'
+  | 'neutral-white'
+  | 'neutral-snow'
+  | 'feedback-red'
+  | 'feedback-green'
+  | 'feedback-yellow'
+  | 'feedback-blue'
+  | 'feedback-grey'
+  | 'aux-blue'
+  | 'aux-purple'
+  | 'aux-orange'
+  | 'aux-lemon'
+  | 'aux-pink'
+  | 'aux-baby-blue'
+  | 'aux-baby-yellow'
+  | 'aux-baby-red'
+  | 'aux-baby-green'
+  | 'aux-baby-pink'
+  | 'aux-green-100'
+  | 'aux-green-300'
+  | 'aux-green-500'
+  | 'aux-green-700'
+  | 'aux-green-900'
+  | 'aux-blue-100'
+  | 'aux-blue-300'
+  | 'aux-blue-500'
+  | 'aux-blue-700'
+  | 'aux-blue-900'
+  | 'aux-purple-100'
+  | 'aux-purple-300'
+  | 'aux-purple-500'
+  | 'aux-purple-700'
+  | 'aux-purple-900'
+  | 'aux-red-100'
+  | 'aux-red-300'
+  | 'aux-red-500'
+  | 'aux-red-700'
+  | 'aux-red-900'
+  | 'aux-orange-100'
+  | 'aux-orange-300'
+  | 'aux-orange-500'
+  | 'aux-orange-700'
+  | 'aux-orange-900'
+  | 'aux-yellow-100'
+  | 'aux-yellow-300'
+  | 'aux-yellow-500'
+  | 'aux-yellow-700'
+  | 'aux-yellow-900'
+  | 'floweditor-blue'
+  | 'floweditor-purple'
+  | 'floweditor-wine'
+  | 'floweditor-orange'
+  | 'floweditor-pink'
+  | 'floweditor-turquoise'
+  | 'floweditor-green'
+  | 'weni-50'
+  | 'weni-100'
+  | 'weni-200'
+  | 'weni-300'
+  | 'weni-400'
+  | 'weni-500'
+  | 'weni-600'
+  | 'weni-700'
+  | 'weni-800'
+  | 'weni-900'
+  | 'weni-950'
+  | 'brand-weni'
+  | 'brand-weni-dark'
+  | 'brand-weni-soft'
+  | 'brand-sec-dark'
+  | 'brand-sec-soft'
+  | 'brand-sec';

package/src/types/vue-shims.d.ts

@@ -2,4 +2,4 @@ declare module '*.vue' {
   import type { DefineComponent } from 'vue';
   const component: DefineComponent<{}, {}, any>;
   export default component;
-} 
+}

package/src/types/vueuse-overrides.d.ts

@@ -2,6 +2,6 @@ declare module '@vueuse/components' {
   export interface OnClickOutsideOptions {
     [key: string]: any;
   }
-  
+
   export const vOnClickOutside: any;
-} 
+}

package/src/utils/call.js

@@ -1,30 +1,58 @@
 import { createApp } from 'vue';
 import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
+import ToastInstance from '../components/Toast/ToastManager';
 import mitt from 'mitt';
 
 const emitter = mitt();
-
-const callAlert = ({ props, containerRef }) => {
-  const AlertComponent = createApp(Alert, {
-    ...props,
-    onClose: () => {
-      instance.$el.remove();
-    },
-    created() {
-      emitter.on(['close'], () => {
+const callAlert = ({ props, containerRef, seconds }) => {
+  if (props.version === '1.1' || containerRef) {
+    const AlertComponent = createApp(Alert, {
+      ...props,
+      seconds,
+      version: '1.1',
+      onClose: () => {
         instance.$el.remove();
-      });
-    },
-  });
-  const element = document.createElement('div');
-  const instance = AlertComponent.mount(element);
+      },
+      created() {
+        emitter.on(['close'], () => {
+          instance.$el.remove();
+        });
+      },
+    });
+    const element = document.createElement('div');
+    const instance = AlertComponent.mount(element);
 
-  if (containerRef) {
-    instance.$el.style.position = 'absolute';
-    containerRef.appendChild(instance.$el);
+    if (containerRef) {
+      instance.$el.style.position = 'absolute';
+      containerRef.appendChild(instance.$el);
+    } else {
+      document.body.appendChild(instance.$el);
+    }
   } else {
-    document.body.appendChild(instance.$el);
+    const typeMap = {
+      success: 'success',
+      error: 'error',
+      attention: 'attention',
+      default: 'informational',
+      'feedback-green': 'success',
+      'feedback-red': 'error',
+    };
+
+    const toastProps = {
+      timeout: seconds ? seconds * 1000 : 5000,
+      type: typeMap[props.scheme || props.type] || typeMap.default,
+
+      onClose: () => {
+        emitter.emit(['close']);
+      },
+    };
+
+    ToastInstance.show({
+      title: props.text,
+      description: '',
+      ...toastProps,
+    });
   }
 };
 

package/src/utils/plugins/i18n.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import { createI18n } from 'vue-i18n';
 
 import en from '../../locales/en.json';

package/dist/unnnic.mjs

@@ -1,182 +0,0 @@
-import { bd as c, b9 as s, bE as e, aO as r, bk as t, bn as u, aG as o, aH as U, ba as b, bb as l, aT as d, aV as C, aW as m, aX as p, aZ as g, by as h, aY as I, bg as S, bA as T, bQ as D, bB as A, bO as M, bz as x, bw as B, bH as P, bI as R, bJ as v, bK as w, bM as L, bN as N, a_ as k, bY as F, bF as E, a$ as f, bl as j, bq as y, bW as z, bv as H, bm as q, bR as G, bS as J, bs as K, aM as O, aN as Q, bP as V, aB as W, aC as X, aP as Y, aR as Z, aQ as _, bu as $, be as nn, aD as an, aF as cn, aE as sn, bh as en, b2 as rn, b3 as tn, b4 as un, b5 as on, bC as Un, b8 as bn, bV as ln, br as dn, bG as Cn, b0 as mn, bL as pn, b7 as gn, b6 as hn, bX as In, aI as Sn, aJ as Tn, aU as Dn, bf as An, bp as Mn, bD as xn, bo as Bn, bi as Pn, aK as Rn, bT as vn, aL as wn, bj as Ln, bc as Nn, bx as kn, aS as Fn, bU as En, bt as fn, b1 as jn, c as yn, U as zn, Q as Hn, M as qn, ag as Gn, o as Jn, Y as Kn, $ as On, f as Qn, g as Vn, N as Wn, O as Xn, t as Yn, w as Zn, x as _n, y as $n, A as na, aa, z as ia, T as ca, ac as sa, as as ea, ad as ra, aq as ta, ab as ua, a8 as oa, aj as Ua, ak as ba, al as la, am as da, ao as Ca, ap as ma, B as pa, aA as ga, ah as ha, C as Ia, Z as Sa, a2 as Ta, ay as Da, a7 as Aa, _ as Ma, at as xa, au as Ba, a4 as Pa, m as Ra, n as va, ar as wa, u as La, a as Na, p as ka, r as Fa, q as Ea, a6 as fa, R as ja, b as ya, e as za, d as Ha, V as qa, F as Ga, G as Ja, H as Ka, I as Oa, ae as Qa, L as Va, ax as Wa, a3 as Xa, ai as Ya, D as Za, an as _a, K as $a, J as ni, az as ai, i as ii, j as ci, v as si, S as ei, a1 as ri, af as ti, a0 as ui, W as oi, k as Ui, av as bi, l as li, X as di, P as Ci, a9 as mi, s as pi, aw as gi, a5 as hi, E as Ii } from "./index-5f770b98.mjs";
-import "vue";
-export {
-  c as UnnnicAccordion,
-  s as UnnnicAlert,
-  e as UnnnicAudioRecorder,
-  r as UnnnicAvatarIcon,
-  t as UnnnicBanner,
-  u as UnnnicBreadcrumb,
-  o as UnnnicButton,
-  U as UnnnicButtonIcon,
-  b as UnnnicCallAlert,
-  l as UnnnicCallModal,
-  d as UnnnicCard,
-  C as UnnnicCardCompany,
-  m as UnnnicCardData,
-  p as UnnnicCardImage,
-  g as UnnnicCardInformation,
-  h as UnnnicCardNumber,
-  I as UnnnicCardProject,
-  S as UnnnicCarousel,
-  T as UnnnicChartBar,
-  D as UnnnicChartFunnel,
-  A as UnnnicChartLine,
-  M as UnnnicChartMultiLine,
-  x as UnnnicChartRainbow,
-  B as UnnnicChatText,
-  P as UnnnicChatsContact,
-  R as UnnnicChatsDashboardTagLive,
-  v as UnnnicChatsHeader,
-  w as UnnnicChatsMessage,
-  L as UnnnicChatsNavbar,
-  N as UnnnicChatsUserAvatar,
-  k as UnnnicCheckbox,
-  F as UnnnicChip,
-  E as UnnnicCircleProgressBar,
-  f as UnnnicCollapse,
-  j as UnnnicComment,
-  y as UnnnicDataArea,
-  z as UnnnicDataTable,
-  H as UnnnicDateFilter,
-  q as UnnnicDatePicker,
-  G as UnnnicDisclaimer,
-  J as UnnnicDrawer,
-  K as UnnnicDropArea,
-  O as UnnnicDropdown,
-  Q as UnnnicDropdownItem,
-  V as UnnnicEmojiPicker,
-  W as UnnnicFontSize,
-  X as UnnnicFormElement,
-  Y as UnnnicIcon,
-  Z as UnnnicIconLoading,
-  _ as UnnnicIconSvg,
-  $ as UnnnicImportCard,
-  nn as UnnnicIndicator,
-  an as UnnnicInput,
-  cn as UnnnicInputDatePicker,
-  sn as UnnnicInputNext,
-  en as UnnnicLabel,
-  rn as UnnnicModal,
-  tn as UnnnicModalDialog,
-  un as UnnnicModalNext,
-  on as UnnnicModalUpload,
-  Un as UnnnicMoodRating,
-  bn as UnnnicMultiSelect,
-  ln as UnnnicNavigator,
-  dn as UnnnicPagination,
-  Cn as UnnnicProgressBar,
-  mn as UnnnicRadio,
-  pn as UnnnicReplyMessage,
-  gn as UnnnicSelectItem,
-  hn as UnnnicSelectSmart,
-  In as UnnnicSelectTime,
-  Sn as UnnnicSidebar,
-  Tn as UnnnicSidebarItem,
-  Dn as UnnnicSimpleCard,
-  An as UnnnicSkeletonLoading,
-  Mn as UnnnicSlider,
-  xn as UnnnicStarRating,
-  Bn as UnnnicSwitch,
-  Pn as UnnnicTab,
-  Rn as UnnnicTable,
-  vn as UnnnicTableNext,
-  wn as UnnnicTableRow,
-  Ln as UnnnicTabsExpanded,
-  Nn as UnnnicTag,
-  kn as UnnnicTextArea,
-  Fn as UnnnicToolTip,
-  En as UnnnicTour,
-  fn as UnnnicUploadArea,
-  jn as UnnniclanguageSelect,
-  yn as components,
-  zn as default,
-  Hn as unnnicAccordion,
-  qn as unnnicAlert,
-  Gn as unnnicAudioRecorder,
-  Jn as unnnicAvatarIcon,
-  Kn as unnnicBanner,
-  On as unnnicBreadcrumb,
-  Qn as unnnicButton,
-  Vn as unnnicButtonIcon,
-  Wn as unnnicCallAlert,
-  Xn as unnnicCallModal,
-  Yn as unnnicCard,
-  Zn as unnnicCardCompany,
-  _n as unnnicCardData,
-  $n as unnnicCardImage,
-  na as unnnicCardInformation,
-  aa as unnnicCardNumber,
-  ia as unnnicCardProject,
-  ca as unnnicCarousel,
-  sa as unnnicChartBar,
-  ea as unnnicChartFunnel,
-  ra as unnnicChartLine,
-  ta as unnnicChartMultiLine,
-  ua as unnnicChartRainbow,
-  oa as unnnicChatText,
-  Ua as unnnicChatsContact,
-  ba as unnnicChatsDashboardTagLive,
-  la as unnnicChatsHeader,
-  da as unnnicChatsMessage,
-  Ca as unnnicChatsNavbar,
-  ma as unnnicChatsUserAvatar,
-  pa as unnnicCheckbox,
-  ga as unnnicChip,
-  ha as unnnicCircleProgressBar,
-  Ia as unnnicCollapse,
-  Sa as unnnicComment,
-  Ta as unnnicDataArea,
-  Da as unnnicDataTable,
-  Aa as unnnicDateFilter,
-  Ma as unnnicDatePicker,
-  xa as unnnicDisclaimer,
-  Ba as unnnicDrawer,
-  Pa as unnnicDropArea,
-  Ra as unnnicDropdown,
-  va as unnnicDropdownItem,
-  wa as unnnicEmojiPicker,
-  La as unnnicFontSize,
-  Na as unnnicFormElement,
-  ka as unnnicIcon,
-  Fa as unnnicIconLoading,
-  Ea as unnnicIconSvg,
-  fa as unnnicImportCard,
-  ja as unnnicIndicator,
-  ya as unnnicInput,
-  za as unnnicInputDatePicker,
-  Ha as unnnicInputNext,
-  qa as unnnicLabel,
-  Ga as unnnicModal,
-  Ja as unnnicModalDialog,
-  Ka as unnnicModalNext,
-  Oa as unnnicModalUpload,
-  Qa as unnnicMoodRating,
-  Va as unnnicMultiSelect,
-  Wa as unnnicNavigator,
-  Xa as unnnicPagination,
-  Ya as unnnicProgressBar,
-  Za as unnnicRadio,
-  _a as unnnicReplyMessage,
-  $a as unnnicSelectItem,
-  ni as unnnicSelectSmart,
-  ai as unnnicSelectTime,
-  ii as unnnicSidebar,
-  ci as unnnicSidebarItem,
-  si as unnnicSimpleCard,
-  ei as unnnicSkeletonLoading,
-  ri as unnnicSlider,
-  ti as unnnicStarRating,
-  ui as unnnicSwitch,
-  oi as unnnicTab,
-  Ui as unnnicTable,
-  bi as unnnicTableNext,
-  li as unnnicTableRow,
-  di as unnnicTabsExpanded,
-  Ci as unnnicTag,
-  mi as unnnicTextArea,
-  pi as unnnicToolTip,
-  gi as unnnicTour,
-  hi as unnnicUploadArea,
-  Ii as unnniclanguageSelect
-};

package/src/components/Alert/AlertBanner.vue

@@ -1,182 +0,0 @@
-<template>
-  <section
-    :class="[
-      'banner-alert',
-      {
-        'banner-alert--banner-danger': type === 'danger',
-        'banner-alert--banner-warning': type === 'warning',
-      },
-    ]"
-  >
-    <header
-      v-show="text"
-      class="banner-alert__container-text"
-    >
-      <UnnnicIcon
-        v-show="isShowTextIcon(type)"
-        class="banner-alert__textIcon"
-        :icon="getIconType(type)"
-        size="sm"
-        scheme="neutral-white"
-        data-test="unnnic-icon"
-      />
-      <p class="text">{{ text }}</p>
-      <a
-        v-if="linkHref"
-        class="banner-alert__link"
-        :href="linkHref"
-        :target="linkTarget"
-      >
-        {{ linkText }}
-      </a>
-    </header>
-
-    <div
-      v-show="showCloseButton"
-      class="banner-alert__close"
-      @click="emitClose"
-    >
-      <UnnnicIcon
-        icon="close"
-        size="sm"
-        scheme="neutral-white"
-        data-test="unnnic-close-icon"
-      />
-    </div>
-  </section>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: false,
-    },
-    linkHref: {
-      type: String,
-      default: '',
-    },
-    linkTarget: {
-      type: String,
-      default: '_blank',
-    },
-    linkText: {
-      type: String,
-      default: 'Learn more',
-    },
-    type: {
-      type: String,
-      default: 'info',
-    },
-  },
-  methods: {
-    getIconType(type) {
-      if (type === 'danger') return 'block';
-      if (!type.trim()) return 'info'; // check if type is empty or whitespace
-      return type;
-    },
-    isShowTextIcon(type) {
-      return ['danger', 'warning', 'info', ''].includes(type);
-    },
-    emitClose() {
-      this.onClose();
-
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.banner-alert {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  text-align: center;
-  margin-bottom: $unnnic-spacing-sm;
-
-  color: $unnnic-color-neutral-white;
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-  font-weight: $unnnic-font-weight-regular;
-  background-color: $unnnic-color-aux-blue-500;
-
-  &__container-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
-    flex-grow: 1;
-
-    .text {
-      margin: 0 $unnnic-spacing-nano 0 0;
-    }
-  }
-
-  &__textIcon {
-    margin-right: $unnnic-spacing-xs;
-  }
-
-  &__link {
-    color: inherit;
-    display: block;
-    font-weight: $unnnic-font-weight-bold;
-    text-decoration: underline;
-    text-underline-position: under;
-  }
-
-  &__close {
-    display: flex;
-    align-items: center;
-    max-height: 38px;
-    padding: 0 $unnnic-spacing-sm;
-    cursor: pointer;
-    user-select: none;
-    border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-blue-300;
-    &:hover {
-      background-color: $unnnic-color-aux-blue-300;
-    }
-  }
-
-  &--banner-warning {
-    background-color: $unnnic-color-aux-orange-500;
-
-    .banner-alert__close {
-      border-left: $unnnic-border-width-thinner solid
-        $unnnic-color-aux-orange-300;
-
-      &:hover {
-        background-color: $unnnic-color-aux-orange-300;
-      }
-    }
-  }
-
-  &--banner-danger {
-    background-color: $unnnic-color-aux-red-500;
-
-    .banner-alert__close {
-      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
-
-      &:hover {
-        background-color: $unnnic-color-aux-red-300;
-      }
-    }
-  }
-}
-</style>

package/src/components/Alert/AlertCaller.vue

@@ -1,49 +0,0 @@
-<template>
-  <button @click="callAlert">Launch alert</button>
-</template>
-
-<script>
-import alert from '../../utils/call';
-
-export default {
-  props: {
-    title: {
-      type: String,
-      default: null,
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
-    scheme: {
-      type: String,
-      default: null,
-    },
-    seconds: {
-      type: Number,
-      default: 3,
-    },
-    closeText: {
-      type: String,
-      default: null,
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-    },
-  },
-  methods: {
-    callAlert() {
-      alert.callAlert({ props: this.$props, seconds: this.seconds });
-    },
-  },
-};
-</script>