easy select

typescript

by uiwwnw

HTML

<div class="aaa">
  <ul data-id="a">
    <li data-value="1">
      <h2 style="font-size:12px;">01</h2>
    </li>
    <li data-value="2"><span>dasdasd</span>02</li>
    <li data-value="3" disabled>03</li>
    <li data-value="4">04</li>
    <li data-value="5">05</li>
    <li data-value="6">06</li>
    <li data-value="7">07</li>
    <li data-value="8">08</li>
    <li data-value="9">09</li>
    <li data-value="10">10</li>
    <li data-value="11">11</li>
  </ul>
</div>
<div class="bbb">
  <ul data-id="b">
    <li data-value="1" checked>
      <h2 style="font-size:12px;">01</h2>
    </li>
    <li data-value="2" checked><span>dasdasd</span>02</li>
    <li data-value="3" checked>03</li>
    <li data-value="4" checked>04</li>
    <li data-value="5" checked>05</li>
    <li data-value="6" checked>06</li>
    <li data-value="7">07</li>
    <li data-value="8">08</li>
    <li data-value="9">09</li>
    <li data-value="10">10</li>
    <li data-value="11">11</li>
    <li data-value="12">12</li>
  </ul>
</div>

SCSS

.ui-select {
  z-index: 1000;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 0 0 3px 3px;
  border-top: 0;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
  background: #fff;

  &.searching {
    > ul > li {
      display: none;

      &[tabindex] {
        display: block;
      }
    }
  }

  &--button {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 0 30px 0 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    font-size: 16px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    background: 0;
    &:empty {
      &:after {
        position: static;
        opacity: .5;
        font-size: 12px;
        content: attr(title);
      }
    }
    &.open {
      border-bottom: 0;
      border-radius: 3px 3px 0 0;

      &:before {
        border-top-width: 0;
        border-bottom-width: 8px;
      }

      &:after {
        z-index: 999;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
      }
    }

    &:before {
      position: absolute;
      right: 10px;
      top: 50%;
      width: 0;
      height: 0;
      margin-top: -4px;
      border-top: 8px solid #333;
      border-bottom: 0 solid #333;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      transition: border .4s;
      content: '';
    }
  }

  &--flag {
    display: inline-block;
    margin: 3px;
    padding: 2px;
    font-size: 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    background: 0;
  }

  &--tag {
    border-radius: 3px;
    border: 1px solid #ddd;
    background: 0;
  }

  > .search-bar {
    display: block;
    width: calc(100% - 10px);
    height: 30px;
    margin: 5px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid...

TypeScript

/*
 MIT License. 
 easy-select v1.0.25
 author: uiwwsw
 homepage:https://github.com/uiwwsw/easy-select#readme
 */ "use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),t}var _EasySelect=function(){function n(t,e,i){_classCallCheck(this,n),this.element=t,this.commonArgs=e,i&&this.element.querySelector("ul").setAttribute("data-id",i),this.whenStart(),this.update()}return _createClass(n,[{key:"trim",value:function(t){return t.replace(/(^\s*)|(\s*$)/,"")}},{key:"setValue",value:function(t){if(t="object"===_typeof(t)?t:[t],!0!==this.valid(t))return!1;this.value=t,this.setLabel(),this.whenChange()}},{key:"_setValue",value:function(t){t="object"===_typeof(t)?t:[t],this.value=t,this.setLabel(),this.whenChange()}},{key:"getValue",value:function(){return 1===this.value.length?this.value[0]:this.value}},{key:"update",value:function(){this.options=this.element.querySelectorAll(" ul[data-id] > li"),this.map=new Map,this.value=this.value?this.value:[];var t=!0,e=!1,i=void 0;try{for(var n,o=this.options[Symbol.iterator]();!(t=(n=o.next()).done);t=!0){var...