@teammodlr/ui-kit 2.2.2 → 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/dialog/Dialog.vue.d.ts +1 -1
- package/lib/components/dropdown/Dropdown.vue.d.ts +25 -27
- package/lib/components/dropdown/DropdownItem.vue.d.ts +1 -2
- package/lib/components/index.d.ts +1 -2
- package/lib/components/messageprovider/Message.vue.d.ts +1 -1
- package/lib/components/modal/Modal.vue.d.ts +1 -1
- package/lib/components/primative/primitive.d.ts +1 -1
- package/lib/index.cjs.js +10 -8
- package/lib/index.es.js +8363 -4234
- package/lib/style.css +1 -1
- package/package.json +2 -1
- package/src/components/dropdown/Dropdown.vue +207 -331
- package/src/components/dropdown/DropdownHeading.vue +23 -23
- package/src/components/dropdown/DropdownItem.vue +116 -151
- package/src/components/dropdown/DropdownSeperator.vue +26 -23
- package/src/components/dropdown/examples/basic.vue +246 -119
- package/src/components/dropdown/examples/context.vue +52 -71
- package/src/components/dropdown/style/Dropdown.css.ts +159 -158
- package/src/components/index.ts +3 -2
- package/src/components/tooltip/Tooltip.vue +1 -1
- package/lib/components/dropdown/DropdownTrigger.vue.d.ts +0 -11
- package/lib/components/dropdown/DropdownWrapper.vue.d.ts +0 -2
- package/src/components/dropdown/DropdownTrigger.vue +0 -20
- package/src/components/dropdown/DropdownWrapper.vue +0 -18
|
@@ -1,119 +1,246 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
</template>
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</
|
|
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>
|
|
121
|
+
<MDropdown>
|
|
122
|
+
<MButton> Menu </MButton>
|
|
123
|
+
|
|
124
|
+
<template #menu>
|
|
125
|
+
<MDropdownList>
|
|
126
|
+
<MDropdownHeading> Hello </MDropdownHeading>
|
|
127
|
+
<MDropdownItem hotkey="Ctrl+L" @click="handleClick">
|
|
128
|
+
Item One
|
|
129
|
+
</MDropdownItem>
|
|
130
|
+
<MDropdownSeperator />
|
|
131
|
+
<MDropdownItem
|
|
132
|
+
variant="error"
|
|
133
|
+
href="https://google.com"
|
|
134
|
+
target="_blank">
|
|
135
|
+
Item Two
|
|
136
|
+
</MDropdownItem>
|
|
137
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
138
|
+
Item Two
|
|
139
|
+
<template #keyboard>
|
|
140
|
+
<div
|
|
141
|
+
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
142
|
+
>
|
|
143
|
+
⌘+S
|
|
144
|
+
</div>
|
|
145
|
+
</template>
|
|
146
|
+
</MDropdownItem>
|
|
147
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
148
|
+
Item Two
|
|
149
|
+
</MDropdownItem>
|
|
150
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
151
|
+
Item Two
|
|
152
|
+
</MDropdownItem>
|
|
153
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
154
|
+
Item Two
|
|
155
|
+
</MDropdownItem>
|
|
156
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
157
|
+
Item Two
|
|
158
|
+
</MDropdownItem>
|
|
159
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
160
|
+
Item Two
|
|
161
|
+
</MDropdownItem>
|
|
162
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
163
|
+
Item Two
|
|
164
|
+
</MDropdownItem>
|
|
165
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
166
|
+
Item Two
|
|
167
|
+
</MDropdownItem>
|
|
168
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
169
|
+
Item Two
|
|
170
|
+
</MDropdownItem>
|
|
171
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
172
|
+
Item Two
|
|
173
|
+
</MDropdownItem>
|
|
174
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
175
|
+
Item Two
|
|
176
|
+
</MDropdownItem>
|
|
177
|
+
<MDropdownItem href="https://google.com" target="_blank">
|
|
178
|
+
Item Two
|
|
179
|
+
</MDropdownItem>
|
|
180
|
+
|
|
181
|
+
<MDropdown>
|
|
182
|
+
<MDropdownItem>
|
|
183
|
+
<template #icon-right>
|
|
184
|
+
<svg
|
|
185
|
+
style="width: 16px; height: 16px"
|
|
186
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
187
|
+
viewBox="0 0 20 20"
|
|
188
|
+
fill="currentColor"
|
|
189
|
+
class="w-5 h-5">
|
|
190
|
+
<path
|
|
191
|
+
fill-rule="evenodd"
|
|
192
|
+
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"
|
|
193
|
+
clip-rule="evenodd" />
|
|
194
|
+
</svg>
|
|
195
|
+
</template>
|
|
196
|
+
Item Three (Parent)
|
|
197
|
+
</MDropdownItem>
|
|
198
|
+
|
|
199
|
+
<template #menu>
|
|
200
|
+
<MDropdownList>
|
|
201
|
+
<MDropdownItem @click="handleClick">
|
|
202
|
+
Child One
|
|
203
|
+
</MDropdownItem>
|
|
204
|
+
<MDropdown>
|
|
205
|
+
<MDropdownItem>
|
|
206
|
+
<template #icon-right>
|
|
207
|
+
<svg
|
|
208
|
+
style="width: 16px; height: 16px"
|
|
209
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
210
|
+
viewBox="0 0 20 20"
|
|
211
|
+
fill="currentColor"
|
|
212
|
+
class="w-5 h-5">
|
|
213
|
+
<path
|
|
214
|
+
fill-rule="evenodd"
|
|
215
|
+
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"
|
|
216
|
+
clip-rule="evenodd" />
|
|
217
|
+
</svg>
|
|
218
|
+
</template>
|
|
219
|
+
Item Three (Parent)
|
|
220
|
+
</MDropdownItem>
|
|
221
|
+
|
|
222
|
+
<template #menu>
|
|
223
|
+
<MDropdownList>
|
|
224
|
+
<MDropdownItem @click="handleClick">
|
|
225
|
+
Child One
|
|
226
|
+
</MDropdownItem>
|
|
227
|
+
<MDropdownItem>
|
|
228
|
+
Child Two
|
|
229
|
+
</MDropdownItem>
|
|
230
|
+
</MDropdownList>
|
|
231
|
+
</template>
|
|
232
|
+
</MDropdown>
|
|
233
|
+
</MDropdownList>
|
|
234
|
+
</template>
|
|
235
|
+
</MDropdown>
|
|
236
|
+
</MDropdownList>
|
|
237
|
+
</template>
|
|
238
|
+
</MDropdown>
|
|
239
|
+
</div>
|
|
240
|
+
</template>
|
|
241
|
+
|
|
242
|
+
<script lang="ts" setup>
|
|
243
|
+
const handleClick = () => {
|
|
244
|
+
alert('hi');
|
|
245
|
+
};
|
|
246
|
+
</script>
|
|
@@ -1,71 +1,52 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<template #menu>
|
|
9
|
-
<MDropdownList>
|
|
10
|
-
<MDropdownItem>
|
|
11
|
-
Item One
|
|
12
|
-
</MDropdownItem>
|
|
13
|
-
<MDropdownItem>
|
|
14
|
-
Item Two
|
|
15
|
-
</MDropdownItem>
|
|
16
|
-
|
|
17
|
-
<MDropdown>
|
|
18
|
-
<MDropdownItem>
|
|
19
|
-
<template #icon-right>
|
|
20
|
-
<svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
|
|
21
|
-
viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
|
|
22
|
-
<path fill-rule="evenodd"
|
|
23
|
-
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"
|
|
24
|
-
clip-rule="evenodd" />
|
|
25
|
-
</svg>
|
|
26
|
-
|
|
27
|
-
</template>
|
|
28
|
-
Item Three (Parent)
|
|
29
|
-
</MDropdownItem>
|
|
30
|
-
|
|
31
|
-
<template #menu>
|
|
32
|
-
<MDropdownList>
|
|
33
|
-
<MDropdownItem @click="handleClick">
|
|
34
|
-
Child One
|
|
35
|
-
</MDropdownItem>
|
|
36
|
-
<MDropdownItem>
|
|
37
|
-
Child Two
|
|
38
|
-
</MDropdownItem>
|
|
39
|
-
</MDropdownList>
|
|
40
|
-
</template>
|
|
41
|
-
</MDropdown>
|
|
42
|
-
</MDropdownList>
|
|
43
|
-
</template>
|
|
44
|
-
</MDropdown>
|
|
45
|
-
</div>
|
|
46
|
-
</template>
|
|
47
|
-
|
|
48
|
-
<script lang="ts" setup>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
x: 0,
|
|
54
|
-
y: 0
|
|
55
|
-
})
|
|
56
|
-
|
|
57
|
-
const handleContextMenu = (e: MouseEvent) => {
|
|
58
|
-
e.preventDefault();
|
|
59
|
-
showing.value = false;
|
|
60
|
-
nextTick().then(() => {
|
|
61
|
-
showing.value = true;
|
|
62
|
-
|
|
63
|
-
position.x = e.clientX;
|
|
64
|
-
position.y = e.clientY;
|
|
65
|
-
})
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const handleClick = () => {
|
|
69
|
-
alert('hi');
|
|
70
|
-
}
|
|
71
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<MDropdown contextMenu>
|
|
6
|
+
<div style="background: #eee; width: 500px; height: 500px;">
|
|
7
|
+
</div>
|
|
8
|
+
<template #menu>
|
|
9
|
+
<MDropdownList>
|
|
10
|
+
<MDropdownItem>
|
|
11
|
+
Item One
|
|
12
|
+
</MDropdownItem>
|
|
13
|
+
<MDropdownItem>
|
|
14
|
+
Item Two
|
|
15
|
+
</MDropdownItem>
|
|
16
|
+
|
|
17
|
+
<MDropdown>
|
|
18
|
+
<MDropdownItem>
|
|
19
|
+
<template #icon-right>
|
|
20
|
+
<svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
|
|
21
|
+
viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
|
|
22
|
+
<path fill-rule="evenodd"
|
|
23
|
+
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"
|
|
24
|
+
clip-rule="evenodd" />
|
|
25
|
+
</svg>
|
|
26
|
+
|
|
27
|
+
</template>
|
|
28
|
+
Item Three (Parent)
|
|
29
|
+
</MDropdownItem>
|
|
30
|
+
|
|
31
|
+
<template #menu>
|
|
32
|
+
<MDropdownList>
|
|
33
|
+
<MDropdownItem @click="handleClick">
|
|
34
|
+
Child One
|
|
35
|
+
</MDropdownItem>
|
|
36
|
+
<MDropdownItem>
|
|
37
|
+
Child Two
|
|
38
|
+
</MDropdownItem>
|
|
39
|
+
</MDropdownList>
|
|
40
|
+
</template>
|
|
41
|
+
</MDropdown>
|
|
42
|
+
</MDropdownList>
|
|
43
|
+
</template>
|
|
44
|
+
</MDropdown>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
47
|
+
|
|
48
|
+
<script lang="ts" setup>
|
|
49
|
+
const handleClick = () => {
|
|
50
|
+
alert('hi');
|
|
51
|
+
}
|
|
52
|
+
</script>
|