@weni/unnnic-system 3.0.5-alpha.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.0.5-alpha.0",
+  "version": "3.1.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -99,4 +99,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/components/DataTable/index.vue

@@ -154,14 +154,8 @@
   </table>
 </template>
 
-<script lang="ts">
-export default {
-  name: 'UnnnicDataTable',
-};
-</script>
-
 <script setup lang="ts">
-import { computed, ref, useSlots } from 'vue';
+import { computed, ComputedRef, ref, useSlots } from 'vue';
 
 import Icon from '../Icon.vue';
 import IconArrowsDefault from '../icons/iconArrowsDefault.vue';
@@ -179,6 +173,27 @@ type DataTableItem = {
   [key: string]: any;
 };
 
+interface Props {
+  headers: DataTableHeader[];
+  items: DataTableItem[];
+  isLoading?: boolean;
+  size?: 'sm' | 'md';
+  height?: string;
+  maxHeight?: string;
+  clickable?: boolean;
+  fixedHeaders?: boolean;
+  hideHeaders?: boolean;
+  hidePagination?: boolean;
+  page?: number;
+  pageTotal?: number;
+  pageInterval?: number;
+  locale?: string;
+}
+
+defineOptions({
+  name: 'UnnnicDataTable',
+});
+
 const slots = useSlots();
 
 const emit = defineEmits<{
@@ -187,64 +202,22 @@ const emit = defineEmits<{
   'update:page': [page: number];
 }>();
 
-const props = defineProps<{
-  headers: {
-    type: DataTableHeader[];
-    required: true;
-  };
-  items: {
-    type: DataTableItem[];
-    required: true;
-  };
-  isLoading: {
-    type: Boolean;
-    default: false;
-  };
-  size: {
-    type: 'sm' | 'md';
-    default: 'md';
-  };
-  height: {
-    type: String;
-    default: '';
-  };
-  maxHeight: {
-    type: String;
-    default: '';
-  };
-  clickable: {
-    type: Boolean;
-    default: false;
-  };
-  fixedHeaders: {
-    type: Boolean;
-    default: false;
-  };
-  hideHeaders: {
-    type: Boolean;
-    default: false;
-  };
-  hidePagination: {
-    type: Boolean;
-    default: false;
-  };
-  page: {
-    type: Number;
-    default: 1;
-  };
-  pageTotal: {
-    type: Number;
-    default: 0;
-  };
-  pageInterval: {
-    type: Number;
-    default: 5;
-  };
-  locale: {
-    type: string;
-    default: 'en';
-  };
-}>();
+
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  size: 'md',
+  height: '',
+  maxHeight: '',
+  clickable: false,
+  fixedHeaders: false,
+  hideHeaders: false,
+  hidePagination: false,
+  page: 1,
+  pageTotal: 0,
+  pageInterval: 5,
+  locale: 'en',
+});
 
 const defaultTranslations = {
   without_results: {
@@ -266,7 +239,7 @@ const shouldHideHeaders = computed(() => {
   return props.hideHeaders || !props.headers.length;
 });
 
-const headersItemsKeys: string[] = computed(() => {
+const headersItemsKeys: ComputedRef<string[]> = computed(() => {
   return props.headers.map((header) => header.itemKey);
 });
 
@@ -281,7 +254,7 @@ const getHeaderColumnSize = (header: DataTableHeader): string => {
     : header.size || '1fr';
 };
 
-const gridTemplateColumns: string = computed(() => {
+const gridTemplateColumns: ComputedRef<string> = computed(() => {
   const columnSizes = props.headers.length
     ? props.headers.map(getHeaderColumnSize)
     : props.items[0].content.map(() => '1fr');

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,7 +24,10 @@
       </section>
 
       <section class="unnnic-modal-dialog__container__body">
-        <header v-if="title" class="unnnic-modal-dialog__container__header">
+        <header
+          v-if="title"
+          class="unnnic-modal-dialog__container__header"
+        >
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
@@ -46,7 +49,6 @@
             data-testid="close-icon"
             icon="close"
             clickable
-            scheme="neutral-cloudy"
             @click="close()"
           />
         </header>
@@ -96,12 +98,12 @@
 </template>
 
 <script>
-import UnnnicIcon from "../Icon.vue";
-import UnnnicButton from "../Button/Button.vue";
-import UnnnicI18n from "../../mixins/i18n";
+import UnnnicIcon from '../Icon.vue';
+import UnnnicButton from '../Button/Button.vue';
+import UnnnicI18n from '../../mixins/i18n';
 
 export default {
-  name: "UnnnicModalDialog",
+  name: 'UnnnicModalDialog',
   components: {
     UnnnicIcon,
     UnnnicButton,
@@ -118,29 +120,29 @@ export default {
     },
     type: {
       type: String,
-      default: "",
+      default: '',
       validate(type) {
-        return ["success", "warning", "attention"].includes(type);
+        return ['success', 'warning', 'attention'].includes(type);
       },
     },
     size: {
       type: String,
-      default: "md",
+      default: 'md',
       validate(size) {
-        return ["sm", "md", "lg"].includes(size);
+        return ['sm', 'md', 'lg'].includes(size);
       },
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     icon: {
       type: String,
-      default: "",
+      default: '',
     },
     iconScheme: {
       type: String,
-      default: "",
+      default: '',
     },
     showCloseIcon: {
       type: Boolean,
@@ -163,26 +165,26 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ["primaryButtonClick", "secondaryButtonClick", "update:modelValue"],
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
 
   data() {
     return {
       defaultTranslations: {
         cancel: {
-          "pt-br": "Cancelar",
-          en: "Cancel",
-          es: "Cancelar",
+          'pt-br': 'Cancelar',
+          en: 'Cancel',
+          es: 'Cancelar',
         },
       },
       iconsMapper: {
-        success: { icon: "check_circle", scheme: "aux-green-500" },
-        warning: { icon: "warning", scheme: "aux-red-500" },
-        attention: { icon: "error", scheme: "aux-yellow-500" },
+        success: { icon: 'check_circle', scheme: 'aux-green-500' },
+        warning: { icon: 'warning', scheme: 'aux-red-500' },
+        attention: { icon: 'error', scheme: 'aux-yellow-500' },
       },
       primaryButtonTypeMapper: {
-        success: "primary",
-        warning: "warning",
-        attention: "attention",
+        success: 'primary',
+        warning: 'warning',
+        attention: 'attention',
       },
     };
   },
@@ -193,17 +195,17 @@ export default {
   },
   methods: {
     close() {
-      this.$emit("update:modelValue", false);
+      this.$emit('update:modelValue', false);
     },
     updateBodyOverflow(isHidden) {
-      document.body.style.overflow = isHidden ? "hidden" : "";
+      document.body.style.overflow = isHidden ? 'hidden' : '';
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/scss/unnnic" as *;
+@use '@/assets/scss/unnnic' as *;
 * {
   margin: 0;
   padding: 0;
@@ -310,7 +312,7 @@ export default {
   &__actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: "secondary-button primary-button";
+    grid-template-areas: 'secondary-button primary-button';
     gap: $unnnic-spacing-sm;
     padding: $unnnic-spacing-md;
     flex-shrink: 0;

package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap

@@ -11,7 +11,7 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
           <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
           <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
         </section>
-        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-darkest" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">

package/src/components/SelectSmart/SelectSmart.vue

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

package/src/components/SelectSmart/SelectSmartOption.vue

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

package/src/components/index.ts

@@ -88,9 +88,7 @@ import ModalDialog from "./ModalDialog/ModalDialog.vue";
 import Tour from "./Tour/Tour.vue";
 import Navigator from "./Navigator/index.vue";
 import SelectTime from "./SelectTime/index.vue";
-import TemplatePreview from "./TemplatePreview/TemplatePreview.vue";
-import TemplatePreviewModal from "./TemplatePreview/TemplatePreviewModal.vue";
-import DataTable from './DataTable/index.vue';
+import DataTable from "./DataTable/index.vue";
 
 type VueComponent = Component;
 
@@ -189,8 +187,6 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
-  unnnicTemplatePreview: TemplatePreview,
-  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
 };
 
@@ -284,7 +280,5 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
+export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const unnnicDataTable = DataTable;

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 :(',
   },
 };

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts

@@ -1,9 +0,0 @@
-import { Template } from './types';
-interface Props {
-    template?: Template | null;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    template: Template | null;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-export default _default;
-//# sourceMappingURL=TemplatePreview.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreview.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreview.vue"],"names":[],"mappings":"AAgGA;AA6PA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQxC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B;;cADY,QAAQ,GAAG,IAAI;;AAkN5B,wBAQG"}

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts

@@ -1,15 +0,0 @@
-import { Template } from './types';
-interface Props {
-    locale?: string;
-    template: Template;
-    modelValue: boolean;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-}>, {
-    locale: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=TemplatePreviewModal.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreviewModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreviewModal.vue"],"names":[],"mappings":"AAWA;AAwDA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUxC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;;;;;;YAHU,MAAM;;AAgGjB,wBASG"}