@teammodlr/ui-kit 2.0.28 → 2.0.30

package/src/components/dropdown/DropdownItem.vue

@@ -1,134 +1,134 @@
-<template>
-    <component :is="computedType" :href="href" ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect" v-bind="$attrs">
-        <div v-if="hasIconLeft" :class="style.menuItemIcon">
-            <slot name="icon-left" />
-        </div>
-        <div :class="style.menuItemText">
-            <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="style.menuItemIcon">
-            <slot name="icon-right" />
-        </div>
-    </component>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, inject, type PropType, ref, toRef} from 'vue';
-import {useLabel} from './hooks';
-import * as style from "./style";
-
-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
-        },
-        description: {
-            type: String,
-            default: null
-        },
-        href: {
-            type: String,
-            default: null
-        },
-    },
-    emits: [],
-    setup(props, { slots }) {
-        const parentSelect = inject('dropdown-select', null);
-        // const state = inject(DROPDOWN_STATE, 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 [
-                style.menuItem
-            ]
-        });
-
-        const computedType = computed(() => {
-            if (props.href) {
-                return 'a';
-            }
-
-            return 'li';
-        });
-        
-        // onMounted(() => {
-        //     if (props.hotkey) {
-        //         const combination = keys[props.hotkey];
-
-        //         whenever(combination, (v) => {
-        //             if (v && isOpen.value) {
-        //                 handleSelect();
-        //             }
-        //         })
-        //     }
-        // })
-
-
-        return {
-            wrapper,
-            hasIconLeft,
-            hasIconRight,
-            handleSelect,
-            computedWrapperClasses,
-            style,
-            computedType
-        }
-    }
-})
-</script>
+<template>
+    <component :is="computedType" :href="href" ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect" v-bind="$attrs">
+        <div v-if="hasIconLeft" :class="style.menuItemIcon">
+            <slot name="icon-left" />
+        </div>
+        <div :class="style.menuItemText">
+            <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="style.menuItemIcon">
+            <slot name="icon-right" />
+        </div>
+    </component>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, inject, type PropType, ref, toRef} from 'vue';
+import {useLabel} from './hooks';
+import * as style from "./style";
+
+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
+        },
+        description: {
+            type: String,
+            default: null
+        },
+        href: {
+            type: String,
+            default: null
+        },
+    },
+    emits: [],
+    setup(props, { slots }) {
+        const parentSelect = inject('dropdown-select', null);
+        // const state = inject(DROPDOWN_STATE, 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 [
+                style.menuItem
+            ]
+        });
+
+        const computedType = computed(() => {
+            if (props.href) {
+                return 'a';
+            }
+
+            return 'li';
+        });
+        
+        // onMounted(() => {
+        //     if (props.hotkey) {
+        //         const combination = keys[props.hotkey];
+
+        //         whenever(combination, (v) => {
+        //             if (v && isOpen.value) {
+        //                 handleSelect();
+        //             }
+        //         })
+        //     }
+        // })
+
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            handleSelect,
+            computedWrapperClasses,
+            style,
+            computedType
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownList.vue

@@ -1,20 +1,20 @@
-<template>
-    <ul :class="style.menuItems">
-        <slot />
-    </ul>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "DropdownList",
-    setup() {
-
-        return {
-            style
-        }
-    }
-})
-</script>
+<template>
+    <ul :class="style.menuItems">
+        <slot />
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "DropdownList",
+    setup() {
+
+        return {
+            style
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownSeperator.vue

@@ -1,23 +1,23 @@
-<template>
-    <li :class="computedClasses"></li>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from "vue";
-import * as style from "./style";
-
-export default defineComponent({
-    name: "DropdownSeperator",
-    setup() {
-        const computedClasses = computed(() => {
-            return [
-                style.menuSeperator
-            ]
-        });
-
-        return {
-            computedClasses
-        }
-    }
-})
+<template>
+    <li :class="computedClasses"></li>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from "vue";
+import * as style from "./style";
+
+export default defineComponent({
+    name: "DropdownSeperator",
+    setup() {
+        const computedClasses = computed(() => {
+            return [
+                style.menuSeperator
+            ]
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
 </script>

package/src/components/dropdown/DropdownWrapper.vue

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

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

@@ -1,73 +1,73 @@
-<template>
-    <MDropdown>
-        <MButton>
-            Menu
-        </MButton>
-
-        <template #menu>
-            <MDropdownList>
-                <MDropdownItem hotkey="Ctrl+L"  @click="handleClick">
-                    Item One
-                </MDropdownItem>
-                <MDropdownItem  href="https://google.com" target="_blank">
-                    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>
+<template>
+    <MDropdown>
+        <MButton>
+            Menu
+        </MButton>
+
+        <template #menu>
+            <MDropdownList>
+                <MDropdownItem hotkey="Ctrl+L"  @click="handleClick">
+                    Item One
+                </MDropdownItem>
+                <MDropdownItem  href="https://google.com" target="_blank">
+                    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>