@teammodlr/ui-kit 2.0.24 → 2.0.27

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, ref, 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, ref, 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,25 +1,25 @@
-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';

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

@@ -1,23 +1,23 @@
-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 {assignInlineVars} from '@vanilla-extract/dynamic';
 export * from './Form.css';

package/src/components/form/symbol.ts

@@ -1,11 +1,11 @@
-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;
-}
-
+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');