@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/Icon.vue

@@ -1,5 +1,24 @@
 <template>
-<span
+  <span
+    v-if="materialSymbolsName"
+    @click="onClick"
+    @mousedown="$emit('mousedown')"
+    @mouseup="$emit('mouseup')"
+    :class="[
+      'material-symbols-rounded',
+      `unnnic-icon-scheme--${scheme}`,
+      `unnnic-icon-size--${size}`,
+      {
+        'unnnic--clickable': clickable,
+        'material-symbols-rounded--filled': filled,
+      },
+    ]"
+  >
+    {{ materialSymbolsName }}
+  </span>
+
+  <component
+    v-else
     @click="onClick"
     @mousedown="$emit('mousedown')"
     @mouseup="$emit('mouseup')"
@@ -10,15 +29,23 @@
       lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
       scheme ? `unnnic-icon-scheme--${scheme}` : '',
     ]"
-    v-html="svg" />
+    :is="svg"
+  />
 </template>
 
 <script>
 import icons from '../utils/icons';
+import OldIconsMap from './Icon/OldIconsMap.json';
 
 export default {
   name: 'uIcon',
   props: {
+    filled: {
+      type: Boolean,
+    },
+    next: {
+      type: Boolean,
+    },
     icon: {
       type: String,
       default: null,
@@ -31,10 +58,22 @@ export default {
       type: String,
       default: 'md',
       validator(value) {
-        return [
-          'nano', 'xs', 'sm', 'ant', 'md', 'lg', 'xl',
-          'avatar-lg', 'avatar-md', 'avatar-sm', 'avatar-xs', 'avatar-nano',
-        ].indexOf(value) !== -1;
+        return (
+          [
+            'nano',
+            'xs',
+            'sm',
+            'ant',
+            'md',
+            'lg',
+            'xl',
+            'avatar-lg',
+            'avatar-md',
+            'avatar-sm',
+            'avatar-xs',
+            'avatar-nano',
+          ].indexOf(value) !== -1
+        );
       },
     },
     lineHeight: {
@@ -46,7 +85,7 @@ export default {
     },
     scheme: {
       type: String,
-      default: '',
+      default: 'neutral-darkest',
     },
   },
   mounted() {},
@@ -54,6 +93,14 @@ export default {
     svg() {
       return icons[this.icon];
     },
+
+    materialSymbolsName() {
+      if (Object.keys(icons).includes(this.icon) && !this.next) {
+        return null;
+      }
+
+      return OldIconsMap[this.icon] || this.icon;
+    },
   },
   methods: {
     onClick() {
@@ -65,9 +112,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/scss/unnnic.scss";
+@import '../assets/scss/unnnic.scss';
 
-.unnnic-icon ::v-deep svg {
+.unnnic-icon :deep(svg) {
   position: absolute;
   top: 0;
   left: 0;
@@ -75,96 +122,157 @@ export default {
 </style>
 
 <style lang="scss">
-@import "../assets/scss/unnnic.scss";
+@import '../assets/scss/unnnic.scss';
 
 $scheme-colors:
-  "background-solo" $unnnic-color-background-solo,
-  "background-sky" $unnnic-color-background-sky,
-  "background-grass" $unnnic-color-background-grass,
-  "background-carpet" $unnnic-color-background-carpet,
-  "background-snow" $unnnic-color-background-snow,
-  "background-lightest" $unnnic-color-background-lightest,
-  "background-white" $unnnic-color-background-white,
-  "neutral-black" $unnnic-color-neutral-black,
-  "neutral-darkest" $unnnic-color-neutral-darkest,
-  "neutral-dark" $unnnic-color-neutral-dark,
-  "neutral-cloudy" $unnnic-color-neutral-cloudy,
-  "neutral-cleanest" $unnnic-color-neutral-cleanest,
-  "neutral-clean" $unnnic-color-neutral-clean,
-  "neutral-soft" $unnnic-color-neutral-soft,
-  "neutral-lightest" $unnnic-color-neutral-lightest,
-  "neutral-light" $unnnic-color-neutral-light,
-  "neutral-white" $unnnic-color-neutral-white,
-  "neutral-snow" $unnnic-color-neutral-snow,
-  "feedback-red" $unnnic-color-feedback-red,
-  "feedback-green" $unnnic-color-feedback-green,
-  "feedback-yellow" $unnnic-color-feedback-yellow,
-  "feedback-blue" $unnnic-color-feedback-blue,
-  "feedback-grey" $unnnic-color-feedback-grey,
-  "aux-blue" $unnnic-color-aux-blue,
-  "aux-purple" $unnnic-color-aux-purple,
-  "aux-orange" $unnnic-color-aux-orange,
-  "aux-lemon" $unnnic-color-aux-lemon,
-  "aux-pink" $unnnic-color-aux-pink,
-  "aux-baby-blue" $unnnic-color-aux-baby-blue,
-  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
-  "aux-baby-red" $unnnic-color-aux-baby-red,
-  "aux-baby-green" $unnnic-color-aux-baby-green,
-  "aux-baby-pink" $unnnic-color-aux-baby-pink,
-  "aux-green-100" $unnnic-color-aux-green-100,
-  "aux-green-300" $unnnic-color-aux-green-300,
-  "aux-green-500" $unnnic-color-aux-green-500,
-  "aux-green-700" $unnnic-color-aux-green-700,
-  "aux-green-900" $unnnic-color-aux-green-900,
-  "aux-blue-100" $unnnic-color-aux-blue-100,
-  "aux-blue-300" $unnnic-color-aux-blue-300,
-  "aux-blue-500" $unnnic-color-aux-blue-500,
-  "aux-blue-700" $unnnic-color-aux-blue-700,
-  "aux-blue-900" $unnnic-color-aux-blue-900,
-  "aux-purple-100" $unnnic-color-aux-purple-100,
-  "aux-purple-300" $unnnic-color-aux-purple-300,
-  "aux-purple-500" $unnnic-color-aux-purple-500,
-  "aux-purple-700" $unnnic-color-aux-purple-700,
-  "aux-purple-900" $unnnic-color-aux-purple-900,
-  "aux-red-100" $unnnic-color-aux-red-100,
-  "aux-red-300" $unnnic-color-aux-red-300,
-  "aux-red-500" $unnnic-color-aux-red-500,
-  "aux-red-700" $unnnic-color-aux-red-700,
-  "aux-red-900" $unnnic-color-aux-red-900,
-  "aux-orange-100" $unnnic-color-aux-orange-100,
-  "aux-orange-300" $unnnic-color-aux-orange-300,
-  "aux-orange-500" $unnnic-color-aux-orange-500,
-  "aux-orange-700" $unnnic-color-aux-orange-700,
-  "aux-orange-900" $unnnic-color-aux-orange-900,
-  "aux-yellow-100" $unnnic-color-aux-yellow-100,
-  "aux-yellow-300" $unnnic-color-aux-yellow-300,
-  "aux-yellow-500" $unnnic-color-aux-yellow-500,
-  "aux-yellow-700" $unnnic-color-aux-yellow-700,
-  "aux-yellow-900" $unnnic-color-aux-yellow-900,
-  "floweditor-blue" $unnnic-color-floweditor-blue,
-  "floweditor-purple" $unnnic-color-floweditor-purple,
-  "floweditor-wine" $unnnic-color-floweditor-wine,
-  "floweditor-orange" $unnnic-color-floweditor-orange,
-  "floweditor-pink" $unnnic-color-floweditor-pink,
-  "floweditor-turquoise" $unnnic-color-floweditor-turquoise,
-  "floweditor-green" $unnnic-color-floweditor-green,
-  "weni-50" $unnnic-color-weni-50,
-  "weni-100" $unnnic-color-weni-100,
-  "weni-200" $unnnic-color-weni-200,
-  "weni-300" $unnnic-color-weni-300,
-  "weni-400" $unnnic-color-weni-400,
-  "weni-500" $unnnic-color-weni-500,
-  "weni-600" $unnnic-color-weni-600,
-  "weni-700" $unnnic-color-weni-700,
-  "weni-800" $unnnic-color-weni-800,
-  "weni-900" $unnnic-color-weni-900,
-  "weni-950" $unnnic-color-weni-950,
-  "brand-weni" $unnnic-color-brand-weni,
-  "brand-weni-dark" $unnnic-color-brand-weni-dark,
-  "brand-weni-soft" $unnnic-color-brand-weni-soft,
-  "brand-sec-dark" $unnnic-color-brand-sec-dark,
-  "brand-sec-soft" $unnnic-color-brand-sec-soft,
-  "brand-sec" $unnnic-color-brand-sec;
+  'background-solo' $unnnic-color-background-solo,
+  'background-sky' $unnnic-color-background-sky,
+  'background-grass' $unnnic-color-background-grass,
+  'background-carpet' $unnnic-color-background-carpet,
+  'background-snow' $unnnic-color-background-snow,
+  'background-lightest' $unnnic-color-background-lightest,
+  'background-white' $unnnic-color-background-white,
+  'neutral-black' $unnnic-color-neutral-black,
+  'neutral-darkest' $unnnic-color-neutral-darkest,
+  'neutral-dark' $unnnic-color-neutral-dark,
+  'neutral-cloudy' $unnnic-color-neutral-cloudy,
+  'neutral-cleanest' $unnnic-color-neutral-cleanest,
+  'neutral-clean' $unnnic-color-neutral-clean,
+  'neutral-soft' $unnnic-color-neutral-soft,
+  'neutral-lightest' $unnnic-color-neutral-lightest,
+  'neutral-light' $unnnic-color-neutral-light,
+  'neutral-white' $unnnic-color-neutral-white,
+  'neutral-snow' $unnnic-color-neutral-snow,
+  'feedback-red' $unnnic-color-feedback-red,
+  'feedback-green' $unnnic-color-feedback-green,
+  'feedback-yellow' $unnnic-color-feedback-yellow,
+  'feedback-blue' $unnnic-color-feedback-blue,
+  'feedback-grey' $unnnic-color-feedback-grey,
+  'aux-blue' $unnnic-color-aux-blue,
+  'aux-purple' $unnnic-color-aux-purple,
+  'aux-orange' $unnnic-color-aux-orange,
+  'aux-lemon' $unnnic-color-aux-lemon,
+  'aux-pink' $unnnic-color-aux-pink,
+  'aux-baby-blue' $unnnic-color-aux-baby-blue,
+  'aux-baby-yellow' $unnnic-color-aux-baby-yellow,
+  'aux-baby-red' $unnnic-color-aux-baby-red,
+  'aux-baby-green' $unnnic-color-aux-baby-green,
+  'aux-baby-pink' $unnnic-color-aux-baby-pink,
+  'aux-green-100' $unnnic-color-aux-green-100,
+  'aux-green-300' $unnnic-color-aux-green-300,
+  'aux-green-500' $unnnic-color-aux-green-500,
+  'aux-green-700' $unnnic-color-aux-green-700,
+  'aux-green-900' $unnnic-color-aux-green-900,
+  'aux-blue-100' $unnnic-color-aux-blue-100,
+  'aux-blue-300' $unnnic-color-aux-blue-300,
+  'aux-blue-500' $unnnic-color-aux-blue-500,
+  'aux-blue-700' $unnnic-color-aux-blue-700,
+  'aux-blue-900' $unnnic-color-aux-blue-900,
+  'aux-purple-100' $unnnic-color-aux-purple-100,
+  'aux-purple-300' $unnnic-color-aux-purple-300,
+  'aux-purple-500' $unnnic-color-aux-purple-500,
+  'aux-purple-700' $unnnic-color-aux-purple-700,
+  'aux-purple-900' $unnnic-color-aux-purple-900,
+  'aux-red-100' $unnnic-color-aux-red-100,
+  'aux-red-300' $unnnic-color-aux-red-300,
+  'aux-red-500' $unnnic-color-aux-red-500,
+  'aux-red-700' $unnnic-color-aux-red-700,
+  'aux-red-900' $unnnic-color-aux-red-900,
+  'aux-orange-100' $unnnic-color-aux-orange-100,
+  'aux-orange-300' $unnnic-color-aux-orange-300,
+  'aux-orange-500' $unnnic-color-aux-orange-500,
+  'aux-orange-700' $unnnic-color-aux-orange-700,
+  'aux-orange-900' $unnnic-color-aux-orange-900,
+  'aux-yellow-100' $unnnic-color-aux-yellow-100,
+  'aux-yellow-300' $unnnic-color-aux-yellow-300,
+  'aux-yellow-500' $unnnic-color-aux-yellow-500,
+  'aux-yellow-700' $unnnic-color-aux-yellow-700,
+  'aux-yellow-900' $unnnic-color-aux-yellow-900,
+  'floweditor-blue' $unnnic-color-floweditor-blue,
+  'floweditor-purple' $unnnic-color-floweditor-purple,
+  'floweditor-wine' $unnnic-color-floweditor-wine,
+  'floweditor-orange' $unnnic-color-floweditor-orange,
+  'floweditor-pink' $unnnic-color-floweditor-pink,
+  'floweditor-turquoise' $unnnic-color-floweditor-turquoise,
+  'floweditor-green' $unnnic-color-floweditor-green,
+  'weni-50' $unnnic-color-weni-50,
+  'weni-100' $unnnic-color-weni-100,
+  'weni-200' $unnnic-color-weni-200,
+  'weni-300' $unnnic-color-weni-300,
+  'weni-400' $unnnic-color-weni-400,
+  'weni-500' $unnnic-color-weni-500,
+  'weni-600' $unnnic-color-weni-600,
+  'weni-700' $unnnic-color-weni-700,
+  'weni-800' $unnnic-color-weni-800,
+  'weni-900' $unnnic-color-weni-900,
+  'weni-950' $unnnic-color-weni-950,
+  'brand-weni' $unnnic-color-brand-weni,
+  'brand-weni-dark' $unnnic-color-brand-weni-dark,
+  'brand-weni-soft' $unnnic-color-brand-weni-soft,
+  'brand-sec-dark' $unnnic-color-brand-sec-dark,
+  'brand-sec-soft' $unnnic-color-brand-sec-soft,
+  'brand-sec' $unnnic-color-brand-sec;
+
+$icon-sizes:
+  'xl' $unnnic-icon-size-xl,
+  'lg' $unnnic-icon-size-lg,
+  'md' $unnnic-icon-size-md,
+  'ant' $unnnic-icon-size-ant,
+  'sm' $unnnic-icon-size-sm,
+  'xs' $unnnic-icon-size-xs,
+  'avatar-lg' $unnnic-avatar-size-lg,
+  'avatar-md' $unnnic-avatar-size-md,
+  'avatar-sm' $unnnic-avatar-size-sm,
+  'avatar-xs' $unnnic-avatar-size-xs,
+  'avatar-nano' $unnnic-avatar-size-nano;
+
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../assets/fonts/Material Symbols Rounded.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Symbols Rounded Filled';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../assets/fonts/Material Symbols Rounded Filled.woff2')
+    format('woff2');
+}
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+
+  &--filled {
+    font-family: 'Material Symbols Rounded Filled';
+  }
+
+  @each $name, $color in $scheme-colors {
+    &.unnnic-icon-scheme--#{$name} {
+      color: $color;
+    }
+  }
+
+  @each $name, $size in $icon-sizes {
+    &.unnnic-icon-size--#{$name} {
+      font-size: $size;
+    }
+  }
+}
 
 @each $name, $color in $scheme-colors {
   .unnnic-icon-scheme {
@@ -180,48 +288,35 @@ $scheme-colors:
   }
 }
 
-$icon-sizes:
-    'xl' $unnnic-icon-size-xl,
-    'lg' $unnnic-icon-size-lg,
-    'md' $unnnic-icon-size-md,
-    'ant' $unnnic-icon-size-ant,
-    'sm' $unnnic-icon-size-sm,
-    'xs' $unnnic-icon-size-xs,
-    'avatar-lg' $unnnic-avatar-size-lg,
-    'avatar-md' $unnnic-avatar-size-md,
-    'avatar-sm' $unnnic-avatar-size-sm,
-    'avatar-xs' $unnnic-avatar-size-xs,
-    'avatar-nano' $unnnic-avatar-size-nano;
-
 $line-heights:
   'sm' $unnnic-line-height-small,
   'md' $unnnic-line-height-medium,
   'lg' $unnnic-line-height-large;
 
-    .unnnic-icon {
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-
-        @each $name, $size in $icon-sizes {
-            &__size--#{$name} {
-                width: $size;
-                height: $size;
-                min-width: $size;
-                min-height: $size;
-
-                @each $line-name, $line-size in $line-heights {
-                  &.unnnic-icon__line-height--#{$line-name} svg {
-                    position: relative;
-                    top: (($size + $line-size) - ($size*1.2))/1.2;
-                  }
-              }
-            }
-        }
+.unnnic-icon {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+
+  @each $name, $size in $icon-sizes {
+    &__size--#{$name} {
+      width: $size;
+      height: $size;
+      min-width: $size;
+      min-height: $size;
 
-        svg {
-            width: 100%;
-            height: 100%;
+      @each $line-name, $line-size in $line-heights {
+        &.unnnic-icon__line-height--#{$line-name} svg {
+          position: relative;
+          top: calc(($size + $line-size) - ($size * 1.2)) / 1.2;
         }
+      }
     }
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

package/src/components/IconLoading/IconLoading.vue

@@ -0,0 +1,48 @@
+<template>
+  <UnnnicIcon
+    class="unnnic-icon-loading"
+    icon="progress_activity"
+    :scheme="scheme"
+    :size="size"
+  />
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'IconLoading',
+
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    scheme: {
+      type: String,
+      default: 'neutral-dark',
+    },
+    size: {
+      type: String,
+      default: 'lg',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.unnnic-icon-loading {
+  user-select: none;
+
+  animation: loading 1300ms linear infinite;
+
+  @keyframes loading {
+    0% {
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

package/src/components/ImportCard/ImportCard.vue

@@ -1,29 +1,44 @@
 <template>
   <div class="unnnic-import-card">
     <div class="unnnic-import-card__data">
-      <div v-if="isImporting" class="unnnic-import-card__data__title">
+      <div
+        v-if="isImporting"
+        class="unnnic-import-card__data__title"
+      >
         {{ $t('import_card.importing') }}...
       </div>
-      <div v-else class="unnnic-import-card__data__title">
+      <div
+        v-else
+        class="unnnic-import-card__data__title"
+      >
         {{ title }}
       </div>
 
-      <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle">
-        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__text">
+      <div
+        v-if="subtitle && isImporting"
+        class="unnnic-import-card__data__subtitle"
+      >
+        <div
+          v-if="subtitle && isImporting"
+          class="unnnic-import-card__data__subtitle__text"
+        >
           {{ subtitle }}
         </div>
-        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__progress">
+        <div
+          v-if="subtitle && isImporting"
+          class="unnnic-import-card__data__subtitle__progress"
+        >
           &nbsp;- {{ importProgress }}%
         </div>
       </div>
     </div>
 
     <div class="unnnic-import-card__buttons">
-      <unnnic-button
+      <UnnnicButton
         v-if="canImport"
         class="unnnic-import-card__buttons__import"
         size="small"
-        :icon-center="uploadIcon"
+        :iconCenter="uploadIcon"
         type="primary"
         @click="importFile"
       >
@@ -32,15 +47,15 @@
           ref="file"
           :accept="acceptedFormats"
           @change="handleFileChange"
-          style="display: none;"
+          style="display: none"
         />
-      </unnnic-button>
+      </UnnnicButton>
 
-      <unnnic-button
+      <UnnnicButton
         v-if="canDelete"
         class="unnnic-import-card__buttons__delete"
         size="small"
-        :icon-center="`close-1`"
+        :iconCenter="`close-1`"
         type="primary"
         @click="emitDeletion"
       />
@@ -172,9 +187,12 @@ export default {
     align-self: center;
 
     &__import {
-      background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
+      background-color: rgba(
+        $unnnic-color-brand-weni,
+        $unnnic-opacity-level-light
+      );
 
-      ::v-deep .unnnic-icon {
+      :deep(.unnnic-icon) {
         svg {
           & .primary {
             fill: $unnnic-color-brand-weni;
@@ -184,9 +202,12 @@ export default {
     }
 
     &__delete {
-      background-color: rgba($unnnic-color-feedback-red, $unnnic-opacity-level-light);
+      background-color: rgba(
+        $unnnic-color-feedback-red,
+        $unnnic-opacity-level-light
+      );
 
-      ::v-deep .unnnic-icon {
+      :deep(.unnnic-icon) {
         svg {
           & .primary {
             fill: $unnnic-color-feedback-red;

package/src/components/Indicator/Indicator.vue

@@ -21,7 +21,9 @@
           'weni-step-indicator__step--active': step <= currentStep,
         }"
       >
-        <span class="weni-step-indicator__label"> {{ titleForStep(step) }} </span>
+        <span class="weni-step-indicator__label">
+          {{ titleForStep(step) }}
+        </span>
       </div>
     </div>
   </div>
@@ -57,7 +59,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .weni-step-indicator {
   display: flex;

package/src/components/Input/BaseInput.vue

@@ -2,22 +2,18 @@
   <input
     v-if="mask"
     v-bind="attributes"
-    :value="value"
+    :value="modelValue"
     :class="classes"
     :type="nativeType"
-    v-on="inputListeners"
-    :size="inputValueLength"
     v-mask="mask"
   />
 
   <input
     v-else
     v-bind="attributes"
-    :value="value"
+    :value="modelValue"
     :class="classes"
     :type="nativeType"
-    v-on="inputListeners"
-    :size="inputValueLength"
   />
 </template>
 
@@ -37,7 +33,7 @@ export default {
         return ['normal', 'error'].indexOf(value) !== -1;
       },
     },
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -55,27 +51,18 @@ export default {
     },
   },
   computed: {
-    inputListeners() {
+    attributes() {
       return {
-        ...this.$listeners,
-        input: (event) => {
-          this.$emit('input', event.srcElement.value);
+        ...this.$attrs,
+        ...this.$attrs['v-bind'],
+        onInput: (event) => {
+          this.$emit('update:modelValue', event.srcElement.value);
         },
       };
     },
-    attributes() {
-      return { ...this.$attrs, ...this.$attrs['v-bind'] };
-    },
-    inputValueLength() {
-      return (this.value || '').length;
-    },
 
     classes() {
-      return [
-        'input',
-        `size-${this.size}`,
-        this.type,
-      ];
+      return ['input', `size-${this.size}`, this.type];
     },
   },
 };