@antify/ui 2.2.1 → 2.2.3

package/dist/components/AntTooltip.vue

@@ -1,14 +1,24 @@
 <script lang="ts" setup>
-import {computed, ref} from 'vue';
-import {InputState} from '../enums';
-import {arrow, autoUpdate, flip, offset, useFloating} from "@floating-ui/vue";
-import {hasSlotContent} from '../utils';
-import {classesToObjectSyntax} from '../utils';
+import {
+  computed, ref,
+} from 'vue';
+import {
+  InputState,
+} from '../enums';
+import {
+  arrow, autoUpdate, flip, offset, useFloating,
+} from '@floating-ui/vue';
+import {
+  hasSlotContent,
+} from '../utils';
+import {
+  classesToObjectSyntax,
+} from '../utils';
 
 const props = withDefaults(defineProps<{
-  state?: InputState,
-  delay?: number,
-  tooltipClasses?: string | Record<string, boolean>
+  state?: InputState;
+  delay?: number;
+  tooltipClasses?: string | Record<string, boolean>;
   disabled?: boolean;
 }>(), {
   state: InputState.base,
@@ -17,46 +27,54 @@ const props = withDefaults(defineProps<{
   disabled: false,
 });
 
-const floatOpen = ref<boolean>(false)
+const floatOpen = ref<boolean>(false);
 const clickLock = ref(false);
 const timeout = ref<number | undefined>();
-const hoverFloat = ref<boolean>(false)
-const hoverReference = ref<boolean>(false)
+const hoverFloat = ref<boolean>(false);
+const hoverReference = ref<boolean>(false);
 
-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 floatingArrow = ref<HTMLElement | null>(null);
 
-const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
+const {
+  floatingStyles, middlewareData, placement,
+} = useFloating(reference, floating, {
   placement: 'top',
   whileElementsMounted: autoUpdate,
   middleware: [
     offset(() => 16),
     flip({
-      fallbackPlacements: ['bottom', 'left', 'right'],
+      fallbackPlacements: [
+        'bottom',
+        'left',
+        'right',
+      ],
       fallbackAxisSideDirection: 'none',
     }),
-    arrow({element: floatingArrow})
-  ]
+    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
-})
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+  }[side.value] as string;
+});
 const arrowTransform = computed(() => {
   if (placement.value === 'bottom') {
-    return 'rotate(0deg)'
+    return 'rotate(0deg)';
   } else if (placement.value === 'top') {
-    return 'rotate(180deg)'
+    return 'rotate(180deg)';
   } else if (placement.value === 'left') {
-    return 'rotate(90deg)'
+    return 'rotate(90deg)';
   } else {
-    return 'rotate(270deg)'
+    return 'rotate(270deg)';
   }
 });
 const svgPathClasses = computed(() => {
@@ -68,7 +86,9 @@ const svgPathClasses = computed(() => {
     [InputState.warning]: 'fill-warning-500 stroke-warning-500',
   };
 
-  return {[variants[props.state]]: true};
+  return {
+    [variants[props.state]]: true,
+  };
 });
 const arrowSvgPathClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -79,7 +99,9 @@ const arrowSvgPathClasses = computed(() => {
     [InputState.warning]: 'stroke-warning-500',
   };
 
-  return {[variants[props.state]]: true};
+  return {
+    [variants[props.state]]: true,
+  };
 });
 const contentClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -90,11 +112,13 @@ const contentClasses = computed(() => {
     [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
   };
 
-  return {[variants[props.state]]: true};
+  return {
+    [variants[props.state]]: true,
+  };
 });
 const _tooltipClasses = computed(() => ({
   'w-max inline-flex shadow-lg text-sm z-[90] rounded-md': true,
-  ...classesToObjectSyntax(props.tooltipClasses)
+  ...classesToObjectSyntax(props.tooltipClasses),
 }));
 
 function onMouseOver() {
@@ -112,7 +136,7 @@ function onMouseLeave() {
 
   timeout.value = setTimeout(() => {
     if (!hoverFloat.value) {
-      floatOpen.value = false
+      floatOpen.value = false;
       clickLock.value = false;
     }
   }, props.delay) as unknown as number;
@@ -129,7 +153,7 @@ function onMouseLeaveTooltip() {
 
   timeout.value = setTimeout(() => {
     if (!hoverReference.value) {
-      floatOpen.value = false
+      floatOpen.value = false;
       clickLock.value = false;
     }
   }, props.delay) as unknown as number;
@@ -154,46 +178,46 @@ function onClick() {
       @mouseleave="() => onMouseLeave()"
       @click="() => onClick()"
     >
-      <slot/>
+      <slot />
     </div>
 
     <teleport to="body">
       <div
         v-if="floatOpen && hasSlotContent($slots.content) && !disabled"
-        :class="_tooltipClasses"
         ref="floating"
+        :class="_tooltipClasses"
         :style="{
-      ...floatingStyles,
-        display: floatOpen
-          ? 'block'
-          : 'none',
+          ...floatingStyles,
+          display: floatOpen
+            ? 'block'
+            : 'none',
         }"
+        data-e2e="tooltip-content"
         @mouseenter="() => onMouseEnterTooltip()"
         @mouseleave="() => onMouseLeaveTooltip()"
-        data-e2e="tooltip-content"
       >
         <div
           class="p-2 rounded-md border"
           :class="contentClasses"
         >
-          <slot name="content"/>
+          <slot name="content" />
         </div>
         <div
-          class="flex items-center justify-center"
           ref="floatingArrow"
+          class="flex items-center justify-center"
           :style="{
-        position: 'absolute',
-        left:
-          middlewareData.arrow?.x != null
-            ? `${middlewareData.arrow.x}px`
-            : '',
-        top:
-          middlewareData.arrow?.y != null
-            ? `${middlewareData.arrow.y}px`
-            : '',
-        [staticSide]: '-2px',
-        transform: arrowTransform
-      }"
+            position: 'absolute',
+            left:
+              middlewareData.arrow?.x != null
+                ? `${middlewareData.arrow.x}px`
+                : '',
+            top:
+              middlewareData.arrow?.y != null
+                ? `${middlewareData.arrow.y}px`
+                : '',
+            [staticSide]: '-2px',
+            transform: arrowTransform
+          }"
         >
           <div
             class="flex items-center justify-center"

package/dist/components/__stories/AntAccordion.stories.js

@@ -162,8 +162,8 @@ const mixedVariants = exports.mixedVariants = {
     items: [{
       label: "First entry"
     }, {
-      label: `Second entry`,
-      content: `<div class="bg-success-100 p-4"><span class="font-bold text-success-500">Success</span> Content</div>`,
+      label: "Second entry",
+      content: '<div class="bg-success-100 p-4"><span class="font-bold text-success-500">Success</span> Content</div>',
       iconLeft: true,
       activeLabelClasses: "bg-success-500 text-success-500-font",
       activeIconClasses: "text-success-500-font",
@@ -172,14 +172,14 @@ const mixedVariants = exports.mixedVariants = {
       contentPadding: false
     }, {
       label: "Third entry",
-      content: `<div class="bg-warning-100 p-4"><span class="font-bold text-warning-500">Warning</span> Content</div>`,
+      content: '<div class="bg-warning-100 p-4"><span class="font-bold text-warning-500">Warning</span> Content</div>',
       activeLabelClasses: "bg-warning-500 text-warning-500-font",
       activeIconClasses: "text-warning-500-font",
       inactiveLabelClasses: "bg-warning-200 text-warning-200-font",
       inactiveIconClasses: "text-warning-200-font"
     }, {
       label: "Fourth entry",
-      content: `<div class="bg-danger-100 p-8"><span class="font-bold text-danger-500">Danger</span> Content</div>`,
+      content: '<div class="bg-danger-100 p-8"><span class="font-bold text-danger-500">Danger</span> Content</div>',
       activeLabelClasses: "bg-danger-500 text-danger-500-font",
       activeIconClasses: "text-danger-500-font",
       inactiveLabelClasses: "bg-danger-200 text-danger-200-font",

package/dist/components/__stories/AntAccordion.stories.mjs

@@ -1,16 +1,28 @@
 import AntAccordion from "../AntAccordion.vue";
 import AntAccordionItem from "../AntAccordionItem.vue";
-import { CollapseStrategy } from "../__types/AntAccordion.types.mjs";
+import {
+  CollapseStrategy
+} from "../__types/AntAccordion.types.mjs";
 import AntIcon from "../AntIcon.vue";
-import { faEye } from "@fortawesome/free-solid-svg-icons";
+import {
+  faEye
+} from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Accordion",
   component: AntAccordion,
-  subcomponents: { AntAccordionItem },
-  parameters: { controls: { sort: "requiredFirst" } },
+  subcomponents: {
+    AntAccordionItem
+  },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     collapseStrategy: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(CollapseStrategy)
     }
   }
@@ -18,12 +30,19 @@ const meta = {
 export default meta;
 export const Docs = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args) => ({
-    components: { AntAccordion, AntAccordionItem },
+    components: {
+      AntAccordion,
+      AntAccordionItem
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="p-4">
@@ -54,9 +73,14 @@ export const Docs = {
 };
 export const CustomContent = {
   render: (args) => ({
-    components: { AntAccordion, AntAccordionItem },
+    components: {
+      AntAccordion,
+      AntAccordionItem
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="p-4">
@@ -103,12 +127,21 @@ export const htmlInContent = {
 };
 export const mixedVariants = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args) => ({
-    components: { AntAccordion, AntAccordionItem, AntIcon },
+    components: {
+      AntAccordion,
+      AntAccordionItem,
+      AntIcon
+    },
     setup() {
-      return { args, faEye };
+      return {
+        args,
+        faEye
+      };
     },
     template: `
       <AntAccordion
@@ -136,8 +169,8 @@ export const mixedVariants = {
         label: "First entry"
       },
       {
-        label: `Second entry`,
-        content: `<div class="bg-success-100 p-4"><span class="font-bold text-success-500">Success</span> Content</div>`,
+        label: "Second entry",
+        content: '<div class="bg-success-100 p-4"><span class="font-bold text-success-500">Success</span> Content</div>',
         iconLeft: true,
         activeLabelClasses: "bg-success-500 text-success-500-font",
         activeIconClasses: "text-success-500-font",
@@ -147,7 +180,7 @@ export const mixedVariants = {
       },
       {
         label: "Third entry",
-        content: `<div class="bg-warning-100 p-4"><span class="font-bold text-warning-500">Warning</span> Content</div>`,
+        content: '<div class="bg-warning-100 p-4"><span class="font-bold text-warning-500">Warning</span> Content</div>',
         activeLabelClasses: "bg-warning-500 text-warning-500-font",
         activeIconClasses: "text-warning-500-font",
         inactiveLabelClasses: "bg-warning-200 text-warning-200-font",
@@ -155,7 +188,7 @@ export const mixedVariants = {
       },
       {
         label: "Fourth entry",
-        content: `<div class="bg-danger-100 p-8"><span class="font-bold text-danger-500">Danger</span> Content</div>`,
+        content: '<div class="bg-danger-100 p-8"><span class="font-bold text-danger-500">Danger</span> Content</div>',
         activeLabelClasses: "bg-danger-500 text-danger-500-font",
         activeIconClasses: "text-danger-500-font",
         inactiveLabelClasses: "bg-danger-200 text-danger-200-font",

package/dist/components/__stories/AntAlert.stories.mjs

@@ -1,12 +1,20 @@
 import AntAlert from "../AntAlert.vue";
-import { InputState } from "../../enums/index.mjs";
+import {
+  InputState
+} from "../../enums/index.mjs";
 const meta = {
   title: "Components/Alert",
   component: AntAlert,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     }
   }
@@ -14,12 +22,17 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntAlert },
+    components: {
+      AntAlert
+    },
     setup() {
       function logClick() {
         console.log("Clicked close icon");
       }
-      return { args, logClick };
+      return {
+        args,
+        logClick
+      };
     },
     template: `
 			<AntAlert v-bind="args" @close="logClick">

package/dist/components/__stories/AntCard.stories.mjs

@@ -1,30 +1,47 @@
 import AntCard from "../AntCard.vue";
-import { Size } from "../../enums/index.mjs";
+import {
+  Size
+} from "../../enums/index.mjs";
 import AntFormGroup from "../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
 const meta = {
   title: "Components/Card",
   component: AntCard,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size)
     },
     padding: {
-      control: { type: "boolean" }
+      control: {
+        type: "boolean"
+      }
     },
     expanded: {
-      control: { type: "boolean" }
+      control: {
+        type: "boolean"
+      }
     }
   }
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntCard },
+    components: {
+      AntCard
+    },
     setup() {
-      return { args, Size };
+      return {
+        args,
+        Size
+      };
     },
     template: `
       <AntCard v-bind="args">
@@ -41,12 +58,21 @@ export const Docs = {
 };
 export const Summary = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args) => ({
-    components: { AntCard, AntFormGroup, AntFormGroupLabel },
+    components: {
+      AntCard,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
     setup() {
-      return { args, Size };
+      return {
+        args,
+        Size
+      };
     },
     template: `
       <AntFormGroup direction="column">

package/dist/components/__stories/AntContent.stories.mjs

@@ -2,18 +2,28 @@ import AntContent from "../AntContent.vue";
 const meta = {
   title: "Components/Content",
   component: AntContent,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {}
 };
 export default meta;
 export const Docs = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args) => ({
-    components: { AntContent },
+    components: {
+      AntContent
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
 			<div class="outline outline-base-300">

package/dist/components/__stories/AntDropdown.stories.mjs

@@ -1,11 +1,19 @@
 import AntDropdown from "../AntDropdown.vue";
 import AntButton from "../buttons/AntButton.vue";
 import AntTextInput from "../inputs/AntTextInput.vue";
-import { computed, onMounted, ref } from "vue";
+import {
+  computed,
+  onMounted,
+  ref
+} from "vue";
 const meta = {
   title: "Components/Dropdown",
   component: AntDropdown,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     contentPadding: {
       description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
@@ -15,7 +23,11 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntDropdown, AntButton, AntTextInput },
+    components: {
+      AntDropdown,
+      AntButton,
+      AntTextInput
+    },
     setup() {
       const showDropdown = computed({
         get() {
@@ -32,7 +44,11 @@ export const Docs = {
           scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
         }
       });
-      return { args, showDropdown, scrollContainer };
+      return {
+        args,
+        showDropdown,
+        scrollContainer
+      };
     },
     template: `
       <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">

package/dist/components/__stories/AntIcon.stories.mjs

@@ -1,21 +1,35 @@
 import AntIcon from "../AntIcon.vue";
-import { faTag } from "@fortawesome/free-solid-svg-icons";
-import { IconSize } from "../__types/AntIcon.types.mjs";
+import {
+  faTag
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  IconSize
+} from "../__types/AntIcon.types.mjs";
 const meta = {
   title: "Components/Icon",
   component: AntIcon,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(IconSize)
     },
     icon: {
-      control: { type: "none" },
+      control: {
+        type: "none"
+      },
       description: "Use Font-awesome Icons."
     },
     color: {
-      control: { type: "text" },
+      control: {
+        type: "text"
+      },
       description: "A text-* css class to change the color of the icon."
     }
   }
@@ -23,9 +37,13 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntIcon },
+    components: {
+      AntIcon
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: '<AntIcon v-bind="args"/>'
   }),
@@ -35,9 +53,13 @@ export const Docs = {
 };
 export const Size = {
   render: (args) => ({
-    components: { AntIcon },
+    components: {
+      AntIcon
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="flex flex-col gap-2.5">
@@ -56,9 +78,13 @@ export const Size = {
 };
 export const Color = {
   render: (args) => ({
-    components: { AntIcon },
+    components: {
+      AntIcon
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="flex items-center gap-2.5">