@antify/ui-module 1.1.3

package/dist/runtime/components/AntIcon.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from './__types/AntIcon.types';
+
+const props = withDefaults(defineProps<{
+  icon: IconDefinition;
+  size?: IconSize;
+
+  /**
+   * A css text-* class
+   */
+  color?: string;
+}>(), {
+  size: IconSize.md,
+  color: 'text-for-white-bg-font'
+});
+
+const containerClasses = computed(() => ({
+  'inline-flex items-center justify-center': true,
+  'w-4 h-4': props.size === IconSize.sm,
+  'w-5 h-5': props.size === IconSize.md,
+  'w-9 h-9': props.size === IconSize.xl3,
+  [props.color]: true,
+}));
+
+// TODO:: replace with/height with font-size
+const iconClasses = computed(() => ({
+  'transition-colors': true,
+  'h-3 w-3': props.size === IconSize.sm,
+  'h-4 w-4': props.size === IconSize.md,
+  'text-3xl': props.size === IconSize.xl3,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, IconSize, 'size');
+});
+</script>
+
+<template>
+  <span
+      v-if="icon"
+      :class="containerClasses"
+  >
+    <fa-icon
+        :icon="icon"
+        :class="iconClasses"
+    />
+  </span>
+</template>

package/dist/runtime/components/AntKeycap.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+// TODO:: Fix typo KeyCap with upperchar C
+import AntIcon from './AntIcon.vue';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from './__types';
+
+defineProps<{
+  icon?: IconDefinition
+}>();
+</script>
+
+<template>
+  <span
+    class="inline-block py-0.5 px-1.5 bg-neutral-300 rounded-md text-sm min-w-[1.5rem] text-center text-neutral-500-font font-medium"
+  >
+    <AntIcon
+      v-if="icon"
+      :icon="icon"
+      :size="IconSize.sm"
+    />
+
+    <slot v-else/>
+  </span>
+</template>

package/dist/runtime/components/AntListGroup.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import AntSkeleton from './AntSkeleton.vue';
+
+withDefaults(
+    defineProps<{
+      skeleton?: boolean
+    }>(), {
+      skeleton: false
+    }
+)
+</script>
+
+<template>
+  <div class="relative">
+    <AntSkeleton v-if="skeleton" absolute rounded/>
+
+    <div
+        class="flex flex-col rounded-md bg-neutral-300 gap-px relative border border-neutral-300 overflow-hidden"
+        :class="{'invisible': skeleton}"
+    >
+      <slot/>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/AntListGroupItem.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {ListGroupItemColorType} from '../types/AntListGroupItem.type';
+import {handleEnumValidation} from '../handler';
+import {type RouteLocationRaw} from 'vue-router';
+import AntIcon from './AntIcon.vue';
+
+const props = withDefaults(defineProps<{
+  to?: RouteLocationRaw | string;
+  colorType?: ListGroupItemColorType;
+  iconLeft?: IconDefinition;
+  iconRight?: IconDefinition;
+}>(), {
+  colorType: ListGroupItemColorType.neutral50,
+});
+
+const classes = computed(() => {
+  const variants: Record<ListGroupItemColorType, string> = {
+    [ListGroupItemColorType.danger]: 'bg-danger-500 text-danger-500-font',
+    [ListGroupItemColorType.info]: 'bg-info-500 text-info-500-font',
+    [ListGroupItemColorType.neutral700]: 'bg-neutral-700 text-neutral-700-font',
+    [ListGroupItemColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
+    [ListGroupItemColorType.neutral50]: 'bg-neutral-50 text-neutral-50-font',
+    [ListGroupItemColorType.primary]: 'bg-primary-500 text-primary-500-font',
+    [ListGroupItemColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [ListGroupItemColorType.success]: 'bg-success-500 text-success-500-font',
+    [ListGroupItemColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+
+  return {
+    'text-sm transition-colors inline-block w-full': true,
+    [variants[props.colorType]]: true,
+  };
+});
+const contentWrapperClasses = computed(() => {
+  const variants: Record<ListGroupItemColorType, string> = {
+   [ListGroupItemColorType.danger]: 'text-danger-500-font',
+   [ListGroupItemColorType.info]: 'text-info-500-font',
+   [ListGroupItemColorType.neutral700]: 'text-neutral-700-font',
+   [ListGroupItemColorType.neutral300]: 'text-neutral-300-font',
+   [ListGroupItemColorType.neutral50]: 'text-neutral-50-font',
+   [ListGroupItemColorType.primary]: 'text-primary-500-font',
+   [ListGroupItemColorType.secondary]: 'text-secondary-500-font',
+   [ListGroupItemColorType.success]: 'text-success-500-font',
+   [ListGroupItemColorType.warning]: 'text-warning-500-font',
+  };
+
+  return {
+    'w-full p-2.5 flex gap-2.5 items-center justify-between': true,
+    'hover:bg-neutral-950/25 cursor-pointer transition-colors': props.to !== undefined,
+    [variants[props.colorType]]: props.to !== undefined
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, ListGroupItemColorType, 'colorType');
+});
+</script>
+
+<template>
+  <component
+      :is="to !== undefined ? 'router-link' : 'div'"
+      :to="to"
+      :class="classes"
+  >
+    <div :class="contentWrapperClasses">
+      <div class="flex items-center gap-2.5">
+        <slot v-if="iconLeft" name="icon-left">
+          <AntIcon :icon="iconLeft"/>
+        </slot>
+
+        <slot/>
+      </div>
+
+      <slot v-if="iconRight" name="icon-right">
+        <AntIcon :icon="iconRight"/>
+      </slot>
+    </div>
+  </component>
+</template>

package/dist/runtime/components/AntModal.vue

@@ -0,0 +1,87 @@
+<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 .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%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
+</style>

package/dist/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/dist/runtime/components/AntPopover.vue

@@ -0,0 +1,112 @@
+<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%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
+</style>

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