@antify/ui-module 1.1.3

package/src/runtime/components/form/AntSelect.vue

@@ -0,0 +1,346 @@
+<script lang="ts" setup>
+/**
+ * This select is a custom component instead of a native <select> because the dropdown is not good
+ * customizable with css.
+ *
+ * Known problem using a custom select instead of a native one:
+ * - Label tags does not trigger the custom select by containing the select input or using the for attribute.
+ * This means, this select is not usable in a custom field with multiple elements in there.
+ * If the user clicks on the label, this select will not be focused.
+ *
+ * TODO:: add screen reader support
+ * 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, watch, nextTick} 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';
+import {faChevronDown, faChevronUp, faMultiply} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../AntSkeleton.vue';
+import {vOnClickOutside} from '@vueuse/components';
+import AntButton from '../buttons/AntButton.vue';
+import {ColorType, InputColorType} from '../../enums';
+import {IconSize} from '../__types';
+import AntDropDown from './Elements/AntDropDown.vue';
+
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(
+    defineProps<{
+      modelValue: string | number | null;
+      options: SelectOption[];
+      label?: string;
+      description?: string;
+      placeholder?: string;
+      size?: Size;
+      colorType?: InputColorType;
+      disabled?: boolean;
+      skeleton?: boolean;
+      validator?: FieldValidator;
+      nullable?: boolean;
+      grouped?: Grouped;
+      name?: string;
+      wrapperClass?: string | Record<string, boolean>;
+      showMessageOnError?: boolean;
+      expanded?: boolean;
+    }>(), {
+      colorType: InputColorType.base,
+      grouped: Grouped.none,
+      size: Size.md,
+      disabled: false,
+      skeleton: false,
+      nullable: false,
+      showMessageOnError: true,
+      expanded: true
+    }
+);
+const emit = defineEmits(['update:modelValue']);
+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-neutral-50 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',
+  };
+
+  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,
+    // 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,
+    // 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,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-md': props.grouped === Grouped.none,
+    'rounded-tr-none rounded-br-none': props.nullable && _modelValue.value !== null,
+    'rounded-bl-none rounded-br-none': isOpen.value,
+    // Open
+    'shadow-md': isOpen.value,
+    // Disabled
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+});
+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',
+  };
+
+  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-neutral-50-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,
+  };
+});
+const arrowClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-50-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 {[variants[_colorType.value]]: 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;
+  }
+
+  if (props.grouped === Grouped.right || props.grouped === Grouped.center) {
+    return Grouped.center;
+  } else {
+    return Grouped.left;
+  }
+});
+const inputRef = ref<HTMLElement | null>(null);
+const dropDownRef = ref<HTMLElement | null>(null);
+const focusedDropDownItem = ref<string | number | null>(null);
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+
+  props.validator?.validate(_modelValue.value);
+
+  focusedDropDownItem.value = _modelValue.value;
+});
+watch(isOpen, (val) => {
+  nextTick(() => {
+    if (val) {
+      dropDownRef.value?.focus();
+    }
+  });
+});
+
+function onClickOutside() {
+  if (!isOpen.value) {
+    return;
+  }
+
+  isOpen.value = false;
+  inputRef.value?.focus();
+}
+
+function onKeyDownInput(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    isOpen.value = true;
+    inputRef.value?.blur();
+  }
+
+  if (e.key === 'Escape') {
+    isOpen.value = false;
+    inputRef.value?.focus();
+  }
+
+  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    const index = props.options.findIndex(option => option.value === _modelValue.value);
+    const option = props.options[index + 1];
+
+    if (index === -1) {
+      _modelValue.value = props.options[0].value;
+    } else if (option !== undefined) {
+      _modelValue.value = option.value;
+    }
+  }
+
+  if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    const index = props.options.findIndex(option => option.value === _modelValue.value);
+    const option = props.options[index - 1];
+
+    if (option !== undefined) {
+      _modelValue.value = option.value;
+    }
+  }
+}
+
+function onFocusInInput() {
+  inputRef.value?.addEventListener('keydown', onKeyDownInput);
+}
+
+function onFocusOutInput(e: FocusEvent) {
+  e.preventDefault();
+  inputRef.value?.removeEventListener('keydown', onKeyDownInput);
+}
+
+function onClickSelectInput(e: MouseEvent) {
+  e.preventDefault();
+
+  if (props.disabled) {
+    return;
+  }
+
+  if (isOpen.value) {
+    inputRef.value?.focus()
+  }
+
+  isOpen.value = !isOpen.value;
+}
+
+function onClickRemoveButton() {
+  inputRef.value?.focus();
+  _modelValue.value = null;
+}
+</script>
+
+<template>
+  <AntField
+      :label="label"
+      :size="size"
+      :skeleton="skeleton"
+      :description="description"
+      :color-type="colorType"
+      :validator="validator"
+      :class="wrapperClass"
+      :show-message-on-error="showMessageOnError"
+      :expanded="expanded"
+      label-for="noop"
+      data-e2e="select"
+      @clickLabel="() => inputRef?.focus()"
+  >
+    <div
+        class="h-fit flex flex-row w-full"
+    >
+      <div
+          class="relative w-full"
+          :class="{'cursor-pointer': !skeleton}"
+          v-on-click-outside="onClickOutside"
+      >
+        <AntSkeleton
+            v-if="skeleton"
+            absolute
+            rounded
+            :grouped="skeletonGrouped"
+        />
+
+        <input type="hidden" :name="name" v-model="_modelValue">
+
+        <!-- Input -->
+        <div
+            :class="inputClasses"
+            ref="inputRef"
+            :tabindex="disabled ? undefined : 0"
+            @mousedown="onClickSelectInput"
+            @focusin="onFocusInInput"
+            @focusout="onFocusOutInput"
+            v-bind="$attrs"
+        >
+          <div
+              v-if="_modelValue === null && placeholder !== undefined"
+              :class="placeholderClasses"
+          >
+            {{ placeholder }}
+          </div>
+
+          <div
+              v-else-if="_modelValue === null && label !== undefined"
+              :class="placeholderClasses"
+          >
+            {{ label }}
+          </div>
+
+          <div
+              v-else
+              :class="inputValueClasses"
+          >
+            {{ valueLabel }}
+          </div>
+
+          <AntIcon
+              v-if="isOpen"
+              :icon="faChevronUp"
+              :size="size as unknown as IconSize"
+              :class="arrowClasses"
+          />
+
+          <AntIcon
+              v-else
+              :icon="faChevronDown"
+              :size="size as unknown as IconSize"
+              :class="arrowClasses"
+          />
+        </div>
+
+        <!-- Dropdown -->
+        <AntDropDown
+          v-model="_modelValue"
+          v-model:open="isOpen"
+          ref="dropDownRef"
+          :options="options"
+          :input-ref="inputRef"
+          :size="size"
+          :color-type="_colorType"
+        />
+      </div>
+
+      <AntButton
+          v-if="nullable && _modelValue !== null"
+          :icon-left="faMultiply"
+          :color-type="_colorType as unknown as ColorType"
+          :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
+          :size="size"
+          :skeleton="skeleton"
+          @click="onClickRemoveButton"
+      />
+    </div>
+  </AntField>
+</template>

package/src/runtime/components/form/AntSwitch.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import AntField from './Elements/AntField.vue';
+import { useVModel } from '@vueuse/core';
+import { computed, type Ref } from 'vue';
+import { FieldValidator } from '@antify/validate';
+import AntSkeleton from '../AntSkeleton.vue';
+import { InputColorType, Size } from '../../enums';
+
+const emits = defineEmits([ 'update:modelValue' ]);
+const props = withDefaults(defineProps<{
+  modelValue: boolean;
+  label?: string;
+  value?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  validator?: FieldValidator;
+  size?: Size;
+  colorType?: InputColorType
+}>(), {
+  size: Size.md,
+  colorType: InputColorType.base
+});
+
+const _value = useVModel(props, 'modelValue', emits);
+const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled))
+const _colorType: Ref<InputColorType> = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+
+const buttonClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'relative inline-flex flex-shrink-0': true,
+    'focus:outline-none': true,
+    'rounded-full transition-colors ease-in-out duration-200': true,
+    'focus-within:ring-2': props.size === Size.sm && hasAction.value,
+    'focus-within:ring-4': props.size === Size.md && hasAction.value,
+    'h-4 w-[30px]': props.size === Size.sm,
+    'h-5 w-9': props.size === Size.md,
+    'bg-neutral-300': !_value.value,
+    'invisible': props.skeleton,
+    // Disabled
+    'opacity-50 cursor-not-allowed': props.disabled,
+    'cursor-default': props.readonly
+  };
+
+  const colorVariant = {
+    [InputColorType.base]: 'focus-within:ring-primary-100',
+    [InputColorType.danger]: 'focus-within:ring-danger-100',
+    [InputColorType.info]: 'focus-within:ring-info-100',
+    [InputColorType.success]: 'focus-within:ring-success-100',
+    [InputColorType.warning]: 'focus-within:ring-warning-100',
+  };
+  const activeColorVariant = {
+    [InputColorType.base]: 'bg-primary-500',
+    [InputColorType.danger]: 'bg-danger-500',
+    [InputColorType.info]: 'bg-info-500',
+    [InputColorType.success]: 'bg-success-500',
+    [InputColorType.warning]: 'bg-warning-500',
+  };
+
+  classes[colorVariant[_colorType.value]] = hasAction.value;
+  classes[activeColorVariant[_colorType.value]] = _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.md,
+  'h-3.5 w-3.5  translate-y-[1px]': props.size === Size.sm,
+  'translate-x-[1.125rem]': _value.value && props.size === Size.md,
+  'translate-x-0.5': !_value.value && props.size === Size.md,
+  'translate-x-[.925rem]': _value.value && props.size === Size.sm,
+  'translate-x-[1px]': !_value.value && props.size === Size.sm,
+  'invisible': props.skeleton
+}));
+
+const valueClasses = computed(() => {
+  const classes = {
+    'text-neutral-50-font': true,
+    'text-sm': props.size === Size.sm,
+    'text-md': props.size === Size.md,
+    'opacity-50 cursor-not-allowed': props.disabled
+  }
+
+  return classes;
+})
+
+function changeValue() {
+  if (!props.readonly && !props.disabled) {
+    _value.value = !_value.value
+  }
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :description="description"
+    :skeleton="skeleton"
+    :validator="validator"
+    :color-type="colorType"
+  >
+    <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"
+          @click="changeValue"
+          @blur="validator?.validate(_value)"
+          :disabled="disabled"
+          :tabindex="readonly ? -1 : 1"
+        >
+        <span
+          aria-hidden="true"
+          :class="ballClasses"
+        >
+          <slot name="icon"></slot>
+        </span>
+        </button>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded-full
+        ></AntSkeleton>
+      </div>
+
+      <div v-if="value" class="relative">
+        <span :class="valueClasses">{{ value }}</span>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+          class="l-1.5"
+        ></AntSkeleton>
+      </div>
+    </div>
+  </AntField>
+</template>

package/src/runtime/components/form/AntSwitcher.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import AntField from './Elements/AntField.vue';
+import AntButton from '../buttons/AntButton.vue';
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../AntSkeleton.vue';
+import { FieldValidator } from '@antify/validate';
+import { type SwitcherOption } from './__types/AntSwitcher.type';
+import { ColorType, InputColorType } from '../../enums';
+import { Grouped, Size } from '../../enums';
+import { computed, onMounted, watch } from 'vue';
+
+const emits = defineEmits([ 'update:modelValue' ]);
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  options: string[] | SwitcherOption[];
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  colorType?: InputColorType;
+  validator?: FieldValidator;
+  size?: Size,
+}>(), {
+  colorType: InputColorType.base,
+  size: Size.md
+});
+
+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) {
+    emits('update:modelValue', typeof val === 'string' ? val : val.value);
+  }
+});
+
+const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled))
+const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+
+watch(_value, () => props.validator?.validate(_value.value));
+
+onMounted(() => {
+  props.validator?.validate(_value.value);
+});
+
+const containerClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'flex relative ring-primary/25 rounded-md outline-none': true,
+    'focus-within:ring-2': (props.size as Size) === Size.sm && hasAction.value,
+    'focus-within:ring-4': (props.size as Size) === Size.md && hasAction.value,
+  };
+  const colorVariant = {
+    [InputColorType.base]: 'focus-within:ring-primary-100',
+    [InputColorType.danger]: 'focus-within:ring-danger-100',
+    [InputColorType.info]: 'focus-within:ring-info-100',
+    [InputColorType.success]: 'focus-within:ring-success-100',
+    [InputColorType.warning]: 'focus-within:ring-warning-100',
+  };
+
+  classes[colorVariant[_colorType.value]] = true;
+
+  return classes;
+});
+
+const itemClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'grow text-center': true,
+    'p-2.5 text-sm ': (props.size as Size) === Size.md,
+    'p-1.5 text-xs ': (props.size as Size) === Size.sm,
+    'invisible': props.skeleton,
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+
+  const colorVariant = {
+    [InputColorType.base]: 'border-neutral-300 bg-neutral-50 text-neutral-50-font',
+    [InputColorType.danger]: 'border-danger-500 bg-danger-100 text-danger-100-font',
+    [InputColorType.info]: 'border-info-500 bg-info-100 text-info-100-font',
+    [InputColorType.success]: 'border-success-500 bg-success-100 text-success-100-font',
+    [InputColorType.warning]: 'border-warning-500 bg-warning-100 text-warning-100-font',
+  };
+
+  classes[colorVariant[_colorType.value]] = true;
+
+  return classes;
+});
+
+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];
+  }
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :colorType="colorType"
+    :validator="validator"
+    label-for="noop"
+  >
+    <div
+      :class="containerClasses"
+      tabindex="0"
+      @keydown.left.prevent="prevOption()"
+      @keydown.right.prevent="nextOption()"
+    >
+      <AntButton
+        :icon-left="faChevronLeft"
+        :grouped="Grouped.left"
+        no-focus
+        @click="prevOption"
+        :color-type="_colorType as unknown as ColorType"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="readonly"
+        :disabled="disabled"
+      />
+
+      <div class="grow relative">
+        <div
+          :class="itemClasses"
+          class="switcher-content"
+        >
+          {{ 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
+        @click="nextOption"
+        :color-type="_colorType as unknown as ColorType"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="readonly"
+        :disabled="disabled"
+      />
+    </div>
+  </AntField>
+</template>
+
+<style scoped>
+.switcher-content {
+  position: relative;
+}
+
+.switcher-content:before {
+  content: '';
+
+  position: absolute;
+
+  inset: 0;
+
+  border-top: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+
+  border-color: inherit;
+}
+</style>