@weni/unnnic-system 3.0.4-alpha.1 → 3.0.5-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.0.4-alpha.1",
+  "version": "3.0.5-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/assets/scss/colors.scss

@@ -343,6 +343,7 @@ $scheme-colors:
   "bg-base" $unnnic-color-white,
   "bg-soft" $unnnic-color-gray-50,
   "bg-muted" $unnnic-color-gray-100,
+  "bg-active" $unnnic-color-teal-600,
   "bg-info" $unnnic-color-aux-blue-100,
   "bg-success" $unnnic-color-aux-green-100,
   "bg-warning" $unnnic-color-aux-yellow-50,
@@ -353,6 +354,7 @@ $scheme-colors:
   "fg-muted" $unnnic-color-gray-300,
   "fg-emphasized" $unnnic-color-gray-900,
   "fg-inverted" $unnnic-color-white,
+  "fg-active" $unnnic-color-teal-600,
   "fg-info" $unnnic-color-aux-blue-500,
   "fg-success" $unnnic-color-aux-green-500,
   "fg-warning" $unnnic-color-aux-yellow-500,
@@ -363,6 +365,7 @@ $scheme-colors:
   "border-soft" $unnnic-color-gray-100,
   "border-muted" $unnnic-color-gray-200,
   "border-emphasized" $unnnic-color-gray-400,
+  "border-active" $unnnic-color-teal-600,
   "border-info" $unnnic-color-aux-blue-300,
   "border-success" $unnnic-color-aux-green-300,
   "border-warning" $unnnic-color-aux-yellow-300,

package/src/components/SelectSmart/SelectSmart.vue

@@ -86,6 +86,7 @@
                 :active="
                   option.value === modelValue || optionIsSelected(option)
                 "
+                :disabled="optionIsSelected(option) && option.disableRemove"
                 :focused="focusedOption && focusedOption.value === option.value"
                 :allowCheckbox="!!multiple"
                 :activeColor="type === 'secondary' ? 'secondary' : 'primary'"
@@ -142,6 +143,10 @@ export default {
           value: 'option1',
           label: 'Option1',
         },
+        {
+          value: 'option2',
+          label: 'Option2',
+        },
       ],
     },
     modelValue: {
@@ -203,6 +208,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    multipleLimit: {
+      type: [Number, null],
+      default: null,
+    },
   },
 
   emits: ['update:searchValue', 'onChange', 'update:modelValue'],
@@ -363,11 +372,23 @@ export default {
 
     handleSelect(option) {
       if (option) {
-        if (this.multiple && this.optionIsSelected(option)) {
+        if (
+          this.multiple &&
+          this.optionIsSelected(option) &&
+          !option.disableRemove
+        ) {
           this.unselectOption(option);
           return;
         }
 
+        if(this.multiple && option.disableRemove && this.optionIsSelected(option)) {
+          return;
+        }
+
+        if (this.multipleLimit && this.modelValue.length >= this.multipleLimit) {
+          return;
+        }
+
         this.selectOption(option);
       }
     },

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -10,7 +10,7 @@
           :key="option.value"
           class="unnnic-select-smart__options__multiple__selecteds__option"
           :text="option.label"
-          hasCloseIcon
+          :hasCloseIcon="!option.disableRemove"
           @close="unselectOption(option)"
         />
         <p

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -19,6 +19,7 @@
       data-testid="checkbox"
       :modelValue="active"
       :size="size"
+      :disabled="disabled"
     />
     <div>
       <span
@@ -77,6 +78,10 @@ export default {
       type: Boolean,
       default: null,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     allowCheckbox: {
       type: Boolean,
       default: false,

package/src/stories/SelectSmart.stories.js

@@ -284,7 +284,7 @@ export const Multiple = {
       { value: 'spain', label: 'Espanha' },
       { value: 'saudi_arabia', label: 'Arábia Saudita' },
     ],
-    multiple: true,
+    multiple:true,
     multipleWithoutSelectsMessage: 'No country selected yet :(',
   },
 };