@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/modal/Modal.vue

@@ -1,126 +1,121 @@
-<template>
-    <Teleport :to="'body'">
-        <Transition name="fade-out" mode="out-in" :enter-active-class="style.fadeBackgroundEnter"
-                    :leave-active-class="style.fadeBackgroundLeave">
-
-            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @click="closeOutside">
-                <Transition name="fade-out" mode="out-in" :enter-active-class="style.fadeEnter"
-                            :leave-active-class="style.fadeLeave" :enter-from-class="style.fadeEnterFrom">
-
-                    <div v-if="isOpen" :class="containerClasses" @click.stop ref="target">
-                        <div :class="style.header">
-                            <div :class="style.title">
-                                <div>
-                                    {{ title }}
-                                </div>
-                            </div>
-                            <button :class="style.close" @click="close">
-                            </button>
-                        </div>
-                        <div :class="style.body">
-                            <slot name="body"></slot>
-                        </div>
-                        <div :class="style.footer">
-                            <slot name="footer"></slot>
-                        </div>
-                    </div>
-
-
-                </Transition>
-            </div>
-
-        </Transition>
-    </Teleport>
-</template>
-
-<script lang="ts">
-import type {PropType} from "vue";
-import type {Size} from "../../types/props";
-import {defineComponent, ref, computed, watch, nextTick} from 'vue';
-import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
-import * as style from './style';
-import {useZIndex} from "../../composables/useZIndex";
-
-export default defineComponent({
-    name: "MModal",
-    props: {
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        title: {
-            type: String,
-            default: ""
-        },
-        // TODO: if we add more transitions, we can add a prop to select which one to use.
-        // transition: {
-        //     type: String,
-        //     default: "scale",
-        // },
-        canClickOutside: {
-            type: Boolean,
-            default: true
-        },
-        zIndex: {
-            type: Number
-        }
-    },
-    emits: ['open'],
-    setup(props, {emit}) {
-        const {nextZIndex} = useZIndex();
-        const isOpen = ref(false);
-        const target = ref();
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-        const {hasFocus, activate, deactivate} = useFocusTrap(target, {
-            immediate: true,
-            escapeDeactivates: false,
-            allowOutsideClick: true
-        });
-
-        const containerClasses = computed(() => {
-            return [
-                style.container,
-                style.size[props.size],
-            ];
-        });
-
-
-        const closeOutside = () => {
-            if (props.canClickOutside) {
-                isOpen.value = false;
-            }
-        };
-
-        const close = () => {
-            isOpen.value = false;
-        };
-
-        const open = (element: HTMLElement | null) => {
-            isOpen.value = true;
-        };
-
-        watch(() => isOpen.value, (value) => {
-            if (value) {
-                zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
-                emit('open');
-                nextTick(() => {
-                    activate()
-                })
-            } else {
-                deactivate()
-            }
-        });
-
-        return {
-            close,
-            closeOutside,
-            open,
-            target,
-            style,
-            isOpen,
-            containerClasses,
-            zIndex
-        };
-    }
-})
-</script>
+<template>
+    <Teleport :to="'body'">
+        <Transition name="fade-out" mode="out-in" :enter-active-class="style.fadeBackgroundEnter"
+                    :leave-active-class="style.fadeBackgroundLeave">
+
+            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @click="closeOutside">
+                <Transition name="fade-out" mode="out-in" :enter-active-class="style.fadeEnter"
+                            :leave-active-class="style.fadeLeave" :enter-from-class="style.fadeEnterFrom">
+
+                    <div v-if="isOpen" :class="containerClasses" @click.stop ref="target">
+                        <div :class="style.header">
+                            <div :class="style.title">
+                                <div>
+                                    {{ title }}
+                                </div>
+                            </div>
+                            <button :class="style.close" @click="close">
+                            </button>
+                        </div>
+                        <div :class="style.body">
+                            <slot name="body"></slot>
+                        </div>
+                        <div :class="style.footer">
+                            <slot name="footer"></slot>
+                        </div>
+                    </div>
+
+
+                </Transition>
+            </div>
+
+        </Transition>
+    </Teleport>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import type {Size} from "../../types/props";
+import {defineComponent, ref, computed, watch, nextTick} from 'vue';
+import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
+import * as style from './style';
+import {useZIndex} from "../../composables/useZIndex";
+
+export default defineComponent({
+    name: "MModal",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        canClickOutside: {
+            type: Boolean,
+            default: true
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['open'],
+    setup(props, {emit}) {
+        const {nextZIndex} = useZIndex();
+        const isOpen = ref(false);
+        const target = ref();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        const {hasFocus, activate, deactivate} = useFocusTrap(target, {
+            immediate: true,
+            escapeDeactivates: false,
+            allowOutsideClick: true
+        });
+
+        const containerClasses = computed(() => {
+            return [
+                style.container,
+                style.size[props.size],
+            ];
+        });
+
+
+        const closeOutside = () => {
+            if (props.canClickOutside) {
+                isOpen.value = false;
+            }
+        };
+
+        const close = () => {
+            isOpen.value = false;
+        };
+
+        const open = (element: HTMLElement | null) => {
+            isOpen.value = true;
+        };
+
+        watch(() => isOpen.value, (value) => {
+            if (value) {
+                zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+                emit('open');
+                nextTick(() => {
+                    activate()
+                })
+            } else {
+                deactivate()
+            }
+        });
+
+        return {
+            close,
+            closeOutside,
+            open,
+            target,
+            style,
+            isOpen,
+            containerClasses,
+            zIndex
+        };
+    }
+})
+</script>

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

@@ -1,40 +1,40 @@
-<template>
-    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false" :canSlideIn="true">
-        <template #body>
-            <div>
-                I am a body..
-            </div>
-        </template>
-        <template #footer>
-            <div style="display: flex; flex-grow: 1; justify-content: end;">
-                <MButton variant="primary" @click="modal?.close()">
-                    Okay
-                </MButton>
-                <MButton style="margin-left: 8px;" @click="modal?.close()">
-                    Cancel
-                </MButton>
-            </div>
-        </template>
-    </MModal>
-
-    <div style="position: relative; width: 100%; height: 1000px;">
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; right: 0;">Top Right</button>
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; left: 0;">Bottom
-            Left</button>
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; right: 0;">Bottom
-            Right</button>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { MButton } from '@/components';
-import { ref } from 'vue'
-
-const modal = ref<any>(null);
-
-const open = (event: MouseEvent) => {
-    modal.value.open(event.target);
-};
-
-</script>
+<template>
+    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false" :canSlideIn="true">
+        <template #body>
+            <div>
+                <MInput 
+                    />
+            </div>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end;">
+                <MButton variant="primary" @click="modal?.close()">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px;" @click="modal?.close()">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px;">
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; right: 0;">Top Right</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; left: 0;">Bottom
+            Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; right: 0;">Bottom
+            Right</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const modal = ref<any>(null);
+
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+
+</script>

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

@@ -1,20 +1,20 @@
-import MModal from "../Modal.vue";
-import {
-    MModalBasic,
-    MModalForm
-} from "./index";
-
-import {
-    createStory, sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MModal,
-    title: 'Components/Modal',
-    argTypes: {
-        ...sizeArgType(),
-    }
-}
-
-export const Basic = createStory(MModalBasic);
-export const ModalForm = createStory(MModalForm);
+import MModal from "../Modal.vue";
+import {
+    MModalBasic,
+    MModalForm
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MModal,
+    title: 'Components/Modal',
+    argTypes: {
+        ...sizeArgType(),
+    }
+}
+
+export const Basic = createStory(MModalBasic);
+export const ModalForm = createStory(MModalForm);

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

@@ -1,2 +1,2 @@
-export { default as MModalBasic } from './basic.vue';
-export { default as MModalForm } from './modal-form.vue';
+export { default as MModalBasic } from './basic.vue';
+export { default as MModalForm } from './modal-form.vue';

package/src/components/modal/examples/modal-form.vue

@@ -1,99 +1,99 @@
-<template>
-    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false"
-            :canSlideIn="true">
-        <template #body>
-            <MForm @submit="onSubmit" :loading="loading" style="display: flex; flex-direction: column; gap: 10px;">
-                <MInput
-                        label="Email"
-                        placeholder="Email Address"
-                        name="email"
-                        v-model="email"
-                        :rules="[rules.isRequired, rules.isEmail]"
-                />
-
-                <MInput
-                        label="Name"
-                        placeholder="Name"
-                        name="name"
-                        v-model="name"
-                        :rules="[rules.isRequired]"
-                />
-
-                <MSelect
-                        label="Option"
-                        v-model="option"
-                        :options="options"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :rules="[rules.isRequired]"
-                />
-
-                <MCheckbox
-                        label="Agree to terms"
-                        v-model="agree"
-                        :rules="[rules.isRequired]"
-                >
-                    Something here!
-                </MCheckbox>
-
-                <MColorPicker/>
-
-            </MForm>
-        </template>
-        <template #footer>
-            <div style="display: flex; flex-grow: 1; justify-content: end;">
-                <MButton variant="primary" @click="modal?.close()">
-                    Okay
-                </MButton>
-                <MButton style="margin-left: 8px;" @click="modal?.close()">
-                    Cancel
-                </MButton>
-            </div>
-        </template>
-    </MModal>
-
-    <div style="position: relative; width: 100%; height: 1000px;">
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import {MCheckbox, MSelect, MColorPicker} from '@/components';
-import type {MButton} from '@/components';
-import {ref} from 'vue'
-
-const modal = ref<any>(null);
-
-const open = (event: MouseEvent) => {
-    modal.value.open(event.target);
-};
-
-const rules = {
-    isEmail: (v: any) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
-    isRequired: (v: any) => !!v || 'Field is required',
-}
-
-const options = Array.from({length: 50}, (_, i) => ({
-    id: i + 1,
-    name: `Option ${i + 1}`
-}));
-
-const loading = ref(false);
-const email = ref('');
-const name = ref('');
-const option = ref('');
-const agree = ref(false);
-
-
-function onSubmit(valid: boolean) {
-    if (valid) {
-        loading.value = true;
-        setTimeout(() => {
-            console.log('submit', {email: email.value, name: name.value});
-            loading.value = false;
-        }, 3000);
-    } else {
-        console.log('invalid');
-    }
-}
-</script>
+<template>
+    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false"
+            :canSlideIn="true">
+        <template #body>
+            <MForm @submit="onSubmit" :loading="loading" style="display: flex; flex-direction: column; gap: 10px;">
+                <MInput
+                        label="Email"
+                        placeholder="Email Address"
+                        name="email"
+                        v-model="email"
+                        :rules="[rules.isRequired, rules.isEmail]"
+                />
+
+                <MInput
+                        label="Name"
+                        placeholder="Name"
+                        name="name"
+                        v-model="name"
+                        :rules="[rules.isRequired]"
+                />
+
+                <MSelect
+                        label="Option"
+                        v-model="option"
+                        :options="options"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :rules="[rules.isRequired]"
+                />
+
+                <MCheckbox
+                        label="Agree to terms"
+                        v-model="agree"
+                        :rules="[rules.isRequired]"
+                >
+                    Something here!
+                </MCheckbox>
+
+                <MColorPicker/>
+
+            </MForm>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end;">
+                <MButton variant="primary" @click="modal?.close()">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px;" @click="modal?.close()">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px;">
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {MCheckbox, MSelect, MColorPicker} from '@/components';
+import type {MButton} from '@/components';
+import {ref} from 'vue'
+
+const modal = ref<any>(null);
+
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+
+const rules = {
+    isEmail: (v: any) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+    isRequired: (v: any) => !!v || 'Field is required',
+}
+
+const options = Array.from({length: 50}, (_, i) => ({
+    id: i + 1,
+    name: `Option ${i + 1}`
+}));
+
+const loading = ref(false);
+const email = ref('');
+const name = ref('');
+const option = ref('');
+const agree = ref(false);
+
+
+function onSubmit(valid: boolean) {
+    if (valid) {
+        loading.value = true;
+        setTimeout(() => {
+            console.log('submit', {email: email.value, name: name.value});
+            loading.value = false;
+        }, 3000);
+    } else {
+        console.log('invalid');
+    }
+}
+</script>