@antify/ui-module 1.1.3

package/src/runtime/components/form/AntCheckboxWidget/AntCheckbox.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+import { AntField } from '../Elements';
+import { InputColorType, Size } from '../../../enums';
+import AntSkeleton from '../../AntSkeleton.vue';
+import { computed, onMounted, watch } from 'vue';
+import { handleEnumValidation } from '../../../handler';
+
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import AntIcon from '../../AntIcon.vue';
+import { IconSize } from '../../__types';
+import { FieldValidator } from '@antify/validate';
+
+const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
+const props =
+  withDefaults(
+    defineProps<{
+      modelValue: boolean;
+      valueLabel?: string;
+      label?: string;
+      description?: string;
+      colorType?: InputColorType;
+      size?: Size,
+      skeleton?: boolean;
+      disabled?: boolean;
+      readonly?: boolean;
+      validator?: FieldValidator;
+    }>(), {
+      colorType: InputColorType.base,
+      size: Size.md,
+      skeleton: false,
+      disabled: false,
+      readonly: false,
+    });
+
+const _value = useVModel(props, 'modelValue', emits);
+const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled));
+const inputClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
+    'outline outline-1 outline-offset-[-1px] outline-neutral-300 rounded': true,
+    'focus:ring-offset-0': true,
+    'invisible': props.skeleton,
+    'cursor-pointer': hasAction.value,
+    'focus:ring-2': props.size === Size.sm && hasAction.value,
+    'focus:ring-4': props.size === Size.md && hasAction.value,
+    'h-5 w-5': props.size === Size.md,
+    'h-4 w-4': props.size === Size.sm,
+    'cursor-not-allowed opacity-50': props.disabled
+  };
+
+  const focusColorVariant = {
+    [InputColorType.base]: 'text-primary-500 focus:ring-primary-100',
+    [InputColorType.danger]: 'text-danger-500 focus:ring-danger-100',
+    [InputColorType.info]: 'text-info-500 focus:ring-info-100',
+    [InputColorType.success]: 'text-success-500 focus:ring-success-100',
+    [InputColorType.warning]: 'text-warning-500 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]] = _value.value;
+
+  return classes;
+});
+
+const valueClass = computed(() => {
+  const classes = {
+    'text-sm': true,
+    'cursor-not-allowed opacity-50': props.disabled,
+  };
+
+  return classes;
+});
+
+watch(_value, () => {
+  props.validator?.validate(_value.value);
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :skeleton="skeleton"
+    :color-type="colorType"
+    :validator="validator"
+    :size="size"
+    :expanded="false"
+  >
+    <div class="flex items-center gap-1.5">
+      <div class="relative full-height flex items-center">
+        <input
+          v-model="_value"
+          :class="inputClasses"
+          type="checkbox"
+          :aria-checked="_value"
+          :disabled="disabled || readonly"
+        />
+
+        <AntIcon
+          v-if="_value"
+          :icon="faCheck"
+          class="absolute !text-neutral-50 pointer-events-none"
+          :size="size as unknown as IconSize"
+        />
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+
+      <div class="relative">
+        <span :class="valueClass">
+          {{ valueLabel }}
+        </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/form/AntCheckboxWidget/AntCheckboxGroup.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { type AntCheckboxType } from './__types/AntCheckbox';
+import { AntField } from '../Elements';
+import { useVModel } from '@vueuse/core';
+import AntCheckbox from './AntCheckbox.vue';
+import { computed, watch } from 'vue';
+import { Direction } from '../../../enums/Direction.enum';
+import { InputColorType, Size } from '../../../enums';
+import { FieldValidator } from '@antify/validate';
+
+const emits = defineEmits(['update:modelValue'])
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[];
+    checkboxes?: AntCheckboxType[];
+    label?: string;
+    description?: string;
+    direction?: Direction;
+    colorType?: InputColorType;
+    size?: Size,
+    skeleton?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    validator?: FieldValidator;
+  }>(),
+  {
+    direction: Direction.column,
+    colorType: InputColorType.base,
+    size: Size.md,
+    skeleton: false,
+    readonly: false,
+    disabled: false
+  }
+)
+
+const _value = useVModel(props, 'modelValue', emits);
+const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+const containerClasses = computed(() => {
+  const classes = {
+    'flex gap-2.5': true,
+    'flex-row': props.direction === Direction.row,
+    'flex-col': props.direction === Direction.column
+  };
+
+  return classes;
+})
+
+function updateValue(value: string) {
+  const index = _value.value.indexOf(value);
+
+  if (index === -1) {
+    _value.value.push(value);
+  } else {
+    _value.value.splice(index, 1);
+  }
+}
+
+watch(_value, () => {
+  props.validator?.validate(_value.value);
+}, {
+  deep: true,
+});
+
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :skeleton="skeleton"
+    :validator="validator"
+    :color-type="_colorType"
+    :size="size"
+    label-for="noop"
+  >
+    <div :class="containerClasses">
+      <AntCheckbox
+        v-for="(checkbox, index) in checkboxes"
+        :key="`checkbox-group-${index}`"
+        :model-value="_value.indexOf(checkbox.value) !== -1"
+        :value-label="checkbox.label"
+        :size="size"
+        :color-type="_colorType"
+        :skeleton="skeleton"
+        :disabled="disabled || checkbox.disabled"
+        :readonly="readonly || checkbox.readonly"
+        @update:model-value="updateValue(checkbox.value)"
+      />
+    </div>
+  </AntField>
+</template>

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

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import {Direction} from '../../enums/Direction.enum';
+import {computed} from 'vue';
+
+const props = withDefaults(defineProps<{
+  direction?: Direction;
+}>(), {
+  direction: Direction.column,
+});
+
+const classes = computed(() => ({
+  'flex-col space-y-2.5': props.direction === Direction.column,
+  'flex-row space-x-2.5': props.direction === Direction.row,
+}));
+</script>
+
+<template>
+  <section class="flex" :class="classes">
+    <slot/>
+  </section>
+</template>

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

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

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

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import {computed, onMounted, watch} from 'vue';
+import AntButton from '../buttons/AntButton.vue'
+import AntField from './Elements/AntField.vue'
+import AntBaseInput from './Elements/AntBaseInput.vue'
+import {Size} from '../../enums/Size.enum'
+import {faPlus, faMinus} from '@fortawesome/free-solid-svg-icons';
+import {ColorType, InputColorType} from '../../enums/ColorType.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;
+  colorType?: InputColorType;
+  disabled?: boolean;
+  skeleton?: boolean;
+  steps?: number;
+  min?: number;
+  max?: number;
+  limiter?: boolean;
+  errors?: string[];
+}>(), {
+  colorType: InputColorType.base,
+  disabled: false,
+  skeleton: false,
+  size: Size.md,
+  steps: 1,
+  limiter: false,
+  errors: []
+});
+const emit = defineEmits(['update:modelValue', 'validate']);
+const _modelValue = useVModel(props, 'modelValue', emit);
+const isPrevButtonDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+
+  if (props.min !== undefined && props.min !== null) {
+    return _modelValue.value <= props.min;
+  }
+
+  return false;
+});
+const isNextButtonDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+
+  if (props.max !== undefined && props.max !== null) {
+    return _modelValue.value >= props.max;
+  }
+
+  return false;
+});
+const hasErrors = computed(() => props.errors.length > 0);
+const buttonColorType = computed(() => {
+  if (hasErrors.value) {
+    return ColorType.danger;
+  }
+
+  return props.colorType;
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+
+watch(_modelValue, (val) => {
+  if (hasErrors.value) {
+    emit('validate', val)
+  }
+});
+
+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;
+  }
+
+  if (hasErrors.value) {
+    emit('validate', _modelValue.value)
+  }
+}
+
+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;
+  }
+
+  if (hasErrors.value) {
+    emit('validate', _modelValue.value)
+  }
+}
+function onButtonBlur() {
+  emit('validate', _modelValue.value)
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :color-type="colorType"
+    :limiter-max-value="limiter && max !== undefined ? max : undefined"
+    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? _modelValue : undefined"
+    :errors="errors"
+  >
+    <div
+      class="flex relative"
+    >
+      <AntButton
+        :icon-left="faMinus"
+        :grouped="Grouped.left"
+        :color-type="buttonColorType"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="isPrevButtonDisabled"
+        @click="subtract"
+        @blur="onButtonBlur"
+      />
+
+      <AntBaseInput
+        v-model:value.number="_modelValue"
+        :type="BaseInputType.number"
+        :grouped="Grouped.center"
+        wrapper-class="flex-grow"
+        :color-type="colorType"
+        :size="size"
+        :skeleton="skeleton"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        :placeholder="placeholder || label"
+        :show-icon="false"
+        :has-errors="hasErrors"
+        v-bind="$attrs"
+        @validate="val => $emit('validate', val)"
+      />
+
+      <AntButton
+        :icon-left="faPlus"
+        :grouped="Grouped.right"
+        :color-type="buttonColorType"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="isNextButtonDisabled"
+        @click="add"
+        @blur="onButtonBlur"
+      />
+    </div>
+  </AntField>
+</template>

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

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

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