@antify/ui-module 1.6.0 → 1.7.2

package/src/runtime/components/form/AntRadioWidget/AntRadio.vue

@@ -1,164 +0,0 @@
-<script lang="ts" setup>
-import { AntField } from '../Elements';
-import { InputColorType, Size } from '../../../enums';
-import AntSkeleton from '../../AntSkeleton.vue';
-import { computed, onMounted } from 'vue';
-import { type AntRadioType } from './__types/AntRadio.type';
-import { handleEnumValidation } from '../../../handler';
-
-defineOptions({ inheritAttrs: false });
-
-const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | null;
-    value: AntRadioType;
-
-    description?: string;
-    skeleton?: boolean;
-    colorType?: InputColorType;
-    size?: Size
-    readonly?: boolean;
-    disabled?: boolean;
-  }>(), {
-    colorType: InputColorType.base,
-    size: Size.md,
-    readonly: false,
-    disabled: false,
-  }
-);
-
-const _value = computed({
-  get(): string | null | AntRadioType {
-    return props.modelValue;
-  },
-  set(val: string | null | AntRadioType) {
-    emits('update:modelValue',  val ? typeof val === 'string' ? val : val.value : null);
-  }
-});
-const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled))
-const isActive = computed(() => {
-  return _value.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,
-    'cursor-pointer': hasAction.value,
-    'outline-neutral-300 focus:outline-neutral-300': !isActive.value,
-    'rounded-full transition-colors ease-in-out duration-200 disabled:opacity-50 disabled:cursor-not-allowed': true,
-    'focus:ring-2': props.size === Size.sm && hasAction.value,
-    'focus:ring-4': props.size === Size.md && hasAction.value,
-    'h-4 w-4 small': props.size === Size.sm,
-    'h-5 w-5': props.size === Size.md,
-  };
-
-  const focusColorVariant = {
-    [InputColorType.base]: 'focus:ring-primary-100',
-    [InputColorType.danger]: 'focus:ring-danger-100',
-    [InputColorType.info]: 'focus:ring-info-100',
-    [InputColorType.success]: 'focus:ring-success-100',
-    [InputColorType.warning]: 'focus:ring-warning-100',
-  };
-
-  const activeColorVariant = {
-    [InputColorType.base]: 'text-primary-500 outline-primary-500 focus:outline-primary-500',
-    [InputColorType.danger]: 'text-danger-500 outline-danger-500 focus:outline-danger-500',
-    [InputColorType.info]: 'text-info-500 outline-info-500 focus:outline-info-500',
-    [InputColorType.success]: 'text-success-500 outline-success-500 focus:outline-success-500',
-    [InputColorType.warning]: 'text-warning-500 outline-warning-500 focus:outline-warning-500',
-  }
-
-  classes[focusColorVariant[props.colorType]] = hasAction.value;
-  classes[activeColorVariant[props.colorType]] = isActive.value;
-
-  return classes;
-});
-
-const valueClass = computed(() => {
-  const classes = {
-    'relative w-fit full-height': true,
-    'cursor-pointer': hasAction.value,
-    'cursor-not-allowed opacity-50': props.disabled
-  }
-
-  return classes;
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
-});
-</script>
-
-<template>
-  <AntField
-    :description="description"
-    :color-type="colorType"
-    class="cursor-pointer"
-    :skeleton="skeleton"
-    :size="size"
-    :expanded="false"
-  >
-    <div class="flex items-center gap-1.5">
-      <div class="relative full-height flex items-center">
-        <input
-          v-model="_value"
-          :value="value.value"
-          :class="inputClasses"
-          type="radio"
-          :aria-checked="isActive"
-          :disabled="disabled"
-        />
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded-full
-        />
-      </div>
-
-      <div class="relative">
-        <span :class="valueClass">
-          {{ value.label }}
-        </span>
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-        />
-      </div>
-    </div>
-  </AntField>
-</template>
-
-<style scoped>
-input[type="radio"] {
-  appearance: none;
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-input[type="radio"]::before {
-  content: "";
-  width: 12px;
-  height: 12px;
-  border-radius: 100%;
-  transform: scale(0);
-  transition: 120ms transform;
-  background: currentColor;
-}
-
-input[type="radio"].small::before {
-  width: 8px;
-  height: 8px;
-}
-
-input[type="radio"]:checked::before {
-  transform: scale(1);
-}
-</style>

package/src/runtime/components/form/AntRadioWidget/AntRadioGroup.vue

@@ -1,80 +0,0 @@
-<script lang="ts" setup>
-import AntRadio from './AntRadio.vue';
-import { useVModel } from '@vueuse/core';
-import { AntField } from '../Elements';
-import { type AntRadioType } from './__types/AntRadio.type';
-import { InputColorType, Size } from '../../../enums';
-import { FieldValidator } from '@antify/validate';
-import { computed, type Ref, watch } from 'vue';
-import { Direction } from '../../../enums/Direction.enum';
-
-defineOptions({ inheritAttrs: false });
-
-const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | null;
-    radioButtons: AntRadioType[];
-    label?: string;
-    description?: string;
-    direction?: Direction;
-    colorType?: InputColorType;
-    size?: Size;
-    skeleton?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    validator?: FieldValidator;
-  }>(), {
-    direction: Direction.column,
-    colorType: InputColorType.base,
-    size: Size.md,
-    skeleton: false,
-    disabled: false,
-    readonly: false
-  });
-
-const _value = useVModel(props, 'modelValue', emits);
-const _colorType: Ref<InputColorType | undefined> = computed(() => props.validator?.hasErrors() ? InputColorType.danger : undefined);
-const containerClasses = computed(() => {
-  const classes = {
-    'flex gap-2.5 justify-start': true,
-    'flex-row': props.direction === Direction.row,
-    'flex-col': props.direction === Direction.column,
-  };
-
-  return classes;
-})
-
-watch(_value, () => {
-  props.validator?.validate(_value.value);
-}, {
-  deep: true
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :description="description"
-    :color-type="colorType"
-    :skeleton="skeleton"
-    :validator="validator"
-    :size="size"
-    label-for="noop"
-  >
-    <div
-      :class="containerClasses"
-    >
-      <AntRadio
-        v-model="_value"
-        v-for="(radio, index) in radioButtons"
-        :key="`radio-button-widget_${radio.value}-${index}`"
-        :value="radio"
-        :skeleton="skeleton"
-        :disabled="disabled || radio.disabled"
-        :readonly="readonly || radio.readonly"
-        :color-type="_colorType || radio.colorType || colorType"
-      />
-    </div>
-  </AntField>
-</template>

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

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import AntField from './Elements/AntField.vue';
-import {FieldValidator} from '@antify/validate';
-import {useVModel} from '@vueuse/core';
-import {computed, onMounted} from 'vue';
-import {InputColorType, Size} from '../../enums';
-import {handleEnumValidation} from '../../handler';
-
-defineOptions({ inheritAttrs: false });
-
-const emits = defineEmits(['update:modelValue', 'update:skeleton'])
-const props = withDefaults(defineProps<{
-  modelValue: number | number[] | undefined;
-  label?: string;
-  description?: string;
-  colorType?: InputColorType;
-  size?: Size,
-  disabled?: boolean;
-  skeleton?: boolean;
-  validator?: FieldValidator;
-  min?: number;
-  max?: number;
-}>(), {
-  colorType: InputColorType.base,
-  size: Size.md,
-  disabled: false,
-  skeleton: false,
-  limiter: false
-});
-
-const value = useVModel(props, 'modelValue', emits);
-const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
-const inputClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-base',
-    [InputColorType.danger]: 'text-danger-base',
-    [InputColorType.info]: 'text-info-base',
-    [InputColorType.success]: 'text-success-base',
-    [InputColorType.warning]: 'text-warning-base',
-  };
-
-  return {
-    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-neutral-300 rounded-md outline-none': true,
-    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
-    'invisible': props.skeleton,
-    [variants[_colorType.value]]: true
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
-  handleEnumValidation(props.size, Size, 'size');
-
-  props.validator?.validate(props.modelValue);
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :size="size"
-    :skeleton="skeleton"
-    :description="description"
-    :color-type="colorType"
-    :validator="validator"
-  >
-    <input
-      v-model="value"
-      :class="inputClasses"
-      type="range"
-      :disabled="disabled || skeleton"
-      :min="min"
-      :max="max"
-      v-bind="$attrs"
-    >
-  </AntField>
-</template>
-
-<style scoped>
-.ant-range-slider {
-  -webkit-appearance: none;
-}
-
-.ant-range-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  border-radius: 100%;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  background: #fff;
-  border: 1px solid #CBD5E1;
-  cursor: pointer;
-}
-
-.ant-range-slider::-moz-range-thumb {
-  width: 25px;
-  height: 25px;
-  background: #04AA6D;
-  cursor: pointer;
-}
-</style>

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

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import AntField from './Elements/AntField.vue';
-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', 'input' ]);
-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 = computed({
-  get: () => props.modelValue,
-  set: (value: boolean) => {
-    emits('update:modelValue', value)
-    emits('input', value)
-  }
-});
-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-for-white-bg-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"
-          :disabled="disabled"
-          :tabindex="readonly ? -1 : 1"
-          @click="changeValue"
-          @blur="validator?.validate(_value)"
-        >
-          <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

@@ -1,200 +0,0 @@
-<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-white text-for-white-bg-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"
-    :color-type="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
-        :color-type="_colorType as unknown as ColorType"
-        :size="size"
-        :skeleton="skeleton"
-        :readonly="readonly"
-        :disabled="disabled"
-        @click="prevOption"
-      />
-
-      <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
-        :color-type="_colorType as unknown as ColorType"
-        :size="size"
-        :skeleton="skeleton"
-        :readonly="readonly"
-        :disabled="disabled"
-        @click="nextOption"
-      />
-    </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>