@teammodlr/ui-kit 2.0.9 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="wrapper" :class="computedWrapperClasses">
+    <span ref="wrapper" :class="computedWrapperClasses">
         <span ref="referenceRef" :class="computedReferenceClasses" @click="toggleDropdown">
             <slot/>
         </span>
@@ -7,21 +7,17 @@
         <DropdownWrapper>
             <Teleport :disabled="isNested" to="body">
                 <transition :name="transitionName">
-                    <div v-show="isOpen" ref="floating" :style="floatingStyles" :class="menuClasses">
+                    <div v-show="isOpen" ref="popper" :class="menuClasses">
                         <slot name="menu"/>
                     </div>
                 </transition>
             </Teleport>
         </DropdownWrapper>
-    </div>
+    </span>
 </template>
 
 <script lang="ts">
-import {
-    useFloating, offset,
-    flip,
-    shift,
-} from '@floating-ui/vue';
+import {usePopper} from '../../composables/usePopper';
 import type {Placement, VirtualElement} from '@popperjs/core';
 import {
     defineComponent,
@@ -100,13 +96,9 @@ export default defineComponent({
         const label = toRef(props, 'label')
         const isOpen = ref(props.open);
         const placement = ref(props.placement);
+        const transfer = toRef(props, 'transfer');
         const wrapper = ref(null);
         const referenceRef = ref(null);
-        const floating = ref(null);
-        const {floatingStyles} = useFloating(referenceRef, floating, {
-            placement: placement.value as any,
-            middleware: [offset(15), flip()]
-        });
 
         const reference = computed(() => {
             if (props.virtual !== null) {
@@ -134,6 +126,15 @@ export default defineComponent({
             return referenceRef.value;
         });
 
+        const {popper, transferTo, updatePopper} = usePopper({
+            reference: reference,
+            placement,
+            transfer,
+            wrapper,
+            isDrop: true,
+            offset: isNested ? [-2, 2] : [0, 5]
+        });
+
         const currentLabel = useLabel(label, referenceRef)
 
         provide("dropdown-select", null);
@@ -154,6 +155,10 @@ export default defineComponent({
         });
 
         watch(isOpen, (value) => {
+            if (value) {
+                updatePopper();
+            }
+
             emit('update:open', value);
         });
 
@@ -164,11 +169,10 @@ export default defineComponent({
         });
 
         useEventListener('resize', () => {
-            // updatePopper();
-            // TODO: Fix this for floating-ui
+            updatePopper();
         });
 
-        onClickOutside(floating, (e) => {
+        onClickOutside(wrapper, (e) => {
             let parent = e.target as HTMLElement;
 
             let i = 0;
@@ -238,6 +242,8 @@ export default defineComponent({
         return {
             wrapper,
             referenceRef,
+            popper,
+            transferTo,
             isOpen,
             isNested,
             placement,
@@ -245,11 +251,8 @@ export default defineComponent({
             computedWrapperClasses,
             computedReferenceClasses,
             transitionName,
-            toggleDropdown,
-
-            floating,
-            floatingStyles
+            toggleDropdown
         }
     }
 })
-</script>
+</script>

package/src/components/dropdown/examples/basic.vue

@@ -9,7 +9,6 @@
                 <MDropdownItem hotkey="Ctrl+L"  @click="handleClick">
                     Item One
                 </MDropdownItem>
-                <MDropdownSeperator></MDropdownSeperator>
                 <MDropdownItem>
                     Item Two
                 </MDropdownItem>

package/src/components/dropdown/examples/index.stories.ts

@@ -8,7 +8,7 @@ import {
     MDropdownContext,
     MDropdownCustom
 } from './index';
-import { createStory } from '../../../__storybook__';
+import {createStory, popperPositionArgType} from '../../../__storybook__';
 
 export default {
     component: MDropdown,
@@ -17,7 +17,10 @@ export default {
         MDropdownItem,
         MButton
     },
-    title: 'Components/Dropdown'
+    title: 'Components/Dropdown',
+    argTypes: {
+        ...popperPositionArgType()
+    }
 }
 
 export const Basic = createStory(MDropdownBasic);