@teammodlr/ui-kit 2.1.41 → 2.1.43

package/src/components/dialog/Dialog.vue

@@ -1,118 +1,118 @@
-<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: 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();
-
-        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">
+        <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: 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();
+
+        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>

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

@@ -1,16 +1,16 @@
-<template>
-    <div>
-        <MDialog>
-            <input type="text" />
-            <input type="text" />
-            <template #footer>
-                Bootom
-            </template>
-        </MDialog>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-</script>
+<template>
+    <div>
+        <MDialog>
+            <input type="text" />
+            <input type="text" />
+            <template #footer>
+                Bootom
+            </template>
+        </MDialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+</script>

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

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

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

@@ -1,100 +1,100 @@
-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)`
-        }
-    }
-});
+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

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