@weni/unnnic-system 1.16.37 → 1.16.39-develop.0

package/src/components/ChatsUserAvatar/ChatsUserAvatar.vue

@@ -0,0 +1,122 @@
+<template>
+  <span
+    class="user-avatar"
+    :class="{
+      active,
+      clickable,
+      disabled,
+      [`user-avatar--${size}`]: true,
+    }"
+    @click="$emit('click')"
+    @keypress.enter="$emit('click')"
+  >
+    <unnnic-icon
+      v-if="username === 'Agent'"
+      icon="single-neutral-actions-1"
+      size="sm"
+      :scheme="disabled ? 'neutral-snow' : ''"
+    />
+    <unnnic-icon
+      v-else-if="username === 'Bot'"
+      icon="science-fiction-robot-2"
+      size="sm"
+      :scheme="disabled ? 'neutral-snow' : ''"
+    />
+    <img v-else-if="!!photoUrl" :src="photoUrl" alt="" />
+    <span v-else>
+      {{ getUsernameFirstCharacter }}
+    </span>
+  </span>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UserAvatar',
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'xl',
+      validator: (value) => ['xs', 'sm', 'ant', 'md', 'lg', 'xl', '2xl'].indexOf(value) !== -1,
+    },
+    username: {
+      type: String,
+      required: true,
+    },
+    photoUrl: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    getUsernameFirstCharacter() {
+      return this.username ? this.username.charAt(0).toUpperCase() : '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+$avatar-sizes: '2xl' 3rem, 'xl' $unnnic-icon-size-xl, 'lg' $unnnic-icon-size-lg,
+  'md' $unnnic-icon-size-md, 'ant' $unnnic-icon-size-ant, 'sm' $unnnic-icon-size-sm,
+  'xs' $unnnic-icon-size-xs;
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $unnnic-border-radius-sm;
+
+  background: $unnnic-color-weni-50;
+  color: $unnnic-color-aux-purple-500;
+
+  &.active {
+    background: $unnnic-color-weni-100;
+  }
+
+  &.disabled {
+    background: $unnnic-color-neutral-cleanest;
+    color: $unnnic-color-neutral-snow;
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  @each $name, $size in $avatar-sizes {
+    &--#{$name} {
+      width: $size;
+      height: $size;
+
+      font-size: calc($size / 2);
+      font-family: $unnnic-font-family-secondary;
+
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}
+</style>

package/src/components/SelectSmart/SelectSmart.vue

@@ -35,6 +35,8 @@
               :withoutSelectsMessage="multipleWithoutSelectsMessage"
               @clear-selected-options="clearSelectedOptions"
               @unselect-option="unselectOption"
+              :locale="locale"
+              :translations="translations"
             />
             <div
               ref="selectSmartOptionsScrollArea"
@@ -62,7 +64,7 @@
                 v-if="filterOptions(options).length === 0"
                 class="unnnic-select-smart__options--no-results"
               >
-                {{ $t('select_smart.without_results') }}
+                {{ i18n('without_results') }}
               </p>
             </div>
           </div>
@@ -78,9 +80,11 @@ import SelectSmartOption from './SelectSmartOption.vue';
 import SelectSmartMultipleHeader from './SelectSmartMultipleHeader.vue';
 import TextInput from '../Input/TextInput.vue';
 import DropdownSkeleton from '../Dropdown/DropdownSkeleton.vue';
+import UnnnicI18n from '../../mixins/i18n';
 
 export default {
   name: 'UnnnicSelectSmart',
+  mixins: [UnnnicI18n],
   components: {
     TextInput,
     SelectSmartOption,
@@ -103,7 +107,8 @@ export default {
       ],
     },
     value: {
-      type: null,
+      type: Array,
+      default: () => [],
     },
     size: {
       type: String,
@@ -157,6 +162,14 @@ export default {
 
       selectedOptions: [],
       multipleSelectedsTags: 2,
+
+      defaultTranslations: {
+        without_results: {
+          'pt-br': 'Nenhum resultado encontrado',
+          en: 'No results found',
+          es: 'Ningún resultado encontrado',
+        },
+      },
     };
   },
 
@@ -168,7 +181,15 @@ export default {
       this.isAutocompleteAllowed = true;
     }
 
-    if (this.options[0].value) {
+    if (this.value[0] && this.value[0].value) {
+      this.value.forEach((option) => this.selectOption(option));
+
+      if (this.isAutocompleteAllowed) {
+        this.$nextTick(() => {
+          this.searchValue = this.selectedLabel;
+        });
+      }
+    } else if (this.options[0].value) {
       this.selectOption(this.options[0]);
     }
   },
@@ -188,10 +209,10 @@ export default {
       });
     },
 
-    searchValue() {
+    searchValue(newSearchValue, oldSearchValue) {
       this.focusedOption = null;
 
-      if (!this.active) this.active = true;
+      if (!this.active && oldSearchValue) this.active = true;
     },
 
     selectedOptions(newSelectedOptions) {
@@ -222,7 +243,7 @@ export default {
           return isValueMatch && option.value !== '';
         }
 
-        const isEmptyOption = option.value === '' && this.value == null;
+        const isEmptyOption = option.value === '' && this.value.length === 0;
         return isEmptyOption || isValueMatch;
       });
 
@@ -391,7 +412,7 @@ export default {
 
     unselectOption(option) {
       const indexToRemove = this.selectedOptions.findIndex(
-        (selectedOption) => selectedOption === option,
+        (selectedOption) => selectedOption.value === option.value,
       );
 
       if (indexToRemove !== -1) {

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -29,7 +29,7 @@
       />
     </div>
     <p v-if="!selectedOptions[0]" class="unnnic-select-smart__options__multiple--without-multiples">
-      {{ withoutSelectsMessage || $t('select_smart.without_multiple_selected') }}
+      {{ withoutSelectsMessage || i18n('without_multiple_selected') }}
     </p>
   </div>
 </template>
@@ -37,9 +37,11 @@
 <script>
 import Tag from '../Tag/Tag.vue';
 import IconSvg from '../Icon.vue';
+import UnnnicI18n from '../../mixins/i18n';
 
 export default {
   name: 'UnnnicSelectSmartMultipleHeader',
+  mixins: [UnnnicI18n],
   components: {
     Tag,
     IconSvg,
@@ -57,6 +59,14 @@ export default {
   data() {
     return {
       multipleSelectedsTags: 2,
+
+      defaultTranslations: {
+        without_multiple_selected: {
+          'pt-br': 'Nenhuma opção selecionada',
+          en: 'No option selected',
+          es: 'Ninguna opción seleccionada',
+        },
+      },
     };
   },
   computed: {

package/src/components/TransitionRipple/TransitionRipple.vue

@@ -0,0 +1,119 @@
+<template>
+    <transition-group class="ripples" name="grow" tag="div">
+      <div
+        class="ripple"
+        v-for="ripple in ripples"
+        :key="ripple.id"
+        :style="{
+          top: ripple.top,
+          left: ripple.left,
+          width: ripple.width,
+          height: ripple.height,
+        }"
+        :class="`ripples-color--${color}`"
+      ></div>
+    </transition-group>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'neutral-white',
+    },
+  },
+  data() {
+    return {
+      ripples: [],
+      rippleWidth: 0,
+      halfRippleWidth: 0,
+    };
+  },
+  mounted() {
+    const { transitionContainer } = this.$parent.$refs;
+
+    if (transitionContainer) {
+      this.$parent.$refs.transitionContainer.style.position = 'relative';
+      this.$parent.$refs.transitionContainer.style.overflow = 'hidden';
+    }
+
+    const width = transitionContainer.offsetWidth;
+    const height = transitionContainer.offsetHeight;
+    this.rippleWidth = width > height ? width : height;
+    this.halfRippleWidth = this.rippleWidth / 2;
+
+    window.addEventListener('mouseup', this.purgeRipples);
+  },
+  beforeDestroy() {
+    window.removeEventListener('mouseup', this.purgeRipples);
+  },
+  methods: {
+    addRipple(e) {
+      const { left, top } = this.$parent.$refs.transitionContainer.getBoundingClientRect();
+      const rippleId = Date.now();
+      this.ripples.push({
+        width: `${this.rippleWidth}px`,
+        height: `${this.rippleWidth}px`,
+        left: `${e.clientX - left - this.halfRippleWidth}px`,
+        top: `${e.clientY - top - this.halfRippleWidth}px`,
+        id: rippleId,
+      });
+    },
+    purgeRipples() {
+      this.ripples = [];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.ripples {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  @each $name, $color in $scheme-colors {
+  &-color--#{$name} {
+    background-color: $color;
+  }
+}
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  opacity: 0.05;
+  animation: grow 1s ease-out;
+}
+
+.grow-enter-active, .grow-enter-to-active {
+  transition: all 1.5s ease-out;
+}
+.grow-leave-active, .grow-leave-to-active {
+  transition: all 1s ease-out;
+}
+
+.grow-enter {
+  transform: scale(0);
+  opacity: 0.1;
+}
+
+.grow-enter-to {
+  transform: scale(4);
+  opacity: 0.1;
+}
+
+.grow-leave {
+  transform: scale(4);
+  opacity: 0.1;
+}
+.grow-leave-to {
+  transform: scale(4);
+  opacity: 0;
+}
+</style>

package/src/locales/en.json

@@ -11,9 +11,5 @@
   },
   "import_card": {
     "importing": "Importing"
-  },
-  "select_smart": {
-    "without_results": "No results found",
-    "without_multiple_selected": "No option selected"
   }
 }

package/src/locales/es.json

@@ -11,9 +11,5 @@
   },
   "import_card": {
     "importing": "Importando"
-  },
-  "select_smart": {
-    "without_results": "Ningún resultado encontrado",
-    "without_multiple_selected": "Ninguna opción seleccionada"
   }
 }

package/src/locales/pt_br.json

@@ -11,9 +11,5 @@
   },
   "import_card": {
     "importing": "Importando"
-  },
-  "select_smart": {
-    "without_results": "Nenhum resultado encontrado",
-    "without_multiple_selected": "Nenhuma opção selecionada"
   }
 }

package/src/mixins/i18n.js

@@ -0,0 +1,51 @@
+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;
+    },
+  },
+};

package/src/stories/Alert.stories.js

@@ -41,7 +41,32 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { alertCaller, unnnicAlert },
-  template: '<div><button @click="unnnicCallAlert"> Click for alert </button> <unnnic-alert v-bind="$props"></unnnic-alert> </div>',
+  template: `
+<div>
+  <button @click="unnnicCallAlert">Click for alert</button>
+
+<h3>Refactoring changes:</h3>
+
+<ul>
+  <li>Removed props: title, icon, hide-close-text, close-text, position</li>
+  <li>Added props: link-text, link-href, link-target (default: '_blank'), type (default, success, error)</li>
+  <li>Avoid using scheme prop, instead use the 'type' prop to change the color variant</li>
+  <li>Avoid using on-close prop to listen to close event, instead use the '@close' event</li>
+</ul>
+
+<pre>
+Recommended use:
+
+&lt;unnnic-alert
+  type            String default 'default' ('default', 'success', 'error')
+  text            String required
+  @close          Event
+  link-href       String
+   ┠ link-text    String default 'Learn more'
+   ┖ link-target  String default '_blank'
+/&gt;
+</pre>
+</div>`,
   methods: {
     unnnicCallAlert() {
       alert.callAlert({ props: this.$props, seconds: this.$props.seconds });

package/src/stories/ChatsContact.stories.js

@@ -0,0 +1,69 @@
+import unnnicChatsContact from '../components/ChatsContact/ChatsContact.vue';
+
+export default {
+  title: 'Chats/Contact',
+  component: unnnicChatsContact,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsContact },
+  template: '<unnnic-chats-contact v-bind="$props"/>',
+});
+
+const TemplateList = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsContact },
+  data() {
+    return {
+      selectedContact: 1,
+    };
+  },
+  template: `
+    <div style="display: grid; gap: 5px;">
+      <unnnic-chats-contact v-for="index in 5" v-bind="$props" @click="selectedContact = index" :selected="selectedContact === index"/>
+    </div>
+  `,
+});
+
+const defaultArgs = {
+  username: 'John Doe',
+  lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel.',
+};
+const unreadMessages = 5;
+const waitingTime = 10;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultArgs,
+  unreadMessages,
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  ...defaultArgs,
+  selected: true,
+};
+
+export const Read = Template.bind({});
+Read.args = {
+  ...defaultArgs,
+};
+
+export const Waiting = Template.bind({});
+Waiting.args = {
+  ...defaultArgs,
+  waitingTime,
+  unreadMessages,
+};
+
+export const WaitingRead = Template.bind({});
+WaitingRead.args = {
+  ...defaultArgs,
+  waitingTime,
+};
+
+export const ContactList = TemplateList.bind({});
+ContactList.args = {
+  ...defaultArgs,
+};

package/src/stories/{NavbarChats.stories.js → ChatsNavbar.stories.js}

@@ -1,9 +1,9 @@
 /* eslint-disable no-alert */
-import unnnicNavbarChats from '../components/NavbarChats/NavbarChats.vue';
+import unnnicChatsNavbar from '../components/ChatsNavbar/ChatsNavbar.vue';
 
 export default {
-  title: 'Example/NavbarChats',
-  component: unnnicNavbarChats,
+  title: 'Chats/Navbar',
+  component: unnnicChatsNavbar,
   argTypes: {
     links: [
       {
@@ -16,8 +16,8 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { unnnicNavbarChats },
-  template: '<unnnic-navbar-chats v-bind="$props"/>',
+  components: { unnnicChatsNavbar },
+  template: '<unnnic-chats-navbar v-bind="$props"/>',
 });
 
 export const Default = Template.bind({});

package/src/stories/ChatsUserAvatar.stories.js

@@ -0,0 +1,35 @@
+import unnnicChatsUserAvatar from '../components/ChatsUserAvatar/ChatsUserAvatar.vue';
+
+export default {
+  title: 'Chats/UserAvatar',
+  component: unnnicChatsUserAvatar,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'ant', 'md', 'lg', 'xl', '2xl'],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsUserAvatar },
+  template: '<unnnic-chats-user-avatar v-bind="$props"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  username: 'John Doe',
+};
+
+export const Agent = Template.bind({});
+Agent.args = {
+  username: 'Agent',
+};
+
+export const Bot = Template.bind({});
+Bot.args = {
+  username: 'Bot',
+};