@antify/ui-module 1.3.0 → 1.5.0

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>

package/dist/runtime/components/table/AntTable.vue

@@ -95,81 +95,98 @@ function rowClick(elem: Record<string, unknown>): void {
         :class="{'h-full': data.length === 0 && !_loading}"
       >
         <thead class="bg-neutral-100 sticky top-0 z-10">
-        <tr>
-          <slot name="headerFirstCell"/>
-
-          <template v-for="(header, index) in _headers">
-            <AntTh
-              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :key="`table-header-${header.identifier}-${index}`"
-              :header="header"
-              @sort="sortTable"
-            >
-              <template  #headerContent>
-                <slot name="headerContent" v-bind="header"/>
-              </template>
-            </AntTh>
-          </template>
-
-          <slot name="headerLastCell"></slot>
-        </tr>
+          <tr>
+            <slot name="headerFirstCell" />
+
+            <template v-for="(header, index) in _headers">
+              <AntTh
+                v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+                :key="`table-header-${header.identifier}-${index}`"
+                :header="header"
+                @sort="sortTable"
+              >
+                <template #headerContent>
+                  <slot
+                    name="headerContent"
+                    v-bind="header"
+                  />
+                </template>
+              </AntTh>
+            </template>
+
+            <slot name="headerLastCell"></slot>
+          </tr>
         </thead>
 
         <tbody class="bg-white relative">
-        <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
-        <tr
-          v-for="(elem, index) in data"
-          :key="`table-row-${elem[rowKey]}-${index}`"
-          :id="elem[rowKey] as string"
-          class="transition-all"
-          :class="{
-            'bg-primary-300 text-primary-300-font': elem === selected,
-            'bg-neutral-50 text-neutral-50-font': elem !== selected && index % 2 === 0,
-            'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
-            'cursor-pointer': selectableRows
-          }"
-        >
-          <slot name="rowFirstCell" v-bind="{ elem }"/>
-
-          <template v-for="(header, index) in _headers">
-            <AntTd
-              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :header="header"
-              :element="elem"
-              :align="header.align"
-              :key="`table-cell-${header.identifier}-${index}`"
-              @click="rowClick(elem)"
-            >
-              <template #beforeCellContent="props">
-                <slot name="beforeCellContent" v-bind="props"/>
-              </template>
-
-              <template #cellContent="props">
-                <slot name="cellContent" v-bind="props"/>
-              </template>
-
-              <template #afterCellContent="props">
-                <slot name="afterCellContent" v-bind="props"/>
-              </template>
-            </AntTd>
-          </template>
-
-          <slot name="rowLastCell" v-bind="{ elem }"/>
-        </tr>
-
-        <tr v-if="data.length <= 0 && !_loading">
-          <td
-            colspan="100"
-            class="w-full h-full py-2 text-center text-neutral-50-font text-lg"
+          <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
+          <tr
+            v-for="(elem, index) in data"
+            :id="elem[rowKey] as string"
+            :key="`table-row-${elem[rowKey]}-${index}`"
+            class="transition-all"
+            :class="{
+              'bg-primary-300 text-primary-300-font': elem === selected,
+              'bg-white text-for-white-bg-font': elem !== selected && index % 2 === 0,
+              'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
+              'cursor-pointer': selectableRows
+            }"
           >
-            <slot name="emptyState">
-              <div class="flex items-center flex-col">
-                <span class="font-semibold">We couldn't find any entry</span>
-              </div>
-            </slot>
-          </td>
-        </tr>
-
+            <slot
+              name="rowFirstCell"
+              v-bind="{ elem }"
+            />
+
+            <template v-for="(header, index) in _headers">
+              <AntTd
+                v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+                :key="`table-cell-${header.identifier}-${index}`"
+                :header="header"
+                :element="elem"
+                :align="header.align"
+                @click="rowClick(elem)"
+              >
+                <template #beforeCellContent="props">
+                  <slot
+                    name="beforeCellContent"
+                    v-bind="props"
+                  />
+                </template>
+
+                <template #cellContent="props">
+                  <slot
+                    name="cellContent"
+                    v-bind="props"
+                  />
+                </template>
+
+                <template #afterCellContent="props">
+                  <slot
+                    name="afterCellContent"
+                    v-bind="props"
+                  />
+                </template>
+              </AntTd>
+            </template>
+
+            <slot
+              name="rowLastCell"
+              v-bind="{ elem }"
+            />
+          </tr>
+
+          <tr v-if="data.length <= 0 && !_loading">
+            <td
+              colspan="100"
+              class="w-full h-full py-2 text-center text-for-white-bg-font text-lg"
+            >
+              <slot name="emptyState">
+                <div class="flex items-center flex-col">
+                  <span class="font-semibold">We couldn't find any entry</span>
+                </div>
+              </slot>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -178,7 +195,10 @@ function rowClick(elem: Record<string, unknown>): void {
       v-if="data.length > 0 && _loading"
       class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-neutral-300 flex items-center justify-center"
     >
-      <AntSpinner class="!w-24 !h-24" :color-type="ColorType.primary"/>
+      <AntSpinner
+        class="!w-24 !h-24"
+        :color-type="ColorType.primary"
+      />
     </div>
 
     <div
@@ -186,7 +206,9 @@ function rowClick(elem: Record<string, unknown>): void {
       class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-neutral-300 flex items-center justify-center"
     >
       <AntSkeleton
-        v-model="_loading" absolute/>
+        v-model="_loading"
+        absolute
+      />
     </div>
   </div>
 </template>

package/dist/runtime/components/table/AntTableSortButton.vue

@@ -16,11 +16,23 @@ withDefaults(
 
 <template>
   <button
-    class="bg-neutral-50 text-neutral-50-font rounded h-[26px] w-[26px] flex items-center justify-center"
+    class="bg-white text-for-white-bg-font rounded h-[26px] w-[26px] flex items-center justify-center"
     @click="$emit('sortClick')"
   >
-    <AntIcon v-if="sortDirection === AntTableSortDirection.asc" :icon="faAngleDown" :size="IconSize.sm"/>
-    <AntIcon v-if="sortDirection === AntTableSortDirection.desc" :icon="faAngleUp" :size="IconSize.sm"/>
-    <AntIcon v-if="sortDirection === AntTableSortDirection.neutral" :icon="faMinus" :size="IconSize.sm"/>
+    <AntIcon
+      v-if="sortDirection === AntTableSortDirection.asc"
+      :icon="faAngleDown"
+      :size="IconSize.sm"
+    />
+    <AntIcon
+      v-if="sortDirection === AntTableSortDirection.desc"
+      :icon="faAngleUp"
+      :size="IconSize.sm"
+    />
+    <AntIcon
+      v-if="sortDirection === AntTableSortDirection.neutral"
+      :icon="faMinus"
+      :size="IconSize.sm"
+    />
   </button>
 </template>

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

@@ -52,13 +52,13 @@ const containerClasses = computed(() => {
     [ColorType.danger]: 'text-danger-500 border-danger-500',
   };
   const notActiveVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'text-neutral-50-font border-neutral-50',
+    [ColorType.base]: 'text-for-white-bg-font border-white',
     [ColorType.warning]: 'text-warning-500',
     [ColorType.danger]: 'text-danger-500',
   };
 
   return {
-    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-neutral-50 transition-[background-color] relative': true,
+    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-white transition-[background-color] relative': true,
     'grow': props.expanded,
     [variants[props.colorType]]: true,
     [activeVariants[props.colorType]]: _active.value,
@@ -98,7 +98,7 @@ const iconColor = computed(() => {
       <AntIcon
         v-if="icon"
         :icon="icon"
-        :color="_active ? 'text-primary-500' : 'text-neutral-50-font'"
+        :color="_active ? 'text-primary-500' : 'text-for-white-bg-font'"
       />
     </slot>
 
@@ -110,6 +110,9 @@ const iconColor = computed(() => {
       :color="iconColor"
     />
 
-    <div v-if="_active" :class="borderBoxClasses" />
+    <div
+      v-if="_active"
+      :class="borderBoxClasses"
+    />
   </component>
 </template>

package/dist/runtime/tailwind.config.mjs

@@ -82,7 +82,7 @@ const colors = {
   "danger-950": defaultColors.red["950"]
 };
 const fontColors = {
-  "for-white-bg-font": colors["neutral-900"],
+  "for-white-bg-font": colors["neutral-600"],
   "for-black-bg-font": colors["neutral-100"],
   "neutral-50-font": colors["neutral-600"],
   "neutral-100-font": colors["neutral-600"],

package/dist/runtime/utils.d.ts

@@ -1,3 +1,4 @@
+import type { Slot } from 'vue';
 /**
  * Convert html class syntax given as undefined, string ("text-base bg-primary-500") or
  * object syntax ({"text-base bg-primary-500": true}) always to object syntax ({"text-base bg-primary-500": true}).
@@ -12,3 +13,8 @@ export declare function classesToObjectSyntax(classes: string | undefined | Reco
  * @param className
  */
 export declare function enumToPlainText(value: object, className: string): string;
+/**
+ * Detect if the given vue template slot exists and has content.
+ * To get a slot in your component, call $slots['slotName'] or useSlots()['slotName'].
+ */
+export declare function hasSlotContent(slot: Slot<any> | undefined): boolean;

package/dist/runtime/utils.mjs

@@ -1,3 +1,4 @@
+import { Fragment } from "vue";
 export function classesToObjectSyntax(classes) {
   if (typeof classes === "object") {
     return classes;
@@ -18,3 +19,23 @@ export function enumToPlainText(value, className) {
   });
   return text + "}";
 }
+export function hasSlotContent(slot) {
+  if (!slot) {
+    return false;
+  }
+  const isVnodeEmpty = (vnodes) => {
+    return vnodes.every((node) => {
+      if (node.type === Comment) {
+        return true;
+      }
+      if (node.type === Text && typeof node.children === "string" && !node.children.trim()) {
+        return true;
+      }
+      if (node.type === Fragment && isVnodeEmpty(node.children)) {
+        return true;
+      }
+      return false;
+    });
+  };
+  return !isVnodeEmpty(slot());
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.5.0",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/runtime/components/AntAccordionItem.vue

@@ -24,21 +24,24 @@ function onClick() {
 
 <template>
   <div
-      class="p-2.5 select-none cursor-pointer transition-colors"
-      :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-neutral-50 text-neutral-50-font': !isOpen}"
-      @click="onClick"
+    class="p-2.5 select-none cursor-pointer transition-colors"
+    :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
+    @click="onClick"
   >
-    <slot name="label" v-bind="{ isOpen: isOpen }">
+    <slot
+      name="label"
+      v-bind="{ isOpen: isOpen }"
+    >
       <div
-          class="hover:text-gray-800 flex justify-between items-center"
+        class="hover:text-gray-800 flex justify-between items-center"
       >
         <span class="text-sm font-semibold">
           {{ label }}
         </span>
 
         <AntIcon
-            :icon="isOpen ? faAngleUp : faAngleDown"
-            :color="isOpen ? 'text-primary-500-font' : undefined"
+          :icon="isOpen ? faAngleUp : faAngleDown"
+          :color="isOpen ? 'text-primary-500-font' : undefined"
         />
       </div>
     </slot>
@@ -46,17 +49,17 @@ function onClick() {
 
   <AntTransitionCollapseHeight>
     <div
-        v-show="isOpen"
-        class="bg-white overflow-hidden -mt-px"
+      v-show="isOpen"
+      class="bg-white overflow-hidden -mt-px"
     >
-      <transition name="bounce">
+      <Transition name="bounce">
         <div
-            v-show="isOpen"
-            class="p-2.5 bg-neutral-50"
+          v-show="isOpen"
+          class="p-2.5 bg-white"
         >
-          <slot/>
+          <slot />
         </div>
-      </transition>
+      </Transition>
     </div>
   </AntTransitionCollapseHeight>
 </template>

package/src/runtime/components/AntDropdown.vue

@@ -52,25 +52,25 @@ function onClickOutside() {
 
 <template>
   <div
+    v-on-click-outside="onClickOutside"
     class="relative inline-flex justify-center items-end z-40"
     data-e2e="dropdown"
-    v-on-click-outside="onClickOutside"
   >
-    <slot/>
+    <slot />
 
-    <transition name="bounce">
+    <Transition name="bounce">
       <div
         v-if="showDropdown"
         :class="_dropdownClasses"
       >
         <div
-          class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-neutral-50 text-neutral-50-font w-full"
+          class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-white text-for-white-bg-font w-full"
           :class="{'p-2.5': contentPadding}"
         >
-          <slot name="content"/>
+          <slot name="content" />
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 

package/src/runtime/components/AntListGroupItem.vue

@@ -21,7 +21,7 @@ const classes = computed(() => {
     [ListGroupItemColorType.info]: 'bg-info-500 text-info-500-font',
     [ListGroupItemColorType.neutral700]: 'bg-neutral-700 text-neutral-700-font',
     [ListGroupItemColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
-    [ListGroupItemColorType.neutral50]: 'bg-neutral-50 text-neutral-50-font',
+    [ListGroupItemColorType.neutral50]: 'bg-white text-for-white-bg-font',
     [ListGroupItemColorType.primary]: 'bg-primary-500 text-primary-500-font',
     [ListGroupItemColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
     [ListGroupItemColorType.success]: 'bg-success-500 text-success-500-font',
@@ -39,7 +39,7 @@ const contentWrapperClasses = computed(() => {
    [ListGroupItemColorType.info]: 'text-info-500-font',
    [ListGroupItemColorType.neutral700]: 'text-neutral-700-font',
    [ListGroupItemColorType.neutral300]: 'text-neutral-300-font',
-   [ListGroupItemColorType.neutral50]: 'text-neutral-50-font',
+   [ListGroupItemColorType.neutral50]: 'text-for-white-bg-font',
    [ListGroupItemColorType.primary]: 'text-primary-500-font',
    [ListGroupItemColorType.secondary]: 'text-secondary-500-font',
    [ListGroupItemColorType.success]: 'text-success-500-font',
@@ -60,21 +60,27 @@ onMounted(() => {
 
 <template>
   <component
-      :is="to !== undefined ? 'router-link' : 'div'"
-      :to="to"
-      :class="classes"
+    :is="to !== undefined ? 'router-link' : 'div'"
+    :to="to"
+    :class="classes"
   >
     <div :class="contentWrapperClasses">
       <div class="flex items-center gap-2.5">
-        <slot v-if="iconLeft" name="icon-left">
-          <AntIcon :icon="iconLeft"/>
+        <slot
+          v-if="iconLeft"
+          name="icon-left"
+        >
+          <AntIcon :icon="iconLeft" />
         </slot>
 
-        <slot/>
+        <slot />
       </div>
 
-      <slot v-if="iconRight" name="icon-right">
-        <AntIcon :icon="iconRight"/>
+      <slot
+        v-if="iconRight"
+        name="icon-right"
+      >
+        <AntIcon :icon="iconRight" />
       </slot>
     </div>
   </component>