beyond-rails 0.0.233 → 0.0.238

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89c9f25010a6deb7c07fd392f5ba12feeaefb1a46fe0d8b72ba48c4bc5b431d4
-  data.tar.gz: eb9ca399dce141a787cbc0848eabdce20062b0cda24877935b3fc91527177c21
+  metadata.gz: d6f31382aa19dc9e597d9142844819d5979a31e79e211662c03b57f5695656d0
+  data.tar.gz: e86efab321917174dd1b4e2d89f4d0b8c8b90ca5b9e1440fc4d49b59bd6a41e2
 SHA512:
-  metadata.gz: f016a0df26bf377aa5cbeea5b6ac9696b3a20b2e5817faff4c4193263bcdb4e0c167a93197fa16a08db64e54779bf63de780c729fb4c94a88d681331c3aa660d
-  data.tar.gz: 4bb6585874c2bd701aec8ba3851b85c61b1deba91eaabb3ccc90e1657be7ce51f09dd7093d288d4da26be39c1226bf4a34769cbb47d7184ef6a352bd80c93ac5
+  metadata.gz: cdad3b285c7a2e05e7af766929d9670c6d0233149055e8cfd4d2d524935584c41a02f45289c944f0714b24f81d32166de5d17373ea6df520cc3d593c6259c935
+  data.tar.gz: e1d9d6afec1abe4ec7c5f6cd1350baa9dff1004d62e352705aad5b7ac2f764018a83ac67f34d5b075a9e0fe595b71dc4ac469e1d93eda215ee3974394b28583b

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/components/_modal.scss

@@ -20,8 +20,22 @@
     background-color: #fff;
     margin: 20px auto 0;
     max-width: 600px;
+    &.modal-sm {
+      max-width: 400px;
+    }
+    &.modal-lg {
+      max-width: 900px;
+    }
+    &.modal-xl {
+      max-width: 1140px;
+    }
     @media (max-width: $screen-sm) {
       max-width: 90%;
+      &.modal-sm,
+      &.modal-lg,
+      &.modal-xl {
+        max-width: 90%;
+      }
     }
   }
   &.js-active {

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.233
+  version: 0.0.238
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-28 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