@antify/ui-module 1.5.0 → 1.5.1

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.mjs

@@ -1,7 +1,5 @@
 import AntSaveAndNewButton from "../AntSaveAndNewButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Save And New Button",
   component: AntSaveAndNewButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntSaveAndNewButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

package/dist/runtime/components/buttons/__stories/AntSaveButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSaveButton>;
 export default meta;
 type Story = StoryObj<typeof AntSaveButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;

package/dist/runtime/components/buttons/__stories/AntSaveButton.stories.mjs

@@ -1,7 +1,5 @@
 import AntSaveButton from "../AntSaveButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Save Button",
   component: AntSaveButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntSaveButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

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

@@ -1,21 +1,36 @@
 <script lang="ts" setup>
 import {Direction} from '../../enums/Direction.enum';
-import {computed} from 'vue';
+import {computed, useAttrs} from 'vue';
 
+const attrs = useAttrs();
 const props = withDefaults(defineProps<{
   direction?: Direction;
 }>(), {
   direction: Direction.column,
 });
 
-const classes = computed(() => ({
-  'flex-col space-y-2.5': props.direction === Direction.column,
-  'flex-row space-x-2.5': props.direction === Direction.row,
-}));
+const classes = computed(() => {
+	// Let override gap-x-* and gap-y-* classes from outside
+	const attrClasses = typeof attrs.class === 'string' ? attrs.class : ''
+	const hasGapX = /gap-x-\d/.test(attrClasses);
+	const hasGapY = /gap-y-\d/.test(attrClasses);
+
+	const classes: Record<string, boolean> = {
+		'flex-col': props.direction === Direction.column,
+		'gap-y-2.5': !hasGapY && props.direction === Direction.column,
+		'flex-row': props.direction === Direction.row,
+		'gap-x-2.5': !hasGapX && props.direction === Direction.row,
+	}
+
+	return classes;
+});
 </script>
 
 <template>
-  <section class="flex" :class="classes">
-    <slot/>
+  <section
+    class="flex"
+    :class="classes"
+  >
+    <slot />
   </section>
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.5.0",
+  "version": "1.5.1",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -43,15 +43,15 @@
     "@faker-js/faker": "^8.3.1",
     "@nuxt/eslint-config": "latest",
     "@nuxt/module-builder": "latest",
-    "@storybook/addon-docs": "^8.0.0-beta.5",
-    "@storybook/addon-essentials": "^8.0.0-beta.5",
-    "@storybook/addon-interactions": "^8.0.0-beta.5",
-    "@storybook/addon-links": "^8.0.0-beta.5",
-    "@storybook/addon-mdx-gfm": "^8.0.0-beta.5",
-    "@storybook/blocks": "^8.0.0-beta.5",
-    "@storybook/test": "^8.0.0-beta.5",
-    "@storybook/vue3": "^8.0.0-beta.5",
-    "@storybook/vue3-vite": "^8.0.0-beta.5",
+    "@storybook/addon-docs": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-mdx-gfm": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@storybook/vue3": "^8.0.0",
+    "@storybook/vue3-vite": "^8.0.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.16",
     "chromatic": "^11.0.0",
@@ -60,7 +60,7 @@
     "nuxt": "^3.9.3",
     "ofetch": "^1.3.3",
     "standard-version": "latest",
-    "storybook": "^8.0.0-beta.5",
+    "storybook": "^8.0.0",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
     "vite": "^5.1.4",

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(() => ({
@@ -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,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>

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

@@ -7,9 +7,10 @@ import AntSpinner from '../AntSpinner.vue';
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {handleEnumValidation} from '../../handler';
-import {ColorType} from '../../enums';
+import {ColorType, InputColorType, Position} from '../../enums';
 import {ButtonType} from './__types';
 import AntIcon from '../AntIcon.vue';
+import AntTooltip from '../AntTooltip.vue';
 import {IconSize} from '../__types/AntIcon.types';
 
 defineEmits(['click', 'blur']);
@@ -30,6 +31,9 @@ const props = withDefaults(defineProps<{
 	submit?: boolean;
 	outlined?: boolean;
 	noFocus?: boolean;
+	tooltipPosition?: Position;
+	tooltipColorType?: InputColorType;
+	tooltipDelay?: number;
 }>(), {
 	colorType: ColorType.base,
 	disabled: false,
@@ -43,6 +47,9 @@ const props = withDefaults(defineProps<{
 	submit: false,
 	outlined: true,
 	noFocus: false,
+	tooltipPosition: Position.bottom,
+	tooltipColorType: InputColorType.base,
+	tooltipDelay: 800
 });
 
 const hasAction = computed(() => (props.skeleton || props.readonly || props.disabled))
@@ -178,50 +185,63 @@ onMounted(() => {
       absolute
     />
 
-    <component
-      :is="is"
-      :class="classes"
-      :type="type"
-      :to="to"
-      :disabled="disabled || undefined"
-      :tabindex="noFocus || hasAction ? '-1' : '0'"
-      @click="() => !props.readonly ? $emit('click') : null"
-      @blur="() => !props.readonly ? $emit('blur') : null"
+    <AntTooltip
+      :expanded="expanded"
+      :position="tooltipPosition"
+      :color-type="tooltipColorType"
+      :delay="tooltipDelay"
     >
-      <AntSpinner
-        v-if="spinner"
-        :size="size"
-        :color-type="colorType"
-        :inverted="!filled"
-      />
+      <template #default>
+        <component
+          :is="is"
+          :class="classes"
+          :type="type"
+          :to="to"
+          :disabled="disabled || undefined"
+          :tabindex="noFocus || hasAction ? '-1' : '0'"
+          @click="() => !props.readonly ? $emit('click') : null"
+          @blur="() => !props.readonly ? $emit('blur') : null"
+        >
+          <AntSpinner
+            v-if="spinner"
+            :size="size"
+            :color-type="colorType"
+            :inverted="!filled"
+          />
 
-      <slot
-        v-if="!spinner"
-        name="icon-left"
-      >
-        <AntIcon
-          v-if="iconLeft"
-          :icon="iconLeft"
-          :size="size as unknown as IconSize"
-          :color="iconColor"
-        />
-      </slot>
+          <slot
+            v-if="!spinner"
+            name="icon-left"
+          >
+            <AntIcon
+              v-if="iconLeft"
+              :icon="iconLeft"
+              :size="size as unknown as IconSize"
+              :color="iconColor"
+            />
+          </slot>
 
-      <slot
-        v-if="!spinner"
-      />
+          <slot
+            v-if="!spinner"
+          />
 
-      <slot
-        v-if="!spinner"
-        name="icon-right"
-      >
-        <AntIcon
-          v-if="iconRight"
-          :icon="iconRight"
-          :size="size as unknown as IconSize"
-          :color="iconColor"
-        />
-      </slot>
-    </component>
+          <slot
+            v-if="!spinner"
+            name="icon-right"
+          >
+            <AntIcon
+              v-if="iconRight"
+              :icon="iconRight"
+              :size="size as unknown as IconSize"
+              :color="iconColor"
+            />
+          </slot>
+        </component>
+      </template>
+
+      <template #content>
+        <slot name="tooltip-content" />
+      </template>
+    </AntTooltip>
   </div>
 </template>

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

@@ -1,19 +1,20 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canCreate?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canCreate: true
 });
 </script>
@@ -21,22 +22,33 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faPlus : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :has-permission="canCreate"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
     data-e2e="create-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Create</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Create
+    </template>
 
     <template #invalidPermissionTooltipContent>
       You have no permission to create new entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Create new entry
+    </template>
   </AntActionButton>
 </template>

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

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
 import {faTrash} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -15,25 +12,25 @@ withDefaults(defineProps<{
 	skeleton?: boolean;
 	expanded?: boolean;
 	canDelete?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
 	iconVariant: false,
 	canDelete: true
-})
+});
 </script>
 
 <template>
   <AntActionButton
-    :icon-left="iconVariant ? faTrash : undefined"
     :filled="false"
+    :color-type="ColorType.danger"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faTrash : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.danger"
     :has-permission="canDelete"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
     data-e2e="delete-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
@@ -46,8 +43,12 @@ withDefaults(defineProps<{
     </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to delete this entry.<br>
+      You have no permission to delete entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Delete entry
+    </template>
   </AntActionButton>
 </template>

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

@@ -1,42 +1,54 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {ColorType, Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
 import {faCopy} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canDuplicate?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canDuplicate: true
 });
 </script>
 
 <template>
   <AntActionButton
-    :icon-left="faCopy"
+    :filled="false"
     :color-type="ColorType.base"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faCopy : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :has-permission="canDuplicate"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
-    data-e2e="create-button"
+    :tooltip-position="tooltipPosition"
+    data-e2e="duplicate-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Duplicate
+    </template>
+
     <template #invalidPermissionTooltipContent>
       You have no permission to duplicate entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Duplicate entry
+    </template>
   </AntActionButton>
 </template>