add document, fix tooltip position issue

lib/ui/checkbox.html

@@ -0,0 +1,93 @@
+<div>
+  <h1>checkbox</h1>
+  <hr />
+  <p>
+    创建一个统一样式的复选框元素，或者解析转换页面上特定类型的 label
+    标签为复选框元素。
+  </p>
+  <h2>createCheckbox</h2>
+  <code>function createCheckbox(opts?: CheckboxOptions): HTMLElement</code>
+  <h3>opts?: CheckboxOptions</h3>
+  <p>
+    复选框初始参数，结构为
+  <pre>interface CheckboxOptions {
+    type?: string;
+    label?: string;
+    checked?: boolean;
+    isImage?: boolean;
+    imageHeight?: Number;
+    checkedNode?: HTMLElement;
+    uncheckedNode?: HTMLElement;
+    onchange?: (this: HTMLInputElement, ev: Event) => any;
+}</pre>
+  </p>
+  <h3>type?: string</h3>
+  <p>
+    复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
+  </p>
+  <h3>label?: string</h3>
+  <p>
+    复选框的标签文本
+  </p>
+  <h3>checked?: boolean</h3>
+  <p>
+    初始是否选中
+  </p>
+  <h3>isImage?: boolean</h3>
+  <p>
+    是否为图片复选框
+  </p>
+  <h3>imageHeight?: Number</h3>
+  <p>
+    为图片复选框时的图片限制高度
+  </p>
+  <h3>checkedNode?: HTMLElement</h3>
+  <p>
+    为图片复选框时的选中时显示的元素
+  </p>
+  <h3>uncheckedNode?: HTMLElement</h3>
+  <p>
+    为图片复选框时的未选中时显示的元素
+  </p>
+  <h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3>
+  <p>
+    复选框改变时触发的事件
+  </p>
+  <h2>resolveCheckbox</h2>
+  <code>function resolveCheckbox(container: HTMLElement): HTMLElement</code>
+  <h3>container: HTMLElement</h3>
+  <p>
+    将把此 HTML 元素下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的 id，包含
+    <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>
+  <h2>示例</h2>
+  <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;
+  &lt;label data-checkbox&gt;
+    &lt;code class="checked"&gt;Checked&lt;/code&gt;
+    &lt;code class="unchecked"&gt;Unchecked&lt;/code&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"));
+&lt;/script&gt;</pre>
+  <div id="checkbox-sample">
+    <label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
+    <label data-checkbox data-checked data-label="Checkbox Regular"></label>
+    <label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
+    <label data-checkbox>
+      <code class="checked">Checked</code>
+      <code class="unchecked">Unchecked</code>
+    </label>
+  </div>
+  <script type="text/javascript">
+    window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"));
+  </script>
+</div>