@antify/ui-module 1.6.0 → 1.7.2

package/src/runtime/components/{form → inputs}/Elements/AntDropDown.vue

@@ -8,7 +8,7 @@
  */
 
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { InputColorType, Size } from '../../../enums';
+import { InputState, Size } from '../../../enums';
 import type { SelectOption } from '../__types';
 import { useVModel } from '@vueuse/core';
 import type { Validator } from '@antify/validate';
@@ -19,14 +19,14 @@ const props = withDefaults(defineProps<{
   focused: string | number | null;
   open: boolean;
   options: SelectOption[];
-  colorType?: InputColorType;
+  state?: InputState;
   validator?: Validator;
   size?: Size;
   inputRef?: HTMLElement | null;
   closeOnEnter?: boolean;
   autoSelectFirstOnOpen?: boolean;
 }>(), {
-  colorType: InputColorType.base,
+  state: InputState.base,
   focusOnOpen: true,
   closeOnEnter: false,
   autoSelectFirstOnOpen: true
@@ -37,38 +37,37 @@ const isOpen = useVModel(props, 'open', emit);
 const focusedDropDownItem = useVModel(props, 'focused', emit);
 
 const dropdownClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-neutral-300 border-neutral-300',
-    [InputColorType.success]: 'bg-success-500 border-success-500',
-    [InputColorType.info]: 'bg-info-500 border-info-500',
-    [InputColorType.warning]: 'bg-warning-500 border-warning-500',
-    [InputColorType.danger]: 'bg-danger-500 border-danger-500',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-neutral-300 border-neutral-300',
+    [InputState.success]: 'bg-success-500 border-success-500',
+    [InputState.info]: 'bg-info-500 border-info-500',
+    [InputState.warning]: 'bg-warning-500 border-warning-500',
+    [InputState.danger]: 'bg-danger-500 border-danger-500',
   };
 
   return {
     'absolute w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-40': true,
     'rounded-bl-md rounded-br-md': true,
-    [variants[props.colorType]]: true,
+    [variants[props.state]]: true,
     // Size
-    'text-xs': props.size === Size.sm,
-    'text-sm': props.size === Size.md,
+    'text-sm': props.size === Size.sm ||  props.size === Size.md
   };
 });
 const dropDownItemClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-white text-for-white-bg-font',
-    [InputColorType.success]: 'bg-success-100 border-success-100-font',
-    [InputColorType.info]: 'bg-info-100 border-info-100-font',
-    [InputColorType.warning]: 'bg-warning-100 border-warning-100-font',
-    [InputColorType.danger]: 'bg-danger-100 border-danger-100-font',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-white text-for-white-bg-font',
+    [InputState.success]: 'bg-success-100 border-success-100-font',
+    [InputState.info]: 'bg-info-100 border-info-100-font',
+    [InputState.warning]: 'bg-warning-100 border-warning-100-font',
+    [InputState.danger]: 'bg-danger-100 border-danger-100-font',
   };
 
   return {
     'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
-    [variants[props.colorType]]: true,
+    [variants[props.state]]: true,
     // Size
     'p-1.5': props.size === Size.sm,
-    'p-2.5': props.size === Size.md,
+    'p-2': props.size === Size.md,
   };
 });
 
@@ -115,9 +114,9 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     const option = props.options[index + 1];
 
     if (index === -1) {
-      focusedDropDownItem.value = props.options[0].value
+      focusedDropDownItem.value = props.options[0].value;
     } else if (option !== undefined) {
-      focusedDropDownItem.value = option.value
+      focusedDropDownItem.value = option.value;
     }
   }
 
@@ -128,7 +127,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     const option = props.options[index - 1];
 
     if (option !== undefined) {
-      focusedDropDownItem.value = option.value
+      focusedDropDownItem.value = option.value;
     }
   }
 
@@ -138,15 +137,15 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 }
 
 function getActiveDropDownItemClasses(option: SelectOption) {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-neutral-50/25',
-    [InputColorType.success]: 'bg-success-100/25',
-    [InputColorType.info]: 'bg-info-100/25',
-    [InputColorType.warning]: 'bg-warning-100/25',
-    [InputColorType.danger]: 'bg-danger-100/25',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-neutral-50/25',
+    [InputState.success]: 'bg-success-100/25',
+    [InputState.info]: 'bg-info-100/25',
+    [InputState.warning]: 'bg-warning-100/25',
+    [InputState.danger]: 'bg-danger-100/25',
   };
 
-  return option.value === focusedDropDownItem.value ? { [variants[props.colorType]]: true } : {};
+  return option.value === focusedDropDownItem.value ? { [variants[props.state]]: true } : {};
 }
 
 function onClickDropDownItem(e: MouseEvent, value: string | number | null) {

package/src/runtime/components/{form → inputs}/Elements/AntInputDescription.vue

@@ -1,40 +1,43 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum'
+import {Size} from '../../../enums/Size.enum';
 import AntSkeleton from '../../AntSkeleton.vue';
 import {handleEnumValidation} from '../../../handler';
-import {InputColorType} from '../../../enums';
+import {InputState} from '../../../enums';
 
 const props = withDefaults(defineProps<{
-  colorType?: InputColorType,
+  state?: InputState,
   size?: Size;
   skeleton?: boolean;
 }>(), {
   skeleton: false,
   size: Size.md,
-  colorType: InputColorType.base
+  state: InputState.base
 });
 
 const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-500',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
   };
 
   return {
     'relative font-regular inline-block transition-color': true,
-    'text-xs': props.size === Size.sm,
-    'text-sm': props.size === Size.md,
-    [variants[props.colorType]]: true
+    'text-2xs': props.size === Size.xs2,
+    'text-xs': props.size === Size.xs,
+    'text-sm': props.size === Size.sm,
+    'text-md': props.size === Size.md,
+    'text-lg': props.size === Size.lg,
+    [variants[props.state]]: true
   };
 });
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 </script>
 

package/src/runtime/components/inputs/Elements/AntInputLabel.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../../../enums/Size.enum';
+import AntSkeleton from '../../AntSkeleton.vue';
+import {handleEnumValidation} from '../../../handler';
+
+defineEmits(['clickContent']);
+
+const props = withDefaults(defineProps<{
+  label?: string;
+  size?: Size;
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+  size: Size.md,
+});
+
+const fontClasses = computed(() => ({
+  'relative font-medium w-fit text-for-white-bg-font': true,
+  'text-2xs': props.size === Size.xs2,
+  'text-xs': props.size === Size.xs,
+  'text-sm': props.size === Size.sm,
+  'text-md': props.size === Size.md,
+  'text-lg': props.size === Size.lg
+}));
+const gapSize = computed(() => ({
+  'gap-2.5': props.size === Size.lg,
+  'gap-2': props.size === Size.md,
+  'gap-1.5': props.size === Size.sm || props.size === Size.xs,
+  'gap-1': props.size === Size.xs2,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+});
+</script>
+
+<template>
+  <label
+    class="flex flex-col w-full"
+    :class="gapSize"
+  >
+    <span
+      v-if="label"
+      :class="fontClasses"
+    >
+      <span
+        :class="{'invisible': skeleton}"
+        @click="$emit('clickContent')"
+      >
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </span>
+
+      <AntSkeleton
+        v-if="skeleton"
+        absolute
+        rounded
+      />
+    </span>
+
+    <slot />
+  </label>
+</template>

package/src/runtime/components/inputs/Elements/AntInputLimiter.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../../../enums/Size.enum';
+import AntSkeleton from '../../AntSkeleton.vue';
+import {handleEnumValidation} from '../../../handler';
+import {InputState} from '../../../enums';
+
+const props = withDefaults(defineProps<{
+  value: number;
+  maxValue: number;
+  state?: InputState;
+  size?: Size;
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+  size: Size.md,
+  state: InputState.base
+});
+
+const classes = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
+  };
+
+  return {
+    'relative font-regular inline-block transition-color': true,
+    'text-2xs': props.size === Size.xs2,
+    'text-xs': props.size === Size.xs,
+    'text-sm': props.size === Size.sm,
+    'text-md': props.size === Size.md,
+    'text-lg': props.size === Size.lg,
+    [variants[props.state]]: true,
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+});
+</script>
+
+<template>
+  <div :class="classes">
+    <span :class="{'invisible': skeleton}">
+      {{ value }}/{{ maxValue }}
+    </span>
+
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
+  </div>
+</template>

package/src/runtime/components/layouts/AntNavLeftLayout.vue

@@ -2,12 +2,12 @@
 import {computed, useSlots} from 'vue';
 import AntNavbar from '../navbar/AntNavbar.vue';
 import type {RouteLocationRaw} from 'vue-router';
-import type {NavbarItem} from '../navbar/__types/NavbarItem';
+import type {NavbarItemTypes} from '../navbar/__types/NavbarItem.types';
 
 defineProps<{
-  navbarItems: NavbarItem[];
+  navbarItems: NavbarItemTypes[];
   logoRoute?: RouteLocationRaw;
-}>()
+}>();
 
 const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>

package/src/runtime/components/navbar/AntNavbar.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 
 import { computed } from 'vue';
-import type { NavbarItem } from './__types/NavbarItem';
+import type { NavbarItemTypes } from './__types/NavbarItem.types';
 import AntNavbarItem from './AntNavbarItem.vue';
 
 defineProps<{
-  navbarItems: NavbarItem[]
+  navbarItems: NavbarItemTypes[]
 }>();
 
 const containerClasses = computed(() => ({
   'w-full h-full bg-white flex flex-col gap-1 p-1.5': true,
-}))
+}));
 
 </script>
 
 <template>
- <div :class="containerClasses">
-   <AntNavbarItem
-     v-for="(navbarItem, index) in navbarItems"
-     :key="`navbar-item-${index}`"
-     :navbar-item="navbarItem"
-   />
- </div>
+  <div :class="containerClasses">
+    <AntNavbarItem
+      v-for="(navbarItem, index) in navbarItems"
+      :key="`navbar-item-${index}`"
+      :navbar-item="navbarItem"
+    />
+  </div>
 </template>

package/src/runtime/components/navbar/AntNavbarItem.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type {NavbarItem} from './__types/NavbarItem';
+import type {NavbarItemTypes} from './__types/NavbarItem.types';
 import {computed, ref} from 'vue';
 import AntIcon from '../AntIcon.vue';
 import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
 import AntTransitionCollapseHeight from '../transitions/AntTransitionCollapseHeight.vue';
 
 const props = defineProps<{
-  navbarItem: NavbarItem
-}>()
+  navbarItem: NavbarItemTypes
+}>();
 
 const itemClasses = computed(() => ({
   'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
   'transition-colors hover:bg-neutral-100': true,
   'text-primary-500': props.navbarItem.active
-}))
+}));
 
-const open = ref(false)
+const open = ref(false);
 
 function itemClick(): void {
   if (props.navbarItem.click) {

package/src/runtime/components/table/AntTable.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import {AntTableSortDirection, type TableHeader} from './__types/TableHeader.type';
+import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
 import {computed, ref, type Ref, watch} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {ColorType} from '../../enums';
+import {State} from '../../enums';
 import AntTh from './AntTh.vue';
 import AntTd from './AntTd.vue';
 import AntSpinner from '../AntSpinner.vue';
 import AntSkeleton from '../AntSkeleton.vue';
 
-defineOptions({ inheritAttrs: false });
+defineOptions({inheritAttrs: false});
 
 const emits = defineEmits([
   'update:modelValue',
@@ -27,11 +27,13 @@ const props = withDefaults(
     loading?: boolean;
     selectableRows?: boolean;
     showLightVersion?: boolean;
+    size: AntTableSize
   }>(), {
     rowKey: 'id',
     loading: false,
     selectableRows: false,
     showLightVersion: false,
+    size: AntTableSize.md
   });
 
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
@@ -45,10 +47,10 @@ const _headers = computed(() => {
   // }
 
   return props.headers;
-})
+});
 
 watch(() => props.showLightVersion, (val) => {
-  setTimeout(() => _showLightVersion.value = val, val ? 200 : 400)
+  setTimeout(() => _showLightVersion.value = val, val ? 200 : 400);
 });
 
 function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
@@ -103,6 +105,7 @@ function rowClick(elem: Record<string, unknown>): void {
                 v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
                 :key="`table-header-${header.identifier}-${index}`"
                 :header="header"
+                :size="size"
                 @sort="sortTable"
               >
                 <template #headerContent>
@@ -144,6 +147,7 @@ function rowClick(elem: Record<string, unknown>): void {
                 :header="header"
                 :element="elem"
                 :align="header.align"
+                :size="size"
                 @click="rowClick(elem)"
               >
                 <template #beforeCellContent="props">
@@ -197,7 +201,7 @@ function rowClick(elem: Record<string, unknown>): void {
     >
       <AntSpinner
         class="!w-24 !h-24"
-        :color-type="ColorType.primary"
+        :state="State.primary"
       />
     </div>
 

package/src/runtime/components/table/AntTableSortButton.vue

@@ -1,38 +1,48 @@
 <script setup lang="ts">
 
-import AntIcon from '../AntIcon.vue';
-import { faAngleDown, faAngleUp, faMinus } from '@fortawesome/free-solid-svg-icons';
-import { IconSize } from '../__types';
-import { AntTableSortDirection } from './__types/TableHeader.type';
+import {faAngleDown, faAngleUp, faMinus} from '@fortawesome/free-solid-svg-icons';
+import {AntTableSize, AntTableSortDirection} from './__types/TableHeader.types';
+import AntButton from '../buttons/AntButton.vue';
+import {computed} from 'vue';
+import {Size} from '../../enums/Size.enum';
 
-defineEmits([ 'sortClick' ])
-withDefaults(
+defineEmits(['sortClick']);
+const props = withDefaults(
   defineProps<{
     sortDirection?: AntTableSortDirection
+    size: AntTableSize
   }>(), {
-    sortDirection: AntTableSortDirection.neutral
+    sortDirection: AntTableSortDirection.neutral,
+    size: AntTableSize.md
   });
+
+const buttonSize = computed(() => {
+  if (props.size === AntTableSize.lg) {
+    return Size.sm;
+  } else if (props.size === AntTableSize.md) {
+    return Size.xs;
+  } else {
+    return Size.xs2;
+  }
+});
+const buttonIcon = computed(() => {
+  if (props.sortDirection === AntTableSortDirection.asc) {
+    return faAngleDown;
+  }
+
+  if (props.sortDirection === AntTableSortDirection.desc) {
+    return faAngleUp;
+  }
+
+  if (props.sortDirection === AntTableSortDirection.neutral) {
+    return faMinus;
+  }
+});
 </script>
 
 <template>
-  <button
-    class="bg-white text-for-white-bg-font rounded h-[26px] w-[26px] flex items-center justify-center"
-    @click="$emit('sortClick')"
-  >
-    <AntIcon
-      v-if="sortDirection === AntTableSortDirection.asc"
-      :icon="faAngleDown"
-      :size="IconSize.sm"
-    />
-    <AntIcon
-      v-if="sortDirection === AntTableSortDirection.desc"
-      :icon="faAngleUp"
-      :size="IconSize.sm"
-    />
-    <AntIcon
-      v-if="sortDirection === AntTableSortDirection.neutral"
-      :icon="faMinus"
-      :size="IconSize.sm"
-    />
-  </button>
+  <AntButton
+    :size="buttonSize"
+    :icon-left="buttonIcon"
+  />
 </template>

package/src/runtime/components/table/AntTd.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 
-import { AntTableAlign, AntTableRowTypes, type TableHeader } from './__types/TableHeader.type';
-import { computed } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import {AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader} from './__types/TableHeader.types';
+import {computed} from 'vue';
+import type {RouteLocationRaw} from 'vue-router';
 
 const props =
   withDefaults(
@@ -10,15 +10,20 @@ const props =
       element: Record<string, unknown>;
       header: TableHeader;
       align?: AntTableAlign
+      size: AntTableSize
     }>(), {
-      align: AntTableAlign.left
+      align: AntTableAlign.left,
+      size: AntTableSize.md
     });
 
 const cellClasses = computed(() => ({
-  'whitespace-nowrap px-2.5 py-0 h-[40px] text-sm font-medium relative': true,
+  'whitespace-nowrap text-sm font-medium relative': true,
   'text-right': props.align === AntTableAlign.right,
-  'text-center': props.align === AntTableAlign.center
-}))
+  'text-center': props.align === AntTableAlign.center,
+  'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
+  'px-2 py-0 h-9': props.size === AntTableSize.md,
+  'px-1.5 py-0 h-8': props.size === AntTableSize.sm
+}));
 </script>
 
 <template>
@@ -40,8 +45,11 @@ const cellClasses = computed(() => ({
     <div
       v-else-if="header.type === AntTableRowTypes.link && header.toProp"
     >
-      <router-link :to="element[header.toProp] as RouteLocationRaw" class="absolute inset-0">
-      </router-link>
+      <RouterLink
+        :to="element[header.toProp] as RouteLocationRaw"
+        class="absolute inset-0"
+      >
+      </RouterLink>
       {{ element[header.identifier] }}
     </div>
 
@@ -55,7 +63,10 @@ const cellClasses = computed(() => ({
       v-else-if="header.type === AntTableRowTypes.slot"
       :class="header.rowClassList"
     >
-      <slot name="cellContent" v-bind="{ element, header }"></slot>
+      <slot
+        name="cellContent"
+        v-bind="{ element, header }"
+      ></slot>
     </div>
 
     <slot

package/src/runtime/components/table/AntTh.vue

@@ -1,32 +1,35 @@
 <script setup lang="ts">
 
-import { AntTableAlign, AntTableSortDirection, type TableHeader } from './__types/TableHeader.type';
-import { computed, ref, type Ref } from 'vue';
+import {AntTableAlign, AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
+import {computed, ref, type Ref} from 'vue';
 import AntTableSortButton from './AntTableSortButton.vue';
 
-defineEmits([ 'sort' ])
+defineEmits([ 'sort' ]);
 const props = defineProps<{
   header: TableHeader
+	size: AntTableSize
 }>();
 
-const headerClasses = computed(() => {
-  const classes = {
+const headerClasses = computed(() => ({
     [props.header.headerClassList || '']: true,
-    'px-2.5 py-0 h-[40px] text-sm text-neutral-100-font uppercase font-semi-bold': true,
+    'text-sm text-neutral-100-font uppercase font-semi-bold': true,
     'text-left': !props.header.align || props.header.align === AntTableAlign.left,
     'text-center': props.header.align === AntTableAlign.center,
     'text-right': props.header.align === AntTableAlign.right,
-  };
-
-  return classes;
-});
+    'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
+		'px-2 py-0 h-9': props.size === AntTableSize.md,
+		'px-1.5 py-0 h-8': props.size === AntTableSize.sm
+}));
 
 const cellClasses = computed(() => ({
-  'flex gap-2.5 items-center': true,
+  'flex items-center': true,
   'justify-start': !props.header.align || props.header.align === AntTableAlign.left,
   'justify-center': props.header.align === AntTableAlign.center,
   'justify-end': props.header.align === AntTableAlign.right,
-}))
+	'gap-2.5': props.size === AntTableSize.lg,
+	'gap-2': props.size === AntTableSize.md,
+	'gap-1.5': props.size === AntTableSize.sm,
+}));
 
 // TODO:: Initial sort should be possible with this
 const sortDirection: Ref<AntTableSortDirection> = ref(AntTableSortDirection.neutral);
@@ -53,14 +56,18 @@ function getNewSortDirection(): AntTableSortDirection {
     :class="headerClasses"
   >
     <div :class="cellClasses">
-      <slot name="headerContent" v-bind="header">
+      <slot
+        name="headerContent"
+        v-bind="header"
+      >
         {{ header.title }}
       </slot>
 
       <AntTableSortButton
         v-if="header.sortable"
-        @sort-click="$emit('sort', header, getNewSortDirection())"
         :sort-direction="sortDirection"
+        :size="size"
+        @sort-click="$emit('sort', header, getNewSortDirection())"
       />
     </div>
   </th>