@antify/ui 1.0.0

package/dist/components/AntListGroupItem.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {ListGroupItemState} from './__types/AntListGroupItem.types';
+import {handleEnumValidation} from '../handler';
+import {type RouteLocationRaw} from 'vue-router';
+import AntIcon from './AntIcon.vue';
+
+const props = withDefaults(defineProps<{
+  to?: RouteLocationRaw | string;
+  state?: ListGroupItemState;
+  iconLeft?: IconDefinition;
+  iconRight?: IconDefinition;
+}>(), {
+  state: ListGroupItemState.base,
+});
+
+const classes = computed(() => {
+  const variants: Record<ListGroupItemState, string> = {
+    [ListGroupItemState.danger]: 'bg-danger-500 text-danger-500-font hover:bg-danger-700',
+    [ListGroupItemState.info]: 'bg-info-500 text-info-500-font hover:bg-info-700',
+    [ListGroupItemState.base]: 'bg-white text-for-white-bg-font hover:bg-neutral-200',
+    [ListGroupItemState.primary]: 'bg-primary-500 text-primary-500-font hover:bg-primary-700',
+    [ListGroupItemState.secondary]: 'bg-secondary-500 text-secondary-500-font hover:bg-secondary-700',
+    [ListGroupItemState.success]: 'bg-success-500 text-success-500-font hover:bg-success-700',
+    [ListGroupItemState.warning]: 'bg-warning-500 text-warning-500-font hover:bg-warning-700',
+  };
+
+  return {
+    'text-sm transition-colors inline-block w-full': true,
+    [variants[props.state]]: true,
+  };
+});
+const contentWrapperClasses = computed(() => {
+  const variants: Record<ListGroupItemState, string> = {
+    [ListGroupItemState.danger]: 'text-danger-500-font',
+    [ListGroupItemState.info]: 'text-info-500-font',
+    [ListGroupItemState.base]: 'text-for-white-bg-font',
+    [ListGroupItemState.primary]: 'text-primary-500-font',
+    [ListGroupItemState.secondary]: 'text-secondary-500-font',
+    [ListGroupItemState.success]: 'text-success-500-font',
+    [ListGroupItemState.warning]: 'text-warning-500-font',
+  };
+
+  return {
+    'w-full p-2 flex gap-2 items-center justify-between': true,
+    'cursor-pointer transition-colors': props.to !== undefined,
+    [variants[props.state]]: props.to !== undefined
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.state, ListGroupItemState, 'state');
+});
+</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/components/AntModal.vue

@@ -0,0 +1,130 @@
+<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-white p-2 flex items-center justify-between text-for-white-bg-font text-lg font-medium"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+
+            <AntButton
+              :icon-left="faXmark"
+              :outlined="false"
+              filled
+              @click="closeModal"
+            />
+          </div>
+
+          <div class="bg-white p-2 text-for-white-bg-font grow overflow-y-auto">
+            <slot/>
+          </div>
+
+          <div
+            v-if="useSlots()['footer'] || false"
+            class="bg-white p-2 text-for-white-bg-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/dist/components/AntPagination.vue

@@ -0,0 +1,205 @@
+<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 AntSkeleton from './AntSkeleton.vue';
+import {State, Grouped} 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="false"
+        @click="() => page = page - 1"
+      />
+
+      <AntButton
+        v-for="(pageObj) in pagination"
+        :key="`pagination-button-${pageObj}`"
+        :state="pageObj === page ? State.primary : State.base"
+        :class="{'text-primary-500 z-10': pageObj === page}"
+        :disabled="pageObj === '...'"
+        :grouped="Grouped.center"
+        :filled="false"
+        :readonly="pageObj === page"
+        @click="() => page = pageObj"
+      >
+        {{ pageObj }}
+      </AntButton>
+
+      <AntButton
+        :icon-left="faChevronRight"
+        :grouped="Grouped.right"
+        :disabled="page === pages"
+        :filled="false"
+        @click="() => page = page + 1"
+      />
+    </div>
+  </div>
+</template>

package/dist/components/AntPopover.vue

@@ -0,0 +1,135 @@
+<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-white': 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-white': 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 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+            >
+              {{ title }}
+            </div>
+
+            <div
+              class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+            >
+              <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/dist/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/dist/components/AntSpinner.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {AntSpinnerSize} from './__types/AntSpinner.types';
+import {handleEnumValidation} from '../handler';
+import {State} from '../enums/State.enum';
+
+const props = withDefaults(defineProps<{
+  state?: State,
+  size?: AntSpinnerSize;
+  inverted?: boolean;
+}>(), {
+  size: AntSpinnerSize.md,
+  state: State.base,
+  inverted: false
+});
+
+const classes = computed(() => ({
+  'animate-spin': true,
+  'w-3 h-3': props.size === AntSpinnerSize.xs2,
+  'w-4 h-4': props.size === AntSpinnerSize.xs,
+  'w-5 h-5': props.size === AntSpinnerSize.sm,
+  'w-6 h-6': props.size === AntSpinnerSize.md,
+  'w-7 h-7': props.size === AntSpinnerSize.lg,
+  'w-8 h-8': props.size === AntSpinnerSize.xl2,
+  'w-9 h-9': props.size === AntSpinnerSize.xl3,
+  'w-10 h-10': props.size === AntSpinnerSize.xl4,
+}));
+onMounted(() => {
+  handleEnumValidation(props.size, AntSpinnerSize, 'size');
+  handleEnumValidation(props.state, State, 'state');
+});
+const circleClass = computed(() => {
+  const invertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-500',
+    [State.primary]: 'fill-primary-700',
+    [State.secondary]: 'fill-secondary-700',
+    [State.danger]: 'fill-danger-700',
+    [State.info]: 'fill-info-700',
+    [State.success]: 'fill-success-700',
+    [State.warning]: 'fill-warning-700',
+  };
+  const notInvertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-100',
+    [State.primary]: 'fill-primary-100',
+    [State.secondary]: 'fill-secondary-100',
+    [State.danger]: 'fill-danger-100',
+    [State.info]: 'fill-info-100',
+    [State.success]: 'fill-success-100',
+    [State.warning]: 'fill-warning-100',
+  };
+
+  return {
+    [invertedVariants[props.state]]: props.inverted,
+    [notInvertedVariants[props.state]]: !props.inverted,
+  };
+});
+const spinningElementClass = computed(() => {
+  const invertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-100',
+    [State.primary]: 'fill-primary-100',
+    [State.secondary]: 'fill-secondary-100',
+    [State.danger]: 'fill-danger-100',
+    [State.info]: 'fill-info-100',
+    [State.success]: 'fill-success-100',
+    [State.warning]: 'fill-warning-100',
+  };
+  const notInvertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-500',
+    [State.primary]: 'fill-primary-500',
+    [State.secondary]: 'fill-secondary-500',
+    [State.danger]: 'fill-danger-500',
+    [State.info]: 'fill-info-500',
+    [State.success]: 'fill-success-500',
+    [State.warning]: 'fill-warning-500',
+  };
+
+  return {
+    [invertedVariants[props.state]]: props.inverted,
+    [notInvertedVariants[props.state]]: !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>