@weni/unnnic-system 1.16.34 → 1.16.35-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.16.34",
+  "version": "1.16.35-develop.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/AudioRecorder/AudioHandler.vue

@@ -62,7 +62,7 @@ export default {
     width: 11.5 * $unnnic-font-size;
     height: 2px;
     border-radius: $unnnic-border-radius-sm;
-    background: $unnnic-color-neutral-clean;
+    background: $unnnic-color-neutral-cleanest;
 
     &__bar {
       background: $unnnic-color-neutral-darkest;

package/src/components/AudioRecorder/AudioPlayer.vue

@@ -147,7 +147,7 @@ export default {
       height: 100%;
 
       border-radius: $unnnic-border-radius-sm;
-      background: $unnnic-color-neutral-clean;
+      background: $unnnic-color-neutral-cleanest;
     }
     &::-webkit-slider-thumb {
       opacity: 0;
@@ -160,7 +160,7 @@ export default {
       height: 100%;
 
       border-radius: $unnnic-border-radius-sm;
-      background: $unnnic-color-neutral-clean;
+      background: $unnnic-color-neutral-cleanest;
     }
     &::-moz-range-thumb {
       opacity: 0;
@@ -179,7 +179,7 @@ export default {
       .bar {
         width: 3px;
 
-        background: $unnnic-color-neutral-clean;
+        background: $unnnic-color-neutral-cleanest;
         border-radius: 1.5px;
 
         &.active {

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -332,7 +332,7 @@ export default {
     width: 11.5 * $unnnic-font-size;
     height: 2px;
     border-radius: $unnnic-border-radius-sm;
-    background: $unnnic-color-neutral-clean;
+    background: $unnnic-color-neutral-cleanest;
 
     &__bar {
       background: $unnnic-color-neutral-darkest;

package/src/components/AutocompleteSelect/AutocompleteSelect.vue

@@ -312,7 +312,7 @@ export default {
       }
 
       &::-webkit-scrollbar-thumb {
-        background: $unnnic-color-neutral-clean;
+        background: $unnnic-color-neutral-cleanest;
         border-radius: $unnnic-border-radius-pill;
       }
 

package/src/components/Banner/InfoBanner.vue

@@ -144,7 +144,7 @@ export default {
   &__divider {
     align-self: center;
 
-    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
     height: 36px;
     margin: 0 $unnnic-inline-md;
   }

package/src/components/Button/Button.vue

@@ -204,7 +204,7 @@ $scheme-colors:
   }
 
   &--secondary {
-    background-color: rgba($unnnic-color-neutral-clean, $unnnic-opacity-level-light);
+    background-color: rgba($unnnic-color-neutral-cleanest, $unnnic-opacity-level-light);
     color: $unnnic-color-neutral-dark;
     position: relative;
 
@@ -217,7 +217,7 @@ $scheme-colors:
       left: 0;
       right: 0;
       border-radius: $unnnic-border-radius-sm;
-      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
     }
 
     &:hover:enabled:after {
@@ -230,7 +230,7 @@ $scheme-colors:
       cursor: not-allowed;
 
       &:after {
-        border: $unnnic-border-width-thinner dashed $unnnic-color-neutral-clean;
+        border: $unnnic-border-width-thinner dashed $unnnic-color-neutral-cleanest;
       }
     }
   }
@@ -255,7 +255,7 @@ $scheme-colors:
 
     &:disabled {
       background-color: $unnnic-color-neutral-light;
-      color: $unnnic-color-neutral-clean;
+      color: $unnnic-color-neutral-cleanest;
       cursor: not-allowed;
     }
   }

package/src/components/Button/ButtonIcon.vue

@@ -86,7 +86,7 @@ export default {
       right: 0;
       top: 0;
       bottom: 0;
-      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
       border-radius: inherit;
       pointer-events: none;
     }

package/src/components/Card/CardCompany.vue

@@ -238,7 +238,7 @@ export default {
 
         .avatar__background {
           border-radius: 50%;
-          background: $unnnic-color-neutral-clean;
+          background: $unnnic-color-neutral-cleanest;
         }
 
         .avatar {

package/src/components/Card/ContentCard.vue

@@ -73,7 +73,7 @@ export default {
 
     &:hover {
       background-color: $unnnic-color-background-snow;
-      border: 1px solid $unnnic-color-neutral-clean;
+      border: 1px solid $unnnic-color-neutral-cleanest;
     }
   }
 

package/src/components/CardFlow/CardFlow.vue

@@ -78,7 +78,7 @@ export default {
   flex-direction: column;
   background-color: $unnnic-color-background-snow;
   border-radius: $unnnic-border-radius-md;
-  border: $unnnic-border-width-thin solid $unnnic-color-neutral-cleanest;
+  border: $unnnic-border-width-thin solid $unnnic-color-neutral-clean;
   width: min-content;
   min-width: 13.75 * $unnnic-font-size;
 
@@ -162,7 +162,7 @@ export default {
 
         &.has-content {
           background-color: $unnnic-color-neutral-snow;
-          border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+          border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
 
           &.u.font {
             line-height: 0.875 * $unnnic-font-size;

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -148,7 +148,7 @@ export default {
     }
 
     .description {
-      color: $unnnic-color-neutral-cleanest;
+      color: $unnnic-color-neutral-clean;
       font-family: $unnnic-font-family-secondary;
       font-size: $unnnic-font-size-body-lg;
       line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;

package/src/components/CircleProgressBar/CircleProgressBar.vue

@@ -136,7 +136,7 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%);
 
-    color: $unnnic-color-neutral-cleanest;
+    color: $unnnic-color-neutral-clean;
     font-family: $unnnic-font-family-secondary;
     font-weight: $unnnic-font-weight-regular;
     font-size: $unnnic-font-size-body-gt;

package/src/components/Indicator/Indicator.vue

@@ -100,7 +100,7 @@ export default {
     left: 50%;
     top: 100%;
     margin: $unnnic-inline-xs 0 0 0;
-    color: $unnnic-color-neutral-cleanest;
+    color: $unnnic-color-neutral-clean;
     font-size: $unnnic-font-size-body-gt;
     line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
   }

package/src/components/Input/Autocomplete.vue

@@ -237,7 +237,7 @@ $scroll-size: 4px;
         }
 
         &::-webkit-scrollbar-thumb {
-          background: $unnnic-color-neutral-clean;
+          background: $unnnic-color-neutral-cleanest;
           border-radius: $unnnic-border-radius-pill;
         }
 
@@ -280,7 +280,7 @@ $scroll-size: 4px;
           font-weight: $unnnic-font-weight-bold;
           font-size: $unnnic-font-size-body-md;
           line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-          color: $unnnic-color-neutral-clean;
+          color: $unnnic-color-neutral-cleanest;
           margin: 0 $unnnic-spacing-inline-sm;
           margin-top: $unnnic-spacing-stack-sm;
           margin-bottom: $unnnic-spacing-stack-xs;

package/src/components/Input/BaseInput.vue

@@ -93,7 +93,7 @@ export default {
   outline-offset: -$unnnic-border-width-thinner;
   border-radius: $unnnic-border-radius-sm;
   color: $unnnic-color-neutral-dark;
-  caret-color: $unnnic-color-neutral-cleanest;
+  caret-color: $unnnic-color-neutral-clean;
   font-weight: $unnnic-font-weight-regular;
   font-family: $unnnic-font-family-secondary;
   box-sizing: border-box;

package/src/components/InputNext/InputNext.vue

@@ -178,12 +178,12 @@ export default {
     column-gap: $unnnic-spacing-inline-xs;
 
     &:focus-within {
-      outline-color: $unnnic-color-neutral-cleanest;
+      outline-color: $unnnic-color-neutral-clean;
     }
 
     &:has(input:disabled) {
       outline-style: dashed;
-      outline-color: $unnnic-color-neutral-clean;
+      outline-color: $unnnic-color-neutral-cleanest;
       background-color: $unnnic-color-neutral-light;
       cursor: default;
     }
@@ -198,7 +198,7 @@ export default {
       color: $unnnic-color-neutral-dark;
 
       &:focus::placeholder {
-        color: $unnnic-color-neutral-clean;
+        color: $unnnic-color-neutral-cleanest;
       }
 
       &::placeholder {

package/src/components/ModalNext/ModalNext.vue

@@ -256,7 +256,7 @@ export default {
       }
 
       &::-webkit-scrollbar-thumb {
-        background: $unnnic-color-neutral-clean;
+        background: $unnnic-color-neutral-cleanest;
         border-radius: $unnnic-border-radius-pill;
       }
 

package/src/components/Select/Select.vue

@@ -289,7 +289,7 @@ export default {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: $unnnic-color-neutral-clean;
+  background: $unnnic-color-neutral-cleanest;
   border-radius: $unnnic-border-radius-pill;
 }
 
@@ -338,7 +338,7 @@ export default {
 
     &--inactive {
       border: 1px solid $unnnic-color-neutral-soft;
-      color: $unnnic-color-neutral-clean;
+      color: $unnnic-color-neutral-cleanest;
     }
 
     &--active {
@@ -368,7 +368,7 @@ export default {
       }
 
       &::-webkit-scrollbar-thumb {
-        background: $unnnic-color-neutral-clean;
+        background: $unnnic-color-neutral-cleanest;
         border-radius: $unnnic-border-radius-pill;
       }
 

package/src/components/SelectSmart/SelectSmart.vue

@@ -1,6 +1,6 @@
 <template>
   <div @keydown="onKeyDownSelect" v-click-outside="onClickOutside" class="unnnic-select-smart">
-    <dropdown-skeleton type="manual" :value="active" position="bottom" ref="dropdown-skeleton">
+    <dropdown-skeleton type="manual" :value="active" position="bottom">
       <text-input
         class="unnnic-select-smart__input"
         ref="selectSmartInput"
@@ -120,6 +120,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    orderedByIndex: {
+      type: Boolean,
+      default: false,
+    },
     multiple: {
       type: Boolean,
       default: false,
@@ -172,8 +176,6 @@ export default {
   watch: {
     active(newValue) {
       this.$nextTick(() => {
-        this.$refs['dropdown-skeleton'].calculatePosition();
-
         if (newValue && !this.multiple) {
           const activeOptionIndex = this.getOptionIndex('active');
 
@@ -185,10 +187,6 @@ export default {
     },
 
     searchValue() {
-      this.$nextTick(() => {
-        this.$refs['dropdown-skeleton'].calculatePosition();
-      });
-
       this.focusedOption = null;
 
       if (!this.active) this.active = true;
@@ -330,6 +328,10 @@ export default {
         return isValueUnique && matchesSearchTerms && value;
       });
 
+      if (this.orderedByIndex) {
+        return filteredOptions;
+      }
+
       const sortedOptions = filteredOptions.sort((a, b) => {
         const labelA = normalizeLabel(a.label);
         const labelB = normalizeLabel(b.label);
@@ -339,7 +341,6 @@ export default {
 
         return numberA - numberB || labelA.localeCompare(labelB);
       });
-
       return sortedOptions;
     },
 
@@ -480,6 +481,11 @@ export default {
 
   cursor: pointer;
 
+  .dropdown-data {
+    position: absolute !important;
+    top: 100% !important;
+  }
+
   &__options {
     left: 0;
     right: 0;

package/src/components/Sidebar/SidebarPrimary.vue

@@ -343,11 +343,11 @@ $transition-time: 0.4s;
         cursor: not-allowed;
 
         .unnnic-icon ::v-deep .primary {
-          fill: $unnnic-color-neutral-cleanest;
+          fill: $unnnic-color-neutral-clean;
         }
 
         .label {
-          color: $unnnic-color-neutral-cleanest;
+          color: $unnnic-color-neutral-clean;
         }
       }
 

package/src/components/Slider/Slider.vue

@@ -177,13 +177,13 @@ export default {
     right: 0;
     top: 0;
     bottom: 0;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
     border-radius: inherit;
     pointer-events: none;
   }
 
   &:focus:before {
-    border-color: $unnnic-color-neutral-cleanest;
+    border-color: $unnnic-color-neutral-clean;
   }
 
   &:focus {

package/src/components/StarRating/StarRating.vue

@@ -61,7 +61,7 @@ export default {
     font-weight: $unnnic-font-weight-bold;
     font-size: $unnnic-font-size-body-lg;
     line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-neutral-cleanest;
+    color: $unnnic-color-neutral-clean;
 
     .highlight {
       color: $unnnic-color-neutral-darkest;

package/src/components/Tab/Tab.vue

@@ -84,7 +84,7 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-neutral-clean;
+  color: $unnnic-color-neutral-cleanest;
   font-family: $unnnic-font-family-secondary;
   font-weight: $unnnic-font-weight-bold;
   font-size: $unnnic-font-size-body-lg;

package/src/components/Table/Table.vue

@@ -56,7 +56,7 @@ $scroll-size: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $unnnic-color-neutral-clean;
+    background: $unnnic-color-neutral-cleanest;
     border-radius: $unnnic-border-radius-pill;
   }
 
@@ -100,7 +100,7 @@ $scroll-size: 4px;
 
     &.loading {
       font-family: $unnnic-font-family-secondary;
-      color: $unnnic-color-neutral-cleanest;
+      color: $unnnic-color-neutral-clean;
       font-size: $unnnic-font-size-body-gt;
       font-weight: $unnnic-font-weight-regular;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;

package/src/components/Tag/DefaultTag.vue

@@ -90,7 +90,7 @@ export default {
       @each $name, $color in $scheme-colors {
         &.unnnic-tag-scheme--#{$name}:hover {
           outline-style: solid;
-          outline-color: $unnnic-color-neutral-cleanest;
+          outline-color: $unnnic-color-neutral-clean;
           outline-width: $unnnic-border-width-thinner;
           outline-offset: -$unnnic-border-width-thinner;
         }

package/src/components/Tag/IndicatorTag.vue

@@ -69,7 +69,7 @@ export default {
   border: $unnnic-border-width-thinner solid $unnnic-color-background-sky;
 
   &:hover {
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
   }
 
   &--clickable {

package/src/components/TextArea/TextArea.vue

@@ -125,7 +125,7 @@ export default {
     box-sizing: border-box;
     padding: $unnnic-spacing-inset-nano;
     border-radius: $unnnic-border-radius-sm;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
     background-color: $unnnic-color-neutral-snow;
 
     color: $unnnic-color-neutral-dark;
@@ -141,9 +141,9 @@ export default {
     }
 
     &:focus {
-      border-color: $unnnic-color-neutral-cleanest;
+      border-color: $unnnic-color-neutral-clean;
       &::placeholder {
-        color: $unnnic-color-neutral-clean;
+        color: $unnnic-color-neutral-cleanest;
       }
     }
   }
@@ -160,7 +160,7 @@ export default {
 
   &.disabled {
     textarea::placeholder {
-      color: $unnnic-color-neutral-cleanest;
+      color: $unnnic-color-neutral-clean;
     }
   }
 

package/src/components/TextEditor/TextEditor.vue

@@ -437,11 +437,11 @@ export default {
     border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0 0;
     position: relative;
     overflow: hidden;
-    background-color: rgba($unnnic-color-neutral-cleanest, $unnnic-opacity-level-light);
+    background-color: rgba($unnnic-color-neutral-clean, $unnnic-opacity-level-light);
 
     .indicator {
       height: $unnnic-border-width-thin;
-      background-color: $unnnic-color-neutral-cleanest;
+      background-color: $unnnic-color-neutral-clean;
       transition: width 0.2s;
     }
   }
@@ -458,7 +458,7 @@ export default {
     background-color: $unnnic-color-neutral-snow;
     border-radius: 0 0 $unnnic-border-radius-sm $unnnic-border-radius-sm;
     padding: $unnnic-spacing-inset-sm;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
     outline: none;
     color: $unnnic-color-neutral-cloudy;
     font-family: $unnnic-font-family-secondary;

package/src/components/UploadArea/UploadArea.vue

@@ -315,7 +315,7 @@ export default {
     padding: $unnnic-spacing-inset-lg;
 
     // Dashed border with increased dashes spacing and color neutral clean
-    background-image: borderDashed($unnnic-color-neutral-clean);
+    background-image: borderDashed($unnnic-color-neutral-cleanest);
 
     &__has-error {
       background-image: borderDashed($unnnic-color-feedback-red);

package/src/stories/SelectSmart.stories.js

@@ -6,6 +6,7 @@ export default {
   argTypes: {
     size: { control: { type: 'select', options: ['md', 'sm'] } },
     type: { control: { type: 'select', options: ['normal', 'error'] } },
+    orderedByIndex: { control: { type: 'boolean' } },
     autocomplete: { control: { type: 'boolean' } },
     autocompleteIconLeft: { control: { type: 'boolean' } },
     autocompleteClearOnFocus: { control: { type: 'boolean' } },
@@ -34,27 +35,24 @@ const Template = (args, { argTypes }) => ({
 
   template: `
     <div>
-    <unnnic-select-smart
-      v-model="exampleValue"
-      :options="exampleOptions"
-      v-bind="$props"
-    />
+      <unnnic-select-smart
+        v-model="exampleValue"
+        :options="exampleOptions"
+        v-bind="$props"
+      />
 
-    <button v-if="!(disabled || autocomplete)" @click="addDynamicOption">Add dynamic option</button>
-
-    <p v-if="!disabled">v-model: {{exampleValue}}</p>
+      <button v-if="!(disabled || autocomplete)" @click="addDynamicOption">Add dynamic option</button>
     </div>
   `,
 });
 
 const exampleOptionsDefault = [
   { value: '', label: 'Select some option' },
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
+  { value: '5', label: 'Option 5' },
   { value: '3', label: 'Option 3' },
+  { value: '1', label: 'Option 1' },
   { value: '4', label: 'Option 4' },
-  { value: '5', label: 'Option 5' },
-  { value: '5', label: 'Option 5' },
+  { value: '2', label: 'Option 2' },
 ];
 
 const exampleOptionsWithDescriptions = [
@@ -109,6 +107,12 @@ FirstSelected.args = {
   exampleOptions: exampleOptionsFirstSelected,
 };
 
+export const OrderedByIndex = Template.bind({});
+OrderedByIndex.args = {
+  exampleOptions: exampleOptionsDefault,
+  orderedByIndex: true,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,