@teammodlr/ui-kit 2.1.65 → 2.1.67

package/src/components/dialog/Dialog.vue

@@ -1,118 +1,180 @@
-<template>
-    <Teleport to="body">
-        <div :class="style.root">
-            <div :class="backdropClasses">
-            </div>
-            <div ref="wrapper" :class="style.wrapper">
-                <div ref="dialog" :class="style.dialog" :style="{
-                    // top: y + 'px',
-                    // left: x + 'px',
-                    zIndex: zIndex,
-                    width: width
-                }">
-                    <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                    <div :class="style.content">
-                        <button role="button" :class="style.close">x</button>
-                        <div :class="style.header" ref="handle">
-                            <div :class="style.title">
-                                <slot name="title">
-                                    Title
-                                </slot>
-                            </div>
-                        </div>
-                        <div>
-                            <slot></slot>
-                        </div>
-                        <div :class="style.footer">
-                            <slot name="footer"></slot>
-                        </div>
-                    </div>
-                    <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                </div>
-            </div>
-        </div>
-
-    </Teleport>
-</template>
-<script lang="ts">
-import {computed, defineComponent, type PropType, ref} from "vue";
-import {useZIndex} from "../../composables/useZIndex";
-import {useDraggable} from "@vueuse/core";
-import * as style from "./style";
-
-export default defineComponent({
-    name: "Dialog",
-    props: {
-        title: {
-            type: String,
-            default: ""
-        },
-        draggable: {
-            type: Boolean,
-            default: true
-        },
-        backdrop: {
-            type: Boolean,
-            default: false,
-        },
-        onClose: {
-            type: Function as PropType<() => void>,
-            default: () => {
-            }
-        },
-        zIndex: {
-            type: Number
-        },
-        width: {
-            type: [Number, String],
-            default: "500px"
-        },
-        transformOrigin: {
-            type: String as PropType<'center' | 'mouse'>,
-            default: 'mouse'
-        },
-        focusTrap: {
-            type: Boolean,
-            default: true
-        }
-    },
-    emits: ['onOpen', 'onClose'],
-    setup(props, {slots}) {
-        const wrapper = ref<HTMLElement | null>(null);
-        const dialog = ref<HTMLElement | null>(null);
-        const handle = ref<HTMLElement | null>(null);
-        const {x, y} = useDraggable(dialog, {
-            handle: handle,
-            preventDefault: true,
-            // containerElement: wrapper,
-        });
-        const {nextZIndex} = useZIndex();
-
-        const backdropClasses = computed(() => {
-            return {
-                [style.backdrop]: true,
-                [style.backdropColor]: props.backdrop === true
-            }
-        });
-
-        const width = computed(() => {
-            return typeof props.width === "number" ? props.width + "px" : props.width;
-        });
-
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-        return {
-            slots,
-            wrapper,
-            dialog,
-            handle,
-            zIndex,
-            width,
-            x,
-            y,
-            style,
-            backdropClasses,
-            nextZIndex
-        };
-    }
-});
-</script>
+<template>
+    <Teleport to="body">
+        <TransitionGroup
+            type="animation"
+            :enter-active-class="fade.enterActive"
+            :leave-active-class="fade.leaveActive"
+            :enter-from-class="fade.enterFrom"
+            :leave-to-class="fade.leaveTo">
+            <div :class="style.root" v-if="open">
+                <div :class="backdropClasses" v-if="modal"></div>
+                <div ref="wrapper" :class="wrapperClasses">
+                    <Transition
+                        type="animation"
+                        :enter-active-class="modalScale.enterActive"
+                        :leave-active-class="modalScale.leaveActive"
+                        :enter-from-class="modalScale.enterFrom"
+                        :leave-to-class="modalScale.leaveTo"
+                        @enter="onEnter"
+                    >
+                        <div ref="dialog" :style="computedStyle">
+                            <div tabindex="0" aria-hidden="true"
+                                 style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                            <slot v-if="$slots.container" name="container" :close="close"></slot>
+                            <template v-else>
+                                <div :class="style.content">
+                                    <button role="button" :class="style.close" @click="close"></button>
+                                    <div :class="style.header" ref="handle">
+                                        <div :class="style.title">
+                                            <slot name="title">
+                                                {{ title }}
+                                            </slot>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <slot></slot>
+                                    </div>
+                                    <div v-if="$slots.footer" :class="style.footer">
+                                        <slot name="footer"></slot>
+                                    </div>
+                                </div>
+                            </template>
+                            <div tabindex="0" aria-hidden="true"
+                                 style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+        </TransitionGroup>
+    </Teleport>
+</template>
+
+<script lang="ts">
+import { fade, modalScale } from '../../styles/transitions.css';
+import {computed, defineComponent, ref, watch, nextTick, type CSSProperties} from "vue";
+import type { ComputedRef } from "vue";
+
+import { useZIndex } from "../../composables/useZIndex";
+import { useDraggable } from "@vueuse/core";
+import * as style from "./style";
+
+export default defineComponent({
+    name: "Dialog",
+    props: {
+        title: {
+            type: String,
+            default: ""
+        },
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+        modal: {
+            type: Boolean,
+            default: false,
+        },
+        onClose: {
+            type: Function,
+            default: () => {}
+        },
+        zIndex: {
+            type: Number
+        },
+        width: {
+            type: [Number, String],
+            default: "500px"
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
+        },
+        open: {
+            type: Boolean
+        }
+    },
+    emits: ['onOpen', 'onClose', 'update:open'],
+    setup(props, { slots, emit }) {
+        const wrapper = ref<HTMLElement | null>(null);
+        const dialog = ref<HTMLElement | null>(null);
+        const handle = ref<HTMLElement | null>(null);
+        const { nextZIndex } = useZIndex();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const { x, y } = useDraggable(dialog, {
+            handle,
+            preventDefault: true,
+            containerElement: wrapper,
+            disabled: computed(() => !props.draggable),
+            onStart: onDragStart,
+        });
+
+        const backdropClasses = computed(() => ({
+            [style.backdrop]: true,
+            [style.backdropColor]: props.modal === true,
+        }));
+
+        const wrapperClasses = computed(() => ({
+            [style.wrapper]: true,
+            [style.notModal]: !props.modal,
+        }));
+
+        const width = computed(() => (
+            typeof props.width === "number" ? `${props.width}px` : props.width
+        ));
+
+        const computedStyle: ComputedRef<CSSProperties> = computed(() => ({
+            position: 'fixed',
+            left: `${x.value}px`,
+            top: `${y.value}px`,
+            width: width.value,
+            zIndex: zIndex.value
+        }));
+
+        function close() {
+            emit('update:open', false);
+            emit('onClose');
+        }
+
+        function onEnter() {
+            emit('onOpen');
+            zIndex.value = nextZIndex();
+        }
+
+                function onDragStart() {
+                    zIndex.value = nextZIndex();
+                }
+
+                function centerDialog() {
+                    if (dialog.value) {
+                        const boundingRect = dialog.value.getBoundingClientRect();
+                        x.value = (window.innerWidth - boundingRect.width) / 2;
+                        y.value = (window.innerHeight - boundingRect.height) / 2;
+                    }
+                }
+
+                watch(() => props.open, async (newVal) => {
+                    if (newVal) {
+                        await nextTick();
+                        centerDialog();
+                    }
+                }, { immediate: true });
+
+                return {
+                    slots,
+                    wrapper,
+                    dialog,
+                    handle,
+                    zIndex,
+                    fade,
+                    modalScale,
+                    style,
+                    computedStyle,
+                    backdropClasses,
+                    wrapperClasses,
+                    close,
+                    onEnter,
+                };
+            }
+        });
+        </script>
+

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

@@ -1,16 +1,23 @@
 <template>
     <div>
-        <MDialog :draggable="true">
+        <MDialog :draggable="true" v-model:open="open" width="1000px" title="Hello World" @onClose="closed">
             <input type="text" />
             <input type="text" />
             <template #footer>
                 Bootom
             </template>
         </MDialog>
+
+        <button @click="open = true">Open</button>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+const open = ref(false);
+
+function closed() {
+    console.log('closed');
+}
 </script>

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

@@ -35,9 +35,13 @@ export const wrapper = style({
     bottom: 0,
     outline: 0,
     overflow: 'auto',
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
 });
 
+export const notModal = style({
+    pointerEvents: 'none'
+})
+
 export const dialog = style({
     boxSizing: 'border-box',
     margin: '0 auto',
@@ -53,17 +57,21 @@ export const content = style({
     position: 'relative',
     backgroundColor: '#FFF',
     backgroundClip: 'padding-box',
-    border: 0,
-    borderRadius: themeVars.rounded.default,
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.medium,
     pointerEvents: 'auto',
-    padding: `20px 24px`,
-    boxShadow: `0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)`
+    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]
+    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({
@@ -80,21 +88,51 @@ export const title = style({
     wordWrap: 'break-word'
 });
 
-export const close = style({
-    position: 'absolute',
-    top: `17px`,
-    insetInlineEnd: `17px`,
-    padding: 0,
-    background: `0 0`,
-    borderRadius: themeVars.rounded.small,
-    width: `22px`,
-    height: `22px`,
-    border: 0,
-    outline: 0,
-    cursor: `pointer`,
-    selectors: {
-        '&:hover': {
-            backgroundColor: `hsla(0,0%,45.1%,0.1)`
+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'
         }
     }
-});
+]);