@antify/ui-module 1.6.0 → 1.7.2

package/src/runtime/components/crud/AntCrudTableNav.vue

@@ -4,14 +4,14 @@
  * TODO:: test me in storybook through vue router
  * TODO:: fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter, useRoute} from 'vue-router';
 import AntPagination from '../AntPagination.vue';
 import {computed, ref, watch} from 'vue';
-import AntSelect from '../form/AntSelect.vue';
+import AntSelect from '../inputs/AntSelect.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {type SelectOption} from '../form/__types';
+import {type SelectOption} from '../inputs/__types';
 
-const emit = defineEmits(['changeItemsPerPage', 'changePage'])
+const emit = defineEmits(['changeItemsPerPage', 'changePage']);
 const props = withDefaults(
   defineProps<{
     count: number | null,
@@ -28,47 +28,47 @@ const props = withDefaults(
     validItemsPerPage: () => [20, 50, 100, 200],
     skeleton: false
   }
-)
+);
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 const itemsPerPageOptions = computed(() =>
   props.validItemsPerPage.map(item => ({
     label: `${item}`,
     value: item
   }) as SelectOption)
-)
+);
 const page = computed(() => {
-  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
 
   if (_page <= 0 || _page > pages.value) {
-    return 1
+    return 1;
   }
 
-  return _page
-})
+  return _page;
+});
 const itemsPerPage = computed({
   get() {
     return route.query[props.itemsPerPageQuery] ?
       Number.parseInt(route.query[props.itemsPerPageQuery]) :
-      props.validItemsPerPage[0]
+      props.validItemsPerPage[0];
   },
   set(val) {
-    const query = {...route.query}
-    query[props.itemsPerPageQuery] = `${val}`
+    const query = {...route.query};
+    query[props.itemsPerPageQuery] = `${val}`;
     delete query[props.pageQuery];
 
     (async () => {
       await router.push({
         ...route,
         query
-      })
+      });
 
-      emit('changeItemsPerPage', val)
-    })()
+      emit('changeItemsPerPage', val);
+    })();
   }
-})
-const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1)
+});
+const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1);
 const toItems = computed(() => {
 	const items = itemsPerPage.value * page.value;
 
@@ -77,15 +77,15 @@ const toItems = computed(() => {
 	}
 
 	return itemsPerPage.value * page.value;
-})
-const pages = computed(() => Math.ceil(props.count / itemsPerPage.value))
-const _fullWidth = ref(props.fullWidth)
+});
+const pages = computed(() => Math.ceil(props.count / itemsPerPage.value));
+const _fullWidth = ref(props.fullWidth);
 
 watch(() => props.fullWidth, (val) => {
   setTimeout(() => {
-    _fullWidth.value = val
-  }, val ? 300 : 200)
-})
+    _fullWidth.value = val;
+  }, val ? 300 : 200);
+});
 </script>
 
 <template>
@@ -94,7 +94,7 @@ watch(() => props.fullWidth, (val) => {
     data-e2e="crud-table-nav"
   >
     <div
-      class="flex w-full items-center p-2.5"
+      class="flex w-full items-center p-2"
       :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
     >
       <div

package/src/runtime/components/dialogs/AntDeleteDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {InputColorType} from '../../enums';
+import {InputState} from '../../enums';
 import AntDialog from './AntDialog.vue';
 import {useVModel} from '@vueuse/core';
 
@@ -15,7 +15,7 @@ const _open = useVModel(props, 'open', emit);
 <template>
   <AntDialog
     v-model:open="_open"
-    :color-type="InputColorType.danger"
+    :state="InputState.danger"
     title="Delete"
     confirm-text="Delete"
     data-e2e="delete-dialog"
@@ -23,7 +23,7 @@ const _open = useVModel(props, 'open', emit);
     @close="() => $emit('close')"
   >
     <div>
-      Do you really want to delete <span class="font-semibold">{{entity}}</span>?
+      Do you really want to delete <span class="font-semibold">{{ entity }}</span>?
     </div>
   </AntDialog>
 </template>

package/src/runtime/components/dialogs/AntDialog.vue

@@ -11,7 +11,7 @@ import {
   faInfoCircle,
   type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
-import {ColorType, InputColorType} from '../../enums';
+import {State, InputState} from '../../enums';
 import {IconSize} from '../__types';
 
 const emit = defineEmits(['update:open', 'close', 'confirm']);
@@ -21,9 +21,9 @@ const props = withDefaults(defineProps<{
   confirmText?: string,
   cancelText?: string,
   showCancel?: boolean,
-  colorType?: InputColorType
+  state?: InputState
 }>(), {
-  colorType: InputColorType.base,
+  state: InputState.base,
   confirmText: 'Confirm',
   cancelText: 'Cancel',
   showCancel: true,
@@ -32,23 +32,23 @@ const props = withDefaults(defineProps<{
 const openDialog = ref(props.open);
 const openBackground = ref(props.open);
 const icons = {
-  [InputColorType.base]: null,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: null,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 
 watch(() => props.open, (val) => {
@@ -60,11 +60,11 @@ watch(() => props.open, (val) => {
 
   if (val) {
     openBackground.value = true;
-    setTimeout(() => openDialog.value = true, 100)
+    setTimeout(() => openDialog.value = true, 100);
     document.addEventListener('keydown', onKeydown);
   } else {
     openDialog.value = false;
-    setTimeout(() => openBackground.value = false, 100)
+    setTimeout(() => openBackground.value = false, 100);
     document.removeEventListener('keydown', onKeydown);
   }
 });
@@ -94,19 +94,19 @@ function confirmDialog() {
         >
           <div
             v-if="title || $slots['title']"
-            class="bg-neutral-100 p-2.5 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
+            class="bg-neutral-100 p-2 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
           >
             <slot name="title">
               {{ title }}
             </slot>
           </div>
 
-          <div class="bg-white p-2.5 grow flex items-center gap-2.5 text-sm">
+          <div class="bg-white p-2 grow flex items-center gap-2 text-sm text-for-white-bg-font">
             <slot name="icon">
               <AntIcon
-                v-if="icons[colorType]"
+                v-if="icons[state]"
                 :size="IconSize.xl3"
-                :icon="icons[colorType] as unknown as IconDefinition"
+                :icon="icons[state] as unknown as IconDefinition"
                 :color="iconColor"
                 class="px-2.5 w-8 h-8"
               />
@@ -116,19 +116,19 @@ function confirmDialog() {
           </div>
 
           <div
-            class="bg-neutral-100 p-2.5 gap-2.5 text-for-white-bg-font flex w-full justify-end"
+            class="bg-neutral-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
           >
             <slot name="footer">
               <AntButton
                 v-if="showCancel"
-                :color-type="ColorType.base"
+                :state="State.base"
                 @click="closeDialog()"
               >
                 {{ cancelText }}
               </AntButton>
 
               <AntButton
-                :color-type="colorType === ColorType.base ? ColorType.primary : colorType as unknown as ColorType"
+                :state="state === State.base ? State.primary : state as unknown as State"
                 filled
                 @click="confirmDialog()"
               >

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

@@ -0,0 +1,123 @@
+<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="fontSize"
+      :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/AntFormGroupLabel.vue

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

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

@@ -0,0 +1,202 @@
+<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';
+import {AntCheckboxSize} from './__types/AntCheckbox.types';
+
+const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
+const props =
+  withDefaults(
+    defineProps<{
+      modelValue: boolean | null;
+      label?: string;
+      description?: string;
+      state?: InputState;
+      size?: AntCheckboxSize,
+      skeleton?: boolean;
+      disabled?: boolean;
+      readonly?: boolean;
+      messages?: string[];
+    }>(), {
+      state: InputState.base,
+      size: AntCheckboxSize.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': props.size === AntCheckboxSize.sm && !hasInputState.value,
+    'focus:ring-4': props.size === AntCheckboxSize.md && !hasInputState.value,
+    'h-5 w-5': props.size === AntCheckboxSize.md,
+    'h-4 w-4': props.size === AntCheckboxSize.sm,
+    '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 === AntCheckboxSize.md,
+  'text-xs': props.size === AntCheckboxSize.sm
+}));
+const fieldSize = computed(() => {
+  if (props.size === AntCheckboxSize.md) {
+    return Size.sm;
+  }
+
+  return Size.xs;
+});
+
+/**
+ * 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, AntCheckboxSize, '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="fieldSize"
+    :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="size === AntCheckboxSize.md ? IconSize.sm : IconSize.xs"
+        />
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+
+      <div
+        class="relative flex items-center"
+        :class="props.size === AntCheckboxSize.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>