@antify/ui 1.1.0 → 1.2.0

package/dist/components/AntTooltip.vue

@@ -1,57 +1,59 @@
 <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 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,17 +77,24 @@ 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) {
+  if (floatOpen.value || clickLock.value) {
     return;
   }
 
@@ -95,52 +104,76 @@ function onMouseOver() {
    */
   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;
+  floatOpen.value = false;
   clickLock.value = false;
 }
 
 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',
+        }"
+        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 +209,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
   }
 };

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

@@ -1,17 +1,11 @@
 import AntPopover from "../AntPopover.vue";
 import AntButton from "../buttons/AntButton.vue";
-import { Position } from "../../enums/Position.enum.mjs";
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 const meta = {
   title: "Components/Popover",
   component: AntPopover,
   parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    position: {
-      control: { type: "select" },
-      options: Object.values(Position)
-    }
-  }
+  argTypes: {}
 };
 export default meta;
 export const Docs = {
@@ -27,21 +21,29 @@ export const Docs = {
           args.showPopover = val;
         }
       });
-      return { args, showPopover, dummyText };
+      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) / 3;
+        }
+      });
+      return { args, showPopover, 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
   }
 };