@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/form/Form.vue

@@ -1,141 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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

@@ -1,173 +0,0 @@
-.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

@@ -1,176 +0,0 @@
-<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>