@quandis/qbo4.ui 4.0.1-CI-20241027-142453 → 4.0.1-CI-20241029-174756
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 +2 -1
- package/scss/qboui.scss +103 -5
- package/src/qbo/Program.d.ts +2 -0
- package/src/qbo/Program.js +2 -0
- package/src/qbo/Program.ts +2 -0
- package/src/qbo/qbo-card.d.ts +21 -0
- package/src/qbo/qbo-card.js +118 -0
- package/src/qbo/qbo-card.ts +115 -0
- package/src/qbo/qbo-contextmenu.d.ts +3 -1
- package/src/qbo/qbo-contextmenu.js +19 -17
- package/src/qbo/qbo-contextmenu.ts +22 -19
- package/src/qbo/qbo-icon.d.ts +13 -5
- package/src/qbo/qbo-icon.js +146 -45
- package/src/qbo/qbo-icon.ts +153 -40
- package/src/qbo/qbo-menu.d.ts +18 -0
- package/src/qbo/qbo-menu.js +169 -0
- package/src/qbo/qbo-menu.ts +168 -0
- package/src/qbo/styles.js +3 -3
- package/src/qbo/styles.ts +3 -3
- package/wwwroot/css/qboui.css +311 -162
- package/wwwroot/css/qboui.css.map +1 -1
- package/wwwroot/css/qboui.min.css +3 -3
- package/wwwroot/default.html +146 -5
- package/wwwroot/images/qbo-icons.svg +7 -0
- package/wwwroot/js/esm/qbo4.ui.js +1271 -181
- package/wwwroot/js/esm/qbo4.ui.min.js +106 -53
- package/wwwroot/js/esm/qbo4.ui.min.js.LICENSE.txt +6 -0
- package/wwwroot/js/esm/qbo4.ui.min.js.map +1 -1
- package/wwwroot/js/qbo4.ui.js +1275 -181
- package/wwwroot/js/qbo4.ui.min.js +106 -53
- package/wwwroot/js/qbo4.ui.min.js.LICENSE.txt +6 -0
- package/wwwroot/js/qbo4.ui.min.js.map +1 -1
- package/wwwroot/menu.html +92 -0
- package/src/qbo/Icons.d.ts +0 -2
- package/src/qbo/Icons.js +0 -50
- package/src/qbo/Icons.ts +0 -57
package/wwwroot/default.html
CHANGED
|
@@ -2,18 +2,24 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<
|
|
5
|
+
<meta name="qbo4-basepath" value="" />
|
|
6
|
+
<title>qbo4.ui examples</title>
|
|
6
7
|
<script defer src="js/qbo4.ui.js"></script>
|
|
7
8
|
<script defer src="js/qbo4.ui-code.js"></script>
|
|
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">
|
|
8
10
|
<link href="css/qboui.css" rel="stylesheet">
|
|
9
11
|
<style>
|
|
10
12
|
.render-button {
|
|
11
13
|
height: 100%;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
svg {
|
|
17
|
+
width: 1em;
|
|
18
|
+
height: 1em;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
qbo-card {
|
|
22
|
+
overflow-y: auto;
|
|
17
23
|
}
|
|
18
24
|
</style>
|
|
19
25
|
<script type="text/javascript">
|
|
@@ -32,11 +38,146 @@
|
|
|
32
38
|
<h1>qbo4.ui</h1>
|
|
33
39
|
<p>
|
|
34
40
|
The <code>qbo4.UI</code> module provides basic UI sugar for data-driven website.
|
|
41
|
+
:<svg><use href="/ui/images/qbo-icons.svg#arrow-down-circle"></use></svg>:
|
|
42
|
+
:<img style="height: 1em; width: 1em;" src="/ui/images/bootstrap-icons.svg#i-arrow-down-circle" />:
|
|
35
43
|
</p>
|
|
44
|
+
<section title="cards">
|
|
45
|
+
<h2 id="cards" class="t">Cards</h2>
|
|
46
|
+
<div class="row">
|
|
47
|
+
<qbo-card>
|
|
48
|
+
<header>Basics</header>
|
|
49
|
+
<p>
|
|
50
|
+
The <code><qbo-card></code> works as a collapsable column.
|
|
51
|
+
It should have a <code><header></code> tag that the user can click on to expand or collapse the card.
|
|
52
|
+
</p><p>
|
|
53
|
+
This card has content wrapped with an <code>expaned</code> class, visible only when <code>display="maximize"</code>
|
|
54
|
+
Click on the header to see the expanded content.
|
|
55
|
+
</p>
|
|
56
|
+
<p class="expanded">
|
|
57
|
+
Clicking on the header toggles between <code>normal</code>, <code>maximize</code> and <code>minimize</code>.
|
|
58
|
+
Ctrl-clicking on the header toggles in the reverse order: <code>maximize</code>, <code>normal</code> and <code>minimize</code>.
|
|
59
|
+
</p>
|
|
60
|
+
</qbo-card>
|
|
61
|
+
<qbo-card columns="6">
|
|
62
|
+
<header>Flex</header>
|
|
63
|
+
<table class="table">
|
|
64
|
+
<thead>
|
|
65
|
+
<tr><th colspan="2">Attributes</th></tr>
|
|
66
|
+
</thead>
|
|
67
|
+
<tbody>
|
|
68
|
+
<tr><td><code>columns</code></td><td>number of columns to consume in a 12 column flex grid.</td></tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td><code>display</code></td>
|
|
71
|
+
<td>
|
|
72
|
+
<ul>
|
|
73
|
+
<li><code>normal</code>: display the <code>header</code> and regular content.</li>
|
|
74
|
+
<li><code>maximize</code>: display the <code>header</code> and expanded content.</li>
|
|
75
|
+
<li><code>minimize</code>: display the <code>header</code> only.</li>
|
|
76
|
+
</ul>
|
|
77
|
+
</td>
|
|
78
|
+
</tr>
|
|
79
|
+
</tbody>
|
|
80
|
+
</table>
|
|
81
|
+
<p class="expanded">
|
|
82
|
+
The <code>column</code> attribute can be used to control the width of the card.
|
|
83
|
+
This card is set to <code>columns="6"</code>, so it should consume half the width of the screen.
|
|
84
|
+
Try <a href="#" onclick="this.closest('qbo-card').setAttribute('columns', '4'); return false;"><code>columns="4"</code></a>,
|
|
85
|
+
<a href="#" onclick="this.closest('qbo-card').setAttribute('columns', '6'); return false;"><code>columns="6"</code></a>, or
|
|
86
|
+
<a href="#" onclick="this.closest('qbo-card').setAttribute('columns', '8'); return false;"><code>columns="8"</code></a>,
|
|
87
|
+
</p>
|
|
88
|
+
</qbo-card>
|
|
89
|
+
<qbo-card>
|
|
90
|
+
<header>Card 3</header>
|
|
91
|
+
<p>
|
|
92
|
+
This card defaults to <code>maximize</code>, because it has no content with an <code>expanded</code> class.
|
|
93
|
+
</p>
|
|
94
|
+
<p>
|
|
95
|
+
Cards listen for a <code>qbo-minimize</code> event raised on the document.
|
|
96
|
+
Try <a href="#" onclick="document.dispatchEvent(new CustomEvent('qbo-card-minimize')); return false;">minimizing</a>,
|
|
97
|
+
<a href="#" onclick="document.dispatchEvent(new CustomEvent('qbo-card-normal')); return false;">normalizing</a>, or
|
|
98
|
+
<a href="#" onclick="document.dispatchEvent(new CustomEvent('qbo-card-maximize')); return false;">maximizing</a>
|
|
99
|
+
all cards on the page.
|
|
100
|
+
</p>
|
|
101
|
+
<footer>Footers are optional.</footer>
|
|
102
|
+
|
|
103
|
+
</qbo-card>
|
|
104
|
+
|
|
105
|
+
</div>
|
|
106
|
+
</section>
|
|
107
|
+
<hr />
|
|
108
|
+
<section title="icons">
|
|
109
|
+
<h2 id="icons">Icons</h2>
|
|
110
|
+
<div class="row">
|
|
111
|
+
<qbo-card>
|
|
112
|
+
<header>Basic Tags</header>
|
|
113
|
+
<p>
|
|
114
|
+
The <code>qbo4-ui</code> packages includes <code>svg</code> icons based on <a href="https://icons.getbootstrap.com/">Bootstrap icons</a>.
|
|
115
|
+
It is deployed with the <code>qbo4.UI</code> Razor Class Library to <code>ui/images/qbo-icons.svg</code>, and extends the Bootstrap icon svg file
|
|
116
|
+
to include <code>use</code> tags to enable use by <code>img</code> and <code>css</code>.
|
|
117
|
+
</p>
|
|
118
|
+
<p>
|
|
119
|
+
You can icons with an <code>svg</code> tag (instead of an <code>image</code> tag) like this:
|
|
120
|
+
<svg fill="currentColor">
|
|
121
|
+
<use href="/ui/images/qbo-icons.svg#arrow-down-circle" />
|
|
122
|
+
</svg>
|
|
123
|
+
<code>
|
|
124
|
+
<br /><svg>
|
|
125
|
+
<br /> <use href="/ui/images/qbo-icons.svg#{icon id}" />
|
|
126
|
+
<br /></svg>
|
|
127
|
+
</code>
|
|
128
|
+
</p>
|
|
129
|
+
<p>
|
|
130
|
+
Or a standard <code>image</code> tag like this:
|
|
131
|
+
<img style="height: 1em; width: 1em;" src="/ui/images/qbo-icons.svg#i-arrow-down-circle" />
|
|
132
|
+
<code>
|
|
133
|
+
<br /><img src="/ui/images/qbo-icons.svg#{icon id}" />
|
|
134
|
+
</code>
|
|
135
|
+
</p>
|
|
136
|
+
<p>
|
|
137
|
+
Note the <code>i-{icon id}</code> for image <code>source</code>. This is required for both <code>img</code> and <code>css</code> references.
|
|
138
|
+
</p>
|
|
139
|
+
</qbo-card>
|
|
140
|
+
<qbo-card>
|
|
141
|
+
<header>qbo-icon</header>
|
|
142
|
+
<p>
|
|
143
|
+
The <code>qbo-icon</code> render icons and buttons based on icons.
|
|
144
|
+
<br />For example, <code><qbo-icon icon="upload"></qbo-icon></code> renders this: <qbo-icon icon="upload"></qbo-icon>
|
|
145
|
+
</p>
|
|
146
|
+
<p>
|
|
147
|
+
You may also create buttons by setting <code>type="button"</code>: <qbo-icon type="button" class="btn-secondary" icon="upload"></qbo-icon>
|
|
148
|
+
<br/>
|
|
149
|
+
<code><qbo-icon <strong>type="button"</strong> icon="upload"></qbo-icon></code>
|
|
150
|
+
</p>
|
|
151
|
+
<p>
|
|
152
|
+
Create a toggle by setting <code>type="toggle"</code>: <qbo-icon type="toggle" icon="upload"></qbo-icon>
|
|
153
|
+
<br/>
|
|
154
|
+
<code><qbo-icon <strong>type="toggle"</strong> icon="upload"></qbo-icon></code>
|
|
155
|
+
</p>
|
|
156
|
+
<p>
|
|
157
|
+
The <code>qbo-icon</code> defaults to rendering it's icon in the host DOM, rather than the shadow DOM,
|
|
158
|
+
as one generally wants to follow the page's styling. You can change this behavior by setting <code>renderinhost="false"</code>.
|
|
159
|
+
</p>
|
|
160
|
+
<p>
|
|
161
|
+
The location of the <code>qbo-icons.svg</code> defaults to <code>ui/images/qbo-icons.svg</code>, but this can be adjusted globally
|
|
162
|
+
by including a custom meta tag in your HTML:
|
|
163
|
+
<br/>
|
|
164
|
+
<code><meta name="qbo4-basepath" value="{root qbo4 folder: e.g. core}" /></code>
|
|
165
|
+
<br/>
|
|
166
|
+
Other web components may access this URL via a static property: <code>QboIcon.spriteUrl</code>
|
|
167
|
+
</p>
|
|
168
|
+
</qbo-card>
|
|
169
|
+
<qbo-card columns="12">
|
|
170
|
+
<header>Standard Icons</header>
|
|
171
|
+
<qbo-icon type="standard"></qbo-icon>
|
|
172
|
+
</qbo-card>
|
|
173
|
+
</div>
|
|
174
|
+
</section>
|
|
175
|
+
<hr />
|
|
36
176
|
<section title="Datalist Web component">
|
|
37
177
|
<h2>Data List <a href="#coding-web-content"><i class="bi bi-play-fill" onclick="tryit('#datalistSample')"></i></a></h2>
|
|
38
178
|
<p>
|
|
39
179
|
The <code><qbo-datalist></code> web component can replace really large <code><select></code> elements with partial data rendered from an API call.
|
|
180
|
+
|
|
40
181
|
</p>
|
|
41
182
|
<div id="datalistSample">
|
|
42
183
|
<qbo-datalist apiEndpoint="https://nominatim.openstreetmap.org/search?q=${value}&format=json" text="display_name" value="place_id" listId="City"></qbo-datalist>
|
|
@@ -244,7 +385,7 @@
|
|
|
244
385
|
<div class="row">
|
|
245
386
|
<div class="input-group mb-2">
|
|
246
387
|
<input type="text" name="SomeInput1" class="form-control" placeholder="Click the icon to the right to speak." />
|
|
247
|
-
<qbo-microphone class="input-group-text bi bi-headset" renderinhost="false"/>
|
|
388
|
+
<qbo-microphone class="input-group-text bi bi-headset" renderinhost="false" />
|
|
248
389
|
</div>
|
|
249
390
|
|
|
250
391
|
<div class="input-group mb-2">
|