@teammodlr/ui-kit 2.1.73 → 2.1.75

package/src/components/dialog/Dialog.vue

@@ -25,7 +25,7 @@
                             <template v-else>
                                 <div :class="style.content">
                                     <button role="button" :class="style.close" @click="close"></button>
-                                    <div :class="style.header" ref="handle">
+                                    <div :class="headerClasses" ref="handle">
                                         <div :class="style.title">
                                             <slot name="title">
                                                 {{ resolvedTitle }}
@@ -50,7 +50,7 @@
     </Teleport>
 </template>
 <script lang="ts">
-import {fade, modalScale} from '../../styles/transitions.css';
+import { fade, modalScale } from '../../styles/transitions.css';
 import {
     computed,
     defineComponent,
@@ -58,12 +58,13 @@ import {
     watch,
     nextTick,
     isRef,
-    type CSSProperties, type PropType, type Ref,
+    type CSSProperties,
+    type PropType,
+    type Ref,
 } from 'vue';
-import type {ComputedRef} from 'vue';
-
-import {useZIndex} from '../../composables/useZIndex';
-import {useDraggable} from '@vueuse/core';
+import type { ComputedRef } from 'vue';
+import { useZIndex } from '../../composables/useZIndex';
+import { useDraggable, useEventListener } from '@vueuse/core';
 import * as style from './style';
 
 export default defineComponent({
@@ -83,8 +84,7 @@ export default defineComponent({
         },
         onClose: {
             type: Function,
-            default: () => {
-            },
+            default: () => {},
         },
         zIndex: {
             type: Number,
@@ -102,22 +102,25 @@ export default defineComponent({
             default: false,
         },
     },
-    emits: ['onOpen', 'onClose', 'update:open'],
-    setup(props, {emit, expose}) {
+    // Eventually remove 'open', i lazy cant be assed for now
+    emits: ['onOpen', 'onClose', 'update:open', 'open'],
+    setup(props, { emit, expose }) {
         const wrapper = ref<HTMLElement | null>(null);
         const dialog = ref<HTMLElement | null>(null);
         const handle = ref<HTMLElement | null>(null);
-        const {nextZIndex} = useZIndex();
+        const { nextZIndex } = useZIndex();
         const zIndex = ref(props.zIndex ?? nextZIndex());
 
         const isOpen = ref<boolean>(props.open);
+        const isDragging = ref<boolean>(false);
 
-        const {x, y} = useDraggable(dialog, {
+        const { x, y } = useDraggable(dialog, {
             handle,
             preventDefault: true,
             containerElement: wrapper,
             disabled: computed(() => !props.draggable),
             onStart: onDragStart,
+            onEnd: onDragStop
         });
 
         const resolvedTitle = computed(() =>
@@ -129,13 +132,19 @@ export default defineComponent({
             [style.backdropColor]: props.modal === true,
         }));
 
+        const headerClasses = computed(() => ({
+            [style.header]: true,
+            [style.draggable]: props.draggable && !isDragging.value,
+            [style.dragging]: props.draggable && isDragging.value
+        }));
+
         const wrapperClasses = computed(() => ({
             [style.wrapper]: true,
             [style.notModal]: !props.modal,
         }));
 
         const width = computed(() =>
-            typeof props.width === 'number' ? `${props.width}px` : props.width,
+            typeof props.width === 'number' ? `${props.width}px` : props.width
         );
 
         const computedStyle: ComputedRef<CSSProperties> = computed(() => ({
@@ -149,6 +158,10 @@ export default defineComponent({
         function close() {
             isOpen.value = false;
             emit('update:open', false);
+            onCloseEmit();
+        }
+
+        function onCloseEmit() {
             emit('onClose');
             if (props.onClose) {
                 props.onClose();
@@ -162,6 +175,11 @@ export default defineComponent({
 
         function onDragStart() {
             zIndex.value = nextZIndex();
+            isDragging.value = true;
+        }
+
+        function onDragStop() {
+            isDragging.value = false;
         }
 
         function centerDialog() {
@@ -172,6 +190,27 @@ export default defineComponent({
             }
         }
 
+        function keepWithInBounds() {
+            if (dialog.value) {
+                const boundingRect = dialog.value.getBoundingClientRect();
+                const maxX = window.innerWidth - boundingRect.width;
+                const maxY = window.innerHeight - boundingRect.height;
+
+                x.value = Math.min(Math.max(0, x.value), maxX);
+                y.value = Math.min(Math.max(0, y.value), maxY);
+            }
+        }
+
+        useEventListener(window, 'resize', () => {
+            if (isOpen.value) {
+                if (!props.draggable) {
+                    nextTick(() => centerDialog())
+                } else {
+                    nextTick(() => keepWithInBounds())
+                }
+            }
+        })
+
         watch(
             () => props.open,
             async (newVal) => {
@@ -179,12 +218,12 @@ export default defineComponent({
                 if (newVal) {
                     await nextTick();
                     centerDialog();
+                    emit('onOpen');
                 }
             },
-            {immediate: true},
+            { immediate: true }
         );
 
-        // Expose methods to parent components
         expose({
             close,
         });
@@ -198,6 +237,7 @@ export default defineComponent({
             modalScale,
             style,
             computedStyle,
+            headerClasses,
             backdropClasses,
             resolvedTitle,
             wrapperClasses,

package/src/components/dialog/style/Dialog.css.ts

@@ -1,138 +1,147 @@
-import {
-    createVar,
-    globalKeyframes,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-export const vars = {};
-
-export const root = style({});
-export const backdrop = style({
-    position: 'fixed',
-    inset: 0,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    pointerEvents: 'none'
-});
-
-export const backdropColor = style({
-    backgroundColor: 'rgba(0,0,0,.45)'
-});
-
-export const wrapper = style({
-    position: 'fixed',
-    inset: 0,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    outline: 0,
-    overflow: 'auto',
-    boxSizing: 'border-box',
-});
-
-export const notModal = style({
-    pointerEvents: 'none'
-})
-
-export const dialog = style({
-    boxSizing: 'border-box',
-    margin: '0 auto',
-    padding: 0,
-    position: 'relative',
-    top: '100px',
-    width: 'auto',
-    maxWidth: `calc(100vw - 32px)`,
-    paddingBottom: '24px'
-});
-
-export const content = style({
-    position: 'relative',
-    backgroundColor: '#FFF',
-    backgroundClip: 'padding-box',
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    borderRadius: themeVars.rounded.medium,
-    pointerEvents: 'auto',
-    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
-});
-
-export const header = style({
-    color: themeVars.color.font.default,
-    backgroundColor: '#FFF',
-    marginBottom: themeVars.space[2],
-    borderBottom: `1px solid ${themeVars.color.gray[300]}`,
-    height: `35px`,
-    display: `flex`,
-    alignItems: `center`,
-    padding: `0px ${themeVars.space[2]}`
-});
-
-export const footer = style({
-    textAlign: 'end',
-    background: `0 0`,
-    marginTop: themeVars.space[2]
-});
-
-export const title = style({
-    margin: 0,
-    color: themeVars.color.font.default,
-    fontWeight: 600,
-    lineHeight: 1.5,
-    wordWrap: 'break-word'
-});
-
-export const close = style([
-    {
-        outline: `none ${themeVars.color.gray[300]}`,
-        display: 'inline-block',
-        position: 'absolute',
-        top: themeVars.space[1.5],
-        right: themeVars.space[1.5],
-        width: '1.5rem',
-        height: '1.5rem',
-        backgroundColor: 'transparent',
-        border: 'none',
-        padding: 0,
-        cursor: 'pointer',
-        transition: 'all 0.2s',
-        borderRadius: themeVars.rounded.full,
-        marginLeft: themeVars.space[2],
-        ':hover': {
-            backgroundColor: themeVars.color.gray[150]
-        },
-        ':focus': {
-            backgroundColor: themeVars.color.gray[150]
-        },
-        '::before': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) rotate(45deg)',
-            width: '0.8rem',
-            height: '2px',
-            backgroundColor: themeVars.color.gray[500],
-            transformOrigin: 'center',
-            transition: 'all 0.2s'
-        },
-        '::after': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) rotate(-45deg)',
-            width: '0.8rem',
-            height: '2px',
-            backgroundColor: themeVars.color.gray[500],
-            transformOrigin: 'center',
-            transition: 'all 0.2s'
-        }
-    }
-]);
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const vars = {};
+
+export const root = style({});
+export const backdrop = style({
+    position: 'fixed',
+    inset: 0,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none'
+});
+
+export const backdropColor = style({
+    backgroundColor: 'rgba(0,0,0,.45)'
+});
+
+export const wrapper = style({
+    position: 'fixed',
+    inset: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    outline: 0,
+    overflow: 'auto',
+    boxSizing: 'border-box',
+});
+
+export const notModal = style({
+    pointerEvents: 'none'
+})
+
+export const dialog = style({
+    boxSizing: 'border-box',
+    margin: '0 auto',
+    padding: 0,
+    position: 'relative',
+    top: '100px',
+    width: 'auto',
+    maxWidth: `calc(100vw - 32px)`,
+    paddingBottom: '24px'
+});
+
+export const content = style({
+    position: 'relative',
+    backgroundColor: '#FFF',
+    backgroundClip: 'padding-box',
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.medium,
+    pointerEvents: 'auto',
+    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
+});
+
+export const header = style({
+    color: themeVars.color.font.default,
+    backgroundColor: '#FFF',
+    marginBottom: themeVars.space[2],
+    borderBottom: `1px solid ${themeVars.color.gray[300]}`,
+    height: `35px`,
+    display: `flex`,
+    alignItems: `center`,
+    padding: `0px ${themeVars.space[2]}`,
+    borderRadius: `${themeVars.rounded.medium} ${themeVars.rounded.medium} 0 0`,
+});
+
+export const draggable = style({
+    cursor: "grab"
+});
+
+export const dragging = style({
+    cursor: "grabbing"
+});
+
+export const footer = style({
+    textAlign: 'end',
+    background: `0 0`,
+    marginTop: themeVars.space[2]
+});
+
+export const title = style({
+    margin: 0,
+    color: themeVars.color.font.default,
+    fontWeight: 600,
+    lineHeight: 1.5,
+    wordWrap: 'break-word',
+});
+
+export const close = style([
+    {
+        outline: `none ${themeVars.color.gray[300]}`,
+        display: 'inline-block',
+        position: 'absolute',
+        top: themeVars.space[1.5],
+        right: themeVars.space[1.5],
+        width: '1.5rem',
+        height: '1.5rem',
+        backgroundColor: 'transparent',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        borderRadius: themeVars.rounded.full,
+        marginLeft: themeVars.space[2],
+        ':hover': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        ':focus': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        '::before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        },
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(-45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        }
+    }
+]);

package/src/components/dialogprovider/DialogProvider.vue

@@ -1,17 +1,25 @@
 <template>
     <slot/>
     <template v-if="Object.keys(dialogMap).length > 0">
-        <Teleport to="body">
+        <template v-for="dialog in Object.values(dialogMap)">
             <MDialog
-                v-for="dialog in Object.values(dialogMap)"
+                v-if="dialog.options.open"
                 :key="dialog.key"
-                v-bind="dialog.options"
+                v-bind="filteredOptions(dialog.options)"
                 ref="setDialogRef(dialog.key)"
                 @close="remove(dialog.key)"
+                @on-close="handleClose(dialog.key)"
+                @on-open="handleOpen(dialog.key)"
             >
-                <MRenderer v-if="dialog.options.render" :h="dialog.options.render" :props="dialog.options.props" />
+                <template #default>
+                    <MRenderer
+                        v-if="dialog.options.render"
+                        :h="dialog.options.render"
+                        :props="dialog.options.props"
+                    />
+                </template>
             </MDialog>
-        </Teleport>
+        </template>
     </template>
 </template>
 <script lang="ts">
@@ -59,6 +67,7 @@ export default defineComponent({
                         dialogComponent.open();
                     } else {
                         dialog.options.open = true;
+                        handleOpen(key);
                     }
                 },
                 close: () => {
@@ -66,7 +75,7 @@ export default defineComponent({
                     if (dialogComponent && dialogComponent.close) {
                         dialogComponent.close();
                     } else {
-                        remove(key);
+                        handleClose(key);
                     }
                 },
             };
@@ -75,11 +84,31 @@ export default defineComponent({
             return dialog;
         }
 
+        function filteredOptions(options: DialogOptions) {
+            const { render, props, ...filtered } = options;
+            return filtered;
+        }
+
         function remove(key: string) {
             delete dialogMap[key];
             delete dialogRefs.value[key];
         }
 
+        function handleOpen(key: string) {
+            const dialog = dialogMap[key];
+            if (dialog && dialog.options.onOpen) {
+                dialog.options.onOpen();
+            }
+        }
+
+        function handleClose(key: string) {
+            const dialog = dialogMap[key];
+            if (dialog && dialog.options.onClose) {
+                dialog.options.onClose();
+            }
+            remove(key);
+        }
+
         const api: DialogApiInjection = {
             create,
             remove,
@@ -90,7 +119,10 @@ export default defineComponent({
         return {
             dialogMap,
             remove,
+            handleClose,
+            handleOpen,
             setDialogRef,
+            filteredOptions
         };
     },
 });

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

@@ -41,7 +41,10 @@ function showDialog2() {
         props: {message: testTitle},
         open: true,
         modal: false,
-        draggable: true
+        draggable: false,
+        onOpen: () => {
+            console.log('hello world')
+        }
     });
 
     setTimeout(() => {

package/src/components/dialogprovider/types.ts

@@ -7,6 +7,7 @@ export interface DialogOptions {
     render?: (props: any) => VNodeChild;
     props?: { [key: string]: any };
     onClose?: () => void;
+    onOpen?: () => void;
     open?: boolean;
     draggable?: boolean;
     modal?: boolean;