@antify/ui-module 1.6.0 → 1.7.2

package/dist/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"

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

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import AntField from '../forms/AntField.vue';
+import {computed, onMounted, watch} from 'vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import {InputState, Size} from '../../enums';
+import {hasSlotContent} from '../../utils';
+
+const emit = defineEmits(['update:modelValue', 'input', 'blur', 'validate']);
+const props = withDefaults(defineProps<{
+  modelValue: boolean | null;
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  size?: Size;
+  state?: InputState
+  messages?: string[]
+}>(), {
+  size: Size.md,
+  state: InputState.base,
+  messages: () => []
+});
+const _value = computed({
+  get: () => props.modelValue,
+  set: (val: boolean | null) => {
+    emit('update:modelValue', val);
+    emit('input', val);
+  }
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const buttonClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'relative inline-flex flex-shrink-0': true,
+    'focus:outline-none': true,
+    'rounded-full ease-in-out duration-200': true,
+    'focus-within:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+    'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+    'h-4 w-[30px]': props.size === Size.xs || props.size === Size.xs2,
+    'bg-neutral-300': !_value.value,
+    'invisible': props.skeleton,
+    // Disabled
+    'opacity-50 cursor-not-allowed': props.disabled,
+    'cursor-default': props.readonly
+  };
+  const colorVariant = {
+    [InputState.base]: 'focus-within:ring-primary-200',
+    [InputState.danger]: 'focus-within:ring-danger-200 outline outline-1 -outline-offset-1 outline-danger-500',
+    [InputState.info]: 'focus-within:ring-info-200 outline outline-1 -outline-offset-1 outline-info-500',
+    [InputState.success]: 'focus-within:ring-success-200 outline outline-1 -outline-offset-1 outline-success-500',
+    [InputState.warning]: 'focus-within:ring-warning-200 outline outline-1 -outline-offset-1 outline-warning-500',
+  };
+  const activeColorVariant = {
+    [InputState.base]: 'bg-primary-500',
+    [InputState.danger]: 'bg-danger-500',
+    [InputState.info]: 'bg-info-500',
+    [InputState.success]: 'bg-success-500',
+    [InputState.warning]: 'bg-warning-500',
+  };
+
+  classes[colorVariant[props.state]] = !hasInputState.value;
+  classes[activeColorVariant[props.state]] = !!_value.value;
+
+  return classes;
+});
+const ballClasses = computed(() => ({
+  'pointer-events-none inline-block rounded-full bg-neutral-100 shadow transform ring-0 transition ease-in-out duration-200': true,
+  'h-4 w-4 translate-y-0.5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'translate-x-[1.125rem]': _value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
+  'translate-x-0.5': !_value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
+  'h-3.5 w-3.5  translate-y-[1px]': props.size === Size.xs || props.size === Size.xs2,
+  'translate-x-[.925rem]': _value.value && (props.size === Size.xs || props.size === Size.xs2),
+  'translate-x-[1px]': !_value.value && (props.size === Size.xs || props.size === Size.xs2),
+  'invisible': props.skeleton
+}));
+const valueClasses = computed(() => ({
+  'text-for-white-bg-font': true,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'opacity-50 cursor-not-allowed': props.disabled,
+  'cursor-pointer': !hasInputState.value,
+}));
+const fieldSize = computed(() => {
+  if (props.size === Size.lg) {
+    return Size.lg;
+  }
+
+  if (props.size === Size.md) {
+    return Size.md;
+  }
+
+  if (props.size === Size.sm) {
+    return Size.sm;
+  }
+
+  if (props.size === Size.xs) {
+    return Size.xs;
+  }
+
+  return Size.xs2;
+
+});
+
+/**
+ * Validations
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_value, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+onMounted(() => {
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function changeValue() {
+  if (!hasInputState.value) {
+    _value.value = !_value.value;
+  }
+}
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="fieldSize"
+    :description="description"
+    :skeleton="skeleton"
+    :state="state"
+    :messages="messages"
+    :expanded="false"
+  >
+    <div class="relative w-fit flex items-center gap-1.5">
+      <div class="relative w-fit flex items-center">
+        <button
+          v-bind="$attrs"
+          type="button"
+          :class="buttonClasses"
+          role="switch"
+          :aria-checked="!!_value"
+          :disabled="disabled"
+          :tabindex="hasInputState ? -1 : 0"
+          @click="changeValue"
+          @blur="onBlur"
+        >
+          <span
+            aria-hidden="true"
+            :class="ballClasses"
+          >
+            <slot name="icon" />
+          </span>
+        </button>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded-full
+        />
+      </div>
+
+      <div
+        v-if="hasSlotContent($slots['default'])"
+        class="relative flex items-center"
+        :class="props.size === Size.lg || props.size === Size.md ||props.size === Size.sm ? 'h-5' : 'h-4'"
+      >
+        <span :class="valueClasses">
+          <slot />
+        </span>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+          class="l-1.5"
+        />
+      </div>
+    </div>
+  </AntField>
+</template>

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

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import AntField from '../forms/AntField.vue';
+import AntButton from '../buttons/AntButton.vue';
+import {faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../AntSkeleton.vue';
+import {type SwitcherOption} from './__types/AntSwitcher.types';
+import {State, Grouped, InputState, Size} from '../../enums';
+import {computed, onMounted, watch} from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  options: string[] | SwitcherOption[];
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  state?: InputState;
+  size?: Size,
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  messages: () => []
+});
+const _value = computed({
+  get() {
+    const found = props.options.find((option: string | SwitcherOption) =>
+      typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
+
+    if (!found) {
+      return props.options[0];
+    }
+
+    return found;
+  },
+  set(val: string | SwitcherOption) {
+    emit('update:modelValue', typeof val === 'string' ? val : val.value);
+  }
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const containerClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'flex relative ring-primary/25 rounded-md outline-none': true,
+    'focus-within:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
+    'focus-within:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
+  };
+  const colorVariant = {
+    [InputState.base]: 'focus-within:ring-primary-200',
+    [InputState.danger]: 'focus-within:ring-danger-200',
+    [InputState.info]: 'focus-within:ring-info-200',
+    [InputState.success]: 'focus-within:ring-success-200',
+    [InputState.warning]: 'focus-within:ring-warning-200',
+  };
+
+  classes[colorVariant[props.state]] = true;
+
+  return classes;
+});
+const itemClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'grow text-center text-black relative outline outline-1 -outline-offset-1': true,
+    'p-1 text-xs ': props.size === Size.xs2,
+    'p-1.5 text-xs ': props.size === Size.xs,
+    'p-1.5 text-sm ': props.size === Size.sm,
+    'p-2 text-sm ': props.size === Size.md,
+    'p-2.5 text-sm ': props.size === Size.lg,
+    'invisible': props.skeleton,
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+
+  const colorVariant = {
+    [InputState.danger]: 'outline-danger-500 bg-danger-100',
+    [InputState.base]: 'outline-neutral-300 bg-white',
+    [InputState.info]: 'outline-info-500 bg-info-100',
+    [InputState.success]: 'outline-success-500 bg-success-100',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100',
+  };
+
+  classes[colorVariant[props.state]] = true;
+
+  return classes;
+});
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_value, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+function prevOption() {
+  if (props.readonly || props.disabled) {
+    return;
+  }
+
+  const index = props.options.findIndex((option) => option === _value.value);
+
+  if (index !== -1 && props.options[index - 1]) {
+    _value.value = props.options[index - 1];
+  } else {
+    _value.value = props.options[props.options.length - 1];
+  }
+}
+
+function nextOption() {
+  if (props.readonly || props.disabled) {
+    return;
+  }
+
+  const index = props.options.findIndex((option) => option === _value.value);
+
+  if (index !== -1 && props.options[index + 1]) {
+    _value.value = props.options[index + 1];
+  } else {
+    _value.value = props.options[0];
+  }
+}
+
+onMounted(() => {
+  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"
+    label-for="noop"
+  >
+    <div
+      :class="containerClasses"
+      tabindex="0"
+      @blur="onBlur"
+      @keydown.left.prevent="prevOption()"
+      @keydown.right.prevent="nextOption()"
+    >
+      <AntButton
+        :icon-left="faChevronLeft"
+        :grouped="Grouped.left"
+        :no-focus="true"
+        :state="state as unknown as State"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="readonly"
+        :disabled="disabled"
+        @click="prevOption"
+        @blur="onBlur"
+      />
+      <div class="grow relative">
+        <div :class="itemClasses">
+          {{ typeof _value === 'string' ? _value : _value.label }}
+        </div>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          :grouped="Grouped.center"
+          rounded
+        />
+      </div>
+
+      <AntButton
+        :icon-left="faChevronRight"
+        :grouped="Grouped.right"
+        :no-focus="true"
+        :state="state as unknown as State"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="readonly"
+        :disabled="disabled"
+        @click="nextOption"
+        @blur="onBlur"
+      />
+    </div>
+  </AntField>
+</template>