ui: new autocomplete components (#190)

packages/ui-default/components/autocomplete/autocomplete.page.styl

@@ -1,11 +1,112 @@
-.drop-element.autocomplete
-  max-width: rem(250px)
+.autocomplete-dummy
+  display: none !important
 
-  .empty-row
-    color: $autocomplete-empty-row-color
-    font-size: $(font-size-small)
-    padding: rem(10px)
+.autocomplete-wrapper
+  width: 300px
+  border: 1px solid #d9d9d9
+  background-color: #fff
+  padding: 1px
+  display: flex
+  flex-wrap: wrap
+  overflow-y: auto
 
-  .menu
-    max-height: rem(250px)
-    overflow: auto
+  &:hover
+    border-color: #40a9ff
+
+  &.focused
+    border-color: #40a9ff
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2)
+
+  input
+    background-color: #fff
+    color: rgba(0,0,0,.85)
+    height: 30px
+    box-sizing: border-box
+    padding: 4px 6px
+    width: 0
+    min-width: 30px
+    flex-grow: 1
+    border: 0
+    margin: 0
+    outline: 0
+
+.autocomplete-tag
+  display: flex
+  align-items: center
+  height: 24px
+  margin: 2px
+  line-height: 22px
+  background-color: #fafafa
+  border: 1px solid #e8e8e8
+  border-radius: 2px
+  box-sizing: content-box
+  padding: 0 4px 0 10px
+  outline: 0
+  overflow: hidden
+
+  &:focus
+    border-color: #40a9ff
+    background-color: #e6f7ff
+
+  &>div
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+
+  &>svg
+    font-size: 12px
+    cursor: pointer
+    padding: 4px
+
+.autocomplete-list
+  min-width: 300px
+  margin: 2px 0 0
+  padding: 0
+  position: absolute
+  list-style: none
+  background-color: #fff
+  overflow: auto
+  max-height: 500px
+  border-radius: 4px
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
+  z-index: 1
+
+  li
+    padding: 5px 12px
+    display: flex
+
+    &>div
+      flex-grow: 1
+
+    &>svg
+      color: transparent
+
+    &[aria-selected='true']
+      background-color: #fafafa
+      font-weight: 600
+
+      svg
+        color: #1890ff
+
+    &[data-focus='true']
+      background-color: #e6f7ff
+      cursor: pointer
+
+      svg
+        color: currentColor
+
+svg.autocomplete-icon
+    -webkit-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+    width: 1em
+    height: 1em
+    display: inline-block
+    fill: currentColor
+    -webkit-flex-shrink: 0
+    -ms-flex-negative: 0
+    flex-shrink: 0
+    -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
+    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
+    font-size: 1.25rem