@quandis/qbo4.ui 4.0.1-CI-20241113-192850 → 4.0.1-CI-20241113-205011
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/package.json +1 -1
- package/scss/qbo.scss +55 -154
- package/src/qbo/qbo-menu.d.ts +3 -2
- package/src/qbo/qbo-menu.js +82 -44
- package/src/qbo/qbo-menu.ts +87 -50
- package/src/qbo/styles.js +2 -2
- package/src/qbo/styles.ts +2 -2
- package/wwwroot/css/qbo.css +55 -157
- package/wwwroot/css/qbo.css.map +1 -1
- package/wwwroot/css/qbo.min.css +1 -1
- package/wwwroot/css/qboui.css +56 -159
- package/wwwroot/css/qboui.css.map +1 -1
- package/wwwroot/css/qboui.min.css +1 -1
- package/wwwroot/images/qbo-icons.svg +57 -6
- package/wwwroot/js/esm/qbo4.ui.js +84 -46
- package/wwwroot/js/esm/qbo4.ui.min.js +26 -26
- package/wwwroot/js/esm/qbo4.ui.min.js.map +1 -1
- package/wwwroot/js/qbo4.ui.js +84 -46
- package/wwwroot/js/qbo4.ui.min.js +26 -26
- package/wwwroot/js/qbo4.ui.min.js.map +1 -1
- package/wwwroot/menu.html +279 -206
package/wwwroot/menu.html
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
<title>qbo-menu</title>
|
|
7
7
|
<script defer src="js/qbo4.ui.js"></script>
|
|
8
8
|
<script defer src="js/qbo4.ui-code.js"></script>
|
|
9
|
-
|
|
10
|
-
<link href="css/
|
|
9
|
+
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">-->
|
|
10
|
+
<link href="css/qbo.css" rel="stylesheet">
|
|
11
11
|
<style>
|
|
12
12
|
xsvg {
|
|
13
13
|
height: 1rem;
|
|
@@ -25,76 +25,155 @@
|
|
|
25
25
|
</style>
|
|
26
26
|
</head>
|
|
27
27
|
|
|
28
|
-
<body>
|
|
29
|
-
<
|
|
28
|
+
<body class="qbo-theme-light">
|
|
29
|
+
<nav>
|
|
30
|
+
<menu>
|
|
31
|
+
<li>
|
|
32
|
+
<qbo-menu>
|
|
33
|
+
<span>Home</span>
|
|
34
|
+
<menu class="" style="left: 61px; top: 189px;">
|
|
35
|
+
<li>Do something</li>
|
|
36
|
+
<li>Or something else</li>
|
|
37
|
+
</menu>
|
|
38
|
+
</qbo-menu>
|
|
39
|
+
</li>
|
|
40
|
+
<li>
|
|
41
|
+
<qbo-menu>
|
|
42
|
+
<span>Config <svg class="icon"><use href="/src/qbo-icons.svg#caret-down"></use></svg></span>
|
|
43
|
+
<aside class="" style="border: 1px solid black">
|
|
44
|
+
<h3>Welcome to Configuration Land</h3>
|
|
45
|
+
<div class="qbo-row">
|
|
46
|
+
<div class="qbo-col">
|
|
47
|
+
Some menu stuff here<br><br><br><br><br><br><br><br><br><br><br>And scroll!
|
|
48
|
+
</div>
|
|
49
|
+
<div class="qbo-col">
|
|
50
|
+
Some content stuff here
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</aside>
|
|
54
|
+
</qbo-menu>
|
|
55
|
+
</li>
|
|
56
|
+
<li>Security</li>
|
|
57
|
+
</menu>
|
|
58
|
+
</nav>
|
|
59
|
+
<div class="container" style="padding: var(--qbo-padding-horizontal) var(--qbo-padding-vertical)">
|
|
30
60
|
<h1>qbo-menu</h1>
|
|
31
61
|
<p>
|
|
32
62
|
The <code>qbo-menu</code> web component enables menus of all sorts.
|
|
33
63
|
</p>
|
|
34
64
|
<section title="menus">
|
|
35
|
-
<h2>
|
|
36
|
-
<div class="row">
|
|
65
|
+
<h2>Dropdown menus</h2>
|
|
66
|
+
<div class="qbo-row">
|
|
67
|
+
<div class="qbo-card">
|
|
68
|
+
<header>Dropdown Menus</header>
|
|
69
|
+
<qbo-menu>
|
|
70
|
+
<button class="primary">Dropdown</button>
|
|
71
|
+
<menu>
|
|
72
|
+
<li>Do something</li>
|
|
73
|
+
<li>Or something else</li>
|
|
74
|
+
</menu>
|
|
75
|
+
</qbo-menu>
|
|
76
|
+
<qbo-menu placement="right-start">
|
|
77
|
+
<button class="warning"><svg class="icon"><use href="images/qbo-icons.svg#east"></use></svg></button>
|
|
78
|
+
<menu>
|
|
79
|
+
<li>Do something</li>
|
|
80
|
+
<li>Or something else</li>
|
|
81
|
+
</menu>
|
|
82
|
+
</qbo-menu>
|
|
83
|
+
<qbo-menu placement="top-end">
|
|
84
|
+
<button class="secondary">Fly up</button>
|
|
85
|
+
<menu>
|
|
86
|
+
<li>Do something</li>
|
|
87
|
+
<li>Or something else</li>
|
|
88
|
+
</menu>
|
|
89
|
+
</qbo-menu>
|
|
90
|
+
<qbo-menu type="context">
|
|
91
|
+
<menu>
|
|
92
|
+
<li>Option A</li>
|
|
93
|
+
<li>Option B</li>
|
|
94
|
+
<li>Option C</li>
|
|
95
|
+
</menu>
|
|
96
|
+
</qbo-menu>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="qbo-card">
|
|
99
|
+
<div class="qbo-row">
|
|
100
|
+
<menu class="qbo-toolbar vertical">
|
|
101
|
+
<li>
|
|
102
|
+
<qbo-menu placement="right-start">
|
|
103
|
+
<svg class="icon"><use href="images/qbo-icons.svg#document"></use></svg>
|
|
104
|
+
<menu>
|
|
105
|
+
<li>1. Do something</li>
|
|
106
|
+
<li>2. Or something else</li>
|
|
107
|
+
</menu>
|
|
108
|
+
</qbo-menu>
|
|
109
|
+
</li>
|
|
110
|
+
<li>
|
|
111
|
+
<qbo-menu placement="right-start">
|
|
112
|
+
<svg class="icon"><use href="images/qbo-icons.svg#collection"></use></svg>
|
|
113
|
+
<menu>
|
|
114
|
+
<li>3. Another thing</li>
|
|
115
|
+
<li>4. Yet again.</li>
|
|
116
|
+
</menu>
|
|
117
|
+
</qbo-menu>
|
|
118
|
+
</li>
|
|
37
119
|
|
|
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
|
-
|
|
120
|
+
<li>
|
|
121
|
+
<qbo-menu placement="right-start">
|
|
122
|
+
<svg class="icon"><use href="images/qbo-icons.svg#config"></use></svg>
|
|
123
|
+
<menu>
|
|
124
|
+
<li>5. Hive.</li>
|
|
125
|
+
<li>6. Pick up sticks.</li>
|
|
126
|
+
</menu>
|
|
127
|
+
</qbo-menu>
|
|
128
|
+
</li>
|
|
129
|
+
</menu>
|
|
130
|
+
<p>
|
|
131
|
+
Joker menus to the left of me.
|
|
132
|
+
<br />
|
|
133
|
+
Clown menus to the right.
|
|
134
|
+
</p>
|
|
135
|
+
<menu class="qbo-toolbar vertical">
|
|
136
|
+
<li>
|
|
137
|
+
<qbo-menu placement="right-start">
|
|
138
|
+
<svg class="icon"><use href="images/qbo-icons.svg#east"></use></svg>
|
|
139
|
+
<menu>
|
|
140
|
+
<li>1. Do something</li>
|
|
141
|
+
<li>2. Or something else</li>
|
|
142
|
+
</menu>
|
|
143
|
+
</qbo-menu>
|
|
144
|
+
</li>
|
|
145
|
+
<li>
|
|
146
|
+
<qbo-menu placement="right-start">
|
|
147
|
+
<svg class="icon"><use href="images/qbo-icons.svg#southeast"></use></svg>
|
|
148
|
+
<menu>
|
|
149
|
+
<li>3. Another thing</li>
|
|
150
|
+
<li>4. Yet again.</li>
|
|
151
|
+
</menu>
|
|
152
|
+
</qbo-menu>
|
|
153
|
+
</li>
|
|
154
|
+
|
|
155
|
+
<li>
|
|
156
|
+
<qbo-menu placement="right-start">
|
|
157
|
+
<svg class="icon"><use href="images/qbo-icons.svg#south"></use></svg>
|
|
158
|
+
<menu>
|
|
159
|
+
<li>5. Hive.</li>
|
|
160
|
+
<li>6. Pick up sticks.</li>
|
|
161
|
+
</menu>
|
|
162
|
+
</qbo-menu>
|
|
163
|
+
</li>
|
|
164
|
+
</menu>
|
|
165
|
+
</div>
|
|
80
166
|
</div>
|
|
81
|
-
|
|
82
|
-
<qbo-icon icon="list"></qbo-icon>
|
|
83
|
-
<menu class="xbg-light xborder-end">
|
|
84
|
-
<li>
|
|
85
|
-
<a href="#" onclick="console.log('a');">
|
|
86
|
-
<qbo-icon icon="accounting"></qbo-icon>
|
|
87
|
-
<span>Side A</span>
|
|
88
|
-
</a>
|
|
89
|
-
</li>
|
|
90
|
-
</menu>
|
|
91
|
-
</qbo-menu>
|
|
167
|
+
|
|
92
168
|
</div>
|
|
93
169
|
<hr />
|
|
94
|
-
<h2>Context
|
|
95
|
-
<div class="row">
|
|
96
|
-
<qbo-card>
|
|
170
|
+
<h2>Context Menus</h2>
|
|
171
|
+
<div class="qbo-row">
|
|
172
|
+
<div class="qbo-card">
|
|
97
173
|
<header>Parent Element</header>
|
|
174
|
+
<p>
|
|
175
|
+
Some content here, with a context menu applied.
|
|
176
|
+
</p>
|
|
98
177
|
<qbo-menu type="context">
|
|
99
178
|
<menu>
|
|
100
179
|
<li>Option A</li>
|
|
@@ -102,152 +181,146 @@
|
|
|
102
181
|
<li>Option C</li>
|
|
103
182
|
</menu>
|
|
104
183
|
</qbo-menu>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
</p>
|
|
108
|
-
</qbo-card>
|
|
109
|
-
<qbo-card style="overflow-y: hidden">
|
|
184
|
+
</div>
|
|
185
|
+
<div class="qbo-card">
|
|
110
186
|
<header>Target Element</header>
|
|
111
|
-
<div
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
</
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
</
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
</
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
</
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
</
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
</
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
</
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
</
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
</
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
</
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
</
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
</
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
</
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
</
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
</
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
</
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
</
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
</tbody>
|
|
247
|
-
</table>
|
|
248
|
-
</div>
|
|
187
|
+
<div class="row table-responsive">
|
|
188
|
+
<table class="qbo-nowrap">
|
|
189
|
+
<thead>
|
|
190
|
+
<tr>
|
|
191
|
+
<th colspan="3">
|
|
192
|
+
Samle Data
|
|
193
|
+
</th>
|
|
194
|
+
</tr>
|
|
195
|
+
<tr>
|
|
196
|
+
<th></th>
|
|
197
|
+
<th>Col 1</th>
|
|
198
|
+
<th>Col 2</th>
|
|
199
|
+
<th>Col 3</th>
|
|
200
|
+
</tr>
|
|
201
|
+
</thead>
|
|
202
|
+
<tbody id="items">
|
|
203
|
+
<tr data-selectable="1">
|
|
204
|
+
<td><input type="checkbox" /></td>
|
|
205
|
+
<td><a href="#A">A</a></td>
|
|
206
|
+
<td>1</td>
|
|
207
|
+
<td>1/1/2001</td>
|
|
208
|
+
</tr>
|
|
209
|
+
<tr data-selectable="2">
|
|
210
|
+
<td><input type="checkbox" /></td>
|
|
211
|
+
<td><a href="#B">B</a></td>
|
|
212
|
+
<td>2</td>
|
|
213
|
+
<td>1/1/2002</td>
|
|
214
|
+
</tr>
|
|
215
|
+
<tr data-selectable="3">
|
|
216
|
+
<td><input type="checkbox" /></td>
|
|
217
|
+
<td><a href="#C">C</a></td>
|
|
218
|
+
<td>3</td>
|
|
219
|
+
<td>1/1/2003</td>
|
|
220
|
+
</tr>
|
|
221
|
+
<tr data-selectable="1">
|
|
222
|
+
<td><input type="checkbox" /></td>
|
|
223
|
+
<td><a href="#A">A</a></td>
|
|
224
|
+
<td>1</td>
|
|
225
|
+
<td>1/1/2001</td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr data-selectable="2">
|
|
228
|
+
<td><input type="checkbox" /></td>
|
|
229
|
+
<td><a href="#B">B</a></td>
|
|
230
|
+
<td>2</td>
|
|
231
|
+
<td>1/1/2002</td>
|
|
232
|
+
</tr>
|
|
233
|
+
<tr data-selectable="3">
|
|
234
|
+
<td><input type="checkbox" /></td>
|
|
235
|
+
<td><a href="#C">C</a></td>
|
|
236
|
+
<td>3</td>
|
|
237
|
+
<td>1/1/2003</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr data-selectable="1">
|
|
240
|
+
<td><input type="checkbox" /></td>
|
|
241
|
+
<td><a href="#A">A</a></td>
|
|
242
|
+
<td>1</td>
|
|
243
|
+
<td>1/1/2001</td>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr data-selectable="2">
|
|
246
|
+
<td><input type="checkbox" /></td>
|
|
247
|
+
<td><a href="#B">B</a></td>
|
|
248
|
+
<td>2</td>
|
|
249
|
+
<td>1/1/2002</td>
|
|
250
|
+
</tr>
|
|
251
|
+
<tr data-selectable="3">
|
|
252
|
+
<td><input type="checkbox" /></td>
|
|
253
|
+
<td><a href="#C">C</a></td>
|
|
254
|
+
<td>3</td>
|
|
255
|
+
<td>1/1/2003</td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr data-selectable="1">
|
|
258
|
+
<td><input type="checkbox" /></td>
|
|
259
|
+
<td><a href="#A">A</a></td>
|
|
260
|
+
<td>1</td>
|
|
261
|
+
<td>1/1/2001</td>
|
|
262
|
+
</tr>
|
|
263
|
+
<tr data-selectable="2">
|
|
264
|
+
<td><input type="checkbox" /></td>
|
|
265
|
+
<td><a href="#B">B</a></td>
|
|
266
|
+
<td>2</td>
|
|
267
|
+
<td>1/1/2002</td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr data-selectable="3">
|
|
270
|
+
<td><input type="checkbox" /></td>
|
|
271
|
+
<td><a href="#C">C</a></td>
|
|
272
|
+
<td>3</td>
|
|
273
|
+
<td>1/1/2003</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr data-selectable="1">
|
|
276
|
+
<td><input type="checkbox" /></td>
|
|
277
|
+
<td><a href="#A">A</a></td>
|
|
278
|
+
<td>1</td>
|
|
279
|
+
<td>1/1/2001</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr data-selectable="2">
|
|
282
|
+
<td><input type="checkbox" /></td>
|
|
283
|
+
<td><a href="#B">B</a></td>
|
|
284
|
+
<td>2</td>
|
|
285
|
+
<td>1/1/2002</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr data-selectable="3">
|
|
288
|
+
<td><input type="checkbox" /></td>
|
|
289
|
+
<td><a href="#C">C</a></td>
|
|
290
|
+
<td>3</td>
|
|
291
|
+
<td>1/1/2003</td>
|
|
292
|
+
</tr>
|
|
293
|
+
<tr data-selectable="1">
|
|
294
|
+
<td><input type="checkbox" /></td>
|
|
295
|
+
<td><a href="#A">A</a></td>
|
|
296
|
+
<td>1</td>
|
|
297
|
+
<td>1/1/2001</td>
|
|
298
|
+
</tr>
|
|
299
|
+
<tr data-selectable="2">
|
|
300
|
+
<td><input type="checkbox" /></td>
|
|
301
|
+
<td><a href="#B">B</a></td>
|
|
302
|
+
<td>2</td>
|
|
303
|
+
<td>1/1/2002</td>
|
|
304
|
+
</tr>
|
|
305
|
+
<tr data-selectable="3">
|
|
306
|
+
<td><input type="checkbox" /></td>
|
|
307
|
+
<td><a href="#C">C</a></td>
|
|
308
|
+
<td>3</td>
|
|
309
|
+
<td>1/1/2003</td>
|
|
310
|
+
</tr>
|
|
311
|
+
</tbody>
|
|
312
|
+
<caption>
|
|
313
|
+
<qbo-menu type="context" target="#items">
|
|
314
|
+
<menu>
|
|
315
|
+
<li>A</li>
|
|
316
|
+
<li>B</li>
|
|
317
|
+
<li>C</li>
|
|
318
|
+
</menu>
|
|
319
|
+
</qbo-menu>
|
|
320
|
+
</caption>
|
|
321
|
+
</table>
|
|
249
322
|
</div>
|
|
250
|
-
</
|
|
323
|
+
</div>
|
|
251
324
|
</div>
|
|
252
325
|
<hr />
|
|
253
326
|
</section>
|