@antify/ui-module 1.6.0 → 1.7.1

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

@@ -0,0 +1,304 @@
+<script lang="ts" setup>
+import {computed, onMounted, watch, useSlots} from 'vue';
+import {Size} from '../../../enums/Size.enum';
+import AntSkeleton from '../../AntSkeleton.vue';
+import AntIcon from '../../AntIcon.vue';
+import {BaseInputType} from './__types/AntBaseInput.types';
+import {Grouped} from '../../../enums/Grouped.enum';
+import {
+  faCircleCheck,
+  faCircleInfo,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faXmark,
+  type IconDefinition
+} from '@fortawesome/free-solid-svg-icons';
+import {handleEnumValidation} from '../../../handler';
+import {classesToObjectSyntax, hasSlotContent} from '../../../utils';
+import {InputState} from '../../../enums';
+import {IconSize} from '../../__types';
+
+defineOptions({inheritAttrs: false});
+
+const emit = defineEmits(['update:modelValue', 'blur', 'validate', 'update:inputRef']);
+const props = withDefaults(defineProps<{
+  modelValue: string | number | null;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  placeholder?: string;
+  skeleton?: boolean;
+  type?: BaseInputType;
+  grouped?: Grouped;
+  wrapperClass?: string | Record<string, boolean>;
+  showIcon?: boolean;
+  iconLeft?: IconDefinition;
+  nullable?: boolean;
+  inputRef?: null | HTMLInputElement;
+}>(), {
+  state: InputState.base,
+  disabled: false,
+  size: Size.md,
+  skeleton: false,
+  type: BaseInputType.text,
+  grouped: Grouped.none,
+  showIcon: true,
+  default: false,
+  nullable: false,
+  inputRef: null
+});
+const slot = useSlots();
+const icons = {
+  [InputState.info]: faCircleInfo,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.success]: faCircleCheck,
+  [InputState.base]: null,
+};
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
+    [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
+    [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',
+    [InputState.warning]: 'outline-warning-500 focus:ring-warning-200 bg-warning-100 placeholder:text-warning-700',
+  };
+
+  return {
+    'block transition-colors relative border-none outline w-full focus:z-10 text-black': true,
+    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
+    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
+    'text-right': props.type === BaseInputType.number,
+    [variants[props.state]]: true,
+    // Size
+    'focus:ring-2 p-1 text-xs': props.size === Size.xs2,
+    'focus:ring-2 p-1.5 text-xs': props.size === Size.xs,
+    'focus:ring-2 p-1.5 text-sm': props.size === Size.sm,
+    'focus:ring-4 p-2 text-sm': props.size === Size.md,
+    'focus:ring-4 p-2.5 text-sm': props.size === Size.lg,
+    // Icon left
+    'pl-6': props.size === Size.xs2 && props.iconLeft,
+    'pl-7': props.size === Size.sm && props.iconLeft || props.size === Size.xs && props.iconLeft,
+    'pl-8': props.size === Size.md && props.iconLeft,
+    'pl-9': props.size === Size.lg && props.iconLeft,
+    // Icon right
+    'pr-6': props.size === Size.xs2 && props.showIcon && icon.value ||
+      props.size === Size.xs2 && props.nullable ||
+      props.size === Size.xs2 && hasSlotContent(slot['icon-right']),
+    'pr-7': props.size === Size.xs && props.showIcon && icon.value ||
+      props.size === Size.xs && props.nullable ||
+      props.size === Size.xs && hasSlotContent(slot['icon-right']),
+    'pr-8': props.size === Size.sm && props.showIcon && icon.value ||
+      props.size === Size.sm && props.nullable ||
+      props.size === Size.sm && hasSlotContent(slot['icon-right']),
+    'pr-9': props.size === Size.md && props.showIcon && icon.value ||
+      props.size === Size.md && props.nullable ||
+      props.size === Size.md && hasSlotContent(slot['icon-right']),
+    'pr-10': props.size === Size.lg && props.showIcon && icon.value ||
+      props.size === Size.lg && props.nullable ||
+      props.size === Size.lg && hasSlotContent(slot['icon-right']),
+    // Grouped
+    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
+    'rounded-md': props.grouped === Grouped.none,
+    'invisible': props.skeleton,
+  };
+});
+const iconClasses = computed(() => ({
+  'transition-[height]': true,
+  'opacity-50': props.disabled
+}));
+const iconColorClass = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.danger]: 'text-danger-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.success]: 'text-success-700',
+    [InputState.warning]: 'text-warning-700',
+  };
+
+  return variants[props.state];
+});
+const _wrapperClass = computed(() => ({
+  '-mr-px': props.grouped !== Grouped.none,
+  'cursor-not-allowed': props.disabled,
+  ...classesToObjectSyntax(props.wrapperClass)
+}));
+const icon = computed(() => icons[props.state]);
+const _modelValue = computed<string | number | null>({
+  get: () => props.modelValue,
+  set: (val: string | number | null) => {
+    if (props.type === BaseInputType.number && typeof val !== 'number') {
+      return emit('update:modelValue', null);
+    }
+
+    emit('update:modelValue', val);
+  },
+});
+const inputIconSize = computed(() => {
+  if (props.size === Size.xs || props.size === Size.xs2) {
+    return IconSize.xs;
+  }
+
+  return IconSize.sm;
+});
+const _inputRef = computed({
+  get() {
+    return props.inputRef;
+  },
+  set(val) {
+    emit('update:inputRef', val);
+  }
+});
+
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+}, {deep: true});
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.type, BaseInputType, 'type');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+
+  /**
+   * Validate default value without delayed data fetching.
+   */
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+function onClickClearIcon() {
+  if (!props.disabled) {
+    _modelValue.value = null;
+  }
+}
+</script>
+
+<template>
+  <div
+    class="block relative w-full h-fit"
+    :class="_wrapperClass"
+  >
+    <div
+      v-if="iconLeft"
+      class="absolute h-full flex items-center justify-center z-20"
+      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
+    >
+      <AntIcon
+        :icon="iconLeft"
+        :size="inputIconSize"
+        color="text-for-white-bg-font"
+      />
+    </div>
+
+    <input
+      ref="_inputRef"
+      v-model="_modelValue"
+      :class="inputClasses"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled || skeleton"
+      v-bind="$attrs"
+      @blur="onBlur"
+    >
+
+    <div
+      v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
+      class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
+      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
+    >
+      <slot name="icon-right">
+        <AntIcon
+          v-if="nullable && _modelValue !== null && _modelValue !== ''"
+          :icon="faXmark"
+          :class="{'cursor-pointer': !disabled, ...iconClasses}"
+          :color="iconColorClass"
+          :size="inputIconSize"
+          @click="() => onClickClearIcon()"
+        />
+
+        <AntIcon
+          v-else-if="showIcon && icon"
+          :icon="icon"
+          :color="iconColorClass"
+          :class="iconClasses"
+          :size="inputIconSize"
+        />
+      </slot>
+    </div>
+
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      :grouped="grouped"
+      rounded
+    />
+  </div>
+</template>
+
+<style scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* clears the "X" from Internet Explorer */
+input[type=search]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+input[type=search]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* clears the "X" from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+/* Remove calendar icon in Chrome */
+input[type="date"]::-webkit-datetime-edit-fields-wrapper,
+input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
+input[type="month"]::-webkit-datetime-edit-fields-wrapper,
+input[type="time"]::-webkit-datetime-edit-fields-wrapper,
+input[type="week"]::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+input[type="month"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="week"]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+</style>

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/{dist/runtime/components/form → src/runtime/components/inputs}/Elements/AntInputLabel.vue

@@ -1,6 +1,6 @@
 <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';
 
@@ -16,9 +16,12 @@ const props = withDefaults(defineProps<{
 });
 
 const classes = computed(() => ({
-  'relative font-medium w-fit': true,
-  'text-xs': props.size === Size.sm,
-  'text-sm': props.size === Size.md,
+  '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
 }));
 
 onMounted(() => {
@@ -28,15 +31,15 @@ onMounted(() => {
 
 <template>
   <label
-      class="flex flex-col gap-1.5 w-full"
+    class="flex flex-col gap-1.5 w-full"
   >
     <span
-        v-if="label"
-        :class="classes"
+      v-if="label"
+      :class="classes"
     >
       <span
-          :class="{'invisible': skeleton}"
-          @click="$emit('clickContent')"
+        :class="{'invisible': skeleton}"
+        @click="$emit('clickContent')"
       >
         <slot name="label">
           {{ label }}
@@ -44,12 +47,12 @@ onMounted(() => {
       </span>
 
       <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
+        v-if="skeleton"
+        absolute
+        rounded
       />
     </span>
 
-    <slot/>
+    <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>