@antify/ui-module 1.1.3

package/src/runtime/components/AntToast.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import {computed, onMounted, useSlots} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {
+  faCheckCircle,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle,
+  faXmark
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntButton from './buttons/AntButton.vue';
+import {ColorType, InputColorType} from '../enums';
+
+const props = withDefaults(defineProps<{
+  title?: string,
+  colorType?: InputColorType,
+  showUndo?: boolean,
+  icon?: boolean
+}>(), {
+  colorType: InputColorType.base,
+  showUndo: false,
+  icon: true
+});
+
+const icons = {
+  [InputColorType.base]: faInfoCircle,
+  [InputColorType.info]: faInfoCircle,
+  [InputColorType.danger]: faExclamationCircle,
+  [InputColorType.warning]: faExclamationTriangle,
+  [InputColorType.success]: faCheckCircle,
+};
+
+const _icon = computed(() => icons[props.colorType]);
+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',
+  };
+
+  return {
+    'inline-flex flex-col gap-2.5 rounded-md p-2.5 border transition-colors shadow-md': true,
+    [variants[props.colorType]]: 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',
+  };
+
+  return variants[props.colorType];
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <div
+    :class="classes"
+    data-e2e="toast"
+  >
+    <div class="inline-flex items-center justify-between w-content gap-2.5">
+      <div class="inline-flex items-center gap-2.5">
+        <AntIcon
+          v-if="icon"
+          :icon="_icon"
+          :color="iconColor"
+        />
+
+        <div class="whitespace-pre" :class="{'font-semibold': hasDefaultSlot}">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </div>
+
+      <AntIcon
+        :icon="faXmark"
+        class="cursor-pointer"
+        :color="iconColor"
+        @click="() => $emit('close')"
+      />
+    </div>
+
+    <div v-if="hasDefaultSlot">
+      <slot/>
+    </div>
+
+    <div v-if="showUndo" class="flex justify-end">
+      <AntButton
+        :color-type="props.colorType as unknown as ColorType"
+        filled
+        @click="() => $emit('undo')"
+      >
+        undo
+      </AntButton>
+    </div>
+  </div>
+</template>

package/src/runtime/components/AntToaster.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+/**
+ * To let the toaster show toasts, use the plugin "$uiModule.toaster" property.
+ */
+import {computed} from 'vue';
+import AntToast from './AntToast.vue';
+import {CornerPosition} from '../enums/Position.enum';
+
+const props = withDefaults(defineProps<{
+  position?: CornerPosition;
+}>(), {
+  position: CornerPosition.bottomLeft
+});
+
+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,
+}));
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col items-baseline space-y-2.5 p-2.5"
+    :class="classes"
+    data-e2e="toaster"
+  >
+    <TransitionGroup name="list">
+      <AntToast
+        v-for="toast of $uiModule.toaster.getToasts()"
+        :title="toast.title"
+        :color-type="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>
+      </AntToast>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.list-move {
+  transition: all 0.5s ease;
+}
+
+.list-enter-active{
+  animation: bounce-in-left .6s;
+}
+
+.list-leave-active {
+  animation: bounce-in-left .4s reverse;
+}
+
+@keyframes bounce-in-left {
+  0% {
+    transform: translateX(-10rem);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(.5rem);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+</style>

package/src/runtime/components/AntTooltip.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {InputColorType, Position} from '../enums';
+import {classesToObjectSyntax} from '../utils';
+
+const props = withDefaults(defineProps<{
+  content?: string,
+  position?: Position,
+  tooltipClasses?: string | Record<string, boolean>,
+  colorType?: InputColorType
+}>(), {
+  position: Position.left,
+  tooltipClasses: '',
+  colorType: InputColorType.base
+});
+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)
+}));
+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,
+}));
+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,
+}));
+const contentClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-50-font bg-neutral-50 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 svgPathClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'fill-neutral-50 stroke-neutral-50',
+    [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 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};
+});
+
+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;
+
+  setTimeout(() => {
+    if (delayVisible.value) {
+      visible.value = true
+    }
+  }, 300)
+}
+
+function onMouseLeave() {
+  delayVisible.value = false
+  visible.value = false
+}
+</script>
+
+<template>
+  <div
+    class="relative inline-flex justify-center items-center"
+    data-e2e="tooltip"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+  >
+    <slot/>
+
+    <div v-if="visible" :class="_tooltipClasses">
+      <div
+        class="shadow-lg text-sm relative inline-flex flex-col relative"
+      >
+        <div
+          :class="classes"
+        >
+          <div
+            :class="itemContainerClasses"
+          >
+            <svg
+              class="absolute mt-[.5px]"
+              width="30"
+              height="8"
+              viewBox="0 0 35 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
+                :class="svgPathClasses"
+              />
+
+              <path
+                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
+                :class="svgPathClasses"
+              />
+            </svg>
+
+            <svg
+              class="absolute"
+              width="30"
+              height="8"
+              viewBox="0 0 35 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7"
+                :class="arrowSvgPathClasses"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div
+          class="p-2.5 rounded-md border"
+          :class="contentClasses"
+        >
+          <slot name="content"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, onMounted} from 'vue';
+import {type RouteLocationRaw} from 'vue-router';
+import AntSkeleton from '../AntSkeleton.vue';
+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 {ButtonType} from './__types';
+import AntIcon from '../AntIcon.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;
+}>(), {
+  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,
+});
+
+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,
+}));
+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',
+  };
+
+  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)]': !props.readonly,
+    '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 && !props.readonly,
+    [filledVariants[props.colorType]]: props.filled,
+    [filledHoverVariants[props.colorType]]: props.filled && !props.readonly,
+  };
+});
+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',
+  };
+
+  return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
+});
+const type = computed(() => {
+  if (props.to !== undefined) {
+    return undefined;
+  }
+
+  return props.submit ? ButtonType.submit : ButtonType.button;
+});
+const is = computed(() => {
+  if (props.readonly) {
+    return 'div';
+  }
+
+  return props.to !== undefined ? 'router-link' : 'button'
+})
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, ColorType, 'colorType');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+});
+</script>
+
+<template>
+  <div
+    class="relative inline-flex h-fit"
+    :class="{'w-full': props.expanded}"
+    data-e2e="button"
+    :data-e2e-color-type="props.colorType"
+  >
+    <AntSkeleton
+      v-if="skeleton"
+      :grouped="grouped"
+      rounded
+      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"
+    >
+      <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"
+      />
+
+      <slot
+        v-if="!spinner"
+        name="icon-right"
+      >
+        <AntIcon
+          v-if="iconRight"
+          :icon="iconRight"
+          :size="size as unknown as IconSize"
+          :color="iconColor"
+        />
+      </slot>
+    </component>
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.primary"
+    filled
+    data-e2e="create-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Create
+  </AntButton>
+</template>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.danger"
+    filled
+    data-e2e="delete-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Delete
+  </AntButton>
+</template>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.primary"
+    filled
+    data-e2e="save-and-new-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Save and new
+  </AntButton>
+</template>