add dropdown document

2023-04-01 14:02:11 +08:00 · 2023-04-01 14:02:11 +08:00 · c3a9fa7ba3
commit c3a9fa7ba3
parent 067d6252b2
7 changed files with 283 additions and 124 deletions
--- a/css/dropdown.scss
+++ b/css/dropdown.scss
@ -26,9 +26,10 @@ $listMaxHeight: 210px;
        background-color: $bgColor;
        display: flex;
        height: $headerHeight;
-        transition: all .3s;
+        transition: border-color .2s;

-        &:focus {
+        &:focus,
+        &:hover {
            border-color: $focusColor;
            // box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
        }
@ -62,7 +63,7 @@ $listMaxHeight: 210px;
                height: 20px;
                line-height: 20px;
                background-color: white;
-                font-size: .75rem;
+                font-size: $tinySize;
                border-radius: $borderRadius;
                cursor: pointer;
                position: relative;
@ -98,7 +99,7 @@ $listMaxHeight: 210px;
                line-height: $headerHeight;
                padding: 0 4px;
                font-weight: 400;
-                font-size: .8125rem;
+                font-size: $smallSize;
                color: $foreColor;
            }
        }*/
@ -106,7 +107,7 @@ $listMaxHeight: 210px;
        >.dropdown-text {
            flex: 1 1 auto;
            cursor: pointer;
-            font-size: .875rem;
+            font-size: $mediumSize;
            line-height: $headerHeight;
            padding: 0 6px;
            overflow: hidden;
@ -116,6 +117,15 @@ $listMaxHeight: 210px;
            white-space: nowrap;
        }

+        >input.dropdown-text {
+            cursor: initial;
+
+            &::placeholder {
+                font-size: $smallSize;
+                font-style: italic;
+            }
+        }
+
        >.dropdown-caret {
            flex: 0 0 auto;
            width: $caretWidth;
@ -173,6 +183,8 @@ $listMaxHeight: 210px;
            /*border-top-width: 1px;
            border-bottom-width: 0;*/
            transform-origin: bottom;
+            top: unset;
+            bottom: calc($headerHeight + 2px);
        }

        &.active {
@ -199,7 +211,7 @@ $listMaxHeight: 210px;
                border-radius: $borderRadius;
                padding: 0 6px 0 22px;
                color: $foreColor;
-                transition: all .3s;
+                transition: border-color .2s;

                &:hover,
                &:focus {
@ -209,6 +221,10 @@ $listMaxHeight: 210px;
                // &:focus {
                //     box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
                // }
+
+                &::placeholder {
+                    font-style: italic;
+                }
            }

            >svg {
@ -226,7 +242,7 @@ $listMaxHeight: 210px;
            list-style: none;
            max-height: $listMaxHeight;
            overflow-y: auto;
-            font-size: .875rem;
+            font-size: $mediumSize;
            @include scrollbar();

            &.filtered>li:first-child {
--- a/css/variables/definition.scss
+++ b/css/variables/definition.scss
@ -10,3 +10,4 @@ $foreColor: #201f1e;
 // dimension
 $mediumSize: .875rem; // 14px
 $smallSize: .8125rem; // 13px
+$tinySize: .75rem; // 12px
--- a/lib/ui/checkbox.html
+++ b/lib/ui/checkbox.html
@ -80,13 +80,18 @@
  <hr />
  <h2>示例</h2>
  <pre>&lt;div id="checkbox-sample"&gt;
+  &lt;!-- 1 --&gt;
  &lt;label data-checkbox data-type="fa-light" data-label="Checkbox Light"&gt;&lt;/label&gt;
+  &lt;!-- 2 --&gt;
  &lt;label data-checkbox data-checked data-label="Checkbox Regular"&gt;&lt;/label&gt;
+  &lt;!-- 3 --&gt;
  &lt;label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"&gt;&lt;/label&gt;
+  &lt;!-- 4 --&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;!-- 5 --&gt;
  &lt;input id="check-status" type="checkbox"/&gt;
  &lt;label for="check-status"&gt;Label for Status&lt;/label&gt;
 &lt;/div&gt;
--- a/lib/ui/dropdown.d.ts
+++ b/lib/ui/dropdown.d.ts
@ -10,34 +10,35 @@ interface DropdownOptions {
    htmlkey?: string;
    maxlength?: Number;
    multiselect?: boolean;
-    selected?: DropdownItem | any;
-    selectedlist?: Array<DropdownItem | any>;
+    selected?: string;
+    selectedlist?: Array<string>;
    disabled?: boolean;
    input?: boolean;
    search?: boolean;
    searchkeys?: Array<string>;
    searchplaceholder?: string;
    tabindex?: Number;
+    placeholder?: string;
    slidefixed?: boolean;
-    parent?: HTMLElement
+    parent?: HTMLElement;
 }

 interface Dropdown {
    sourceFilter: () => Array<DropdownItem | any>;
-    onselectedlist: (list: Array<DropdownItem | any>) => void;
    onselected: (item: DropdownItem | any) => void;
+    onselectedlist: (list: Array<DropdownItem | any>) => void;
    onexpanded: () => void;

-    create(): HTMLElement;
-    readonly multiselect: boolean;
    get disabled(): boolean;
    set disabled(flag: boolean);
    get source(): Array<DropdownItem | any>;
    set source(list: Array<DropdownItem | any>): void;
+    readonly multiselect: boolean;
    readonly selected: DropdownItem | any;
    readonly selectedlist: Array<DropdownItem | any>;
-    select(selected: DropdownItem | any, init?: boolean): void;
-    selectlist(selectedlist: Array<DropdownItem | any>, init?: boolean): void;
+    create(): HTMLElement;
+    select(selected: string, silence?: boolean): void;
+    selectlist(selectedlist: Array<string>, silence?: boolean): void;
 }

 declare var Dropdown: {
--- a/lib/ui/dropdown.html
+++ b/lib/ui/dropdown.html
@ -4,88 +4,235 @@
  <p>
    创建一个统一样式的下拉输入、选择框元素，或者解析转换页面上的 select 标签为该元素。
  </p>
-  <!-- <h2>createCheckbox</h2>
-  <code>function createCheckbox(opts?: CheckboxOptions): HTMLElement</code>
-  <h3>opts?: CheckboxOptions</h3>
+  <h2>constructor</h2>
+  <code>new(options?: DropdownOptions): Dropdown</code>
+  <h3>options?: DropdownOptions</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>interface DropdownOptions {
+    textkey?: string;
+    valuekey?: string;
+    htmlkey?: string;
+    maxlength?: Number;
+    multiselect?: boolean;
+    selected?: string;
+    selectedlist?: Array&lt;DropdownItem | any&gt;;
+    disabled?: boolean;
+    input?: boolean;
+    search?: boolean;
+    searchkeys?: Array&lt;string&gt;;
+    searchplaceholder?: string;
+    tabindex?: Number;
+    placeholder?: string;
+    slidefixed?: boolean;
+    parent?: HTMLElement;
 }</pre>
  </p>
-  <h3>type?: string</h3>
+  <h3>textkey?: string</h3>
  <p>
-    复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
+    数据源中用以显示的属性，默认为 <code>text</code>
  </p>
-  <h3>label?: string | HTMLElement</h3>
+  <h3>valuekey?: string</h3>
  <p>
-    复选框的标签文本，或者想要呈现的元素
+    数据源中作为值的属性，默认为 <code>value</code>
  </p>
-  <h3>checked?: boolean</h3>
+  <h3>htmlkey?: string</h3>
  <p>
-    初始是否选中
+    数据源中用来以 html 方式呈现的属性，默认为 <code>html</code>
  </p>
-  <h3>isImage?: boolean</h3>
+  <h3>maxlength?: Number</h3>
  <p>
-    是否为图片复选框
+    作为输入类型时的最大允许字符数，默认为 500
  </p>
-  <h3>imageHeight?: Number</h3>
+  <h3>multiselect?: boolean</h3>
  <p>
-    为图片复选框时的图片限制高度
+    是否允许多选，仅在选择类型下有效
  </p>
-  <h3>checkedNode?: HTMLElement</h3>
+  <h3>selected?: string</h3>
  <p>
-    为图片复选框时的选中时显示的元素
+    默认选中的项目的值
  </p>
-  <h3>uncheckedNode?: HTMLElement</h3>
+  <h3>selectedlist?: Array&lt;DropdownItem | any&gt;</h3>
  <p>
-    为图片复选框时的未选中时显示的元素
+    多选时默认选中的项目的值的列表
  </p>
-  <h3>customerAttributes?: { [key: string]: string }</h3>
+  <h3>disabled?: boolean</h3>
  <p>
-    自定义属性，例如
-    <pre>{
-    'data-id': 'xxxxxx',
-    'disabled': ''
-}</pre>
+    初始化时下拉框是否禁用
  </p>
-  <h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3>
+  <h3>input?: boolean</h3>
  <p>
-    复选框改变时触发的事件
+    是否为输入类型
  </p>
-  <h2>resolveCheckbox</h2>
-  <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
-  <h3>container?: HTMLElement</h3>
+  <h3>search?: boolean</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>
+  <h3>searchkeys?: Array&lt;string&gt;</h3>
  <p>
-    是否开启兼容模式，启用兼容模式时将试图匹配 <code>input[type="checkbox"]</code> 标签，与其周围的 label，将其转换为统一样式的复选框。
+    搜索时搜索的数据源属性的列表，默认为 <code>[valuekey]</code>
  </p>
-  <hr /> -->
+  <h3>searchplaceholder?: string</h3>
+  <p>
+    搜索输入框的占位字符串
+  </p>
+  <h3>tabindex?: Number</h3>
+  <p>
+    下拉框的焦点顺序
+  </p>
+  <h3>placeholder?: string</h3>
+  <p>
+    作为输入类型时，输入框的占位字符串
+  </p>
+  <h3>slidefixed?: boolean</h3>
+  <p>
+    下拉方向是否固定为下
+  </p>
+  <h3>parent?: HTMLElement</h3>
+  <p>
+    下拉列表呈现的父容器，默认为 <code>document.body</code>
+  </p>
+  <h2>Dropdown.resolve</h2>
+  <code>static resolve(dom?: HTMLElement): HTMLElement</code>
+  <h3>dom?: HTMLElement</h3>
+  <p>
+    将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>select</code> 元素解析为统一样式的下拉框
+  </p>
+  <hr />
+  <h2>sourceFilter</h2>
+  <code>sourceFilter: () => Array&lt;DropdownItem | any&gt;</code>
+  <p>
+    数据源代理，返回用以呈现在下拉列表中的数据源
+  </p>
+  <h2>onselected</h2>
+  <code>onselected: (item: DropdownItem | any) => void</code>
+  <h3>item: DropdownItem | any</h3>
+  <p>
+    选中项发生改变时触发该事件，参数为选中的项
+  </p>
+  <h2>onselectedlist</h2>
+  <code>onselectedlist: (list: Array&lt;DropdownItem | any&gt;) => void</code>
+  <h3>list: Array&lt;DropdownItem | any&gt;</h3>
+  <p>
+    多选时选中列表发生改变时触发该事件，参数为选中的列表
+  </p>
+  <h2>onexpanded</h2>
+  <code>onexpanded: () => void</code>
+  <p>
+    下拉列表展开时触发该事件，一般用来异步获取服务器数据，填充至数据源
+  </p>
+  <hr />
+  <h2>disabled</h2>
+  <code>property disabled(): boolean</code>
+  <p>
+    获取或设置下拉框是否禁用
+  </p>
+  <h2>source</h2>
+  <code>property source(): Array&lt;DropdownItem | any&gt;</code>
+  <p>
+    获取或设置下拉框数据源
+  </p>
+  <h2>multiselect</h2>
+  <code>readonly multiselect: boolean</code>
+  <p>
+    获取下拉框是否支持多选
+  </p>
+  <h2>selected</h2>
+  <code>readonly selected: DropdownItem | any</code>
+  <p>
+    获取下拉框当前选中项
+  </p>
+  <h2>selectedlist</h2>
+  <code>readonly selectedlist: Array&lt;DropdownItem | any&gt;</code>
+  <p>
+    获取下拉框当前选中的列表
+  </p>
+  <hr />
+  <h2>create</h2>
+  <code>create(): HTMLElement</code>
+  <p>
+    创建下拉列表，返回一个 HTML 元素
+  </p>
+  <h2>select</h2>
+  <code>select(selected: string, silence?: boolean): void</code>
+  <h3>selected: string</h3>
+  <p>
+    修改下拉框的选中项为参数值对应的项
+  </p>
+  <h3>silence?: boolean</h3>
+  <p>
+    是否静默修改，为 true 时不触发 <code>onselected</code> 事件
+  </p>
+  <h2>selectlist</h2>
+  <code>selectlist(selectedlist: Array&lt;string&gt;, silence?: boolean): void</code>
+  <h3>selectedlist: Array&lt;string&gt;</h3>
+  <p>
+    修改下拉框的选中列表为参数值列表对应的项的列表
+  </p>
+  <h3>silence?: boolean</h3>
+  <p>
+    是否静默修改，为 true 时不触发 <code>onselectedlist</code> 事件
+  </p>
+  <hr />
  <h2>示例</h2>
-  <pre></pre>
-  <div id="dropdown-sample">
+  <pre>&lt;div id="dropdown-sample"&gt;
+  &lt;select&gt;
+    &lt;option value="cs1"&gt;Case 1&lt;/option&gt;
+    &lt;option value="cs2" selected&gt;Case 2&lt;/option&gt;
+    &lt;option value="cs3"&gt;Case 3&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  const Dropdown = window["lib-ui"].Dropdown;
+  const sample = document.querySelector('#dropdown-sample');
+
+  // 解析 select 元素
+  Dropdown.resolve(sample);
+
+  // 创建简易输入类型下拉框
+  let drop = new Dropdown({
+    input: true,
+    // selected: 'standby',
+    placeholder: 'asset status',
+    slidefixed: true
+  });
+  drop.source = ['off', 'running', 'standby', 'broken']
+    .map(it => { return { value: it, text: it } });
+  sample.appendChild(drop.create());
+
+  // 创建自定义显示元素的下拉框
+  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;
+  });
+  sample.appendChild(drop.create());
+&lt;/script&gt;</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>
+  <div style="height: 80px"></div>
  <script type="text/javascript">
    !function () {
      const Dropdown = window["lib-ui"].Dropdown;
@ -95,7 +242,9 @@

      let drop = new Dropdown({
        input: true,
-        selected: 'standby'
+        // selected: 'standby',
+        placeholder: 'asset status',
+        slidefixed: true
      });
      drop.source = ['off', 'running', 'standby', 'broken']
        .map(it => { return { value: it, text: it } });
@ -104,7 +253,7 @@
      drop = new Dropdown({
        selected: '#ff0',
        search: true,
-        multiselect: true
+        // multiselect: true
      });
      drop.source = [
        { value: '#fff', text: 'White' },
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@ -62,6 +62,23 @@ function selectItems(label, itemlist, htmlkey, textkey) {
    }
 }

+function filterSource(searchkeys, textkey, key, source) {
+    if (!Array.isArray(searchkeys) || searchkeys.length === 0) {
+        searchkeys = [textkey];
+    }
+    if (key.length > 0) {
+        source = source.filter(it => {
+            for (let k of searchkeys) {
+                if (contains(it[k].toLowerCase(), key)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+    return source;
+}
+
 class Dropdown {
    #options;

@ -120,29 +137,16 @@ class Dropdown {

        // label or input
        let label;
-        let searchkeys = options.searchkeys;
-        if (!Array.isArray(searchkeys) || searchkeys.length === 0) {
-            searchkeys = [options.textkey];
-        }
        if (options.input) {
            label = document.createElement('input');
            label.className = 'dropdown-text';
            label.setAttribute('type', 'text');
+            options.placeholder && label.setAttribute('placeholder', options.placeholder);
            isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
            isPositive(options.tabindex) && label.setAttribute('tabindex', options.tabindex);
            label.addEventListener('input', e => {
                const key = e.target.value.toLowerCase();
-                let source = this.source;
-                if (key.length > 0) {
-                    source = source.filter(it => {
-                        for (let k of searchkeys) {
-                            if (contains(it[k].toLowerCase(), key)) {
-                                return true;
-                            }
-                        }
-                        return false;
-                    });
-                }
+                const source = filterSource(options.searchkeys, options.textkey, key, this.source);
                this.#filllist(source);
                this.#container.classList.add('active');
            });
@ -217,7 +221,7 @@ class Dropdown {

    get selectedlist() { return this.#selectedList || [] }

-    select(selected, init) {
+    select(selected, silence) {
        if (this.#lastSelected === selected) {
            return false;
        }
@ -250,12 +254,12 @@ class Dropdown {
            }
        }
        this.#selected = item;
-        if (!init && typeof this.onselected === 'function') {
+        if (!silence && typeof this.onselected === 'function') {
            this.onselected(item);
        }
    }

-    selectlist(selectedlist, init) {
+    selectlist(selectedlist, silence) {
        const source = this.source;
        const valuekey = this.#options.valuekey;
        const textkey = this.#options.textkey;
@ -276,7 +280,7 @@ class Dropdown {
        }
        selectItems(this.#label, itemlist, htmlkey, textkey);
        this.#selectedList = itemlist;
-        if (!init && typeof this.onselectedlist === 'function') {
+        if (!silence && typeof this.onselectedlist === 'function') {
            this.onselectedlist(itemlist);
        }
    }
@ -293,10 +297,6 @@ class Dropdown {
            panel.className = 'dropdown-panel';
            // search box
            if (!options.input && options.search) {
-                let searchkeys = options.searchkeys;
-                if (!Array.isArray(searchkeys) || searchkeys.length === 0) {
-                    searchkeys = [textkey];
-                }
                const search = document.createElement('div');
                search.className = 'dropdown-search';
                const input = document.createElement('input');
@ -305,17 +305,7 @@ class Dropdown {
                !nullOrEmpty(options.searchplaceholder) && input.setAttribute('placeholder', options.searchplaceholder);
                input.addEventListener('input', e => {
                    const key = e.target.value.toLowerCase();
-                    let source = this.source;
-                    if (key.length > 0) {
-                        source = source.filter(it => {
-                            for (let k of searchkeys) {
-                                if (contains(it[k].toLowerCase(), key)) {
-                                    return true;
-                                }
-                            }
-                            return false;
-                        });
-                    }
+                    const source = filterSource(options.searchkeys, options.textkey, key, this.source);
                    this.#filllist(source);
                })
                search.appendChild(input);
@ -345,32 +335,29 @@ class Dropdown {
            this.#wrapper.appendChild(panel);
        }
        if (flag) {
+            let source = this.source;
+            if (!options.input && options.search) {
+                const search = panel.querySelector('.dropdown-search > input');
+                if (!nullOrEmpty(search?.value)) {
+                    source = filterSource(options.searchkeys, options.textkey, search.value, source);
+                }
+            }
+            this.#filllist(source);
+            // slide direction
            if (!options.slidefixed) {
                let parent = options.parent ?? document.body;
-                const height = panel.offsetHeight;
-                if (this.#wrapper.offsetTop - parent.offsetTop + DropdownTitleHeight + height >= parent.offsetHeight) {
-                    panel.style.marginTop = -height - DropdownTitleHeight - 2;
+                let p = this.#wrapper;
+                let top = p.offsetTop;
+                while ((p = p.parentElement) != null && p !== parent) {
+                    top -= p.scrollTop;
+                }
+                if (top - parent.offsetTop + DropdownTitleHeight + panel.offsetHeight >= parent.offsetHeight) {
                    panel.classList.add('slide-up');
                } else {
-                    panel.style.marginTop = null;
                    panel.classList.remove('slide-up');
                }
            }
            panel.classList.add('active');
-            // search input
-            // const inputSearch = panel.querySelector('.dropdown-search > input');
-            // if (!nullOrEmpty(inputSearch.value)) {
-            //     const event = new InputEvent('type');
-            //     inputSearch.dispatchEvent(event);
-            // }
-            if (!options.input && options.search) {
-                const search = panel.querySelector('.dropdown-search > input');
-                if (!nullOrEmpty(search?.value)) {
-                    search.dispatchEvent(new InputEvent('type'));
-                    return;
-                }
-            }
-            this.#filllist(this.source);
        } else {
            panel.classList.remove('active');
        }
@ -489,15 +476,13 @@ class Dropdown {
        dom ??= document.body;
        const selects = dom.querySelectorAll('select');
        for (let sel of selects) {
-            let selected;
            const source = [...sel.children].map(it => {
-                if (it.selected) {
-                    selected = it.value;
-                }
                return { value: it.value, text: it.innerText }
            });
            const drop = new Dropdown({
-                selected
+                selected: sel.value,
+                disabled: sel.disabled,
+                tabindex: sel.tabIndex
            });
            drop.source = source;
            sel.parentElement.replaceChild(drop.create(), sel);
--- a/lib/ui/tooltip.html
+++ b/lib/ui/tooltip.html
@ -23,9 +23,11 @@
    <hr />
    <h2>示例</h2>
    <pre>&lt;div id="tooltip-sample"&gt;
+  &lt;!-- 1 --&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;
+  &lt;!-- 2 --&gt;
  &lt;button title="Test to send request through XMLHttpRequest."&gt;Test&lt;/button&gt;
 &lt;/div&gt;