tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add legacy support of checkbox, add documents for cookie/lgres/request

Browse Source
This commit is contained in:
Tsanie Lily
2023-03-31 00:11:55 +08:00
parent 5406eea20e
commit 45ae222d25
13 changed files with 222 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/ui/checkbox.d.ts vendored
View File

@ -10,4 +10,4 @@ interface CheckboxOptions {
}
export function createCheckbox(opts?: CheckboxOptions): HTMLElement
export function resolveCheckbox(container: HTMLElement): HTMLElement
export function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement

21
lib/ui/checkbox.html
View File

@ -54,18 +54,23 @@
复选框改变时触发的事件
</p>
<h2>resolveCheckbox</h2>
<code>function resolveCheckbox(container: HTMLElement): HTMLElement</code>
<code>function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement</code>
<h3>container: HTMLElement</h3>
<p>
将把此 HTML 元素下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的 id，包含
<code>[data-checked]</code> 时复选框默认选中。</p>
<code>[data-checked]</code> 时复选框默认选中。
</p>
<p>当该元素无子元素时，<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>，<code>[data-label]</code> 同上述参数中的
<code>label?: string</code>。
</p>
<p>当该元素有子元素时，解析为图片复选框，class 为 <code>checked</code>、<code>unchecked</code> 的子元素将分别在选中与未选中时显示。</p>
<h3>legacy?: boolean</h3>
<p>
是否开启兼容模式，启用兼容模式时将试图匹配 <code>input[type="checkbox"]</code> 标签，与其周围的 label，将其转换为统一样式的复选框。
</p>
<hr />
<h2>示例</h2>
<pre>
&lt;div id="checkbox-sample"&gt;
<pre>&lt;div id="checkbox-sample"&gt;
&lt;label data-checkbox data-type="fa-light" data-label="Checkbox Light"&gt;&lt;/label&gt;
&lt;label data-checkbox data-checked data-label="Checkbox Regular"&gt;&lt;/label&gt;
&lt;label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"&gt;&lt;/label&gt;
@ -73,10 +78,12 @@
&lt;code class="checked"&gt;Checked&lt;/code&gt;
&lt;code class="unchecked"&gt;Unchecked&lt;/code&gt;
&lt;/label&gt;
&lt;input id="check-status" type="checkbox"/&gt;
&lt;label for="check-status"&gt;Label for Status&lt;/label&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"));
window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
&lt;/script&gt;</pre>
<div id="checkbox-sample">
<label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
@ -86,8 +93,10 @@
<code class="checked">Checked</code>
<code class="unchecked">Unchecked</code>
</label>
<input id="check-status" type="checkbox" />
<label for="check-status">Label for Status</label>
</div>
<script type="text/javascript">
window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"));
window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
</script>
</div>

35
lib/ui/checkbox.js
View File

@ -49,7 +49,40 @@ function createCheckbox(opts) {
return container;
}
function resolveCheckbox(container) {
function resolveCheckbox(container, legacy) {
if (legacy) {
const checks = container.querySelectorAll('input[type="checkbox"]');
for (let chk of checks) {
const id = chk.id;
let label;
if (id != null) {
label = container.querySelector(`label[for="${id}"]`);
}
if (label == null) {
const e = chk.nextElementSibling;
if (e != null && e.tagName === 'LABEL') {
label = e;
}
}
if (label == null) {
const e = chk.previousElementSibling;
if (e != null && e.tagName === 'LABEL') {
label = e;
}
}
let text;
if (label == null) {
label = document.createElement('label');
chk.parentElement.insertBefore(label, chk);
} else {
text = label.innerText;
}
label.className = 'checkbox-wrapper';
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text);
label.insertBefore(chk, label.firstChild);
}
}
const boxes = container.querySelectorAll('label[data-checkbox]');
for (let box of boxes) {
if (!box.classList.contains('checkbox-wrapper')) {

4
lib/ui/icon.html
View File

@ -24,9 +24,9 @@
同上述 <code>id: string</code>，<code>[data-type]</code> 同上述
<code>type: string</code>
</p>
<hr />
<h2>示例</h2>
<pre>
&lt;div id="icon-sample"&gt;
<pre>&lt;div id="icon-sample"&gt;
&lt;svg data-id="address-card" data-type="fa-regular"&gt;&lt;/svg&gt;
&lt;svg data-id="user-edit" data-type="fa-light"&gt;&lt;/svg&gt;
&lt;svg data-id="frog" data-type="fa-solid"&gt;&lt;/svg&gt;

4
lib/ui/tooltip.html
View File

@ -20,9 +20,9 @@
<p>
给此元素下的所有含有 title 属性的子元素设置成统一样式的 tooltip
</p>
<hr />
<h2>示例</h2>
<pre>
&lt;div id="tooltip-sample"&gt;
<pre>&lt;div id="tooltip-sample"&gt;
&lt;blockquote title="From MDN Website"&gt;To send an HTTP request, create an XMLHttpRequest object, open a URL, and
send the request. After the transaction completes, the object will contain useful information such as the
response body and the HTTP status of the result.&lt;/blockquote&gt;