@antify/ui-module 1.5.1 → 1.7.1

package/dist/runtime/components/{form → forms}/__stories/AntFormGroup.stories.mjs

@@ -1,10 +1,10 @@
 import AntFormGroup from "../AntFormGroup.vue";
 import AntFormGroupLabel from "../AntFormGroupLabel.vue";
-import AntTextInput from "../AntTextInput.vue";
+import AntTextInput from "../../inputs/AntTextInput.vue";
 import AntButton from "../../buttons/AntButton.vue";
 import { Direction } from "../../../enums/Direction.enum.mjs";
 const meta = {
-  title: "Components/Forms/Form Group",
+  title: "Forms/Form Group",
   component: AntFormGroup,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
@@ -25,7 +25,7 @@ export const Docs = {
       <AntFormGroup v-bind="args">
         <AntFormGroupLabel>Example label</AntFormGroupLabel>
         <AntTextInput label="Example"/>
-        <AntButton color-type="primary">Submit</AntButton>
+        <AntButton state="primary">Submit</AntButton>
       </AntFormGroup>
     `
   }),

package/dist/runtime/components/{form → forms}/__stories/AntFormGroupLabel.stories.mjs

@@ -1,6 +1,6 @@
 import AntFormGroupLabel from "../AntFormGroupLabel.vue";
 const meta = {
-  title: "Components/Forms/Form Group Label",
+  title: "Forms/Form Group Label",
   component: AntFormGroupLabel,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {}

package/dist/runtime/components/index.d.ts

@@ -1,6 +1,50 @@
+import AntActionButton from './buttons/AntActionButton.vue';
+import AntButton from './buttons/AntButton.vue';
+import AntCreateButton from './buttons/AntCreateButton.vue';
+import AntDeleteButton from './buttons/AntDeleteButton.vue';
+import AntDuplicateButton from './buttons/AntDuplicateButton.vue';
+import AntEditButton from './buttons/AntEditButton.vue';
+import AntSaveAndNewButton from './buttons/AntSaveAndNewButton.vue';
+import AntSaveButton from './buttons/AntSaveButton.vue';
+import AntCrud from './crud/AntCrud.vue';
+import AntCrudDetail from './crud/AntCrudDetail.vue';
+import AntCrudDetailActions from './crud/AntCrudDetailActions.vue';
+import AntCrudDetailNav from './crud/AntCrudDetailNav.vue';
+import AntCrudTableFilter from './crud/AntCrudTableFilter.vue';
+import AntCrudTableNav from './crud/AntCrudTableNav.vue';
+import AntDeleteDialog from './dialogs/AntDeleteDialog.vue';
+import AntDialog from './dialogs/AntDialog.vue';
+import AntField from './forms/AntField.vue';
+import AntFormGroup from './forms/AntFormGroup.vue';
+import AntFormGroupLabel from './forms/AntFormGroupLabel.vue';
+import AntBaseInput from './inputs/Elements/AntBaseInput.vue';
+import AntDropDown from './inputs/Elements/AntDropDown.vue';
+import AntInputDescription from './inputs/Elements/AntInputDescription.vue';
+import AntInputLabel from './inputs/Elements/AntInputLabel.vue';
+import AntInputLimiter from './inputs/Elements/AntInputLimiter.vue';
+import AntCheckbox from './inputs/AntCheckbox.vue';
+import AntCheckboxGroup from './inputs/AntCheckboxGroup.vue';
+import AntDateInput from './inputs/AntDateInput.vue';
+import AntNumberInput from './inputs/AntNumberInput.vue';
+import AntPasswordInput from './inputs/AntPasswordInput.vue';
+import AntRadio from './inputs/AntRadio.vue';
+import AntRadioGroup from './inputs/AntRadioGroup.vue';
+import AntRangeSlider from './inputs/AntRangeSlider.vue';
+import AntSearch from './inputs/AntSearch.vue';
+import AntSelect from './inputs/AntSelect.vue';
+import AntSwitch from './inputs/AntSwitch.vue';
+import AntSwitcher from './inputs/AntSwitcher.vue';
+import AntTagInput from './inputs/AntTagInput.vue';
+import AntNavLeftLayout from './layouts/AntNavLeftLayout.vue';
+import AntNavbar from './navbar/AntNavbar.vue';
+import AntNavbarItem from './navbar/AntNavbarItem.vue';
+import AntTable from './table/AntNavbar.vue';
+import AntTabs from './tabs/AntTabs.vue';
+import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
 import AntAccordion from './AntAccordion.vue';
 import AntAccordionItem from './AntAccordionItem.vue';
 import AntAlert from './AntAlert.vue';
+import AntContent from './AntContent.vue';
 import AntDropdown from './AntDropdown.vue';
 import AntIcon from './AntIcon.vue';
 import AntKeycap from './AntKeycap.vue';
@@ -9,14 +53,10 @@ import AntListGroupItem from './AntListGroupItem.vue';
 import AntModal from './AntModal.vue';
 import AntPagination from './AntPagination.vue';
 import AntPopover from './AntPopover.vue';
-import AntCrudTableFilter from './crud/AntCrudTableFilter.vue';
 import AntSkeleton from './AntSkeleton.vue';
 import AntSpinner from './AntSpinner.vue';
-import AntTableNav from './crud/AntCrudTableNav.vue';
 import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
+import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export * from './deprecated/elements';
-export * from './form';
-export * from './form/Elements';
-export { AntAccordion, AntAccordionItem, AntAlert, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntCrudTableFilter, AntSkeleton, AntSpinner, AntTableNav, AntTag, AntToast, AntTooltip };
+export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntDropDown, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip };

package/dist/runtime/components/index.mjs

@@ -1,6 +1,50 @@
+import AntActionButton from "./buttons/AntActionButton.vue";
+import AntButton from "./buttons/AntButton.vue";
+import AntCreateButton from "./buttons/AntCreateButton.vue";
+import AntDeleteButton from "./buttons/AntDeleteButton.vue";
+import AntDuplicateButton from "./buttons/AntDuplicateButton.vue";
+import AntEditButton from "./buttons/AntEditButton.vue";
+import AntSaveAndNewButton from "./buttons/AntSaveAndNewButton.vue";
+import AntSaveButton from "./buttons/AntSaveButton.vue";
+import AntCrud from "./crud/AntCrud.vue";
+import AntCrudDetail from "./crud/AntCrudDetail.vue";
+import AntCrudDetailActions from "./crud/AntCrudDetailActions.vue";
+import AntCrudDetailNav from "./crud/AntCrudDetailNav.vue";
+import AntCrudTableFilter from "./crud/AntCrudTableFilter.vue";
+import AntCrudTableNav from "./crud/AntCrudTableNav.vue";
+import AntDeleteDialog from "./dialogs/AntDeleteDialog.vue";
+import AntDialog from "./dialogs/AntDialog.vue";
+import AntField from "./forms/AntField.vue";
+import AntFormGroup from "./forms/AntFormGroup.vue";
+import AntFormGroupLabel from "./forms/AntFormGroupLabel.vue";
+import AntBaseInput from "./inputs/Elements/AntBaseInput.vue";
+import AntDropDown from "./inputs/Elements/AntDropDown.vue";
+import AntInputDescription from "./inputs/Elements/AntInputDescription.vue";
+import AntInputLabel from "./inputs/Elements/AntInputLabel.vue";
+import AntInputLimiter from "./inputs/Elements/AntInputLimiter.vue";
+import AntCheckbox from "./inputs/AntCheckbox.vue";
+import AntCheckboxGroup from "./inputs/AntCheckboxGroup.vue";
+import AntDateInput from "./inputs/AntDateInput.vue";
+import AntNumberInput from "./inputs/AntNumberInput.vue";
+import AntPasswordInput from "./inputs/AntPasswordInput.vue";
+import AntRadio from "./inputs/AntRadio.vue";
+import AntRadioGroup from "./inputs/AntRadioGroup.vue";
+import AntRangeSlider from "./inputs/AntRangeSlider.vue";
+import AntSearch from "./inputs/AntSearch.vue";
+import AntSelect from "./inputs/AntSelect.vue";
+import AntSwitch from "./inputs/AntSwitch.vue";
+import AntSwitcher from "./inputs/AntSwitcher.vue";
+import AntTagInput from "./inputs/AntTagInput.vue";
+import AntNavLeftLayout from "./layouts/AntNavLeftLayout.vue";
+import AntNavbar from "./navbar/AntNavbar.vue";
+import AntNavbarItem from "./navbar/AntNavbarItem.vue";
+import AntTable from "./table/AntNavbar.vue";
+import AntTabs from "./tabs/AntTabs.vue";
+import AntTransitionCollapseHeight from "./transitions/AntTransitionCollapseHeight.vue";
 import AntAccordion from "./AntAccordion.vue";
 import AntAccordionItem from "./AntAccordionItem.vue";
 import AntAlert from "./AntAlert.vue";
+import AntContent from "./AntContent.vue";
 import AntDropdown from "./AntDropdown.vue";
 import AntIcon from "./AntIcon.vue";
 import AntKeycap from "./AntKeycap.vue";
@@ -9,20 +53,60 @@ import AntListGroupItem from "./AntListGroupItem.vue";
 import AntModal from "./AntModal.vue";
 import AntPagination from "./AntPagination.vue";
 import AntPopover from "./AntPopover.vue";
-import AntCrudTableFilter from "./crud/AntCrudTableFilter.vue";
 import AntSkeleton from "./AntSkeleton.vue";
 import AntSpinner from "./AntSpinner.vue";
-import AntTableNav from "./crud/AntCrudTableNav.vue";
 import AntTag from "./AntTag.vue";
 import AntToast from "./AntToast.vue";
+import AntToaster from "./AntToaster.vue";
 import AntTooltip from "./AntTooltip.vue";
-export * from "./deprecated/elements";
-export * from "./form/index.mjs";
-export * from "./form/Elements/index.mjs";
 export {
+  AntActionButton,
+  AntButton,
+  AntCreateButton,
+  AntDeleteButton,
+  AntDuplicateButton,
+  AntEditButton,
+  AntSaveAndNewButton,
+  AntSaveButton,
+  AntCrud,
+  AntCrudDetail,
+  AntCrudDetailActions,
+  AntCrudDetailNav,
+  AntCrudTableFilter,
+  AntCrudTableNav,
+  AntDeleteDialog,
+  AntDialog,
+  AntField,
+  AntFormGroup,
+  AntFormGroupLabel,
+  AntBaseInput,
+  AntDropDown,
+  AntInputDescription,
+  AntInputLabel,
+  AntInputLimiter,
+  AntCheckbox,
+  AntCheckboxGroup,
+  AntDateInput,
+  AntNumberInput,
+  AntPasswordInput,
+  AntRadio,
+  AntRadioGroup,
+  AntRangeSlider,
+  AntSearch,
+  AntSelect,
+  AntSwitch,
+  AntSwitcher,
+  AntTagInput,
+  AntNavLeftLayout,
+  AntNavbar,
+  AntNavbarItem,
+  AntTable,
+  AntTabs,
+  AntTransitionCollapseHeight,
   AntAccordion,
   AntAccordionItem,
   AntAlert,
+  AntContent,
   AntDropdown,
   AntIcon,
   AntKeycap,
@@ -31,11 +115,10 @@ export {
   AntModal,
   AntPagination,
   AntPopover,
-  AntCrudTableFilter,
   AntSkeleton,
   AntSpinner,
-  AntTableNav,
   AntTag,
   AntToast,
+  AntToaster,
   AntTooltip
 };

package/dist/runtime/components/inputs/AntCheckbox.vue

@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import {useVModel} from '@vueuse/core';
+import {AntField} from './Elements';
+import {InputState, Size} from '../../enums';
+import AntSkeleton from '../AntSkeleton.vue';
+import {computed, onMounted, ref, watch} from 'vue';
+import {handleEnumValidation} from '../../handler';
+import {faCheck} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from '../AntIcon.vue';
+import {IconSize} from '../__types';
+import {AntCheckboxSize} from './__types/AntCheckbox.types';
+
+const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
+const props =
+  withDefaults(
+    defineProps<{
+      modelValue: boolean | null;
+      label?: string;
+      description?: string;
+      state?: InputState;
+      size?: AntCheckboxSize,
+      skeleton?: boolean;
+      disabled?: boolean;
+      readonly?: boolean;
+      messages?: string[];
+    }>(), {
+      state: InputState.base,
+      size: AntCheckboxSize.md,
+      skeleton: false,
+      disabled: false,
+      readonly: false,
+      messages: () => []
+    });
+const _modelValue = useVModel(props, 'modelValue', emit);
+const delayedValue = ref(_modelValue.value);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const inputClasses = computed(() => {
+  const focusColorVariant: Record<InputState, string> = {
+    [InputState.base]: 'focus:ring-primary-200',
+    [InputState.danger]: 'focus:ring-danger-200',
+    [InputState.info]: 'focus:ring-info-200',
+    [InputState.success]: 'focus:ring-success-200',
+    [InputState.warning]: 'focus:ring-warning-200',
+  };
+  const activeColorVariant: Record<InputState, string> = {
+    [InputState.base]: 'text-primary-500',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
+  };
+  const inactiveColorVariant: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300',
+    [InputState.danger]: 'outline-danger-500',
+    [InputState.info]: 'outline-info-500',
+    [InputState.success]: 'outline-success-500',
+    [InputState.warning]: 'outline-warning-500',
+  };
+
+  return {
+    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
+    'outline outline-1 outline-offset-[-1px] rounded': true,
+    'focus:ring-offset-0': true,
+    'invisible': props.skeleton,
+    'cursor-pointer': !hasInputState.value,
+    'focus:ring-2': props.size === AntCheckboxSize.sm && !hasInputState.value,
+    'focus:ring-4': props.size === AntCheckboxSize.md && !hasInputState.value,
+    'h-5 w-5': props.size === AntCheckboxSize.md,
+    'h-4 w-4': props.size === AntCheckboxSize.sm,
+    'cursor-not-allowed opacity-50': props.disabled,
+    [focusColorVariant[props.state]]: hasInputState.value,
+    [activeColorVariant[props.state]]: delayedValue.value,
+    [inactiveColorVariant[props.state]]: !_modelValue.value,
+  };
+});
+const contentClasses = computed(() => ({
+  'text-for-white-bg-font': true,
+  'cursor-pointer': !hasInputState.value,
+  'cursor-not-allowed opacity-50': props.disabled,
+  'text-sm': props.size === AntCheckboxSize.md,
+  'text-xs': props.size === AntCheckboxSize.sm
+}));
+const fieldSize = computed(() => {
+  if (props.size === AntCheckboxSize.md) {
+    return Size.sm;
+  }
+
+  return Size.xs;
+});
+
+/**
+ * Delay value to change the checkboxes background color after
+ * animation is finished.
+ */
+watch(_modelValue, (val) => {
+  if (val === false) {
+    setTimeout(() => delayedValue.value = false, 120);
+  } else {
+    delayedValue.value = true;
+  }
+});
+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);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+onMounted(() => {
+  handleEnumValidation(props.size, AntCheckboxSize, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :skeleton="skeleton"
+    :state="state"
+    :size="fieldSize"
+    :expanded="false"
+    :messages="messages"
+  >
+    <div class="flex items-center gap-1.5">
+      <div class="relative full-height flex items-center">
+        <input
+          v-model="_modelValue"
+          :class="inputClasses"
+          type="checkbox"
+          :aria-checked="_modelValue"
+          :disabled="disabled || readonly"
+          @blur="onBlur"
+        />
+
+        <AntIcon
+          v-if="_modelValue"
+          :icon="faCheck"
+          class="absolute !text-white pointer-events-none"
+          :size="size === AntCheckboxSize.md ? IconSize.sm : IconSize.xs"
+        />
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+
+      <div
+        class="relative flex items-center"
+        :class="props.size === AntCheckboxSize.md ? 'h-5' : 'h-4'"
+      >
+        <span :class="contentClasses">
+          <slot />
+        </span>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+    </div>
+  </AntField>
+</template>
+
+<style scoped>
+input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative}input[type=checkbox]:before{background:currentColor;border-radius:inherit;content:"";height:100%;position:absolute;transform:scale(0);transition:transform .12s;width:100%}input[type=checkbox]:checked:before{transform:scale(1)}
+</style>

package/dist/runtime/components/inputs/AntCheckboxGroup.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import {type AntCheckboxType, AntCheckboxSize} from './__types/AntCheckbox.types';
+import {AntField} from './Elements';
+import {useVModel} from '@vueuse/core';
+import AntCheckbox from './AntCheckbox.vue';
+import {computed, onMounted, ref, watch} from 'vue';
+import {Direction} from '../../enums/Direction.enum';
+import {InputState, Size} from '../../enums';
+
+const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[] | null;
+    checkboxes?: AntCheckboxType[];
+    label?: string;
+    description?: string;
+    direction?: Direction;
+    state?: InputState;
+    size?: AntCheckboxSize,
+    skeleton?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    messages?: string[]
+  }>(),
+  {
+    direction: Direction.column,
+    state: InputState.base,
+    size: AntCheckboxSize.md,
+    skeleton: false,
+    readonly: false,
+    disabled: false,
+    messages: () => []
+  }
+);
+const _modelValue = useVModel(props, 'modelValue', emit);
+const containerClasses = computed(() => ({
+  'flex gap-2.5': true,
+  'flex-row': props.direction === Direction.row,
+  'flex-col': props.direction === Direction.column
+}));
+const containerRef = ref<null | HTMLElement>(null);
+
+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);
+  }
+});
+
+function updateValue(value: string) {
+  if (_modelValue.value === null) {
+    return _modelValue.value = [value];
+  }
+
+  const index = _modelValue.value.indexOf(value);
+
+  if (index === -1) {
+    _modelValue.value.push(value);
+  } else {
+    _modelValue.value.splice(index, 1);
+  }
+}
+
+function hasFocusedCheckbox() {
+  return !!containerRef.value?.querySelector('input[type="checkbox"]:focus');
+}
+
+function onBlurCheckbox() {
+  setTimeout(() => {
+    if (!hasFocusedCheckbox()) {
+      emit('validate', _modelValue.value);
+    }
+  }, 100);
+}
+
+onMounted(() => {
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :skeleton="skeleton"
+    :state="state"
+    :size="size as unknown as Size"
+    :messages="messages"
+    label-for="noop"
+  >
+    <div
+      ref="containerRef"
+      :class="containerClasses"
+    >
+      <AntCheckbox
+        v-for="(checkbox, index) in checkboxes"
+        :key="`checkbox-group-${index}`"
+        :model-value="_modelValue !== null ? _modelValue?.indexOf(checkbox.value) !== -1 : null"
+        :size="size"
+        :state="state"
+        :skeleton="skeleton"
+        :disabled="disabled || checkbox.disabled"
+        :readonly="readonly || checkbox.readonly"
+        @update:model-value="updateValue(checkbox.value)"
+        @blur="() => onBlurCheckbox()"
+      >
+        {{ checkbox.label }}
+      </AntCheckbox>
+    </div>
+  </AntField>
+</template>

package/dist/runtime/components/inputs/AntDateInput.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import AntField from '../forms/AntField.vue';
+import AntBaseInput from './Elements/AntBaseInput.vue';
+import AntIcon from '../AntIcon.vue';
+import {Size} from '../../enums/Size.enum';
+import {useVModel} from '@vueuse/core';
+import {InputState} from '../../enums';
+import {BaseInputType} from './Elements/__types';
+import {handleEnumValidation} from '../../handler';
+import {AntDateInputTypes} from './__types/AntDateInput.types';
+import {faCalendar, faClock} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from '../__types/AntIcon.types';
+
+defineOptions({inheritAttrs: false});
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  label?: string;
+  description?: string;
+  size?: Size;
+  type?: AntDateInputTypes;
+  state?: InputState;
+  disabled?: boolean;
+  skeleton?: boolean;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  type: AntDateInputTypes.date,
+  disabled: false,
+  skeleton: false,
+  size: Size.md,
+  messages: () => []
+});
+const emit = defineEmits(['update:modelValue', 'validate']);
+const _modelValue = useVModel(props, 'modelValue', emit);
+const inputRef = ref<null | HTMLInputElement>(null);
+const iconColor = computed(() => {
+  switch (props.state) {
+    case InputState.info:
+      return 'text-info-700';
+    case InputState.success:
+      return 'text-success-700';
+    case InputState.warning:
+      return 'text-warning-700';
+    case InputState.danger:
+      return 'text-danger-700';
+    default:
+      return 'text-for-white-bg-font';
+  }
+});
+const iconSize = computed(() => props.size === Size.xs || props.size === Size.xs2 ? IconSize.xs : IconSize.sm);
+const _icon = computed(() => props.type === AntDateInputTypes.time ? faClock : faCalendar);
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.size, Size, 'size');
+});
+
+function onClickCalendar() {
+  inputRef.value?.showPicker();
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :messages="messages"
+  >
+    <AntBaseInput
+      v-model="_modelValue"
+      v-model:input-ref="inputRef"
+      :type="type as unknown as BaseInputType"
+      :state="state"
+      :size="size"
+      :skeleton="skeleton"
+      :disabled="disabled"
+      :show-icon="false"
+      v-bind="$attrs"
+      @validate="val => $emit('validate', val)"
+    >
+      <template #icon-right>
+        <AntIcon
+          :icon="_icon"
+          :color="iconColor"
+          :size="iconSize"
+          class="cursor-pointer"
+          @click="onClickCalendar"
+        />
+      </template>
+    </AntBaseInput>
+  </AntField>
+</template>