@teammodlr/ui-kit 1.0.2

package/src/components/form/Form.vue

@@ -0,0 +1,141 @@
+<template>
+    <form :styles="computedStyles" :class="[
+        computedClasses
+    ]" @submit.prevent="submit">
+        <slot />
+    </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, reactive, computed, onMounted, watch, nextTick, ref } from 'vue';
+import type { PropType } from 'vue';
+
+const injectKey = "m-form";
+
+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,
+        },
+    },
+    emits: [
+        "submit"
+    ],
+    setup(props, { emit }) {
+        const inputs: Form[] = [];
+        
+        provide(injectKey, {
+            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: ref(props.disabled),
+            loading: ref(props.loading),
+        });
+
+        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(() => {
+            return [];
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                "m-form"
+            ];
+        });
+
+        return {
+            submit,
+            computedStyles,
+            computedClasses
+        };
+    }
+});
+</script>

package/src/components/image/Image.vue

@@ -0,0 +1,71 @@
+<template>
+    <img :class="computedClasses" :style="computedStyles" :src="source" :alt="alt" />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, computed } from 'vue';
+
+
+export default defineComponent({
+    name: "MImage",
+    props: {
+        src: {
+            type: String,
+            required: true,
+        },
+        scrSet: {
+            type: String,
+            default: "",
+        },
+        fit: {
+            type: String,
+            default: "cover",
+        },
+        alt: {
+            type: String,
+            default: "",
+        },
+    },
+    emits: {
+        error: (e: Event) => true
+    },
+    setup(props, { emit }) {
+        const source = ref<string | undefined>("");
+
+        if (typeof window !== 'undefined' && Image) {
+            watch(() => props.src, (src) => {
+                if(!src) {
+                    return;
+                }
+
+                const image = new Image();
+                image.onload = () => {
+                    source.value = props.src;
+                };
+                image.onerror = () => {
+                    emit('error', new Event('error'));
+                };
+                image.src = src;
+            }, 
+            { immediate: true })
+        }
+
+        const computedClasses = computed(() => {
+            return {
+                "m-image": true,
+            }
+        });
+
+        const computedStyles = computed(() => {
+            return {
+            }
+        });
+
+        return {
+            source,
+            computedClasses,
+            computedStyles,
+        }
+    }
+})
+</script>

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export { default as MButton } from './button/Button.vue';
+export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
+export { default as MForm } from './form/Form.vue';
+export { default as MInput } from './input/Input.vue';
+export { default as MSelect } from './select/Select.vue';
+export { default as MCheckbox } from './checkbox/Checkbox.vue';
+export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
+export { default as MBreadcrumbItem } from './breadcrumbitem/BreadcrumbItem.vue';
+// export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
+export { default as MAvatar } from './avatar/Avatar.vue';
+export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
+export { default as MImage } from './image/Image.vue';
+export { default as MSkeleton } from './skeleton/Skeleton.vue';
+export { default as MLink } from './link/Link.vue';
+export { default as MTooltip } from './tooltip/Tooltip.vue';
+export { default as MTabGroup } from './tab/TabGroup.vue';
+export { default as MTab } from './tab/Tab.vue';
+export { default as MTable } from './table/Table.vue';
+export { default as MTableBody } from './table/TableBody.vue';
+export { default as MTableCell } from './table/TableCell.vue';
+export { default as MTableHead } from './table/TableHead.vue';
+export { default as MTableHeadRow } from './table/TableHeadRow.vue';
+export { default as MTableRow } from './table/TableRow.vue';
+export { default as MDropdown } from './dropdown/Dropdown.vue';
+export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
+export { default as MDropdownList } from './dropdown/DropdownList.vue';
+export { default as MDropdownItem } from './dropdown/DropdownItem.vue';

package/src/components/input/Input.css

@@ -0,0 +1,173 @@
+.m-input__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.m-input {
+    --input-height: 40px;
+    --input-padding: 0 8px;
+    --input-font-size: 15px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+    --input-background-color: var(--white);
+    --input-border-color: var(--gray-200);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: var(--input-height);
+    font-size: var(--input-font-size);
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-border-color);
+    box-shadow: none;
+    border-radius: var(--input-border-radius);
+    outline: 0;
+    cursor: text;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-input.m-input--disabled {
+    --input-border-color: var(--gray-300);
+    --input-background-color: var(--gray-100);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.m-input.m-input--disabled input {
+    cursor: not-allowed;
+}
+
+.m-input:not(.m-input--disabled):focus-within {
+    --input-border-color: var(--blue);
+    box-shadow: 0 0 0 2px var(--blue-outline);
+}
+
+.m-input:not(.m-input--disabled):not(:focus-within):hover {
+    --input-border-color: var(--gray-400);
+}
+
+.m-input input {
+    flex: 1 0 0;
+    min-width: 0;
+    height: 100%;
+    padding: var(--input-padding);
+    font-size: inherit;
+    color: var(--gray-600);
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    border-radius: var(--input-border-radius);
+}
+
+.m-input__clearable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+}
+
+.m-input .m-input__clearable i.m-icon--close {
+    cursor: pointer;
+    width: var(--input-clear-size);
+    height: var(--input-clear-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    color: var(--gray-500);
+    background-color: transparent;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-input .m-input__clearable i.m-icon--close:hover {
+    color: var(--gray-500);
+    background-color: var(--gray-150);
+}
+
+.m-input i.m-icon--close::before {
+    --close-icon-size: 16px;
+    background-color: currentColor;
+    content: "";
+    width: var(--close-icon-size);
+    height: var(--close-icon-size);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    -webkit-mask-position: center center;
+    mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
+    mask-size: var(--close-icon-size) var(--close-icon-size);
+}
+
+.m-input--xs {
+    --input-height: 32px;
+    --input-padding: 0 8px;
+    --input-font-size: 13px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--sm {
+    --input-height: 36px;
+    --input-padding: 0 8px;
+    --input-font-size: 14px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--md {
+    --input-height: 40px;
+    --input-padding: 0 8px;
+    --input-font-size: 15px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--lg {
+    --input-height: 42px;
+    --input-padding: 0 8px;
+    --input-font-size: 16px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--xl {
+    --input-height: 46px;
+    --input-padding: 0 8px;
+    --input-font-size: 18px;
+    --input-border-radius: 6px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input__label {
+    margin-bottom: 5px;
+    color: var(--gray-600);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.m-input__help {
+    margin-top: 4px;
+    color: var(--gray-500);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-input__error {
+    margin: 4px 0 8px 0;
+    color: var(--red);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-form .m-form__input {
+    margin-bottom: 16px;
+}
+
+.m-form .m-form__input .m-input__error {
+    margin: 4px 0 0 0;
+}
+

package/src/components/input/Input.vue

@@ -0,0 +1,176 @@
+<template>
+    <div :class="wrapperComputedClasses" ref="container">
+        <label v-if="label" :for="id" class="m-input__label" :id="`${id}-label`">
+            {{ label }}
+        </label>
+        
+        <div :class="inputComputedClasses">
+            <div v-if="hasPrefix" class="m-input__prefix">
+                <slot name="prefix" />
+            </div>
+            <input 
+                ref="input"
+                :id="id"  
+                :type="inputType" 
+                :placeholder="placeholder"
+                :name="name" 
+                :value="modelValue || ''"
+                :readonly="readonly"
+                v-on="listeners"
+                v-bind="$attrs"
+                :disabled="disabled || loading"
+                :aria-disabled="disabled ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+            />
+            <div v-if="hasSuffix" class="m-input__suffix">
+                <slot name="suffix" />
+            </div>
+        </div>
+        <p v-if="help && !inputError" class="m-input__help">
+            {{ help }}
+        </p>
+        <p v-else-if="inputError" class="m-input__error">
+            {{ inputError }}
+        </p>
+    </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type { Size } from "@/types/props";
+import {
+    defineComponent,
+    ref,
+    computed,
+    toRef,
+} from "vue";
+import { useInput } from "@/composables/useInput";
+export default defineComponent({
+    name: 'MInput',
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        type: {
+            type: String,
+            default: 'text',
+            validator: (value: string) => ['text', 'password', 'number'].includes(value)
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        help: {
+            type: String,
+            default: ''
+        }
+    },
+    setup(props, { slots, emit }) {
+        const focus = () =>  {};
+        const {
+            id,
+            insideForm,
+            reset,
+            listeners,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, { focus, emit });
+
+        const input = ref<HTMLInputElement>();
+        const focused = ref(false);
+        const showPassword = ref(false);
+        const name = toRef(props, 'name');
+
+        const hasPrefix = computed(() => !!(slots.prefix));
+        const hasSuffix = computed(() => !!(slots.suffix));
+        const disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+
+        const inputType = computed(() => {
+            const type = props.type;
+            if (type === 'password') {
+                return showPassword.value ? 'text' : 'password';
+            }
+
+            return type;
+        });
+
+        const readonly = computed(() => (props.loading || props.readonly));
+        
+        const wrapperComputedClasses = computed(() => {
+            return [
+                'm-input__container',
+                {
+                    'm-form__input': insideForm
+                }
+            ]
+        });
+
+        const inputComputedClasses = computed(() => {
+            return [
+                'm-input',
+                `m-input--${props.size}`,
+                {
+                    'm-input--disabled': disabled.value || loading.value,
+                    'm-input--readonly': readonly.value,
+                    'm-input--focused': focused.value,
+                    'm-input--error': inputError.value,
+                    'm-input--prefix': hasPrefix.value,
+                    'm-input--suffix': hasSuffix.value,
+                    'm-input--loading': props.loading,
+                    'm-input--password': props.type === 'password'
+                }
+            ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        const onClear = () => {
+            emit('update:modelValue', '');
+        };
+
+        return {
+            id,
+            inputType,
+            disabled,
+            loading,
+            readonly,
+            inputComputedClasses,
+            wrapperComputedClasses,
+            name,
+            hasPrefix,
+            hasSuffix,
+            inputError,
+
+            onClear,
+            focus,
+            validate,
+            setError,
+            listeners
+        }
+    }
+})
+</script>