@antify/ui 1.0.0

package/dist/components/inputs/AntPasswordInput.vue

@@ -0,0 +1,107 @@
+<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/dist/components/inputs/AntRadio.vue

@@ -0,0 +1,214 @@
+<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/dist/components/inputs/AntRadioGroup.vue

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

package/dist/components/inputs/AntRangeSlider.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import AntField from '../forms/AntField.vue';
+import {useVModel} from '@vueuse/core';
+import {computed, onMounted, watch} from 'vue';
+import {InputState, Size} from '../../enums';
+import {handleEnumValidation} from '../../handler';
+
+defineOptions({inheritAttrs: false});
+
+const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
+const props = withDefaults(defineProps<{
+  modelValue: number | number[] | null;
+  label?: string;
+  description?: string;
+  state?: InputState;
+  size?: Size,
+  disabled?: boolean;
+  skeleton?: boolean;
+  min?: number;
+  max?: number;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  disabled: false,
+  skeleton: false,
+  limiter: false,
+  messages: () => []
+});
+const _modelValue = useVModel(props, 'modelValue', emit);
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-neutral-base',
+    [InputState.danger]: 'text-danger-base',
+    [InputState.info]: 'text-info-base',
+    [InputState.success]: 'text-success-base',
+    [InputState.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[props.state]]: true
+  };
+});
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.size, Size, 'size');
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :messages="messages"
+  >
+    <input
+      v-model.number="_modelValue"
+      :class="inputClasses"
+      type="range"
+      :disabled="disabled || skeleton"
+      :min="min"
+      :max="max"
+      v-bind="$attrs"
+      @blur="onBlur"
+    >
+  </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>