@antify/ui 1.0.4 → 1.2.0

package/dist/components/AntPopover.vue

@@ -1,57 +1,145 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {handleEnumValidation} from '../handler';
+import {computed, ref} from 'vue';
 import {Position} from '../enums/Position.enum';
 import {classesToObjectSyntax} from '../utils';
+import {arrow, autoUpdate, flip, offset, useFloating, shift, limitShift} from "@floating-ui/vue";
+import {vOnClickOutside} from '@vueuse/components';
+import {onKeyStroke} from "@vueuse/core";
 
 const props = withDefaults(defineProps<{
   showPopover: boolean,
   title?: string,
-  position?: Position,
+  isClickable?: boolean,
   popoverClasses?: string | Record<string, boolean>
 }>(), {
+  isClickable: true,
   showPopover: false,
-  position: Position.left,
+  preferredPosition: Position.top,
   popoverClasses: ''
 });
+
+const emit = defineEmits(['update:showPopover']);
+
+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, {
+  transform: false,
+  placement: 'right',
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(() => 16),
+    shift({
+      limiter: limitShift({
+        offset: {
+          mainAxis: 62,
+        }
+      }),
+    }),
+    flip({
+      fallbackPlacements: ['top', 'bottom', 'left'],
+    }),
+    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 _popoverClasses = computed(() => ({
-  'absolute min-w-[10rem]': true,
-  'bottom-0 mb-[50%] pb-3.5': props.position === Position.top,
-  'top-0 mt-[50%] pt-3.5': props.position === Position.bottom,
-  'right-0 mr-[100%] pr-3.5': props.position === Position.left,
-  'left-0 ml-[100%] pl-3.5': props.position === Position.right,
+  'z-[90] min-w-[10rem]': true,
   ...classesToObjectSyntax(props.popoverClasses)
 }));
-const classes = computed(() => ({
-  'z-10 absolute flex': true,
-  'top-0 left-0 right-0 -m-[2.5px] justify-center': props.position === Position.bottom,
-  'bottom-0 left-0 right-0 -m-[2.5px] justify-center': props.position === Position.top,
-  'top-0 left-0 bottom-0 -ml-[2.5px]  items-end pb-1': props.position === Position.right,
-  'top-0 right-0 bottom-0 -mr-[2.5px] items-end pb-1': 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-start -rotate-90': props.position === Position.right,
-  'justify-end rotate-90': props.position === Position.left,
+  'relative flex items-center justify-center': true,
 }));
 
-onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position');
+onKeyStroke('Escape', (e: KeyboardEvent) => {
+  if (props.showPopover) {
+    e.preventDefault();
+    emit('update:showPopover', false);
+  }
 });
+
+const onClickOutside = [
+  (ev) => {
+    emit('update:showPopover', false);
+  },
+  {
+    ignore: [floating]
+  }
+]
 </script>
 
 <template>
   <div class="relative inline-flex justify-center items-end">
-    <slot/>
+    <div
+      v-on-click-outside="onClickOutside"
+      ref="reference"
+    >
+      <slot/>
+    </div>
 
     <Transition name="bounce">
       <template v-if="showPopover">
-        <div :class="_popoverClasses">
-          <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative">
+        <teleport to="body">
+          <div
+            :class="_popoverClasses"
+            ref="floating"
+            :style="floatingStyles"
+          >
+            <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col">
+
+              <div
+                class="border-neutral-300 border-b p-2 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+              >
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </div>
+
+              <div
+                class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+              >
+                <slot name="content"/>
+              </div>
+            </div>
+
             <div
-              :class="classes"
+              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]: '-2.5px',
+            transform: arrowTransform
+            }"
             >
               <div
                 :class="itemContainerClasses"
@@ -66,12 +154,12 @@ onMounted(() => {
                 >
                   <path
                     d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
-                    :class="{'fill-neutral-100': position === Position.bottom, 'fill-white': position === Position.top || position === Position.right || position === Position.left}"
+                    :class="{'fill-neutral-100': placement === Position.bottom, 'fill-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
 
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
-                    :class="{'stroke-neutral-100': position === Position.bottom, 'stroke-white': position === Position.top || position === Position.right || position === Position.left}"
+                    :class="{'stroke-neutral-100': placement === Position.bottom, 'stroke-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
                 </svg>
 
@@ -90,20 +178,8 @@ onMounted(() => {
                 </svg>
               </div>
             </div>
-
-            <div
-              class="border-neutral-300 border-b p-2 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
-            >
-              {{ title }}
-            </div>
-
-            <div
-              class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
-            >
-              <slot name="content"/>
-            </div>
           </div>
-        </div>
+        </teleport>
       </template>
     </Transition>
   </div>

package/dist/components/AntSkeleton.vue

@@ -25,7 +25,7 @@ const classList = computed(() => ({
   'animate-skeleton min-h-[1px] min-w-[1px] inline-block': true,
   'absolute inset-0 w-full h-full z-40': props.absolute,
   'rounded-md': props.rounded && props.grouped === Grouped.none,
-  'rounded-xl': props.roundedFull && props.grouped === Grouped.none,
+  'rounded-full': props.roundedFull && props.grouped === Grouped.none,
   ...groupedClassList.value
 }));
 </script>

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.d.ts

@@ -7,3 +7,4 @@ export declare const Docs: Story;
 export declare const CustomContent: Story;
 export declare const MultipleCollapseStrategy: Story;
 export declare const htmlInContent: Story;
+export declare const mixedVariants: Story;

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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.htmlInContent = exports.default = exports.MultipleCollapseStrategy = exports.Docs = exports.CustomContent = void 0;
+exports.mixedVariants = exports.htmlInContent = exports.default = exports.MultipleCollapseStrategy = exports.Docs = exports.CustomContent = void 0;
 var _AntAccordion = _interopRequireDefault(require("../AntAccordion.vue"));
 var _AntAccordionItem = _interopRequireDefault(require("../AntAccordionItem.vue"));
 var _AntAccordion2 = require("../__types/AntAccordion.types");
+var _AntIcon = _interopRequireDefault(require("../AntIcon.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Components/Accordion",
@@ -117,4 +119,74 @@ const htmlInContent = exports.htmlInContent = {
                     justo duo dolores et ea rebum. Stet clita kasd`
     }]
   }
+};
+const mixedVariants = exports.mixedVariants = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntAccordion: _AntAccordion.default,
+      AntAccordionItem: _AntAccordionItem.default,
+      AntIcon: _AntIcon.default
+    },
+    setup() {
+      return {
+        args,
+        faEye: _freeSolidSvgIcons.faEye
+      };
+    },
+    template: `
+      <AntAccordion
+        v-bind="args"
+        :contentPadding="false"
+      >
+        <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"
+    }, {
+      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",
+      inactiveLabelClasses: "bg-success-200 text-success-200-font",
+      inactiveIconClasses: "bg-success-200 text-success-200-font",
+      contentPadding: false
+    }, {
+      label: "Third entry",
+      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>`,
+      activeLabelClasses: "bg-danger-500 text-danger-500-font",
+      activeIconClasses: "text-danger-500-font",
+      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

@@ -1,6 +1,8 @@
 import AntAccordion from "../AntAccordion.vue";
 import AntAccordionItem from "../AntAccordionItem.vue";
 import { CollapseStrategy } from "../__types/AntAccordion.types.mjs";
+import AntIcon from "../AntIcon.vue";
+import { faEye } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Accordion",
   component: AntAccordion,
@@ -99,3 +101,69 @@ export const htmlInContent = {
     ]
   }
 };
+export const mixedVariants = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntAccordion, AntAccordionItem, AntIcon },
+    setup() {
+      return { args, faEye };
+    },
+    template: `
+      <AntAccordion
+        v-bind="args"
+        :contentPadding="false"
+      >
+        <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"
+      },
+      {
+        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",
+        inactiveLabelClasses: "bg-success-200 text-success-200-font",
+        inactiveIconClasses: "bg-success-200 text-success-200-font",
+        contentPadding: false
+      },
+      {
+        label: "Third entry",
+        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>`,
+        activeLabelClasses: "bg-danger-500 text-danger-500-font",
+        activeIconClasses: "text-danger-500-font",
+        inactiveLabelClasses: "bg-danger-200 text-danger-200-font",
+        inactiveIconClasses: "text-danger-200-font",
+        contentPadding: false
+      }
+    ],
+    skeleton: true,
+    collapseStrategy: CollapseStrategy.multiple
+  }
+};