@weni/unnnic-system 2.0.11 → 2.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Drawer/Drawer.vue

@@ -1,10 +1,22 @@
 <template>
-  <aside v-if="modelValue" class="unnnic-drawer">
-    <section class="unnnic-drawer__overlay"></section>
-    <transition appear name="drawer">
+  <aside
+    v-if="modelValue"
+    class="unnnic-drawer"
+  >
+    <section
+      class="unnnic-drawer__overlay"
+      @click.stop="close"
+    />
+    <transition
+      appear
+      name="drawer"
+    >
       <section
         v-if="showDrawer"
-        :class="['unnnic-drawer__container', wide && 'unnnic-drawer__container--wide']"
+        :class="[
+          'unnnic-drawer__container',
+          wide && 'unnnic-drawer__container--wide',
+        ]"
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
@@ -27,17 +39,24 @@
         <section class="unnnic-drawer__content">
           <slot name="content"></slot>
         </section>
-        <footer v-if="showFooter" class="unnnic-drawer__footer">
+        <footer
+          v-if="showFooter"
+          class="unnnic-drawer__footer"
+        >
           <unnnic-button
             v-if="secondaryButtonText"
             size="large"
             type="tertiary"
+            :disabled="disabledSecondaryButton"
+            :loading="loadingSecondaryButton"
             :text="secondaryButtonText"
             @click="$emit('secondaryButtonClick')"
           />
           <unnnic-button
             v-if="primaryButtonText"
             size="large"
+            :disabled="disabledPrimaryButton"
+            :loading="loadingPrimaryButton"
             :type="primaryButtonType"
             :text="primaryButtonText"
             @click="$emit('primaryButtonClick')"
@@ -72,6 +91,22 @@ export default {
     description: {
       type: String,
     },
+    disabledPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    disabledSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
     primaryButtonText: {
       type: String,
     },
@@ -93,8 +128,8 @@ export default {
   },
   computed: {
     showFooter() {
-      return !!(this.primaryButtonText || this.secondaryButtonText)
-    }
+      return !!(this.primaryButtonText || this.secondaryButtonText);
+    },
   },
   methods: {
     close() {
@@ -141,8 +176,8 @@ export default {
 
 .drawer-leave-active,
 .drawer-leave-to {
-   display: none;
-   animation: drawerClose 200ms ease-in;
+  display: none;
+  animation: drawerClose 200ms ease-in;
 }
 
 .unnnic-drawer {
@@ -156,10 +191,9 @@ export default {
 
 .unnnic-drawer__overlay {
   z-index: 9;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
   width: 100%;
   height: 100%;
-
 }
 
 .unnnic-drawer__container {
@@ -173,7 +207,7 @@ export default {
   justify-content: space-between;
   height: 100%;
   background-color: $unnnic-color-neutral-white;
-  width: calc(100%/3);
+  width: calc(100% / 3);
 
   &--wide {
     width: 50%;
@@ -185,7 +219,6 @@ export default {
     border-bottom: 1px solid $unnnic-color-neutral-soft;
     padding: $unnnic-spacing-md;
     .unnnic-drawer__title-container {
-
       .unnnic-drawer__title {
         color: $unnnic-color-neutral-darkest;
         font-family: $unnnic-font-family-secondary;
@@ -207,19 +240,14 @@ export default {
       margin: $unnnic-spacing-nano;
       transform: rotate(180deg);
       display: flex;
-   }
+    }
   }
 
   .unnnic-drawer__content {
     overflow-y: auto;
     color: $unnnic-color-neutral-cloudy;
-    padding: $unnnic-spacing-md $unnnic-spacing-md 0 $unnnic-spacing-md ;
+    padding: $unnnic-spacing-md $unnnic-spacing-md 0 $unnnic-spacing-md;
     flex: 1 0 0;
-    :deep(*) {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
   }
 
   .unnnic-drawer__footer {
@@ -231,4 +259,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/src/components/SelectSmart/SelectSmart.vue

@@ -1,16 +1,12 @@
 <template>
-  <div
-    @keydown="onKeyDownSelect"
-    v-on-click-outside="onClickOutside"
-    class="unnnic-select-smart"
-  >
-    <DropdownSkeleton
+  <div @keydown="onKeyDownSelect" v-on-click-outside="onClickOutside" class="unnnic-select-smart">
+    <dropdown-skeleton
       type="manual"
       :modelValue="active || null"
       position="bottom"
       ref="dropdown-skeleton"
     >
-      <TextInput
+      <text-input
         class="unnnic-select-smart__input"
         ref="selectSmartInput"
         :modelValue="inputValue"
@@ -19,11 +15,9 @@
         :size="size"
         :disabled="disabled"
         :readonly="!isAutocompleteAllowed"
-        :iconLeft="
-          isAutocompleteAllowed && autocompleteIconLeft ? 'search-1' : ''
-        "
-        :iconRight="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        :iconRightClickable="!disabled"
+        :icon-left="isAutocompleteAllowed && autocompleteIconLeft ? 'search-1' : ''"
+        :icon-right="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
+        :icon-right-clickable="!disabled"
         @icon-right-click="handleClickInput"
         @click.stop="handleClickInput"
         @update:modelValue="searchValue = $event"
@@ -40,7 +34,7 @@
           }"
         >
           <div :style="{ overflow: 'auto' }">
-            <SelectSmartMultipleHeader
+            <select-smart-multiple-header
               v-if="multiple"
               :selectedOptions="modelValue"
               :withoutSelectsMessage="multipleWithoutSelectsMessage"
@@ -59,16 +53,14 @@
                 },
               ]"
             >
-              <SelectSmartOption
+              <select-smart-option
                 v-for="(option, index) in filterOptions(options)"
                 :key="option.value"
                 :label="option.label"
                 :description="option.description"
                 :tabindex="index"
                 :size="size"
-                :active="
-                  option.value === modelValue || optionIsSelected(option)
-                "
+                :active="option.value === modelValue || optionIsSelected(option)"
                 :focused="focusedOption && focusedOption.value === option.value"
                 :allowCheckbox="!!multiple"
                 @click="handleSelect(option)"
@@ -83,7 +75,7 @@
           </div>
         </div>
       </template>
-    </DropdownSkeleton>
+    </dropdown-skeleton>
   </div>
 </template>
 
@@ -163,6 +155,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    selectFirst: {
+      type: Boolean,
+      default: true,
+    }
   },
 
   data() {
@@ -202,7 +198,7 @@ export default {
           this.searchValue = this.selectedLabel;
         });
       }
-    } else if (this.options?.[0] && this.options?.[0].value) {
+    } else if (this.selectFirst && this.options?.[0] && this.options?.[0].value) {
       this.selectOption(this.options?.[0]);
     }
   },
@@ -259,8 +255,7 @@ export default {
           return isValueMatch && option.value !== '';
         }
 
-        const isEmptyOption =
-          option.value === '' && this.modelValue.length === 0;
+        const isEmptyOption = option.value === '' && this.modelValue.length === 0;
         return isEmptyOption || isValueMatch;
       });
 
@@ -278,9 +273,7 @@ export default {
     },
 
     hasDescriptionOptions() {
-      return this.options.some(
-        (item) => typeof item.description !== 'undefined',
-      );
+      return this.options.some((item) => typeof item.description !== 'undefined');
     },
 
     autocompletePlaceholder() {
@@ -314,9 +307,7 @@ export default {
 
   methods: {
     optionIsSelected(option) {
-      return this.modelValue.some(
-        (selectedOption) => selectedOption.value === option.value,
-      );
+      return this.modelValue.some((selectedOption) => selectedOption.value === option.value);
     },
 
     clearSelectedOptions() {
@@ -363,18 +354,13 @@ export default {
 
       const getNumber = (str) => parseInt(str.match(/\d+/)?.[0], 10) || 0;
 
-      const filteredOptions = options.filter(
-        ({ value, label }, index, self) => {
-          const labelWithoutAccents = normalizeLabel(label);
-          const isValueUnique =
-            self.findIndex((option) => option.value === value) === index;
-          const matchesSearchTerms = searchTerms.every((term) =>
-            labelWithoutAccents.includes(term),
-          );
+      const filteredOptions = options.filter(({ value, label }, index, self) => {
+        const labelWithoutAccents = normalizeLabel(label);
+        const isValueUnique = self.findIndex((option) => option.value === value) === index;
+        const matchesSearchTerms = searchTerms.every((term) => labelWithoutAccents.includes(term));
 
-          return isValueUnique && matchesSearchTerms && value;
-        },
-      );
+        return isValueUnique && matchesSearchTerms && value;
+      });
 
       if (this.orderedByIndex) {
         return filteredOptions;
@@ -410,8 +396,7 @@ export default {
         valueByType = this.modelValue?.[0]?.value;
       }
       if (type === 'focused') {
-        valueByType =
-          this.focusedOption?.value || this.modelValue.at(-1)?.value;
+        valueByType = this.focusedOption?.value || this.modelValue.at(-1)?.value;
       }
       return options.findIndex((option) => option.value === valueByType);
     },
@@ -419,11 +404,7 @@ export default {
     scrollToOption(optionIndex, scrollBlock = 'nearest') {
       const elementScroll = this.$refs.selectSmartOptionsScrollArea;
 
-      if (
-        elementScroll &&
-        optionIndex >= 0 &&
-        optionIndex < elementScroll.childNodes.length
-      ) {
+      if (elementScroll && optionIndex >= 0 && optionIndex < elementScroll.childNodes.length) {
         const optionElement = elementScroll.childNodes[optionIndex];
 
         if (optionElement instanceof HTMLElement) {
@@ -433,8 +414,7 @@ export default {
     },
 
     selectOption(option) {
-      const selectedOption =
-        option.value === null || option.value.length === 0 ? null : option;
+      const selectedOption = option.value === null || option.value.length === 0 ? null : option;
 
       this.$emit(
         'update:modelValue',
@@ -448,9 +428,7 @@ export default {
       );
 
       if (indexToRemove !== -1) {
-        const newModelValue = this.modelValue;
-        newModelValue.splice(indexToRemove, 1);
-        this.$emit('update:modelValue', newModelValue);
+        this.modelValue.splice(indexToRemove, 1);
       }
 
       if (this.multiple) {
@@ -522,8 +500,7 @@ export default {
           this.scrollToOption(newIndex);
         }
 
-        const newOption =
-          options[newIndex === undefined ? focusedOptionIndex : newIndex];
+        const newOption = options[newIndex === undefined ? focusedOptionIndex : newIndex];
         this.focusedOption = newOption;
       }
     },
@@ -647,8 +624,7 @@ export default {
     }
 
     &:disabled {
-      box-shadow: inset 0 0 0 $unnnic-border-width-thinner
-        $unnnic-color-neutral-cleanest;
+      box-shadow: inset 0 0 0 $unnnic-border-width-thinner $unnnic-color-neutral-cleanest;
 
       cursor: not-allowed;
 

package/src/stories/Drawer.stories.js

@@ -1,7 +1,14 @@
 import unnnicDrawer from '../components/Drawer/Drawer.vue';
 import unnnicButton from '../components/Button/Button.vue';
 
-const primaryButtonTypeOptions = ['primary', 'secondary', 'tertiary', 'alternative', 'warning', 'attention']
+const primaryButtonTypeOptions = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'alternative',
+  'warning',
+  'attention',
+];
 
 export default {
   title: 'Example/Drawer',
@@ -9,7 +16,14 @@ export default {
   argTypes: {
     title: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
-    primaryButtonType: { options: primaryButtonTypeOptions, control: { type: 'select' } },
+    primaryButtonType: {
+      options: primaryButtonTypeOptions,
+      control: { type: 'select' },
+    },
+    disabledPrimaryButton: { control: { type: 'boolean' } },
+    disabledSecondaryButton: { control: { type: 'boolean' } },
+    loadingPrimaryButton: { control: { type: 'boolean' } },
+    loadingSecondaryButton: { control: { type: 'boolean' } },
     primaryButtonText: { control: { type: 'text' } },
     secondaryButtonText: { control: { type: 'text' } },
     modelValue: { control: { type: 'boolean' } },
@@ -20,7 +34,7 @@ export default {
 const Template = (args) => ({
   props: Object.keys(args),
   setup() {
-    return { args }
+    return { args };
   },
   components: { unnnicDrawer, unnnicButton },
   data() {
@@ -30,11 +44,11 @@ const Template = (args) => ({
   },
   methods: {
     primaryClick() {
-      console.log('primaryClick')
+      console.log('primaryClick');
     },
     secondaryClick() {
-      console.log('secondaryClick')
-    }
+      console.log('secondaryClick');
+    },
   },
   template: `
   <div>
@@ -42,7 +56,7 @@ const Template = (args) => ({
     <button @click="opened = !opened">Change</button>
     <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false" @primaryButtonClick="primaryClick" @secondaryButtonClick="secondaryClick">
       <template #content>
-        <p>Conteúdo</p>
+        <p style="padding: 0; margin:0;">Conteúdo</p>
       </template>
     </unnnic-drawer>
   </div>
@@ -70,7 +84,7 @@ const TemplateOveflowed = (args) => ({
   props: Object.keys(args),
   components: { unnnicDrawer, unnnicButton },
   setup() {
-    return { args }
+    return { args };
   },
   data() {
     return {
@@ -83,7 +97,7 @@ const TemplateOveflowed = (args) => ({
     <button @click="opened = !opened">Change</button>
     <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
       <template #content>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p style="padding: 0; margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
@@ -108,7 +122,7 @@ const TemplateVideo = (args) => ({
   props: Object.keys(args),
   components: { unnnicDrawer, unnnicButton },
   setup() {
-    return { args }
+    return { args };
   },
   data() {
     return {
@@ -133,4 +147,4 @@ ContentVideo.args = {
   title: 'Title',
   description: 'Description',
   wide: true,
-};
+};

package/src/stories/SelectSmart2.stories.js

@@ -0,0 +1,59 @@
+import unnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
+
+export default {
+  title: 'Form/SelectSmart2',
+  component: unnnicSelectSmart,
+  argTypes: {
+    'on-update:model-value': { action: '@update:model-value' },
+    size: { control: { type: 'select', options: ['md', 'sm'] } },
+    type: { control: { type: 'select', options: ['normal', 'error'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicSelectSmart,
+  },
+
+  data() {
+    return {
+      selected: [],
+      options: [
+        {
+          value: 't1',
+          label: 'teste 1'
+        },
+        {
+          value: 't2',
+          label: 'teste 2'
+        },
+        {
+          value: 't3',
+          label: 'teste 3'
+        },
+      ]
+    };
+  },
+
+  template: `
+    <div>
+      <pre>v-model: {{ content }}</pre>
+      <unnnic-select-smart :options="options" v-model="selected" multiple :selectFirst="false" />
+    </div>
+  `,
+
+  methods: {},
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  maxLength: 150,
+  disabled: false,
+  type: 'normal',
+  errors: [],
+};