@weni/unnnic-system 3.8.2-alpha.1 → 3.9.0

package/src/components/TextArea/TextArea.vue

@@ -4,7 +4,7 @@
     :size="size"
     :disabled="disabled"
     :message="message"
-    :error="computedError"
+    :error="errors.join(', ') || type === 'error'"
   >
     <textarea
       ref="textarea"
@@ -18,14 +18,13 @@
       :disabled="disabled"
       :value="modelValue"
       @input="$emit('update:modelValue', fullySanitize($event.target.value))"
-    />
+    ></textarea>
 
     <template
       v-if="maxLength"
       #rightMessage
+      >{{ modelValue.length }}/{{ maxLength }}</template
     >
-      {{ modelValue.length }}/{{ maxLength }}
-    </template>
   </UnnnicFormElement>
 </template>
 
@@ -44,14 +43,6 @@ export default {
       default: 'md',
     },
 
-    resize: {
-      type: String,
-      default: 'vertical',
-      validator(value) {
-        return ['none', 'vertical'].indexOf(value) !== -1;
-      },
-    },
-
     label: {
       type: String,
     },
@@ -92,16 +83,6 @@ export default {
   },
   emits: ['update:modelValue'],
 
-  computed: {
-    computedError() {
-      if (Array.isArray(this.errors)) {
-        return this.errors.join(', ') || this.type === 'error';
-      }
-
-      return this.errors || this.type === 'error';
-    },
-  },
-
   methods: {
     fullySanitize,
     focus() {
@@ -115,35 +96,31 @@ export default {
 @use '@/assets/scss/unnnic' as *;
 @use '@/components/Input/Input' as *;
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .unnnic-text-area {
   &__textarea {
     @include input-base;
 
     display: block;
     width: 100%;
-
-    resize: v-bind(resize);
+    resize: vertical;
+    box-sizing: border-box;
 
     scrollbar-width: thin;
 
-    padding: $unnnic-space-3 $unnnic-space-4;
-
     &--size-md {
       @include input-md-font;
 
-      min-height: 90px;
+      min-height: 6.25 * $unnnic-font-size;
+      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: $unnnic-space-20;
+      min-height: 5 * $unnnic-font-size;
+      padding: ($unnnic-spacing-xs)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &.unnnic-text-area__textarea--type-error {

package/src/components/index.ts

@@ -25,7 +25,6 @@ import cardImage from './CardImage/CardImage.vue';
 import cardProject from './CardProject/CardProject.vue';
 import cardInformation from './CardInformation/CardInformation.vue';
 import checkbox from './Checkbox/Checkbox.vue';
-import checkboxGroup from './CheckboxGroup/CheckboxGroup.vue';
 import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
@@ -89,23 +88,18 @@ 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 TemplatePreview from './TemplatePreview/TemplatePreview.vue';
-import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
-import Toast from './Toast/Toast.vue';
-import { toast } from './Toast/ToastManager';
+import Tabs from './ui/tabs/Tabs.vue';
+import TabsList from './ui/tabs/TabsList.vue';
+import TabsTrigger from './ui/tabs/TabsTrigger.vue';
+import TabsContent from './ui/tabs/TabsContent.vue';
 import Popover from './ui/popover/Popover.vue';
 import PopoverContent from './ui/popover/PopoverContent.vue';
 import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 import PopoverFooter from './ui/popover/PopoverFooter.vue';
-import Dialog from './ui/dialog/Dialog.vue';
-import DialogContent from './ui/dialog/DialogContent.vue';
-import DialogFooter from './ui/dialog/DialogFooter.vue';
-import DialogHeader from './ui/dialog/DialogHeader.vue';
-import DialogTitle from './ui/dialog/DialogTitle.vue';
-import DialogTrigger from './ui/dialog/DialogTrigger.vue';
-import DialogClose from './ui/dialog/DialogClose.vue';
+import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
+import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 
 type VueComponent = Component;
 
@@ -140,7 +134,6 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
-  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -209,18 +202,13 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
-  unnnicToast: Toast,
-  unnnicToastManager: toast,
+  unnnicTabs: Tabs,
+  unnnicTabsList: TabsList,
+  unnnicTabsTrigger: TabsTrigger,
+  unnnicTabsContent: TabsContent,
   unnnicPopover: Popover,
   unnnicPopoverContent: PopoverContent,
   unnnicPopoverTrigger: PopoverTrigger,
-  unnnicDialog: Dialog,
-  unnnicDialogContent: DialogContent,
-  unnnicDialogFooter: DialogFooter,
-  unnnicDialogHeader: DialogHeader,
-  unnnicDialogTitle: DialogTitle,
-  unnnicDialogTrigger: DialogTrigger,
-  unnnicDialogClose: DialogClose,
 };
 
 export const unnnicFontSize = fontSize;
@@ -250,7 +238,6 @@ export const unnnicCardImage = cardImage as VueComponent;
 export const unnnicCardProject = cardProject as VueComponent;
 export const unnnicCardInformation = cardInformation;
 export const unnnicCheckbox = checkbox;
-export const unnnicCheckboxGroup = checkboxGroup;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
 export const unnniclanguageSelect = languageSelect as VueComponent;
@@ -273,7 +260,7 @@ export const unnnicAccordion = accordion;
 export const unnnicIndicator = indicator;
 export const unnnicSkeletonLoading = skeletonLoading;
 export const unnnicCarousel = carousel;
-export const unnnicLabel = label as VueComponent;
+export const unnnicLabel = label;
 export const unnnicTab = tab;
 export const unnnicTabsExpanded = tabsExpanded;
 export const unnnicBanner = banner;
@@ -314,24 +301,22 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicSelectTime = SelectTime as VueComponent;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const unnnicDataTable = DataTable as VueComponent;
+export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
+export const unnnicTabs = Tabs;
+export const unnnicTabsList = TabsList;
+export const unnnicTabsTrigger = TabsTrigger;
+export const unnnicTabsContent = TabsContent;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
 export const unnnicPopoverFooter = PopoverFooter;
-export const unnnicDialog = Dialog;
-export const unnnicDialogContent = DialogContent;
-export const unnnicDialogFooter = DialogFooter;
-export const unnnicDialogHeader = DialogHeader;
-export const unnnicDialogTitle = DialogTitle;
-export const unnnicDialogTrigger = DialogTrigger;
-export const unnnicDialogClose = DialogClose;
+export const unnnicTemplatePreview = TemplatePreview as VueComponent;
+export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 
 export const UnnnicFontSize = fontSize;
+export const UnnnicFormElement = formElement;
 export const UnnnicInput = input;
 export const UnnnicInputNext = inputNext;
 export const UnnnicInputDatePicker = inputDatePicker;
@@ -357,7 +342,6 @@ export const UnnnicCardImage = cardImage as VueComponent;
 export const UnnnicCardProject = cardProject as VueComponent;
 export const UnnnicCardInformation = cardInformation;
 export const UnnnicCheckbox = checkbox;
-export const UnnnicCheckboxGroup = checkboxGroup;
 export const UnnnicCollapse = collapse;
 export const UnnnicRadio = radio;
 export const UnnniclanguageSelect = languageSelect as VueComponent;
@@ -380,7 +364,7 @@ export const UnnnicAccordion = accordion;
 export const UnnnicIndicator = indicator;
 export const UnnnicSkeletonLoading = skeletonLoading;
 export const UnnnicCarousel = carousel;
-export const UnnnicLabel = label as VueComponent;
+export const UnnnicLabel = label;
 export const UnnnicTab = tab;
 export const UnnnicTabsExpanded = tabsExpanded;
 export const UnnnicBanner = banner;
@@ -421,21 +405,16 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
-export const UnnnicSelectTime = SelectTime as VueComponent;
-export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
-export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const UnnnicDataTable = DataTable as VueComponent;
+export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
-export const UnnnicToast = Toast;
-export const UnnnicToastManager = toast;
+export const UnnnicTabs = Tabs;
+export const UnnnicTabsList = TabsList;
+export const UnnnicTabsTrigger = TabsTrigger;
+export const UnnnicTabsContent = TabsContent;
 export const UnnnicPopover = Popover;
 export const UnnnicPopoverContent = PopoverContent;
 export const UnnnicPopoverTrigger = PopoverTrigger;
 export const UnnnicPopoverFooter = PopoverFooter;
-export const UnnnicDialog = Dialog;
-export const UnnnicDialogContent = DialogContent;
-export const UnnnicDialogFooter = DialogFooter;
-export const UnnnicDialogHeader = DialogHeader;
-export const UnnnicDialogTitle = DialogTitle;
-export const UnnnicDialogTrigger = DialogTrigger;
-export const UnnnicDialogClose = DialogClose;
+export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
+export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;

package/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  name: 'UnnnicTabs',
+});
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsContent
+    :class="cn(props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  TabsListProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('unnnic-tabs-list', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: $unnnic-space-6;
+  box-shadow: inset 0 (-$unnnic-border-width-thinner) 0 0
+    $unnnic-color-border-base;
+}
+</style>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const classes = computed(() => {
+  const defaultClasses = ['unnnic-tabs-trigger'];
+
+  if (props.disabled) {
+    defaultClasses.push('unnnic-tabs-trigger--disabled');
+  }
+
+  return defaultClasses;
+});
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        ...classes,
+        'transition-all disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="unnnic-tabs-trigger__content truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-tabs-trigger {
+  background-color: transparent;
+  border: none;
+
+  padding: $unnnic-space-2 $unnnic-space-4;
+  font: $unnnic-font-action;
+  color: $unnnic-color-fg-base;
+
+  cursor: pointer;
+
+  &[data-state='active'] {
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+    box-shadow: inset 0 (-$unnnic-border-width-thin) 0 0
+      $unnnic-color-border-active;
+  }
+
+  &--disabled {
+    color: $unnnic-color-fg-muted;
+  }
+
+  &:hover {
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+  }
+}
+</style>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';

package/src/locales/en.json

@@ -41,6 +41,5 @@
       "flags": "Flags",
       "custom": "Custom"
     }
-  },
-  "search": "Search"
+  }
 }

package/src/locales/es.json

@@ -41,6 +41,5 @@
       "flags": "Banderas",
       "custom": "Personalizados"
     }
-  },
-  "search": "Buscar"
+  }
 }

package/src/locales/pt_br.json

@@ -41,6 +41,5 @@
       "flags": "Bandeiras",
       "custom": "Personalizados"
     }
-  },
-  "search": "Buscar"
+  }
 }

package/src/stories/Alert.stories.js

@@ -1,5 +1,7 @@
+import AlertCaller from '../components/Alert/AlertCaller.vue';
 import alert from '../utils/call';
 import UnnnicAlert from '../components/Alert/Alert.vue';
+import AlertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'Feedback/Alert',
@@ -18,6 +20,9 @@ export default {
   args: {
     type: 'default',
     text: 'Text',
+    linkHref: '',
+    linkText: '',
+    linkTarget: '',
   },
   argTypes: {
     type: {
@@ -32,15 +37,42 @@ export default {
         type: 'text',
       },
     },
-    version: {
+
+    linkHref: {
       control: {
-        type: 'select',
+        type: 'text',
+      },
+    },
+
+    linkText: {
+      control: {
+        type: 'text',
+      },
+    },
+
+    linkTarget: {
+      control: {
+        type: 'text',
       },
-      options: ['1.1', '2.0'],
+    },
+    position: {
+      if: { arg: 'version' },
+    },
+    version: {
+      control: false,
     },
     title: {
       if: { arg: 'version' },
     },
+    icon: {
+      if: { arg: 'version' },
+    },
+    closeText: {
+      if: { arg: 'version' },
+    },
+    scheme: {
+      if: { arg: 'version' },
+    },
   },
 };
 
@@ -63,7 +95,7 @@ export const Normal = {
     },
   },
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -85,7 +117,7 @@ export const Normal = {
 
 export const InlineComponent = {
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -134,7 +166,7 @@ export const WithContainerRef = {
     },
   },
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -158,3 +190,32 @@ export const WithContainerRef = {
     scheme: 'feedback-green',
   },
 };
+
+export const Banner = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation has the additional prop ${'`showCloseButton`'}, false by default.`,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { AlertBanner },
+    setup() {
+      return { args };
+    },
+    methods: {
+      unnnicCallAlert() {
+        alert.callAlert({
+          props: this.args,
+          containerRef: this.$refs.divContainer,
+        });
+      },
+    },
+    template: '<alert-banner v-bind="args" />',
+  }),
+  args: {
+    text: 'Text',
+    showCloseButton: false,
+  },
+};