@antify/ui 1.1.0 → 1.3.0

package/dist/components/AntTooltip.vue

@@ -1,57 +1,61 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref, getCurrentInstance} from 'vue';
-import {handleEnumValidation} from '../handler';
-import {InputState, Position} from '../enums';
-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<{
-  position?: Position
+  state?: InputState,
+  delay?: number,
   tooltipClasses?: string | Record<string, boolean>
-  state?: InputState
-  expanded?: boolean
-  delay?: number
 }>(), {
-  position: Position.left,
-  tooltipClasses: '',
   state: InputState.base,
-  expanded: false,
-  delay: 800
+  delay: 600,
+  tooltipClasses: '',
 });
-const visible = ref(false);
-const _tooltipClasses = computed(() => ({
-  'absolute w-max inline-flex': true,
-  // Position
-  'bottom-full pb-3.5': props.position === Position.top,
-  'top-full pt-3.5': props.position === Position.bottom,
-  'right-full pr-3.5': props.position === Position.left,
-  'left-full pl-3.5': props.position === Position.right,
-  ...classesToObjectSyntax(props.tooltipClasses)
-}));
-const classes = computed(() => ({
-  'z-10 absolute flex': true,
-  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
-  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
-  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
-  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': 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-center -rotate-90': props.position === Position.right,
-  'justify-center rotate-90': props.position === Position.left,
-}));
-const contentClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
-    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
-    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
-    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-  };
 
-  return {[variants[props.state]]: true};
+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 reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const floatingArrow = ref<HTMLElement | null>(null);
+
+const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
+  placement: 'top',
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(() => 16),
+    flip({
+      fallbackPlacements: ['bottom', 'left', 'right'],
+      fallbackAxisSideDirection: 'none',
+    }),
+    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 svgPathClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -75,72 +79,122 @@ const arrowSvgPathClasses = computed(() => {
 
   return {[variants[props.state]]: true};
 });
-const timeout = ref<number | undefined>();
-const clickLock = ref(false);
-const uuid = ref(getCurrentInstance()?.uid);
+const contentClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
+    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
+    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+  };
 
-onMounted(() => {
-  handleEnumValidation(props.position, Position, 'position');
-  handleEnumValidation(props.state, InputState, 'state');
+  return {[variants[props.state]]: true};
 });
+const _tooltipClasses = computed(() => ({
+  'w-max inline-flex shadow-lg text-sm z-[90] rounded-md': true,
+  ...classesToObjectSyntax(props.tooltipClasses)
+}));
 
 function onMouseOver() {
-  if (visible.value || clickLock.value) {
-    return;
-  }
-
   /**
    * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
    * we clear the timeout before setting a new one.
    */
   clearTimeout(timeout.value);
 
-  timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
+  timeout.value = setTimeout(() => floatOpen.value = true, props.delay) as unknown as number;
 }
 
 function onMouseLeave() {
   clearTimeout(timeout.value);
 
-  visible.value = false;
-  clickLock.value = false;
+  timeout.value = setTimeout(() => {
+    if (!hoverFloat.value) {
+      floatOpen.value = false
+      clickLock.value = false;
+    }
+  }, props.delay) as unknown as number;
+}
+
+function onMouseEnterTooltip() {
+  clearTimeout(timeout.value);
+
+  floatOpen.value = true;
+}
+
+function onMouseLeaveTooltip() {
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => {
+    if (!hoverReference.value) {
+      floatOpen.value = false
+      clickLock.value = false;
+    }
+  }, props.delay) as unknown as number;
 }
 
 function onClick() {
   clearTimeout(timeout.value);
 
-  visible.value = false;
+  floatOpen.value = false;
   clickLock.value = true;
 }
 </script>
 
 <template>
   <div
-    :key="uuid"
-    class="relative justify-center items-center"
-    :class="{'flex w-full': props.expanded, 'inline-flex': !props.expanded}"
+    class="relative"
     data-e2e="tooltip"
-    @mouseover="() => onMouseOver()"
-    @mouseleave="() => onMouseLeave()"
   >
     <div
-      class="w-full"
+      ref="reference"
+      @mouseenter="() => onMouseOver()"
+      @mouseleave="() => onMouseLeave()"
       @click="() => onClick()"
     >
       <slot/>
     </div>
 
-    <div
-      v-if="visible && hasSlotContent($slots.content)"
-      :class="_tooltipClasses"
-    >
+    <teleport to="body">
       <div
-        class="shadow-lg text-sm relative"
+        v-if="floatOpen && hasSlotContent($slots.content)"
+        :class="_tooltipClasses"
+        ref="floating"
+        :style="{
+      ...floatingStyles,
+        display: floatOpen
+          ? 'block'
+          : 'none',
+        }"
+        @mouseenter="() => onMouseEnterTooltip()"
+        @mouseleave="() => onMouseLeaveTooltip()"
+        data-e2e="tooltip-content"
       >
         <div
-          :class="classes"
+          class="p-2 rounded-md border"
+          :class="contentClasses"
+        >
+          <slot name="content"/>
+        </div>
+        <div
+          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]: '-2px',
+        transform: arrowTransform
+      }"
         >
           <div
-            :class="itemContainerClasses"
+            class="flex items-center justify-center"
           >
             <svg
               class="absolute mt-[.5px]"
@@ -176,14 +230,7 @@ function onClick() {
             </svg>
           </div>
         </div>
-
-        <div
-          class="p-2 rounded-md border"
-          :class="contentClasses"
-        >
-          <slot name="content"/>
-        </div>
       </div>
-    </div>
+    </teleport>
   </div>
 </template>

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

@@ -145,15 +145,22 @@ const mixedVariants = exports.mixedVariants = {
       >
         <template #icon-left="{item, index, isOpen}">
           <AntIcon
+            v-if="index === 0"
             :class="{'text-success-500-font': isOpen, 'text-success-200-font': !isOpen}"
             :icon="faEye"/>
         </template>
+
+        <template #item-content="{index}">
+          <div v-if="index === 0">
+            This content comes from <code>#item-content</code> slot instead of <code>items.content</code> prop. <br>
+            This should not be in skeleton state. The user need to handle it self.
+          </div>
+        </template>
       </AntAccordion>`
   }),
   args: {
     items: [{
-      label: "First entry",
-      content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      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>`,
@@ -178,6 +185,8 @@ const mixedVariants = exports.mixedVariants = {
       inactiveLabelClasses: "bg-danger-200 text-danger-200-font",
       inactiveIconClasses: "text-danger-200-font",
       contentPadding: false
-    }]
+    }],
+    skeleton: true,
+    collapseStrategy: _AntAccordion2.CollapseStrategy.multiple
   }
 };

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

@@ -117,16 +117,23 @@ export const mixedVariants = {
       >
         <template #icon-left="{item, index, isOpen}">
           <AntIcon
+            v-if="index === 0"
             :class="{'text-success-500-font': isOpen, 'text-success-200-font': !isOpen}"
             :icon="faEye"/>
         </template>
+
+        <template #item-content="{index}">
+          <div v-if="index === 0">
+            This content comes from <code>#item-content</code> slot instead of <code>items.content</code> prop. <br>
+            This should not be in skeleton state. The user need to handle it self.
+          </div>
+        </template>
       </AntAccordion>`
   }),
   args: {
     items: [
       {
-        label: "First entry",
-        content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+        label: "First entry"
       },
       {
         label: `Second entry`,
@@ -155,6 +162,8 @@ export const mixedVariants = {
         inactiveIconClasses: "text-danger-200-font",
         contentPadding: false
       }
-    ]
+    ],
+    skeleton: true,
+    collapseStrategy: CollapseStrategy.multiple
   }
 };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Docs = void 0;
 var _AntDropdown = _interopRequireDefault(require("../AntDropdown.vue"));
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
-var _Position = require("../../enums/Position.enum");
+var _AntTextInput = _interopRequireDefault(require("../inputs/AntTextInput.vue"));
 var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -18,12 +18,6 @@ const meta = {
     }
   },
   argTypes: {
-    position: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_Position.Position)
-    },
     contentPadding: {
       description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
     }
@@ -34,7 +28,8 @@ const Docs = exports.Docs = {
   render: args => ({
     components: {
       AntDropdown: _AntDropdown.default,
-      AntButton: _AntButton.default
+      AntButton: _AntButton.default,
+      AntTextInput: _AntTextInput.default
     },
     setup() {
       const showDropdown = (0, _vue.computed)({
@@ -45,27 +40,36 @@ const Docs = exports.Docs = {
           args.showDropdown = val;
         }
       });
+      const scrollContainer = (0, _vue.ref)(void 0);
+      (0, _vue.onMounted)(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
+        }
+      });
       return {
         args,
-        showDropdown
+        showDropdown,
+        scrollContainer
       };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
-              <template #content>
-                Lorem ipsum dolor sit amet, consetetur sadipscing
-                elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </template>
-              <template #default>
-                <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
-              </template>
-            </AntDropdown>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
+            <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
+
+            <template #content>
+              Lorem ipsum dolor sit amet, consetetur sadipscing
+              elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et dolore magna aliquyam erat, sed diam voluptua.
+            </template>
+          </AntDropdown>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showDropdown: true
+    showDropdown: false
   }
 };

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

@@ -1,16 +1,12 @@
 import AntDropdown from "../AntDropdown.vue";
 import AntButton from "../buttons/AntButton.vue";
-import { Position } from "../../enums/Position.enum.mjs";
-import { computed } from "vue";
+import AntTextInput from "../inputs/AntTextInput.vue";
+import { computed, onMounted, ref } from "vue";
 const meta = {
   title: "Components/Dropdown",
   component: AntDropdown,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    position: {
-      control: { type: "select" },
-      options: Object.values(Position)
-    },
     contentPadding: {
       description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
     }
@@ -19,7 +15,7 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntDropdown, AntButton },
+    components: { AntDropdown, AntButton, AntTextInput },
     setup() {
       const showDropdown = computed({
         get() {
@@ -29,24 +25,32 @@ export const Docs = {
           args.showDropdown = val;
         }
       });
-      return { args, showDropdown };
+      const scrollContainer = ref(void 0);
+      onMounted(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
+        }
+      });
+      return { args, showDropdown, scrollContainer };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
-              <template #content>
-                Lorem ipsum dolor sit amet, consetetur sadipscing
-                elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </template>
-              <template #default>
-                <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
-              </template>
-            </AntDropdown>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
+            <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
+
+            <template #content>
+              Lorem ipsum dolor sit amet, consetetur sadipscing
+              elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et dolore magna aliquyam erat, sed diam voluptua.
+            </template>
+          </AntDropdown>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showDropdown: true
+    showDropdown: false
   }
 };

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

@@ -35,7 +35,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-          <div class="p-4">
+          <div class="p-4 bg-neutral-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

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

@@ -15,7 +15,7 @@ export const Docs = {
       return { args, faUser, faDownload, faMessage, faCog };
     },
     template: `
-          <div class="p-4">
+          <div class="p-4 bg-neutral-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

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

@@ -83,7 +83,8 @@ const Docs = exports.Docs = {
     `
   }),
   args: {
-    title: "Lorem ipsum dolor"
+    title: "Lorem ipsum dolor",
+    open: false
   }
 };
 const Fullscreen = exports.Fullscreen = {

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

@@ -65,7 +65,8 @@ export const Docs = {
     `
   }),
   args: {
-    title: "Lorem ipsum dolor"
+    title: "Lorem ipsum dolor",
+    open: false
   }
 };
 export const Fullscreen = {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Docs = void 0;
 var _AntPopover = _interopRequireDefault(require("../AntPopover.vue"));
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
-var _Position = require("../../enums/Position.enum");
 var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -17,14 +16,7 @@ const meta = {
       sort: "requiredFirst"
     }
   },
-  argTypes: {
-    position: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_Position.Position)
-    }
-  }
+  argTypes: {}
 };
 module.exports = meta;
 const Docs = exports.Docs = {
@@ -43,25 +35,34 @@ const Docs = exports.Docs = {
           args.showPopover = val;
         }
       });
+      const scrollContainer = (0, _vue.ref)(void 0);
+      (0, _vue.onMounted)(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 3;
+        }
+      });
       return {
         args,
         showPopover,
-        dummyText
+        dummyText,
+        scrollContainer
       };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntPopover popover-classes="w-64" v-bind="args">
-              <template #content>{{ dummyText }}</template>
-              <template #default>
-                <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
-              </template>
-            </AntPopover>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntPopover popover-classes="w-64" v-bind="args" v-model:show-popover="showPopover">
+            <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
+
+            <template #content>{{ dummyText }}</template>
+            <template #title>{{ 'Title' }}</template>
+          </AntPopover>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showPopover: true,
-    title: "Title"
+    showPopover: true
   }
 };