@antify/ui-module 1.7.2 → 1.8.0

package/src/runtime/components/inputs/Elements/AntBaseInput.vue

@@ -1,304 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, watch, useSlots} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import AntIcon from '../../AntIcon.vue';
-import {BaseInputType} from './__types/AntBaseInput.types';
-import {Grouped} from '../../../enums/Grouped.enum';
-import {
-  faCircleCheck,
-  faCircleInfo,
-  faExclamationCircle,
-  faExclamationTriangle,
-  faXmark,
-  type IconDefinition
-} from '@fortawesome/free-solid-svg-icons';
-import {handleEnumValidation} from '../../../handler';
-import {classesToObjectSyntax, hasSlotContent} from '../../../utils';
-import {InputState} from '../../../enums';
-import {IconSize} from '../../__types';
-
-defineOptions({inheritAttrs: false});
-
-const emit = defineEmits(['update:modelValue', 'blur', 'validate', 'update:inputRef']);
-const props = withDefaults(defineProps<{
-  modelValue: string | number | null;
-  size?: Size;
-  state?: InputState;
-  disabled?: boolean;
-  placeholder?: string;
-  skeleton?: boolean;
-  type?: BaseInputType;
-  grouped?: Grouped;
-  wrapperClass?: string | Record<string, boolean>;
-  showIcon?: boolean;
-  iconLeft?: IconDefinition;
-  nullable?: boolean;
-  inputRef?: null | HTMLInputElement;
-}>(), {
-  state: InputState.base,
-  disabled: false,
-  size: Size.md,
-  skeleton: false,
-  type: BaseInputType.text,
-  grouped: Grouped.none,
-  showIcon: true,
-  default: false,
-  nullable: false,
-  inputRef: null
-});
-const slot = useSlots();
-const icons = {
-  [InputState.info]: faCircleInfo,
-  [InputState.warning]: faExclamationTriangle,
-  [InputState.danger]: faExclamationCircle,
-  [InputState.success]: faCircleCheck,
-  [InputState.base]: null,
-};
-const inputClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
-    [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
-    [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
-    [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',
-    [InputState.warning]: 'outline-warning-500 focus:ring-warning-200 bg-warning-100 placeholder:text-warning-700',
-  };
-
-  return {
-    'block transition-colors relative border-none outline w-full focus:z-10 text-black': true,
-    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
-    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
-    'text-right': props.type === BaseInputType.number,
-    [variants[props.state]]: true,
-    // Size
-    'focus:ring-2 p-1 text-xs': props.size === Size.xs2,
-    'focus:ring-2 p-1.5 text-xs': props.size === Size.xs,
-    'focus:ring-2 p-1.5 text-sm': props.size === Size.sm,
-    'focus:ring-4 p-2 text-sm': props.size === Size.md,
-    'focus:ring-4 p-2.5 text-sm': props.size === Size.lg,
-    // Icon left
-    'pl-6': props.size === Size.xs2 && props.iconLeft,
-    'pl-7': props.size === Size.sm && props.iconLeft || props.size === Size.xs && props.iconLeft,
-    'pl-8': props.size === Size.md && props.iconLeft,
-    'pl-9': props.size === Size.lg && props.iconLeft,
-    // Icon right
-    'pr-6': props.size === Size.xs2 && props.showIcon && icon.value ||
-      props.size === Size.xs2 && props.nullable ||
-      props.size === Size.xs2 && hasSlotContent(slot['icon-right']),
-    'pr-7': props.size === Size.xs && props.showIcon && icon.value ||
-      props.size === Size.xs && props.nullable ||
-      props.size === Size.xs && hasSlotContent(slot['icon-right']),
-    'pr-8': props.size === Size.sm && props.showIcon && icon.value ||
-      props.size === Size.sm && props.nullable ||
-      props.size === Size.sm && hasSlotContent(slot['icon-right']),
-    'pr-9': props.size === Size.md && props.showIcon && icon.value ||
-      props.size === Size.md && props.nullable ||
-      props.size === Size.md && hasSlotContent(slot['icon-right']),
-    'pr-10': props.size === Size.lg && props.showIcon && icon.value ||
-      props.size === Size.lg && props.nullable ||
-      props.size === Size.lg && hasSlotContent(slot['icon-right']),
-    // Grouped
-    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
-    'rounded-none': props.grouped === Grouped.center,
-    'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
-    'rounded-md': props.grouped === Grouped.none,
-    'invisible': props.skeleton,
-  };
-});
-const iconClasses = computed(() => ({
-  'transition-[height]': true,
-  'opacity-50': props.disabled
-}));
-const iconColorClass = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font',
-    [InputState.danger]: 'text-danger-700',
-    [InputState.info]: 'text-info-700',
-    [InputState.success]: 'text-success-700',
-    [InputState.warning]: 'text-warning-700',
-  };
-
-  return variants[props.state];
-});
-const _wrapperClass = computed(() => ({
-  '-mr-px': props.grouped !== Grouped.none,
-  'cursor-not-allowed': props.disabled,
-  ...classesToObjectSyntax(props.wrapperClass)
-}));
-const icon = computed(() => icons[props.state]);
-const _modelValue = computed<string | number | null>({
-  get: () => props.modelValue,
-  set: (val: string | number | null) => {
-    if (props.type === BaseInputType.number && typeof val !== 'number') {
-      return emit('update:modelValue', null);
-    }
-
-    emit('update:modelValue', val);
-  },
-});
-const inputIconSize = computed(() => {
-  if (props.size === Size.xs || props.size === Size.xs2) {
-    return IconSize.xs;
-  }
-
-  return IconSize.sm;
-});
-const _inputRef = computed({
-  get() {
-    return props.inputRef;
-  },
-  set(val) {
-    emit('update:inputRef', val);
-  }
-});
-
-watch(_modelValue, (val) => {
-  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
-    emit('validate', val);
-  }
-}, {deep: true});
-watch(() => props.skeleton, (val) => {
-  if (!val && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-  handleEnumValidation(props.type, BaseInputType, 'type');
-  handleEnumValidation(props.grouped, Grouped, 'grouped');
-
-  /**
-   * Validate default value without delayed data fetching.
-   */
-  if (!props.skeleton && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-
-function onBlur(e: FocusEvent) {
-  emit('validate', props.modelValue);
-  emit('blur', e);
-}
-
-function onClickClearIcon() {
-  if (!props.disabled) {
-    _modelValue.value = null;
-  }
-}
-</script>
-
-<template>
-  <div
-    class="block relative w-full h-fit"
-    :class="_wrapperClass"
-  >
-    <div
-      v-if="iconLeft"
-      class="absolute h-full flex items-center justify-center z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
-    >
-      <AntIcon
-        :icon="iconLeft"
-        :size="inputIconSize"
-        color="text-for-white-bg-font"
-      />
-    </div>
-
-    <input
-      ref="_inputRef"
-      v-model="_modelValue"
-      :class="inputClasses"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled || skeleton"
-      v-bind="$attrs"
-      @blur="onBlur"
-    >
-
-    <div
-      v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
-      class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
-    >
-      <slot name="icon-right">
-        <AntIcon
-          v-if="nullable && _modelValue !== null && _modelValue !== ''"
-          :icon="faXmark"
-          :class="{'cursor-pointer': !disabled, ...iconClasses}"
-          :color="iconColorClass"
-          :size="inputIconSize"
-          @click="() => onClickClearIcon()"
-        />
-
-        <AntIcon
-          v-else-if="showIcon && icon"
-          :icon="icon"
-          :color="iconColorClass"
-          :class="iconClasses"
-          :size="inputIconSize"
-        />
-      </slot>
-    </div>
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      :grouped="grouped"
-      rounded
-    />
-  </div>
-</template>
-
-<style scoped>
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-/* clears the "X" from Internet Explorer */
-input[type=search]::-ms-clear {
-  display: none;
-  width: 0;
-  height: 0;
-}
-
-input[type=search]::-ms-reveal {
-  display: none;
-  width: 0;
-  height: 0;
-}
-
-/* clears the "X" from Chrome */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-/* Remove calendar icon in Chrome */
-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
-input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
-input[type="month"]::-webkit-datetime-edit-fields-wrapper,
-input[type="time"]::-webkit-datetime-edit-fields-wrapper,
-input[type="week"]::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-input[type="date"]::-webkit-calendar-picker-indicator,
-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
-input[type="month"]::-webkit-calendar-picker-indicator,
-input[type="time"]::-webkit-calendar-picker-indicator,
-input[type="week"]::-webkit-calendar-picker-indicator {
-  display: none;
-}
-</style>

package/src/runtime/components/inputs/Elements/AntDropDown.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-/**
- * This is the custom DropDown for each element (like select / tag-select)
- *
- * 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 { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { InputState, Size } from '../../../enums';
-import type { SelectOption } from '../__types';
-import { useVModel } from '@vueuse/core';
-import type { Validator } from '@antify/validate';
-
-const emit = defineEmits([ 'update:open', 'update:modelValue', 'update:focused', 'selectElement' ]);
-const props = withDefaults(defineProps<{
-  modelValue: string | string[] | number | number[] | null;
-  focused: string | number | null;
-  open: boolean;
-  options: SelectOption[];
-  state?: InputState;
-  validator?: Validator;
-  size?: Size;
-  inputRef?: HTMLElement | null;
-  closeOnEnter?: boolean;
-  autoSelectFirstOnOpen?: boolean;
-}>(), {
-  state: InputState.base,
-  focusOnOpen: true,
-  closeOnEnter: false,
-  autoSelectFirstOnOpen: true
-});
-
-const _modelValue = useVModel(props, 'modelValue', emit);
-const isOpen = useVModel(props, 'open', emit);
-const focusedDropDownItem = useVModel(props, 'focused', emit);
-
-const dropdownClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-300 border-neutral-300',
-    [InputState.success]: 'bg-success-500 border-success-500',
-    [InputState.info]: 'bg-info-500 border-info-500',
-    [InputState.warning]: 'bg-warning-500 border-warning-500',
-    [InputState.danger]: 'bg-danger-500 border-danger-500',
-  };
-
-  return {
-    'absolute w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-40': true,
-    'rounded-bl-md rounded-br-md': true,
-    [variants[props.state]]: true,
-    // Size
-    'text-sm': props.size === Size.sm ||  props.size === Size.md
-  };
-});
-const dropDownItemClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-white text-for-white-bg-font',
-    [InputState.success]: 'bg-success-100 border-success-100-font',
-    [InputState.info]: 'bg-info-100 border-info-100-font',
-    [InputState.warning]: 'bg-warning-100 border-warning-100-font',
-    [InputState.danger]: 'bg-danger-100 border-danger-100-font',
-  };
-
-  return {
-    'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
-    [variants[props.state]]: true,
-    // Size
-    'p-1.5': props.size === Size.sm,
-    'p-2': props.size === Size.md,
-  };
-});
-
-watch(isOpen, () => {
-  nextTick(() => {
-    if (props.autoSelectFirstOnOpen) {
-      focusedDropDownItem.value =
-        typeof _modelValue.value === 'string' || typeof _modelValue.value === 'number' ? _modelValue.value :
-          Array.isArray(_modelValue.value) ? _modelValue.value[0] :
-            props.options[0].value;
-    } else {
-      focusedDropDownItem.value = null;
-    }
-  });
-});
-
-onMounted(() => {
-  nextTick(() => {
-    props.inputRef?.addEventListener('keydown', onKeyDownDropDown);
-  });
-});
-
-onUnmounted(() => {
-  props.inputRef?.removeEventListener('keydown', onKeyDownDropDown);
-});
-
-function onKeyDownDropDown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    if (props.closeOnEnter) {
-      isOpen.value = false;
-    }
-
-    emit('selectElement', focusedDropDownItem.value);
-  }
-
-  if (e.key === 'Escape') {
-    isOpen.value = false;
-  }
-
-  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-    isOpen.value = true;
-
-    const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index + 1];
-
-    if (index === -1) {
-      focusedDropDownItem.value = props.options[0].value;
-    } else if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
-    }
-  }
-
-  if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-    isOpen.value = true;
-
-    const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index - 1];
-
-    if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
-    }
-  }
-
-  if (e.key === 'Tab') {
-    isOpen.value = false;
-  }
-}
-
-function getActiveDropDownItemClasses(option: SelectOption) {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-50/25',
-    [InputState.success]: 'bg-success-100/25',
-    [InputState.info]: 'bg-info-100/25',
-    [InputState.warning]: 'bg-warning-100/25',
-    [InputState.danger]: 'bg-danger-100/25',
-  };
-
-  return option.value === focusedDropDownItem.value ? { [variants[props.state]]: true } : {};
-}
-
-function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
-  e.preventDefault();
-  props.inputRef?.focus();
-
-  isOpen.value = false;
-  emit('selectElement', value);
-  _modelValue.value = value;
-}
-
-watch(_modelValue, (val) => {
-  focusedDropDownItem.value = Array.isArray(val) ? val[0] : val;
-});
-</script>
-
-<template>
-  <div
-    v-if="isOpen"
-    :class="dropdownClasses"
-  >
-    <div
-      v-for="(option, index) in options"
-      :key="`option-${index}`"
-      :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-      @mousedown="(e) => onClickDropDownItem(e, option.value)"
-      @mouseover="() => focusedDropDownItem = option.value"
-    >
-      {{ option.label }}
-    </div>
-
-    <div
-      v-if="options.length === 0"
-      :class="{...dropDownItemClasses}"
-    >
-      <slot name="empty">
-        No options available
-      </slot>
-    </div>
-  </div>
-</template>

package/src/runtime/components/inputs/Elements/AntInputDescription.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-import {InputState} from '../../../enums';
-
-const props = withDefaults(defineProps<{
-  state?: InputState,
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-  state: InputState.base
-});
-
-const classes = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-
-  return {
-    'relative font-regular inline-block transition-color': true,
-    'text-2xs': props.size === Size.xs2,
-    'text-xs': props.size === Size.xs,
-    'text-sm': props.size === Size.sm,
-    'text-md': props.size === Size.md,
-    'text-lg': props.size === Size.lg,
-    [variants[props.state]]: true
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-</script>
-
-<template>
-  <div
-    :class="classes"
-  >
-    <span :class="{'invisible': skeleton}">
-      <slot />
-    </span>
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-  </div>
-</template>

package/src/runtime/components/inputs/Elements/AntInputLabel.vue

@@ -1,65 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-
-defineEmits(['clickContent']);
-
-const props = withDefaults(defineProps<{
-  label?: string;
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-});
-
-const fontClasses = computed(() => ({
-  'relative font-medium w-fit text-for-white-bg-font': true,
-  'text-2xs': props.size === Size.xs2,
-  'text-xs': props.size === Size.xs,
-  'text-sm': props.size === Size.sm,
-  'text-md': props.size === Size.md,
-  'text-lg': props.size === Size.lg
-}));
-const gapSize = computed(() => ({
-  'gap-2.5': props.size === Size.lg,
-  'gap-2': props.size === Size.md,
-  'gap-1.5': props.size === Size.sm || props.size === Size.xs,
-  'gap-1': props.size === Size.xs2,
-}));
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-});
-</script>
-
-<template>
-  <label
-    class="flex flex-col w-full"
-    :class="gapSize"
-  >
-    <span
-      v-if="label"
-      :class="fontClasses"
-    >
-      <span
-        :class="{'invisible': skeleton}"
-        @click="$emit('clickContent')"
-      >
-        <slot name="label">
-          {{ label }}
-        </slot>
-      </span>
-
-      <AntSkeleton
-        v-if="skeleton"
-        absolute
-        rounded
-      />
-    </span>
-
-    <slot />
-  </label>
-</template>

package/src/runtime/components/inputs/Elements/AntInputLimiter.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-import {InputState} from '../../../enums';
-
-const props = withDefaults(defineProps<{
-  value: number;
-  maxValue: number;
-  state?: InputState;
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-  state: InputState.base
-});
-
-const classes = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-
-  return {
-    'relative font-regular inline-block transition-color': true,
-    'text-2xs': props.size === Size.xs2,
-    'text-xs': props.size === Size.xs,
-    'text-sm': props.size === Size.sm,
-    'text-md': props.size === Size.md,
-    'text-lg': props.size === Size.lg,
-    [variants[props.state]]: true,
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-</script>
-
-<template>
-  <div :class="classes">
-    <span :class="{'invisible': skeleton}">
-      {{ value }}/{{ maxValue }}
-    </span>
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-  </div>
-</template>