@antify/ui-module 1.6.0 → 1.7.2

package/src/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/src/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>

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

@@ -1,23 +1,20 @@
 <script setup lang="ts">
-
-import { AntField } from './Elements';
-import type { SelectOption } from './__types';
-import { Grouped, InputColorType, Size } from '../../enums';
-import type { FieldValidator } from '@antify/validate';
-import { useVModel } from '@vueuse/core';
-import {
-  faChevronRight,
-  type IconDefinition
-} from '@fortawesome/free-solid-svg-icons';
-import { computed, type Ref, ref } from 'vue';
+import {AntField} from './Elements';
+import type {SelectOption} from './__types';
+import {Grouped, InputState, Size} from '../../enums';
+import {useVModel} from '@vueuse/core';
+import {faChevronRight, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, onMounted, type Ref, ref, watch} from 'vue';
 import AntTag from '../AntTag.vue';
 import AntIcon from '../AntIcon.vue';
-import { IconSize } from '../__types';
+import {AntTagSize, IconSize} from '../__types';
 import AntDropDown from './Elements/AntDropDown.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import { vOnClickOutside } from '@vueuse/components'
+import {vOnClickOutside} from '@vueuse/components';
+import {AntTagInputSize} from './__types/AntTagInput.types';
+import type {TagState} from '../__types/AntTag.types';
 
-const emit = defineEmits([ 'update:modelValue' ]);
+const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
 const props = withDefaults(
   defineProps<{
     modelValue: (string | number)[] | null;
@@ -25,68 +22,61 @@ const props = withDefaults(
     label?: string;
     description?: string;
     placeholder?: string;
-    size?: Size;
-    colorType?: InputColorType;
+    size?: AntTagInputSize;
+    state?: InputState;
     disabled?: boolean;
     skeleton?: boolean;
-    validator?: FieldValidator;
     name?: string;
     expanded?: boolean;
     icon?: IconDefinition;
     grouped?: Grouped;
     nullable?: boolean;
-
+    messages?: string[];
     allowCreate?: boolean;
     allowDuplicates?: boolean;
     openOnFocus?: boolean;
     autoCloseAfterSelection?: boolean;
-
     createCallback?: (item: string) => Promise<SelectOption>;
   }>(), {
-    size: Size.md,
-    colorType: InputColorType.base,
+    size: AntTagInputSize.md,
+    state: InputState.base,
     icon: () => faChevronRight,
+    messages: () => [],
     grouped: Grouped.none,
-
     allowCreate: false,
     allowDuplicates: false,
     openOnFocus: true,
     autoCloseAfterSelection: false,
-
     placeholder: 'Add new tag'
   }
 );
 
 const _modelValue: Ref<(string | number)[] | null> = useVModel(props, 'modelValue', emit);
 const _skeleton = useVModel(props, 'skeleton', emit);
-
 const dropDownOpen = ref(false);
 const focusedDropDownItem: Ref<string | number | null> = ref(null);
 const tagInput = ref('');
 const filteredOptions = ref(props.options);
-
 const inputRef: Ref<HTMLElement | null> = ref(null);
-
-const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
-
 const inputContainerClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus-within:outline-primary-500 focus-within:ring-primary-200 bg-white',
-    [InputColorType.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
-    [InputColorType.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
-    [InputColorType.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
-    [InputColorType.warning]: 'outline-warning-500 focus-within:outline-warning-500 focus-within:ring-warning-200 bg-warning-100',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300 focus-within:outline-primary-500 focus-within:ring-primary-200 bg-white',
+    [InputState.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
+    [InputState.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
+    [InputState.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
+    [InputState.warning]: 'outline-warning-500 focus-within:outline-warning-500 focus-within:ring-warning-200 bg-warning-100',
   };
 
   return {
-    'flex gap-1 items-center flex-wrap': true,
+    'flex items-center flex-wrap': true,
     'transition-colors relative border-none outline w-full focus-within:z-10': true,
     'outline-offset-[-1px] outline-1 focus-within:outline-offset-[-1px] focus-within:outline-1': true,
     'opacity-50 cursor-not-allowed': props.disabled,
-    [variants[_colorType.value]]: true,
+    [variants[props.state]]: true,
     // Size
-    'focus-within:ring-2 px-1.5 py-1.5 text-xs': props.size === Size.sm,
-    'focus-within:ring-4 px-2.5 py-1.5 text-sm': props.size === Size.md,
+    'focus-within:ring-2 p-1.5 text-sm': props.size === AntTagInputSize.sm,
+    'focus-within:ring-4 p-2 text-sm': props.size === AntTagInputSize.md,
+    'focus-within:ring-4 p-2.5 text-sm': props.size === AntTagInputSize.lg,
     // Grouping
     'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
     'rounded-none': props.grouped === Grouped.center,
@@ -96,23 +86,21 @@ const inputContainerClasses = computed(() => {
     'invisible': props.skeleton,
   };
 });
-
 const inputClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'placeholder:text-neutral-500',
-    [InputColorType.danger]: 'placeholder:text-danger-700',
-    [InputColorType.info]: 'placeholder:text-info-700',
-    [InputColorType.success]: 'placeholder:text-success-700',
-    [InputColorType.warning]: 'placeholder:text-warning-700',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'placeholder:text-neutral-500',
+    [InputState.danger]: 'placeholder:text-danger-700',
+    [InputState.info]: 'placeholder:text-info-700',
+    [InputState.success]: 'placeholder:text-success-700',
+    [InputState.warning]: 'placeholder:text-warning-700',
   };
 
   return {
-    'outline-0 border:none ring:none bg-transparent w-full py-1': true,
+    'outline-0 border:none ring:none bg-transparent w-full': true,
     'opacity-50 cursor-not-allowed': props.disabled,
-    [variants[_colorType.value]]: true,
-  }
+    [variants[props.state]]: true,
+  };
 });
-
 const skeletonGrouped = computed(() => {
   if (!props.nullable || (props.nullable && _modelValue.value === null)) {
     return props.grouped;
@@ -166,11 +154,15 @@ function addTagFromOptions(item: string | number) {
 function addTag(tagValue: string | number): void {
   _modelValue.value = _modelValue.value || [];
 
-  if (!props.allowDuplicates && _modelValue.value.includes(tagValue) || !tagValue) {
+  if (!props.allowDuplicates && _modelValue.value?.includes(tagValue) || !tagValue) {
     return;
   }
 
-  _modelValue.value.push(tagValue);
+  if (Array.isArray(_modelValue.value)) {
+    _modelValue.value.push(tagValue);
+  } else {
+    _modelValue.value = [tagValue];
+  }
 
   tagInput.value = '';
 
@@ -178,7 +170,7 @@ function addTag(tagValue: string | number): void {
 }
 
 function removeLastTag() {
-  if (tagInput.value === '' && _modelValue.value && _modelValue.value.length > 0) {
+  if (tagInput.value === '' && Array.isArray(_modelValue.value) && _modelValue.value.length > 0) {
     _modelValue.value.splice(-1, 1);
 
     filterDropDown();
@@ -221,17 +213,45 @@ function filterDropDown() {
     focusedDropDownItem.value = filteredOptions.value[0]?.value;
   }
 }
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+/**
+ * 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);
+  }
+}, {deep: true});
+
+onMounted(() => {
+  /**
+   * Validate default value without delayed data fetching.
+   */
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
 </script>
 
 <template>
   <AntField
     :label="label"
-    :size="size"
+    :size="Size.sm"
     :skeleton="_skeleton"
     :description="description"
-    :color-type="colorType"
-    :validator="validator"
+    :state="state"
     :expanded="expanded"
+    :messages="messages"
   >
     <div
       v-on-click-outside="onClickOutside"
@@ -246,24 +266,28 @@ function filterDropDown() {
 
       <div
         :class="inputContainerClasses"
-        class="w-full flex gap-2.5 items-center"
+        class="w-full flex items-center"
       >
-        <AntTag
-          v-for="(tag, index) in _modelValue"
-          :key="`tag-input-tag-${index}`"
-          :size="size"
-          :color-type="_colorType"
-          dismiss
-          @close="removeTag(tag)"
+        <div
+          class="flex gap-2.5 items-center"
         >
-          {{ options.find((option: SelectOption) => option.value === tag)?.label }}
-        </AntTag>
+          <AntTag
+            v-for="(tag, index) in _modelValue"
+            :key="`tag-input-tag-${index}`"
+            :size="AntTagSize.xs3"
+            :state="state as unknown as TagState"
+            :dismiss="true"
+            @close="removeTag(tag)"
+          >
+            {{ options.find((option: SelectOption) => option.value === tag)?.label }}
+          </AntTag>
+        </div>
 
         <!-- Input -->
-        <div class="flex items-center gap-1 w-32 shrink grow">
+        <div class="flex items-center w-32 shrink grow">
           <AntIcon
             :icon="icon"
-            :size="size === Size.sm ? IconSize.xs : IconSize.sm"
+            :size="size === AntTagInputSize.sm ? IconSize.xs : IconSize.sm"
           />
 
           <input
@@ -277,6 +301,7 @@ function filterDropDown() {
             @input="filterDropDown"
             @keydown.delete="removeLastTag"
             @keydown.enter.prevent="checkCreateTag(tagInput)"
+            @blur="onBlur"
           />
         </div>
       </div>
@@ -290,8 +315,8 @@ function filterDropDown() {
         :auto-select-first-on-open="!allowCreate"
         :options="filteredOptions"
         :input-ref="inputRef"
-        :size="size"
-        :color-type="_colorType"
+        :size="size as unknown as Size"
+        :state="state"
         :focus-on-open="false"
         @select-element="addTagFromOptions"
       >