@quandis/qbo4.ui 4.0.1-CI-20241118-231433 → 4.0.1-CI-20241119-170458
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/wwwroot/default.html +42 -13
- package/wwwroot/images/qbo-icons.svg +21 -0
package/package.json
CHANGED
package/wwwroot/default.html
CHANGED
|
@@ -38,8 +38,6 @@
|
|
|
38
38
|
<h1>qbo4.ui</h1>
|
|
39
39
|
<p>
|
|
40
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" />:
|
|
43
41
|
</p>
|
|
44
42
|
<section title="cards">
|
|
45
43
|
<h2 id="cards" class="t">Cards</h2>
|
|
@@ -138,31 +136,62 @@
|
|
|
138
136
|
</p>
|
|
139
137
|
</qbo-card>
|
|
140
138
|
<qbo-card>
|
|
141
|
-
<header>
|
|
142
|
-
<
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
139
|
+
<header>Common Icons</header>
|
|
140
|
+
<div class="qbo-row">
|
|
141
|
+
<div class="qbo-col">
|
|
142
|
+
Toolbars:
|
|
143
|
+
<ul>
|
|
144
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#copy" /></svg> Copy</li>
|
|
145
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#paste" /></svg> Paste</li>
|
|
146
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#cut" /></svg> Cut</li>
|
|
147
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#delete" /></svg> Delete</li>
|
|
148
|
+
</ul>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="qbo-col">
|
|
151
|
+
Navigation:
|
|
152
|
+
<ul>
|
|
153
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#search" /></svg> Search</li>
|
|
154
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#tab" /></svg> Tab</li>
|
|
155
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#summary" /></svg> Summary</li>
|
|
156
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#edit" /></svg> Edit</li>
|
|
157
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#upload" /></svg> Upload</li>
|
|
158
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#download" /></svg> Download</li>
|
|
159
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#export" /></svg> Export</li>
|
|
160
|
+
</ul>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="qbo-col">
|
|
163
|
+
qbo Modules:
|
|
164
|
+
<ul>
|
|
165
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#accounting" /></svg> Accounting</li>
|
|
166
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#collection" /></svg> Collection</li>
|
|
167
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#document" /></svg> Document</li>
|
|
168
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#message" /></svg> Message</li>
|
|
169
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#score" /></svg> Score</li>
|
|
170
|
+
<li><svg><use href="/ui/images/qbo-icons.svg#config" /></svg> Config</li>
|
|
171
|
+
</ul>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
146
174
|
<p>
|
|
147
|
-
|
|
148
|
-
|
|
175
|
+
Navigation:
|
|
176
|
+
|
|
177
|
+
<br />
|
|
149
178
|
<code><qbo-icon <strong>type="button"</strong> icon="upload"></qbo-icon></code>
|
|
150
179
|
</p>
|
|
151
180
|
<p>
|
|
152
181
|
Create a toggle by setting <code>type="toggle"</code>: <qbo-icon type="toggle" icon="upload"></qbo-icon>
|
|
153
|
-
<br/>
|
|
182
|
+
<br />
|
|
154
183
|
<code><qbo-icon <strong>type="toggle"</strong> icon="upload"></qbo-icon></code>
|
|
155
184
|
</p>
|
|
156
185
|
<p>
|
|
157
|
-
The <code>qbo-icon</code> defaults to rendering it's icon in the host DOM, rather than the shadow DOM,
|
|
186
|
+
The <code>qbo-icon</code> defaults to rendering it's icon in the host DOM, rather than the shadow DOM,
|
|
158
187
|
as one generally wants to follow the page's styling. You can change this behavior by setting <code>renderinhost="false"</code>.
|
|
159
188
|
</p>
|
|
160
189
|
<p>
|
|
161
190
|
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
191
|
by including a custom meta tag in your HTML:
|
|
163
|
-
<br/>
|
|
192
|
+
<br />
|
|
164
193
|
<code><meta name="qbo4-basepath" value="{root qbo4 folder: e.g. core}" /></code>
|
|
165
|
-
<br/>
|
|
194
|
+
<br />
|
|
166
195
|
Other web components may access this URL via a static property: <code>QboIcon.spriteUrl</code>
|
|
167
196
|
</p>
|
|
168
197
|
</qbo-card>
|
|
@@ -170,6 +170,22 @@
|
|
|
170
170
|
<symbol class="qi" viewBox="0 0 16 16" id="dash">
|
|
171
171
|
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/>
|
|
172
172
|
</symbol>
|
|
173
|
+
<symbol class="qi" viewBox="0 0 16 16" id="tab">
|
|
174
|
+
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"/>
|
|
175
|
+
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
|
|
176
|
+
</symbol>
|
|
177
|
+
<symbol class="qi" viewBox="0 0 16 16" id="summary">
|
|
178
|
+
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
|
|
179
|
+
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
|
|
180
|
+
</symbol>
|
|
181
|
+
<symbol class="qi" viewBox="0 0 16 16" id="edit">
|
|
182
|
+
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
|
|
183
|
+
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
|
|
184
|
+
</symbol>
|
|
185
|
+
<symbol class="qi" viewBox="0 0 16 16" id="ocr">
|
|
186
|
+
<path d="M1.5 2.5A1.5 1.5 0 0 1 3 1h10a1.5 1.5 0 0 1 1.5 1.5v3.563a2 2 0 0 1 0 3.874V13.5A1.5 1.5 0 0 1 13 15H3a1.5 1.5 0 0 1-1.5-1.5V9.937a2 2 0 0 1 0-3.874zm1 3.563a2 2 0 0 1 0 3.874V13.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.937a2 2 0 0 1 0-3.874V2.5A.5.5 0 0 0 13 2H3a.5.5 0 0 0-.5.5zM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>
|
|
187
|
+
<path d="M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386z"/>
|
|
188
|
+
</symbol>
|
|
173
189
|
<use id="i-east" href="#east"/>
|
|
174
190
|
<use id="i-southeast" href="#southeast"/>
|
|
175
191
|
<use id="i-south" href="#south"/>
|
|
@@ -190,4 +206,9 @@
|
|
|
190
206
|
<use id="i-cut" href="#cut"/>
|
|
191
207
|
<use id="i-paste" href="#cut"/>
|
|
192
208
|
<use id="i-delete" href="#delete"/>
|
|
209
|
+
<use id="i-tab" href="#tab"/>
|
|
210
|
+
<use id="i-summary" href="#summary"/>
|
|
211
|
+
<use id="i-edit" href="#edit"/>
|
|
212
|
+
<use id="i-ocr" href="#ocr"/>
|
|
213
|
+
|
|
193
214
|
</svg>
|