@antify/ui 2.2.0 → 2.2.3

package/dist/components/forms/__stories/AntField.stories.mjs

@@ -1,31 +1,53 @@
 import AntField from "../AntField.vue";
 import AntBaseInput from "../../inputs/Elements/AntBaseInput.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { computed, ref } from "vue";
-import { InputState } from "../../../enums/index.mjs";
+import {
+  Size
+} from "../../../enums/Size.enum.mjs";
+import {
+  computed,
+  ref
+} from "vue";
+import {
+  InputState
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Forms/Field",
   component: AntField,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size)
     },
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     skeleton: {
       control: "boolean",
-      table: { defaultValue: { summary: false } }
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      }
     }
   }
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntField, AntBaseInput },
+    components: {
+      AntField,
+      AntBaseInput
+    },
     setup: () => {
       const skeleton = computed({
         get() {
@@ -44,7 +66,13 @@ export const Docs = {
         }
       });
       const value = ref(null);
-      return { args, value, skeleton, size, InputState };
+      return {
+        args,
+        value,
+        skeleton,
+        size,
+        InputState
+      };
     },
     template: `
       <AntField

package/dist/components/forms/__stories/AntFormGroup.stories.mjs

@@ -2,14 +2,22 @@ import AntFormGroup from "../AntFormGroup.vue";
 import AntFormGroupLabel from "../AntFormGroupLabel.vue";
 import AntTextInput from "../../inputs/AntTextInput.vue";
 import AntButton from "../../buttons/AntButton.vue";
-import { Direction } from "../../../enums/Direction.enum.mjs";
+import {
+  Direction
+} from "../../../enums/Direction.enum.mjs";
 const meta = {
   title: "Forms/Form Group",
   component: AntFormGroup,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     direction: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Direction)
     }
   }
@@ -17,9 +25,16 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntFormGroup, AntFormGroupLabel, AntTextInput, AntButton },
+    components: {
+      AntFormGroup,
+      AntFormGroupLabel,
+      AntTextInput,
+      AntButton
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <AntFormGroup v-bind="args">

package/dist/components/forms/__stories/AntFormGroupLabel.stories.mjs

@@ -2,15 +2,23 @@ import AntFormGroupLabel from "../AntFormGroupLabel.vue";
 const meta = {
   title: "Forms/Form Group Label",
   component: AntFormGroupLabel,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {}
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntFormGroupLabel },
+    components: {
+      AntFormGroupLabel
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <AntFormGroupLabel v-bind="args">Example label</AntFormGroupLabel>

package/dist/components/index.d.ts

@@ -63,4 +63,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip };
+export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, };

package/dist/components/inputs/AntCheckbox.vue

@@ -1,35 +1,53 @@
 <script lang="ts" setup>
-import {useVModel} from '@vueuse/core';
-import {AntField} from './Elements';
-import {InputState, Size} from '../../enums';
+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 {
+  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 {
+  IconSize,
+} from '../__types';
 
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
+const emit = defineEmits([
+  'update:modelValue',
+  'update:skeleton',
+  'validate',
+  'blur',
+]);
 const props =
-  withDefaults(
-    defineProps<{
-      modelValue: boolean | null;
-      label?: string;
-      description?: string;
-      state?: InputState;
-      size?: Size,
-      skeleton?: boolean;
-      disabled?: boolean;
-      readonly?: boolean;
-      messages?: string[];
-    }>(), {
-      state: InputState.base,
-      size: Size.md,
-      skeleton: false,
-      disabled: false,
-      readonly: false,
-      messages: () => []
-    });
+  withDefaults(defineProps<{
+    modelValue: boolean | null;
+    label?: string;
+    description?: string;
+    state?: InputState;
+    size?: Size;
+    skeleton?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    messages?: string[];
+  }>(), {
+    state: InputState.base,
+    size: Size.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);
@@ -57,10 +75,10 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'relative inline-flex flex-shrink-0 bg-base-100 border-0': true,
-    'outline outline-1 outline-offset-[-1px] rounded': true,
+    'relative inline-flex shrink-0 bg-base-100 border-0': true,
+    'outline outline-1 outline-offset-[-1px] rounded-sm': true,
     'focus:ring-offset-0': true,
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
     'cursor-pointer': !hasInputState.value,
     'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
@@ -93,13 +111,13 @@ const iconColor = computed(() => {
     case InputState.info:
       return 'text-info-500-font';
     case InputState.success:
-      return 'text-success-500-font'
+      return 'text-success-500-font';
     case InputState.warning:
       return 'text-warning-500-font';
     default:
       return 'text-danger-500-font';
   }
-})
+});
 
 /**
  * Delay value to change the checkboxes background color after
@@ -113,10 +131,16 @@ watch(_modelValue, (val) => {
   }
 });
 watch(_modelValue, (val) => {
-  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+  if ([
+    InputState.danger,
+    InputState.warning,
+    InputState.info,
+  ].includes(props.state)) {
     emit('validate', val);
   }
-}, {deep: true});
+}, {
+  deep: true,
+});
 watch(() => props.skeleton, (val) => {
   if (!val && props.modelValue !== null) {
     emit('validate', props.modelValue);
@@ -140,6 +164,7 @@ onMounted(() => {
 
 <template>
   <AntField
+    data-e2e="checkbox"
     :label="label"
     :description="description"
     :skeleton="skeleton"
@@ -157,7 +182,7 @@ onMounted(() => {
           :aria-checked="_modelValue"
           :disabled="disabled || readonly"
           @blur="onBlur"
-        />
+        >
 
         <div
           class="absolute flex items-center justify-center !text-white pointer-events-none"
@@ -183,7 +208,7 @@ onMounted(() => {
         :class="props.size === Size.md ? 'h-5' : 'h-4'"
       >
         <span :class="contentClasses">
-          <slot/>
+          <slot />
         </span>
 
         <AntSkeleton

package/dist/components/inputs/AntCheckboxGroup.vue

@@ -1,13 +1,29 @@
 <script setup lang="ts">
-import {type AntCheckboxType} from './__types/AntCheckbox.types';
-import {AntField} from './Elements';
-import {useVModel} from '@vueuse/core';
+import {
+  type AntCheckboxType,
+} 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';
+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 emit = defineEmits([
+  'update:modelValue',
+  'validate',
+  'blur',
+]);
 const props = withDefaults(
   defineProps<{
     modelValue: string[] | null;
@@ -16,11 +32,11 @@ const props = withDefaults(
     description?: string;
     direction?: Direction;
     state?: InputState;
-    size?: Size,
+    size?: Size;
     skeleton?: boolean;
     readonly?: boolean;
     disabled?: boolean;
-    messages?: string[]
+    messages?: string[];
   }>(),
   {
     direction: Direction.column,
@@ -29,22 +45,28 @@ const props = withDefaults(
     skeleton: false,
     readonly: false,
     disabled: false,
-    messages: () => []
-  }
+    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
+  '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)) {
+  if ([
+    InputState.danger,
+    InputState.warning,
+    InputState.info,
+  ].includes(props.state)) {
     emit('validate', val);
   }
-}, {deep: true});
+}, {
+  deep: true,
+});
 watch(() => props.skeleton, (val) => {
   if (!val && props.modelValue !== null) {
     emit('validate', props.modelValue);
@@ -53,7 +75,9 @@ watch(() => props.skeleton, (val) => {
 
 function updateValue(value: string) {
   if (_modelValue.value === null) {
-    return _modelValue.value = [value];
+    return _modelValue.value = [
+      value,
+    ];
   }
 
   const index = _modelValue.value.indexOf(value);
@@ -86,6 +110,7 @@ onMounted(() => {
 
 <template>
   <AntField
+    data-e2e="checkbox-group"
     :label="label"
     :description="description"
     :skeleton="skeleton"

package/dist/components/inputs/AntDateInput.vue

@@ -1,18 +1,38 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
+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';
+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});
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<{
   modelValue: string | null;
@@ -32,9 +52,12 @@ const props = withDefaults(defineProps<{
   readonly: false,
   skeleton: false,
   size: Size.md,
-  messages: () => []
+  messages: () => [],
 });
-const emit = defineEmits(['update:modelValue', 'validate']);
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+]);
 const _modelValue = useVModel(props, 'modelValue', emit);
 const inputRef = ref<null | HTMLInputElement>(null);
 const iconColor = computed(() => {

package/dist/components/inputs/AntNumberInput.vue

@@ -1,19 +1,37 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
+import {
+  computed, onMounted,
+} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
-import {Size} from '../../enums/Size.enum';
-import {faPlus, faMinus} from '@fortawesome/free-solid-svg-icons';
-import {State, InputState} from '../../enums/State.enum';
-import {handleEnumValidation} from '../../handler';
-import {useVModel} from '@vueuse/core';
-import {Grouped} from '../../enums/Grouped.enum';
-import {BaseInputType} from './Elements/__types';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  faPlus, faMinus,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  State, InputState,
+} from '../../enums/State.enum';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  Grouped,
+} from '../../enums/Grouped.enum';
+import {
+  BaseInputType,
+} from './Elements/__types';
 import Big from 'big.js';
 Big.RM = Big.roundHalfEven;
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
 /**
  * We use a string as the modelValue to ensure that numbers are correctly padded with a trailing 0 instead of cut off (e.g. 0.10 would be converted to 0.1).
@@ -44,9 +62,12 @@ const props = withDefaults(defineProps<{
   steps: 1,
   limiter: false,
   messages: () => [],
-  indicators: false
+  indicators: false,
 });
-const emit = defineEmits(['update:modelValue', 'validate']);
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+]);
 const _modelValue = useVModel(props, 'modelValue', emit);
 
 const isPrevButtonDisabled = computed(() => {
@@ -154,7 +175,7 @@ function onButtonBlur() {
         v-model.number="_modelValue"
         :type="BaseInputType.number"
         :grouped="indicators ? Grouped.center : Grouped.none"
-        wrapper-class="flex-grow"
+        wrapper-class="grow"
         :state="state"
         :size="size"
         :skeleton="skeleton"

package/dist/components/inputs/AntPasswordInput.vue

@@ -1,17 +1,35 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
+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 {faEye, faEyeSlash} from '@fortawesome/free-solid-svg-icons';
-import {useVModel} from '@vueuse/core';
-import {InputState} from '../../enums';
-import {BaseInputType} from './Elements/__types';
-import {handleEnumValidation} from '../../handler';
-import {IconSize} from '../__types/AntIcon.types';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  faEye, faEyeSlash,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  InputState,
+} from '../../enums';
+import {
+  BaseInputType,
+} from './Elements/__types';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  IconSize,
+} from '../__types/AntIcon.types';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<{
   modelValue: string | null;
@@ -28,9 +46,12 @@ const props = withDefaults(defineProps<{
   disabled: false,
   skeleton: false,
   size: Size.md,
-  messages: () => []
+  messages: () => [],
 });
-const emit = defineEmits(['update:modelValue', 'validate']);
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+]);
 const _modelValue = useVModel(props, 'modelValue', emit);
 const isVisible = ref(false);
 const iconSize = computed(() => {