@teammodlr/ui-kit 2.1.78 → 2.2.0

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.78",
+  "version": "2.2.0",
   "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/dialog/Dialog.vue

@@ -108,7 +108,7 @@ export default defineComponent({
         const wrapper = ref<HTMLElement | null>(null);
         const dialog = ref<HTMLElement | null>(null);
         const handle = ref<HTMLElement | null>(null);
-        const { nextZIndex } = useZIndex();
+        const { nextZIndex, current: maxZIndex } = useZIndex();
         const zIndex = ref(props.zIndex ?? nextZIndex());
 
         const isOpen = ref<boolean>(props.open);
@@ -174,7 +174,9 @@ export default defineComponent({
         }
 
         function onDragStart() {
-            zIndex.value = nextZIndex();
+            if (zIndex.value < maxZIndex.value) {
+                zIndex.value = nextZIndex();
+            }
             isDragging.value = true;
         }
 

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

@@ -1,54 +1,54 @@
-<template>
-    <div>
-        <button @click="showDialog">Show Dialog</button>
-        <button @click="showDialog2">Show Dialog 2</button>
-        {{ testTitle }}
-    </div>
-</template>
-
-<script lang="ts" setup>
-import {ref, h} from 'vue';
-import {useDialog} from '../useDialog';
-
-const dialog = useDialog();
-const testTitle = ref('This is a test');
-
-function renderMessage({message}: { message: string }) {
-    return h('p', [
-        'Here are ',
-        h('span', {style: 'color: red'}, [message]),
-        ' that using render function',
-    ]);
-}
-
-function showDialog() {
-    dialog.create('hello', {
-        title: testTitle,
-        render: renderMessage,
-        props: {message: testTitle},
-        open: true,
-    });
-
-    setTimeout(() => {
-        testTitle.value = 'changed';
-    }, 4000);
-}
-
-function showDialog2() {
-    dialog.create('hello-two', {
-        title: "Hello Second Dialog",
-        render: renderMessage,
-        props: {message: testTitle},
-        open: true,
-        modal: false,
-        draggable: false,
-        onOpen: () => {
-            console.log('hello world')
-        }
-    });
-
-    setTimeout(() => {
-        testTitle.value = 'changed again';
-    }, 4000);
-}
-</script>
+<template>
+    <div>
+        <button @click="showDialog">Show Dialog</button>
+        <button @click="showDialog2">Show Dialog 2</button>
+        {{ testTitle }}
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, h} from 'vue';
+import {useDialog} from '../useDialog';
+
+const dialog = useDialog();
+const testTitle = ref('This is a test');
+
+function renderMessage({message}: { message: string }) {
+    return h('p', [
+        'Here are ',
+        h('span', {style: 'color: red'}, [message]),
+        ' that using render function',
+    ]);
+}
+
+function showDialog() {
+    dialog.create('hello', {
+        title: testTitle,
+        render: renderMessage,
+        props: {message: testTitle},
+        open: true,
+    });
+
+    setTimeout(() => {
+        testTitle.value = 'changed';
+    }, 4000);
+}
+
+function showDialog2() {
+    dialog.create('hello-two', {
+        title: "Hello Second Dialog",
+        render: renderMessage,
+        props: {message: testTitle},
+        open: true,
+        modal: false,
+        draggable: false,
+        onOpen: () => {
+            console.log('hello world')
+        }
+    });
+
+    setTimeout(() => {
+        testTitle.value = 'changed again';
+    }, 4000);
+}
+</script>

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

@@ -1,26 +1,26 @@
-import MDialogProvider from '../DialogProvider.vue';
-import { MDialogProviderBasic } from './index';
-
-const Template = (args: any) => ({
-    components: {
-        MDialogProvider,
-        MDialogProviderBasic
-    },
-    setup() {
-        return {
-            args
-        }
-    },
-    template: `
-        <m-dialog-provider v-bind="args">
-            <MDialogProviderBasic />
-        </m-dialog-provider>
-    `
-});
-
-export default {
-    component: MDialogProvider,
-    title: 'Components/DialogProvider'
-};
-
-export const Primary = Template.bind({});
+import MDialogProvider from '../DialogProvider.vue';
+import { MDialogProviderBasic } from './index';
+
+const Template = (args: any) => ({
+    components: {
+        MDialogProvider,
+        MDialogProviderBasic
+    },
+    setup() {
+        return {
+            args
+        }
+    },
+    template: `
+        <m-dialog-provider v-bind="args">
+            <MDialogProviderBasic />
+        </m-dialog-provider>
+    `
+});
+
+export default {
+    component: MDialogProvider,
+    title: 'Components/DialogProvider'
+};
+
+export const Primary = Template.bind({});

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,

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];
+    });
+}