@teammodlr/ui-kit 1.0.4 → 1.0.6

package/src/components/dropdown/DropdownItem.vue

@@ -0,0 +1,118 @@
+<template>
+    <li ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect">
+        <div v-if="hasIconLeft" class="m-dropdown__icon-left">
+            <slot name="icon-left" />
+        </div>
+        <div class="m-dropdown__text">
+            <slot />
+        </div>
+        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
+            <template v-for="key in hotkey.split('+')">
+                <kbd>{{ key }}</kbd>
+            </template>
+        </div> -->
+        <div v-if="hasIconRight" class="m-dropdown__icon-right">
+            <slot name="icon-right" />
+        </div>
+    </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, ref, type PropType, computed, toRef, onMounted } from 'vue';
+import { useMagicKeys, whenever } from '@vueuse/core';
+import { useLabel } from './hooks';
+
+export default defineComponent({
+    name: "DropdownItem",
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        reference: {
+            type: Boolean,
+            default: false
+        },
+        onSelect: {
+            type: Function as PropType<(label: string | number) => void>,
+            default: () => { }
+        },
+        hotkey: {
+            type: String,
+            default: null
+        }
+    },
+    emits: [],
+    setup(props, { slots }) {
+        const parentSelect = inject('dropdown-select', null);
+        const state = inject("dropdown", null);
+        // const keys = useMagicKeys({
+        //     passive: false,
+        //     onEventFired: (event) => {
+
+        //         // only fire when the dropdown is open
+        //         if (state?.isOpen.value) {
+        //             event.preventDefault();
+        //         }
+        //     }
+        // });
+
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const wrapper = ref(null);
+        const label = toRef(props, 'label')
+        const isReference = ref(props.reference)
+        const currentLabel = useLabel(label, wrapper)
+        function handleSelect() {
+            if (props.disabled || isReference.value) {
+                return;
+            }
+
+            if (typeof parentSelect === 'function') {
+                // @ts-ignore
+                parentSelect([currentLabel.value!]);
+            }
+
+            props.onSelect(currentLabel.value!);
+        }
+
+        // const isOpen = computed(() => {
+        //     return state?.isOpen.value;
+        // });
+
+        const computedWrapperClasses = computed(() => {
+            return {
+                'm-dropdown-item': true,
+                'm-dropdown-item--disabled': props.disabled,
+                'm-dropdown-item--reference': props.reference
+            }
+        });
+        
+        // onMounted(() => {
+        //     if (props.hotkey) {
+        //         const combination = keys[props.hotkey];
+
+        //         whenever(combination, (v) => {
+        //             if (v && isOpen.value) {
+        //                 handleSelect();
+        //             }
+        //         })
+        //     }
+        // })
+
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            handleSelect,
+            computedWrapperClasses
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownList.vue

@@ -0,0 +1,20 @@
+<template>
+    <ul>
+        <slot />
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: "DropdownList",
+    setup() {
+
+        // computed classes
+        return {
+
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+    <slot />
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, provide } from 'vue';
+
+export default defineComponent({
+    name: 'DropdownWrapper',
+    setup() {
+        const state = inject("dropdown", null);
+
+        // @ts-ignore
+        provide('dropdown-select', state?.handleSelect);
+    }
+})
+</script>

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

@@ -0,0 +1,73 @@
+<template>
+    <MDropdown>
+        <MButton>
+            Menu
+        </MButton>
+
+        <template #menu>
+            <MDropdownList>
+                <MDropdownItem hotkey="Ctrl+L"  @click="handleClick">
+                    Item One
+                </MDropdownItem>
+                <MDropdownItem>
+                    Item Two
+                </MDropdownItem>
+
+                <MDropdown>
+                    <MDropdownItem>
+                        <template #icon-right>
+                            <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                <path fill-rule="evenodd"
+                                    d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                    clip-rule="evenodd" />
+                            </svg>
+
+                        </template>
+                        Item Three (Parent)
+                    </MDropdownItem>
+
+                    <template #menu>
+                        <MDropdownList>
+                            <MDropdownItem @click="handleClick">
+                                Child One
+                            </MDropdownItem>
+                            <MDropdown>
+                                <MDropdownItem>
+                                    <template #icon-right>
+                                        <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                            <path fill-rule="evenodd"
+                                                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+
+                                    </template>
+                                    Item Three (Parent)
+                                </MDropdownItem>
+
+                                <template #menu>
+                                    <MDropdownList>
+                                        <MDropdownItem @click="handleClick">
+                                            Child One
+                                        </MDropdownItem>
+                                        <MDropdownItem>
+                                            Child Two
+                                        </MDropdownItem>
+                                    </MDropdownList>
+                                </template>
+                            </MDropdown>
+                        </MDropdownList>
+                    </template>
+                </MDropdown>
+            </MDropdownList>
+        </template>
+    </MDropdown>
+</template>
+
+<script lang="ts" setup>
+
+const handleClick = () => {
+    alert('hi');
+}
+</script>

package/src/components/dropdown/examples/context.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <div style="background: #eee; width: 500px; height: 500px;" @contextmenu="handleContextMenu">
+
+        </div>
+
+        <MDropdown :virtual="position" :open="showing">
+            <template #menu>
+                <MDropdownList>
+                    <MDropdownItem>
+                        Item One
+                    </MDropdownItem>
+                    <MDropdownItem>
+                        Item Two
+                    </MDropdownItem>
+
+                    <MDropdown>
+                        <MDropdownItem>
+                            <template #icon-right>
+                                <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                    <path fill-rule="evenodd"
+                                        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                        clip-rule="evenodd" />
+                                </svg>
+
+                            </template>
+                            Item Three (Parent)
+                        </MDropdownItem>
+
+                        <template #menu>
+                            <MDropdownList>
+                                <MDropdownItem @click="handleClick">
+                                    Child One
+                                </MDropdownItem>
+                                <MDropdownItem>
+                                    Child Two
+                                </MDropdownItem>
+                            </MDropdownList>
+                        </template>
+                    </MDropdown>
+                </MDropdownList>
+            </template>
+        </MDropdown>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref, reactive } from 'vue';
+
+const showing = ref(false);
+const position = reactive({
+    x: 0,
+    y: 0
+})
+
+const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    showing.value = false;
+    nextTick().then(() => {
+        showing.value = true;
+
+        position.x = e.clientX;
+        position.y = e.clientY;
+    })
+}
+
+const handleClick = () => {
+    alert('hi');
+}
+</script>

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

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

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

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

package/src/components/dropdown/hooks.ts

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

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/form/examples/basic.vue

@@ -0,0 +1,73 @@
+<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>
+
+
+        <MButton type="submit" color="blue">Submit</MButton>
+    </MForm>
+</template>
+
+<script lang="ts" setup>
+import { MCheckbox, MSelect } 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

@@ -0,0 +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 {
+    MFormBasic
+} from './index';
+import { createStory } from '@/__storybook__';
+
+export default {
+    component: MForm,
+    subcomponents: {
+        MInput,
+        MButton,
+        MSelect,
+        MCheckbox
+    },
+    title: 'Components/Form'
+}
+
+export const Basic = createStory(MFormBasic);

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

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

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/image/examples/basic.vue

@@ -0,0 +1,5 @@
+<template>
+    <MImage 
+        src="https://images.unsplash.com/photo-1672745256937-4e60a4534413?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=976&q=80"
+        />
+</template>

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

@@ -0,0 +1,12 @@
+import { createStory } from "@/__storybook__";
+import MImage from "../Image.vue";
+import {
+    MImageBasic,
+} from "./index";
+
+export default {
+    component: MImage,
+    title: 'Components/Image',
+}
+
+export const Basic = createStory(MImageBasic);