@teammodlr/ui-kit 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/dropdown/Dropdown.vue.d.ts +9 -0
- package/lib/components/dropdown/DropdownSeperator.vue.d.ts +4 -0
- package/lib/components/index.d.ts +1 -1
- package/lib/index.cjs.js +7 -7
- package/lib/index.es.js +1632 -1612
- package/package.json +1 -1
- package/src/components/dropdown/Dropdown.vue +5 -1
- package/src/components/dropdown/DropdownSeperator.vue +26 -0
- package/src/components/dropdown/examples/basic.vue +120 -0
- package/src/components/index.ts +3 -1
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</ContextMenuContent>
|
|
10
10
|
</ContextMenuPortal>
|
|
11
11
|
</ContextMenuRoot>
|
|
12
|
-
<DropdownMenuRoot v-model:open="isOpen" v-else>
|
|
12
|
+
<DropdownMenuRoot v-model:open="isOpen" v-else :modal="modal">
|
|
13
13
|
<DropdownMenuTrigger as-child>
|
|
14
14
|
<slot />
|
|
15
15
|
</DropdownMenuTrigger>
|
|
@@ -105,6 +105,10 @@ export default defineComponent({
|
|
|
105
105
|
type: Boolean,
|
|
106
106
|
default: false
|
|
107
107
|
},
|
|
108
|
+
modal: {
|
|
109
|
+
type: Boolean,
|
|
110
|
+
default: false
|
|
111
|
+
},
|
|
108
112
|
placement: {
|
|
109
113
|
type: String as PropType<"start" | "center" | "end">,
|
|
110
114
|
default: 'start'
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<DropdownMenuSeparator :class="computedClasses" />
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script lang="ts">
|
|
6
|
+
import {computed, defineComponent} from "vue";
|
|
7
|
+
import * as style from "./style";
|
|
8
|
+
import { DropdownMenuSeparator } from 'radix-vue';
|
|
9
|
+
export default defineComponent({
|
|
10
|
+
name: "DropdownSeperator",
|
|
11
|
+
components: {
|
|
12
|
+
DropdownMenuSeparator
|
|
13
|
+
},
|
|
14
|
+
setup() {
|
|
15
|
+
const computedClasses = computed(() => {
|
|
16
|
+
return [
|
|
17
|
+
style.menuSeperator
|
|
18
|
+
]
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
return {
|
|
22
|
+
computedClasses
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
</script>
|
|
@@ -1,4 +1,123 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<MDropdown>
|
|
4
|
+
<MButton> Menu </MButton>
|
|
5
|
+
|
|
6
|
+
<template #menu>
|
|
7
|
+
<MDropdownList>
|
|
8
|
+
<MDropdownHeading> Hello </MDropdownHeading>
|
|
9
|
+
<MDropdownItem hotkey="Ctrl+L" @click="handleClick">
|
|
10
|
+
Item One
|
|
11
|
+
</MDropdownItem>
|
|
12
|
+
<MDropdownSeperator />
|
|
13
|
+
<MDropdownItem
|
|
14
|
+
variant="error"
|
|
15
|
+
href="https://google.com"
|
|
16
|
+
target="_blank">
|
|
17
|
+
Item Two
|
|
18
|
+
</MDropdownItem>
|
|
19
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
20
|
+
Item Two
|
|
21
|
+
<template #keyboard>
|
|
22
|
+
<div
|
|
23
|
+
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
24
|
+
>
|
|
25
|
+
⌘+S
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
</MDropdownItem>
|
|
29
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
30
|
+
Item Two
|
|
31
|
+
</MDropdownItem>
|
|
32
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
33
|
+
Item Two
|
|
34
|
+
</MDropdownItem>
|
|
35
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
36
|
+
Item Two
|
|
37
|
+
</MDropdownItem>
|
|
38
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
39
|
+
Item Two
|
|
40
|
+
</MDropdownItem>
|
|
41
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
42
|
+
Item Two
|
|
43
|
+
</MDropdownItem>
|
|
44
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
45
|
+
Item Two
|
|
46
|
+
</MDropdownItem>
|
|
47
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
48
|
+
Item Two
|
|
49
|
+
</MDropdownItem>
|
|
50
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
51
|
+
Item Two
|
|
52
|
+
</MDropdownItem>
|
|
53
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
54
|
+
Item Two
|
|
55
|
+
</MDropdownItem>
|
|
56
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
57
|
+
Item Two
|
|
58
|
+
</MDropdownItem>
|
|
59
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
60
|
+
Item Two
|
|
61
|
+
</MDropdownItem>
|
|
62
|
+
|
|
63
|
+
<MDropdown>
|
|
64
|
+
<MDropdownItem>
|
|
65
|
+
<template #icon-right>
|
|
66
|
+
<svg
|
|
67
|
+
style="width: 16px; height: 16px"
|
|
68
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
69
|
+
viewBox="0 0 20 20"
|
|
70
|
+
fill="currentColor"
|
|
71
|
+
class="w-5 h-5">
|
|
72
|
+
<path
|
|
73
|
+
fill-rule="evenodd"
|
|
74
|
+
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"
|
|
75
|
+
clip-rule="evenodd" />
|
|
76
|
+
</svg>
|
|
77
|
+
</template>
|
|
78
|
+
Item Three (Parent)
|
|
79
|
+
</MDropdownItem>
|
|
80
|
+
|
|
81
|
+
<template #menu>
|
|
82
|
+
<MDropdownList>
|
|
83
|
+
<MDropdownItem @click="handleClick">
|
|
84
|
+
Child One
|
|
85
|
+
</MDropdownItem>
|
|
86
|
+
<MDropdown>
|
|
87
|
+
<MDropdownItem>
|
|
88
|
+
<template #icon-right>
|
|
89
|
+
<svg
|
|
90
|
+
style="width: 16px; height: 16px"
|
|
91
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
92
|
+
viewBox="0 0 20 20"
|
|
93
|
+
fill="currentColor"
|
|
94
|
+
class="w-5 h-5">
|
|
95
|
+
<path
|
|
96
|
+
fill-rule="evenodd"
|
|
97
|
+
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"
|
|
98
|
+
clip-rule="evenodd" />
|
|
99
|
+
</svg>
|
|
100
|
+
</template>
|
|
101
|
+
Item Three (Parent)
|
|
102
|
+
</MDropdownItem>
|
|
103
|
+
|
|
104
|
+
<template #menu>
|
|
105
|
+
<MDropdownList>
|
|
106
|
+
<MDropdownItem @click="handleClick">
|
|
107
|
+
Child One
|
|
108
|
+
</MDropdownItem>
|
|
109
|
+
<MDropdownItem>
|
|
110
|
+
Child Two
|
|
111
|
+
</MDropdownItem>
|
|
112
|
+
</MDropdownList>
|
|
113
|
+
</template>
|
|
114
|
+
</MDropdown>
|
|
115
|
+
</MDropdownList>
|
|
116
|
+
</template>
|
|
117
|
+
</MDropdown>
|
|
118
|
+
</MDropdownList>
|
|
119
|
+
</template>
|
|
120
|
+
</MDropdown>
|
|
2
121
|
<MDropdown>
|
|
3
122
|
<MButton> Menu </MButton>
|
|
4
123
|
|
|
@@ -117,6 +236,7 @@
|
|
|
117
236
|
</MDropdownList>
|
|
118
237
|
</template>
|
|
119
238
|
</MDropdown>
|
|
239
|
+
</div>
|
|
120
240
|
</template>
|
|
121
241
|
|
|
122
242
|
<script lang="ts" setup>
|
package/src/components/index.ts
CHANGED
|
@@ -16,7 +16,9 @@ export { default as MDropdown } from './dropdown/Dropdown.vue';
|
|
|
16
16
|
export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
|
|
17
17
|
export { default as MDropdownList } from './dropdown/DropdownList.vue';
|
|
18
18
|
export { default as MDropdownHeading } from './dropdown/DropdownHeading.vue';
|
|
19
|
-
export {
|
|
19
|
+
export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
|
|
20
|
+
|
|
21
|
+
// export { DropdownMenuSub as MDropdownMenuSub, DropdownMenuSubTrigger as MDropdownMenuSubTrigger, DropdownMenuSubContent as MDropdownMenuSubContent } from 'radix-vue';
|
|
20
22
|
export { default as MForm } from './form/Form.vue';
|
|
21
23
|
export { default as MImage } from './image/Image.vue';
|
|
22
24
|
export { default as MInput } from './input/Input.vue';
|