fix dropdown issue, add autoprefix for scss

lib/ui/dropdown.html

@@ -0,0 +1,147 @@
+<div>
+  <h1>dropdown</h1>
+  <hr />
+  <p>
+    创建一个统一样式的下拉输入、选择框元素，或者解析转换页面上的 select 标签为该元素。
+  </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;
+    customerAttributes?: { [key: string]: string };
+    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 | HTMLElement</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>customerAttributes?: { [key: string]: string }</h3>
+  <p>
+    自定义属性，例如
+    <pre>{
+    'data-id': 'xxxxxx',
+    'disabled': ''
+}</pre>
+  </p>
+  <h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3>
+  <p>
+    复选框改变时触发的事件
+  </p>
+  <h2>resolveCheckbox</h2>
+  <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
+  <h3>container?: HTMLElement</h3>
+  <p>
+    将把此 HTML 元素，为 null 则把 document.body 下的所有 <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>
+  <h3>legacy?: boolean</h3>
+  <p>
+    是否开启兼容模式，启用兼容模式时将试图匹配 <code>input[type="checkbox"]</code> 标签，与其周围的 label，将其转换为统一样式的复选框。
+  </p>
+  <hr /> -->
+  <h2>示例</h2>
+  <pre></pre>
+  <div id="dropdown-sample">
+    <select>
+      <option value="cs1">Case 1</option>
+      <option value="cs2" selected>Case 2</option>
+      <option value="cs3">Case 3</option>
+    </select>
+  </div>
+  <script type="text/javascript">
+    !function () {
+      const Dropdown = window["lib-ui"].Dropdown;
+      console.log(Dropdown);
+
+      Dropdown.resolve(document.querySelector('#dropdown-sample'));
+
+      const drop = new Dropdown({
+        selected: '#ff0',
+        search: true,
+        multiselect: true
+      });
+      drop.source = [
+        { value: '#fff', text: 'White' },
+        { value: '#f00', text: 'Red' },
+        { value: '#0f0', text: 'Green' },
+        { value: '#00f', text: 'Blue' },
+        { value: '#ff0', text: 'Yellow' },
+        { value: '#0ff', text: 'Cyan' },
+        { value: '#f0f', text: 'Magenta' },
+      ];
+      drop.source.forEach(it => {
+        const span = document.createElement('span');
+        span.className = 'drop-item';
+        span.style.setProperty('--color', it.value);
+        span.innerText = it.text;
+        it.html = span;
+      });
+      document.querySelector("#dropdown-sample").appendChild(drop.create());
+    }();
+  </script>
+  <style type="text/css">
+    #dropdown-sample {
+      display: flex;
+    }
+
+    #dropdown-sample > .dropdown-wrapper {
+      width: 200px;
+      margin-right: 10px;
+    }
+
+    .drop-item {
+      font-size: .75rem !important;
+      padding: 0 0 0 22px !important;
+      position: relative;
+    }
+
+    .drop-item::before {
+      content: '';
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-radius: 6px;
+      top: calc(50% - 6px);
+      left: 6px;
+      background-color: var(--color);
+    }
+  </style>
+</div>