@teammodlr/ui-kit 2.2.2 → 2.3.1

package/src/components/dropdown/DropdownItem.vue

@@ -1,151 +1,116 @@
-<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>
+    <DropdownMenuItem :class="computedWrapperClasses" :as="computedType" :href="href">
+        <div :class="style.menuItemIcon">
+            <slot name="icon-left" />
+        </div>
+        <div :class="style.menuItemTextContainer">
+            <span :class="style.menuItemText"><slot /></span>
+        </div>
+        <slot name="keyboard" />
+    </DropdownMenuItem>
+    <!-- <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,
+    type PropType,
+    ref
+} from 'vue';
+import { DropdownMenuItem } from "radix-vue";
+import * as style from './style';
+import type { Variant } from '../../types/props';
+
+export default defineComponent({
+    name: 'DropdownItem',
+    components: {
+        DropdownMenuItem
+    },
+    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 hasIconLeft = computed(() => !!slots['icon-left']);
+        const hasIconRight = computed(() => !!slots['icon-right']);
+
+        const wrapper = ref(null);
+        const computedWrapperClasses = computed(() => {
+            return [style.menuItem, style.variant[props.variant]];
+        });
+
+        const computedType = computed(() => {
+            if (props.href) {
+                return 'a';
+            }
+
+            return 'div';
+        });
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            computedWrapperClasses,
+            style,
+            computedType
+        };
+    }
+});
+</script>

package/src/components/dropdown/DropdownSeperator.vue

@@ -1,23 +1,26 @@
-<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>
+<template>
+    <DropdownMenuSeparator :class="computedClasses" />
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from "vue";
+import * as style from "./style";
+import { DropdownMenuSeparator  } from 'radix-vue';
+export default defineComponent({
+    name: "DropdownSeperator",
+    components: {
+        DropdownMenuSeparator
+    },
+    setup() {
+        const computedClasses = computed(() => {
+            return [
+                style.menuSeperator
+            ]
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
+</script>