@antify/ui-module 1.7.3 → 1.8.2

package/src/runtime/components/forms/AntField.vue

@@ -1,123 +0,0 @@
-<script lang="ts" setup>
-import {onMounted, computed} from 'vue';
-import {Size} from '../../enums/Size.enum';
-import AntInputLabel from '../inputs/Elements/AntInputLabel.vue';
-import AntInputDescription from '../inputs/Elements/AntInputDescription.vue';
-import {handleEnumValidation} from '../../handler';
-import AntInputLimiter from '../inputs/Elements/AntInputLimiter.vue';
-import {InputState} from '../../enums';
-
-defineEmits(['clickLabel', 'validate']);
-
-const props = withDefaults(defineProps<{
-  label?: string;
-  description?: string;
-  messages?: string[];
-  size?: Size;
-  state?: InputState;
-  skeleton?: boolean;
-  limiterValue?: number;
-  limiterMaxValue?: number;
-  labelFor?: string;
-  expanded?: boolean;
-}>(), {
-  state: InputState.base,
-  skeleton: false,
-  size: Size.md,
-  messages: () => [],
-  expanded: true
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-
-const _state = computed(() => props.messages.length <= 0 ? InputState.base : props.state);
-const fontSize = computed(() => {
-  if (props.size === Size.xs2 || props.size === Size.xs) {
-    return Size.xs;
-  }
-
-  return Size.sm;
-});
-const fieldClasses = computed(() => ({
-  'w-full': props.expanded,
-  '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 descriptionClasses = 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,
-}));
-</script>
-
-<template>
-  <div
-    class="flex flex-col items-start"
-    :class="fieldClasses"
-  >
-    <AntInputLabel
-      :label="label"
-      :size="size"
-      :skeleton="skeleton"
-      :for="labelFor"
-      @click-content="$emit('clickLabel')"
-    >
-      <div class="w-full">
-        <slot />
-      </div>
-    </AntInputLabel>
-
-    <div
-      v-if="description || messages.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
-      class="flex justify-between w-full"
-      :class="descriptionClasses"
-    >
-      <AntInputDescription
-        v-if="description || messages.length > 0"
-        :size="fontSize"
-        :skeleton="skeleton"
-        :state="_state"
-      >
-        <slot name="description">
-          <template v-if="_state !== InputState.base && messages.length === 1">
-            {{ messages[0] }}
-          </template>
-
-          <template v-else-if="_state !== InputState.base && messages.length > 1">
-            <ul class="list-disc list-outside pl-4">
-              <li
-                v-for="(message, index) of messages"
-                :key="`field-message-${index}`"
-                class="marker:m-none marker:p-none"
-              >
-                {{ message }}
-              </li>
-            </ul>
-          </template>
-
-          <template v-else>
-            {{ description }}
-          </template>
-        </slot>
-      </AntInputDescription>
-
-      <div
-        v-if="limiterMaxValue !== undefined && limiterValue !== undefined"
-        class="flex flex-grow justify-end"
-      >
-        <AntInputLimiter
-          :value="limiterValue"
-          :max-value="limiterMaxValue"
-          :size="fontSize"
-          :skeleton="skeleton"
-        />
-      </div>
-    </div>
-  </div>
-</template>

package/src/runtime/components/forms/AntFormGroup.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import {Direction} from '../../enums/Direction.enum';
-import {computed, useAttrs} from 'vue';
-
-const attrs = useAttrs();
-const props = withDefaults(defineProps<{
-  direction?: Direction;
-}>(), {
-  direction: Direction.column,
-});
-
-const classes = computed(() => {
-	// Let override gap-x-* and gap-y-* classes from outside
-	const attrClasses = typeof attrs.class === 'string' ? attrs.class : ''
-	const hasGapX = /gap-x-\d/.test(attrClasses);
-	const hasGapY = /gap-y-\d/.test(attrClasses);
-
-	const classes: Record<string, boolean> = {
-		'flex-col': props.direction === Direction.column,
-		'gap-y-2.5': !hasGapY && props.direction === Direction.column,
-		'flex-row': props.direction === Direction.row,
-		'gap-x-2.5': !hasGapX && props.direction === Direction.row,
-	}
-
-	return classes;
-});
-</script>
-
-<template>
-  <section
-    class="flex"
-    :class="classes"
-  >
-    <slot />
-  </section>
-</template>

package/src/runtime/components/forms/AntFormGroupLabel.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="text-primary-500 text-xl font-medium">
-    <slot/>
-  </div>
-</template>

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

@@ -1,201 +0,0 @@
-<script lang="ts" setup>
-import {useVModel} from '@vueuse/core';
-import {AntField} from './Elements';
-import {InputState, Size} from '../../enums';
-import AntSkeleton from '../AntSkeleton.vue';
-import {computed, onMounted, ref, watch} from 'vue';
-import {handleEnumValidation} from '../../handler';
-import {faCheck} from '@fortawesome/free-solid-svg-icons';
-import AntIcon from '../AntIcon.vue';
-import {IconSize} from '../__types';
-
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
-const props =
-  withDefaults(
-    defineProps<{
-      modelValue: boolean | null;
-      label?: string;
-      description?: string;
-      state?: InputState;
-      size?: Size,
-      skeleton?: boolean;
-      disabled?: boolean;
-      readonly?: boolean;
-      messages?: string[];
-    }>(), {
-      state: InputState.base,
-      size: Size.md,
-      skeleton: false,
-      disabled: false,
-      readonly: false,
-      messages: () => []
-    });
-const _modelValue = useVModel(props, 'modelValue', emit);
-const delayedValue = ref(_modelValue.value);
-const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
-const inputClasses = computed(() => {
-  const focusColorVariant: Record<InputState, string> = {
-    [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',
-  };
-  const activeColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'text-primary-500',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-  const inactiveColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300',
-    [InputState.danger]: 'outline-danger-500',
-    [InputState.info]: 'outline-info-500',
-    [InputState.success]: 'outline-success-500',
-    [InputState.warning]: 'outline-warning-500',
-  };
-
-  return {
-    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
-    'outline outline-1 outline-offset-[-1px] rounded': true,
-    'focus:ring-offset-0': true,
-    'invisible': props.skeleton,
-    'cursor-pointer': !hasInputState.value,
-    '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),
-    'h-5 w-5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
-    'h-4 w-4': props.size === Size.xs || props.size === Size.xs2,
-    'cursor-not-allowed opacity-50': props.disabled,
-    [focusColorVariant[props.state]]: !hasInputState.value,
-    [activeColorVariant[props.state]]: delayedValue.value,
-    [inactiveColorVariant[props.state]]: !_modelValue.value,
-  };
-});
-const contentClasses = computed(() => ({
-  '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 itemSize = computed(() => {
-  if (props.size === Size.xs ||props.size === Size.xs2) {
-    return IconSize.xs;
-  } else {
-    return IconSize.sm;
-  }
-});
-
-/**
- * Delay value to change the checkboxes background color after
- * animation is finished.
- */
-watch(_modelValue, (val) => {
-  if (val === false) {
-    setTimeout(() => delayedValue.value = false, 120);
-  } else {
-    delayedValue.value = true;
-  }
-});
-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');
-
-  if (!props.skeleton && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :description="description"
-    :skeleton="skeleton"
-    :state="state"
-    :size="size"
-    :expanded="false"
-    :messages="messages"
-  >
-    <div class="flex items-center gap-1.5">
-      <div class="relative full-height flex items-center">
-        <input
-          v-model="_modelValue"
-          :class="inputClasses"
-          type="checkbox"
-          :aria-checked="_modelValue"
-          :disabled="disabled || readonly"
-          @blur="onBlur"
-        />
-
-        <AntIcon
-          v-if="_modelValue"
-          :icon="faCheck"
-          class="absolute !text-white pointer-events-none"
-          :size="itemSize"
-        />
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-        />
-      </div>
-
-      <div
-        class="relative flex items-center"
-        :class="props.size === Size.md ? 'h-5' : 'h-4'"
-      >
-        <span :class="contentClasses">
-          <slot />
-        </span>
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-        />
-      </div>
-    </div>
-  </AntField>
-</template>
-
-<style scoped>
-input[type="checkbox"] {
-  -webkit-appearance: none;
-  appearance: none;
-  position: relative;
-}
-
-input[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform: scale(0);
-  transition: 120ms transform;
-  background: currentColor;
-  border-radius: inherit;
-}
-
-input[type="checkbox"]:checked::before {
-  transform: scale(1);
-}
-</style>

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

@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import {type AntCheckboxType} from './__types/AntCheckbox.types';
-import {AntField} from './Elements';
-import {useVModel} from '@vueuse/core';
-import AntCheckbox from './AntCheckbox.vue';
-import {computed, onMounted, ref, watch} from 'vue';
-import {Direction} from '../../enums/Direction.enum';
-import {InputState, Size} from '../../enums';
-
-const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string[] | null;
-    checkboxes?: AntCheckboxType[];
-    label?: string;
-    description?: string;
-    direction?: Direction;
-    state?: InputState;
-    size?: Size,
-    skeleton?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-    messages?: string[]
-  }>(),
-  {
-    direction: Direction.column,
-    state: InputState.base,
-    size: Size.md,
-    skeleton: false,
-    readonly: false,
-    disabled: false,
-    messages: () => []
-  }
-);
-const _modelValue = useVModel(props, 'modelValue', emit);
-const containerClasses = computed(() => ({
-  'flex gap-2.5': true,
-  'flex-row': props.direction === Direction.row,
-  'flex-col': props.direction === Direction.column
-}));
-const containerRef = ref<null | HTMLElement>(null);
-
-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 updateValue(value: string) {
-  if (_modelValue.value === null) {
-    return _modelValue.value = [value];
-  }
-
-  const index = _modelValue.value.indexOf(value);
-
-  if (index === -1) {
-    _modelValue.value.push(value);
-  } else {
-    _modelValue.value.splice(index, 1);
-  }
-}
-
-function hasFocusedCheckbox() {
-  return !!containerRef.value?.querySelector('input[type="checkbox"]:focus');
-}
-
-function onBlurCheckbox() {
-  setTimeout(() => {
-    if (!hasFocusedCheckbox()) {
-      emit('validate', _modelValue.value);
-    }
-  }, 100);
-}
-
-onMounted(() => {
-  if (!props.skeleton && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :description="description"
-    :skeleton="skeleton"
-    :state="state"
-    :size="size"
-    :messages="messages"
-    label-for="noop"
-  >
-    <div
-      ref="containerRef"
-      :class="containerClasses"
-    >
-      <AntCheckbox
-        v-for="(checkbox, index) in checkboxes"
-        :key="`checkbox-group-${index}`"
-        :model-value="_modelValue !== null ? _modelValue?.indexOf(checkbox.value) !== -1 : null"
-        :size="size"
-        :state="state"
-        :skeleton="skeleton"
-        :disabled="disabled || checkbox.disabled"
-        :readonly="readonly || checkbox.readonly"
-        @update:model-value="updateValue(checkbox.value)"
-        @blur="() => onBlurCheckbox()"
-      >
-        {{ checkbox.label }}
-      </AntCheckbox>
-    </div>
-  </AntField>
-</template>

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

@@ -1,104 +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 {useVModel} from '@vueuse/core';
-import {InputState} from '../../enums';
-import {BaseInputType} from './Elements/__types';
-import {handleEnumValidation} from '../../handler';
-import {AntDateInputTypes} from './__types/AntDateInput.types';
-import {faCalendar, faClock} from '@fortawesome/free-solid-svg-icons';
-import {IconSize} from '../__types/AntIcon.types';
-
-defineOptions({inheritAttrs: false});
-
-const props = withDefaults(defineProps<{
-  modelValue: string | null;
-  label?: string;
-  description?: string;
-  size?: Size;
-  type?: AntDateInputTypes;
-  state?: InputState;
-  disabled?: boolean;
-  readonly?: boolean;
-  skeleton?: boolean;
-  messages?: string[];
-}>(), {
-  state: InputState.base,
-  type: AntDateInputTypes.date,
-  disabled: false,
-  readonly: false,
-  skeleton: false,
-  size: Size.md,
-  messages: () => []
-});
-const emit = defineEmits(['update:modelValue', 'validate']);
-const _modelValue = useVModel(props, 'modelValue', emit);
-const inputRef = ref<null | HTMLInputElement>(null);
-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-for-white-bg-font';
-  }
-});
-const iconSize = computed(() => props.size === Size.xs || props.size === Size.xs2 ? IconSize.xs : IconSize.sm);
-const _icon = computed(() => props.type === AntDateInputTypes.time ? faClock : faCalendar);
-
-onMounted(() => {
-  handleEnumValidation(props.state, InputState, 'state');
-  handleEnumValidation(props.size, Size, 'size');
-});
-
-function onClickCalendar() {
-  if (!props.disabled && !props.readonly) {
-    inputRef.value?.showPicker();
-  } else {
-    return;
-  }
-}
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :size="size"
-    :skeleton="skeleton"
-    :description="description"
-    :state="state"
-    :messages="messages"
-  >
-    <AntBaseInput
-      v-model="_modelValue"
-      v-model:input-ref="inputRef"
-      :type="type as unknown as BaseInputType"
-      :state="state"
-      :size="size"
-      :skeleton="skeleton"
-      :disabled="disabled"
-      :readonly="readonly"
-      :show-icon="false"
-      v-bind="$attrs"
-      @validate="val => $emit('validate', val)"
-    >
-      <template #icon-right>
-        <AntIcon
-          :icon="_icon"
-          :color="iconColor"
-          :size="iconSize"
-          class="cursor-pointer"
-          @click="onClickCalendar"
-        />
-      </template>
-    </AntBaseInput>
-  </AntField>
-</template>