@antify/ui-module 1.4.0 → 1.5.1

package/src/runtime/components/AntModal.vue

@@ -39,21 +39,22 @@ function closeModal() {
 </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"
       :class="{'bg-black/50 backdrop-blur-sm': !fullscreen}"
       @click.self="closeModal"
     >
-      <transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
+      <Transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
         <div
           v-if="openModal"
           class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto"
           :class="{'w-full h-full': fullscreen, 'border border-neutral-300 rounded-md shadow-md': !fullscreen}"
         >
           <div
-            class="bg-neutral-50 p-2.5 flex items-center justify-between text-neutral-50-font text-lg font-medium">
+            class="bg-white p-2.5 flex items-center justify-between text-for-white-bg-font text-lg font-medium"
+          >
             <slot name="title">
               {{ title }}
             </slot>
@@ -66,20 +67,20 @@ function closeModal() {
             />
           </div>
 
-          <div class="bg-neutral-50 p-2.5 grow overflow-y-auto">
-            <slot/>
+          <div class="bg-white p-2.5 grow overflow-y-auto">
+            <slot />
           </div>
 
           <div
             v-if="useSlots()['footer'] || false"
-            class="bg-neutral-50 p-2.5 text-neutral-50-font"
+            class="bg-white p-2.5 text-for-white-bg-font"
           >
-            <slot name="footer"/>
+            <slot name="footer" />
           </div>
         </div>
-      </transition>
+      </Transition>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style scoped>

package/src/runtime/components/AntPopover.vue

@@ -44,9 +44,9 @@ onMounted(() => {
 
 <template>
   <div class="relative inline-flex justify-center items-end">
-    <slot/>
+    <slot />
 
-    <transition name="bounce">
+    <Transition name="bounce">
       <template v-if="showPopover">
         <div :class="_popoverClasses">
           <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative">
@@ -66,12 +66,12 @@ onMounted(() => {
                 >
                   <path
                     d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
-                    :class="{'fill-neutral-100': position === Position.bottom, 'fill-neutral-50': position === Position.top || position === Position.right || position === Position.left}"
+                    :class="{'fill-neutral-100': position === Position.bottom, 'fill-white': position === Position.top || position === Position.right || position === Position.left}"
                   />
 
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
-                    :class="{'stroke-neutral-100': position === Position.bottom, 'stroke-neutral-50': position === Position.top || position === Position.right || position === Position.left}"
+                    :class="{'stroke-neutral-100': position === Position.bottom, 'stroke-white': position === Position.top || position === Position.right || position === Position.left}"
                   />
                 </svg>
 
@@ -92,18 +92,20 @@ onMounted(() => {
             </div>
 
             <div
-              class="border-neutral-300 border-b p-2.5 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold">
+              class="border-neutral-300 border-b p-2.5 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+            >
               {{ title }}
             </div>
 
             <div
-              class="p-2.5 rounded-b-md text-neutral-50-font border-neutral-300 border-l border-b border-r bg-neutral-50">
-              <slot name="content"/>
+              class="p-2.5 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+            >
+              <slot name="content" />
             </div>
           </div>
         </div>
       </template>
-    </transition>
+    </Transition>
   </div>
 </template>
 

package/src/runtime/components/AntTooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, getCurrentInstance} from 'vue';
 import {handleEnumValidation} from '../handler';
 import {InputColorType, Position} from '../enums';
 import {classesToObjectSyntax} from '../utils';
@@ -10,11 +10,13 @@ const props = withDefaults(defineProps<{
 	tooltipClasses?: string | Record<string, boolean>
 	colorType?: InputColorType
 	expanded?: boolean
+	delay?: number
 }>(), {
 	position: Position.left,
 	tooltipClasses: '',
 	colorType: InputColorType.base,
-	expanded: false
+	expanded: false,
+	delay: 800
 });
 const visible = ref(false);
 const _tooltipClasses = computed(() => ({
@@ -42,7 +44,7 @@ const itemContainerClasses = computed(() => ({
 }));
 const contentClasses = computed(() => {
 	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'text-neutral-50-font bg-neutral-50 border-neutral-300',
+		[InputColorType.base]: 'text-for-white-bg-font bg-white border-neutral-300',
 		[InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
 		[InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
 		[InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
@@ -53,7 +55,7 @@ const contentClasses = computed(() => {
 });
 const svgPathClasses = computed(() => {
 	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'fill-neutral-50 stroke-neutral-50',
+		[InputColorType.base]: 'fill-white stroke-white',
 		[InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
 		[InputColorType.info]: 'fill-info-500 stroke-info-500',
 		[InputColorType.success]: 'fill-success-500 stroke-success-500',
@@ -73,43 +75,53 @@ const arrowSvgPathClasses = computed(() => {
 
 	return {[variants[props.colorType]]: true};
 });
+const timeout = ref<number | undefined>();
+const clickLock = ref(false);
+const uuid = ref(getCurrentInstance()?.uid)
 
 onMounted(() => {
 	handleEnumValidation(props.position, Position, 'Position')
 	handleEnumValidation(props.colorType, InputColorType, 'colorType')
 });
 
-/**
- * To prevent a fliggering ux, add a delay on hover and leaving the hover target,
- * before showing the tooltip content.
- */
-const delayVisible = ref(visible.value);
-
 function onMouseOver() {
-	delayVisible.value = true;
+	if (visible.value || clickLock.value) {
+		return;
+	}
 
-	setTimeout(() => {
-		if (delayVisible.value) {
-			visible.value = true
-		}
-	}, 300)
+	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number
 }
 
 function onMouseLeave() {
-	delayVisible.value = false
+	clearTimeout(timeout.value)
+
 	visible.value = false
+	clickLock.value = false
+}
+
+function onClick() {
+	clearTimeout(timeout.value)
+
+	visible.value = false
+	clickLock.value = true
 }
 </script>
 
 <template>
   <div
+    :key="uuid"
     class="relative justify-center items-center"
     :class="{'flex w-full': props.expanded, 'inline-flex': !props.expanded}"
     data-e2e="tooltip"
-    @mouseover="onMouseOver"
-    @mouseleave="onMouseLeave"
+    @mouseover="() => onMouseOver()"
+    @mouseleave="() => onMouseLeave()"
   >
-    <slot />
+    <div
+      class="w-full"
+      @click="() => onClick()"
+    >
+      <slot />
+    </div>
 
     <div
       v-if="visible && hasSlotContent($slots.content)"

package/src/runtime/components/buttons/AntActionButton.vue

@@ -3,16 +3,17 @@
  * This button is used for everything what is the primary
  * action like save, confirm, create, etc.
  */
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
-import {ColorType, InputColorType} from '../../enums/ColorType.enum';
-import {Position} from '../../enums/Position.enum';
+import {Position, ColorType, InputColorType, Size, Grouped} from '../../enums';
 import AntButton from './AntButton.vue';
-import AntTooltip from '../AntTooltip.vue';
+import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, useSlots} from 'vue';
+import {hasSlotContent} from '../../utils';
 
 defineEmits(['click', 'blur']);
-withDefaults(
+const props = withDefaults(
 	defineProps<{
+		iconLeft?: IconDefinition;
+		iconRight?: IconDefinition;
 		size?: Size;
 		disabled?: boolean;
 		grouped?: Grouped;
@@ -21,43 +22,50 @@ withDefaults(
 		expanded?: boolean;
 		filled?: boolean;
 		hasPermission?: boolean;
-		invalidPermissionTooltipPosition?: Position;
+		tooltipPosition?: Position;
+		tooltipColorType?: InputColorType;
+		tooltipDelay?: number;
 	}>(), {
 		colorType: ColorType.primary,
 		hasPermission: true,
 		filled: true
 	}
 )
+const slots = useSlots();
+const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
+const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
 </script>
 
 <template>
-  <AntTooltip
+  <AntButton
+    :icon-left="iconLeft"
+    :icon-right="iconRight"
+    :size="size"
+    :disabled="disabled || !hasPermission"
+    :grouped="grouped"
+    :skeleton="skeleton"
     :expanded="expanded"
-    :position="invalidPermissionTooltipPosition"
-    :color-type="InputColorType.info"
+    :color-type="colorType"
+    :filled="filled"
+    :tooltip-position="tooltipPosition"
+    :tooltip-color-type="hasPermissionTooltip ? InputColorType.info : tooltipColorType"
+    :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
+    data-e2e="action-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
   >
-    <slot name="button">
-      <AntButton
-        :size="size"
-        :disabled="disabled || !hasPermission"
-        :grouped="grouped"
-        :skeleton="skeleton"
-        :expanded="expanded"
-        :color-type="colorType"
-        :filled="filled"
-        data-e2e="action-button"
-        @click="$emit('click')"
-        @blur="$emit('blur')"
-      >
-        <slot />
-      </AntButton>
-    </slot>
+    <slot />
 
-    <template
-      v-if="!hasPermission && !skeleton"
-      #content
-    >
-      <slot name="invalidPermissionTooltipContent" />
+    <template #tooltip-content>
+      <slot
+        v-if="hasTooltip"
+        name="tooltipContent"
+      />
+
+      <slot
+        v-if="hasPermissionTooltip"
+        name="invalidPermissionTooltipContent"
+      />
     </template>
-  </AntTooltip>
+  </AntButton>
 </template>