@weni/unnnic-system 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "type": "commonjs",
   "files": [
     "dist",
@@ -82,7 +82,6 @@
     "@vitest/ui": "^1.6.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/test-utils": "^2.4.6",
-
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -100,4 +99,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/components/ChatsHeader/ChatsHeader.vue

@@ -68,8 +68,9 @@
           <slot />
         </div>
       </main>
+      <slot v-if="slots['right']" name="right" />
       <UnnnicButton
-        v-if="close"
+        v-else-if="close"
         class="unnnic-chats-header__close--sm"
         type="tertiary"
         iconCenter="close-1"
@@ -79,80 +80,59 @@
     </header>
   </div>
 </template>
-<script>
-import UnnnicI18n from '../../mixins/i18n';
+
+<script lang="ts" setup>
+import { useSlots } from 'vue';
+import type { UnnnicColorToken } from '../../types/unnnic-utils';
 
 import UnnnicButton from '../Button/Button.vue';
 import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
 import UnnnicChatsUserAvatar from '../ChatsUserAvatar/ChatsUserAvatar.vue';
 import UnnnicBreadcrumb from '../Breadcrumb/Breadcrumb.vue';
 
-export default {
+defineOptions({
   name: 'UnnnicChatsHeader',
+});
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  sectionIconScheme?: UnnnicColorToken;
+  avatarIcon?: string;
+  avatarName?: string;
+  back?: () => void;
+  close?: () => void;
+  avatarClick?: () => void;
+  titleClick?: () => void;
+  crumbs?: Array<{ name: string; path: string }>;
+  size?: 'auto' | 'small' | 'large';
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  sectionIconScheme: 'aux-purple',
+  avatarIcon: '',
+  avatarName: '',
+  back: undefined,
+  close: undefined,
+  avatarClick: undefined,
+  titleClick: undefined,
+  crumbs: () => [],
+  size: 'auto',
+});
+
+const slots = useSlots();
+
+defineEmits<{
+  crumbClick: [crumb: { name: string; path: string }];
+}>();
 
-  components: {
-    UnnnicButton,
-    UnnnicAvatarIcon,
-    UnnnicChatsUserAvatar,
-    UnnnicBreadcrumb,
-  },
-
-  mixins: [UnnnicI18n],
-
-  props: {
-    title: {
-      type: String,
-      required: true,
-      default: '',
-    },
-    subtitle: {
-      type: String,
-      default: '',
-    },
-    sectionIconScheme: {
-      type: String,
-      default: 'aux-purple',
-    },
-    avatarIcon: {
-      type: String,
-      default: '',
-    },
-    avatarName: {
-      type: String,
-      default: '',
-    },
-    back: {
-      type: Function,
-      required: false,
-    },
-    close: {
-      type: Function,
-      required: false,
-    },
-    avatarClick: {
-      type: Function,
-      required: false,
-    },
-    titleClick: {
-      type: Function,
-      required: false,
-    },
-    crumbs: {
-      type: Array,
-      default: () => [],
-    },
-    size: {
-      type: String,
-      default: 'auto',
-      validator(size) {
-        return ['auto', 'small', 'large'].includes(size);
-      },
-    },
-  },
-};
 </script>
+
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
+
 .unnnic-chats-header {
   padding: $unnnic-spacing-sm;
 

package/src/components/index.ts

@@ -1,93 +1,93 @@
-import type { Component } 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';
-import sidebar from './Sidebar/index.vue';
-import sidebarItem from './Sidebar/SidebarItem.vue';
-import table from './Table/Table.vue';
-import tableRow from './Table/TableRow.vue';
-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 cardSimple from './Card/SimpleCard.vue';
-import cardCompany from './Card/CardCompany.vue';
-import cardData from './Card/CardData.vue';
-import cardImage from './CardImage/CardImage.vue';
+import type { Component } 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";
+import sidebar from "./Sidebar/index.vue";
+import sidebarItem from "./Sidebar/SidebarItem.vue";
+import table from "./Table/Table.vue";
+import tableRow from "./Table/TableRow.vue";
+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 cardSimple from "./Card/SimpleCard.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 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 modalUpload from './ModalUpload/ModalUpload.vue';
-import { callAlert, callModal } from '../utils/call';
-import selectSmart from './SelectSmart/SelectSmart.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 modalUpload from "./ModalUpload/ModalUpload.vue";
+import { callAlert, callModal } from "../utils/call";
+import selectSmart from "./SelectSmart/SelectSmart.vue";
 // import select from './Select/Select.vue';
-import selectItem from './Select/SelectItem.vue';
+import selectItem from "./Select/SelectItem.vue";
 // import selectListItem from './SelectListItem/SelectListItem.vue';
-import multiSelect from './MultiSelect/MultiSelect.vue';
-import alert from './Alert/Alert.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 tag from './Tag/Tag.vue';
-import accordion from './Accordion/Accordion.vue';
-import indicator from './Indicator/Indicator.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';
-import tabsExpanded from './TabsExpanded/TabsExpanded.vue';
-import banner from './Banner/Banner.vue';
-import comment from './Comment/Comment.vue';
-import datePicker from './DatePicker/DatePicker.vue';
-import breadcrumb from './Breadcrumb/Breadcrumb.vue';
-import Switch from './Switch/Switch.vue';
-import Slider from './Slider/Slider.vue';
-import DataArea from './DataArea/DataArea.vue';
-import Pagination from './Pagination/Pagination.vue';
-import DropArea from './DropArea/DropArea.vue';
-import UploadArea from './UploadArea/UploadArea.vue';
-import ImportCard from './ImportCard/ImportCard.vue';
-import DateFilter from './DateFilter/DateFilter.vue';
-import ChatText from './ChatText/ChatText.vue';
-import TextArea from './TextArea/TextArea.vue';
-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 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 ReplyMessage from './ChatsMessage/ReplyMessage.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';
-import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
-import Disclaimer from './Disclaimer/Disclaimer.vue';
-import Drawer from './Drawer/Drawer.vue';
-import TableNext from './TableNext/TableNext.vue';
-import ModalNext from './ModalNext/ModalNext.vue';
-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 tag from "./Tag/Tag.vue";
+import accordion from "./Accordion/Accordion.vue";
+import indicator from "./Indicator/Indicator.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";
+import tabsExpanded from "./TabsExpanded/TabsExpanded.vue";
+import banner from "./Banner/Banner.vue";
+import comment from "./Comment/Comment.vue";
+import datePicker from "./DatePicker/DatePicker.vue";
+import breadcrumb from "./Breadcrumb/Breadcrumb.vue";
+import Switch from "./Switch/Switch.vue";
+import Slider from "./Slider/Slider.vue";
+import DataArea from "./DataArea/DataArea.vue";
+import Pagination from "./Pagination/Pagination.vue";
+import DropArea from "./DropArea/DropArea.vue";
+import UploadArea from "./UploadArea/UploadArea.vue";
+import ImportCard from "./ImportCard/ImportCard.vue";
+import DateFilter from "./DateFilter/DateFilter.vue";
+import ChatText from "./ChatText/ChatText.vue";
+import TextArea from "./TextArea/TextArea.vue";
+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 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 ReplyMessage from "./ChatsMessage/ReplyMessage.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";
+import ChartFunnel from "./ChartFunnel/ChartFunnel.vue";
+import Disclaimer from "./Disclaimer/Disclaimer.vue";
+import Drawer from "./Drawer/Drawer.vue";
+import TableNext from "./TableNext/TableNext.vue";
+import ModalNext from "./ModalNext/ModalNext.vue";
+import ModalDialog from "./ModalDialog/ModalDialog.vue";
+import Tour from "./Tour/Tour.vue";
+import Navigator from "./Navigator/index.vue";
+import SelectTime from "./SelectTime/index.vue";
 
 type VueComponent = Component;
 
@@ -265,7 +265,7 @@ export const unnnicCircleProgressBar = circleProgressBar;
 export const unnnicProgressBar = progressBar;
 export const unnnicChatsContact = ChatsContact;
 export const unnnicChatsDashboardTagLive = ChatsDashboardTagLive;
-export const unnnicChatsHeader = ChatsHeader;
+export const unnnicChatsHeader = ChatsHeader as VueComponent;
 export const unnnicChatsMessage = ChatsMessage;
 export const unnnicReplyMessage = ReplyMessage;
 export const unnnicChatsNavbar = ChatsNavbar;
@@ -278,4 +278,4 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicSelectTime = SelectTime as VueComponent; 
+export const unnnicSelectTime = SelectTime as VueComponent;

package/src/stories/ChatsHeader.stories.js

@@ -32,6 +32,27 @@ export const ContactInfos = {
   },
 };
 
+export const ContactRightSlot = {
+  args: {
+    title: 'John Doe',
+    avatarName: 'John Doe',
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UnnnicChatsHeader },
+    template: `
+      <UnnnicChatsHeader 
+        v-bind="args" 
+      >
+        <template #right>
+          right slot
+        </template>
+      </UnnnicChatsHeader>`,
+  }),
+}
+
 export const Dashboard = {
   args: {
     title: size === 'large' ? 'Lorem Ipsum Inc.' : 'Dashboard',

package/src/types/index.d.ts

@@ -1,6 +1,6 @@
-import type { App, Component } from 'vue';
+import type { App, Component } from "vue";
 
-export type { IconProps } from '../components/Icon.vue';
+export type { IconProps } from "../components/Icon.vue";
 
 export interface UnnnicPlugin {
   install(app: App): void;
@@ -48,4 +48,4 @@ export declare const unnnicCallModal: (props: any) => void;
 export declare const unnnicFontSize: any;
 
 declare const Unnnic: UnnnicPlugin;
-export default Unnnic; 
+export default Unnnic;

package/src/types/unnnic-utils.d.ts

@@ -0,0 +1,88 @@
+export type UnnnicColorToken =
+  | "background-solo"
+  | "background-sky"
+  | "background-grass"
+  | "background-carpet"
+  | "background-snow"
+  | "background-lightest"
+  | "background-white"
+  | "neutral-black"
+  | "neutral-darkest"
+  | "neutral-dark"
+  | "neutral-cloudy"
+  | "neutral-cleanest"
+  | "neutral-clean"
+  | "neutral-soft"
+  | "neutral-lightest"
+  | "neutral-light"
+  | "neutral-white"
+  | "neutral-snow"
+  | "feedback-red"
+  | "feedback-green"
+  | "feedback-yellow"
+  | "feedback-blue"
+  | "feedback-grey"
+  | "aux-blue"
+  | "aux-purple"
+  | "aux-orange"
+  | "aux-lemon"
+  | "aux-pink"
+  | "aux-baby-blue"
+  | "aux-baby-yellow"
+  | "aux-baby-red"
+  | "aux-baby-green"
+  | "aux-baby-pink"
+  | "aux-green-100"
+  | "aux-green-300"
+  | "aux-green-500"
+  | "aux-green-700"
+  | "aux-green-900"
+  | "aux-blue-100"
+  | "aux-blue-300"
+  | "aux-blue-500"
+  | "aux-blue-700"
+  | "aux-blue-900"
+  | "aux-purple-100"
+  | "aux-purple-300"
+  | "aux-purple-500"
+  | "aux-purple-700"
+  | "aux-purple-900"
+  | "aux-red-100"
+  | "aux-red-300"
+  | "aux-red-500"
+  | "aux-red-700"
+  | "aux-red-900"
+  | "aux-orange-100"
+  | "aux-orange-300"
+  | "aux-orange-500"
+  | "aux-orange-700"
+  | "aux-orange-900"
+  | "aux-yellow-100"
+  | "aux-yellow-300"
+  | "aux-yellow-500"
+  | "aux-yellow-700"
+  | "aux-yellow-900"
+  | "floweditor-blue"
+  | "floweditor-purple"
+  | "floweditor-wine"
+  | "floweditor-orange"
+  | "floweditor-pink"
+  | "floweditor-turquoise"
+  | "floweditor-green"
+  | "weni-50"
+  | "weni-100"
+  | "weni-200"
+  | "weni-300"
+  | "weni-400"
+  | "weni-500"
+  | "weni-600"
+  | "weni-700"
+  | "weni-800"
+  | "weni-900"
+  | "weni-950"
+  | "brand-weni"
+  | "brand-weni-dark"
+  | "brand-weni-soft"
+  | "brand-sec-dark"
+  | "brand-sec-soft"
+  | "brand-sec";