@teammodlr/ui-kit 2.1.4 → 2.1.6

package/src/components/dialog/Dialog.vue

@@ -1,60 +1,118 @@
 <template>
-    <div>
-        <MModal ref="modal" :title="title" :canClickOutside="false" :onClose="onClose">
-            <template #body>
-                {{ content }}
-            </template>
-
-            <template #footer>
-            <div style="display: flex; flex-grow: 1; justify-content: end;">
-                <MButton :variant="okVariant" @click="handleOk">
-                    {{ okText ?? 'Okay' }}
-                </MButton>
-                <MButton style="margin-left: 8px;" @click="handleCancel">
-                    {{ cancelText ?? 'Cancel' }}
-                </MButton>
+    <Teleport to="body">
+        <div :class="style.root">
+            <div :class="backdropClasses">
             </div>
-        </template>
-        </MModal>
-    </div>
-</template>
+            <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 { defineComponent, onMounted, ref } from 'vue';
-import { useZIndex } from '../../composables/useZIndex';
-import { dialogProps } from './props';
-import  MModal from '../modal/Modal.vue';
+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: dialogProps,
-    setup(props, { slots }) {
-        const modal = ref();
-
-        const { nextZIndex } = useZIndex();
-
-        async function handleCancel(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onCancel) {
-                await props.onCancel(event)
+    props: {
+        title: {
+            type: String,
+            default: ""
+        },
+        draggable: {
+            type: Boolean,
+            default: false
+        },
+        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();
 
-        async function handleOk(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onOk) {
-                props.onOk(event)
+        const backdropClasses = computed(() => {
+            return {
+                [style.backdrop]: true,
+                [style.backdropColor]: props.backdrop === true
             }
-        }
-        onMounted(() => {
-            modal.value?.open(null);
         });
+
+        const width = computed(() => {
+            return typeof props.width === "number" ? props.width + "px" : props.width;
+        });
+
+        const zIndex = ref(props.zIndex ?? nextZIndex());
         return {
-            modal,
-            handleOk,
-            handleCancel
+            slots,
+            wrapper,
+            dialog,
+            handle,
+            zIndex,
+            width,
+            x,
+            y,
+            style,
+            backdropClasses,
+            nextZIndex
         };
-    },
-    components: { MModal }
+    }
 });
 </script>

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

@@ -1,48 +1,16 @@
 <template>
     <div>
-        <button @click="showBasicDialog">
-            Show Basic</button>
-
-        <button @click="showDangerDialog">
-            Show Danger
-        </button>
+        <MDialog>
+            <input type="text" />
+            <input type="text" />
+            <template #footer>
+                Bootom
+            </template>
+        </MDialog>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { useDialog } from '../useDialog';
-
-const dialog = useDialog();
-
-async function showBasicDialog() {
-    const result = dialog.create({
-        title: 'Hello World',
-        content: 'This is a dialog',
-        okText: 'OK',
-        cancelText: 'Cancel',
-        onOk: () => {
-            console.log('OK');
-        },
-        onCancel: () => {
-            console.log('Cancel');
-        }
-    });
-}
+import { ref } from 'vue'
 
-async function showDangerDialog() {
-    const result = dialog.create({
-        title: 'Hello World',
-        content: 'This is a dialog',
-        okText: 'Continue',
-        okVariant: 'error',
-        cancelText: 'Cancel',
-        onOk: () => {
-            showBasicDialog()
-        },
-        onCancel: () => {
-            console.log('Cancel');
-        }
-    });
-}
 </script>

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

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

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

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

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

@@ -0,0 +1,99 @@
+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 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: 0,
+    borderRadius: themeVars.rounded.default,
+    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)`
+})
+
+export const header = style({
+    color: themeVars.color.font.default,
+    backgroundColor: "#FFF",
+    marginBottom: 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({
+    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)`,
+        }
+    }
+})

package/src/components/dialog/style/index.ts

@@ -0,0 +1 @@
+export * from './Dialog.css';

package/src/components/dialog/types.ts

@@ -1,34 +0,0 @@
-import type { Variant } from '../../types/props';
-import type { VNodeChild } from 'vue';
-
-export type DialogContentType = string;
-
-export type DialogContentRender = (props: any) => VNodeChild;
-
-export interface DialogOptions {
-    title?: string,
-    render?: DialogContentRender,
-    content: DialogContentType,
-    onClose?: () => void,
-    onOpen?: () => void,
-    onOk?: () => void,
-    onCancel?: () => void,
-    okVariant?: Variant,
-    okText?: DialogContentType,
-    cancelText?: DialogContentType,
-}
-
-export interface DialogResponse {
-    result: boolean,
-    data: any
-}
-
-export interface DialogApiInjection {
-    create: (options: DialogOptions) => Dialog
-    destroyAll: () => void
-}
-
-
-export interface Dialog extends DialogOptions {
-    destroy: () => void
-}

package/src/components/index.ts

@@ -40,5 +40,7 @@ export { default as MTextarea } from './textarea/Textarea.vue';
 export { default as MTooltip } from './tooltip/Tooltip.vue';
 export { default as MTransfer } from './transfer/Transfer.vue';
 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 './dialog/DialogProvider.vue';
+export { default as MTree } from './tree/Tree.vue';