@weni/unnnic-system 2.0.2 → 2.0.4

package/src/components/Card/MarketplaceCard.vue

@@ -28,7 +28,7 @@
         v-if="typeAction === 'add'"
         class="unnnic-card-marketplace__content__rating"
       >
-        <UnnnicIconSvg
+        <UnnnicIcon
           class="unnnic-card-marketplace__content__rating__star"
           scheme="feedback-yellow"
           icon="rating-star-1"
@@ -46,11 +46,11 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',
-  components: { UnnnicIconSvg },
+  components: { UnnnicIcon },
   props: {
     title: {
       type: String,

package/src/components/Carousel/TagCarousel.vue

@@ -4,7 +4,7 @@
       class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--left"
     >
       <div class="unnnic-card-tag-carousel__button__icon">
-        <UnnnicIconSvg
+        <UnnnicIcon
           icon="arrow-left-1-1"
           size="sm"
           @click="previous()"
@@ -46,7 +46,7 @@
         v-show="hasNext"
       />
       <div class="unnnic-card-tag-carousel__button__icon">
-        <UnnnicIconSvg
+        <UnnnicIcon
           icon="arrow-right-1-1"
           @click="next()"
           size="sm"
@@ -60,7 +60,7 @@
 
 <script>
 import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-tag-carousel',
@@ -73,7 +73,7 @@ export default {
   },
   components: {
     UnnnicTag,
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     modelValue: {

package/src/components/Checkbox/Checkbox.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="unnnic-checkbox-wrapper">
-    <UIcon
+    <UnnnicIcon
       class="unnnic-checkbox"
       :class="{ disabled }"
       :icon="icon"
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import uIcon from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   model: {
@@ -60,7 +60,7 @@ export default {
   },
 
   components: {
-    uIcon,
+    UnnnicIcon,
   },
 
   computed: {

package/src/components/Flag.vue

@@ -1,5 +1,5 @@
 <template>
-  <UnnnicIconSvg
+  <UnnnicIcon
     :icon="name"
     :size="size"
   />
@@ -8,12 +8,12 @@
 <script>
 /* eslint-disable global-require */
 /* eslint-disable vue/multi-word-component-names */
-import UnnnicIconSvg from './Icon.vue';
+import UnnnicIcon from './Icon.vue';
 
 export default {
   name: 'Flag',
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     code: {

package/src/components/Icon.vue

@@ -36,9 +36,9 @@
 <script>
 import icons from '../utils/icons';
 import OldIconsMap from './Icon/OldIconsMap.json';
-
+/* eslint-disable vue/multi-word-component-names */
 export default {
-  name: 'uIcon',
+  name: 'Icon',
   props: {
     filled: {
       type: Boolean,

package/src/components/Modal/Modal.vue

@@ -19,7 +19,7 @@
               v-if="closeIcon"
               class="unnnic-modal-container-background-body-close_icon"
             >
-              <UnnnicIconSvg
+              <UnnnicIcon
                 icon="close-1"
                 scheme="neutral-dark"
                 size="sm"
@@ -43,7 +43,7 @@
                   : 'unnnic-modal-container-background-body-spacing_header',
               ]"
             >
-              <UnnnicIconSvg
+              <UnnnicIcon
                 :scheme="scheme"
                 :icon="modalIcon"
                 size="xl"
@@ -80,12 +80,12 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-modal',
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     text: {

package/src/components/Radio/Radio.vue

@@ -8,7 +8,7 @@
       disabled ? 'disabled' : null,
     ]"
   >
-    <UnnnicIconSvg
+    <UnnnicIcon
       class="unnnic-radio"
       :icon="icon"
       :scheme="color"
@@ -23,6 +23,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import UnnnicIcon from '../Icon.vue';
 
 const props = defineProps({
   modelValue: {

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -20,7 +20,7 @@
           +{{ selectedOptions.length - multipleSelectedsTags }}
         </p>
       </div>
-      <IconSvg
+      <UnnnicIcon
         class="unnnic-select-smart__options__multiple__selecteds__clear"
         icon="close-1"
         size="xs"
@@ -39,7 +39,7 @@
 
 <script>
 import Tag from '../Tag/Tag.vue';
-import IconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicI18n from '../../mixins/i18n';
 
 export default {
@@ -47,7 +47,7 @@ export default {
   mixins: [UnnnicI18n],
   components: {
     Tag,
-    IconSvg,
+    UnnnicIcon,
   },
   props: {
     selectedOptions: {

package/src/components/Sidebar/SidebarPrimary.vue

@@ -61,7 +61,7 @@
                   }
                 "
               >
-                <IconSvg
+                <UnnnicIcon
                   :icon="option.icon"
                   :scheme="option.active ? 'brand-weni-soft' : 'neutral-cloudy'"
                   :size="!expanded ? 'md' : 'ant'"
@@ -73,7 +73,7 @@
                   :class="option.notify && !expanded ? 'notify' : ''"
                   v-if="option.notify"
                 >
-                  <IconSvg
+                  <UnnnicIcon
                     icon="indicator"
                     scheme="brand-weni-soft"
                     size="ant"
@@ -114,7 +114,7 @@
                 class="option"
                 @click="toggleExpanded"
               >
-                <IconSvg
+                <UnnnicIcon
                   :icon="expanded ? 'close_fullscreen' : 'open_in_full'"
                   :scheme="'neutral-cloudy'"
                   :size="!expanded ? 'md' : 'ant'"
@@ -133,12 +133,12 @@
 <script>
 import ToolTip from '../ToolTip/ToolTip.vue';
 import languageSelect from '../Dropdown/LanguageSelect.vue';
-import iconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {
     ToolTip,
-    iconSvg,
+    UnnnicIcon,
     languageSelect,
   },
 

package/src/components/Switch/Switch.vue

@@ -11,7 +11,7 @@
       {{ textLeft }}
     </div>
 
-    <UnnnicIconSvg
+    <UnnnicIcon
       :class="{ 'unnnic-switch__icon': true, active: isActive }"
       :icon="currentIcon"
       :size="iconSize"
@@ -34,11 +34,11 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-switch',
-  components: { UnnnicIconSvg },
+  components: { UnnnicIcon },
   props: {
     size: {
       type: String,

package/src/components/Tag/BrandTag.vue

@@ -7,7 +7,7 @@
     }"
   >
     <span class="unnnic-brand-tag__label">{{ text }}</span>
-    <UnnnicIconSvg
+    <UnnnicIcon
       :icon="disabled ? 'close-1' : 'add-1'"
       :scheme="disabled ? 'neutral-snow' : 'brand-weni-dark'"
       class="unnnic-brand-tag__icon"
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-brand-tag',
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     text: {

package/src/components/Tag/DefaultTag.vue

@@ -10,7 +10,7 @@
       ${disabled ? 'unnnic-tag__label--disabled' : ''}`"
       >{{ text }}</span
     >
-    <UnnnicIconSvg
+    <UnnnicIcon
       v-if="hasCloseIcon"
       icon="close-1"
       class="unnnic-tag__icon"
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-tag',
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
   },
   props: {
     text: {

package/src/components/Tag/IndicatorTag.vue

@@ -11,7 +11,7 @@
       <span class="unnnic-tag__count">{{ count }}</span>
     </ToolTip>
     <span class="unnnic-tag__label">{{ text }}</span>
-    <UnnnicIconSvg
+    <UnnnicIcon
       v-if="hasBackButton"
       icon="arrow-right-1-1"
       class="unnnic-tag__icon"
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {
   name: 'unnnic-tag',
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
     ToolTip,
   },
   props: {

package/src/components/UploadArea/UploadArea.vue

@@ -14,7 +14,7 @@
       v-on:drop.stop.prevent="drop"
       @click="() => this.$refs.file.click()"
     >
-      <UnnnicIconSvg
+      <UnnnicIcon
         class="unnnic-upload-area__dropzone__icon"
         icon="upload-bottom-1"
         :scheme="hasError ? 'feedback-red' : 'brand-weni'"
@@ -84,13 +84,13 @@
 <script>
 import mime from 'mime';
 
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicImportCard from '../ImportCard/ImportCard.vue';
 
 export default {
   name: 'unnnic-upload-area',
   components: {
-    UnnnicIconSvg,
+    UnnnicIcon,
     UnnnicImportCard,
   },
   props: {

package/src/components/index.js

@@ -29,7 +29,7 @@ import radio from './Radio/Radio.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
 import modal from './Modal/Modal.vue';
 import modalUpload from './ModalUpload/ModalUpload.vue';
-import call from '../utils/call';
+import {callAlert, callModal} from '../utils/call';
 import selectSmart from './SelectSmart/SelectSmart.vue';
 // import select from './Select/Select.vue';
 import selectItem from './Select/SelectItem.vue';
@@ -195,8 +195,8 @@ export const unnnicSelectItem = selectItem;
 // export const unnnicSelectListItem = selectListItem;
 export const unnnicMultiSelect = multiSelect;
 export const unnnicAlert = alert;
-export const unnnicCallAlert = call.callAlert;
-export const unnnicCallModal = call.callModal;
+export const unnnicCallAlert = callAlert;
+export const unnnicCallModal = callModal;
 // export const unnnicAutocomplete = autocomplete;
 // export const unnnicAutocompleteSelect = autocompleteSelect;
 export const unnnicTag = tag;

package/src/stories/Alert.stories.js

@@ -1,13 +1,12 @@
-import alertCaller from '../components/Alert/AlertCaller.vue';
-import alert from '../utils/call';
 import unnnicAlert from '../components/Alert/Alert.vue';
+import { unnnicCallAlert } from '../components';
 
 export default {
   title: 'example/Alert',
   component: unnnicAlert,
   argTypes: {
+    type: { control: { type: 'text' } },
     text: { control: { type: 'text' } },
-    title: { control: { type: 'text' } },
     closeText: { control: { type: 'text' } },
     scheme: {
       control: {
@@ -56,7 +55,7 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { alertCaller, unnnicAlert },
+  components: { unnnicCallAlert },
   template: `
 <div>
   <button @click="unnnicCallAlert">Click for alert</button>
@@ -85,14 +84,21 @@ Recommended use:
 </div>`,
   methods: {
     unnnicCallAlert() {
-      alert.callAlert({ props: this.$props, seconds: this.$props.seconds });
+      unnnicCallAlert({
+        props: {
+          type: 'success',
+          text: 'Alert'
+        },
+        containerRef: this.$refs.divContainer,
+      })
     },
+
   },
 });
 
 const TemplateWithContainerRef = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { alertCaller, unnnicAlert },
+  components: { unnnicCallAlert },
   template: `
     <div ref="divContainer" style="height: 200px; position: relative; border: 1px solid black">
       <button @click="unnnicCallAlert">Click for alert</button>
@@ -108,26 +114,25 @@ const TemplateWithContainerRef = (args, { argTypes }) => ({
     </div>`,
   methods: {
     unnnicCallAlert() {
-      alert.callAlert({
-        props: this.$props,
+      unnnicCallAlert({
+        props: {
+          type: 'success',
+          text: 'Alert'
+        },
         containerRef: this.$refs.divContainer,
-      });
+      })
     },
   },
 });
 
 export const Normal = Template.bind({});
 Normal.args = {
-  title: 'Title',
+  type: 'success',
   text: 'Text',
-  icon: 'check-circle-1-1',
-  scheme: 'feedback-green',
 };
 
 export const WithContainerRef = TemplateWithContainerRef.bind({});
 WithContainerRef.args = {
-  title: 'Title',
+  type: 'error',
   text: 'Text',
-  icon: 'check-circle-1-1',
-  scheme: 'feedback-green',
 };

package/src/stories/Comment.stories.js

@@ -2,7 +2,7 @@ import unnnicComment from '../components/Comment/Comment.vue';
 import unnnicButton from '../components/Button/Button.vue';
 import unnnicDropdown from '../components/Dropdown/Dropdown.vue';
 import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
-import unnnicIconSvg from '../components/Icon.vue';
+import UnnnicIcon from '../components/Icon.vue';
 
 export default {
   title: 'Example/Comment',
@@ -16,7 +16,7 @@ const Template = (args, { argTypes }) => ({
     unnnicButton,
     unnnicDropdown,
     unnnicDropdownItem,
-    unnnicIconSvg,
+    UnnnicIcon,
   },
   template: `
   <unnnic-comment v-bind="$props">
@@ -24,7 +24,7 @@ const Template = (args, { argTypes }) => ({
     <template v-slot:actions>
     <unnnic-dropdown>
       <template v-slot:trigger>
-        <unnnic-icon-svg
+        <unnnic-icon
           slot="trigger"
           icon="navigation-menu-vertical-1"
           size="sm"

package/src/utils/call.js

@@ -5,8 +5,7 @@ import mitt from 'mitt';
 
 const emitter = mitt();
 
-export default {
-  callAlert({ props, containerRef }) {
+  const callAlert = ({ props, containerRef })=>{
     const AlertComponent = createApp(Alert, {
       ...props,
       onClose: () => {
@@ -27,9 +26,9 @@ export default {
     } else {
       document.body.appendChild(instance.$el);
     }
-  },
+  };
 
-  callModal({ props }) {
+  const callModal = ({ props })=>{
     const ModalComponent = createApp(Modal, {
       ...props,
       onClose: () => {
@@ -44,5 +43,14 @@ export default {
     const element = document.createElement('div');
     const instance = ModalComponent.mount(element);
     document.body.appendChild(element);
-  },
-};
+  }
+
+  export{
+    callAlert,
+    callModal
+  }
+
+  export default{
+    callAlert,
+    callModal
+  }