@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/UploadArea/UploadArea.vue

@@ -14,7 +14,7 @@
       v-on:drop.stop.prevent="drop"
       @click="() => this.$refs.file.click()"
     >
-      <unnnic-icon-svg
+      <UnnnicIconSvg
         class="unnnic-upload-area__dropzone__icon"
         icon="upload-bottom-1"
         :scheme="hasError ? 'feedback-red' : 'brand-weni'"
@@ -35,14 +35,17 @@
         <span
           :class="[
             'unnnic-upload-area__dropzone__content__subtitle',
-            { 'unnnic-upload-area__dropzone__content__subtitle__error': hasError },
+            {
+              'unnnic-upload-area__dropzone__content__subtitle__error':
+                hasError,
+            },
           ]"
-          :title='formattedSupportedFormats'
+          :title="formattedSupportedFormats"
         >
           {{
             subtitle ||
             `${$t(
-              `upload_area${hasError ? '.invalid' : ''}.subtitle`
+              `upload_area${hasError ? '.invalid' : ''}.subtitle`,
             )} ${formattedSupportedFormats}`
           }}
         </span>
@@ -53,11 +56,14 @@
         :accept="supportedFormats"
         :multiple="acceptMultiple"
         @input="handleFileChange"
-        style="display: none;"
+        style="display: none"
       />
     </div>
-    <div v-if="currentFiles.length > 0" class="unnnic-upload-area__cards">
-      <unnnic-import-card
+    <div
+      v-if="currentFiles.length > 0"
+      class="unnnic-upload-area__cards"
+    >
+      <UnnnicImportCard
         v-for="(file, index) in currentFiles"
         :key="index"
         :title="file.name"
@@ -76,7 +82,7 @@
 </template>
 
 <script>
-import mime from 'mime-types';
+import mime from 'mime';
 
 import UnnnicIconSvg from '../Icon.vue';
 import UnnnicImportCard from '../ImportCard/ImportCard.vue';
@@ -153,7 +159,9 @@ export default {
   },
   computed: {
     formattedSupportedFormats() {
-      const formats = this.supportedFormats.split(',').map((format) => format.toUpperCase());
+      const formats = this.supportedFormats
+        .split(',')
+        .map((format) => format.toUpperCase());
 
       return formats.join(', ');
     },
@@ -211,7 +219,13 @@ export default {
       return true;
     },
     validFormat(files) {
-      const formats = this.supportedFormats.split(',').map((format) => format.trim());
+      if (this.supportedFormats === '*') {
+        return true;
+      }
+
+      const formats = this.supportedFormats
+        .split(',')
+        .map((format) => format.trim());
 
       const isValid = Array.from(files).find((file) => {
         const fileName = file.name.toLowerCase();
@@ -219,7 +233,7 @@ export default {
         const fileExtension = `.${fileName.split('.').pop()}`;
 
         const isValidFileExtension = formats.includes(fileExtension);
-        const isValidFileType = fileType === mime.lookup(fileName);
+        const isValidFileType = fileType === mime.getType(fileName);
 
         return isValidFileExtension && isValidFileType;
       });
@@ -293,8 +307,9 @@ export default {
     checkDragAndDropSupport() {
       const { dropzone } = this.$refs;
       return (
-        'FileReader' in window
-        && ('draggable' in dropzone || ('ondragstart' in dropzone && 'ondrop' in dropzone))
+        'FileReader' in window &&
+        ('draggable' in dropzone ||
+          ('ondragstart' in dropzone && 'ondrop' in dropzone))
       );
     },
   },
@@ -305,7 +320,9 @@ export default {
 @import '../../assets/scss/unnnic.scss';
 
 @function borderDashed($color) {
-  @return url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23#{str-slice(quote($color), 2)}' stroke-width='4' stroke-dasharray='4%2c 12' stroke-dashoffset='9' stroke-linecap='square'/%3e%3c/svg%3e");
+  $colorString: unquote('' + $color);
+  $cleanColor: str-slice($colorString, 2);
+  @return url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23#{$cleanColor}' stroke-width='4' stroke-dasharray='4%2c 12' stroke-dashoffset='9' stroke-linecap='square'/%3e%3c/svg%3e");
 }
 
 .unnnic-upload-area {

package/src/components/config.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export const unnnicFontSize = 16; // px

package/src/components/grid/Grid.vue

@@ -1,10 +1,15 @@
 <template>
-    <div :class="[gridClass, 'grid-example-container']">
-        <div v-for="i in gridNumber" :key="i" :class="[gridItemClass,'grid-example']" />
-    </div>
+  <div :class="[gridClass, 'grid-example-container']">
+    <div
+      v-for="i in gridNumber"
+      :key="i"
+      :class="[gridItemClass, 'grid-example']"
+    />
+  </div>
 </template>
 
 <script>
+/* eslint-disable vue/multi-word-component-names */
 export default {
   name: 'Grid',
   props: {
@@ -31,15 +36,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '../../assets/scss/unnnic.scss';
+@import '../../assets/scss/unnnic.scss';
 
-  .grid-example {
-    background-color: $unnnic-color-brand-weni;
+.grid-example {
+  background-color: $unnnic-color-brand-weni;
 
-    &-container {
-      background-color: $unnnic-color-neutral-dark ;
-      width: 100%;
-      height: 100vh;
-    }
+  &-container {
+    background-color: $unnnic-color-neutral-dark;
+    width: 100%;
+    height: 100vh;
   }
+}
 </style>

package/src/components/icons/IconCommunity.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+  >
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="17"
+    fill="currentColor"
+  >
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="20"
+    fill="currentColor"
+  >
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconSupport.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+  >
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/components/index.js

@@ -1,8 +1,6 @@
-import Vue from 'vue';
 import { unnnicFontSize as fontSize } from './config';
 import formElement from './FormElement/FormElement.vue';
 import input from './Input/Input.vue';
-import inputNext from './InputNext/InputNext.vue';
 import inputDatePicker from './InputDatePicker/InputDatePicker.vue';
 import button from './Button/Button.vue';
 import buttonIcon from './Button/ButtonIcon.vue';
@@ -16,33 +14,34 @@ import dropdown from './Dropdown/Dropdown.vue';
 import dropdownItem from './Dropdown/DropdownItem.vue';
 import avatarIcon from './AvatarIcon/AvatarIcon.vue';
 import icon from './Icon.vue';
+import iconLoading from './IconLoading/IconLoading.vue';
 import toolTip from './ToolTip/ToolTip.vue';
 import card from './Card/Card.vue';
 import cardCompany from './Card/CardCompany.vue';
 import cardData from './Card/CardData.vue';
 import cardImage from './CardImage/CardImage.vue';
-import cardFlow from './CardFlow/CardFlow.vue';
+// import cardFlow from './CardFlow/CardFlow.vue';
 import cardProject from './CardProject/CardProject.vue';
 import cardInformation from './CardInformation/CardInformation.vue';
 import checkbox from './Checkbox/Checkbox.vue';
+import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
 import modal from './Modal/Modal.vue';
-import modalNext from './ModalNext/ModalNext.vue';
 import modalUpload from './ModalUpload/ModalUpload.vue';
 import call from '../utils/call';
 import selectSmart from './SelectSmart/SelectSmart.vue';
-import select from './Select/Select.vue';
+// import select from './Select/Select.vue';
 import selectItem from './Select/SelectItem.vue';
-import selectListItem from './SelectListItem/SelectListItem.vue';
+// import selectListItem from './SelectListItem/SelectListItem.vue';
 import multiSelect from './MultiSelect/MultiSelect.vue';
-import alert from './Alert/Alert.vue';
-import autocomplete from './Input/Autocomplete.vue';
-import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
+// import alert from './Alert/Alert.vue';
+// import autocomplete from './Input/Autocomplete.vue';
+// import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
 import tag from './Tag/Tag.vue';
 import accordion from './Accordion/Accordion.vue';
 import indicator from './Indicator/Indicator.vue';
-import skeletonLoading from './SkeletonLoading/SkeletonLoading.vue';
+import skeletonLoading from './SkeletonLoading/SkeletonLoading.vue'; // TODO: Unbreak this component
 import carousel from './Carousel/Carousel.vue';
 import label from './Label/Label.vue';
 import tab from './Tab/Tab.vue';
@@ -64,17 +63,23 @@ import CardNumber from './CardNumber/CardNumber.vue';
 import chartRainbow from './ChartRainbow/ChartRainbow.vue';
 import chartBar from './ChartBar/ChartBar.vue';
 import chartLine from './ChartLine/ChartLine.vue';
-import textEditor from './TextEditor/TextEditor.vue';
 import moodRating from './MoodRating/MoodRating.vue';
 import starRating from './StarRating/StarRating.vue';
 import audioRecorder from './AudioRecorder/AudioRecorder.vue';
 import circleProgressBar from './CircleProgressBar/CircleProgressBar.vue';
 import progressBar from './ProgressBar/ProgressBar.vue';
+import ChatsContact from './ChatsContact/ChatsContact.vue';
+import ChatsDashboardTagLive from './ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+import ChatsHeader from './ChatsHeader/ChatsHeader.vue';
+import ChatsMessage from './ChatsMessage/ChatsMessage.vue';
+import ChatsNavbar from './ChatsNavbar/ChatsNavbar.vue';
+import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
+import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
+import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 
-const components = {
+export const components = {
   unnnicFormElement: formElement,
   unnnicInput: input,
-  unnnicInputNext: inputNext,
   unnnicInputDatePicker: inputDatePicker,
   unnnicButton: button,
   unnnicButtonIcon: buttonIcon,
@@ -87,6 +92,7 @@ const components = {
   unnnicAvatarIcon: avatarIcon,
   unnnicIcon: icon,
   unnnicIconSvg: icon,
+  unnnicIconLoading: iconLoading,
   unnnicDropdown: dropdown,
   unnnicDropdownItem: dropdownItem,
   unnnicToolTip: toolTip,
@@ -94,23 +100,23 @@ const components = {
   unnnicCardCompany: cardCompany,
   unnnicCardData: cardData,
   unnnicCardImage: cardImage,
-  unnnicCardFlow: cardFlow,
+  // unnnicCardFlow: cardFlow,
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
+  unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
   unnnicModal: modal,
-  unnnicModalNext: modalNext,
   unnnicModalUpload: modalUpload,
   unnnicSelectSmart: selectSmart,
-  unnnicSelect: select,
+  // unnnicSelect: select,
   unnnicSelectItem: selectItem,
-  unnnicSelectListItem: selectListItem,
+  // unnnicSelectListItem: selectListItem,
   unnnicMultiSelect: multiSelect,
   unnnicAlert: alert,
-  unnnicAutocomplete: autocomplete,
-  unnnicAutocompleteSelect: autocompleteSelect,
+  // unnnicAutocomplete: autocomplete,
+  // unnnicAutocompleteSelect: autocompleteSelect,
   unnnicTag: tag,
   unnnicAccordion: accordion,
   unnnicIndicator: indicator,
@@ -136,22 +142,24 @@ const components = {
   unnnicChartRainbow: chartRainbow,
   unnnicChartBar: chartBar,
   unnnicChartLine: chartLine,
-  unnnicTextEditor: textEditor,
   unnnicMoodRating: moodRating,
   unnnicStarRating: starRating,
   unnnicAudioRecorder: audioRecorder,
   unnnicCircleProgressBar: circleProgressBar,
   unnnicProgressBar: progressBar,
+  unnnicChatsContact: ChatsContact,
+  unnnicChatsDashboardTagLive: ChatsDashboardTagLive,
+  unnnicChatsHeader: ChatsHeader,
+  unnnicChatsMessage: ChatsMessage,
+  unnnicChatsNavbar: ChatsNavbar,
+  unnnicChatsUserAvatar: ChatsUserAvatar,
+  unnnicChartMultiLine: ChartMultiLine,
+  unnnicEmojiPicker: EmojiPicker,
 };
 
-Object.keys(components).forEach((name) => {
-  Vue.component(name, components[name]);
-});
-
 export const unnnicFontSize = fontSize;
 export const unnnicFormElement = formElement;
 export const unnnicInput = input;
-export const unnnicInputNext = inputNext;
 export const unnnicInputDatePicker = inputDatePicker;
 export const unnnicButton = button;
 export const unnnicButtonIcon = buttonIcon;
@@ -166,30 +174,31 @@ export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
 export const unnnicIcon = icon;
 export const unnnicIconSvg = icon;
+export const unnnicIconLoading = iconLoading;
 export const unnnicToolTip = toolTip;
 export const unnnicCard = card;
 export const unnnicCardCompany = cardCompany;
 export const unnnicCardData = cardData;
 export const unnnicCardImage = cardImage;
-export const unnnicCardFlow = cardFlow;
+// export const unnnicCardFlow = cardFlow;
 export const unnnicCardProject = cardProject;
 export const unnnicCardInformation = cardInformation;
 export const unnnicCheckbox = checkbox;
+export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
 export const unnniclanguageSelect = languageSelect;
 export const unnnicModal = modal;
-export const unnnicModalNext = modalNext;
 export const unnnicModalUpload = modalUpload;
 export const unnnicSelectSmart = selectSmart;
-export const unnnicSelect = select;
+// export const unnnicSelect = select;
 export const unnnicSelectItem = selectItem;
-export const unnnicSelectListItem = selectListItem;
+// export const unnnicSelectListItem = selectListItem;
 export const unnnicMultiSelect = multiSelect;
 export const unnnicAlert = alert;
 export const unnnicCallAlert = call.callAlert;
 export const unnnicCallModal = call.callModal;
-export const unnnicAutocomplete = autocomplete;
-export const unnnicAutocompleteSelect = autocompleteSelect;
+// export const unnnicAutocomplete = autocomplete;
+// export const unnnicAutocompleteSelect = autocompleteSelect;
 export const unnnicTag = tag;
 export const unnnicAccordion = accordion;
 export const unnnicIndicator = indicator;
@@ -215,9 +224,16 @@ export const unnnicCardNumber = CardNumber;
 export const unnnicChartRainbow = chartRainbow;
 export const unnnicChartBar = chartBar;
 export const unnnicChartLine = chartLine;
-export const unnnicTextEditor = textEditor;
 export const unnnicMoodRating = moodRating;
 export const unnnicStarRating = starRating;
 export const unnnicAudioRecorder = audioRecorder;
 export const unnnicCircleProgressBar = circleProgressBar;
 export const unnnicProgressBar = progressBar;
+export const unnnicChatsContact = ChatsContact;
+export const unnnicChatsDashboardTagLive = ChatsDashboardTagLive;
+export const unnnicChatsHeader = ChatsHeader;
+export const unnnicChatsMessage = ChatsMessage;
+export const unnnicChatsNavbar = ChatsNavbar;
+export const unnnicChatsUserAvatar = ChatsUserAvatar;
+export const unnnicChartMultiLine = ChartMultiLine;
+export const unnnicEmojiPicker = EmojiPicker;

package/src/index.js

@@ -0,0 +1,10 @@
+import { components } from '@/components';
+
+export default {
+  install(Vue) {
+    Object.keys(components).forEach((name) => {
+      Vue.component(name, components[name]);
+    });
+  },
+  ...components,
+};

package/src/locales/en.json

@@ -1,19 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Drag your file here or",
-      "highlight": "search it"
-    },
-    "invalid": {
-      "subtitle": "File not supported, select supported formats:"
-    },
-    "subtitle": "Supported formats:"
-  },
-  "import_card": {
-    "importing": "Importing"
-  },
-  "select_smart": {
-    "without_results": "No results found",
-    "without_multiple_selected": "No option selected"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Drag your file here or",
+      "highlight": "search it"
+    },
+    "invalid": {
+      "subtitle": "File not supported, select supported formats:"
+    },
+    "subtitle": "Supported formats:"
+  },
+  "import_card": {
+    "importing": "Importing"
+  }
+}

package/src/locales/es.json

@@ -1,19 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arrastra tu archivo aquí o",
-      "highlight": "búscalo"
-    },
-    "invalid": {
-      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
-    },
-    "subtitle": "Formatos compatibles:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  },
-  "select_smart": {
-    "without_results": "Ningún resultado encontrado",
-    "without_multiple_selected": "Ninguna opción seleccionada"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arrastra tu archivo aquí o",
+      "highlight": "búscalo"
+    },
+    "invalid": {
+      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
+    },
+    "subtitle": "Formatos compatibles:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  }
+}

package/src/locales/pt_br.json

@@ -1,19 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arraste seu arquivo aqui, ou",
-      "highlight": "procure-o"
-    },
-    "invalid": {
-      "subtitle": "Arquivo não compatível, selecione formatos suportados:"
-    },
-    "subtitle": "Formatos suportados:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  },
-  "select_smart": {
-    "without_results": "Nenhum resultado encontrado",
-    "without_multiple_selected": "Nenhuma opção selecionada"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arraste seu arquivo aqui, ou",
+      "highlight": "procure-o"
+    },
+    "invalid": {
+      "subtitle": "Arquivo não compatível, selecione formatos suportados:"
+    },
+    "subtitle": "Formatos suportados:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  }
+}

package/src/main.js

@@ -1,13 +1,8 @@
-import Vue from 'vue';
-import vClickOutside from 'v-click-outside';
-import i18n from './utils/plugins/i18n';
+import { createApp } from 'vue';
 import App from './App.vue';
+import Unnnic from './index.js';
 
-Vue.config.productionTip = false;
+const app = createApp(App);
 
-Vue.use(vClickOutside);
-
-new Vue({
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app');
+app.use(Unnnic);
+app.mount('#app');

package/src/mixins/i18n.js

@@ -0,0 +1,60 @@
+import { get } from 'lodash';
+
+export default {
+  props: {
+    locale: {
+      type: String,
+    },
+    translations: {
+      type: Object,
+    },
+  },
+
+  methods: {
+    i18n(...args) {
+      const [key, defaults] = args;
+
+      const locale = (this.locale || get(this, '$i18n.locale'))?.toLowerCase();
+
+      let text = get(
+        this.translations,
+        `${key}.${locale}`,
+        get(this.translations, key),
+      );
+
+      if (!text) {
+        text = get(get(this.defaultTranslations, key), locale, defaults);
+      }
+
+      if (text?.includes('|') && typeof args[1] === 'number') {
+        const count = args[1];
+        const pluralization = text.split('|');
+
+        if (pluralization.length === 3) {
+          text = pluralization[count] || pluralization[2];
+        } else if (pluralization.length === 2) {
+          text = count === 1 ? pluralization[0] : pluralization[1];
+        }
+      }
+
+      let vars = {};
+
+      Object.values(args)
+        .slice(1)
+        .forEach((argument) => {
+          if (!(argument instanceof Array) && argument instanceof Object) {
+            vars = argument;
+          }
+        });
+
+      Object.keys(vars).forEach((varName) => {
+        text = text?.replaceAll(
+          new RegExp(`{ *${varName} *}`, 'g'),
+          vars[varName],
+        );
+      });
+
+      return text;
+    },
+  },
+};