@weni/unnnic-system 2.36.1-alpha.0 → 3.0.0

package/src/components/DatePicker/DatePicker.vue

@@ -183,13 +183,7 @@
         <div
           v-for="(option, index) in periodsLocale"
           :key="index"
-          :class="[
-            'option',
-            {
-              selectable: option.id !== 'custom',
-              selected: optionSelected === option.id,
-            },
-          ]"
+          :class="['option', { selectable: option.id !== 'custom', selected: optionSelected === option.id }]"
           @click="option.id === 'custom' ? null : autoSelect(option.id)"
         >
           {{ option.name }}
@@ -378,12 +372,7 @@ export default {
       if (this.optionSelected === 'custom') {
         this.$emit('update:equivalentOption', '');
       } else {
-        this.$emit(
-          'update:equivalentOption',
-          this.periodsLocale.find(
-            ({ id: periodId }) => periodId === this.optionSelected,
-          )?.name || '',
-        );
+        this.$emit('update:equivalentOption', this.periodsLocale.find(({ id: periodId }) => periodId === this.optionSelected)?.name || '');
       }
     },
 
@@ -393,21 +382,19 @@ export default {
       function isSameTime(date1, date2) {
         return new Date(date1).getTime() === new Date(date2).getTime();
       }
-
+      
       const period = this.periodsLocale.find(({ id: periodId }) => {
-        const { startDate: periodStartDate, endDate: periodEndDate } =
-          this.getStartAndEndDateByPeriod(periodId);
+        const {
+          startDate: periodStartDate,
+          endDate: periodEndDate,
+        } = this.getStartAndEndDateByPeriod(periodId);
 
-        return (
-          isSameTime(startDate, periodStartDate) &&
-          isSameTime(endDate, periodEndDate)
-        );
+        return isSameTime(startDate, periodStartDate) && isSameTime(endDate, periodEndDate);
       });
 
-      this.optionSelected =
-        startDate || endDate ? (period ? period.id : 'custom') : '';
+      this.optionSelected = startDate || endDate ? period ? period.id : 'custom' : '';
     },
-
+    
     dateToString(date) {
       return `${date.getMonth() + 1} ${date.getDate()} ${date.getFullYear()}`;
     },

package/src/components/Drawer/Drawer.vue

@@ -24,10 +24,7 @@
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
-            <slot
-              v-if="$slots.title"
-              name="title"
-            />
+            <slot v-if="$slots.title" name="title"/>
 
             <template v-else>
               <h1

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

@@ -96,12 +96,8 @@ describe('Drawer.vue', () => {
         });
 
         expect(title().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(
-          true,
-        );
-        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe(
-          'Custom Title Content',
-        );
+        expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(true);
+        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe('Custom Title Content');
       });
 
       it('should prioritize title slot over title prop', () => {
@@ -116,9 +112,7 @@ describe('Drawer.vue', () => {
         });
 
         expect(title().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe(
-          'Slot Title',
-        );
+        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe('Slot Title');
       });
     });
   });

package/src/components/FormElement/FormElement.vue

@@ -95,7 +95,7 @@ export default {
   },
   methods: {
     fullySanitize,
-  },
+  }
 };
 </script>
 

package/src/components/Input/__test__/__snapshots__/BaseInput.spec.js.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BaseInput.vue > matches the snapshot 1`] = `"<input data-v-86533b41="" class="input size-md normal" type="text">"`;
+exports[`BaseInput.vue > matches the snapshot 1`] = `"<input data-v-86533b41="" class="input size-md normal" type="text" value="">"`;

package/src/components/Input/__test__/__snapshots__/Input.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Input.vue > matches the snapshot 1`] = `
 "<div data-v-d890ad85="" class="unnnic-form md">
   <p data-v-d890ad85="" class="unnnic-form__label">Sample Label</p>
-  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md text-input--icon-right-size-sm unnnic-form-input" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" hascloudycolor="false" type="text"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
+  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md text-input--icon-right-size-sm unnnic-form-input" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" hascloudycolor="false" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
   <p data-v-d890ad85="" class="unnnic-form__message">Error message</p>
 </div>"
 `;

package/src/components/Input/__test__/__snapshots__/TextInput.spec.js.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md text-input--icon-right-size-sm"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" allowtogglepassword="false" hascloudycolor="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;
+exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md text-input--icon-right-size-sm"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" allowtogglepassword="false" hascloudycolor="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;

package/src/components/Label/Label.vue

@@ -13,8 +13,8 @@ export default {
     },
   },
   methods: {
-    fullySanitize,
-  },
+    fullySanitize
+  }
 };
 </script>
 

package/src/components/ModalNext/ModalNext.vue

@@ -90,7 +90,7 @@
               v-if="$slots.description?.().length"
               name="description"
             >
-            </slot>
+          </slot>
 
             <template v-else>{{ description }}</template>
           </div>
@@ -158,7 +158,7 @@ import UnnnicInput from '../Input/Input.vue';
 import UnnnicButton from '../Button/Button.vue';
 
 export default {
-  name: 'UnnnicModalNext',
+  name: "UnnnicModalNext",
   components: {
     UnnnicIcon,
     UnnnicInput,

package/src/components/Tag/TagNext.vue

@@ -1,5 +1,10 @@
 <template>
-  <section :class="['unnnic-tag-next', `unnnic-tag-next--${scheme}`]">
+  <section 
+    :class="[
+      'unnnic-tag-next',
+      `unnnic-tag-next--${scheme}`
+    ]"
+  >
     <p class="unnnic-tag-next__text">
       {{ text }}
     </p>
@@ -56,5 +61,6 @@ export default {
     background-color: $unnnic-color-weni-100;
     color: $unnnic-color-weni-600;
   }
+
 }
-</style>
+</style> 

package/src/components/TextArea/__test__/__snapshots__/TextArea.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200"></textarea>
+  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
   <!--v-if-->
   <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
 </section>"

package/src/components/{index.js → index.ts}

@@ -1,3 +1,4 @@
+import type { Component } from 'vue';
 import { unnnicFontSize as fontSize } from './config';
 import formElement from './FormElement/FormElement.vue';
 import input from './Input/Input.vue';
@@ -87,9 +88,14 @@ 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 DataTable from './DataTable/index.vue';
 
-export const components = {
+type VueComponent = Component;
+
+export interface ComponentsMap {
+  [key: string]: VueComponent | Function;
+}
+
+export const components: ComponentsMap = {
   unnnicFormElement: formElement,
   unnnicInput: input,
   unnnicInputNext: inputNext,
@@ -180,7 +186,6 @@ export const components = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
-  unnnicDataTable: DataTable,
 };
 
 export const unnnicFontSize = fontSize;
@@ -194,7 +199,7 @@ export const unnnicSidebar = sidebar;
 export const unnnicSidebarItem = sidebarItem;
 export const unnnicTable = table;
 export const unnnicTableRow = tableRow;
-export const unnnicDropdown = dropdown;
+export const unnnicDropdown = dropdown as VueComponent;
 export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
 export const unnnicIcon = icon;
@@ -205,26 +210,26 @@ export const unnnicCard = card;
 export const unnnicSimpleCard = cardSimple;
 export const unnnicCardCompany = cardCompany;
 export const unnnicCardData = cardData;
-export const unnnicCardImage = cardImage;
+export const unnnicCardImage = cardImage as VueComponent;
 // export const unnnicCardFlow = cardFlow;
-export const unnnicCardProject = cardProject;
+export const unnnicCardProject = cardProject as VueComponent;
 export const unnnicCardInformation = cardInformation;
 export const unnnicCheckbox = checkbox;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
-export const unnniclanguageSelect = languageSelect;
+export const unnniclanguageSelect = languageSelect as VueComponent;
 export const unnnicModal = modal;
 export const unnnicModalDialog = ModalDialog;
 export const unnnicModalNext = ModalNext;
 export const unnnicModalUpload = modalUpload;
-export const unnnicSelectSmart = selectSmart;
+export const unnnicSelectSmart = selectSmart as VueComponent;
 // export const unnnicSelect = select;
 export const unnnicSelectItem = selectItem;
 // export const unnnicSelectListItem = selectListItem;
-export const unnnicMultiSelect = multiSelect;
+export const unnnicMultiSelect = multiSelect as VueComponent;
 export const unnnicAlert = alert;
-export const unnnicCallAlert = (props) => callAlert(props);
-export const unnnicCallModal = (props) => callModal(props);
+export const unnnicCallAlert = (props: any) => callAlert(props);
+export const unnnicCallModal = (props: any) => callModal(props);
 // export const unnnicAutocomplete = autocomplete;
 // export const unnnicAutocompleteSelect = autocompleteSelect;
 export const unnnicTag = tag;
@@ -267,11 +272,10 @@ export const unnnicChatsNavbar = ChatsNavbar;
 export const unnnicChatsUserAvatar = ChatsUserAvatar;
 export const unnnicChartMultiLine = ChartMultiLine;
 export const unnnicEmojiPicker = EmojiPicker;
-export const unnnicChartFunnel = ChartFunnel;
+export const unnnicChartFunnel = ChartFunnel as VueComponent;
 export const unnnicDisclaimer = Disclaimer;
 export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicSelectTime = SelectTime;
-export const unnnicDataTable = DataTable;
+export const unnnicSelectTime = SelectTime as VueComponent; 

package/src/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue';
+import { components } from '@/components';
+
+interface UnnnicPlugin {
+  install(app: App): void;
+  [key: string]: any;
+}
+
+const Unnnic: UnnnicPlugin = {
+  install(app: App) {
+    Object.keys(components).forEach((name) => {
+      app.component(name, components[name] as any);
+    });
+  },
+  ...components,
+};
+
+export default Unnnic;
+export * from '@/components'; 

package/src/{main.js → main.ts}

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import Unnnic from './index.js';
+import Unnnic from './index';
 
 const app = createApp(App);
 
 app.use(Unnnic);
-app.mount('#app');
+app.mount('#app'); 

package/src/stories/Button.stories.js

@@ -104,7 +104,7 @@ export const FilledIcon = {
   args: {
     text: 'Button Text',
     iconLeft: 'play_arrow',
-    iconsFilled: true,
+    iconsFilled: true, 
   },
 };
 

package/src/types/index.d.ts

@@ -0,0 +1,51 @@
+import type { App, Component } from 'vue';
+
+export type { IconProps } from '../components/Icon.vue';
+
+export interface UnnnicPlugin {
+  install(app: App): void;
+  [key: string]: any;
+}
+
+export interface ComponentsMap {
+  [key: string]: Component | Function;
+}
+
+export declare const components: ComponentsMap;
+
+export declare const unnnicButton: Component;
+export declare const unnnicInput: Component;
+export declare const unnnicCard: Component;
+export declare const unnnicModal: Component;
+export declare const unnnicIcon: Component;
+export declare const unnnicDropdown: Component;
+export declare const unnnicTable: Component;
+export declare const unnnicPagination: Component;
+export declare const unnnicAlert: Component;
+export declare const unnnicCheckbox: Component;
+export declare const unnnicRadio: Component;
+export declare const unnnicSwitch: Component;
+export declare const unnnicTextArea: Component;
+export declare const unnnicTooltip: Component;
+export declare const unnnicBreadcrumb: Component;
+export declare const unnnicLabel: Component;
+export declare const unnnicDatePicker: Component;
+export declare const unnnicSelectSmart: Component;
+export declare const unnnicMultiSelect: Component;
+export declare const unnnicTag: Component;
+export declare const unnnicTab: Component;
+export declare const unnnicAccordion: Component;
+export declare const unnnicCollapse: Component;
+export declare const unnnicCarousel: Component;
+export declare const unnnicSidebar: Component;
+export declare const unnnicDrawer: Component;
+export declare const unnnicProgressBar: Component;
+export declare const unnnicSkeletonLoading: Component;
+
+export declare const unnnicCallAlert: (props: any) => void;
+export declare const unnnicCallModal: (props: any) => void;
+
+export declare const unnnicFontSize: any;
+
+declare const Unnnic: UnnnicPlugin;
+export default Unnnic; 

package/src/types/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+} 

package/src/types/vueuse-overrides.d.ts

@@ -0,0 +1,7 @@
+declare module '@vueuse/components' {
+  export interface OnClickOutsideOptions {
+    [key: string]: any;
+  }
+  
+  export const vOnClickOutside: any;
+}