@teammodlr/ui-kit 2.1.41 → 2.1.43

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.ts

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

package/src/components/form/style/Form.css.ts

@@ -1,28 +1,28 @@
-import {
-    createVar,
-    globalKeyframes,
-    globalStyle,
-    style
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px'
-};
-
-export const vars = {
-    spacing: createVar()
-};
-
-export const base = style({
-    vars: {
-        [vars.spacing]: themeVars.space[4]
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    gap: vars.spacing
-});
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px'
+};
+
+export const vars = {
+    spacing: createVar()
+};
+
+export const base = style({
+    vars: {
+        [vars.spacing]: themeVars.space[4]
+    },
+    display: 'flex',
+    flexDirection: 'column',
+    gap: vars.spacing
+});

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

@@ -1,2 +1,2 @@
-export { assignInlineVars } from '@vanilla-extract/dynamic';
-export * from './Form.css';
+export { assignInlineVars } from '@vanilla-extract/dynamic';
+export * from './Form.css';

package/src/components/form/symbol.ts

@@ -1,16 +1,16 @@
-import type { InjectionKey } from 'vue';
-
-export interface FormState {
-    add: (
-        name: string,
-        focus: () => void,
-        validate: () => boolean,
-        setError: (error: string) => void
-    ) => void;
-    remove: (name: string) => void;
-    insideForm: boolean;
-    disabled: boolean;
-    loading: boolean;
-}
-
-export const FORM_STATE: InjectionKey<FormState> = Symbol('FORM_STATE');
+import type { InjectionKey } from 'vue';
+
+export interface FormState {
+    add: (
+        name: string,
+        focus: () => void,
+        validate: () => boolean,
+        setError: (error: string) => void
+    ) => void;
+    remove: (name: string) => void;
+    insideForm: boolean;
+    disabled: boolean;
+    loading: boolean;
+}
+
+export const FORM_STATE: InjectionKey<FormState> = Symbol('FORM_STATE');