@teammodlr/ui-kit 2.3.0 → 2.3.2
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/cardcontextmenu/CardContextMenu.vue.d.ts +129 -0
- package/lib/components/cardcontextmenu/CardContextMenuItem.vue.d.ts +88 -0
- package/lib/components/cardcontextmenu/CardContextMenuList.vue.d.ts +5 -0
- package/lib/components/cardcontextmenu/CardContextMenuSeperator.vue.d.ts +4 -0
- package/lib/components/cardcontextmenu/CardContextMenuWrapper.vue.d.ts +2 -0
- package/lib/components/cardcontextmenu/hooks.d.ts +2 -0
- package/lib/components/cardcontextmenu/style/Dropdown.css.d.ts +9 -0
- package/lib/components/cardcontextmenu/style/index.d.ts +1 -0
- package/lib/components/cardcontextmenu/symbol.d.ts +6 -0
- 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 +5 -1
- package/lib/index.cjs.js +8 -8
- package/lib/index.es.js +4264 -3862
- package/lib/style.css +1 -1
- package/package.json +1 -1
- package/src/components/cardcontextmenu/CardContextMenu.vue +276 -0
- package/src/components/cardcontextmenu/CardContextMenuItem.vue +151 -0
- package/src/components/cardcontextmenu/CardContextMenuList.vue +20 -0
- package/src/components/cardcontextmenu/CardContextMenuSeperator.vue +23 -0
- package/src/components/cardcontextmenu/CardContextMenuWrapper.vue +18 -0
- package/src/components/cardcontextmenu/examples/basic.vue +71 -0
- package/src/components/cardcontextmenu/examples/index.stories.ts +22 -0
- package/src/components/cardcontextmenu/examples/index.ts +1 -0
- package/src/components/cardcontextmenu/hooks.ts +30 -0
- package/src/components/cardcontextmenu/style/Dropdown.css.ts +158 -0
- package/src/components/cardcontextmenu/style/index.ts +1 -0
- package/src/components/cardcontextmenu/symbol.ts +9 -0
- package/src/components/dropdown/Dropdown.vue +6 -2
- package/src/components/dropdown/DropdownSeperator.vue +26 -0
- package/src/components/dropdown/examples/basic.vue +120 -0
- package/src/components/dropdown/examples/context.vue +3 -1
- package/src/components/index.ts +8 -1
|
@@ -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>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
<MDropdown
|
|
5
|
+
<MDropdown v-model:open="isOpen" :style="{ top: `199px`, left: `9px` }">
|
|
6
6
|
<div style="background: #eee; width: 500px; height: 500px;">
|
|
7
7
|
</div>
|
|
8
8
|
<template #menu>
|
|
@@ -46,6 +46,8 @@
|
|
|
46
46
|
</template>
|
|
47
47
|
|
|
48
48
|
<script lang="ts" setup>
|
|
49
|
+
import { ref } from 'vue';
|
|
50
|
+
const isOpen = ref(true);
|
|
49
51
|
const handleClick = () => {
|
|
50
52
|
alert('hi');
|
|
51
53
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -16,7 +16,14 @@ 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';
|
|
22
|
+
|
|
23
|
+
export { default as MCardContextMenu } from './cardcontextmenu/CardContextMenu.vue';
|
|
24
|
+
export { default as MCardContextMenuItem } from './cardcontextmenu/CardContextMenuItem.vue';
|
|
25
|
+
export { default as MCardContextMenuList } from './cardcontextmenu/CardContextMenuList.vue';
|
|
26
|
+
export { default as MCardContextMenuSeperator } from './cardcontextmenu/CardContextMenuSeperator.vue';
|
|
20
27
|
export { default as MForm } from './form/Form.vue';
|
|
21
28
|
export { default as MImage } from './image/Image.vue';
|
|
22
29
|
export { default as MInput } from './input/Input.vue';
|