@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,319 +0,0 @@
-<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 '../forms/AntField.vue';
-import {type SelectOption} from './__types/AntSelect.types';
-import {computed, onMounted, ref, watch} from 'vue';
-import {Size} from '../../enums/Size.enum';
-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 {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;
-      options: SelectOption[];
-      label?: string;
-      description?: string;
-      placeholder?: string;
-      size?: Size;
-      state?: InputState;
-      disabled?: boolean;
-      readonly?: boolean;
-      skeleton?: boolean;
-      nullable?: boolean;
-      grouped?: Grouped;
-      name?: string;
-      wrapperClass?: string | Record<string, boolean>;
-      expanded?: boolean;
-      messages?: string[]
-    }>(), {
-      state: InputState.base,
-      grouped: Grouped.none,
-      size: Size.md,
-      disabled: false,
-      readonly: false,
-      skeleton: false,
-      nullable: false,
-      expanded: true,
-      messages: () => []
-    }
-);
-const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
-const isOpen = ref(false);
-const _modelValue = computed({
-  get: () => props.modelValue,
-  set: (val: string | number | null) => {
-    emit('update:modelValue', val);
-  },
-});
-const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
-const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
-const inputClasses = computed(() => {
-  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[props.state]]: true,
-    // Skeleton
-    'invisible': props.skeleton,
-    // Disabled
-    'disabled:opacity-50 disabled:cursor-not-allowed': true,
-    // Size
-    '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,
-    '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),
-    // 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<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[props.state]]: true,
-  };
-});
-const arrowClasses = computed(() => {
-  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[props.state]]: true};
-});
-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);
-// TODO:: Hotfix to prevent missing required prop warning. Fix it with https://github.com/antify/ui-module/issues/52
-const dropDownFocused = ref(null);
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-  handleEnumValidation(props.grouped, Grouped, 'grouped');
-
-  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;
-  }
-
-  isOpen.value = false;
-  inputRef.value?.focus();
-}
-
-function onClickSelectInput(e: MouseEvent) {
-  e.preventDefault();
-
-  if (props.disabled || props.readonly) {
-    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"
-    :state="state"
-    :class="wrapperClass"
-    :expanded="expanded"
-    :messages="messages"
-    label-for="noop"
-    data-e2e="select"
-    @click-label="() => inputRef?.focus()"
-  >
-    <div
-      class="h-fit flex flex-row w-full"
-    >
-      <div
-        v-on-click-outside="onClickOutside"
-        class="relative w-full"
-        :class="{'cursor-pointer': !skeleton && !readonly}"
-      >
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-          :grouped="skeletonGrouped"
-        />
-
-        <input
-          v-model="_modelValue"
-          type="hidden"
-          :name="name"
-        >
-
-        <!-- Input -->
-        <div
-          ref="inputRef"
-          :class="inputClasses"
-          :tabindex="disabled || readonly ? -1 : 0"
-          v-bind="$attrs"
-          @mousedown="onClickSelectInput"
-          @click="inputRef?.focus()"
-          @blur="onBlur"
-        >
-          <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="select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
-          >
-            {{ valueLabel }}
-          </div>
-
-          <AntIcon
-            v-if="isOpen"
-            :icon="faChevronUp"
-            :size="IconSize.sm"
-            :class="arrowClasses"
-          />
-
-          <AntIcon
-            v-else
-            :icon="faChevronDown"
-            :size="IconSize.sm"
-            :class="arrowClasses"
-          />
-        </div>
-
-        <!-- Dropdown -->
-        <AntDropDown
-          ref="dropDownRef"
-          v-model="_modelValue"
-          v-model:open="isOpen"
-          v-model:focused="dropDownFocused"
-          :options="options"
-          :input-ref="inputRef"
-          :size="size"
-          :state="state"
-          :close-on-enter="true"
-          @select-element="(e) => _modelValue = e"
-        />
-      </div>
-
-      <AntButton
-        v-if="nullable && _modelValue !== null"
-        :icon-left="faMultiply"
-        :state="state as unknown as State"
-        :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/inputs/AntSwitch.vue

@@ -1,192 +0,0 @@
-<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="size"
-    :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

@@ -1,196 +0,0 @@
-<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>