@antify/ui-module 1.7.2 → 1.8.0

package/dist/runtime/components/AntDropdown.vue

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-/**
- * TODO:: Emit if there's enough space for the dropdown content. If not, reposition it automatically like the
- * browsers select dropdown content does.
- * TODO:: Known issue: open dropdown, click between button and dropdown. Dropdown will not click.
- * The v-on-click-outside does not trigger, because it think it's the dropdown itself.
- * Solution is using margin only (calc(50% + 0.625rem)) and not padding.
- */
-import {computed, onMounted} from 'vue';
-import {handleEnumValidation} from '../handler';
-import {Position} from '../enums';
-import {classesToObjectSyntax} from '../utils';
-import {vOnClickOutside} from '@vueuse/components';
-import {onKeyStroke} from '@vueuse/core';
-
-const props = withDefaults(defineProps<{
-  showDropdown: boolean,
-  position?: Position,
-  dropdownClasses?: string | Record<string, boolean>,
-  contentPadding?: boolean
-}>(), {
-  showDropdown: false,
-  contentPadding: true,
-  position: Position.bottom,
-  dropdownClasses: '',
-});
-const emit = defineEmits(['update:showDropdown']);
-
-const _dropdownClasses = computed(() => ({
-  'absolute min-w-[10rem]': true,
-  'bottom-0 left-0 mb-[50%] pb-2.5': props.position === Position.top,
-  'top-0 left-0 mt-[50%] pt-2.5': props.position === Position.bottom,
-  'right-0 top-0 mr-[100%] pr-2.5': props.position === Position.left,
-  'left-0 top-0 ml-[100%] pl-2.5': props.position === Position.right,
-  ...classesToObjectSyntax(props.dropdownClasses)
-}));
-
-onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position');
-});
-onKeyStroke('Escape', (e: KeyboardEvent) => {
-  if (props.showDropdown) {
-    e.preventDefault();
-    emit('update:showDropdown', false);
-  }
-});
-
-function onClickOutside() {
-  emit('update:showDropdown', false);
-}
-</script>
-
-<template>
-  <div
-    v-on-click-outside="onClickOutside"
-    class="relative inline-flex justify-center items-end z-40"
-    data-e2e="dropdown"
-  >
-    <slot />
-
-    <Transition name="bounce">
-      <div
-        v-if="showDropdown"
-        :class="_dropdownClasses"
-      >
-        <div
-          class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-white text-for-white-bg-font w-full"
-          :class="{'p-2': contentPadding}"
-        >
-          <slot name="content" />
-        </div>
-      </div>
-    </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/AntIcon.vue

@@ -1,56 +0,0 @@
-<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.sm,
-  color: 'text-for-white-bg-font'
-});
-
-const containerClasses = computed(() => ({
-	'inline-flex items-center justify-center': true,
-	'w-3 h-3': props.size === IconSize.xs2,
-	'w-4 h-4': props.size === IconSize.xs,
-	'w-5 h-5': props.size === IconSize.sm,
-	'w-6 h-6': props.size === IconSize.md,
-	'w-7 h-7': props.size === IconSize.lg,
-	'w-9 h-9': props.size === IconSize.xl3,
-	[props.color]: true,
-}));
-
-const iconClasses = computed(() => ({
-	'transition-colors': true,
-	'text-2xs': props.size === IconSize.xs2,
-	'text-xs': props.size === IconSize.xs,
-	'text-sm': props.size === IconSize.sm,
-	'text-md': props.size === IconSize.md,
-	'text-lg': props.size === IconSize.lg,
-	'text-3xl': props.size === IconSize.xl3,
-}));
-
-onMounted(() => {
-  handleEnumValidation(props.size, IconSize, 'size');
-});
-</script>
-
-<template>
-  <span
-    v-if="icon"
-    :class="containerClasses"
-  >
-    <FaIcon
-      :icon="icon"
-      :class="iconClasses"
-    />
-  </span>
-</template>

package/dist/runtime/components/AntKeycap.vue

@@ -1,45 +0,0 @@
-<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';
-import {AntKeycapSize} from './__types/AntKeycap.types';
-import {computed} from 'vue';
-
-const props = withDefaults(defineProps<{
-  icon?: IconDefinition
-  size: AntKeycapSize
-
-}>(),{
-  size: AntKeycapSize.sm
-});
-
-const classes = computed(() => {
-  return {
-    'text-sm px-px min-w-5': props.size === AntKeycapSize.sm,
-    'text-2xs px-px py-0.5 min-w-[18px]': props.size === AntKeycapSize.xs,
-  };
-});
-const iconClasses = computed(() => {
-  if(props.size === AntKeycapSize.sm) {
-    return IconSize.sm;
-  } else {
-    return IconSize.xs2;
-  }
-});
-</script>
-
-<template>
-  <span
-    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-font font-medium"
-    :class="classes"
-  >
-    <AntIcon
-      v-if="icon"
-      :icon="icon"
-      :size="iconClasses"
-    />
-
-    <slot v-else />
-  </span>
-</template>

package/dist/runtime/components/AntListGroup.vue

@@ -1,24 +0,0 @@
-<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

@@ -1,83 +0,0 @@
-<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/runtime/components/AntModal.vue

@@ -1,88 +0,0 @@
-<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 .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

@@ -1,206 +0,0 @@
-<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 {State} 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/runtime/components/AntPopover.vue

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