@teammodlr/ui-kit 2.3.12 → 2.3.15

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

@@ -1,26 +1,26 @@
-import MDropdown from '../Dropdown.vue';
-import MDropdownList from '../DropdownList.vue';
-import MDropdownItem from '../DropdownItem.vue';
-import MDropdownHeading from '../DropdownHeading.vue';
-import MButton from '../../button/Button.vue';
-
-import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
-import { createStory, popperPositionArgType } from '../../../__storybook__';
-
-export default {
-    component: MDropdown,
-    subcomponents: {
-        MDropdownList,
-        MDropdownItem,
-        MDropdownHeading,
-        MButton
-    },
-    title: 'Components/Dropdown',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-};
-
-export const Basic = createStory(MDropdownBasic);
-export const Custom = createStory(MDropdownCustom);
-export const Context = createStory(MDropdownContext);
+import MDropdown from '../Dropdown.vue';
+import MDropdownList from '../DropdownList.vue';
+import MDropdownItem from '../DropdownItem.vue';
+import MDropdownHeading from '../DropdownHeading.vue';
+import MButton from '../../button/Button.vue';
+
+import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MDropdown,
+    subcomponents: {
+        MDropdownList,
+        MDropdownItem,
+        MDropdownHeading,
+        MButton
+    },
+    title: 'Components/Dropdown',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MDropdownBasic);
+export const Custom = createStory(MDropdownCustom);
+export const Context = createStory(MDropdownContext);

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

@@ -1,3 +1,3 @@
-export { default as MDropdownBasic } from './basic.vue';
-export { default as MDropdownCustom } from './custom.vue';
-export { default as MDropdownContext } from './context.vue';
+export { default as MDropdownBasic } from './basic.vue';
+export { default as MDropdownCustom } from './custom.vue';
+export { default as MDropdownContext } from './context.vue';

package/src/components/dropdown/hooks.ts

@@ -1,30 +1,30 @@
-import { ref, watch, onMounted, nextTick } from 'vue';
-
-import type { Ref } from 'vue';
-
-export function useLabel(
-    rawLabel: Ref<string | number | null>,
-    element: Ref<HTMLElement | null | undefined>
-) {
-    const label = ref(rawLabel.value);
-
-    function setLabel(value: string | number | null) {
-        if (element.value) {
-            label.value = value ?? element.value.textContent?.trim() ?? null;
-        } else {
-            label.value = value;
-        }
-    }
-
-    watch(rawLabel, value => {
-        setLabel(value);
-    });
-
-    onMounted(() => {
-        nextTick(() => {
-            setLabel(rawLabel.value);
-        });
-    });
-
-    return label;
-}
+import { ref, watch, onMounted, nextTick } from 'vue';
+
+import type { Ref } from 'vue';
+
+export function useLabel(
+    rawLabel: Ref<string | number | null>,
+    element: Ref<HTMLElement | null | undefined>
+) {
+    const label = ref(rawLabel.value);
+
+    function setLabel(value: string | number | null) {
+        if (element.value) {
+            label.value = value ?? element.value.textContent?.trim() ?? null;
+        } else {
+            label.value = value;
+        }
+    }
+
+    watch(rawLabel, value => {
+        setLabel(value);
+    });
+
+    onMounted(() => {
+        nextTick(() => {
+            setLabel(rawLabel.value);
+        });
+    });
+
+    return label;
+}

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

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

package/src/components/dropdown/symbol.ts

@@ -1,9 +1,9 @@
-import type { InjectionKey } from 'vue';
-
-export interface DropdownState {
-    handleSelect: (labels: string[]) => void;
-    isOpen: boolean;
-}
-
-export const DROPDOWN_STATE: InjectionKey<DropdownState> =
-    Symbol('DROPDOWN_STATE');
+import type { InjectionKey } from 'vue';
+
+export interface DropdownState {
+    handleSelect: (labels: string[]) => void;
+    isOpen: boolean;
+}
+
+export const DROPDOWN_STATE: InjectionKey<DropdownState> =
+    Symbol('DROPDOWN_STATE');

package/src/components/form/Form.vue

@@ -1,153 +1,153 @@
-<template>
-    <form :style="computedStyles" :class="[
-        computedClasses
-    ]" @submit.prevent="submit">
-        <slot :loading="loading" />
-    </form>
-</template>
-
-<script lang="ts">
-import {defineComponent, provide, reactive, computed, onMounted, watch, nextTick, toRef} from 'vue';
-import type { PropType } from 'vue';
-import * as style from "./style";
-import {FORM_STATE} from "./symbol";
-import type { FormState } from "./symbol";
-export type FormError = {
-    field: string;
-    message: string;
-};
-
-export type Form = {
-    name: string;
-    focus: () => void;
-    validate: () => boolean;
-    setError: (error: string) => void;
-};
-
-export default defineComponent({
-    name: "MForm",
-    props: {
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        errors: {
-            type: [Array, Object] as PropType<[FormError[], FormError]>,
-            default: () => ([]),
-        },
-        autoValidate: {
-            type: Boolean,
-            default: true,
-        },
-        autoFocus: {
-            type: Boolean,
-            default: false,
-        },
-        spacing: {
-            type: String
-        },
-    },
-    emits: [
-        "submit"
-    ],
-    expose: ["submit"],
-    setup(props, { emit }) {
-        const inputs: Form[] = [];
-
-        const state: FormState = reactive({
-            add: (name: string, focus: () => void, validate: () => boolean, setError: (error: string) => void) => {
-                const exists = inputs.find((input) => input.name === name);
-
-                if (exists) {
-                    exists.focus = focus;
-                    exists.validate = validate;
-                    exists.setError = setError;
-                } else {
-                    inputs.push({
-                        name,
-                        focus,
-                        validate,
-                        setError,
-                    });
-                }
-            },
-            remove: (name: string) => {
-                const index = inputs.findIndex((input) => input.name === name);
-                inputs.splice(index, 1);
-            },
-            insideForm: true,
-            disabled: toRef(props, "disabled"),
-            loading: toRef(props, "loading"),
-        });
-
-        provide(FORM_STATE, state);
-
-        onMounted(() => {
-            if (props.autoFocus && inputs && inputs.length > 0) {
-                inputs[0].focus();
-            }
-        });
-
-        watch(() => props.errors, (errors) => {
-            if (errors) {
-                nextTick(() => {
-                    if (Array.isArray(errors)) {
-                        errors.forEach((error: any) => {
-                            const input = inputs.find((i) => i.name === error.field)
-                            if (input) input.setError(error.message)
-                        })
-                    } else {
-                        const input = inputs.find((i) => i.name === (errors as FormError).field)
-                        if (input) input.setError((errors as FormError).message)
-                    }
-                })
-            }
-        });
-
-        const validate = () => {
-            let isValid = true;
-
-            inputs.forEach((input) => {
-                if (!input.validate()) {
-                    isValid = false;
-                }
-            });
-
-            return isValid;
-        };
-
-        const submit = (e: Event) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-
-
-            emit("submit", props.autoValidate ? validate() : true);
-        };
-
-        const computedStyles = computed(() => {
-            let styles = {} as Record<string, string>;
-            if (props.spacing) {
-                styles[style.vars.spacing] = props.spacing;
-            }
-            return style.assignInlineVars(styles);
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                style.base
-            ]
-        });
-
-        return {
-            submit,
-            computedStyles,
-            computedClasses
-        };
-    }
-});
-</script>
+<template>
+    <form :style="computedStyles" :class="[
+        computedClasses
+    ]" @submit.prevent="submit">
+        <slot :loading="loading" />
+    </form>
+</template>
+
+<script lang="ts">
+import {defineComponent, provide, reactive, computed, onMounted, watch, nextTick, toRef} from 'vue';
+import type { PropType } from 'vue';
+import * as style from "./style";
+import {FORM_STATE} from "./symbol";
+import type { FormState } from "./symbol";
+export type FormError = {
+    field: string;
+    message: string;
+};
+
+export type Form = {
+    name: string;
+    focus: () => void;
+    validate: () => boolean;
+    setError: (error: string) => void;
+};
+
+export default defineComponent({
+    name: "MForm",
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        errors: {
+            type: [Array, Object] as PropType<[FormError[], FormError]>,
+            default: () => ([]),
+        },
+        autoValidate: {
+            type: Boolean,
+            default: true,
+        },
+        autoFocus: {
+            type: Boolean,
+            default: false,
+        },
+        spacing: {
+            type: String
+        },
+    },
+    emits: [
+        "submit"
+    ],
+    expose: ["submit"],
+    setup(props, { emit }) {
+        const inputs: Form[] = [];
+
+        const state: FormState = reactive({
+            add: (name: string, focus: () => void, validate: () => boolean, setError: (error: string) => void) => {
+                const exists = inputs.find((input) => input.name === name);
+
+                if (exists) {
+                    exists.focus = focus;
+                    exists.validate = validate;
+                    exists.setError = setError;
+                } else {
+                    inputs.push({
+                        name,
+                        focus,
+                        validate,
+                        setError,
+                    });
+                }
+            },
+            remove: (name: string) => {
+                const index = inputs.findIndex((input) => input.name === name);
+                inputs.splice(index, 1);
+            },
+            insideForm: true,
+            disabled: toRef(props, "disabled"),
+            loading: toRef(props, "loading"),
+        });
+
+        provide(FORM_STATE, state);
+
+        onMounted(() => {
+            if (props.autoFocus && inputs && inputs.length > 0) {
+                inputs[0].focus();
+            }
+        });
+
+        watch(() => props.errors, (errors) => {
+            if (errors) {
+                nextTick(() => {
+                    if (Array.isArray(errors)) {
+                        errors.forEach((error: any) => {
+                            const input = inputs.find((i) => i.name === error.field)
+                            if (input) input.setError(error.message)
+                        })
+                    } else {
+                        const input = inputs.find((i) => i.name === (errors as FormError).field)
+                        if (input) input.setError((errors as FormError).message)
+                    }
+                })
+            }
+        });
+
+        const validate = () => {
+            let isValid = true;
+
+            inputs.forEach((input) => {
+                if (!input.validate()) {
+                    isValid = false;
+                }
+            });
+
+            return isValid;
+        };
+
+        const submit = (e: Event) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+
+
+            emit("submit", props.autoValidate ? validate() : true);
+        };
+
+        const computedStyles = computed(() => {
+            let styles = {} as Record<string, string>;
+            if (props.spacing) {
+                styles[style.vars.spacing] = props.spacing;
+            }
+            return style.assignInlineVars(styles);
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                style.base
+            ]
+        });
+
+        return {
+            submit,
+            computedStyles,
+            computedClasses
+        };
+    }
+});
+</script>

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

@@ -1,75 +1,75 @@
-<template>
-    <MForm @submit="onSubmit" :loading="loading">
-        <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 />
-
-
-        <MButton type="submit" color="blue">Submit</MButton>
-    </MForm>
-</template>
-
-<script lang="ts" setup>
-import { MCheckbox, MSelect, MColorPicker } from '@/components';
-import { ref } from 'vue';
-
-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>
+    <MForm @submit="onSubmit" :loading="loading">
+        <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 />
+
+
+        <MButton type="submit" color="blue">Submit</MButton>
+    </MForm>
+</template>
+
+<script lang="ts" setup>
+import { MCheckbox, MSelect, MColorPicker } from '@/components';
+import { ref } from 'vue';
+
+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/form/examples/index.stories.ts

@@ -1,23 +1,23 @@
-import MForm from '../Form.vue';
-import MInput from '../../input/Input.vue';
-import MButton from '../../button/Button.vue';
-import MSelect from '../../select/Select.vue';
-import MCheckbox from '../../checkbox/Checkbox.vue';
-import MColorPicker from '../../colorpicker/ColorPicker.vue';
-
-import { MFormBasic } from './index';
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MForm,
-    subcomponents: {
-        MInput,
-        MButton,
-        MSelect,
-        MCheckbox,
-        MColorPicker
-    },
-    title: 'Components/Form'
-};
-
-export const Basic = createStory(MFormBasic);
+import MForm from '../Form.vue';
+import MInput from '../../input/Input.vue';
+import MButton from '../../button/Button.vue';
+import MSelect from '../../select/Select.vue';
+import MCheckbox from '../../checkbox/Checkbox.vue';
+import MColorPicker from '../../colorpicker/ColorPicker.vue';
+
+import { MFormBasic } from './index';
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MForm,
+    subcomponents: {
+        MInput,
+        MButton,
+        MSelect,
+        MCheckbox,
+        MColorPicker
+    },
+    title: 'Components/Form'
+};
+
+export const Basic = createStory(MFormBasic);

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

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