@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,157 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import AntButton from '../buttons/AntButton.vue';
-import AntField from '../forms/AntField.vue';
-import AntBaseInput from './Elements/AntBaseInput.vue';
-import {Size} from '../../enums/Size.enum';
-import {faPlus, faMinus} from '@fortawesome/free-solid-svg-icons';
-import {State, InputState} from '../../enums/State.enum';
-import {handleEnumValidation} from '../../handler';
-import {useVModel} from '@vueuse/core';
-import {Grouped} from '../../enums/Grouped.enum';
-import {BaseInputType} from './Elements/__types';
-
-defineOptions({inheritAttrs: false});
-
-const props = withDefaults(defineProps<{
-  modelValue: number | null;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  size?: Size;
-  state?: InputState;
-  disabled?: boolean;
-  readonly?: boolean;
-  skeleton?: boolean;
-  steps?: number;
-  min?: number;
-  max?: number;
-  limiter?: boolean;
-  messages?: string[];
-  indicators?: boolean;
-}>(), {
-  state: InputState.base,
-  disabled: false,
-  readonly: false,
-  skeleton: false,
-  size: Size.md,
-  steps: 1,
-  limiter: false,
-  messages: () => [],
-  indicators: false
-});
-const emit = defineEmits(['update:modelValue', 'validate']);
-const _modelValue = useVModel(props, 'modelValue', emit);
-const isPrevButtonDisabled = computed(() => {
-  if (props.disabled) {
-    return true;
-  }
-
-  if (_modelValue.value === null) {
-    return false;
-  }
-
-  return props.min !== undefined ? _modelValue.value <= props.min : false;
-});
-const isNextButtonDisabled = computed(() => {
-  if (props.disabled) {
-    return true;
-  }
-
-  if (_modelValue.value === null) {
-    return false;
-  }
-
-  return props.max !== undefined ? _modelValue.value >= props.max : false;
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-
-function subtract() {
-  if (_modelValue.value === null) {
-    _modelValue.value = props.max || 0;
-  } else if (props.max !== undefined && _modelValue.value - props.steps > props.max) {
-    _modelValue.value = props.max;
-  } else {
-    _modelValue.value -= props.steps;
-  }
-}
-
-function add() {
-  if (_modelValue.value === null) {
-    return _modelValue.value = props.min || 0;
-  } else if (props.min !== undefined && _modelValue.value + props.steps < props.min) {
-    return _modelValue.value = props.min;
-  } else {
-    _modelValue.value += props.steps;
-  }
-}
-
-function onButtonBlur() {
-  emit('validate', _modelValue.value);
-}
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :size="size"
-    :skeleton="skeleton"
-    :description="description"
-    :state="state"
-    :limiter-max-value="limiter && max !== undefined ? max : undefined"
-    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? _modelValue : undefined"
-    :messages="messages"
-  >
-    <div
-      class="flex relative"
-    >
-      <AntButton
-        v-if="indicators"
-        :icon-left="faMinus"
-        :grouped="Grouped.left"
-        :state="state as unknown as State"
-        :size="size"
-        :skeleton="skeleton"
-        :disabled="isPrevButtonDisabled"
-        :readonly="readonly"
-        @click="subtract"
-        @blur="onButtonBlur"
-      />
-
-      <AntBaseInput
-        v-model.number="_modelValue"
-        :type="BaseInputType.number"
-        :grouped="indicators ? Grouped.center : Grouped.none"
-        wrapper-class="flex-grow"
-        :state="state"
-        :size="size"
-        :skeleton="skeleton"
-        :min="min"
-        :max="max"
-        :disabled="disabled"
-        :readonly="readonly"
-        :placeholder="placeholder || label"
-        :show-icon="false"
-        v-bind="$attrs"
-        @validate="val => $emit('validate', val)"
-      />
-
-      <AntButton
-        v-if="indicators"
-        :icon-left="faPlus"
-        :grouped="Grouped.right"
-        :state="state as unknown as State"
-        :size="size"
-        :skeleton="skeleton"
-        :disabled="isNextButtonDisabled"
-        :readonly="readonly"
-        @click="add"
-        @blur="onButtonBlur"
-      />
-    </div>
-  </AntField>
-</template>

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

@@ -1,107 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
-import AntField from '../forms/AntField.vue';
-import AntBaseInput from './Elements/AntBaseInput.vue';
-import AntIcon from '../AntIcon.vue';
-import {Size} from '../../enums/Size.enum';
-import {faEye, faEyeSlash} from '@fortawesome/free-solid-svg-icons';
-import {useVModel} from '@vueuse/core';
-import {InputState} from '../../enums';
-import {BaseInputType} from './Elements/__types';
-import {handleEnumValidation} from '../../handler';
-import {IconSize} from '../__types/AntIcon.types';
-
-defineOptions({inheritAttrs: false});
-
-const props = withDefaults(defineProps<{
-  modelValue: string | null;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  size?: Size;
-  state?: InputState;
-  disabled?: boolean;
-  skeleton?: boolean;
-  messages?: string[];
-}>(), {
-  state: InputState.base,
-  disabled: false,
-  skeleton: false,
-  size: Size.md,
-  messages: () => []
-});
-const emit = defineEmits(['update:modelValue', 'validate']);
-const _modelValue = useVModel(props, 'modelValue', emit);
-const isVisible = ref(false);
-const iconSize = computed(() => {
-  if (props.size === Size.xs2 || props.size === Size.xs) {
-    return IconSize.xs;
-  }
-
-  return IconSize.sm;
-});
-const iconColor = computed(() => {
-  switch (props.state) {
-    case InputState.info:
-      return 'text-info-700';
-    case InputState.success:
-      return 'text-success-700';
-    case InputState.warning:
-      return 'text-warning-700';
-    case InputState.danger:
-      return 'text-danger-700';
-    default:
-      return 'text-neutral-500';
-  }
-});
-
-onMounted(() => {
-  handleEnumValidation(props.state, InputState, 'state');
-  handleEnumValidation(props.size, Size, 'size');
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :size="size"
-    :skeleton="skeleton"
-    :description="description"
-    :state="state"
-    :messages="messages"
-  >
-    <div class="flex relative">
-      <AntBaseInput
-        v-model="_modelValue"
-        :type="isVisible ? BaseInputType.text : BaseInputType.password"
-        :state="state"
-        :size="size"
-        :skeleton="skeleton"
-        :disabled="disabled"
-        :placeholder="placeholder || label"
-        :show-icon="false"
-        v-bind="$attrs"
-        @validate="val => $emit('validate', val)"
-      >
-        <template #icon-right>
-          <AntIcon
-            v-if="!isVisible"
-            class="cursor-pointer"
-            :icon="faEye"
-            :color="iconColor"
-            :size="iconSize"
-            @click="() => isVisible = !isVisible"
-          />
-
-          <AntIcon
-            v-else
-            class="cursor-pointer"
-            :icon="faEyeSlash"
-            :color="iconColor"
-            @click="() => isVisible = !isVisible"
-          />
-        </template>
-      </AntBaseInput>
-    </div>
-  </AntField>
-</template>

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

@@ -1,214 +0,0 @@
-<script lang="ts" setup>
-import {AntField} from './Elements';
-import {InputState, Size} from '../../enums';
-import AntSkeleton from '../AntSkeleton.vue';
-import {computed, onMounted, watch} from 'vue';
-import {type AntRadioTypes} from './__types/AntRadio.types';
-import {handleEnumValidation} from '../../handler';
-
-defineOptions({inheritAttrs: false});
-
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | null;
-    value: AntRadioTypes;
-    description?: string;
-    skeleton?: boolean;
-    state?: InputState;
-    size?: Size;
-    readonly?: boolean;
-    disabled?: boolean;
-    messages?: string[];
-  }>(), {
-    state: InputState.base,
-    size: Size.md,
-    readonly: false,
-    disabled: false,
-    messages: () => []
-  }
-);
-const _modelValue = computed({
-  get(): string | null | AntRadioTypes {
-    return props.modelValue;
-  },
-  set(val: string | null | AntRadioTypes) {
-    emit('update:modelValue', val ? typeof val === 'string' ? val : val.value : null);
-  }
-});
-const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
-const isActive = computed(() => _modelValue.value === props.value.value);
-const inputClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
-    'relative inline-flex flex-shrink-0': true,
-    'focus:ring-offset-0 outline outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1 rounded-full': true,
-    'flex items-center justify-center rounded-full appearance-none': true,
-    'cursor-pointer': !hasInputState.value,
-    'rounded-full transition-colors ease-in-out duration-200 disabled:opacity-50': true,
-    '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),
-    'outline-neutral-300': props.state === InputState.base,
-    'outline-primary-500': props.state === InputState.base && isActive.value,
-    'outline-info-500': props.state === InputState.info,
-    'outline-success-500': props.state === InputState.success,
-    'outline-warning-500': props.state === InputState.warning,
-    'outline-danger-500': props.state === InputState.danger,
-    'h-4 w-4 small': props.size === Size.xs || props.size === Size.xs2,
-    'h-5 w-5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
-  };
-
-  const focusColorVariant = {
-    [InputState.base]: 'focus:ring-primary-200',
-    [InputState.danger]: 'focus:ring-danger-200',
-    [InputState.info]: 'focus:ring-info-200',
-    [InputState.success]: 'focus:ring-success-200',
-    [InputState.warning]: 'focus:ring-warning-200',
-  };
-
-  classes[focusColorVariant[props.state]] = !hasInputState.value;
-
-  return classes;
-});
-const valueClass = computed(() => ({
-  'relative w-fit full-height text-for-white-bg-font': true,
-  'cursor-pointer': !hasInputState.value,
-  'cursor-not-allowed opacity-50': props.disabled,
-  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
-  'text-xs': props.size === Size.xs || props.size === Size.xs2,
-}));
-const gapSize = computed(() => {
-  switch (props.size) {
-    case Size.lg:
-      return 'gap-2.5';
-    case Size.md:
-      return 'gap-2';
-    case Size.sm:
-      return 'gap-1.5';
-    case Size.xs:
-      return 'gap-1.5';
-    default:
-      return 'gap-1';
-  }
-});
-const valueSize = computed(() => {
-  if (props.size === Size.xs || props.size === Size.xs2) {
-    return 'h-4';
-  } else {
-    return 'h-5';
-  }
-});
-const innerRadioClass = computed(() => (
-  {
-    'bg-primary-500': props.state === InputState.base,
-    'bg-info-500': props.state === InputState.info,
-    'bg-success-500': props.state === InputState.success,
-    'bg-warning-500': props.state === InputState.warning,
-    'bg-danger-500': props.state === InputState.danger,
-    'h-3 w-3': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
-    'h-2 w-2': props.size === Size.xs || props.size === Size.xs2,
-  }
-));
-
-/**
- * Validate default value if given after delayed data fetching.
- */
-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);
-  }
-});
-
-function onBlur(e: FocusEvent) {
-  emit('validate', props.modelValue);
-  emit('blur', e);
-}
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-
-  /**
-   * Validate default value without delayed data fetching.
-   */
-  if (!props.skeleton && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-</script>
-
-<template>
-  <AntField
-    :description="description"
-    :state="state"
-    class="cursor-pointer"
-    :skeleton="skeleton"
-    :size="size"
-    :expanded="false"
-    :messages="messages"
-  >
-    <div
-      class="flex items-center"
-      :class="gapSize"
-    >
-      <div class="relative full-height flex items-center">
-        <div class="absolute flex items-center justify-center w-full h-full">
-          <Transition name="fade-radio">
-            <div
-              v-if="isActive"
-              class="rounded-full transition-all"
-              :class="innerRadioClass"
-            />
-          </Transition>
-        </div>
-
-        <input
-          v-model="_modelValue"
-          :value="value.value"
-          :class="inputClasses"
-          type="radio"
-          :aria-checked="isActive"
-          :disabled="disabled || readonly"
-          @blur="onBlur"
-        />
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded-full
-        />
-      </div>
-
-      <div
-        class="relative flex items-center"
-        :class="valueSize"
-      >
-        <span :class="valueClass">
-          {{ value.label }}
-        </span>
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-        />
-      </div>
-    </div>
-  </AntField>
-</template>
-
-<style scoped>
-.fade-radio-enter-active,
-.fade-radio-leave-active {
-  @apply transition-opacity;
-}
-
-.fade-radio-enter-from,
-.fade-radio-leave-to {
-  opacity: 0;
-}
-</style>

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

@@ -1,127 +0,0 @@
-<script lang="ts" setup>
-import AntRadio from './AntRadio.vue';
-import {useVModel} from '@vueuse/core';
-import {AntField} from './Elements';
-import {type AntRadioTypes} from './__types/AntRadio.types';
-import {InputState, Size} from '../../enums';
-import {computed, onMounted, ref, watch} from 'vue';
-import {Direction} from '../../enums/Direction.enum';
-import {handleEnumValidation} from '../../handler';
-
-defineOptions({inheritAttrs: false});
-
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate']);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | null;
-    radioButtons: AntRadioTypes[];
-    label?: string;
-    description?: string;
-    direction?: Direction;
-    state?: InputState;
-    size?: Size;
-    skeleton?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    messages?: string[];
-  }>(), {
-    direction: Direction.column,
-    state: InputState.base,
-    size: Size.md,
-    skeleton: false,
-    disabled: false,
-    readonly: false,
-    messages: () => []
-  });
-const _modelValue = useVModel(props, 'modelValue', emit);
-const containerClasses = computed(() => ({
-  'flex justify-start': true,
-  'flex-row': props.direction === Direction.row,
-  'flex-col': props.direction === Direction.column,
-  '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,
-}));
-const containerRef = ref<null | HTMLElement>(null);
-const fieldSize = computed(() => {
-  switch (props.size) {
-    case Size.lg:
-      return Size.lg;
-    case Size.md:
-      return Size.md;
-    case Size.sm:
-      return Size.sm;
-    case Size.xs:
-      return Size.xs;
-    default:
-      return Size.xs2;
-  }
-});
-
-watch(_modelValue, (val) => {
-  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
-    emit('validate', val);
-  }
-}, {deep: true});
-watch(_modelValue, (val) => {
-  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
-    emit('validate', val);
-  }
-});
-
-function hasFocusedRadio() {
-  return !!containerRef.value?.querySelector('input[type="radio"]:focus');
-}
-
-function onBlurRadio() {
-  setTimeout(() => {
-    if (!hasFocusedRadio()) {
-      emit('validate', _modelValue.value);
-    }
-  }, 100);
-}
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-  handleEnumValidation(props.direction, Direction, 'direction');
-
-  /**
-   * Validate default value without delayed data fetching.
-   */
-  if (!props.skeleton && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :description="description"
-    :state="state"
-    :skeleton="skeleton"
-    :messages="messages"
-    :size="fieldSize"
-    label-for="noop"
-  >
-    <div
-      ref="containerRef"
-      :class="containerClasses"
-    >
-      <AntRadio
-        v-for="(radio, index) in radioButtons"
-        :key="`radio-button-widget_${radio.value}-${index}`"
-        v-model="_modelValue"
-        :value="radio"
-        :skeleton="skeleton"
-        :disabled="disabled || radio.disabled"
-        :readonly="readonly || radio.readonly"
-        :state="radio.state || state"
-        :size="size"
-        @blur="onBlurRadio"
-      />
-    </div>
-  </AntField>
-</template>