@antify/ui-module 1.7.1 → 1.7.3

package/dist/module.d.mts

@@ -129,10 +129,6 @@ type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
-declare enum AntCheckboxSize {
-    md = "md",
-    sm = "sm"
-}
 
 declare enum AntDateInputTypes {
     date = "date",
@@ -142,10 +138,6 @@ declare enum AntDateInputTypes {
     week = "week"
 }
 
-declare enum AntRadioSize {
-    md = "md",
-    sm = "sm"
-}
 type AntRadioTypes = {
     value: string;
     label?: string;
@@ -160,11 +152,6 @@ type SelectOption = {
     value: string | number;
 };
 
-declare enum AntSwitchSize {
-    md = "md",
-    sm = "sm"
-}
-
 type SwitcherOption = {
     label: string;
     value: string | number;
@@ -266,4 +253,4 @@ declare enum TabItemState {
 type ModuleOptions = {};
 declare const module: NuxtModule<ModuleOptions>;
 
-export { AntCheckboxSize, type AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, type AntRadioTypes, AntSpinnerSize, AntSwitchSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };
+export { type AntCheckboxType, AntDateInputTypes, AntKeycapSize, type AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };

package/dist/module.d.ts

@@ -129,10 +129,6 @@ type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
-declare enum AntCheckboxSize {
-    md = "md",
-    sm = "sm"
-}
 
 declare enum AntDateInputTypes {
     date = "date",
@@ -142,10 +138,6 @@ declare enum AntDateInputTypes {
     week = "week"
 }
 
-declare enum AntRadioSize {
-    md = "md",
-    sm = "sm"
-}
 type AntRadioTypes = {
     value: string;
     label?: string;
@@ -160,11 +152,6 @@ type SelectOption = {
     value: string | number;
 };
 
-declare enum AntSwitchSize {
-    md = "md",
-    sm = "sm"
-}
-
 type SwitcherOption = {
     label: string;
     value: string | number;
@@ -266,4 +253,4 @@ declare enum TabItemState {
 type ModuleOptions = {};
 declare const module: NuxtModule<ModuleOptions>;
 
-export { AntCheckboxSize, type AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, type AntRadioTypes, AntSpinnerSize, AntSwitchSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };
+export { type AntCheckboxType, AntDateInputTypes, AntKeycapSize, type AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -333,12 +333,6 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   return ButtonType2;
 })(ButtonType || {});
 
-var AntCheckboxSize = /* @__PURE__ */ ((AntCheckboxSize2) => {
-  AntCheckboxSize2["md"] = "md";
-  AntCheckboxSize2["sm"] = "sm";
-  return AntCheckboxSize2;
-})(AntCheckboxSize || {});
-
 var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
   AntDateInputTypes2["date"] = "date";
   AntDateInputTypes2["datetimeLocal"] = "datetime-local";
@@ -348,18 +342,6 @@ var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
   return AntDateInputTypes2;
 })(AntDateInputTypes || {});
 
-var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
-  AntRadioSize2["md"] = "md";
-  AntRadioSize2["sm"] = "sm";
-  return AntRadioSize2;
-})(AntRadioSize || {});
-
-var AntSwitchSize = /* @__PURE__ */ ((AntSwitchSize2) => {
-  AntSwitchSize2["md"] = "md";
-  AntSwitchSize2["sm"] = "sm";
-  return AntSwitchSize2;
-})(AntSwitchSize || {});
-
 var AntTagInputSize = /* @__PURE__ */ ((AntTagInputSize2) => {
   AntTagInputSize2["lg"] = "lg";
   AntTagInputSize2["md"] = "md";
@@ -453,4 +435,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { AntCheckboxSize, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntSpinnerSize, AntSwitchSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, Position, Size, State, TabItemState, TagState, TextInputType, module as default };
+export { AntDateInputTypes, AntKeycapSize, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, Position, Size, State, TabItemState, TagState, TextInputType, module as default };

package/dist/runtime/components/AntTooltip.vue

@@ -6,104 +6,110 @@ import {classesToObjectSyntax} from '../utils';
 import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
-	position?: Position
-	tooltipClasses?: string | Record<string, boolean>
-	state?: InputState
-	expanded?: boolean
-	delay?: number
+  position?: Position
+  tooltipClasses?: string | Record<string, boolean>
+  state?: InputState
+  expanded?: boolean
+  delay?: number
 }>(), {
-	position: Position.left,
-	tooltipClasses: '',
-	state: InputState.base,
-	expanded: false,
-	delay: 800
+  position: Position.left,
+  tooltipClasses: '',
+  state: InputState.base,
+  expanded: false,
+  delay: 800
 });
 const visible = ref(false);
 const _tooltipClasses = computed(() => ({
-	'absolute w-max inline-flex': true,
-	// Position
-	'bottom-full pb-3.5': props.position === Position.top,
-	'top-full pt-3.5': props.position === Position.bottom,
-	'right-full pr-3.5': props.position === Position.left,
-	'left-full pl-3.5': props.position === Position.right,
-	...classesToObjectSyntax(props.tooltipClasses)
+  'absolute w-max inline-flex': true,
+  // Position
+  'bottom-full pb-3.5': props.position === Position.top,
+  'top-full pt-3.5': props.position === Position.bottom,
+  'right-full pr-3.5': props.position === Position.left,
+  'left-full pl-3.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.tooltipClasses)
 }));
 const classes = computed(() => ({
-	'z-10 absolute flex': true,
-	'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
-	'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
-	'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
-	'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
+  'z-10 absolute flex': true,
+  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
+  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
+  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
+  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
 }));
 const itemContainerClasses = computed(() => ({
-	'relative flex items-center': true,
-	'justify-center': props.position === Position.bottom,
-	'justify-center rotate-180': props.position === Position.top,
-	'justify-center -rotate-90': props.position === Position.right,
-	'justify-center rotate-90': props.position === Position.left,
+  'relative flex items-center': true,
+  'justify-center': props.position === Position.bottom,
+  'justify-center rotate-180': props.position === Position.top,
+  'justify-center -rotate-90': props.position === Position.right,
+  'justify-center rotate-90': props.position === Position.left,
 }));
 const contentClasses = computed(() => {
-	const variants: Record<InputState, string> = {
-		[InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
-		[InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-		[InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
-		[InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
-		[InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-	};
-
-	return {[variants[props.state]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
+    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
+    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const svgPathClasses = computed(() => {
-	const variants: Record<InputState, string> = {
-		[InputState.base]: 'fill-white stroke-white',
-		[InputState.danger]: 'fill-danger-500 stroke-danger-500',
-		[InputState.info]: 'fill-info-500 stroke-info-500',
-		[InputState.success]: 'fill-success-500 stroke-success-500',
-		[InputState.warning]: 'fill-warning-500 stroke-warning-500',
-	};
-
-	return {[variants[props.state]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'fill-white stroke-white',
+    [InputState.danger]: 'fill-danger-500 stroke-danger-500',
+    [InputState.info]: 'fill-info-500 stroke-info-500',
+    [InputState.success]: 'fill-success-500 stroke-success-500',
+    [InputState.warning]: 'fill-warning-500 stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const arrowSvgPathClasses = computed(() => {
-	const variants: Record<InputState, string> = {
-		[InputState.base]: 'stroke-neutral-300',
-		[InputState.danger]: 'stroke-danger-500',
-		[InputState.info]: 'stroke-info-500',
-		[InputState.success]: 'stroke-success-500',
-		[InputState.warning]: 'stroke-warning-500',
-	};
-
-	return {[variants[props.state]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'stroke-neutral-300',
+    [InputState.danger]: 'stroke-danger-500',
+    [InputState.info]: 'stroke-info-500',
+    [InputState.success]: 'stroke-success-500',
+    [InputState.warning]: 'stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const timeout = ref<number | undefined>();
 const clickLock = ref(false);
 const uuid = ref(getCurrentInstance()?.uid);
 
 onMounted(() => {
-	handleEnumValidation(props.position, Position, 'Position');
-	handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.position, Position, 'position');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 
 function onMouseOver() {
-	if (visible.value || clickLock.value) {
-		return;
-	}
+  if (visible.value || clickLock.value) {
+    return;
+  }
 
-	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
+  /**
+   * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
+   * we clear the timeout before setting a new one.
+   */
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
 }
 
 function onMouseLeave() {
-	clearTimeout(timeout.value);
+  clearTimeout(timeout.value);
 
-	visible.value = false;
-	clickLock.value = false;
+  visible.value = false;
+  clickLock.value = false;
 }
 
 function onClick() {
-	clearTimeout(timeout.value);
+  clearTimeout(timeout.value);
 
-	visible.value = false;
-	clickLock.value = true;
+  visible.value = false;
+  clickLock.value = true;
 }
 </script>
 

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

@@ -8,4 +8,9 @@ export declare const Docs: Story;
  * Make sure, no tooltip get shown if no content is provided.
  */
 export declare const WithoutContent: Story;
+/**
+ * Test multiple tooltips in one page to make sure that
+ * each tooltips delay does not bug with others.
+ */
+export declare const Multiple: Story;
 export declare const Summary: Story;

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

@@ -100,6 +100,30 @@ export const WithoutContent = {
   },
   args: {}
 };
+export const Multiple = {
+  render: (args) => ({
+    components: { AntTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-12 flex flex-col justify-center items-center gap-1">
+        <div class="flex gap-1">
+          <div
+            v-for="row in 5"
+            class="flex flex-col gap-1"
+          >
+            <AntTooltip v-for="item of 5">
+              <div class="box">Hover me</div>
+
+              <template #content>Lorem</template>
+            </AntTooltip>
+          </div>
+        </div>
+      </div>
+		`
+  })
+};
 export const Summary = {
   render: (args) => ({
     components: {

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

@@ -11,25 +11,27 @@ import {hasSlotContent} from '../../utils';
 
 defineEmits(['click', 'blur']);
 const props = withDefaults(
-	defineProps<{
-		iconLeft?: IconDefinition;
-		iconRight?: IconDefinition;
-		size?: Size;
-		disabled?: boolean;
-		grouped?: Grouped;
-		state?: State;
-		skeleton?: boolean;
-		expanded?: boolean;
-		filled?: boolean;
-		hasPermission?: boolean;
-		tooltipPosition?: Position;
-		tooltipState?: InputState;
-		tooltipDelay?: number;
-	}>(), {
-		state: State.primary,
-		hasPermission: true,
-		filled: true
-	}
+  defineProps<{
+    iconLeft?: IconDefinition;
+    iconRight?: IconDefinition;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    state?: State;
+    skeleton?: boolean;
+    expanded?: boolean;
+    filled?: boolean;
+    hasPermission?: boolean;
+    tooltipPosition?: Position;
+    tooltipState?: InputState;
+    tooltipDelay?: number;
+    submit?: boolean;
+  }>(), {
+    state: State.primary,
+    hasPermission: true,
+    filled: true,
+    submit: false
+  }
 );
 const slots = useSlots();
 const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
@@ -50,6 +52,7 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     :tooltip-position="tooltipPosition"
     :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
     :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
+    :submit="submit"
     data-e2e="action-button"
     @click="$emit('click')"
     @blur="$emit('blur')"

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

@@ -5,23 +5,23 @@ import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
-	iconVariant?: boolean;
-	size?: Size;
-	disabled?: boolean;
-	grouped?: Grouped;
-	skeleton?: boolean;
-	expanded?: boolean;
-	canSave?: boolean;
-	tooltipPosition?: Position;
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canSave?: boolean;
+  tooltipPosition?: Position;
 }>(), {
-	iconVariant: false,
-	canSave: true
+  iconVariant: false,
+  canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
-    :filled="false"
+    :filled="true"
     :state="State.primary"
     :size="size"
     :disabled="disabled"
@@ -30,6 +30,7 @@ withDefaults(defineProps<{
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
+    :submit="true"
     :has-permission="canSave"
     :tooltip-position="tooltipPosition"
     data-e2e="save-and-new-button"

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

@@ -5,17 +5,17 @@ import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
-	iconVariant?: boolean;
-	size?: Size;
-	disabled?: boolean;
-	grouped?: Grouped;
-	skeleton?: boolean;
-	expanded?: boolean;
-	canSave?: boolean;
-	tooltipPosition?: Position;
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canSave?: boolean;
+  tooltipPosition?: Position;
 }>(), {
-	iconVariant: false,
-	canSave: true
+  iconVariant: false,
+  canSave: true
 });
 </script>
 
@@ -29,6 +29,7 @@ withDefaults(defineProps<{
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
+    :submit="true"
     :has-permission="canSave"
     :tooltip-position="tooltipPosition"
     data-e2e="save-button"

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

@@ -25,6 +25,9 @@ const meta = {
     tooltipState: {
       control: { type: "select" },
       options: Object.values(InputState)
+    },
+    submit: {
+      description: 'Change the button type to type="submit"'
     }
   }
 };
@@ -35,11 +38,12 @@ export const Docs = {
     setup() {
       return { args };
     },
-    template: `<AntActionButton v-bind="args">
-			<template #default>Action Button</template>
-			<template #tooltipContent>This is an action button</template>
-			<template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
-		</AntActionButton>`
+    template: `
+      <AntActionButton v-bind="args">
+        <template #default>Action Button</template>
+        <template #tooltipContent>This is an action button</template>
+        <template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
+      </AntActionButton>`
   }),
   args: {
     tooltipPosition: Position.right

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

@@ -25,7 +25,7 @@ withDefaults(defineProps<{
       <slot name="buttons-left">
         <AntButton
           :outlined="false"
-          :filled="true"
+          :filled="false"
           :icon-left="faAngleLeft"
           :disabled="disabled"
           @click="$emit('back')"

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

@@ -13,9 +13,14 @@ withDefaults(defineProps<{
 	deleteButtonDisabled?: boolean
 	getEntityName: () => string
 	canDelete?: boolean
+  showDeleteButton?: boolean
+  skeleton?: boolean
 }>(), {
+  tabItems: () => [],
 	deleteButtonDisabled: false,
-	canDelete: true
+	canDelete: true,
+  showDeleteButton: true,
+  skeleton: false
 });
 
 const dialogOpen = ref(false);
@@ -23,7 +28,7 @@ const dialogOpen = ref(false);
 
 <template>
   <div
-    class="flex justify-between items-stretch gap-2 bg-white"
+    class="flex justify-between items-stretch gap-2 bg-white h-[52px]"
     data-e2e="crud-detail-nav"
   >
     <slot name="tabs">
@@ -37,7 +42,9 @@ const dialogOpen = ref(false);
         <slot name="before-delete-button" />
 
         <AntDeleteButton
+          v-if="showDeleteButton"
           :disabled="deleteButtonDisabled || !canDelete"
+          :skeleton="skeleton"
           filled
           :can-delete="canDelete"
           :invalid-permission-tooltip-position="Position.left"

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

@@ -101,7 +101,7 @@ function confirmDialog() {
             </slot>
           </div>
 
-          <div class="bg-white p-2 grow flex items-center gap-2 text-sm text-for-white-bg-font">
+          <div class="bg-white p-2 grow flex items-start gap-2 text-sm text-for-white-bg-font">
             <slot name="icon">
               <AntIcon
                 v-if="icons[state]"

package/dist/runtime/components/forms/AntField.vue

@@ -41,16 +41,29 @@ const fontSize = computed(() => {
 
   return Size.sm;
 });
+const fieldClasses = computed(() => ({
+  'w-full': props.expanded,
+  'gap-2.5': props.size === Size.lg,
+  'gap-2': props.size === Size.md,
+  'gap-1.5': (props.size === Size.sm || props.size === Size.xs),
+  'gap-1': props.size === Size.xs2,
+}));
+const descriptionClasses = computed(() => ({
+  'gap-2.5': props.size === Size.lg,
+  'gap-2': props.size === Size.md,
+  'gap-1.5': (props.size === Size.sm || props.size === Size.xs),
+  'gap-1': props.size === Size.xs2,
+}));
 </script>
 
 <template>
   <div
-    class="flex flex-col items-start gap-1.5"
-    :class="{'w-full': expanded}"
+    class="flex flex-col items-start"
+    :class="fieldClasses"
   >
     <AntInputLabel
       :label="label"
-      :size="fontSize"
+      :size="size"
       :skeleton="skeleton"
       :for="labelFor"
       @click-content="$emit('clickLabel')"
@@ -63,6 +76,7 @@ const fontSize = computed(() => {
     <div
       v-if="description || messages.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
       class="flex justify-between w-full"
+      :class="descriptionClasses"
     >
       <AntInputDescription
         v-if="description || messages.length > 0"