beyond-rails 0.0.231 → 0.0.236

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 776e10e5717c1ba85ad7924f5dd0e177a8e3814d849798574d2feff163b34dfe
-  data.tar.gz: 12f8e4062b55a088d827946dfaa7fc379065faa8290586a778d3073ef7288638
+  metadata.gz: d18db8c043fc4f94860e382889c2d130fc78d7d607643fe5454a7d0f5f9fc71c
+  data.tar.gz: c2bc9f9b12837e0df45d321949278433516a4716c7a458d1ef46597de546bd34
 SHA512:
-  metadata.gz: ddbb71238f923642fd41e4bdd195051b26c55c4f7f20a4ea6c3af1d27904f1704405b7e540c85b5f24c24d0ecf5ab96ad810b8e7f44c3af06c204dcfaca734cb
-  data.tar.gz: c990592736a42d15e7f07bb5f0e745963de9b1bf134f4a32ab9cbf1951d01e7bd4334d76f6ac5eae698416ae434a03c358d1a4946fd5392181a92891996c154d
+  metadata.gz: 35c60a7cbc639d1df874dee90d9d55d90f1b91e7691aeb2e5a39dff63cda835a382df3bab86ae817415aad0198d3c6674b6753fea97d1a8f6f818317a95482df
+  data.tar.gz: 8b040af8e540ced1356f09b8e8a5e35782ee989eb1aa029a25733bbe4a38ea1bb9b6592f194ab8477836d39e0c66bb1d0c3ab28190437d7ba636abd191bc6ce0

data/src/js/components/BarChart.js

@@ -342,8 +342,11 @@ export default class BarChart {
   refresh() {
     this.raf(() => {
       this.clearBarPos()
+      this.clearCanvasSize(this.canvas)
+      this.layers.forEach(layer => this.clearCanvasSize(layer.canvas))
       this.setDomSizeIfNeeded()
       this.setCanvasSize(this.canvas)
+      this.layers.forEach(layer => this.setCanvasSize(layer.canvas))
       this.setLabelWidths()
       this.setLabelHeights()
       this.setAxisData()

data/src/js/components/LineChart.js

@@ -466,6 +466,8 @@ export default class LineChart {
   refresh() {
     this.raf(() => {
       this.clearPointPos()
+      this.clearCanvasSize(this.canvas)
+      this.layers.forEach(layer => this.clearCanvasSize(layer.canvas))
       this.setDomSizeIfNeeded()
       this.setCanvasSize(this.canvas)
       this.layers.forEach(layer => this.setCanvasSize(layer.canvas))

data/src/js/components/SearchDropdown.js

@@ -20,8 +20,11 @@ export default class SearchDropdown {
     this.options.itemClick = options.itemClick || itemClick
     this.options.change = options.change || noop
     this.options.wait = options.wait || 50
-    this.place = 'bottom'
-    this.align = 'left'
+    this.place = options.place || 'bottom'
+    this.align = options.align || 'left'
+    this.offset = options.offset || 14
+    this.offsetTop = options.offsetTop || 0
+    this.offsetLeft = options.offsetLeft || 0
     this.isMenuVisible = false
     this.lastKeyword = null
     this.selectedIndex = 0
@@ -53,7 +56,16 @@ export default class SearchDropdown {
   }
 
   appendMenu() {
+
     const menu = document.createElement('div')
+    const { dataset } = menu
+
+    dataset.place = this.place
+    dataset.align = this.align
+    dataset.offset = this.offset
+    dataset.offsetTop = this.offsetTop
+    dataset.offsetLeft = this.offsetLeft
+
     menu.className = 'search-dropdown dropdown-menu'
 
     const inputWrap = document.createElement('div')
@@ -100,15 +112,19 @@ export default class SearchDropdown {
   showMenu() {
     const { input, menu } = this
     this.getData(input.value)
+
     menu.style.display = 'block'
     menu.style.opacity = 0
     menu.style.transform = 'scale(.8)'
     document.body.appendChild(menu)
-    this.adjustMenuPos()
-    menu.style.transform = 'scale(1)'
-    menu.style.opacity = 1
-    this.isMenuVisible = true
-    this.input.focus()
+
+    setTimeout(() => {
+      this.adjustMenuPos()
+      menu.style.transform = 'scale(1)'
+      menu.style.opacity = 1
+      this.isMenuVisible = true
+      this.input.focus()
+    }, 0)
   }
 
   toggleMenu() {
@@ -116,22 +132,18 @@ export default class SearchDropdown {
   }
 
   adjustMenuPos() {
-    const { menu, dom } = this
-    const { dataset } = menu
-    const offsetLeft = ('offsetLeft' in dataset) ? parseInt(dataset.offsetLeft, 10) : 0
-    const offsetTop = ('offsetTop' in dataset) ? parseInt(dataset.offsetTop, 10) : 0
-
+    const { menu, dom, offset, offsetLeft, offsetTop } = this
     const { pos, place, align } = getFloatedTargetPos({
       src: dom,
       target: menu,
       place: this.place,
       align: this.align,
-      offset: parseInt(dom.dataset.offset, 10) || 14,
+      offset,
       offsetLeft,
       offsetTop
     })
-    dataset.place = place
-    dataset.align = align
+    menu.dataset.place = place
+    menu.dataset.align = align
     menu.style.left = toPixel(pos.left)
     menu.style.top = toPixel(pos.top)
   }

data/src/js/components/TagInput.js

@@ -1,7 +1,7 @@
+import getKey from '../utils/getKey'
+import noop from '../utils/noop'
 import raf from '../utils/raf'
-import isStr from '../utils/isStr'
 import supportDom from '../decorators/supportDom'
-import getKey from '../utils/getKey'
 
 @supportDom
 export default class TagInput {
@@ -10,7 +10,8 @@ export default class TagInput {
     this.dom = dom
     this.defaultInputWidth = 128
     this.validate = options.validate || (() => ({ isTag: true }))
-    this.change = options.change || (() => {})
+    this.suggest = options.suggest || noop
+    this.change = options.change || noop
     this.isComposing = false
     this.raf = raf
     this.tags = []
@@ -23,12 +24,29 @@ export default class TagInput {
   }
 
   setup() {
+    const { defaultInputWidth } = this
+    const inputDiv = document.createElement('div')
+    inputDiv.className = 'tag-input-box'
+
+    const suggestInput = document.createElement('input')
+    suggestInput.type = 'text'
+    suggestInput.style.width = defaultInputWidth + 'px'
+    suggestInput.className = 'tag-suggest-input'
+
     const input = document.createElement('input')
     input.type = 'text'
-    input.style.width = this.defaultInputWidth + 'px'
+    input.style.width = defaultInputWidth + 'px'
+    input.className = 'tag-main-input'
+
+    inputDiv.appendChild(input)
+    inputDiv.appendChild(suggestInput)
+
     this.input = input
+    this.suggestInput = suggestInput
     this.canvas = document.createElement('canvas')
-    this.dom.append(input)
+    this.inputDiv = inputDiv
+
+    this.dom.append(inputDiv)
   }
 
   getTextWidth(text, font) {
@@ -56,13 +74,7 @@ export default class TagInput {
     }, 500)
   }
 
-  async addTagIfNeeded(value) {
-    const { input } = this
-    const inputValue = input.value
-    const res = await this.validate(inputValue)
-    if (! res.isTag) {
-      return this.shake()
-    }
+  addTag(inputValue, res) {
     const classname = res.classname ? ` ${res.classname}` : ''
     const tag = document.createElement('div')
 
@@ -84,8 +96,20 @@ export default class TagInput {
     tag.appendChild(btn)
 
     this.tags.push({ elem: tag, remove: handleBtnClick, res })
-    this.dom.insertBefore(tag, input)
+    this.dom.insertBefore(tag, this.inputDiv)
+  }
+
+  async addTagIfNeeded() {
+    const { input, suggestInput } = this
+    const inputValue = suggestInput.value || input.value
+    const res = await this.validate(inputValue)
+    if (! res.isTag) {
+      return this.shake()
+    }
+    this.addTag(inputValue, res)
+
     input.value = ''
+    suggestInput.value = ''
 
     this.change(this.tags.slice())
   }
@@ -121,7 +145,7 @@ export default class TagInput {
     this.addEvent(input, 'keydown', async event => {
       const key = getKey(event)
       if ((key === 'enter') && (! this.isComposing)) {
-        await this.addTagIfNeeded(input.value)
+        await this.addTagIfNeeded()
       }
       else if ((key === 'backspace') && (lastValue === '')) {
         this.removeTagIfNeeded()
@@ -130,6 +154,7 @@ export default class TagInput {
     })
 
     this.addEvent(input, 'input', event => {
+      this.suggestInputIfNeeded(input.value)
       this.raf(() => {
         const textWidth = this.getTextWidth(input.value, font)
         const nextWidth = this.getNextInputWidth(textWidth)
@@ -138,8 +163,21 @@ export default class TagInput {
     })
   }
 
+  async suggestInputIfNeeded(value) {
+    const suggestValue = await this.suggest(value)
+    this.raf(() => {
+      if (this.input.value === value) {
+        this.suggestInput.value = (suggestValue || '')
+      }
+    })
+  }
+
   destroy() {
     this.tags.forEach(tag => tag.remove())
-    this.input.remove()
+    this.inputDiv.remove()
+    this.canvas = null
+    this.input = null
+    this.suggestInput = null
+    this.inputDiv = null
   }
 }

data/src/js/decorators/chartCommon.js

@@ -203,6 +203,13 @@ export default function chartCommon(target) {
       canvas.getContext('2d').scale(dpr, dpr)
     }
 
+    clearCanvasSize(canvas) {
+      canvas.width = 0
+      canvas.height = 0
+      canvas.style.width = 0
+      canvas.style.height = 0
+    }
+
     setDomSizeIfNeeded() {
       if (isUndef(this.options.width)) {
         this.width = this.dom.offsetWidth

data/src/js/utils/noop.js

@@ -0,0 +1,2 @@
+export default function noop() {
+}

data/src/sass/_main.scss

@@ -153,6 +153,10 @@ $color-active: #5469d4;
   border: 0;
 }
 
+.full-width {
+  width: 100% !important;
+}
+
 hr {
   margin-top: 20px;
   margin-bottom: 20px;

data/src/sass/components/_search-dropdown.scss

@@ -1,4 +1,5 @@
 .search-dropdown.dropdown-menu {
+  width: 420px;
   padding: 0;
   .search-dropdown-input-wrap {
     padding: 14px;
@@ -26,8 +27,5 @@
       color: #6772e5;
       margin-right: .7em;
     }
-    > span {
-      max-width: 420px;
-    }
   }
 }

data/src/sass/components/_tag-input.scss

@@ -3,10 +3,24 @@
   background-color: #fff;
   padding: .4em .4em 0 .4em;
   min-height: 40px;
-  > input {
-    border: 0;
-    &:focus {
-      outline: none;
+
+  .tag-suggest-input {
+    color: rgba(60, 66, 87, .41);
+  }
+
+  .tag-main-input {
+    position: absolute;
+    background-color: transparent;
+  }
+
+  .tag-input-box {
+    display: inline-block;
+    position: relative;
+    > input {
+      border: 0;
+      &:focus {
+        outline: none;
+      }
     }
   }
   .tag {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.231
+  version: 0.0.236
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-13 00:00:00.000000000 Z
+date: 2020-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -199,6 +199,7 @@ files:
 - src/js/utils/isTouchDevice.js
 - src/js/utils/isUndef.js
 - src/js/utils/msToS.js
+- src/js/utils/noop.js
 - src/js/utils/promisify.js
 - src/js/utils/raf.js
 - src/js/utils/unbindAll.js