@antify/ui-module 1.6.0 → 1.7.2

package/src/runtime/components/AntToast.vue

@@ -10,57 +10,58 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntButton from './buttons/AntButton.vue';
-import {ColorType, InputColorType} from '../enums';
+import {State, InputState, Size} from '../enums';
+import {IconSize} from './__types/AntIcon.types';
 
 const props = withDefaults(defineProps<{
   title?: string,
-  colorType?: InputColorType,
+  state?: InputState,
   showUndo?: boolean,
   icon?: boolean
 }>(), {
-  colorType: InputColorType.base,
+  state: InputState.base,
   showUndo: false,
   icon: true
 });
 
 const icons = {
-  [InputColorType.base]: faInfoCircle,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
-const _icon = computed(() => icons[props.colorType]);
+const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
-    [InputColorType.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
-    [InputColorType.info]: 'bg-info-100 border-info-500 text-info-500',
-    [InputColorType.success]: 'bg-success-100 border-success-500 text-success-500',
-    [InputColorType.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
+    [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
+    [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
+    [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
+    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
   };
 
   return {
-    'inline-flex flex-col gap-2.5 rounded-md p-2.5 border transition-colors shadow-md': true,
-    [variants[props.colorType]]: true,
+    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
+    [variants[props.state]]: true,
   };
 });
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 
 onMounted(() => {
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 </script>
 
@@ -68,17 +69,21 @@ onMounted(() => {
   <div
     :class="classes"
     data-e2e="toast"
-    :data-e2e-color-type="props.colorType"
+    :data-e2e-state="props.state"
   >
-    <div class="inline-flex items-center justify-between w-content gap-2.5">
-      <div class="inline-flex items-center gap-2.5">
+    <div class="inline-flex items-center justify-between w-content gap-2">
+      <div class="inline-flex items-center gap-2">
         <AntIcon
           v-if="icon"
           :icon="_icon"
           :color="iconColor"
+          :size="IconSize.sm"
         />
 
-        <div class="whitespace-pre" :class="{'font-semibold': hasDefaultSlot}">
+        <div
+          class="whitespace-pre text-sm"
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
           <slot name="title">
             {{ title }}
           </slot>
@@ -94,12 +99,16 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
 
-    <div v-if="showUndo" class="flex justify-end">
+    <div
+      v-if="showUndo"
+      class="flex justify-end"
+    >
       <AntButton
-        :color-type="props.colorType as unknown as ColorType"
+        :state="props.state as unknown as State"
+        :size="Size.md"
         filled
         @click="() => $emit('undo')"
       >

package/src/runtime/components/AntToaster.vue

@@ -13,29 +13,34 @@ const props = withDefaults(defineProps<{
 });
 
 const classes = computed(() => ({
-  'left-0 top-0': props.position === CornerPosition.topLeft,
-  'right-0 top-0': props.position === CornerPosition.topRight,
-  'left-0 bottom-0': props.position === CornerPosition.bottomLeft,
-  'right-0 bottom-0': props.position === CornerPosition.bottomRight,
+  'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
+  'right-0 top-0 items-end': props.position === CornerPosition.topRight,
+  'left-0 bottom-0 items-start': props.position === CornerPosition.bottomLeft,
+  'right-0 bottom-0 items-end': props.position === CornerPosition.bottomRight,
 }));
 </script>
 
 <template>
   <div
-    class="absolute flex flex-col items-baseline space-y-2.5 p-2.5"
+    class="absolute flex flex-col space-y-2.5 p-2.5"
     :class="classes"
     data-e2e="toaster"
   >
     <TransitionGroup name="list">
       <AntToast
         v-for="toast of $uiModule.toaster.getToasts()"
+        :key="`ant-toast-${toast.id}`"
         :title="toast.title"
-        :color-type="toast.type"
+        :state="toast.type"
         :icon="toast.hasIcon"
         @close="$uiModule.toaster.removeToast(toast)"
-        v-bind:key="`ant-toast-${toast.id}`"
       >
-        <template v-if="toast.content" #default>{{ toast.content }}</template>
+        <template
+          v-if="toast.content"
+          #default
+        >
+          {{ toast.content }}
+        </template>
       </AntToast>
     </TransitionGroup>
   </div>
@@ -47,24 +52,18 @@ const classes = computed(() => ({
 }
 
 .list-enter-active{
-  animation: bounce-in-left .6s;
+  animation: fade-in .6s;
 }
 
 .list-leave-active {
-  animation: bounce-in-left .4s reverse;
+  animation: fade-in .4s reverse;
 }
 
-@keyframes bounce-in-left {
+@keyframes fade-in {
   0% {
-    transform: translateX(-10rem);
     opacity: 0;
   }
-  50% {
-    transform: translateX(.5rem);
-    opacity: 1;
-  }
   100% {
-    transform: translateX(0);
     opacity: 1;
   }
 }

package/src/runtime/components/AntTooltip.vue

@@ -1,109 +1,115 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref, getCurrentInstance} from 'vue';
 import {handleEnumValidation} from '../handler';
-import {InputColorType, Position} from '../enums';
+import {InputState, Position} from '../enums';
 import {classesToObjectSyntax} from '../utils';
 import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
-	position?: Position
-	tooltipClasses?: string | Record<string, boolean>
-	colorType?: InputColorType
-	expanded?: boolean
-	delay?: number
+  position?: Position
+  tooltipClasses?: string | Record<string, boolean>
+  state?: InputState
+  expanded?: boolean
+  delay?: number
 }>(), {
-	position: Position.left,
-	tooltipClasses: '',
-	colorType: InputColorType.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<InputColorType, string> = {
-		[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',
-		[InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-	};
-
-	return {[variants[props.colorType]]: 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<InputColorType, string> = {
-		[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',
-		[InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
-	};
-
-	return {[variants[props.colorType]]: 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<InputColorType, string> = {
-		[InputColorType.base]: 'stroke-neutral-300',
-		[InputColorType.danger]: 'stroke-danger-500',
-		[InputColorType.info]: 'stroke-info-500',
-		[InputColorType.success]: 'stroke-success-500',
-		[InputColorType.warning]: 'stroke-warning-500',
-	};
-
-	return {[variants[props.colorType]]: 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)
+const uuid = ref(getCurrentInstance()?.uid);
 
 onMounted(() => {
-	handleEnumValidation(props.position, Position, 'Position')
-	handleEnumValidation(props.colorType, InputColorType, 'colorType')
+  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>
 
@@ -172,7 +178,7 @@ function onClick() {
         </div>
 
         <div
-          class="p-2.5 rounded-md border"
+          class="p-2 rounded-md border"
           :class="contentClasses"
         >
           <slot name="content" />

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

@@ -3,7 +3,7 @@
  * This button is used for everything what is the primary
  * action like save, confirm, create, etc.
  */
-import {Position, ColorType, InputColorType, Size, Grouped} from '../../enums';
+import {Position, State, InputState, Size, Grouped} from '../../enums';
 import AntButton from './AntButton.vue';
 import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {computed, useSlots} from 'vue';
@@ -11,26 +11,28 @@ import {hasSlotContent} from '../../utils';
 
 defineEmits(['click', 'blur']);
 const props = withDefaults(
-	defineProps<{
-		iconLeft?: IconDefinition;
-		iconRight?: IconDefinition;
-		size?: Size;
-		disabled?: boolean;
-		grouped?: Grouped;
-		colorType?: ColorType;
-		skeleton?: boolean;
-		expanded?: boolean;
-		filled?: boolean;
-		hasPermission?: boolean;
-		tooltipPosition?: Position;
-		tooltipColorType?: InputColorType;
-		tooltipDelay?: number;
-	}>(), {
-		colorType: ColorType.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']));
 const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
@@ -45,11 +47,12 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="colorType"
+    :state="state"
     :filled="filled"
     :tooltip-position="tooltipPosition"
-    :tooltip-color-type="hasPermissionTooltip ? InputColorType.info : tooltipColorType"
+    :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
     :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
+    :submit="submit"
     data-e2e="action-button"
     @click="$emit('click')"
     @blur="$emit('blur')"