@antify/ui 1.1.0 → 1.2.0

package/dist/components/AntAccordion.vue

@@ -2,6 +2,7 @@
 import AntAccordionItem from './AntAccordionItem.vue';
 import {onMounted, ref} from 'vue';
 import {CollapseStrategy} from './__types/AntAccordion.types';
+import AntSkeleton from "./AntSkeleton.vue";
 
 const props = withDefaults(defineProps<{
   items: {
@@ -16,8 +17,10 @@ const props = withDefaults(defineProps<{
     inactiveIconClasses?: string;
   }[];
   collapseStrategy?: CollapseStrategy;
+  skeleton?: boolean;
 }>(), {
-  collapseStrategy: CollapseStrategy.single
+  collapseStrategy: CollapseStrategy.single,
+  skeleton: false
 });
 
 const openItems = ref<number[]>([]);
@@ -59,6 +62,7 @@ function onClose(index: number) {
         :activeIconClasses="item.activeIconClasses"
         :inactiveLabelClasses="item.inactiveLabelClasses"
         :inactiveIconClasses="item.inactiveIconClasses"
+        :skeleton="skeleton"
         @open="() => onOpen(index)"
         @close="() => onClose(index)"
       >
@@ -69,12 +73,16 @@ function onClose(index: number) {
           />
         </template>
 
-        <slot
-          name="item-content"
-          v-bind="{item, index}"
-        >
-          <div v-html="item.content"/>
-        </slot>
+        <div class="relative">
+          <slot
+            name="item-content"
+            v-bind="{item, index}"
+          >
+            <div v-html="item.content"/>
+
+            <AntSkeleton v-if="skeleton" absolute rounded/>
+          </slot>
+        </div>
       </AntAccordionItem>
     </slot>
   </div>

package/dist/components/AntAccordionItem.vue

@@ -4,6 +4,7 @@ import AntIcon from './AntIcon.vue';
 import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
 import {IconSize} from './__types/AntIcon.types';
 import {computed} from 'vue';
+import AntSkeleton from "../components/AntSkeleton.vue";
 
 const props = withDefaults(defineProps<{
   isOpen: boolean;
@@ -15,10 +16,12 @@ const props = withDefaults(defineProps<{
   activeIconClasses?: string;
   inactiveLabelClasses?: string;
   inactiveIconClasses?: string;
+  skeleton?: boolean;
 }>(), {
   collapseTransition: 'slide',
   iconLeft: false,
   contentPadding: true,
+  skeleton: false,
   activeLabelClasses: 'bg-primary-500 text-primary-500-font',
   activeIconClasses: 'text-primary-500-font',
   inactiveLabelClasses: 'bg-white text-for-white-bg-font',
@@ -28,6 +31,10 @@ const emit = defineEmits(['close', 'open']);
 
 // TODO:: Stehengeblieben: delays machen
 function onClick() {
+  if (props.skeleton) {
+    return
+  }
+
   if (props.isOpen) {
     emit('close');
   } else {
@@ -37,13 +44,14 @@ function onClick() {
 
 const labelClasses = computed(() => ({
   [props.activeLabelClasses]: props.isOpen,
-  [props.inactiveLabelClasses]: !props.isOpen
+  [props.inactiveLabelClasses]: !props.isOpen,
+  'cursor-pointer': !props.skeleton
 }))
 </script>
 
 <template>
   <div
-    class="p-2 select-none cursor-pointer transition-colors"
+    class="p-2 select-none transition-colors"
     :class="labelClasses"
     @click="onClick"
   >
@@ -61,17 +69,23 @@ const labelClasses = computed(() => ({
               :size="IconSize.sm"
               :icon="faQuestionCircle"
               :color="isOpen ? activeIconClasses : inactiveIconClasses"
+              :skeleton="skeleton"
             />
           </slot>
 
-          <span class="text-sm font-semibold">
-            {{ label }}
-          </span>
+
+          <div class="relative">
+            <div class="text-sm font-semibold">
+              {{ label }}
+            </div>
+            <AntSkeleton v-if="skeleton" absolute rounded/>
+          </div>
         </div>
 
         <AntIcon
           :icon="isOpen ? faAngleUp : faAngleDown"
           :color="isOpen ? activeIconClasses : inactiveIconClasses"
+          :skeleton="skeleton"
         />
       </div>
     </slot>

package/dist/components/AntAlert.vue

@@ -114,12 +114,14 @@ onMounted(() => {
       <div class="flex gap-2">
         <div v-if="hasQuestionMark">
           <slot name="questionMarkText">
-            <AntTooltip :position="Position.bottom">
-              <AntIcon
-                :icon="faCircleQuestion"
-                :color="iconColor"
-                :size="IconSize.sm"
-              />
+            <AntTooltip >
+              <template #reference>
+                <AntIcon
+                  :icon="faCircleQuestion"
+                  :color="iconColor"
+                  :size="IconSize.sm"
+                />
+              </template>
 
               <template #content>
                 {{ questionMarkText }}

package/dist/components/AntDropdown.vue

@@ -1,43 +1,43 @@
 <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 {computed, ref} from 'vue';
 import {classesToObjectSyntax} from '../utils';
 import {vOnClickOutside} from '@vueuse/components';
 import {onKeyStroke} from '@vueuse/core';
+import {autoUpdate, flip, offset, useFloating, shift} from "@floating-ui/vue";
 
 const props = withDefaults(defineProps<{
   showDropdown: boolean,
-  position?: Position,
   dropdownClasses?: string | Record<string, boolean>,
-  contentPadding?: boolean
+  contentPadding?: boolean,
+  isClickable?: boolean,
 }>(), {
-  showDropdown: false,
   contentPadding: true,
-  position: Position.bottom,
   dropdownClasses: '',
+  isClickable: true,
 });
 const emit = defineEmits(['update:showDropdown']);
 
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+
+const {floatingStyles} = useFloating(reference, floating, {
+  transform: false,
+  placement: 'bottom-start',
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(8),
+    shift(),
+    flip({
+      fallbackPlacements: ['top-start'],
+    }),
+  ]
+});
+
 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,
+  'min-w-[10rem] z-[90]': true,
   ...classesToObjectSyntax(props.dropdownClasses)
 }));
 
-onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position');
-});
 onKeyStroke('Escape', (e: KeyboardEvent) => {
   if (props.showDropdown) {
     e.preventDefault();
@@ -45,31 +45,45 @@ onKeyStroke('Escape', (e: KeyboardEvent) => {
   }
 });
 
-function onClickOutside() {
-  emit('update:showDropdown', false);
-}
+const onClickOutside = [
+  (ev) => {
+    emit('update:showDropdown', false);
+  },
+  {
+    ignore: [floating]
+  }
+]
 </script>
 
 <template>
   <div
-    v-on-click-outside="onClickOutside"
-    class="relative inline-flex justify-center items-end z-40"
+    class="relative flex"
     data-e2e="dropdown"
   >
-    <slot/>
+    <div
+      ref="reference"
+      class="h-full w-full"
+      v-on-click-outside="onClickOutside"
+    >
+      <slot/>
+    </div>
 
     <Transition name="bounce">
-      <div
-        v-if="showDropdown"
-        :class="_dropdownClasses"
-      >
+      <teleport to="body">
         <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}"
+          v-if="showDropdown"
+          :class="_dropdownClasses"
+          ref="floating"
+          :style="floatingStyles"
         >
-          <slot name="content"/>
+          <div
+            class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col bg-white text-for-white-bg-font w-full overflow-hidden"
+            :class="{'p-2': contentPadding}"
+          >
+            <slot name="content"/>
+          </div>
         </div>
-      </div>
+      </teleport>
     </Transition>
   </div>
 </template>

package/dist/components/AntIcon.vue

@@ -3,10 +3,12 @@ import {computed, onMounted} from 'vue';
 import {handleEnumValidation} from '../handler';
 import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {IconSize} from './__types/AntIcon.types';
+import AntSkeleton from "./AntSkeleton.vue";
 
 const props = withDefaults(defineProps<{
   icon: IconDefinition;
   size?: IconSize;
+  skeleton?: boolean;
 
   /**
    * A css text-* class
@@ -14,11 +16,12 @@ const props = withDefaults(defineProps<{
   color?: string;
 }>(), {
   size: IconSize.sm,
-  color: 'text-for-white-bg-font'
+  color: 'text-for-white-bg-font',
+  skeleton: false,
 });
 
 const containerClasses = computed(() => ({
-  'inline-flex items-center justify-center': true,
+  'inline-flex items-center justify-center relative': 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,
@@ -44,13 +47,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <span
-    v-if="icon"
-    :class="containerClasses"
-  >
+  <span :class="containerClasses">
     <FaIcon
+      v-if="icon"
       :icon="icon"
       :class="iconClasses"
     />
+    <AntSkeleton v-if="skeleton" absolute rounded/>
   </span>
 </template>

package/dist/components/AntKeycap.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 // TODO:: Fix typo KeyCap with upperchar C
 import AntIcon from './AntIcon.vue';
+import AntSkeleton from "./AntSkeleton.vue";
 import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {IconSize} from './__types';
 import {AntKeycapSize} from './__types/AntKeycap.types';
@@ -9,9 +10,10 @@ import {computed} from 'vue';
 const props = withDefaults(defineProps<{
   icon?: IconDefinition
   size?: AntKeycapSize
-
+  skeleton?: boolean
 }>(), {
-  size: AntKeycapSize.sm
+  size: AntKeycapSize.sm,
+  skeleton: false
 });
 
 const classes = computed(() => {
@@ -35,16 +37,14 @@ const iconClasses = computed(() => {
 </script>
 
 <template>
-  <span
-    class="inline-flex justify-center items-center bg-neutral-300 rounded-sm text-center text-neutral-300-font font-medium"
-    :class="classes"
-  >
-    <AntIcon
+  <div class="inline-flex relative justify-center items-center bg-neutral-300 rounded-md text-center text-neutral-300-font font-medium" :class="classes">
+      <AntIcon
       v-if="icon"
       :icon="icon"
       :size="iconClasses"
-    />
+      />
 
-    <slot v-else/>
-  </span>
+      <slot v-else/>
+    <AntSkeleton v-if="skeleton" absolute rounded/>
+  </div>
 </template>

package/dist/components/AntListGroup.vue

@@ -3,9 +3,11 @@ import AntSkeleton from './AntSkeleton.vue';
 
 withDefaults(
   defineProps<{
-    skeleton?: boolean
+    skeleton?: boolean,
+    shadow?: boolean
   }>(), {
-    skeleton: false
+    skeleton: false,
+    shadow: false,
   }
 )
 </script>
@@ -16,7 +18,7 @@ withDefaults(
 
     <div
       class="flex flex-col rounded-md bg-neutral-300 gap-px relative border border-neutral-300 overflow-hidden"
-      :class="{'invisible': skeleton}"
+      :class="{'invisible': skeleton, 'shadow-md': shadow}"
     >
       <slot/>
     </div>

package/dist/components/AntModal.vue

@@ -2,14 +2,19 @@
 import {ref, useSlots, watch} from 'vue';
 import {faXmark} from '@fortawesome/free-solid-svg-icons';
 import AntButton from './buttons/AntButton.vue';
+import AntSkeleton from "./AntSkeleton.vue";
 
 const emit = defineEmits(['update:open', 'close']);
 const props = withDefaults(defineProps<{
   title: string,
   open: boolean,
-  fullscreen?: boolean
+  fullscreen?: boolean,
+  padding?: boolean
+  skeleton?: boolean
 }>(), {
-  fullscreen: false
+  fullscreen: false,
+  padding: false,
+  skeleton: false
 });
 const openModal = ref(props.open);
 const openBackground = ref(props.open);
@@ -53,21 +58,26 @@ function closeModal() {
           :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"
+            class="bg-white p-2 flex items-center justify-between"
           >
             <slot name="title">
-              {{ title }}
+              <div class="relative text-for-white-bg-font text-lg font-medium">
+                {{ title }}
+                <AntSkeleton v-if="skeleton" absolute rounded/>
+              </div>
             </slot>
 
             <AntButton
+              :skeleton="skeleton"
               :icon-left="faXmark"
-              :outlined="false"
-              filled
               @click="closeModal"
             />
           </div>
 
-          <div class="bg-white p-2 text-for-white-bg-font grow overflow-y-auto">
+          <div
+            class="bg-white text-for-white-bg-font grow overflow-y-auto"
+            :class="{'p-2': padding}"
+          >
             <slot/>
           </div>
 

package/dist/components/AntPopover.vue

@@ -1,57 +1,145 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {handleEnumValidation} from '../handler';
+import {computed, ref} from 'vue';
 import {Position} from '../enums/Position.enum';
 import {classesToObjectSyntax} from '../utils';
+import {arrow, autoUpdate, flip, offset, useFloating, shift, limitShift} from "@floating-ui/vue";
+import {vOnClickOutside} from '@vueuse/components';
+import {onKeyStroke} from "@vueuse/core";
 
 const props = withDefaults(defineProps<{
   showPopover: boolean,
   title?: string,
-  position?: Position,
+  isClickable?: boolean,
   popoverClasses?: string | Record<string, boolean>
 }>(), {
+  isClickable: true,
   showPopover: false,
-  position: Position.left,
+  preferredPosition: Position.top,
   popoverClasses: ''
 });
+
+const emit = defineEmits(['update:showPopover']);
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const floatingArrow = ref<HTMLElement | null>(null);
+
+const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
+  transform: false,
+  placement: 'right',
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(() => 16),
+    shift({
+      limiter: limitShift({
+        offset: {
+          mainAxis: 62,
+        }
+      }),
+    }),
+    flip({
+      fallbackPlacements: ['top', 'bottom', 'left'],
+    }),
+    arrow({element: floatingArrow})
+  ]
+});
+
+const side = computed(() => placement.value.split('-')[0]);
+const staticSide = computed(() => {
+  return {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  }[side.value] as string
+})
+const arrowTransform = computed(() => {
+  if (placement.value === 'bottom') {
+    return 'rotate(0deg)'
+  } else if (placement.value === 'top') {
+    return 'rotate(180deg)'
+  } else if (placement.value === 'left') {
+    return 'rotate(90deg)'
+  } else {
+    return 'rotate(270deg)'
+  }
+});
+
 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,
+  'z-[90] min-w-[10rem]': true,
   ...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,
+  'relative flex items-center justify-center': true,
 }));
 
-onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position');
+onKeyStroke('Escape', (e: KeyboardEvent) => {
+  if (props.showPopover) {
+    e.preventDefault();
+    emit('update:showPopover', false);
+  }
 });
+
+const onClickOutside = [
+  (ev) => {
+    emit('update:showPopover', false);
+  },
+  {
+    ignore: [floating]
+  }
+]
 </script>
 
 <template>
   <div class="relative inline-flex justify-center items-end">
-    <slot/>
+    <div
+      v-on-click-outside="onClickOutside"
+      ref="reference"
+    >
+      <slot/>
+    </div>
 
     <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">
+        <teleport to="body">
+          <div
+            :class="_popoverClasses"
+            ref="floating"
+            :style="floatingStyles"
+          >
+            <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col">
+
+              <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"
+              >
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </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
-              :class="classes"
+              class="flex items-center justify-center"
+              ref="floatingArrow"
+              :style="{
+            position: 'absolute',
+            left:
+              middlewareData.arrow?.x != null
+                ? `${middlewareData.arrow.x}px`
+                : '',
+            top:
+              middlewareData.arrow?.y != null
+                ? `${middlewareData.arrow.y}px`
+                : '',
+            [staticSide]: '-2.5px',
+            transform: arrowTransform
+            }"
             >
               <div
                 :class="itemContainerClasses"
@@ -66,12 +154,12 @@ onMounted(() => {
                 >
                   <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}"
+                    :class="{'fill-neutral-100': placement === Position.bottom, 'fill-white': placement === Position.top || placement === Position.right || placement === 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}"
+                    :class="{'stroke-neutral-100': placement === Position.bottom, 'stroke-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
                 </svg>
 
@@ -90,20 +178,8 @@ onMounted(() => {
                 </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>
+        </teleport>
       </template>
     </Transition>
   </div>

package/dist/components/AntSkeleton.vue

@@ -25,7 +25,7 @@ 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,
+  'rounded-full': props.roundedFull && props.grouped === Grouped.none,
   ...groupedClassList.value
 }));
 </script>