@antify/ui 2.2.1 → 2.2.4

package/dist/components/AntAccordion.vue

@@ -1,8 +1,12 @@
 <script lang="ts" setup>
 import AntAccordionItem from './AntAccordionItem.vue';
-import {onMounted, ref} from 'vue';
-import {CollapseStrategy} from './__types/AntAccordion.types';
-import AntSkeleton from "./AntSkeleton.vue";
+import {
+  onMounted, ref,
+} from 'vue';
+import {
+  CollapseStrategy,
+} from './__types/AntAccordion.types';
+import AntSkeleton from './AntSkeleton.vue';
 
 const props = withDefaults(defineProps<{
   items: {
@@ -20,7 +24,7 @@ const props = withDefaults(defineProps<{
   skeleton?: boolean;
 }>(), {
   collapseStrategy: CollapseStrategy.single,
-  skeleton: false
+  skeleton: false,
 });
 
 const openItems = ref<number[]>([]);
@@ -33,9 +37,14 @@ onMounted(() => {
 
 function onOpen(index: number) {
   if (props.collapseStrategy === CollapseStrategy.single) {
-    openItems.value = [index];
+    openItems.value = [
+      index,
+    ];
   } else {
-    openItems.value = [...openItems.value, index];
+    openItems.value = [
+      ...openItems.value,
+      index,
+    ];
   }
 }
 
@@ -58,10 +67,10 @@ function onClose(index: number) {
         :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"
+        :active-label-classes="item.activeLabelClasses"
+        :active-icon-classes="item.activeIconClasses"
+        :inactive-label-classes="item.inactiveLabelClasses"
+        :inactive-icon-classes="item.inactiveIconClasses"
         :skeleton="skeleton"
         @open="() => onOpen(index)"
         @close="() => onClose(index)"
@@ -78,9 +87,13 @@ function onClose(index: number) {
             name="item-content"
             v-bind="{item, index}"
           >
-            <div v-html="item.content"/>
+            <div v-html="item.content" />
 
-            <AntSkeleton v-if="skeleton" absolute rounded/>
+            <AntSkeleton
+              v-if="skeleton"
+              absolute
+              rounded
+            />
           </slot>
         </div>
       </AntAccordionItem>

package/dist/components/AntAccordionItem.vue

@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
+import {
+  faAngleDown, faAngleUp, faQuestionCircle,
+} from '@fortawesome/free-solid-svg-icons';
 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";
+import {
+  IconSize,
+} from './__types/AntIcon.types';
+import {
+  computed,
+} from 'vue';
+import AntSkeleton from '../components/AntSkeleton.vue';
 
 const props = withDefaults(defineProps<{
   isOpen: boolean;
@@ -25,14 +31,17 @@ const props = withDefaults(defineProps<{
   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'
+  inactiveIconClasses: 'text-for-white-bg-font',
 });
-const emit = defineEmits(['close', 'open']);
+const emit = defineEmits([
+  'close',
+  'open',
+]);
 
 // TODO:: Stehengeblieben: delays machen
 function onClick() {
   if (props.skeleton) {
-    return
+    return;
   }
 
   if (props.isOpen) {
@@ -45,8 +54,8 @@ function onClick() {
 const labelClasses = computed(() => ({
   [props.activeLabelClasses]: props.isOpen,
   [props.inactiveLabelClasses]: !props.isOpen,
-  'cursor-pointer': !props.skeleton
-}))
+  'cursor-pointer': !props.skeleton,
+}));
 </script>
 
 <template>
@@ -63,7 +72,10 @@ const labelClasses = computed(() => ({
         class="flex justify-between items-center"
       >
         <div class="flex items-center gap-2">
-          <slot name="icon-left" v-bind="{isOpen}">
+          <slot
+            name="icon-left"
+            v-bind="{isOpen}"
+          >
             <AntIcon
               v-if="iconLeft"
               :size="IconSize.sm"
@@ -73,12 +85,15 @@ const labelClasses = computed(() => ({
             />
           </slot>
 
-
           <div class="relative">
             <div class="text-sm font-semibold">
               {{ label }}
             </div>
-            <AntSkeleton v-if="skeleton" absolute rounded/>
+            <AntSkeleton
+              v-if="skeleton"
+              absolute
+              rounded
+            />
           </div>
         </div>
 
@@ -102,7 +117,7 @@ const labelClasses = computed(() => ({
           class="text-sm bg-white text-for-white-bg-font"
           :class="{'p-2': contentPadding}"
         >
-          <slot/>
+          <slot />
         </div>
       </Transition>
     </div>

package/dist/components/AntAlert.vue

@@ -1,30 +1,40 @@
 <script lang="ts" setup>
-import {computed, onMounted, useSlots} from 'vue';
-import {handleEnumValidation} from '../handler';
+import {
+  computed, onMounted, useSlots,
+} from 'vue';
+import {
+  handleEnumValidation,
+} from '../handler';
 import {
   faCheckCircle,
   faCircleQuestion,
   faExclamationCircle,
   faExclamationTriangle,
   faInfoCircle,
-  faXmark
+  faXmark,
 } from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntTooltip from './AntTooltip.vue';
 import AntSkeleton from './AntSkeleton.vue';
-import {InputState, Position} from '../enums';
-import {IconSize} from './__types';
+import {
+  InputState, Position,
+} from '../enums';
+import {
+  IconSize,
+} from './__types';
 
-defineEmits(['close']);
+defineEmits([
+  'close',
+]);
 
 const props = withDefaults(defineProps<{
-  title?: string | null,
-  state?: InputState,
-  icon?: boolean,
-  expanded?: boolean,
-  questionMarkText?: string | null,
-  skeleton?: boolean,
-  dismissBtn?: boolean,
+  title?: string | null;
+  state?: InputState;
+  icon?: boolean;
+  expanded?: boolean;
+  questionMarkText?: string | null;
+  skeleton?: boolean;
+  dismissBtn?: boolean;
 }>(), {
   title: null,
   state: InputState.base,
@@ -114,7 +124,7 @@ onMounted(() => {
       <div class="flex gap-2">
         <div v-if="hasQuestionMark">
           <slot name="questionMarkText">
-            <AntTooltip >
+            <AntTooltip>
               <template #reference>
                 <AntIcon
                   :icon="faCircleQuestion"
@@ -142,7 +152,7 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>

package/dist/components/AntCard.vue

@@ -1,34 +1,46 @@
 <script setup lang="ts">
-import {computed} from 'vue';
-import {Size} from '../enums/Size.enum';
+import {
+  computed,
+} from 'vue';
+import {
+  Size,
+} from '../enums/Size.enum';
+import AntSkeleton from './AntSkeleton.vue';
 
 const props = withDefaults(defineProps<{
   size?: Size;
   padding?: boolean;
   expanded?: boolean;
+  skeleton?: boolean;
 }>(), {
   size: Size.md,
   padding: true,
-  expanded: false
+  expanded: false,
+  skeleton: false,
 });
 
 const cardClass = computed(() => ({
-    'inline-block': true,
-    'w-full': props.expanded,
-    'p-0': !props.padding,
-    'p-2.5': props.size === Size.lg && props.padding,
-    'p-2': props.size === Size.md && props.padding,
-    'p-1.5': props.size === Size.sm || props.size === Size.xs && props.padding,
-    'p-1': props.size === Size.xs2 && props.padding,
-  })
-);
+  'inline-block': true,
+  'w-full': props.expanded,
+  'p-0': !props.padding,
+  'p-2.5': props.size === Size.lg && props.padding,
+  'p-2': props.size === Size.md && props.padding,
+  'p-1.5': props.size === Size.sm || props.size === Size.xs && props.padding,
+  'p-1': props.size === Size.xs2 && props.padding,
+}));
 </script>
 
 <template>
   <div
     :class="cardClass"
-    class="bg-white border border-base-300 rounded-md"
+    class="bg-white outline outline-offset-[-1px] outline-base-300 rounded-md relative"
   >
-    <slot/>
+    <slot />
+
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
   </div>
 </template>

package/dist/components/AntContent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
-  padding?: boolean
+  padding?: boolean;
 }>(), {
-  padding: true
-})
+  padding: true,
+});
 </script>
 
 <template>
@@ -11,6 +11,6 @@ withDefaults(defineProps<{
     :class="{ 'p-2.5': padding }"
     class="bg-white overflow-auto"
   >
-    <slot/>
+    <slot />
   </div>
 </template>

package/dist/components/AntDropdown.vue

@@ -1,26 +1,40 @@
 <script lang="ts" setup>
-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";
+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,
-  dropdownClasses?: string | Record<string, boolean>,
-  contentPadding?: boolean,
-  isClickable?: boolean,
+  showDropdown: boolean;
+  dropdownClasses?: string | Record<string, boolean>;
+  contentPadding?: boolean;
+  isClickable?: boolean;
 }>(), {
   contentPadding: true,
   dropdownClasses: '',
   isClickable: true,
 });
-const emit = defineEmits(['update:showDropdown']);
+const emit = defineEmits([
+  'update:showDropdown',
+]);
 
-const reference = ref<HTMLElement | null>(null)
-const floating = ref<HTMLElement | null>(null)
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
 
-const {floatingStyles} = useFloating(reference, floating, {
+const {
+  floatingStyles,
+} = useFloating(reference, floating, {
   transform: false,
   placement: 'bottom-start',
   whileElementsMounted: autoUpdate,
@@ -28,14 +42,16 @@ const {floatingStyles} = useFloating(reference, floating, {
     offset(8),
     shift(),
     flip({
-      fallbackPlacements: ['top-start'],
+      fallbackPlacements: [
+        'top-start',
+      ],
     }),
-  ]
+  ],
 });
 
 const _dropdownClasses = computed(() => ({
   'min-w-[10rem] z-[50]': true,
-  ...classesToObjectSyntax(props.dropdownClasses)
+  ...classesToObjectSyntax(props.dropdownClasses),
 }));
 
 onKeyStroke('Escape', (e: KeyboardEvent) => {
@@ -50,9 +66,11 @@ const onClickOutside = [
     emit('update:showDropdown', false);
   },
   {
-    ignore: [floating]
-  }
-]
+    ignore: [
+      floating,
+    ],
+  },
+];
 </script>
 
 <template>
@@ -62,25 +80,25 @@ const onClickOutside = [
   >
     <div
       ref="reference"
-      class="h-full w-full"
       v-on-click-outside="onClickOutside"
+      class="h-full w-full"
     >
-      <slot/>
+      <slot />
     </div>
 
     <Transition name="bounce">
       <teleport to="body">
         <div
           v-if="showDropdown"
-          :class="_dropdownClasses"
           ref="floating"
+          :class="_dropdownClasses"
           :style="floatingStyles"
         >
           <div
             class="shadow-lg border border-base-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"/>
+            <slot name="content" />
           </div>
         </div>
       </teleport>

package/dist/components/AntIcon.vue

@@ -1,9 +1,17 @@
 <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';
-import AntSkeleton from "./AntSkeleton.vue";
+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;
@@ -53,6 +61,10 @@ onMounted(() => {
       :icon="icon"
       :class="iconClasses"
     />
-    <AntSkeleton v-if="skeleton" absolute rounded/>
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
   </span>
 </template>

package/dist/components/AntKeycap.vue

@@ -1,19 +1,27 @@
 <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';
-import {computed} from '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';
+import {
+  computed,
+} from 'vue';
 
 const props = withDefaults(defineProps<{
-  icon?: IconDefinition
-  size?: AntKeycapSize
-  skeleton?: boolean
+  icon?: IconDefinition;
+  size?: AntKeycapSize;
+  skeleton?: boolean;
 }>(), {
   size: AntKeycapSize.sm,
-  skeleton: false
+  skeleton: false,
 });
 
 const classes = computed(() => {
@@ -27,9 +35,9 @@ const classes = computed(() => {
 const iconClasses = computed(() => {
   switch (props.size) {
     case AntKeycapSize.md:
-      return IconSize.md
+      return IconSize.md;
     case AntKeycapSize.sm:
-      return IconSize.sm
+      return IconSize.sm;
     default:
       return IconSize.xs;
   }
@@ -37,14 +45,21 @@ const iconClasses = computed(() => {
 </script>
 
 <template>
-  <div class="inline-flex relative justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium" :class="classes">
-      <AntIcon
+  <div
+    class="inline-flex relative justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium"
+    :class="classes"
+  >
+    <AntIcon
       v-if="icon"
       :icon="icon"
       :size="iconClasses"
-      />
+    />
 
-      <slot v-else/>
-    <AntSkeleton v-if="skeleton" absolute rounded/>
+    <slot v-else />
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
   </div>
 </template>

package/dist/components/AntListGroup.vue

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

package/dist/components/AntListGroupItem.vue

@@ -1,9 +1,19 @@
 <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 {
+  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<{
@@ -45,7 +55,7 @@ const contentWrapperClasses = computed(() => {
   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
+    [variants[props.state]]: props.to !== undefined,
   };
 });
 
@@ -66,17 +76,17 @@ onMounted(() => {
           v-if="iconLeft"
           name="icon-left"
         >
-          <AntIcon :icon="iconLeft"/>
+          <AntIcon :icon="iconLeft" />
         </slot>
 
-        <slot/>
+        <slot />
       </div>
 
       <slot
         v-if="iconRight"
         name="icon-right"
       >
-        <AntIcon :icon="iconRight"/>
+        <AntIcon :icon="iconRight" />
       </slot>
     </div>
   </component>