@weni/unnnic-system 2.13.0 → 2.13.1

package/src/components/Pagination/__tests__/Pagination.spec.js

@@ -0,0 +1,208 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import Pagination from '../Pagination.vue';
+
+function setup(props) {
+  return mount(Pagination, { props });
+}
+
+describe('Pagination', () => {
+  describe('when pagination is not disabled', () => {
+    let wrapper;
+
+    describe('when the user is on the first page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 1,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      it('should show 1, 2, 3, ..., 10 page buttons', () => {
+        const texts = wrapper
+          .findAll('[data-test="page-button"]')
+          .map((element) => element.text());
+
+        ['1', '2', '3', '...', '10'].forEach((value, index) => {
+          expect(texts[index]).contains(value);
+        });
+      });
+
+      it('the previous button should be disabled', () => {
+        expect(
+          wrapper.find('[data-test="previous-button"]').isDisabled(),
+        ).toBeTruthy();
+      });
+
+      describe('when the user clicks on the next button', () => {
+        beforeEach(() => {
+          wrapper.find('[data-test="next-button"]').trigger('click');
+        });
+
+        it('emits @update:model-value with page number 2', () => {
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([2]);
+        });
+      });
+
+      describe('when the user clicks on the right ellipsis button', () => {
+        beforeEach(() => {
+          wrapper.findAll('[data-test="page-button"]').at(-2).trigger('click');
+        });
+
+        it('emits @update:model-value with page number 4', () => {
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([4]);
+        });
+      });
+    });
+
+    describe('when the user is on the second page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 2,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      it('should show 1, 2, 3, ..., 10 page buttons', () => {
+        const texts = wrapper
+          .findAll('[data-test="page-button"]')
+          .map((element) => element.text());
+
+        ['1', '2', '3', '...', '10'].forEach((value, index) => {
+          expect(texts[index]).contains(value);
+        });
+      });
+
+      describe('when the user clicks on the previous button', () => {
+        beforeEach(() => {
+          wrapper.find('[data-test="previous-button"]').trigger('click');
+        });
+
+        it('emits @update:model-value with page number 1', () => {
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([1]);
+        });
+      });
+    });
+
+    describe('when the user is on the last page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 11,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      it('the next button should be disabled', () => {
+        expect(
+          wrapper.find('[data-test="next-button"]').isDisabled(),
+        ).toBeTruthy();
+      });
+    });
+
+    describe('when the user is on the 9th page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 9,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      it('should show 1, ..., 8, 9, 10 page buttons', () => {
+        const texts = wrapper
+          .findAll('[data-test="page-button"]')
+          .map((element) => element.text());
+
+        ['1', '...', '8', '9', '10'].forEach((value, index) => {
+          expect(texts[index]).contains(value);
+        });
+      });
+
+      describe('when the user clicks on the left ellipsis button', () => {
+        beforeEach(() => {
+          wrapper.findAll('[data-test="page-button"]').at(1).trigger('click');
+        });
+
+        it('emits @update:model-value with page number 7', () => {
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([7]);
+        });
+      });
+    });
+
+    describe('when the user is on the 4rd page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 4,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      it('should show 1, ..., 4 ..., 10 page buttons', () => {
+        const texts = wrapper
+          .findAll('[data-test="page-button"]')
+          .map((element) => element.text());
+
+        ['1', '...', '4', '...', '10'].forEach((value, index) => {
+          expect(texts[index]).contains(value);
+        });
+      });
+
+      describe('when the user clicks on the right ellipsis button', () => {
+        beforeEach(() => {
+          wrapper.findAll('[data-test="page-button"]').at(-2).trigger('click');
+        });
+
+        it('emits @update:model-value with page number 5', () => {
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([5]);
+        });
+      });
+    });
+
+    describe('when the user is on the 3rd page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 3,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      describe('when the user wants clicks on the next page button', () => {
+        it('emits @update:model-value with page number 4', () => {
+          wrapper.find('[data-test="next-button"]').trigger('click');
+
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([4]);
+        });
+      });
+    });
+
+    describe('when the user is on the 7th page', () => {
+      beforeEach(() => {
+        wrapper = setup({
+          modelValue: 9,
+          max: 10,
+          disabled: false,
+        });
+      });
+
+      describe('when the user wants clicks on the previous page button', () => {
+        it('emits @update:model-value with page number 8', () => {
+          wrapper.find('[data-test="previous-button"]').trigger('click');
+
+          expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+          expect(wrapper.emitted('update:model-value')).toContainEqual([8]);
+        });
+      });
+    });
+  });
+});

package/src/components/SelectSmart/SelectSmart.vue

@@ -22,9 +22,8 @@
         :iconLeft="
           isAutocompleteAllowed && autocompleteIconLeft ? 'search-1' : ''
         "
-        :iconRight="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        :iconRightClickable="!disabled"
-        @icon-right-click="handleClickInput"
+        :iconRight="active ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+        iconRightSize="ant"
         @click.stop="handleClickInput"
         @update:model-value="searchValue = $event"
       />
@@ -46,7 +45,6 @@
               :withoutSelectsMessage="multipleWithoutSelectsMessage"
               :locale="locale"
               :translations="translations"
-              @clear-selected-options="clearSelectedOptions"
               @unselect-option="unselectOption"
             />
             <div
@@ -56,6 +54,7 @@
                 `size-${size}`,
                 {
                   'with-descriptions': hasDescriptionOptions,
+                  'with-checkboxes': !!multiple,
                 },
               ]"
             >
@@ -329,10 +328,6 @@ export default {
       );
     },
 
-    clearSelectedOptions() {
-      this.$emit('update:modelValue', []);
-    },
-
     handleSelect(option) {
       if (option) {
         if (this.multiple && this.optionIsSelected(option)) {
@@ -559,7 +554,7 @@ export default {
     left: 0;
     right: 0;
 
-    margin-top: 2px;
+    margin-top: $unnnic-spacing-nano;
 
     border-radius: $unnnic-border-radius-sm;
 
@@ -578,7 +573,7 @@ export default {
       margin-right: $unnnic-inline-xs;
       padding-right: $unnnic-inline-xs;
 
-      max-height: calc-max-height(8.5);
+      max-height: calc-max-height(9.25);
 
       overflow-y: auto;
 
@@ -597,14 +592,22 @@ export default {
       }
 
       &.with-descriptions {
-        max-height: calc-max-height(13.5);
+        max-height: calc-max-height(14.25);
+      }
+
+      &.with-checkboxes {
+        max-height: calc-max-height(11.75);
       }
 
       &.size-sm {
-        max-height: calc-max-height(8);
+        max-height: calc-max-height(8.75);
 
         &.with-descriptions {
-          max-height: calc-max-height(12);
+          max-height: calc-max-height(13.75);
+        }
+
+        &.with-checkboxes {
+          max-height: calc-max-height(10.75);
         }
       }
     }
@@ -632,43 +635,12 @@ export default {
   .unnnic-select-smart__input input {
     // entire class name to have higher priority in styles
 
-    color: $unnnic-color-neutral-dark;
-
     &:read-only {
       cursor: pointer;
-
-      &::placeholder {
-        color: $unnnic-color-neutral-cloudy;
-      }
-    }
-
-    &:not(:read-only :focus) {
-      &::placeholder {
-        color: $unnnic-color-neutral-cloudy;
-      }
-    }
-
-    &:not(:read-only) {
-      &:focus {
-        &::placeholder {
-          color: $unnnic-color-neutral-cleanest;
-        }
-      }
     }
 
     &:disabled {
-      box-shadow: inset 0 0 0 $unnnic-border-width-thinner
-        $unnnic-color-neutral-cleanest;
-
       cursor: not-allowed;
-
-      &::placeholder {
-        color: $unnnic-color-neutral-cleanest;
-      }
-
-      + .icon-right {
-        cursor: not-allowed;
-      }
     }
   }
 }

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -20,13 +20,6 @@
           +{{ selectedOptions.length - multipleSelectedsTags }}
         </p>
       </div>
-      <UnnnicIcon
-        class="unnnic-select-smart__options__multiple__selecteds__clear"
-        icon="close-1"
-        size="xs"
-        clickable
-        @click="clearSelectedOptions"
-      />
     </div>
     <p
       v-if="!selectedOptions[0]"
@@ -39,14 +32,12 @@
 
 <script>
 import Tag from '../Tag/Tag.vue';
-import UnnnicIcon from '../Icon.vue';
 import UnnnicI18n from '../../mixins/i18n';
 
 export default {
   name: 'UnnnicSelectSmartMultipleHeader',
   components: {
     Tag,
-    UnnnicIcon,
   },
   mixins: [UnnnicI18n],
   props: {
@@ -85,9 +76,6 @@ export default {
     },
   },
   methods: {
-    clearSelectedOptions() {
-      this.$emit('clear-selected-options');
-    },
     unselectOption(option) {
       this.$emit('unselect-option', option);
     },
@@ -117,6 +105,10 @@ export default {
       margin: $unnnic-spacing-xs;
       margin-right: 0;
 
+      &:first-child {
+        margin-left: $unnnic-spacing-sm;
+      }
+
       &.unnnic-tag {
         outline-color: $unnnic-color-neutral-light;
         background-color: $unnnic-color-neutral-light;
@@ -144,7 +136,7 @@ export default {
     line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
     font-size: $unnnic-font-size-body-md;
 
-    padding: $unnnic-spacing-ant;
+    padding: $unnnic-spacing-ant $unnnic-spacing-sm;
   }
 }
 </style>

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -74,6 +74,7 @@ export default {
       type: Boolean,
       default: false,
     },
+    isMultiple: Boolean,
   },
 };
 </script>
@@ -87,7 +88,7 @@ export default {
   max-width: 100%;
 
   font-family: $unnnic-font-family-secondary;
-  color: $unnnic-color-neutral-dark;
+  color: $unnnic-color-neutral-darkest;
   font-weight: $unnnic-font-weight-regular;
 
   white-space: nowrap;
@@ -95,9 +96,12 @@ export default {
   overflow: hidden;
   -webkit-line-clamp: 1;
 
+  & + & {
+    margin-top: $unnnic-spacing-nano;
+  }
+
   &--selectable:hover,
-  &--focused,
-  &--active {
+  &--focused {
     border-radius: $unnnic-border-radius-sm;
 
     background-color: $unnnic-color-neutral-light;
@@ -109,6 +113,7 @@ export default {
   }
 
   &--with-checkbox {
+    padding: $unnnic-spacing-xs $unnnic-spacing-ant;
     display: flex;
     align-items: center;
     gap: $unnnic-spacing-xs;
@@ -119,13 +124,15 @@ export default {
   }
 
   &__label {
+    display: block;
+
     &--md {
       font-size: $unnnic-font-size-body-gt;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
     }
     &--sm {
       font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-small;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
     }
   }
 
@@ -135,14 +142,11 @@ export default {
     color: $unnnic-color-neutral-cloudy;
     font-weight: $unnnic-font-weight-regular;
 
-    &--md {
+    &--md,
+    &--sm {
       font-size: $unnnic-font-size-body-md;
       line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
     }
-    &--sm {
-      font-size: $unnnic-font-size-body-sm;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-small;
-    }
   }
 }
 </style>

package/src/components/SkeletonLoading/SkeletonLoading.vue

@@ -1,7 +1,14 @@
 <template>
   <component
     :is="tag"
-    v-if="showLoading"
+    v-if="direct"
+    :class="classes"
+    :style="styles"
+  ></component>
+
+  <component
+    :is="tag"
+    v-else-if="showLoading"
   >
     <span
       v-for="(element, index) in elements"
@@ -47,6 +54,9 @@ export default {
       type: Boolean,
       default: undefined,
     },
+    direct: {
+      type: Boolean,
+    },
   },
   setup() {
     const themeStyle = inject('_themeStyle', ref(SkeletonStyle));
@@ -58,11 +68,6 @@ export default {
     };
   },
   computed: {
-    isLoading() {
-      return typeof this.theme.loading !== 'undefined'
-        ? this.theme.loading
-        : this.loading;
-    },
     classes() {
       return [`${this.prefix}-skeleton`];
     },
@@ -86,21 +91,22 @@ export default {
       return elements;
     },
     showLoading() {
-      return typeof this.isLoading !== 'undefined'
-        ? this.isLoading
+      return typeof this.loading !== 'undefined'
+        ? this.loading
         : this.isEmptyVNode(this.$slots.default);
     },
   },
   methods: {
     isEmptyVNode(children) {
       if (!children) return true;
-      const [firstNode] = children;
-      let str = firstNode.text;
+      const [firstNode] = children();
+      let str = firstNode.children;
+
       if (str) {
         // remove all line-break and space character
         str = str.replace(/(\n|\r\n|\s)/g, '');
       }
-      return typeof firstNode.tag === 'undefined' && !str;
+      return !str;
     },
   },
 };

package/src/components/SkeletonLoading/__tests__/SkeletonLoading.spec.js

@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import SkeletonLoading from '../SkeletonLoading.vue';
+
+function setup(options) {
+  return mount(SkeletonLoading, options);
+}
+
+describe('SkeletonLoading', () => {
+  let wrapper;
+
+  describe('when the skeleton loading is a circle', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 1.5,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: true,
+          loading: undefined,
+          direct: false,
+        },
+      });
+    });
+
+    it('should have borderRadius', () => {
+      expect(wrapper.vm.styles.borderRadius).toBe('50%');
+    });
+  });
+
+  describe('when the skeleton loading has not a duration', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: undefined,
+          direct: false,
+        },
+      });
+    });
+
+    it('should not have the gradient background', () => {
+      expect(wrapper.vm.styles.backgroundImage).toBe('');
+    });
+  });
+
+  describe('when the default slot is provided and loading is undefined', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: undefined,
+          direct: false,
+        },
+        slots: { default: 'Default slot' },
+      });
+    });
+
+    it('should not show the skeleton loading', () => {
+      expect(wrapper.html()).toBe('<!--v-if-->');
+    });
+  });
+
+  describe('when the loading prop is provided', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: true,
+          direct: false,
+        },
+      });
+    });
+
+    it('showLoading should be as same as the loading prop', async () => {
+      expect(wrapper.vm.showLoading).toBeTruthy();
+
+      await wrapper.setProps({
+        loading: false,
+      });
+
+      expect(wrapper.vm.showLoading).toBeFalsy();
+    });
+  });
+
+  describe('when the direct', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: true,
+          direct: true,
+        },
+      });
+    });
+
+    it('renders the skeleton loading directly on the component', async () => {
+      expect(wrapper.html()).toBe(
+        '<span class="unnnic-skeleton" style="background-color: rgb(232, 244, 244); width: 100px; height: 100px;"></span>',
+      );
+    });
+  });
+});