@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/dropdown/DropdownItem.vue

@@ -1,151 +1,151 @@
-<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.menuItemTextContainer">
-            <span :class="style.menuItemText"><slot /></span>
-        </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';
-import type { Variant } from '../../types/props';
-
-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
-        },
-        variant: {
-            type: String as PropType<Variant>,
-            default: 'default'
-        }
-    },
-    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, style.variant[props.variant]];
-        });
-
-        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.menuItemTextContainer">
+            <span :class="style.menuItemText"><slot /></span>
+        </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';
+import type { Variant } from '../../types/props';
+
+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
+        },
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        }
+    },
+    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, style.variant[props.variant]];
+        });
+
+        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,119 +1,119 @@
-<template>
-    <MDropdown>
-        <MButton> Menu </MButton>
-
-        <template #menu>
-            <MDropdownList>
-                <MDropdownHeading> Hello </MDropdownHeading>
-                <MDropdownItem hotkey="Ctrl+L" @click="handleClick">
-                    Item One
-                </MDropdownItem>
-                <MDropdownSeperator />
-                <MDropdownItem
-                    variant="error"
-                    href="https://google.com"
-                    target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </MDropdownItem>
-                <MDropdownItem href="https://google.com" target="_blank">
-                    Item Two
-                </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>
+                <MDropdownHeading> Hello </MDropdownHeading>
+                <MDropdownItem hotkey="Ctrl+L" @click="handleClick">
+                    Item One
+                </MDropdownItem>
+                <MDropdownSeperator />
+                <MDropdownItem
+                    variant="error"
+                    href="https://google.com"
+                    target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </MDropdownItem>
+                <MDropdownItem href="https://google.com" target="_blank">
+                    Item Two
+                </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>