@antify/ui-module 1.4.0 → 1.5.0

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

@@ -90,11 +90,15 @@ watch(() => props.fullWidth, (val) => {
     >
       <div
         v-if="_fullWidth"
-        class="flex gap-2 items-center text-neutral-50-font text-sm"
+        class="flex gap-2 items-center text-for-white-bg-font text-sm"
         data-e2e="items-per-page"
       >
         <span class="relative">
-          <AntSkeleton v-if="skeleton" rounded absolute/>
+          <AntSkeleton
+            v-if="skeleton"
+            rounded
+            absolute
+          />
           Items per page
         </span>
 
@@ -105,8 +109,15 @@ watch(() => props.fullWidth, (val) => {
           :expanded="false"
         />
 
-        <div v-if="count !== null" class="flex gap-1 relative">
-          <AntSkeleton v-if="skeleton" rounded absolute/>
+        <div
+          v-if="count !== null"
+          class="flex gap-1 relative"
+        >
+          <AntSkeleton
+            v-if="skeleton"
+            rounded
+            absolute
+          />
 
           <span class="font-medium">{{ fromItems }} - {{ itemsPerPage * page }}</span>
           <span>of</span>

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

@@ -80,14 +80,14 @@ function confirmDialog() {
 </script>
 
 <template>
-  <transition name="fade">
+  <Transition name="fade">
     <div
       v-if="openBackground"
       class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden bg-black/50 backdrop-blur-sm"
       data-e2e="dialog"
       @click.self="closeDialog"
     >
-      <transition :name="'bounce'">
+      <Transition :name="'bounce'">
         <div
           v-if="openDialog"
           class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto w-96 border border-neutral-300 rounded-md shadow-md"
@@ -101,7 +101,7 @@ function confirmDialog() {
             </slot>
           </div>
 
-          <div class="bg-neutral-50 p-2.5 grow flex items-center gap-2.5 text-sm">
+          <div class="bg-white p-2.5 grow flex items-center gap-2.5 text-sm">
             <slot name="icon">
               <AntIcon
                 v-if="icons[colorType]"
@@ -112,11 +112,11 @@ function confirmDialog() {
               />
             </slot>
 
-            <slot/>
+            <slot />
           </div>
 
           <div
-            class="bg-neutral-100 p-2.5 gap-2.5 text-neutral-50-font flex w-full justify-end"
+            class="bg-neutral-100 p-2.5 gap-2.5 text-for-white-bg-font flex w-full justify-end"
           >
             <slot name="footer">
               <AntButton
@@ -137,9 +137,9 @@ function confirmDialog() {
             </slot>
           </div>
         </div>
-      </transition>
+      </Transition>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style scoped>

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

@@ -113,7 +113,7 @@ onMounted(() => {
         <AntIcon
           v-if="_value"
           :icon="faCheck"
-          class="absolute !text-neutral-50 pointer-events-none"
+          class="absolute !text-white pointer-events-none"
           :size="size as unknown as IconSize"
         />
 
@@ -137,7 +137,6 @@ onMounted(() => {
       </div>
     </div>
   </AntField>
-
 </template>
 
 <style scoped>

package/dist/runtime/components/form/AntSelect.vue

@@ -70,7 +70,7 @@ const _modelValue = computed({
 const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
 const inputClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 bg-neutral-50 focus:ring-primary/25',
+    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 bg-white focus:ring-primary/25',
     [InputColorType.success]: 'outline-success-500 focus:outline-success-500 bg-success-100 focus:ring-success/25',
     [InputColorType.info]: 'outline-info-500 focus:outline-info-500 bg-info-100 focus:ring-info/25',
     [InputColorType.warning]: 'outline-warning-500 focus:outline-warning-500 bg-warning-100 focus:ring-warning/25',
@@ -117,7 +117,7 @@ const placeholderClasses = computed(() => {
 });
 const inputValueClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-50-font',
+    [InputColorType.base]: 'text-for-white-bg-font',
     [InputColorType.success]: 'text-success-100-font',
     [InputColorType.info]: 'text-info-100-font',
     [InputColorType.warning]: 'text-warning-100-font',
@@ -130,7 +130,7 @@ const inputValueClasses = computed(() => {
 });
 const arrowClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-50-font',
+    [InputColorType.base]: 'text-for-white-bg-font',
     [InputColorType.success]: 'text-success-100-font',
     [InputColorType.info]: 'text-info-100-font',
     [InputColorType.warning]: 'text-warning-100-font',
@@ -196,103 +196,107 @@ function onClickRemoveButton() {
 
 <template>
   <AntField
-      :label="label"
-      :size="size"
-      :skeleton="skeleton"
-      :description="description"
-      :color-type="colorType"
-      :validator="validator"
-      :class="wrapperClass"
-      :show-message-on-error="showMessageOnError"
-      :expanded="expanded"
-      label-for="noop"
-      data-e2e="select"
-      @clickLabel="() => inputRef?.focus()"
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :color-type="colorType"
+    :validator="validator"
+    :class="wrapperClass"
+    :show-message-on-error="showMessageOnError"
+    :expanded="expanded"
+    label-for="noop"
+    data-e2e="select"
+    @click-label="() => inputRef?.focus()"
   >
     <div
-        class="h-fit flex flex-row w-full"
+      class="h-fit flex flex-row w-full"
     >
       <div
-          class="relative w-full"
-          :class="{'cursor-pointer': !skeleton}"
-          v-on-click-outside="onClickOutside"
+        v-on-click-outside="onClickOutside"
+        class="relative w-full"
+        :class="{'cursor-pointer': !skeleton}"
       >
         <AntSkeleton
-            v-if="skeleton"
-            absolute
-            rounded
-            :grouped="skeletonGrouped"
+          v-if="skeleton"
+          absolute
+          rounded
+          :grouped="skeletonGrouped"
         />
 
-        <input type="hidden" :name="name" v-model="_modelValue">
+        <input
+          v-model="_modelValue"
+          type="hidden"
+          :name="name"
+        >
 
         <!-- Input -->
         <div
-            :class="inputClasses"
-            ref="inputRef"
-            :tabindex="disabled ? undefined : 0"
-            @mousedown="onClickSelectInput"
-            v-bind="$attrs"
-            @click="inputRef?.focus()"
+          ref="inputRef"
+          :class="inputClasses"
+          :tabindex="disabled ? undefined : 0"
+          v-bind="$attrs"
+          @mousedown="onClickSelectInput"
+          @click="inputRef?.focus()"
         >
           <div
-              v-if="_modelValue === null && placeholder !== undefined"
-              :class="placeholderClasses"
+            v-if="_modelValue === null && placeholder !== undefined"
+            :class="placeholderClasses"
           >
             {{ placeholder }}
           </div>
 
           <div
-              v-else-if="_modelValue === null && label !== undefined"
-              :class="placeholderClasses"
+            v-else-if="_modelValue === null && label !== undefined"
+            :class="placeholderClasses"
           >
             {{ label }}
           </div>
 
           <div
-              v-else
-              :class="inputValueClasses"
+            v-else
+            :class="inputValueClasses"
           >
             {{ valueLabel }}
           </div>
 
           <AntIcon
-              v-if="isOpen"
-              :icon="faChevronUp"
-              :size="size as unknown as IconSize"
-              :class="arrowClasses"
+            v-if="isOpen"
+            :icon="faChevronUp"
+            :size="size as unknown as IconSize"
+            :class="arrowClasses"
           />
 
           <AntIcon
-              v-else
-              :icon="faChevronDown"
-              :size="size as unknown as IconSize"
-              :class="arrowClasses"
+            v-else
+            :icon="faChevronDown"
+            :size="size as unknown as IconSize"
+            :class="arrowClasses"
           />
         </div>
 
         <!-- Dropdown -->
         <AntDropDown
+          ref="dropDownRef"
           v-model="_modelValue"
           v-model:open="isOpen"
-          ref="dropDownRef"
           :options="options"
           :input-ref="inputRef"
           :size="size"
           :color-type="_colorType"
-          @select-element="(e) => _modelValue = e"
           close-on-enter
+          @select-element="(e) => _modelValue = e"
         />
       </div>
 
       <AntButton
-          v-if="nullable && _modelValue !== null"
-          :icon-left="faMultiply"
-          :color-type="_colorType as unknown as ColorType"
-          :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
-          :size="size"
-          :skeleton="skeleton"
-          @click="onClickRemoveButton"
+        v-if="nullable && _modelValue !== null"
+        :icon-left="faMultiply"
+        :color-type="_colorType as unknown as ColorType"
+        :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
+        :size="size"
+        :skeleton="skeleton"
+        @click="onClickRemoveButton"
       />
     </div>
   </AntField>

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

@@ -82,7 +82,7 @@ const ballClasses = computed(() => ({
 
 const valueClasses = computed(() => {
   const classes = {
-    'text-neutral-50-font': true,
+    '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
@@ -115,17 +115,17 @@ function changeValue() {
           :class="buttonClasses"
           role="switch"
           :aria-checked="_value"
-          @click="changeValue"
-          @blur="validator?.validate(_value)"
           :disabled="disabled"
           :tabindex="readonly ? -1 : 1"
+          @click="changeValue"
+          @blur="validator?.validate(_value)"
         >
-        <span
-          aria-hidden="true"
-          :class="ballClasses"
-        >
-          <slot name="icon"></slot>
-        </span>
+          <span
+            aria-hidden="true"
+            :class="ballClasses"
+          >
+            <slot name="icon"></slot>
+          </span>
         </button>
 
         <AntSkeleton
@@ -135,7 +135,10 @@ function changeValue() {
         ></AntSkeleton>
       </div>
 
-      <div v-if="value" class="relative">
+      <div
+        v-if="value"
+        class="relative"
+      >
         <span :class="valueClasses">{{ value }}</span>
 
         <AntSkeleton

package/dist/runtime/components/form/AntSwitcher.vue

@@ -79,7 +79,7 @@ const itemClasses = computed(() => {
   };
 
   const colorVariant = {
-    [InputColorType.base]: 'border-neutral-300 bg-neutral-50 text-neutral-50-font',
+    [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',
@@ -126,7 +126,7 @@ function nextOption() {
     :size="size"
     :skeleton="skeleton"
     :description="description"
-    :colorType="colorType"
+    :color-type="colorType"
     :validator="validator"
     label-for="noop"
   >
@@ -140,12 +140,12 @@ function nextOption() {
         :icon-left="faChevronLeft"
         :grouped="Grouped.left"
         no-focus
-        @click="prevOption"
         :color-type="_colorType as unknown as ColorType"
         :size="size"
         :skeleton="skeleton"
         :readonly="readonly"
         :disabled="disabled"
+        @click="prevOption"
       />
 
       <div class="grow relative">
@@ -168,12 +168,12 @@ function nextOption() {
         :icon-left="faChevronRight"
         :grouped="Grouped.right"
         no-focus
-        @click="nextOption"
         :color-type="_colorType as unknown as ColorType"
         :size="size"
         :skeleton="skeleton"
         :readonly="readonly"
         :disabled="disabled"
+        @click="nextOption"
       />
     </div>
   </AntField>

package/dist/runtime/components/form/AntTextarea.vue

@@ -55,7 +55,7 @@ const icons = {
 };
 const inputClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-neutral-50 placeholder:text-neutral-500',
+    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-white placeholder:text-neutral-500',
     [InputColorType.danger]: 'outline-danger-500 focus:outline-danger-500 focus:ring-danger/25 bg-danger-100 placeholder:text-danger-700',
     [InputColorType.info]: 'outline-info-500 focus:outline-info-500 focus:ring-info/25 bg-info-100 placeholder:text-info-700',
     [InputColorType.success]: 'outline-success-500 focus:outline-success-500 focus:ring-success/25 bg-success-100 placeholder:text-success-700',
@@ -132,12 +132,15 @@ function onBlur(e: FocusEvent) {
     :size="size"
     :skeleton="skeleton"
     :description="description"
-    :colorType="colorType"
+    :color-type="colorType"
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
     :limiter-value="limiter ? _modelValue.length : undefined"
     :errors="errors"
   >
-    <div class="block relative w-full" :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}">
+    <div
+      class="block relative w-full"
+      :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
+    >
       <textarea
         v-model="_modelValue"
         :class="inputClasses"

package/dist/runtime/components/form/Elements/AntBaseInput.vue

@@ -58,7 +58,7 @@ const icons = {
 
 const inputClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-neutral-50 placeholder:text-neutral-500',
+    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-white placeholder:text-neutral-500',
     [InputColorType.danger]: 'outline-danger-500 focus:outline-danger-500 focus:ring-danger/25 bg-danger-100 placeholder:text-danger-700',
     [InputColorType.info]: 'outline-info-500 focus:outline-info-500 focus:ring-info/25 bg-info-100 placeholder:text-info-700',
     [InputColorType.success]: 'outline-success-500 focus:outline-success-500 focus:ring-success/25 bg-success-100 placeholder:text-success-700',
@@ -66,7 +66,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'transition-colors relative border-none outline w-full focus:z-10': true,
+    'transition-colors relative border-none outline w-full focus:z-10 text-black': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     'text-right': props.type === BaseInputType.number,
@@ -90,21 +90,17 @@ const inputClasses = computed(() => {
 });
 const iconClasses = computed(() => ({
   'transition-[height]': true,
-  'h-4': props.size === Size.sm,
-  'h-5': props.size === Size.md,
 }));
-const iconColorClasses = computed(() => {
+const iconColorClass = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-500',
+    [InputColorType.base]: 'text-for-white-bg-font',
     [InputColorType.danger]: 'text-danger-500',
     [InputColorType.info]: 'text-info-500',
     [InputColorType.success]: 'text-success-500',
     [InputColorType.warning]: 'text-warning-500',
   };
 
-  return {
-    [variants[_colorType.value]]: true,
-  };
+  return variants[_colorType.value];
 });
 const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
 const icon = computed(() => icons[_colorType.value]);
@@ -156,57 +152,65 @@ function onBlur(e: FocusEvent) {
 </script>
 
 <template>
-  <div class="block relative w-full" :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}">
+  <div
+    class="block relative w-full"
+    :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
+  >
     <div
-        v-if="iconLeft"
-        class="absolute h-full flex items-center justify-center z-20"
-        :class="{'w-7': size === Size.sm, 'w-10': size === Size.md}"
+      v-if="iconLeft"
+      class="absolute h-full flex items-center justify-center z-20"
+      :class="{'w-7': size === Size.sm, 'w-10': size === Size.md}"
     >
       <AntIcon
-          :icon="iconLeft"
-          :size="size as unknown as IconSize"
-          color="text-neutral-50-font"
+        :icon="iconLeft"
+        :size="size as unknown as IconSize"
+        color="text-for-white-bg-font"
       />
     </div>
 
     <input
-        v-model="_value"
-        :class="inputClasses"
-        :type="type"
-        :placeholder="placeholder"
-        :disabled="disabled || skeleton"
-        @blur="onBlur"
-        v-bind="$attrs"
+      v-model="_value"
+      :class="inputClasses"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled || skeleton"
+      v-bind="$attrs"
+      @blur="onBlur"
     >
 
     <div
-        v-if="nullable && _value !== null && _value !== ''"
-        class="absolute flex w-fit right-0 top-0 h-full transition-all z-20"
-        :class="{'p-1.5': size === Size.sm, 'p-2.5': size === Size.md}"
+      v-if="nullable && _value !== null && _value !== ''"
+      class="absolute flex w-fit right-0 top-0 h-full transition-all z-20"
+      :class="{'p-1.5': size === Size.sm, 'p-2.5': size === Size.md}"
     >
-      <!-- TODO:: Replace with AntIcon -->
-      <fa-icon
-          :icon="faXmark"
-          :class="iconClasses"
-          class="text-neutral-500-font cursor-pointer"
-          @click="() => _value = null"
+      <AntIcon
+        :icon="faXmark"
+        :class="iconClasses"
+        class="cursor-pointer"
+        :color="iconColorClass"
+        :size="size as unknown as IconSize"
+        @click="() => _value = null"
       />
     </div>
 
     <div
-        v-else-if="showIcon && icon"
-        class="absolute flex w-fit right-0 top-0 h-full transition-all z-20"
-        :class="{'p-1.5': size === Size.sm, 'p-2.5': size === Size.md}"
+      v-else-if="showIcon && icon"
+      class="absolute flex w-fit right-0 top-0 h-full transition-all z-20"
+      :class="{'p-1.5': size === Size.sm, 'p-2.5': size === Size.md}"
     >
-      <!-- TODO:: Replace with AntIcon -->
-      <fa-icon :icon="icon" :class="{...iconClasses, ...iconColorClasses}"/>
+      <AntIcon
+        :icon="icon"
+        :color="iconColorClass"
+        :class="iconClasses"
+        :size="size as unknown as IconSize"
+      />
     </div>
 
     <AntSkeleton
-        v-if="skeleton"
-        absolute
-        :grouped="grouped"
-        rounded
+      v-if="skeleton"
+      absolute
+      :grouped="grouped"
+      rounded
     />
   </div>
 </template>

package/dist/runtime/components/form/Elements/AntDropDown.vue

@@ -56,7 +56,7 @@ const dropdownClasses = computed(() => {
 });
 const dropDownItemClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-neutral-50 text-neutral-50-font',
+    [InputColorType.base]: 'bg-white text-for-white-bg-font',
     [InputColorType.success]: 'bg-success-100 border-success-100-font',
     [InputColorType.info]: 'bg-info-100 border-info-100-font',
     [InputColorType.warning]: 'bg-warning-100 border-warning-100-font',

package/dist/runtime/components/layouts/AntNavLeftLayout.vue

@@ -16,12 +16,12 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
   <div class="flex gap-px bg-neutral-300 h-screen overflow-hidden">
     <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
       <component
-        v-if="hasLogoImageSlot"
         :is="logoRoute ? 'RouterLink' : 'div'"
+        v-if="hasLogoImageSlot"
         :to="logoRoute"
-        class="bg-neutral-50 min-h-[60px] flex justify-center items-center p-2.5"
+        class="bg-white min-h-[60px] flex justify-center items-center p-2.5"
       >
-        <slot name="logo-image"/>
+        <slot name="logo-image" />
       </component>
 
       <AntNavbar
@@ -30,7 +30,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
     </div>
 
     <div class="flex-grow">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>