@antify/ui-module 1.6.0 → 1.7.2

package/src/runtime/components/tabs/AntTabItem.vue

@@ -7,28 +7,28 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {computed} from 'vue';
 import {type RouteLocationRaw, useRoute} from 'vue-router';
-import {ColorType} from './__types/AntTabItem.types';
+import {TabItemState} from './__types/AntTabItem.types';
 
 const props = withDefaults(defineProps<{
   label: string;
   active: boolean;
-  colorType?: ColorType
+  state?: TabItemState
   showIcon?: boolean;
   icon?: IconDefinition;
   to?: RouteLocationRaw;
   expanded?: boolean;
 }>(), {
-  colorType: ColorType.base,
+  state: TabItemState.base,
   showIcon: true,
 });
 const route = useRoute();
 
 const icons = {
-  [ColorType.base]: null,
-  [ColorType.danger]: faExclamationCircle,
-  [ColorType.warning]: faExclamationTriangle,
+  [TabItemState.base]: null,
+  [TabItemState.danger]: faExclamationCircle,
+  [TabItemState.warning]: faExclamationTriangle,
 };
-const iconRight = computed<IconDefinition | null>(() => icons[props.colorType]);
+const iconRight = computed<IconDefinition | null>(() => icons[props.state]);
 const _active = computed<boolean>(() => {
   if (typeof props.to === 'string') {
     return route.path === props.to;
@@ -41,50 +41,50 @@ const _active = computed<boolean>(() => {
   return props.active;
 });
 const containerClasses = computed(() => {
-  const variants: Record<ColorType, string> = {
-    [ColorType.base]: 'hover:bg-neutral-100',
-    [ColorType.warning]: 'hover:bg-warning-100',
-    [ColorType.danger]: 'hover:bg-danger-100',
+  const variants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'hover:bg-neutral-100',
+    [TabItemState.warning]: 'hover:bg-warning-100',
+    [TabItemState.danger]: 'hover:bg-danger-100',
   };
-  const activeVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'text-primary-500 border-primary-500',
-    [ColorType.warning]: 'text-warning-500 border-warning-500',
-    [ColorType.danger]: 'text-danger-500 border-danger-500',
+  const activeVariants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'text-primary-500 border-primary-500',
+    [TabItemState.warning]: 'text-warning-500 border-warning-500',
+    [TabItemState.danger]: 'text-danger-500 border-danger-500',
   };
-  const notActiveVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'text-for-white-bg-font border-white',
-    [ColorType.warning]: 'text-warning-500',
-    [ColorType.danger]: 'text-danger-500',
+  const notActiveVariants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'text-for-white-bg-font border-white',
+    [TabItemState.warning]: 'text-warning-500',
+    [TabItemState.danger]: 'text-danger-500',
   };
 
   return {
-    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-white transition-[background-color] relative': true,
+    'p-2 hover:cursor-pointer text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
     'grow': props.expanded,
-    [variants[props.colorType]]: true,
-    [activeVariants[props.colorType]]: _active.value,
-    [notActiveVariants[props.colorType]]: !_active.value,
-  }
+    [variants[props.state]]: true,
+    [activeVariants[props.state]]: _active.value,
+    [notActiveVariants[props.state]]: !_active.value,
+  };
 });
 const borderBoxClasses = computed(() => {
-  const variants: Record<ColorType, string> = {
-    [ColorType.base]: 'bg-primary-500',
-    [ColorType.warning]: 'bg-warning-500',
-    [ColorType.danger]: 'bg-danger-500',
+  const variants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'bg-primary-500',
+    [TabItemState.warning]: 'bg-warning-500',
+    [TabItemState.danger]: 'bg-danger-500',
   };
 
   return {
     'h-[2px] w-full bg-danger-500 absolute bottom-0': true,
-    [variants[props.colorType]]: true,
-  }
+    [variants[props.state]]: true,
+  };
 });
 const iconColor = computed(() => {
   const variants = {
-    [ColorType.base]: 'text-neutral-100-font',
-    [ColorType.warning]: 'text-warning-500',
-    [ColorType.danger]: 'text-danger-500',
+    [TabItemState.base]: 'text-neutral-100-font',
+    [TabItemState.warning]: 'text-warning-500',
+    [TabItemState.danger]: 'text-danger-500',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 </script>
 

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

@@ -1,144 +0,0 @@
-<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-white 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;-moz-appearance:none;appearance:none;position:relative}input[type=checkbox]:before{background:currentColor;border-radius:inherit;content:"";height:100%;position:absolute;transform:scale(0);transition:transform .12s;width:100%}input[type=checkbox]:checked:before{transform:scale(1)}
-</style>

package/dist/runtime/components/form/AntCheckboxWidget/AntCheckboxGroup.vue

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