@weni/unnnic-system 3.31.1 → 3.32.1

package/src/components/Pagination/Pagination.vue

@@ -16,7 +16,9 @@
       :type="page === modelValue ? 'secondary' : 'tertiary'"
       size="small"
       :text="
-        ['left-hidden', 'right-hidden'].includes(page) ? '...' : String(page)
+        ['left-hidden', 'right-hidden'].includes(page as string)
+          ? '...'
+          : String(page)
       "
       :disabled="disabled"
       data-test="page-button"
@@ -34,148 +36,129 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
 import UnnnicButton from '../Button/Button.vue';
 
-export default {
-  components: {
-    UnnnicButton,
-  },
-
-  props: {
-    modelValue: {
-      type: Number,
-      default: 1,
-    },
-
-    max: {
-      type: Number,
-      default: 1,
-    },
-
-    show: {
-      type: Number,
-      default: 5,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['update:model-value'],
-
-  data() {
-    return {
-      reference: 3,
-    };
-  },
-
-  computed: {
-    pages() {
-      const pages = [];
-
-      for (let i = 1; i <= this.max; i += 1) {
-        pages.push(i);
-      }
-
-      const plus = this.show - 4;
-      const maxToRemove = this.max - plus - 3;
-
-      if (this.reference > 3) {
-        const toRemove = this.reference - 2;
-        const maxRemove = toRemove > maxToRemove ? maxToRemove : toRemove;
-        pages.splice(1, maxRemove, 'left-hidden');
-      }
-
-      if (this.reference < this.max - plus - 1) {
-        const toRemove = this.max - plus - this.reference;
-        const maxRemove = toRemove > maxToRemove ? maxToRemove : toRemove;
-        pages.splice(-(maxRemove + 1), maxRemove, 'right-hidden');
-      }
-
-      return pages;
-    },
-
-    canPrevious() {
-      return this.modelValue > 1;
-    },
-
-    canNext() {
-      return this.modelValue < this.max;
-    },
-  },
-
-  created() {
-    const pageNumber = this.modelValue;
-
-    this.selectPage(pageNumber, true);
-
-    if (!this.pages.includes(pageNumber)) {
-      this.setReference(pageNumber);
+defineOptions({
+  name: 'UnnnicPagination',
+});
+
+export type PaginationPage = number | 'left-hidden' | 'right-hidden';
+
+export interface PaginationProps {
+  modelValue?: number;
+  max?: number;
+  show?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  modelValue: 1,
+  max: 1,
+  show: 5,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  'update:model-value': [value: number];
+}>();
+
+const reference = ref(3);
+
+const pages = computed((): PaginationPage[] => {
+  const pagesList: PaginationPage[] = [];
+
+  for (let i = 1; i <= props.max; i += 1) {
+    pagesList.push(i);
+  }
+
+  const plus = props.show - 4;
+  const maxToRemove = props.max - plus - 3;
+
+  if (reference.value > 3) {
+    const toRemove = reference.value - 2;
+    const maxRemove = toRemove > maxToRemove ? maxToRemove : toRemove;
+    pagesList.splice(1, maxRemove, 'left-hidden');
+  }
+
+  if (reference.value < props.max - plus - 1) {
+    const toRemove = props.max - plus - reference.value;
+    const maxRemove = toRemove > maxToRemove ? maxToRemove : toRemove;
+    pagesList.splice(-(maxRemove + 1), maxRemove, 'right-hidden');
+  }
+
+  return pagesList;
+});
+
+const canPrevious = computed(() => props.modelValue > 1);
+
+const canNext = computed(() => props.modelValue < props.max);
+
+function setReference(value: number) {
+  reference.value = value;
+}
+
+function selectPage(page: PaginationPage, dontEmit?: boolean) {
+  if (page === 'left-hidden') {
+    const pageNumber =
+      (pages.value[pages.value.indexOf('left-hidden') + 1] as number) - 1;
+
+    if (!dontEmit) {
+      emit('update:model-value', pageNumber);
     }
-  },
-
-  methods: {
-    selectPage(page, dontEmit) {
-      if (page === 'left-hidden') {
-        const pageNumber =
-          this.pages[this.pages.indexOf('left-hidden') + 1] - 1;
-
-        if (!dontEmit) {
-          this.$emit('update:model-value', pageNumber);
-        }
-        this.setReference(pageNumber);
-      } else if (page === 'right-hidden') {
-        const pageNumber =
-          this.pages[this.pages.indexOf('right-hidden') - 1] + 1;
-
-        if (!dontEmit) {
-          this.$emit('update:model-value', pageNumber);
-        }
-
-        if (this.pages.includes('left-hidden')) {
-          this.setReference(
-            this.pages[this.pages.indexOf('left-hidden') + 1] + 1,
-          );
-        } else {
-          this.setReference(4);
-        }
-      } else if (!dontEmit) {
-        this.$emit('update:model-value', page);
-      }
-    },
-
-    previousPage() {
-      if (this.canPrevious) {
-        const pageNumber = this.modelValue - 1;
-
-        this.selectPage(pageNumber);
-
-        if (!this.pages.includes(pageNumber)) {
-          this.setReference(pageNumber);
-        }
-      }
-    },
-
-    nextPage() {
-      if (this.canNext) {
-        const pageNumber = this.modelValue + 1;
-
-        this.selectPage(pageNumber);
-
-        if (!this.pages.includes(pageNumber)) {
-          this.setReference(pageNumber);
-        }
-      }
-    },
-
-    setReference(reference) {
-      this.reference = reference;
-    },
-  },
-};
+    setReference(pageNumber);
+  } else if (page === 'right-hidden') {
+    const pageNumber =
+      (pages.value[pages.value.indexOf('right-hidden') - 1] as number) + 1;
+
+    if (!dontEmit) {
+      emit('update:model-value', pageNumber);
+    }
+
+    if (pages.value.includes('left-hidden')) {
+      setReference(
+        (pages.value[pages.value.indexOf('left-hidden') + 1] as number) + 1,
+      );
+    } else {
+      setReference(4);
+    }
+  } else if (!dontEmit) {
+    emit('update:model-value', page);
+  }
+}
+
+function previousPage() {
+  if (canPrevious.value) {
+    const pageNumber = props.modelValue - 1;
+
+    selectPage(pageNumber);
+
+    if (!pages.value.includes(pageNumber)) {
+      setReference(pageNumber);
+    }
+  }
+}
+
+function nextPage() {
+  if (canNext.value) {
+    const pageNumber = props.modelValue + 1;
+
+    selectPage(pageNumber);
+
+    if (!pages.value.includes(pageNumber)) {
+      setReference(pageNumber);
+    }
+  }
+}
+
+const pageNumber = props.modelValue;
+
+selectPage(pageNumber, true);
+
+if (!pages.value.includes(pageNumber)) {
+  setReference(pageNumber);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -184,7 +167,7 @@ export default {
 .pagination {
   display: flex;
   align-items: center;
-  column-gap: $unnnic-spacing-inline-xs;
+  column-gap: $unnnic-space-2;
   user-select: none;
 }
 </style>

package/src/components/Radio/Radio.vue

@@ -37,41 +37,46 @@
   </section>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { pick } from 'lodash';
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  value: {
-    type: [String, Number],
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-  helper: {
-    type: String,
-    default: '',
-  },
+import { inject, computed, useAttrs, type Ref, type ComputedRef } from 'vue';
+
+defineOptions({
+  name: 'UnnnicRadio',
+});
+
+export interface RadioProps {
+  modelValue?: string | number;
+  value?: string | number;
+  disabled?: boolean;
+  label?: string;
+  name?: string;
+  helper?: string;
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  modelValue: '',
+  value: '',
+  disabled: false,
+  label: '',
+  name: '',
+  helper: '',
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number];
+}>();
+
+const $attrs = useAttrs();
 
-const contextModelValue = inject('contextModelValue', undefined);
-const contextName = inject('contextName', undefined);
+const contextModelValue = inject<Ref<string | number> | undefined>(
+  'contextModelValue',
+  undefined,
+);
+const contextName = inject<ComputedRef<string> | Ref<string> | undefined>(
+  'contextName',
+  undefined,
+);
 
 function click() {
   if (!props.disabled) {

package/src/components/Select/SelectItem.vue

@@ -7,7 +7,7 @@
       'unnnic-select-item--selectable': selectable,
       'text-focused': textFocused,
     }"
-    @click="$emit('click')"
+    @click="emit('click')"
   >
     <span
       :class="[
@@ -20,36 +20,36 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup lang="ts">
+defineOptions({
   name: 'UnnicSelectItem',
-  props: {
-    size: {
-      type: String,
-      default: '',
-    },
-    selectable: {
-      type: Boolean,
-      default: true,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    textFocused: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
+});
+
+export interface SelectItemProps {
+  size?: string;
+  selectable?: boolean;
+  active?: boolean;
+  textFocused?: boolean;
+}
+
+withDefaults(defineProps<SelectItemProps>(), {
+  size: '',
+  selectable: true,
+  active: false,
+  textFocused: false,
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
 </script>
 
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
 .unnnic-select-item {
   background-color: $unnnic-color-bg-base;
-  padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
-  margin: $unnnic-inline-xs;
+  padding: $unnnic-space-1 $unnnic-space-2;
+  margin: $unnnic-space-2;
 
   font-family: $unnnic-font-family-secondary;
   color: $unnnic-color-fg-base;

package/src/components/SkeletonLoading/SkeletonLoading.vue

@@ -21,96 +21,95 @@
   </component>
 </template>
 
-<script>
-import { ref, inject } from 'vue';
-import { SkeletonStyle } from './skeletonTheme.vue';
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  ref,
+  useSlots,
+  type Ref,
+  type CSSProperties,
+} from 'vue';
+import { SkeletonStyle, type SkeletonStyleVars } from './skeletonTheme.vue';
 
-export default {
+defineOptions({
   name: 'UnnnicSkeletonLoading',
-  props: {
-    prefix: {
-      type: String,
-      default: 'unnnic',
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    duration: {
-      type: Number,
-      default: 2,
-    },
-    tag: {
-      type: String,
-      default: 'span',
-    },
-    width: [String, Number],
-    height: [String, Number],
-    circle: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: undefined,
-    },
-    direct: {
-      type: Boolean,
-    },
-  },
-  setup() {
-    const themeStyle = inject('_themeStyle', ref({ ...SkeletonStyle }));
-    const theme = inject('_skeletonTheme', ref({}));
-
-    return {
-      themeStyle,
-      theme,
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        `${this.prefix}-skeleton`,
-        this.circle ? `${this.prefix}-skeleton--circle` : '',
-      ];
-    },
-    styles() {
-      const styles = {};
-
-      styles['--skeleton-bg'] = this.themeStyle['--skeleton-bg'];
-      styles['--skeleton-highlight'] = this.themeStyle['--skeleton-highlight'];
-      styles['--skeleton-duration'] = this.duration
-        ? `${this.duration}s`
-        : '0s';
-
-      if (this.width) styles.width = this.width;
-      if (this.height) styles.height = this.height;
-
-      return styles;
-    },
-    elements() {
-      return Array.from({ length: this.count }, () => ({}));
-    },
-    showLoading() {
-      return typeof this.loading !== 'undefined'
-        ? this.loading
-        : this.isEmptyVNode(this.$slots.default);
-    },
-  },
-  methods: {
-    isEmptyVNode(children) {
-      if (!children) return true;
-      const [firstNode] = children();
-      let str = firstNode.children;
-
-      if (str) {
-        // remove all line-break and space character
-        str = str.replace(/(\n|\r\n|\s)/g, '');
-      }
-      return !str;
-    },
-  },
-};
+});
+
+export interface SkeletonLoadingProps {
+  prefix?: string;
+  count?: number;
+  duration?: number;
+  tag?: string;
+  width?: string | number;
+  height?: string | number;
+  circle?: boolean;
+  loading?: boolean;
+  direct?: boolean;
+}
+
+const props = withDefaults(defineProps<SkeletonLoadingProps>(), {
+  prefix: 'unnnic',
+  count: 1,
+  duration: 2,
+  tag: 'span',
+  width: undefined,
+  height: undefined,
+  circle: false,
+  loading: undefined,
+  direct: false,
+});
+
+const slots = useSlots();
+
+const themeStyle = inject<Ref<SkeletonStyleVars>>(
+  '_themeStyle',
+  ref({ ...SkeletonStyle }),
+);
+
+const classes = computed(() => {
+  return [
+    `${props.prefix}-skeleton`,
+    props.circle ? `${props.prefix}-skeleton--circle` : '',
+  ];
+});
+
+const styles = computed((): CSSProperties => {
+  const nextStyles: Record<string, string | number> = {};
+
+  nextStyles['--skeleton-bg'] = themeStyle.value['--skeleton-bg'];
+  nextStyles['--skeleton-highlight'] = themeStyle.value['--skeleton-highlight'];
+  nextStyles['--skeleton-duration'] = props.duration
+    ? `${props.duration}s`
+    : '0s';
+
+  if (props.width) nextStyles.width = props.width;
+  if (props.height) nextStyles.height = props.height;
+
+  return nextStyles as CSSProperties;
+});
+
+const elements = computed(() => {
+  return Array.from({ length: props.count }, () => ({}));
+});
+
+function isEmptyVNode(children: (() => unknown[]) | undefined): boolean {
+  if (!children) return true;
+  const [firstNode] = children() as Array<{ children?: string } | undefined>;
+  let str = firstNode?.children;
+
+  if (str) {
+    // remove all line-break and space character
+    str = str.replace(/(\n|\r\n|\s)/g, '');
+  }
+  return !str;
+}
+
+const showLoading = computed(() => {
+  return typeof props.loading !== 'undefined'
+    ? props.loading
+    : isEmptyVNode(slots.default as (() => unknown[]) | undefined);
+});
 </script>
 
 <style lang="scss">