@weni/unnnic-system 2.0.16 → 2.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "type": "commonjs",
   "files": [
     "dist",
@@ -50,6 +50,7 @@
     "vue-the-mask": "^0.11.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^8.0.10",
     "@storybook/addon-essentials": "^8.0.10",
     "@storybook/addon-interactions": "^8.0.10",
     "@storybook/addon-links": "^8.0.10",
@@ -70,7 +71,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.62.1",
     "storybook": "^8.0.10",
-    "vite": "^4.3.5",
+    "vite": "4.3.5",
     "vue-eslint-parser": "^9.4.2"
   }
 }

package/src/components/AudioRecorder/AudioHandler.vue

@@ -37,6 +37,8 @@ import UnnnicIcon from '../Icon.vue';
 import UnnnicToolTip from '../ToolTip/ToolTip.vue';
 
 export default {
+  emits: ['save'],
+
   components: {
     UnnnicIcon,
     UnnnicToolTip,

package/src/components/AudioRecorder/AudioPlayer.vue

@@ -47,6 +47,8 @@
 import UnnnicIcon from '../Icon.vue';
 
 export default {
+  emits: ['play', 'pause', 'progress-bar-update', 'failed-click'],
+
   components: {
     UnnnicIcon,
   },

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    v-if="value || isRecording || src"
+    v-if="modelValue || isRecording || src"
     class="unnnic-audio-recorder"
   >
     <UnnnicToolTip
@@ -74,6 +74,8 @@ const normalizeData = (filteredData) => {
 export default {
   name: 'AudioRecorder',
 
+  emits: ['update:model-value', 'status', 'failed-click'],
+
   components: {
     AudioHandler,
     AudioPlayer,
@@ -82,7 +84,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: HTMLAudioElement,
     },
 
@@ -278,7 +280,7 @@ export default {
 
       this.audio = null;
 
-      this.$emit('input', null);
+      this.$emit('update:model-value', null);
 
       this.status = 'idle';
     },
@@ -299,7 +301,7 @@ export default {
         this.recorder.stop();
       }
 
-      this.$emit('input', this.audio);
+      this.$emit('update:model-value', this.audio);
 
       this.stopMockMilliseconds();
     },

package/src/components/Card/CardData.vue

@@ -38,10 +38,10 @@
 </template>
 
 <script>
-import unnnicIcon from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
-  components: { unnnicIcon },
+  components: { UnnnicIcon },
 
   props: {
     title: {

package/src/components/CardProject/CardProject.vue

@@ -36,16 +36,16 @@
 
 <script>
 import CardStatusesContainer from '../Card/CardStatusesContainer.vue';
-import unnnicIcon from '../Icon.vue';
-import unnnicDropdown from '../Dropdown/Dropdown.vue';
-import unnnicTag from '../Tag/Tag.vue';
+import UnnnicIcon from '../Icon.vue';
+import UnnnicDropdown from '../Dropdown/Dropdown.vue';
+import UnnnicTag from '../Tag/Tag.vue';
 
 export default {
   components: {
     CardStatusesContainer,
-    unnnicIcon,
-    unnnicDropdown,
-    unnnicTag,
+    UnnnicIcon,
+    UnnnicDropdown,
+    UnnnicTag,
   },
 
   props: {

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -44,7 +44,7 @@
 
     <div class="content">
       <div class="percentage">
-        <span class="number">{{ value }} </span>
+        <span class="number">{{ modelValue }} </span>
         <span class="symbol">%</span>
       </div>
 
@@ -63,7 +63,7 @@ export default {
   components: {},
 
   props: {
-    value: {
+    modelValue: {
       type: Number,
       default: 0,
     },
@@ -74,7 +74,7 @@ export default {
   },
 
   watch: {
-    value() {
+    modelValue() {
       this.updateChartSvg();
     },
   },
@@ -138,7 +138,7 @@ export default {
           139.44,
           152.72,
           -85,
-          -85 + (this.value / 100) * 170,
+          -85 + (this.modelValue / 100) * 170,
         ),
       );
     },

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -61,13 +61,13 @@
         v-else-if="isMedia"
         class="unnnic-chats-message__media__container"
         :class="{ failed: failedToSendMedia }"
-        @click="$emit('click-image')"
+        @click="onClickMedia"
       >
         <slot />
         <UnnnicChatsMessageStatusBackdrop
           v-if="(sendingMedia || failedToSendMedia) && (isImage || isVideo)"
           :status="status"
-          @click="status === 'failed' ? $emit('click') : () => {}"
+          @click.stop="status === 'failed' ? $emit('click') : () => {}"
         />
       </div>
       <UnnnicIconLoading
@@ -93,6 +93,7 @@ import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'UnnnicChatsMessage',
+  emits: ['click', 'click-image'],
   components: {
     UnnnicChatsMessageText,
     UnnnicChatsMessageStatusBackdrop,
@@ -179,6 +180,14 @@ export default {
       return (this.isImage || this.isVideo) && this.status === 'failed';
     },
   },
+
+  methods: {
+    onClickMedia() {
+      if (this.isImage || this.isVideo) {
+        this.$emit('click-image');
+      }
+    },
+  },
 };
 </script>
 

package/src/components/ChatsMessage/ChatsMessageStatusBackdrop.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="unnnic-chats-message-status-backdrop__container"
-    @click="$emit('click')"
-  >
+  <div class="unnnic-chats-message-status-backdrop__container">
     <div class="unnnic-chats-message-status-backdrop">
       <UnnnicIconLoading
         v-if="status === 'sending'"

package/src/components/DateFilter/DateFilter.vue

@@ -15,11 +15,11 @@
 
 <script>
 import moment from 'moment';
-import unnnicInput from '../Input/Input.vue';
+import UnnnicInput from '../Input/Input.vue';
 
 export default {
   name: 'unnnic-date-filter',
-  components: { unnnicInput },
+  components: { UnnnicInput },
   props: {
     size: {
       type: String,

package/src/components/DatePicker/DatePicker.vue

@@ -204,11 +204,11 @@
 </template>
 
 <script>
-import unnnicButton from '../Button/Button.vue';
+import UnnnicButton from '../Button/Button.vue';
 
 export default {
   components: {
-    unnnicButton,
+    UnnnicButton,
   },
 
   props: {

package/src/components/Dropdown/LanguageSelect.vue

@@ -106,18 +106,18 @@
 </template>
 <script>
 import { vOnClickOutside } from '@vueuse/components';
-import unnnicFlag from '../Flag.vue';
+import UnnnicFlag from '../Flag.vue';
 import UnnnicIcon from '../Icon.vue';
 import { unnnicFontSize } from '../config';
 
 export default {
   name: 'LanguageSelect',
   components: {
-    unnnicFlag,
+    UnnnicFlag,
     UnnnicIcon,
   },
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -149,16 +149,16 @@ export default {
   data() {
     return {
       open: false,
-      val: this.value,
+      val: this.modelValue,
       unnnicFontSize,
     };
   },
   watch: {
     val() {
-      this.$emit('input', this.val);
+      this.$emit('update:model-value', this.val);
     },
-    value() {
-      this.val = this.value;
+    modelValue() {
+      this.val = this.modelValue;
     },
   },
   computed: {

package/src/components/ImportCard/ImportCard.vue

@@ -64,12 +64,12 @@
 </template>
 
 <script>
-import unnnicButton from '../Button/Button.vue';
+import UnnnicButton from '../Button/Button.vue';
 
 export default {
   name: 'ImportCard',
   components: {
-    unnnicButton,
+    UnnnicButton,
   },
   props: {
     title: {

package/src/components/ProgressBar/ProgressBar.vue

@@ -22,7 +22,7 @@
         <div class="progress-container">
           <div
             class="bar"
-            :style="{ width: `${value}%` }"
+            :style="{ width: `${modelValue}%` }"
           >
             <div
               v-if="type === 'secondary' && !subtitle"
@@ -75,7 +75,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: Number,
     },
 
@@ -103,7 +103,7 @@ export default {
 
   computed: {
     percentage() {
-      return Math.floor(this.value);
+      return Math.floor(this.modelValue);
     },
   },
 };

package/src/components/Sidebar/SidebarPrimary.vue

@@ -37,7 +37,7 @@
           >
             <ToolTip
               :enabled="!expanded"
-              :text="option.label"
+              :text="`${option.label} ${option.tag || ''}`.trim()"
               side="right"
               @mouseenter="hover($event, option.id)"
               @mouseleave="mouseout"
@@ -69,6 +69,7 @@
                 />
 
                 <span class="label">{{ option.label }}</span>
+                <span v-if="option.tag" class="tag">{{ option.tag }}</span>
                 <span
                   :class="option.notify && !expanded ? 'notify' : ''"
                   v-if="option.notify"
@@ -132,14 +133,14 @@
 
 <script>
 import ToolTip from '../ToolTip/ToolTip.vue';
-import languageSelect from '../Dropdown/LanguageSelect.vue';
+import LanguageSelect from '../Dropdown/LanguageSelect.vue';
 import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {
     ToolTip,
     UnnnicIcon,
-    languageSelect,
+    LanguageSelect,
   },
 
   props: {
@@ -351,15 +352,24 @@ $transition-time: 0.4s;
         font-size: $unnnic-font-size-body-gt;
         line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-md);
         float: left;
-        flex: 1;
         white-space: nowrap;
-        width: 50px;
+        width: min-content;
         overflow: hidden;
         text-overflow: ellipsis;
         user-select: none;
         margin-left: $unnnic-spacing-xs;
       }
 
+      .tag {
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-md;
+        font-weight: $unnnic-font-weight-regular;
+        font-style: italic;
+        margin-left: $unnnic-spacing-nano;
+        color: $unnnic-color-weni-600;
+
+      }
+
       &:hover:not(.disabled) {
         background-color: rgba(
           $unnnic-color-brand-weni,

package/src/components/TabsExpanded/TabsExpanded.vue

@@ -41,6 +41,7 @@
           @click.stop="$emit('close-tab', item)"
           icon="close-1"
           size="xs"
+          clickable
           scheme="neutral-cloudy"
         />
       </div>

package/src/stories/Accordion.stories.js

@@ -1,51 +1,46 @@
-import unnnicAccordion from '../components/Accordion/Accordion.vue';
-import unnnicButton from '../components/Button/Button.vue';
+import UnnnicAccordion from '../components/Accordion/Accordion.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 export default {
   title: 'accordion/Accordion',
-  component: unnnicAccordion,
+  component: UnnnicAccordion,
   argTypes: {
     open: { control: { type: 'boolean' } },
     title: { control: { type: 'text' } },
   },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicAccordion,
+      UnnnicButton,
+    },
+    data() {
+      return {
+        open: false,
+      };
+    },
+    template: `
+      <div>
+        <pre>v-model:open {{ open }}</pre>
+        <unnnic-accordion v-bind="args" v-model:open="open">
+          <template #actions>
+            <unnnic-button type="secondary" size="small" icon-left="button-play-1">
+              Assista ao vídeo
+            </unnnic-button>
+          </template>
+
+          Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a. Cumque et delectus ut. Nostrum ratione eos voluptatem voluptatu quia quod qui. Velit in consequatur corrupti similique. Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a.
+        </unnnic-accordion>
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicAccordion,
-    unnnicButton,
+export const Default = {
+  args: {
+    title:
+      'Os valores permanecem os mesmos? O que muda no meu plano contratado?',
   },
-
-  data() {
-    return {
-      o: false,
-    };
-  },
-
-  template: `
-    <div>
-      <pre>v-model:open {{ o }}</pre>
-      <unnnic-accordion v-bind="$props" v-model:open="o">
-        <template v-slot:actions>
-          <unnnic-button @click.stop="click" type="secondary" size="small" icon-left="button-play-1">Assista ao vídeo</unnnic-button>
-        </template>
-
-        Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a. Cumque et delectus ut. Nostrum ratione eos voluptatem voluptatu quia quod qui. Velit in consequatur corrupti similique. Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a.
-      </unnnic-accordion>
-    </div>
-  `,
-
-  methods: {
-    click() {
-      console.log('clicked test 2');
-    },
-  },
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Os valores permanecem os mesmos? O que muda no meu plano contratado?',
 };