@teammodlr/ui-kit 2.1.79 → 2.2.1

package/lib/utils/renderSlotFragments.d.ts

@@ -0,0 +1,2 @@
+import { type VNode } from 'vue';
+export declare function renderSlotFragments(children?: VNode[]): VNode[];

package/lib/utils/useForwardExpose.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPublicInstance } from 'vue';
+export declare function useForwardExpose(): {
+    forwardRef: (ref: Element | ComponentPublicInstance | null) => void;
+    currentRef: import("vue").Ref<Element | ComponentPublicInstance | null | undefined>;
+    currentElement: import("vue").ComputedRef<HTMLElement>;
+};

package/package.json

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

package/src/components/button/Button.vue

@@ -1,7 +1,6 @@
 <template>
     <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled"
                @click="handleClick" v-bind="$attrs">
-<!--        <div :class="computedWaveClasses" :key="waveTimerId"></div>-->
         <div :class="computedBorderClasses"></div>
         <div :class="computedBorderStateClasses"></div>
         <span v-if="hasIconLeft" :class="iconLeft">
@@ -201,4 +200,4 @@ export default defineComponent({
     }
 })
 </script>
-  
+  

package/src/components/dropdown/Dropdown.vue

@@ -1,11 +1,14 @@
 <template>
-    <span ref="wrapper" :class="computedWrapperClasses">
-        <span
+    <Primitive
+        as-child
+        ref="wrapper">
+
+        <DropdownTrigger
             ref="referenceRef"
             :class="computedReferenceClasses"
             @click="toggleDropdown">
             <slot />
-        </span>
+        </DropdownTrigger>
 
         <DropdownWrapper>
             <Teleport :disabled="isNested" to="body">
@@ -24,13 +27,14 @@
                 </transition>
             </Teleport>
         </DropdownWrapper>
-    </span>
+    </Primitive>
 </template>
 
 <script lang="ts">
 import { usePopper } from '../../composables/usePopper';
 import type { Placement, VirtualElement } from '@popperjs/core';
 import { scale } from '../../styles/transitions.css';
+import {Primitive} from "../primative/primitive";
 import {
     defineComponent,
     inject,
@@ -43,7 +47,7 @@ import {
     computed,
     toRef,
     reactive,
-    watchEffect
+    watchEffect, type Ref
 } from 'vue';
 import { onClickOutside, useEventListener } from '@vueuse/core';
 import DropdownWrapper from './DropdownWrapper.vue';
@@ -52,11 +56,23 @@ import { useZIndex } from '../../composables/useZIndex';
 import type { DropdownState } from './symbol';
 import { DROPDOWN_STATE } from './symbol';
 import * as style from './style';
+import {createContext} from "../../utils/injection";
+import DropdownTrigger from "./DropdownTrigger.vue";
+
+interface DropdownContext {
+    reference: Ref<HTMLElement | undefined>
+    onReferenceChange: (element: HTMLElement | undefined) => void
+}
+
+export const [injectDropdownContext, provideDropdownContext] = createContext<DropdownContext>('Dropdown');
+
 
 export default defineComponent({
     name: 'Dropdown',
     components: {
-        DropdownWrapper
+        DropdownTrigger,
+        DropdownWrapper,
+        Primitive
     },
     props: {
         open: {
@@ -113,7 +129,7 @@ export default defineComponent({
         const placement = ref(props.placement);
         const transfer = toRef(props, 'transfer');
         const wrapper = ref(null);
-        const referenceRef = ref(null);
+        const referenceRef = ref<HTMLElement>();
         const zIndex = ref(props.zIndex ?? nextZIndex());
         const reference = computed(() => {
             if (props.virtual !== null) {
@@ -141,6 +157,11 @@ export default defineComponent({
             return referenceRef.value;
         });
 
+        provideDropdownContext({
+            reference: referenceRef,
+            onReferenceChange: element => referenceRef.value = element
+        });
+
         const { popper, transferTo, updatePopper } = usePopper({
             reference: reference,
             placement,
@@ -268,7 +289,7 @@ export default defineComponent({
         });
 
         function resize() {
-            if (!isOpen.value) {
+            if (!isOpen.value || !reference.value) {
                 maxHeight.value = 'auto';
                 return;
             }

package/src/components/dropdown/DropdownTrigger.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {Primitive} from "../primative/primitive";
+import { useForwardExpose } from "../../utils/useForwardExpose";
+import {onMounted} from "vue";
+import { injectDropdownContext } from "./Dropdown.vue";
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const dropdownContext = injectDropdownContext();
+
+onMounted(() => {
+    dropdownContext.onReferenceChange(currentElement.value);
+})
+</script>
+
+<template>
+    <Primitive as-child :ref="forwardRef">
+        <slot />
+    </Primitive>
+</template>

package/src/components/primative/examples/as-child.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from '../index'
+
+const props = withDefaults(defineProps<PrimitiveProps>(), {
+  asChild: true
+})
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <a href="https://google.com">Google</a>
+  </Primitive>
+</template>

package/src/components/primative/examples/as.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from '../index'
+
+const props = withDefaults(defineProps<PrimitiveProps>(), {
+  as: 'span'
+})
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    ...
+  </Primitive>
+</template>

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

@@ -0,0 +1,12 @@
+import { Primitive } from '../';
+import { PrimitiveAs, PrimitiveAsChild } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: Primitive,
+    title: 'Components/Primitive'
+};
+
+export const As = createStory(PrimitiveAs);
+export const AsChild = createStory(PrimitiveAsChild);

package/src/components/primative/examples/index.ts

@@ -0,0 +1,2 @@
+export { default as PrimitiveAs } from './as.vue';
+export { default as PrimitiveAsChild } from './as-child.vue';

package/src/components/primative/index.ts

@@ -0,0 +1,2 @@
+export { Primitive, type PrimitiveProps, type AsTag } from './primitive';
+export { Slot } from './slot';

package/src/components/primative/primitive.ts

@@ -0,0 +1,56 @@
+import { type Component, type PropType, defineComponent, h } from "vue";
+import { Slot } from './slot';
+
+export type AsTag =
+    | 'a'
+    | 'button'
+    | 'div'
+    | 'form'
+    | 'h2'
+    | 'h3'
+    | 'img'
+    | 'input'
+    | 'label'
+    | 'li'
+    | 'nav'
+    | 'ol'
+    | 'p'
+    | 'span'
+    | 'svg'
+    | 'ul'
+    | 'template'
+    | ({} & string);
+
+export interface PrimitiveProps {
+    asChild?: boolean
+    as?: AsTag | Component
+}
+
+export const Primitive = defineComponent({
+    name: "Primitive",
+    inheritAttrs: false,
+    props: {
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        as: {
+            type: [String, Object] as PropType<AsTag | Component>,
+            default: 'div'
+        }
+    },
+    setup(props, { attrs, slots }) {
+        const asTag = props.asChild ? 'template' : props.as;
+
+        const SELF_CLOSING = ['area', 'img', 'input'];
+        if (typeof asTag === 'string' && SELF_CLOSING.includes(asTag)) {
+            return () => h(asTag, attrs);
+        }
+
+        if (asTag !== 'template') {
+            return () => h(props.as, attrs, { default: slots.default });
+        }
+
+        return () => h(Slot, attrs, { default: slots.default });
+    }
+})

package/src/components/primative/slot.ts

@@ -0,0 +1,45 @@
+import { Comment, cloneVNode, defineComponent, mergeProps } from 'vue';
+import {renderSlotFragments} from "../../utils/renderSlotFragments";
+
+export const Slot = defineComponent({
+    name: 'PrimativeSlot',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+        return () => {
+            if (!slots.default) {
+                return null;
+            }
+
+            const children = renderSlotFragments(slots.default());
+            const firstNonCommentChildIndex = children.findIndex(child => child.type !== Comment);
+            if (firstNonCommentChildIndex === -1) {
+                return children;
+            }
+
+            const firstNonCommentChild = children[firstNonCommentChildIndex];
+            delete firstNonCommentChild.props?.ref;
+
+            const mergedProps = firstNonCommentChild.props ? mergeProps(attrs, firstNonCommentChild.props) : attrs;
+
+            if (attrs.class && firstNonCommentChild.props?.class) {
+                delete firstNonCommentChild.props.class;
+            }
+
+            const cloned = cloneVNode(firstNonCommentChild, mergedProps);
+
+            for (const prop in mergedProps) {
+                if (prop.startsWith('on')) {
+                    cloned.props ||= {};
+                    cloned.props[prop] = mergedProps[prop];
+                }
+            }
+
+            if (children.length === 1) {
+                return cloned;
+            }
+
+            children[firstNonCommentChildIndex] = cloned;
+            return children;
+        }
+    }
+})

package/src/components/tooltip/Tooltip.vue

@@ -1,13 +1,13 @@
 <template>
-    <span
+    <Primitive
+        as-child
         v-bind="$attrs"
-        style="display: inline-flex"
         @mouseenter="show"
         @mouseleave="hide"
         ref="wrapper">
-        <span ref="reference">
-            <slot />
-        </span>
+        <TooltipTrigger  ref="reference" >
+            <slot/>
+        </TooltipTrigger>
 
         <Teleport :to="transferTo">
             <Transition
@@ -27,7 +27,7 @@
                 </div>
             </Transition>
         </Teleport>
-    </span>
+    </Primitive>
 </template>
 
 <script lang="ts">
@@ -38,19 +38,31 @@ import {
     type PropType,
     computed,
     watch,
-    onUnmounted
+    onUnmounted, type Ref
 } from 'vue';
 import {
     type Placement,
     placementWhileList,
     usePopper
 } from '../../composables/usePopper';
+
 import { fade } from '../../styles/transitions.css';
 import * as style from './style';
 import { useZIndex } from '../../composables/useZIndex';
+import {Primitive} from "../primative/primitive";
+import TooltipTrigger from "@/components/tooltip/TooltipTrigger.vue";
+import {createContext} from "../../utils/injection";
+
+interface TooltipContext {
+    reference: Ref<HTMLElement | undefined>
+    onReferenceChange: (element: HTMLElement | undefined) => void
+}
+
+export const [injectionTooltipContext, providerTooltipContext] = createContext<TooltipContext>('Tooltip');
 
 export default defineComponent({
     name: 'MTooltip',
+    components: {TooltipTrigger, Primitive},
     props: {
         text: {
             type: String,
@@ -87,7 +99,7 @@ export default defineComponent({
         // @ts-ignore
         const transfer = toRef(props, 'transfer');
         const wrapper = ref<HTMLElement | null>(null);
-        const reference = ref<HTMLElement | null>(null);
+        const reference = ref<HTMLElement>();
         const isOpen = ref(false);
         const zIndex = ref(props.zIndex ?? nextZIndex());
         const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
@@ -106,6 +118,11 @@ export default defineComponent({
             }
         });
 
+        providerTooltipContext({
+            reference,
+            onReferenceChange: element => reference.value = element
+        });
+
         const { popper, transferTo, updatePopper } = usePopper({
             placement,
             transfer,
@@ -179,6 +196,7 @@ export default defineComponent({
 
         return {
             reference,
+            offset,
             popper,
             transferTo,
             isOpen,

package/src/components/tooltip/TooltipTrigger.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {Primitive} from "../primative/primitive";
+import { useForwardExpose } from "../../utils/useForwardExpose";
+import {onMounted} from "vue";
+import { injectionTooltipContext } from "./Tooltip.vue";
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const tooltipContext = injectionTooltipContext();
+
+onMounted(() => {
+    tooltipContext.onReferenceChange(currentElement.value);
+})
+</script>
+
+<template>
+    <Primitive as-child :ref="forwardRef">
+        <slot />
+    </Primitive>
+</template>

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

@@ -1,5 +1,5 @@
 <template>
-    <MTooltip text="Hello<br />World">
+    <MTooltip text="Hello World">
         <MButton>Top</MButton>
     </MTooltip>
 </template>

package/src/utils/renderSlotFragments.ts

@@ -0,0 +1,15 @@
+import { Fragment, type VNode } from 'vue';
+
+export function renderSlotFragments(children?: VNode[]): VNode[] {
+    if (!children) {
+        return [];
+    }
+
+    return children.flatMap((child) => {
+        if (child.type === Fragment) {
+            return renderSlotFragments(child.children as VNode[]);
+        }
+
+        return [child];
+    });
+}

package/src/utils/useForwardExpose.ts

@@ -0,0 +1,65 @@
+// reference: https://github.com/vuejs/rfcs/issues/258#issuecomment-1068697672
+import {unrefElement} from '@vueuse/core'
+import {type ComponentPublicInstance, computed, getCurrentInstance, ref} from 'vue'
+
+export function useForwardExpose() {
+    const instance = getCurrentInstance()!
+
+    const currentRef = ref<Element | ComponentPublicInstance | null>()
+    const currentElement = computed<HTMLElement>(() => {
+        // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
+        // @ts-expect-error ignore ts error
+        return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef)
+    })
+
+    // Do give us credit if you reference our code :D
+    // localExpose should only be assigned once else will create infinite loop
+    const localExpose: Record<string, any> | null = Object.assign({}, instance.exposed)
+    const ret: Record<string, any> = {}
+
+    // retrieve props for current instance
+    for (const key in instance.props) {
+        Object.defineProperty(ret, key, {
+            enumerable: true,
+            configurable: true,
+            get: () => instance.props[key],
+        })
+    }
+
+    // retrieve default exposed value
+    if (Object.keys(localExpose).length > 0) {
+        for (const key in localExpose) {
+            Object.defineProperty(ret, key, {
+                enumerable: true,
+                configurable: true,
+                get: () => localExpose![key],
+            })
+        }
+    }
+
+    // retrieve original first root element
+    Object.defineProperty(ret, '$el', {
+        enumerable: true,
+        configurable: true,
+        get: () => instance.vnode.el,
+    })
+    instance.exposed = ret
+
+    function forwardRef(ref: Element | ComponentPublicInstance | null) {
+        currentRef.value = ref
+
+        if (ref instanceof Element || !ref)
+            return
+
+        // retrieve the forwarded element
+        Object.defineProperty(ret, '$el', {
+            enumerable: true,
+            configurable: true,
+            get: () => ref.$el,
+        })
+
+        instance.exposed = ret
+    }
+
+    return {forwardRef, currentRef, currentElement}
+}