@teammodlr/ui-kit 2.1.67 → 2.1.69

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

@@ -0,0 +1,51 @@
+<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: true
+    });
+
+    setTimeout(() => {
+        testTitle.value = 'changed again';
+    }, 4000);
+}
+</script>

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

@@ -0,0 +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({});

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

@@ -0,0 +1 @@
+export { default as MDialogProviderBasic } from './basic.vue';

package/src/components/dialogprovider/types.ts

@@ -0,0 +1,25 @@
+import type { Ref, VNodeChild } from 'vue';
+
+export type DialogContent = VNodeChild;
+
+export interface DialogOptions {
+    title?: string | Ref<string>;
+    render?: (props: any) => VNodeChild;
+    props?: { [key: string]: any };
+    onClose?: () => void;
+    open?: boolean;
+    draggable?: boolean;
+    modal?: boolean;
+}
+
+export interface DialogReactive {
+    key: string;
+    options: DialogOptions;
+    open: () => void;
+    close: () => void;
+}
+
+export interface DialogApiInjection {
+    create: (key: string, options?: DialogOptions) => DialogReactive;
+    remove: (key: string) => void;
+}

package/src/components/dialogprovider/useDialog.ts

@@ -0,0 +1,14 @@
+import { inject } from 'vue';
+import type { DialogApiInjection} from "./types";
+
+export function useDialog(): DialogApiInjection {
+    const api = inject('m-dialog', null);
+
+    if (api === null) {
+        throw new Error(
+            `m-dialog api is not provided, ensure component is wrapped in <m-dialog-provider />`
+        )
+    }
+
+    return api;
+}

package/src/components/index.ts

@@ -48,4 +48,5 @@ export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
 export { default as MConfirm } from './confirm/Confirm.vue';
 export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
 export { default as MDialog } from './dialog/Dialog.vue';
+export { default as MDialogProvider } from './dialogprovider/DialogProvider.vue';
 export { default as MTree } from './tree/Tree.vue';

package/src/components/messageprovider/MessageProvider.vue

@@ -28,7 +28,6 @@
 import {
     ref,
     reactive,
-    Teleport,
     defineComponent,
     provide,
     computed
@@ -43,11 +42,8 @@ import type {
 } from './types';
 import type { PropType } from 'vue';
 import MMessage from './Message.vue';
-import { useId } from '../../composables/useCachedUid';
 import * as style from './style';
 import { modalScale } from '../../styles/transitions.css';
-import { useIsServer } from '../../composables/useIsServer';
-export type MessageProviderInst = MessageApiInjection;
 
 interface PrivateMessageReactive extends MessageReactive {
     key: string;

package/src/components/slider/Slider.vue

@@ -1,76 +1,111 @@
-<template>
-    <div :class="style.slider">
-        <div :class="style.sliderTransparent">
-            <div ref="slider" @mousedown="handleMouseDown" :class="style.sliderBar" :style="{ background: background }">
-            </div>
-        </div>
-        
-        <div style="position: absolute; inset: 0px 9px;"  @mousedown="handleMouseDown">
-            <div draggable :class="style.hueSliderThumb" @mousedown="handleMouseDown" :style="{ left: `${modelValue}%` }"></div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { watch } from "vue";
-import { defineComponent, ref } from 'vue';
-import * as style from './style';
-import { useMouseInElement, useMousePressed } from '@vueuse/core';
-
-export default defineComponent({
-    name: "MSlider",
-    props: {
-        modelValue: {
-            type: Number,
-            required: true
-        },
-        background: {
-            type: String,
-            default: ""
-        }
-    },
-    components: {},
-    emits: ['update:modelValue'],
-    setup(props, { emit }) {
-        const slider = ref<HTMLElement>();
-
-        const { elementX } = useMouseInElement(slider);
-        const { pressed } = useMousePressed();
-
-        watch(() => pressed.value, () => {
-            if (!pressed.value) {
-                dragging.value = false;
-            }
-        });
-
-        watch(() => elementX.value, () => {
-            if (!dragging.value) {
-                return;
-            }
-
-            setThumbPosition();
-        });
-
-
-        const dragging = ref(false);
-
-        const setThumbPosition = () => {
-            emit('update:modelValue',  ((Math.min(Math.max(elementX.value, 0), slider.value?.clientWidth || 0) / (slider.value?.clientWidth || 0)) * 100));
-        };
-
-        const handleMouseDown = () => {
-            dragging.value = true;
-            setThumbPosition();
-        };
-
-        return {
-            setThumbPosition,
-            elementX,
-            pressed,
-            handleMouseDown,
-            slider,
-            style,
-        };
-    }
-})
-</script>
+<template>
+    <div :class="style.slider">
+        <div :class="style.sliderTransparent">
+            <div ref="slider" :class="style.sliderBar" :style="{ background: background }" @mousedown="handleMouseDown"
+                @touchstart.prevent="handleMouseDown">
+            </div>
+        </div>
+
+        <div style="position: absolute; inset: 0px 9px;" @mousedown="handleMouseDown"
+            @touchstart.prevent="handleMouseDown">
+            <div :class="style.hueSliderThumb" :style="{ left: `${modelValue}%` }"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MSlider',
+    props: {
+        modelValue: {
+            type: Number,
+            required: true,
+        },
+        background: {
+            type: String,
+            default: '',
+        },
+    },
+    emits: ['update:modelValue', 'change'],
+    setup(props, { emit }) {
+        const slider = ref<HTMLElement | null>(null);
+        const dragging = ref(false);
+
+        const handleMouseDown = (event: MouseEvent | TouchEvent) => {
+            dragging.value = true;
+            setThumbPosition(event);
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('touchmove', onTouchMove);
+            document.addEventListener('touchend', onTouchEnd);
+        };
+
+        const onMouseMove = (event: MouseEvent) => {
+            if (dragging.value) {
+                setThumbPosition(event);
+            }
+        };
+
+        const onMouseUp = () => {
+            if (dragging.value) {
+                dragging.value = false;
+                removeEventListeners();
+                emit('change', props.modelValue);
+            }
+        };
+
+        const onTouchMove = (event: TouchEvent) => {
+            if (dragging.value) {
+                setThumbPosition(event);
+            }
+        };
+
+        const onTouchEnd = () => {
+            if (dragging.value) {
+                dragging.value = false;
+                removeEventListeners();
+                emit('change', props.modelValue);
+            }
+        };
+
+        const setThumbPosition = (event: MouseEvent | TouchEvent) => {
+            const rect = slider.value?.getBoundingClientRect();
+            if (!rect) return;
+
+            let clientX;
+            if (event instanceof MouseEvent) {
+                clientX = event.clientX;
+            } else if (event instanceof TouchEvent) {
+                clientX = event.touches[0].clientX;
+            } else {
+                return;
+            }
+
+            const position = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+            const value = (position / rect.width) * 100;
+            emit('update:modelValue', value);
+        };
+
+        const removeEventListeners = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
+
+        onUnmounted(() => {
+            removeEventListeners();
+        });
+
+        return {
+            handleMouseDown,
+            slider,
+            style,
+        };
+    },
+});
+</script>

package/src/composables/index.ts

@@ -1,4 +1,5 @@
 export { useMessage } from '../components/messageprovider/useMessage';
+export { useDialog } from '../components/dialogprovider/useDialog';
 export { useConfirm } from '../components/confirm/useConfirm';
 export { usePopper } from './usePopper';
 export { useZIndex } from './useZIndex';