@antify/ui-module 1.1.3

package/src/runtime/components/AntModal.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import {ref, useSlots, watch} from 'vue';
+import {faXmark} from '@fortawesome/free-solid-svg-icons';
+import AntButton from './buttons/AntButton.vue';
+
+const emit = defineEmits(['update:open', 'close']);
+const props = withDefaults(defineProps<{
+  title: string,
+  open: boolean,
+  fullscreen?: boolean
+}>(), {
+  fullscreen: false
+});
+const openModal = ref(props.open);
+const openBackground = ref(props.open);
+
+watch(() => props.open, (val) => {
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      emit('update:open', false);
+    }
+  }
+
+  if (val) {
+    openBackground.value = true;
+    setTimeout(() => openModal.value = true, props.fullscreen ? 0 : 100)
+    document.addEventListener('keydown', onKeydown);
+  } else {
+    openModal.value = false;
+    setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100)
+    document.removeEventListener('keydown', onKeydown);
+  }
+});
+
+function closeModal() {
+  emit('update:open', false);
+  emit('close');
+}
+</script>
+
+<template>
+  <transition name="fade">
+    <div
+      v-if="openBackground"
+      class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden"
+      :class="{'bg-black/50 backdrop-blur-sm': !fullscreen}"
+      @click.self="closeModal"
+    >
+      <transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
+        <div
+          v-if="openModal"
+          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto"
+          :class="{'w-full h-full': fullscreen, 'border border-neutral-300 rounded-md shadow-md': !fullscreen}"
+        >
+          <div
+            class="bg-neutral-50 p-2.5 flex items-center justify-between text-neutral-50-font text-lg font-medium">
+            <slot name="title">
+              {{ title }}
+            </slot>
+
+            <AntButton
+              :icon-left="faXmark"
+              :outlined="false"
+              filled
+              @click="closeModal"
+            />
+          </div>
+
+          <div class="bg-neutral-50 p-2.5 grow overflow-y-auto">
+            <slot/>
+          </div>
+
+          <div
+            v-if="useSlots()['footer'] || false"
+            class="bg-neutral-50 p-2.5 text-neutral-50-font"
+          >
+            <slot name="footer"/>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.fade-leave-active {
+  transition: opacity .5s ease;
+}
+
+.fade-enter-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.bounce-enter-active {
+  animation: bounce-in .4s;
+}
+
+.bounce-leave-active {
+  animation: bounce-in .4s reverse;
+}
+
+.bounce-slow-enter-active {
+  animation: bounce-in .6s;
+}
+
+.bounce-slow-leave-active {
+  animation: bounce-in .4s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/src/runtime/components/AntPagination.vue

@@ -0,0 +1,201 @@
+<script lang="ts" setup>
+// @ts-nocheck
+/**
+ * TODO:: test me in storybook through vue router
+ * TODO:: Fix ts errors
+ */
+import {useRouter, useRoute} from 'vue-router'
+import {computed} from 'vue';
+import AntButton from './buttons/AntButton.vue';
+import {faChevronRight, faChevronLeft} from '@fortawesome/free-solid-svg-icons';
+import {Grouped} from '../enums/Grouped.enum';
+import AntSkeleton from './AntSkeleton.vue';
+import {ColorType} from '../enums';
+
+const emit = defineEmits(['update:skeleton', 'input'])
+const props = withDefaults(
+  defineProps<{
+    pages: number,
+    pageQuery?: string,
+    skeleton?: boolean,
+
+    /**
+     * Light version does not show the very previous and next page button.
+     * This makes the pagination smaller in space.
+     */
+    lightVersion?: boolean
+  }>(),
+  {
+    pageQuery: 'p',
+    skeleton: false,
+    lightVersion: false
+  }
+)
+const router = useRouter()
+const route = useRoute()
+const page = computed({
+  get() {
+    const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+
+    if (_page <= 0 || _page > props.pages) {
+      return 1
+    }
+
+    return _page
+  },
+  set(val) {
+    const query = {...route.query}
+    query[props.pageQuery] = val;
+
+    (async () => {
+      await router.push({
+        ...route,
+        query
+      })
+
+      emit('input', val)
+    })()
+  }
+})
+
+/**
+ * Build following constellations:
+ * [1] 2 3 ... 10
+ * 1 [2] 3 4 ... 10
+ * 1 2 [3] 4 ... 10
+ * 1 ... 3 [4] 5 ... 10
+ * 1 ... 4 [5] 6 ... 10
+ * 1 ... 7 [8] 9 10
+ * 1 ... 8 [9] 10
+ * 1 ... 8 9 [10]
+ */
+const defaultPagination = computed(() => {
+  const pagination = []
+
+  if (page.value > 2 && props.pages > 3) {
+    pagination.push(1)
+
+    if (page.value > 3) {
+      pagination.push('...')
+    }
+  }
+
+  if (page.value === 1) {
+    pagination.push(1)
+
+    if (props.pages >= 2) {
+      pagination.push(2)
+    }
+
+    if (props.pages >= 3) {
+      pagination.push(3)
+    }
+  } else if (page.value === props.pages) {
+    if (props.pages - 2 >= 1) {
+      pagination.push(props.pages - 2)
+    }
+    if (props.pages - 1 >= 1) {
+      pagination.push(props.pages - 1)
+    }
+    pagination.push(props.pages)
+  } else {
+    pagination.push(page.value - 1)
+    pagination.push(page.value)
+    pagination.push(page.value + 1)
+  }
+
+  if (page.value < props.pages - 1 && props.pages > 3) {
+    if (page.value < props.pages - 2) {
+      pagination.push('...')
+    }
+    pagination.push(props.pages)
+  }
+
+  return pagination
+})
+
+/**
+ * Build following constellations:
+ * [1] ... 10
+ * 1 [2] ... 10
+ * 1 ... [3] ... 10
+ * 1 ... [5] ... 10
+ * 1 ... [8] ... 10
+ * 1 ... [9] 10
+ * 1 ... [10]
+ */
+const lightPagination = computed(() => {
+  const pagination = []
+
+  pagination.push(1)
+
+  if (page.value > 2) {
+    pagination.push('...')
+  }
+
+  if (page.value > 1) {
+    pagination.push(page.value)
+  }
+
+  if (page.value < props.pages - 1) {
+    pagination.push('...')
+  }
+
+  if (page.value < props.pages) {
+    pagination.push(props.pages)
+  }
+
+  return pagination
+})
+
+const pagination = computed(() => {
+  if (props.lightVersion) {
+    return lightPagination.value
+  }
+
+  return defaultPagination.value
+})
+</script>
+
+<template>
+  <div
+    class="inline-flex relative"
+    data-e2e="pagination"
+  >
+    <AntSkeleton v-if="skeleton" rounded absolute/>
+
+    <div
+      class="inline-flex gap-px"
+      :class="{'invisible': skeleton}"
+    >
+      <AntButton
+        :disabled="page === 1"
+        :icon-left="faChevronLeft"
+        :grouped="Grouped.left"
+        filled
+        @click="() => page = page - 1"
+      />
+
+      <AntButton
+        v-for="(pageObj, index) in pagination"
+        :color-type="pageObj === page ? ColorType.primary : ColorType.base"
+        :class="{'text-primary-500 z-10': pageObj === page}"
+        :disabled="pageObj === '...'"
+        :grouped="Grouped.center"
+        :filled="pageObj !== page"
+        @click="() => page = pageObj"
+        v-bind:key="`pagination-button-${index}`"
+      >
+        {{ pageObj }}
+      </AntButton>
+
+      <AntButton
+        :icon-left="faChevronRight"
+        :grouped="Grouped.right"
+        :disabled="page === pages"
+        filled
+        @click="() => page = page + 1"
+      />
+    </div>
+  </div>
+</template>

package/src/runtime/components/AntPopover.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {Position} from '../enums/Position.enum';
+import {classesToObjectSyntax} from '../utils';
+
+const props = withDefaults(defineProps<{
+  showPopover: boolean,
+  title?: string,
+  position?: Position,
+  popoverClasses?: string | Record<string, boolean>
+}>(), {
+  showPopover: false,
+  position: Position.left,
+  popoverClasses: ''
+});
+const _popoverClasses = computed(() => ({
+  'absolute min-w-[10rem]': true,
+  'bottom-0 mb-[50%] pb-3.5': props.position === Position.top,
+  'top-0 mt-[50%] pt-3.5': props.position === Position.bottom,
+  'right-0 mr-[100%] pr-3.5': props.position === Position.left,
+  'left-0 ml-[100%] pl-3.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.popoverClasses)
+}));
+const classes = computed(() => ({
+  'z-10 absolute flex': true,
+  'top-0 left-0 right-0 -m-[2.5px] justify-center': props.position === Position.bottom,
+  'bottom-0 left-0 right-0 -m-[2.5px] justify-center': props.position === Position.top,
+  'top-0 left-0 bottom-0 -ml-[2.5px]  items-end pb-1': props.position === Position.right,
+  'top-0 right-0 bottom-0 -mr-[2.5px] items-end pb-1': 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-start -rotate-90': props.position === Position.right,
+  'justify-end rotate-90': props.position === Position.left,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.position, Position, 'Position')
+});
+</script>
+
+<template>
+  <div class="relative inline-flex justify-center items-end">
+    <slot/>
+
+    <transition name="bounce">
+      <template v-if="showPopover">
+        <div :class="_popoverClasses">
+          <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative">
+            <div
+              :class="classes"
+            >
+              <div
+                :class="itemContainerClasses"
+              >
+                <svg
+                  class="absolute mt-[.5px]"
+                  width="35"
+                  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="{'fill-neutral-100': position === Position.bottom, 'fill-neutral-50': position === Position.top || position === Position.right || position === Position.left}"
+                  />
+
+                  <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="{'stroke-neutral-100': position === Position.bottom, 'stroke-neutral-50': position === Position.top || position === Position.right || position === Position.left}"
+                  />
+                </svg>
+
+                <svg
+                  class="absolute"
+                  width="35"
+                  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="stroke-neutral-300"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <div
+              class="border-neutral-300 border-b p-2.5 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold">
+              {{ title }}
+            </div>
+
+            <div
+              class="p-2.5 rounded-b-md text-neutral-50-font border-neutral-300 border-l border-b border-r bg-neutral-50">
+              <slot name="content"/>
+            </div>
+          </div>
+        </div>
+      </template>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.bounce-enter-active {
+  animation: bounce-in .4s;
+}
+
+.bounce-leave-active {
+  animation: bounce-in .4s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/src/runtime/components/AntSkeleton.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import {Grouped} from '../enums/Grouped.enum';
+import {computed} from 'vue';
+
+const props = withDefaults(defineProps<{
+  grouped?: Grouped;
+  rounded?: boolean;
+  roundedFull?: boolean;
+  absolute?: boolean;
+  minShowTime?: number;
+}>(), {
+  grouped: Grouped.none,
+  rounded: false,
+  roundedFull: false,
+  absolute: false,
+  minShowTime: 5000
+});
+
+const groupedClassList = computed(() => ({
+  'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
+  'rounded-none': props.grouped === Grouped.center,
+  'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
+}));
+const classList = computed(() => ({
+  'animate-skeleton min-h-[1px] min-w-[1px] inline-block': true,
+  'absolute inset-0 w-full h-full z-40': props.absolute,
+  'rounded-md': props.rounded && props.grouped === Grouped.none,
+  'rounded-xl': props.roundedFull && props.grouped === Grouped.none,
+  ...groupedClassList.value
+}));
+</script>
+
+<template>
+  <div
+    :class="classList"
+    data-e2e="skeleton"
+  />
+</template>

package/src/runtime/components/AntSpinner.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../enums/Size.enum'
+import {handleEnumValidation} from '../handler';
+import {ColorType} from '../enums/ColorType.enum';
+
+const props = withDefaults(defineProps<{
+  colorType?: ColorType,
+  size?: Size;
+  inverted?: boolean;
+}>(), {
+  size: Size.md,
+  colorType: ColorType.base,
+  inverted: false
+});
+
+const classes = computed(() => ({
+  'animate-spin': true,
+  'w-4 h-4': props.size === Size.sm,
+  'w-5 h-5': props.size === Size.md,
+}));
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, ColorType, 'colorType');
+});
+const circleClass = computed(() => {
+  const invertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-500',
+    [ColorType.primary]: 'fill-primary-700',
+    [ColorType.secondary]: 'fill-secondary-700',
+    [ColorType.danger]: 'fill-danger-700',
+    [ColorType.info]: 'fill-info-700',
+    [ColorType.success]: 'fill-success-700',
+    [ColorType.warning]: 'fill-warning-700',
+  };
+  const notInvertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-100',
+    [ColorType.primary]: 'fill-primary-100',
+    [ColorType.secondary]: 'fill-secondary-100',
+    [ColorType.danger]: 'fill-danger-100',
+    [ColorType.info]: 'fill-info-100',
+    [ColorType.success]: 'fill-success-100',
+    [ColorType.warning]: 'fill-warning-100',
+  };
+
+  return {
+    [invertedVariants[props.colorType]]: props.inverted,
+    [notInvertedVariants[props.colorType]]: !props.inverted,
+  };
+});
+const spinningElementClass = computed(() => {
+  const invertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-100',
+    [ColorType.primary]: 'fill-primary-100',
+    [ColorType.secondary]: 'fill-secondary-100',
+    [ColorType.danger]: 'fill-danger-100',
+    [ColorType.info]: 'fill-info-100',
+    [ColorType.success]: 'fill-success-100',
+    [ColorType.warning]: 'fill-warning-100',
+  };
+  const notInvertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-500',
+    [ColorType.primary]: 'fill-primary-500',
+    [ColorType.secondary]: 'fill-secondary-500',
+    [ColorType.danger]: 'fill-danger-500',
+    [ColorType.info]: 'fill-info-500',
+    [ColorType.success]: 'fill-success-500',
+    [ColorType.warning]: 'fill-warning-500',
+  };
+
+  return {
+    [invertedVariants[props.colorType]]: props.inverted,
+    [notInvertedVariants[props.colorType]]: !props.inverted,
+  };
+});
+</script>
+
+<template>
+  <svg
+    :class="classes"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    data-e2e="spinner"
+  >
+    <path
+        :class="circleClass"
+        d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+    />
+    <path
+        :class="spinningElementClass"
+        d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
+    />
+  </svg>
+</template>

package/src/runtime/components/AntTag.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../enums/Size.enum'
+import {TagColorType} from '../types/AntTag.type';
+import {handleEnumValidation} from '../handler';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {faCircleXmark} from '@fortawesome/free-solid-svg-icons';
+
+const props = withDefaults(defineProps<{
+  colorType?: TagColorType,
+  size?: Size;
+  iconLeft?: IconDefinition;
+  dismiss?: boolean
+}>(), {
+  size: Size.md,
+  colorType: TagColorType.neutral300,
+  dismiss: false
+});
+
+const classes = computed(() => {
+  const variants: Record<TagColorType, string> = {
+    [TagColorType.danger]: 'bg-danger-500 text-danger-500-font',
+    [TagColorType.info]: 'bg-info-500 text-info-500-font',
+    [TagColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
+    [TagColorType.neutral50]: 'bg-neutral-50 text-neutral-50-font',
+    [TagColorType.success]: 'bg-success-500 text-success-500-font',
+    [TagColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+
+  return {
+    'rounded-md inline-flex items-center': true,
+    'px-1.5 py-1 text-sm gap-1.5': props.size === Size.md,
+    'px-1 py-0.5 text-xs  gap-1': props.size === Size.sm,
+    [variants[props.colorType]]: true,
+  };
+});
+const iconClasses = computed(() => ({
+  'h-3': props.size === Size.sm,
+  'h-4': props.size === Size.md,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, TagColorType, 'colorType');
+});
+</script>
+
+<template>
+  <span
+    :class="classes"
+    data-e2e="tag"
+  >
+    <span
+        v-if="iconLeft"
+        class="inline-flex items-center justify-center"
+        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+    >
+      <fa-icon
+          :icon="iconLeft"
+          :class="iconClasses"
+      />
+    </span>
+
+    <slot/>
+
+    <span
+        v-if="dismiss"
+        class="inline-flex items-center justify-center"
+        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+    >
+      <fa-icon
+          :icon="faCircleXmark"
+          :class="iconClasses"
+          class="cursor-pointer"
+          @click="() => $emit('close')"
+      />
+    </span>
+  </span>
+</template>