@antify/ui-module 1.6.0 → 1.7.2

package/src/runtime/components/inputs/AntRadioGroup.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import AntRadio from './AntRadio.vue';
+import {useVModel} from '@vueuse/core';
+import {AntField} from './Elements';
+import {type AntRadioTypes, AntRadioSize} from './__types/AntRadio.types';
+import {InputState, Size} from '../../enums';
+import {computed, onMounted, ref, watch} from 'vue';
+import {Direction} from '../../enums/Direction.enum';
+import {handleEnumValidation} from '../../handler';
+
+defineOptions({inheritAttrs: false});
+
+const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate']);
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | null;
+    radioButtons: AntRadioTypes[];
+    label?: string;
+    description?: string;
+    direction?: Direction;
+    state?: InputState;
+    size?: AntRadioSize;
+    skeleton?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    messages?: string[];
+  }>(), {
+    direction: Direction.column,
+    state: InputState.base,
+    size: AntRadioSize.md,
+    skeleton: false,
+    disabled: false,
+    readonly: false,
+    messages: () => []
+  });
+const _modelValue = useVModel(props, 'modelValue', emit);
+const containerClasses = computed(() => ({
+  'flex gap-2.5 justify-start': true,
+  'flex-row': props.direction === Direction.row,
+  'flex-col': props.direction === Direction.column,
+}));
+const containerRef = ref<null | HTMLElement>(null);
+const fieldSize = computed(() => {
+  if (props.size === AntRadioSize.md) {
+    return Size.sm;
+  }
+
+  return Size.xs;
+});
+
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+}, {deep: true});
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+});
+
+function hasFocusedRadio() {
+  return !!containerRef.value?.querySelector('input[type="radio"]:focus');
+}
+
+function onBlurRadio() {
+  setTimeout(() => {
+    if (!hasFocusedRadio()) {
+      emit('validate', _modelValue.value);
+    }
+  }, 100);
+}
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.direction, Direction, 'direction');
+
+  /**
+   * Validate default value without delayed data fetching.
+   */
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :state="state"
+    :skeleton="skeleton"
+    :messages="messages"
+    :size="fieldSize"
+    label-for="noop"
+  >
+    <div
+      ref="containerRef"
+      :class="containerClasses"
+    >
+      <AntRadio
+        v-for="(radio, index) in radioButtons"
+        :key="`radio-button-widget_${radio.value}-${index}`"
+        v-model="_modelValue"
+        :value="radio"
+        :skeleton="skeleton"
+        :disabled="disabled || radio.disabled"
+        :readonly="readonly || radio.readonly"
+        :state="radio.state || state"
+        :size="size"
+        @blur="onBlurRadio"
+      />
+    </div>
+  </AntField>
+</template>

package/src/runtime/components/inputs/AntRangeSlider.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import AntField from '../forms/AntField.vue';
+import {useVModel} from '@vueuse/core';
+import {computed, onMounted, watch} from 'vue';
+import {InputState, Size} from '../../enums';
+import {handleEnumValidation} from '../../handler';
+
+defineOptions({inheritAttrs: false});
+
+const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
+const props = withDefaults(defineProps<{
+  modelValue: number | number[] | null;
+  label?: string;
+  description?: string;
+  state?: InputState;
+  size?: Size,
+  disabled?: boolean;
+  skeleton?: boolean;
+  min?: number;
+  max?: number;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  disabled: false,
+  skeleton: false,
+  limiter: false,
+  messages: () => []
+});
+const _modelValue = useVModel(props, 'modelValue', emit);
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-neutral-base',
+    [InputState.danger]: 'text-danger-base',
+    [InputState.info]: 'text-info-base',
+    [InputState.success]: 'text-success-base',
+    [InputState.warning]: 'text-warning-base',
+  };
+
+  return {
+    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-neutral-300 rounded-md outline-none': true,
+    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
+    'invisible': props.skeleton,
+    [variants[props.state]]: true
+  };
+});
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.size, Size, 'size');
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :messages="messages"
+  >
+    <input
+      v-model.number="_modelValue"
+      :class="inputClasses"
+      type="range"
+      :disabled="disabled || skeleton"
+      :min="min"
+      :max="max"
+      v-bind="$attrs"
+      @blur="onBlur"
+    >
+  </AntField>
+</template>
+
+<style scoped>
+.ant-range-slider {
+  -webkit-appearance: none;
+}
+
+.ant-range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border-radius: 100%;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border: 1px solid #CBD5E1;
+  cursor: pointer;
+}
+
+.ant-range-slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #04AA6D;
+  cursor: pointer;
+}
+</style>

package/{dist/runtime/components/form → src/runtime/components/inputs}/AntSearch.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref} from 'vue';
-import AntBaseInput from './Elements/AntBaseInput.vue'
-import {Size} from '../../enums/Size.enum'
-import {FieldValidator} from '@antify/validate'
+import AntBaseInput from './Elements/AntBaseInput.vue';
+import {Size} from '../../enums/Size.enum';
 import {handleEnumValidation} from '../../handler';
 import {faSearch} from '@fortawesome/free-solid-svg-icons';
 import {BaseInputType} from './Elements/__types';
-import AntField from './Elements/AntField.vue';
+import AntField from '../forms/AntField.vue';
 
 const emits = defineEmits(['update:modelValue']);
 const props = withDefaults(defineProps<{
@@ -17,7 +16,6 @@ const props = withDefaults(defineProps<{
   size?: Size;
   disabled?: boolean;
   skeleton?: boolean;
-  validator?: FieldValidator;
   inputTimeout?: number;
   query?: string;
 }>(), {
@@ -53,24 +51,22 @@ onMounted(() => handleEnumValidation(props.size, Size, 'size'));
 
 <template>
   <AntField
-      :label="label"
-      :size="size"
-      :skeleton="skeleton"
-      :description="description"
-      :validator="validator"
-      data-e2e="search"
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    data-e2e="search"
   >
     <AntBaseInput
-        v-model:value="_value"
-        :type="BaseInputType.search"
-        :size="size"
-        :skeleton="skeleton"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :validator="validator"
-        :icon-left="faSearch"
-        nullable
-        v-bind="$attrs"
+      v-model="_value"
+      :type="BaseInputType.search"
+      :size="size"
+      :skeleton="skeleton"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :icon-left="faSearch"
+      nullable
+      v-bind="$attrs"
     />
   </AntField>
 </template>

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

@@ -12,11 +12,10 @@
  * Fix overflow bug (See Ellipsis Text story)
  * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
  */
-import AntField from './Elements/AntField.vue';
-import {type SelectOption} from './__types/AntSelect.type';
-import {computed, onMounted, ref} from 'vue';
+import AntField from '../forms/AntField.vue';
+import {type SelectOption} from './__types/AntSelect.types';
+import {computed, onMounted, ref, watch} from 'vue';
 import {Size} from '../../enums/Size.enum';
-import {FieldValidator} from '@antify/validate';
 import {handleEnumValidation} from '../../handler';
 import {Grouped} from '../../enums/Grouped.enum';
 import AntIcon from '../AntIcon.vue';
@@ -24,11 +23,12 @@ import {faChevronDown, faChevronUp, faMultiply} from '@fortawesome/free-solid-sv
 import AntSkeleton from '../AntSkeleton.vue';
 import {vOnClickOutside} from '@vueuse/components';
 import AntButton from '../buttons/AntButton.vue';
-import {ColorType, InputColorType} from '../../enums';
+import {State, InputState} from '../../enums';
 import {IconSize} from '../__types';
 import AntDropDown from './Elements/AntDropDown.vue';
 
 defineOptions({ inheritAttrs: false });
+
 const props = withDefaults(
     defineProps<{
       modelValue: string | number | null;
@@ -37,55 +37,55 @@ const props = withDefaults(
       description?: string;
       placeholder?: string;
       size?: Size;
-      colorType?: InputColorType;
+      state?: InputState;
       disabled?: boolean;
       skeleton?: boolean;
-      validator?: FieldValidator;
       nullable?: boolean;
       grouped?: Grouped;
       name?: string;
       wrapperClass?: string | Record<string, boolean>;
       expanded?: boolean;
+      messages?: string[]
     }>(), {
-      colorType: InputColorType.base,
+      state: InputState.base,
       grouped: Grouped.none,
       size: Size.md,
       disabled: false,
       skeleton: false,
       nullable: false,
-      expanded: true
+      expanded: true,
+      messages: () => []
     }
 );
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
 const isOpen = ref(false);
 const _modelValue = computed({
   get: () => props.modelValue,
   set: (val: string | number | null) => {
-    props.validator?.validate(val);
     emit('update:modelValue', val);
   },
 });
 const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
 const inputClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 bg-white focus:ring-primary/25',
-    [InputColorType.success]: 'outline-success-500 focus:outline-success-500 bg-success-100 focus:ring-success/25',
-    [InputColorType.info]: 'outline-info-500 focus:outline-info-500 bg-info-100 focus:ring-info/25',
-    [InputColorType.warning]: 'outline-warning-500 focus:outline-warning-500 bg-warning-100 focus:ring-warning/25',
-    [InputColorType.danger]: 'outline-danger-500 focus:outline-danger-500 bg-danger-100 focus:ring-danger/25',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300 bg-white focus:ring-primary-200',
+    [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
+    [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
+    [InputState.danger]: 'outline-danger-500  bg-danger-100 focus:ring-danger-200',
   };
 
   return {
     'flex items-center transition-colors border-none outline relative focus:z-10': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
-    [variants[_colorType.value]]: true,
+    [variants[props.state]]: true,
     // Skeleton
     'invisible': props.skeleton,
     // Disabled
     'disabled:opacity-50 disabled:cursor-not-allowed': true,
     // Size
-    'focus:ring-2 p-1.5 gap-1.5 text-xs': props.size === Size.sm,
-    'focus:ring-4 p-2.5 gap-2.5 text-sm': props.size === Size.md,
+    'focus:ring-2 p-1.5 gap-1.5 text-sm': props.size === Size.sm,
+    'focus:ring-4 p-2 gap-2 text-sm': props.size === Size.md,
     // Grouped
     'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
     'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
@@ -100,44 +100,30 @@ const inputClasses = computed(() => {
   };
 });
 const placeholderClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-500',
-    [InputColorType.success]: 'text-success-700',
-    [InputColorType.info]: 'text-info-700',
-    [InputColorType.warning]: 'text-warning-700',
-    [InputColorType.danger]: 'text-danger-700',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-neutral-500',
+    [InputState.success]: 'text-success-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.warning]: 'text-warning-700',
+    [InputState.danger]: 'text-danger-700',
   };
 
   return {
     'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
-    [variants[_colorType.value]]: true,
-  };
-});
-const inputValueClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-for-white-bg-font',
-    [InputColorType.success]: 'text-success-100-font',
-    [InputColorType.info]: 'text-info-100-font',
-    [InputColorType.warning]: 'text-warning-100-font',
-    [InputColorType.danger]: 'text-danger-100-font',
-  };
-  return {
-    'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
-    [variants[_colorType.value]]: true,
+    [variants[props.state]]: true,
   };
 });
 const arrowClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-for-white-bg-font',
-    [InputColorType.success]: 'text-success-100-font',
-    [InputColorType.info]: 'text-info-100-font',
-    [InputColorType.warning]: 'text-warning-100-font',
-    [InputColorType.danger]: 'text-danger-100-font',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.success]: 'text-success-100-font',
+    [InputState.info]: 'text-info-100-font',
+    [InputState.warning]: 'text-warning-100-font',
+    [InputState.danger]: 'text-danger-100-font',
   };
 
-  return {[variants[_colorType.value]]: true};
+  return {[variants[props.state]]: true};
 });
-const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
 const skeletonGrouped = computed(() => {
   if (!props.nullable || (props.nullable && _modelValue.value === null)) {
     return props.grouped;
@@ -157,14 +143,35 @@ const dropDownFocused = ref(null);
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
   handleEnumValidation(props.grouped, Grouped, 'grouped');
 
-  props.validator?.validate(_modelValue.value);
-
   focusedDropDownItem.value = _modelValue.value;
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
 });
 
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_modelValue, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
 function onClickOutside() {
   if (!isOpen.value) {
     return;
@@ -182,7 +189,7 @@ function onClickSelectInput(e: MouseEvent) {
   }
 
   if (isOpen.value) {
-    inputRef.value?.focus()
+    inputRef.value?.focus();
   }
 
   isOpen.value = !isOpen.value;
@@ -200,10 +207,10 @@ function onClickRemoveButton() {
     :size="size"
     :skeleton="skeleton"
     :description="description"
-    :color-type="colorType"
-    :validator="validator"
+    :state="state"
     :class="wrapperClass"
     :expanded="expanded"
+    :messages="messages"
     label-for="noop"
     data-e2e="select"
     @click-label="() => inputRef?.focus()"
@@ -237,6 +244,7 @@ function onClickRemoveButton() {
           v-bind="$attrs"
           @mousedown="onClickSelectInput"
           @click="inputRef?.focus()"
+          @blur="onBlur"
         >
           <div
             v-if="_modelValue === null && placeholder !== undefined"
@@ -254,7 +262,7 @@ function onClickRemoveButton() {
 
           <div
             v-else
-            :class="inputValueClasses"
+            class="select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
           >
             {{ valueLabel }}
           </div>
@@ -262,14 +270,14 @@ function onClickRemoveButton() {
           <AntIcon
             v-if="isOpen"
             :icon="faChevronUp"
-            :size="size as unknown as IconSize"
+            :size="IconSize.sm"
             :class="arrowClasses"
           />
 
           <AntIcon
             v-else
             :icon="faChevronDown"
-            :size="size as unknown as IconSize"
+            :size="IconSize.sm"
             :class="arrowClasses"
           />
         </div>
@@ -283,8 +291,8 @@ function onClickRemoveButton() {
           :options="options"
           :input-ref="inputRef"
           :size="size"
-          :color-type="_colorType"
-          close-on-enter
+          :state="state"
+          :close-on-enter="true"
           @select-element="(e) => _modelValue = e"
         />
       </div>
@@ -292,7 +300,7 @@ function onClickRemoveButton() {
       <AntButton
         v-if="nullable && _modelValue !== null"
         :icon-left="faMultiply"
-        :color-type="_colorType as unknown as ColorType"
+        :state="state as unknown as State"
         :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
         :size="size"
         :skeleton="skeleton"