@antify/ui-module 1.4.0 → 1.5.1

package/dist/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>

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

@@ -7,160 +7,167 @@ 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']);
 
 const props = withDefaults(defineProps<{
-  filled?: boolean;
-  size?: Size;
-  colorType?: ColorType;
-  iconLeft?: IconDefinition;
-  iconRight?: IconDefinition;
-  to?: RouteLocationRaw;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  spinner?: boolean;
-  readonly?: boolean;
-  expanded?: boolean;
-  submit?: boolean;
-  outlined?: boolean;
-  noFocus?: boolean;
+	filled?: boolean;
+	size?: Size;
+	colorType?: ColorType;
+	iconLeft?: IconDefinition;
+	iconRight?: IconDefinition;
+	to?: RouteLocationRaw;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	spinner?: boolean;
+	readonly?: boolean;
+	expanded?: boolean;
+	submit?: boolean;
+	outlined?: boolean;
+	noFocus?: boolean;
+	tooltipPosition?: Position;
+	tooltipColorType?: InputColorType;
+	tooltipDelay?: number;
 }>(), {
-  colorType: ColorType.base,
-  disabled: false,
-  filled: false,
-  skeleton: false,
-  spinner: false,
-  size: Size.md,
-  grouped: Grouped.none,
-  readonly: false,
-  expanded: false,
-  submit: false,
-  outlined: true,
-  noFocus: false,
+	colorType: ColorType.base,
+	disabled: false,
+	filled: false,
+	skeleton: false,
+	spinner: false,
+	size: Size.md,
+	grouped: Grouped.none,
+	readonly: false,
+	expanded: false,
+	submit: false,
+	outlined: true,
+	noFocus: false,
+	tooltipPosition: Position.bottom,
+	tooltipColorType: InputColorType.base,
+	tooltipDelay: 800
 });
 
 const hasAction = computed(() => (props.skeleton || props.readonly || props.disabled))
 const groupedClassList = computed(() => ({
-  'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
-  'rounded-none -mx-px': props.grouped === Grouped.center,
-  'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md -ml-px': props.grouped === Grouped.right,
-  'rounded-md': props.grouped === Grouped.none,
+	'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
+	'rounded-none -mx-px': props.grouped === Grouped.center,
+	'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md -ml-px': props.grouped === Grouped.right,
+	'rounded-md': props.grouped === Grouped.none,
 }));
 const classes = computed(() => {
-  const variants = {
-    [ColorType.base]: 'ring-primary-200 outline-neutral-300',
-    [ColorType.danger]: 'ring-danger-200 outline-danger-500',
-    [ColorType.info]: 'ring-info-200 outline-info-500',
-    [ColorType.primary]: 'ring-primary-200 outline-primary-500',
-    [ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
-    [ColorType.success]: 'ring-success-200 outline-success-500',
-    [ColorType.warning]: 'ring-warning-200 outline-warning-500',
-  };
-  const notFilledVariants = {
-    [ColorType.base]: 'bg-white text-neutral-50-font',
-    [ColorType.danger]: 'bg-white text-danger-500',
-    [ColorType.info]: 'bg-white text-info-500',
-    [ColorType.primary]: 'bg-white text-primary-500',
-    [ColorType.secondary]: 'bg-white text-secondary-500',
-    [ColorType.success]: 'bg-white text-success-500',
-    [ColorType.warning]: 'bg-white text-warning-500',
-  };
-  const notFilledHoverVariants = {
-    [ColorType.base]: 'hover:bg-neutral-100',
-    [ColorType.danger]: 'hover:bg-danger-100',
-    [ColorType.info]: 'hover:bg-info-100',
-    [ColorType.primary]: 'hover:bg-primary-100',
-    [ColorType.secondary]: 'hover:bg-secondary-100',
-    [ColorType.success]: 'hover:bg-success-100',
-    [ColorType.warning]: 'hover:bg-warning-100',
-  };
-  const filledVariants = {
-    [ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
-    [ColorType.danger]: 'bg-danger-500 text-danger-500-font',
-    [ColorType.info]: 'bg-info-500 text-info-500-font',
-    [ColorType.primary]: 'bg-primary-500 text-primary-500-font',
-    [ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
-    [ColorType.success]: 'bg-success-500 text-success-500-font',
-    [ColorType.warning]: 'bg-warning-500 text-warning-500-font',
-  };
-  const filledHoverVariants = {
-    [ColorType.base]: 'hover:bg-neutral-200',
-    [ColorType.danger]: 'hover:bg-danger-600',
-    [ColorType.info]: 'hover:bg-info-600',
-    [ColorType.primary]: 'hover:bg-primary-600',
-    [ColorType.secondary]: 'hover:bg-secondary-600',
-    [ColorType.success]: 'hover:bg-success-600',
-    [ColorType.warning]: 'hover:bg-warning-600',
-  };
+	const variants = {
+		[ColorType.base]: 'ring-primary-200 outline-neutral-300',
+		[ColorType.danger]: 'ring-danger-200 outline-danger-500',
+		[ColorType.info]: 'ring-info-200 outline-info-500',
+		[ColorType.primary]: 'ring-primary-200 outline-primary-500',
+		[ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
+		[ColorType.success]: 'ring-success-200 outline-success-500',
+		[ColorType.warning]: 'ring-warning-200 outline-warning-500',
+	};
+	const notFilledVariants = {
+		[ColorType.base]: 'bg-white text-for-white-bg-font',
+		[ColorType.danger]: 'bg-white text-danger-500',
+		[ColorType.info]: 'bg-white text-info-500',
+		[ColorType.primary]: 'bg-white text-primary-500',
+		[ColorType.secondary]: 'bg-white text-secondary-500',
+		[ColorType.success]: 'bg-white text-success-500',
+		[ColorType.warning]: 'bg-white text-warning-500',
+	};
+	const notFilledHoverVariants = {
+		[ColorType.base]: 'hover:bg-neutral-100',
+		[ColorType.danger]: 'hover:bg-danger-100',
+		[ColorType.info]: 'hover:bg-info-100',
+		[ColorType.primary]: 'hover:bg-primary-100',
+		[ColorType.secondary]: 'hover:bg-secondary-100',
+		[ColorType.success]: 'hover:bg-success-100',
+		[ColorType.warning]: 'hover:bg-warning-100',
+	};
+	const filledVariants = {
+		[ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
+		[ColorType.danger]: 'bg-danger-500 text-danger-500-font',
+		[ColorType.info]: 'bg-info-500 text-info-500-font',
+		[ColorType.primary]: 'bg-primary-500 text-primary-500-font',
+		[ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
+		[ColorType.success]: 'bg-success-500 text-success-500-font',
+		[ColorType.warning]: 'bg-warning-500 text-warning-500-font',
+	};
+	const filledHoverVariants = {
+		[ColorType.base]: 'hover:bg-neutral-200',
+		[ColorType.danger]: 'hover:bg-danger-600',
+		[ColorType.info]: 'hover:bg-info-600',
+		[ColorType.primary]: 'hover:bg-primary-600',
+		[ColorType.secondary]: 'hover:bg-secondary-600',
+		[ColorType.success]: 'hover:bg-success-600',
+		[ColorType.warning]: 'hover:bg-warning-600',
+	};
 
-  return {
-    'transition-all inline-flex items-center justify-center relative font-medium': true,
-    'focus:z-10': true,
-    'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasAction.value,
-    'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
-    'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
-    'disabled:opacity-50 disabled:cursor-not-allowed': true,
-    'cursor-default': props.readonly,
-    'focus:ring-2': !props.readonly && props.size === Size.sm,
-    'focus:ring-4': !props.readonly && props.size === Size.md,
-    'w-full': props.expanded,
-    'invisible': props.skeleton,
-    'outline outline-1 outline-offset-[-1px]': props.outlined,
-    ...groupedClassList.value,
-    [variants[props.colorType]]: true,
-    [notFilledVariants[props.colorType]]: !props.filled,
-    [notFilledHoverVariants[props.colorType]]: !props.filled && !hasAction.value,
-    [filledVariants[props.colorType]]: props.filled,
-    [filledHoverVariants[props.colorType]]: props.filled && !hasAction.value,
-  };
+	return {
+		'transition-all inline-flex items-center justify-center relative font-medium': true,
+		'focus:z-10': true,
+		'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasAction.value,
+		'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
+		'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
+		'disabled:opacity-50 disabled:cursor-not-allowed': true,
+		'cursor-default': props.readonly,
+		'focus:ring-2': !props.readonly && props.size === Size.sm,
+		'focus:ring-4': !props.readonly && props.size === Size.md,
+		'w-full': props.expanded,
+		'invisible': props.skeleton,
+		'outline outline-1 outline-offset-[-1px]': props.outlined,
+		...groupedClassList.value,
+		[variants[props.colorType]]: true,
+		[notFilledVariants[props.colorType]]: !props.filled,
+		[notFilledHoverVariants[props.colorType]]: !props.filled && !hasAction.value,
+		[filledVariants[props.colorType]]: props.filled,
+		[filledHoverVariants[props.colorType]]: props.filled && !hasAction.value,
+	};
 });
 const iconColor = computed(() => {
-  const notFilledVariants = {
-    [ColorType.base]: 'text-neutral-50-font',
-    [ColorType.danger]: 'text-danger-500',
-    [ColorType.info]: 'text-info-500',
-    [ColorType.primary]: 'text-primary-500',
-    [ColorType.secondary]: 'text-secondary-500',
-    [ColorType.success]: 'text-success-500',
-    [ColorType.warning]: 'text-warning-500',
-  };
-  const filledVariants = {
-    [ColorType.base]: 'text-neutral-50-font',
-    [ColorType.danger]: 'text-danger-500-font',
-    [ColorType.info]: 'text-info-500-font',
-    [ColorType.primary]: 'text-primary-500-font',
-    [ColorType.secondary]: 'text-secondary-500-font',
-    [ColorType.success]: 'text-success-500-font',
-    [ColorType.warning]: 'text-warning-500-font',
-  };
+	const notFilledVariants = {
+		[ColorType.base]: 'text-for-white-bg-font',
+		[ColorType.danger]: 'text-danger-500',
+		[ColorType.info]: 'text-info-500',
+		[ColorType.primary]: 'text-primary-500',
+		[ColorType.secondary]: 'text-secondary-500',
+		[ColorType.success]: 'text-success-500',
+		[ColorType.warning]: 'text-warning-500',
+	};
+	const filledVariants = {
+		[ColorType.base]: 'text-for-white-bg-font',
+		[ColorType.danger]: 'text-danger-500-font',
+		[ColorType.info]: 'text-info-500-font',
+		[ColorType.primary]: 'text-primary-500-font',
+		[ColorType.secondary]: 'text-secondary-500-font',
+		[ColorType.success]: 'text-success-500-font',
+		[ColorType.warning]: 'text-warning-500-font',
+	};
 
-  return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
+	return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
 });
 const type = computed(() => {
-  if (props.to !== undefined) {
-    return undefined;
-  }
+	if (props.to !== undefined) {
+		return undefined;
+	}
 
-  return props.submit ? ButtonType.submit : ButtonType.button;
+	return props.submit ? ButtonType.submit : ButtonType.button;
 });
 const is = computed(() => {
-  if (props.readonly) {
-    return 'div';
-  }
+	if (props.readonly) {
+		return 'div';
+	}
 
-  return props.to !== undefined ? 'router-link' : 'button'
+	return props.to !== undefined ? 'router-link' : 'button'
 })
 
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, ColorType, 'colorType');
-  handleEnumValidation(props.grouped, Grouped, 'grouped');
+	handleEnumValidation(props.size, Size, 'size');
+	handleEnumValidation(props.colorType, ColorType, 'colorType');
+	handleEnumValidation(props.grouped, Grouped, 'grouped');
 });
 </script>
 
@@ -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/dist/runtime/components/buttons/AntCreateButton.vue

@@ -1,41 +1,54 @@
 <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>
 
 <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/dist/runtime/components/buttons/AntDeleteButton.vue

@@ -1,43 +1,54 @@
 <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']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canDelete?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canDelete: true
-})
+});
 </script>
 
 <template>
   <AntActionButton
+    :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')"
   >
-    <template #default>Delete</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Delete
+    </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>