@antify/ui 1.0.4 → 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: {
@@ -9,10 +10,17 @@ const props = withDefaults(defineProps<{
     content?: string;
     isOpen?: boolean;
     iconLeft?: boolean;
+    contentPadding?: boolean;
+    activeLabelClasses?: string;
+    activeIconClasses?: string;
+    inactiveLabelClasses?: string;
+    inactiveIconClasses?: string;
   }[];
   collapseStrategy?: CollapseStrategy;
+  skeleton?: boolean;
 }>(), {
-  collapseStrategy: CollapseStrategy.single
+  collapseStrategy: CollapseStrategy.single,
+  skeleton: false
 });
 
 const openItems = ref<number[]>([]);
@@ -49,15 +57,32 @@ function onClose(index: number) {
         :label="item.label"
         :is-open="openItems.includes(index)"
         :icon-left="item.iconLeft"
+        :content-padding="item.contentPadding"
+        :activeLabelClasses="item.activeLabelClasses"
+        :activeIconClasses="item.activeIconClasses"
+        :inactiveLabelClasses="item.inactiveLabelClasses"
+        :inactiveIconClasses="item.inactiveIconClasses"
+        :skeleton="skeleton"
         @open="() => onOpen(index)"
         @close="() => onClose(index)"
       >
-        <slot
-          name="item-content"
-          v-bind="{item, index}"
-        >
-          <div v-html="item.content"/>
-        </slot>
+        <template #icon-left="{isOpen}">
+          <slot
+            name="icon-left"
+            v-bind="{item, index, isOpen}"
+          />
+        </template>
+
+        <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

@@ -3,32 +3,56 @@ import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-
 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;
   label?: string;
   collapseTransition?: string;
-  iconLeft: boolean;
+  iconLeft?: boolean;
+  contentPadding?: boolean;
+  activeLabelClasses?: string;
+  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',
+  inactiveIconClasses: 'text-for-white-bg-font'
 });
 const emit = defineEmits(['close', 'open']);
 
 // TODO:: Stehengeblieben: delays machen
 function onClick() {
+  if (props.skeleton) {
+    return
+  }
+
   if (props.isOpen) {
     emit('close');
   } else {
     emit('open');
   }
 }
+
+const labelClasses = computed(() => ({
+  [props.activeLabelClasses]: props.isOpen,
+  [props.inactiveLabelClasses]: !props.isOpen,
+  'cursor-pointer': !props.skeleton
+}))
 </script>
 
 <template>
   <div
-    class="p-2 select-none cursor-pointer transition-colors"
-    :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
+    class="p-2 select-none transition-colors"
+    :class="labelClasses"
     @click="onClick"
   >
     <slot
@@ -36,24 +60,32 @@ function onClick() {
       v-bind="{ isOpen: isOpen }"
     >
       <div
-        class="hover:text-gray-800 flex justify-between items-center"
+        class="flex justify-between items-center"
       >
         <div class="flex items-center gap-2">
-          <AntIcon
-            v-if="iconLeft"
-            :size="IconSize.sm"
-            :icon="faQuestionCircle"
-            :color="isOpen ? 'text-primary-500-font' : 'text-for-white-bg-font'"
-          />
+          <slot name="icon-left" v-bind="{isOpen}">
+            <AntIcon
+              v-if="iconLeft"
+              :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 ? 'text-primary-500-font' : undefined"
+          :color="isOpen ? activeIconClasses : inactiveIconClasses"
+          :skeleton="skeleton"
         />
       </div>
     </slot>
@@ -67,7 +99,8 @@ function onClick() {
       <Transition name="bounce">
         <div
           v-show="isOpen"
-          class="p-2 text-sm bg-white text-for-white-bg-font"
+          class="text-sm bg-white text-for-white-bg-font"
+          :class="{'p-2': contentPadding}"
         >
           <slot/>
         </div>

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';
@@ -8,38 +9,42 @@ import {computed} from 'vue';
 
 const props = withDefaults(defineProps<{
   icon?: IconDefinition
-  size: AntKeycapSize
-
+  size?: AntKeycapSize
+  skeleton?: boolean
 }>(), {
-  size: AntKeycapSize.sm
+  size: AntKeycapSize.sm,
+  skeleton: false
 });
 
 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,
+    'px-1': true,
+    'test-sm min-w-6 h-6 ': props.size === AntKeycapSize.md,
+    'test-xs min-w-5 h-5': props.size === AntKeycapSize.sm,
+    'text-2xs min-w-4 h-4': props.size === AntKeycapSize.xs,
   };
 });
 const iconClasses = computed(() => {
-  if (props.size === AntKeycapSize.sm) {
-    return IconSize.sm;
-  } else {
-    return IconSize.xs2;
+  switch (props.size) {
+    case AntKeycapSize.md:
+      return IconSize.md
+    case AntKeycapSize.sm:
+      return IconSize.sm
+    default:
+      return IconSize.xs;
   }
 });
 </script>
 
 <template>
-  <span
-    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-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>