@teammodlr/ui-kit 2.3.12 → 2.3.15

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

@@ -1,80 +1,80 @@
-<template>
-    <MModal
-        ref="modal"
-        title="I am a modal"
-        class="fine-me"
-        wrap-class-name="hello-world">
-        <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>
+<template>
+    <MModal
+        ref="modal"
+        title="I am a modal"
+        class="fine-me"
+        wrap-class-name="hello-world">
+        <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,16 +1,16 @@
-import MModal from '../Modal.vue';
-import { MModalBasic, MModalForm, MModalSidebar } 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);
-export const ModalSidebar = createStory(MModalSidebar);
+import MModal from '../Modal.vue';
+import { MModalBasic, MModalForm, MModalSidebar } 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);
+export const ModalSidebar = createStory(MModalSidebar);

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

@@ -1,3 +1,3 @@
-export { default as MModalBasic } from './basic.vue';
-export { default as MModalForm } from './modal-form.vue';
-export { default as MModalSidebar } from './sidebar.vue';
+export { default as MModalBasic } from './basic.vue';
+export { default as MModalForm } from './modal-form.vue';
+export { default as MModalSidebar } from './sidebar.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>

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

@@ -1,79 +1,79 @@
-<template>
-    <MModal ref="modal" size="md" :showClose="false">
-        <template #sidebar>
-            <template v-for="i in 20">
-                <div style="margin-bottom: 8px">hi</div>
-            </template>
-        </template>
-        <div>
-            <MInput />
-        </div>
-        <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>
+<template>
+    <MModal ref="modal" size="md" :showClose="false">
+        <template #sidebar>
+            <template v-for="i in 20">
+                <div style="margin-bottom: 8px">hi</div>
+            </template>
+        </template>
+        <div>
+            <MInput />
+        </div>
+        <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>