@antify/ui-module 1.5.0 → 1.6.0

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui-module",
   "configKey": "uiModule",
-  "version": "1.5.0"
+  "version": "1.6.0"
 }

package/dist/runtime/components/AntAlert.vue

@@ -18,17 +18,19 @@ import {IconSize} from './__types';
 defineEmits(['close']);
 
 const props = withDefaults(defineProps<{
-  title: string,
+  title?: string | null,
   colorType?: InputColorType,
   icon?: boolean,
   expanded?: boolean,
-  questionMarkText?: string,
+  questionMarkText?: string | null,
   skeleton?: boolean,
   dismissBtn?: boolean,
 }>(), {
+	title: null,
   colorType: InputColorType.base,
   icon: true,
   expanded: false,
+	questionMarkText: null,
   skeleton: false,
   dismissBtn: true,
 });
@@ -81,9 +83,14 @@ onMounted(() => {
     :class="classes"
     data-e2e="alert"
   >
-    <AntSkeleton v-if="skeleton" absolute rounded/>
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
 
     <div
+      v-if="icon || hasQuestionMark || dismissBtn || title"
       class="inline-flex items-center justify-between w-content gap-2.5"
       :class="{'invisible': skeleton}"
     >
@@ -95,7 +102,9 @@ onMounted(() => {
           :size="IconSize.sm"
         />
 
-        <div :class="{'font-semibold': hasDefaultSlot}">
+        <div
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
           <slot name="title">
             {{ title }}
           </slot>
@@ -131,7 +140,7 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>

package/dist/runtime/components/AntContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+	padding?: boolean
+}>(), {
+	padding: true
+})
+</script>
+
+<template>
+  <div
+    :class="{ 'p-2.5': padding }"
+    class="bg-white overflow-auto"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/AntPagination.vue

@@ -162,7 +162,11 @@ const pagination = computed(() => {
     class="inline-flex relative"
     data-e2e="pagination"
   >
-    <AntSkeleton v-if="skeleton" rounded absolute/>
+    <AntSkeleton
+      v-if="skeleton"
+      rounded
+      absolute
+    />
 
     <div
       class="inline-flex gap-px"
@@ -177,14 +181,15 @@ const pagination = computed(() => {
       />
 
       <AntButton
-        v-for="(pageObj, index) in pagination"
+        v-for="(pageObj) in pagination"
+        :key="`pagination-button-${pageObj}`"
         :color-type="pageObj === page ? ColorType.primary : ColorType.base"
         :class="{'text-primary-500 z-10': pageObj === page}"
         :disabled="pageObj === '...'"
         :grouped="Grouped.center"
         :filled="pageObj !== page"
+        :readonly="pageObj === page"
         @click="() => page = pageObj"
-        v-bind:key="`pagination-button-${index}`"
       >
         {{ pageObj }}
       </AntButton>

package/dist/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(() => ({
@@ -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/dist/runtime/components/__stories/AntAlert.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntAlert>;
 export default meta;
 type Story = StoryObj<typeof AntAlert>;
 export declare const Docs: Story;
+export declare const WithOutTitle: Story;
 export declare const WithContent: Story;
 export declare const WithoutContent: Story;
 export declare const WithQuestionIcon: Story;

package/dist/runtime/components/__stories/AntAlert.stories.mjs

@@ -22,21 +22,27 @@ export const Docs = {
       return { args, logClick };
     },
     template: `
-      <div class="p-4">
-        <AntAlert v-bind="args" @close="logClick">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
-          sed diam nonumy eirmod tempor invidunt <br/>
-          ut labore et dolore magna aliquyam erat, <br/>
-          sed diam voluptua. At vero eos et accusam et <br/>
-          justo duo dolores et ea rebum. Stet clita kasd
-        </AntAlert>
-      </div>
+			<AntAlert v-bind="args" @close="logClick">
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+				sed diam nonumy eirmod tempor invidunt <br/>
+				ut labore et dolore magna aliquyam erat, <br/>
+				sed diam voluptua. At vero eos et accusam et <br/>
+				justo duo dolores et ea rebum. Stet clita kasd
+			</AntAlert>
     `
   }),
   args: {
     title: "Lorem ipsum dolor"
   }
 };
+export const WithOutTitle = {
+  render: Docs.render,
+  args: {
+    title: "",
+    dismissBtn: false,
+    icon: false
+  }
+};
 export const WithContent = {
   render: Docs.render,
   args: {

package/dist/runtime/components/__stories/AntContent.stories.d.ts

@@ -0,0 +1,6 @@
+import AntContent from '../AntContent.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntContent>;
+export default meta;
+type Story = StoryObj<typeof AntContent>;
+export declare const Docs: Story;

package/dist/runtime/components/__stories/AntContent.stories.mjs

@@ -0,0 +1,26 @@
+import AntContent from "../AntContent.vue";
+const meta = {
+  title: "Components/Content",
+  component: AntContent,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntContent },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="outline outline-neutral-300">
+				<AntContent v-bind="args" class="h-40">
+					<div class="slot h-60">SLOT</div>
+				</AntContent>
+			</div>`
+  }),
+  args: {}
+};

package/dist/runtime/components/__stories/AntTooltip.stories.d.ts

@@ -8,4 +8,4 @@ export declare const Docs: Story;
  * Make sure, no tooltip get shown if no content is provided.
  */
 export declare const WithoutContent: Story;
-export declare const Expanded: Story;
+export declare const Summary: Story;

package/dist/runtime/components/__stories/AntTooltip.stories.mjs

@@ -1,11 +1,15 @@
 import AntTooltip from "../AntTooltip.vue";
-import AntButton from "../buttons/AntButton.vue";
+import AntFormGroup from "../form/AntFormGroup.vue";
+import AntFormGroupLabel from "../form/AntFormGroupLabel.vue";
 import { Position } from "../../enums/Position.enum.mjs";
 import { InputColorType } from "../../enums/index.mjs";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
 const meta = {
   title: "Components/Tooltip",
   component: AntTooltip,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: { sort: "requiredFirst" }
+  },
   argTypes: {
     position: {
       control: { type: "select" },
@@ -20,46 +24,194 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntTooltip, AntButton },
+    components: { AntTooltip },
     setup() {
       return { args };
     },
     template: `
 			<div class="p-32 flex justify-center items-center">
 				<AntTooltip v-bind="args">
-					<template #content>Lorem ipsum dolor sit amet <br/> foo</template>
+					<template #content>Lorem ipsum dolor sit <br/>amet</template>
 					<template #default>
-						<AntButton readonly filled expanded>Hover me</AntButton>
+						<div class="box">Hover me</div>
 					</template>
 				</AntTooltip>
 			</div>
 		`
   }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const target = canvas.getByText("Hover me");
+    function queryTooltip() {
+      return canvas.queryByText("Lorem ipsum dolor sit amet");
+    }
+    await step("Hover over the target and expect showing the tooltip", async () => {
+      await userEvent.hover(target);
+      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
+    });
+    await step("Leave hover state and expect not showing the tooltip anymore", async () => {
+      await userEvent.unhover(target);
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+    await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
+      await userEvent.hover(target);
+      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
+      await userEvent.click(target);
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+    await step("Hover over the target, click it while delay and expect not showing the tooltip", async () => {
+      await userEvent.hover(target);
+      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 200 });
+      await userEvent.click(target);
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+  },
   args: {
+    delay: 600,
     position: Position.top
   }
 };
 export const WithoutContent = {
   render: (args) => ({
-    components: { AntTooltip, AntButton },
+    components: { AntTooltip },
     setup() {
       return { args };
     },
     template: `
 			<div class="p-32 flex justify-center items-center">
 				<AntTooltip v-bind="args">
-					<AntButton readonly filled expanded>Hover me</AntButton>
+					<div class="box">Hover me</div>
 
 					<template #content></template>
 				</AntTooltip>
 			</div>
-    `
+		`
   }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step("Hover over the target and expect not showing the tooltip", async () => {
+      await userEvent.hover(canvas.getByText("Hover me"));
+      await waitFor(() => expect(
+        canvas.queryByText(
+          "Lorem ipsum dolor sit amet"
+        )
+      ).not.toBeInTheDocument());
+    });
+  },
   args: {}
 };
-export const Expanded = {
-  render: Docs.render,
-  args: {
-    expanded: true
+export const Summary = {
+  render: (args) => ({
+    components: {
+      AntTooltip,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      return { args, Position, InputColorType };
+    },
+    template: `
+			<AntFormGroup>
+				<AntFormGroupLabel>Position</AntFormGroupLabel>
+				<AntFormGroup direction="row" class="gap-x-32 py-16 dashed">
+					<AntTooltip :position="Position.top">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.right">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.left">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+
+				<AntFormGroupLabel>Color type</AntFormGroupLabel>
+				<AntFormGroup direction="row" class="pb-16 dashed">
+					<AntTooltip :position="Position.bottom" :color-type="InputColorType.base">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :color-type="InputColorType.info">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :color-type="InputColorType.success">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :color-type="InputColorType.warning">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :color-type="InputColorType.danger">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+
+				<AntFormGroupLabel>Expanded</AntFormGroupLabel>
+				<AntFormGroup class="p-32 dashed gap-y-16">
+					<AntTooltip :position="Position.top" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.right" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.left" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+			</AntFormGroup>
+		`
+  }),
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step("Hover over the targets and expect showing the tooltips", async () => {
+      const targets = canvas.getAllByText("Hover me");
+      await Promise.all(targets.map(async (target) => {
+        await userEvent.hover(target);
+      }));
+      await waitFor(() => expect(canvas.queryAllByText("Lorem")).toHaveLength(targets.length));
+    });
   }
 };

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

@@ -3,16 +3,14 @@
  * 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;
@@ -24,45 +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
-        :icon-left="iconLeft"
-        :icon-right="iconRight"
-        :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>