beyond-rails 0.0.232 → 0.0.237

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b9562fcd46c8ebb8eb393ebbde56ddc3ace49fc91dc072c864586b7efa9c7f7
-  data.tar.gz: 5e2ff6d2ad3c8f5df2eb4a3ee3ec81dd2edcd50149a3e957d8dba12ad4ac6077
+  metadata.gz: adbb95db12425b98f0284cfcc9cef65c0034a927658bf3e730478387ba25822e
+  data.tar.gz: b3037f00f20178cda7ac995bbc37d87483a79dc6d34f8b0574e149d40a485085
 SHA512:
-  metadata.gz: 2d856bb1e158d85d71618b26d0cde2d5bab43a9cdad0cc27f4175b400bcb19ab47274609b9b5b6e6e22c7664db7aeb035b6b7db9b91ffb84e915ddfd761d1838
-  data.tar.gz: 4205d83e358f13508a52f1ed92b41aef10bf684fcc9f86ce3bb0543dc4393ee838c9dfe6ba679dc1ec5f269768a6f9f6d352d7e523ba9dd09d14d449df1b8358
+  metadata.gz: 498139b642aee1c76d4761b64a0ac14a02b60117be1a54daf66a00cd207de1e6df1e1aa3a4eda946e5c7fe29cba4d2eea07fb0a41301319ae4adad60828c2256
+  data.tar.gz: a39287a38305fa8b558e4b833a4935a7c4ae55a9a305aecb6167871fe892f52828a750dd1130d9b2e743b96ce56bdcbaddc4deab7b8e16e1dc4107784e5bfd6c

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/TagInput.js

@@ -1,6 +1,7 @@
+import getKey from '../utils/getKey'
+import noop from '../utils/noop'
 import raf from '../utils/raf'
 import supportDom from '../decorators/supportDom'
-import getKey from '../utils/getKey'
 
 @supportDom
 export default class TagInput {
@@ -9,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 = []
@@ -22,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) {
@@ -55,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')
 
@@ -83,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())
   }
@@ -120,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()
@@ -129,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)
@@ -137,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/dom.js

@@ -5,7 +5,17 @@ const unloadRows = []
 const onPage = row => {
   const { controller, action } = row
   const { dataset } = document.body
-  return (dataset.controller === controller) && (dataset.action === action)
+
+  let controllerMatched = (dataset.controller === controller)
+  let actionMatched = (dataset.action === action)
+
+  if (controller === '*') {
+    controllerMatched = true
+  }
+  if (action === '*') {
+    actionMatched = true
+  }
+  return controllerMatched && actionMatched
 }
 
 export const $ = (selector, dom = document) => dom.querySelector(selector)

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/_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.232
+  version: 0.0.237
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-23 00:00:00.000000000 Z
+date: 2020-11-06 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