@weni/unnnic-system 3.32.0 → 3.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.32.0",
+  "version": "3.32.1",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/AvatarIcon/AvatarIcon.vue

@@ -18,59 +18,45 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
 import UnnnicIcon from '../Icon.vue';
+import type { SchemeColor } from '../Icon.vue';
+import type { IconSize } from '../Icon/types';
 
-export default {
-  components: {
-    UnnnicIcon,
-  },
+defineOptions({
+  name: 'UnnnicAvatarIcon',
+});
 
-  props: {
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
+export type AvatarIconSize = 'nano' | 'xs' | 'sm' | 'lg' | 'xl';
 
-    icon: {
-      type: String,
-      default: 'graph-stats-1',
-    },
-
-    size: {
-      type: String,
-      default: 'sm',
-      validator(value) {
-        return ['nano', 'xs', 'sm', 'lg', 'xl'].indexOf(value) !== -1;
-      },
-    },
+export interface AvatarIconProps {
+  enabled?: boolean;
+  icon?: string;
+  size?: AvatarIconSize;
+  scheme?: SchemeColor;
+  filled?: boolean;
+  opacity?: boolean;
+}
 
-    scheme: {
-      type: String,
-      default: 'fg-info',
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-    opacity: {
-      type: Boolean,
-      default: true,
-    },
-  },
+const props = withDefaults(defineProps<AvatarIconProps>(), {
+  enabled: true,
+  icon: 'graph-stats-1',
+  size: 'sm',
+  scheme: 'fg-info',
+  filled: false,
+  opacity: true,
+});
 
-  computed: {
-    iconSize() {
-      return {
-        nano: 'xs',
-        xs: 'sm',
-        sm: 'md',
-        lg: 'lg',
-        xl: 'xl',
-      }[this.size];
-    },
-  },
-};
+const iconSize = computed((): IconSize => {
+  return {
+    nano: 'xs',
+    xs: 'sm',
+    sm: 'md',
+    lg: 'lg',
+    xl: 'xl',
+  }[props.size] as IconSize;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -96,12 +82,12 @@ export default {
 
 .unnnic-avatar-icon {
   border-radius: $unnnic-border-radius-sm;
-  padding: $unnnic-spacing-inset-nano;
+  padding: $unnnic-space-2;
   display: inline-flex;
 
   &.nano,
   &.xs {
-    padding: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
+    padding: $unnnic-space-1;
   }
 }
 </style>

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -11,7 +11,7 @@
             index === crumbs.length - 1,
         }"
         :data-test="crumb.name"
-        @click="$emit('crumb-click', crumb)"
+        @click="emit('crumb-click', crumb)"
       >
         {{ crumb.name }}
       </div>
@@ -29,22 +29,28 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import UnnnicIcon from '../Icon.vue';
 
-export default {
+defineOptions({
   name: 'UnnnicBreadcrumb',
-  components: { UnnnicIcon },
-  props: {
-    crumbs: {
-      type: Array,
-      default: null,
-      validator: (crumb) => crumb.every((c) => c.name !== null),
-    },
-  },
+});
 
-  emits: ['crumb-click'],
-};
+export interface BreadcrumbItem {
+  name: string;
+}
+
+export interface BreadcrumbProps {
+  crumbs?: BreadcrumbItem[] | null;
+}
+
+withDefaults(defineProps<BreadcrumbProps>(), {
+  crumbs: null,
+});
+
+const emit = defineEmits<{
+  'crumb-click': [crumb: BreadcrumbItem];
+}>();
 </script>
 
 <style scoped lang="scss">
@@ -56,7 +62,7 @@ export default {
 
   &__container {
     &__divider {
-      margin: 0 $unnnic-inline-xs;
+      margin: 0 $unnnic-space-2;
     }
 
     &__link {

package/src/components/Checkbox/Checkbox.vue

@@ -40,68 +40,55 @@
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
 import { pick } from 'lodash';
 
-export default {
-  model: {
-    event: 'change',
-  },
-
-  props: {
-    modelValue: {
-      type: [Boolean, String],
-      default: false,
-      validator(value) {
-        return [true, false, 'less'].includes(value);
-      },
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    label: {
-      type: String,
-      default: '',
-    },
-
-    helper: {
-      type: String,
-      default: '',
-    },
-
-    textRight: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['change', 'update:model-value'],
-
-  computed: {
-    valueName() {
-      if (this.modelValue === true) {
-        return 'checked';
-      }
-      if (this.modelValue === false) {
-        return 'default';
-      }
+defineOptions({
+  name: 'UnnnicCheckbox',
+});
+
+export type CheckboxValue = boolean | 'less';
+
+export interface CheckboxProps {
+  modelValue?: CheckboxValue;
+  disabled?: boolean;
+  label?: string;
+  helper?: string;
+  textRight?: string;
+}
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  disabled: false,
+  label: '',
+  helper: '',
+  textRight: '',
+});
 
-      return 'less';
-    },
-  },
+const emit = defineEmits<{
+  change: [value: boolean];
+  'update:model-value': [value: boolean];
+}>();
 
-  methods: {
-    pick,
+const $attrs = useAttrs();
 
-    click() {
-      const isChecked = ['checked', 'less'].includes(this.valueName);
-      this.$emit('change', !isChecked);
-      this.$emit('update:model-value', !isChecked);
-    },
-  },
-};
+const valueName = computed(() => {
+  if (props.modelValue === true) {
+    return 'checked';
+  }
+  if (props.modelValue === false) {
+    return 'default';
+  }
+
+  return 'less';
+});
+
+function click() {
+  const isChecked = ['checked', 'less'].includes(valueName.value);
+  emit('change', !isChecked);
+  emit('update:model-value', !isChecked);
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/DatePicker/DatePicker.vue

@@ -260,7 +260,8 @@ import {
   days as translationDays,
   periods as translationPeriods,
   buttons as translationButtons,
-} from './translations.js';
+  type PeriodOption,
+} from './translations';
 
 import i18n from '@/utils/plugins/i18n';
 
@@ -270,9 +271,34 @@ defineOptions({
   name: 'UnnnicDatePicker',
 });
 
-type PeriodOption = {
-  id: string;
-  name: string;
+export type { PeriodOption };
+
+export type DateCellProperty =
+  | 'inside month'
+  | 'out of range'
+  | 'selected'
+  | 'left-highlighted'
+  | 'right-highlighted'
+  | 'highlighted'
+  | 'today'
+  | string;
+
+export interface DateCell {
+  properties: DateCellProperty[];
+  date?: string | number;
+  toString: () => string;
+}
+
+export type DatePickerTranslations = Record<
+  string,
+  string | Record<string, string>
+>;
+
+type I18nPlugin = {
+  global: {
+    locale: string;
+    messages: Record<string, unknown>;
+  };
 };
 
 export interface DatePickerProps {
@@ -300,7 +326,7 @@ export interface DatePickerProps {
   hideOptions?: boolean;
 
   locale?: string;
-  translations?: Record<string, unknown>;
+  translations?: DatePickerTranslations;
 
   variant?: 'card' | 'popover';
 }
@@ -403,19 +429,21 @@ const containerOptionsFlexDirection = computed(() => {
   return props.hideOptions ? 'column-reverse' : 'column';
 });
 
-const i18nFn = (...args: any[]): string | undefined => {
-  const [key, defaults] = args;
+const i18nPlugin = i18n as unknown as I18nPlugin;
+
+type I18nFnArg = number | string | Record<string, string>;
 
-  const validLocaleValues = Object.keys(
-    ((i18n as any).global.messages as Record<string, unknown>) || {},
-  );
+const i18nFn = (key: string, ...args: I18nFnArg[]): string | undefined => {
+  const [defaults] = args;
 
-  let locale = props.locale as string | undefined;
+  const validLocaleValues = Object.keys(i18nPlugin.global.messages || {});
+
+  let locale = props.locale;
 
   const treatedSelectedLocale =
-    get(i18n, 'global.locale') === 'en-us'
+    get(i18nPlugin, 'global.locale') === 'en-us'
       ? 'en'
-      : (get(i18n, 'global.locale') as string | undefined);
+      : (get(i18nPlugin, 'global.locale') as string | undefined);
 
   locale =
     locale && validLocaleValues.includes(locale)
@@ -432,14 +460,14 @@ const i18nFn = (...args: any[]): string | undefined => {
 
   if (!text) {
     text = get(
-      defaultTranslations as Record<string, unknown>,
+      defaultTranslations,
       `${key}.${locale}`,
-      get(defaultTranslations as Record<string, unknown>, key, defaults),
+      get(defaultTranslations, key, defaults),
     ) as string | undefined;
   }
 
-  if (text?.includes('|') && typeof args[1] === 'number') {
-    const count: number = args[1];
+  if (text?.includes('|') && typeof args[0] === 'number') {
+    const count: number = args[0];
     const pluralization = text.split('|');
 
     if (pluralization.length === 3) {
@@ -451,13 +479,11 @@ const i18nFn = (...args: any[]): string | undefined => {
 
   let vars: Record<string, string> = {};
 
-  Object.values(args)
-    .slice(1)
-    .forEach((argument) => {
-      if (!(argument instanceof Array) && argument instanceof Object) {
-        vars = argument as Record<string, string>;
-      }
-    });
+  args.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]);
@@ -589,7 +615,7 @@ function getDatesOfTheMonth(reference: string) {
 
   date.setDate(1 - date.getDay());
 
-  const dates: { properties: string[]; toString: () => string }[] = [];
+  const dates: DateCell[] = [];
 
   for (let i = 0; i < 6 * 7; i += 1) {
     const dateString = dateToString(date);
@@ -668,11 +694,7 @@ function getMonthsOfTheYear(reference: string) {
 
   date.setMonth(0);
 
-  const dates: {
-    properties: string[];
-    date: string;
-    toString: () => string;
-  }[] = [];
+  const dates: DateCell[] = [];
 
   for (let i = 0; i < 3 * 4; i += 1) {
     const dateString = dateToString(date);
@@ -732,11 +754,7 @@ function getYears(reference: string) {
 
   date.setMonth(0);
 
-  const dates: {
-    properties: string[];
-    date: number;
-    toString: () => string;
-  }[] = [];
+  const dates: DateCell[] = [];
 
   for (let i = 0; i < 3 * 4; i += 1) {
     const dateString = dateToString(date);

package/src/components/DatePicker/{translations.js → translations.ts}

@@ -1,3 +1,15 @@
+export type DatePickerLocale = 'pt-br' | 'en' | 'en-us' | 'es';
+
+export type PeriodOption = {
+  id: string;
+  name: string;
+};
+
+export type LocaleButtons = {
+  clear: string;
+  filter: string;
+};
+
 const englishMonths = [
   'January',
   'February',
@@ -15,7 +27,7 @@ const englishMonths = [
 
 const englishDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
-const englishPeriods = [
+const englishPeriods: PeriodOption[] = [
   { name: 'Last 7 days', id: 'last-7-days' },
   { name: 'Last 14 days', id: 'last-14-days' },
   { name: 'Last 30 days', id: 'last-30-days' },
@@ -25,7 +37,7 @@ const englishPeriods = [
   { name: 'Custom', id: 'custom' },
 ];
 
-export const months = {
+export const months: Record<string, string[]> = {
   'pt-br': [
     'Janeiro',
     'Fevereiro',
@@ -58,14 +70,14 @@ export const months = {
   ],
 };
 
-export const days = {
+export const days: Record<string, string[]> = {
   'pt-br': ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
   en: englishDays,
   'en-us': englishDays,
   es: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
 };
 
-export const buttons = {
+export const buttons: Record<string, LocaleButtons> = {
   'pt-br': {
     clear: 'Limpar',
     filter: 'Filtrar',
@@ -82,7 +94,7 @@ export const buttons = {
 
 buttons.en = buttons['en-us'];
 
-export const periods = {
+export const periods: Record<string, PeriodOption[]> = {
   'pt-br': [
     {
       name: 'Últimos 7 dias',

package/src/components/Input/BaseInput.vue

@@ -14,90 +14,82 @@
     :value="fullySanitize(modelValue)"
     :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
     :type="nativeType"
-    :maxlength="maxlength"
+    :maxlength="maxlength ?? undefined"
     :readonly="readonly"
   />
 </template>
 
-<script>
-import { mask } from 'vue-the-mask';
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { mask as vMask } from 'vue-the-mask';
 import { fullySanitize } from '../../utils/sanitize';
 
-export default {
-  directives: { mask },
-  props: {
-    type: {
-      type: String,
-      default: 'normal',
-      validator(value) {
-        return ['normal', 'error'].indexOf(value) !== -1;
-      },
-    },
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    nativeType: {
-      type: String,
-      default: 'text',
-    },
-    size: {
-      type: String,
-      default: 'md',
-    },
-    mask: {
-      type: [String, Array],
-      default: '',
-    },
-    hasIconLeft: Boolean,
-    hasIconRight: Boolean,
-    hasClearIcon: Boolean,
-    maxlength: {
-      type: Number,
-      default: null,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    useFocusProp: {
-      type: Boolean,
-      default: false,
-    },
-    focus: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    attributes() {
-      return {
-        ...this.$attrs,
-        ...this.$attrs['v-bind'],
-        onInput: (event) => {
-          this.$emit('update:modelValue', event.srcElement.value);
-        },
-      };
+defineOptions({
+  name: 'UnnnicBaseInput',
+});
+
+export type InputVariant = 'normal' | 'error';
+export type InputSize = 'md' | 'sm';
+
+export interface BaseInputProps {
+  type?: InputVariant;
+  modelValue?: string;
+  nativeType?: string;
+  size?: InputSize | string;
+  mask?: string | string[];
+  hasIconLeft?: boolean;
+  hasIconRight?: boolean;
+  hasClearIcon?: boolean;
+  maxlength?: number | null;
+  readonly?: boolean;
+  useFocusProp?: boolean;
+  focus?: boolean;
+}
+
+const props = withDefaults(defineProps<BaseInputProps>(), {
+  type: 'normal',
+  modelValue: '',
+  nativeType: 'text',
+  size: 'md',
+  mask: '',
+  hasIconLeft: false,
+  hasIconRight: false,
+  hasClearIcon: false,
+  maxlength: null,
+  readonly: false,
+  useFocusProp: false,
+  focus: false,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const attrs = useAttrs();
+
+const attributes = computed(() => {
+  return {
+    ...attrs,
+    ...(attrs['v-bind'] as Record<string, unknown> | undefined),
+    onInput: (event: Event) => {
+      const target = event.target as HTMLInputElement | null;
+      emit('update:modelValue', target?.value ?? '');
     },
+  };
+});
 
-    classes() {
-      return [
-        'input',
-        `size-${this.size}`,
-        this.type,
-        {
-          'input--has-icon-left': this.hasIconLeft,
-          'input--has-icon-right': this.hasIconRight,
-          'input--has-clear-icon': this.hasClearIcon,
-        },
-      ];
+const classes = computed(() => {
+  return [
+    'input',
+    `size-${props.size}`,
+    props.type,
+    {
+      'input--has-icon-left': props.hasIconLeft,
+      'input--has-icon-right': props.hasIconRight,
+      'input--has-clear-icon': props.hasClearIcon,
     },
-  },
-  methods: {
-    fullySanitize,
-  },
-};
+  ];
+});
 </script>
 
 <style lang="scss" scoped>