beyond-rails 0.0.231 → 0.0.236

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 776e10e5717c1ba85ad7924f5dd0e177a8e3814d849798574d2feff163b34dfe
4
- data.tar.gz: 12f8e4062b55a088d827946dfaa7fc379065faa8290586a778d3073ef7288638
3
+ metadata.gz: d18db8c043fc4f94860e382889c2d130fc78d7d607643fe5454a7d0f5f9fc71c
4
+ data.tar.gz: c2bc9f9b12837e0df45d321949278433516a4716c7a458d1ef46597de546bd34
5
5
  SHA512:
6
- metadata.gz: ddbb71238f923642fd41e4bdd195051b26c55c4f7f20a4ea6c3af1d27904f1704405b7e540c85b5f24c24d0ecf5ab96ad810b8e7f44c3af06c204dcfaca734cb
7
- data.tar.gz: c990592736a42d15e7f07bb5f0e745963de9b1bf134f4a32ab9cbf1951d01e7bd4334d76f6ac5eae698416ae434a03c358d1a4946fd5392181a92891996c154d
6
+ metadata.gz: 35c60a7cbc639d1df874dee90d9d55d90f1b91e7691aeb2e5a39dff63cda835a382df3bab86ae817415aad0198d3c6674b6753fea97d1a8f6f818317a95482df
7
+ data.tar.gz: 8b040af8e540ced1356f09b8e8a5e35782ee989eb1aa029a25733bbe4a38ea1bb9b6592f194ab8477836d39e0c66bb1d0c3ab28190437d7ba636abd191bc6ce0
@@ -342,8 +342,11 @@ export default class BarChart {
342
342
  refresh() {
343
343
  this.raf(() => {
344
344
  this.clearBarPos()
345
+ this.clearCanvasSize(this.canvas)
346
+ this.layers.forEach(layer => this.clearCanvasSize(layer.canvas))
345
347
  this.setDomSizeIfNeeded()
346
348
  this.setCanvasSize(this.canvas)
349
+ this.layers.forEach(layer => this.setCanvasSize(layer.canvas))
347
350
  this.setLabelWidths()
348
351
  this.setLabelHeights()
349
352
  this.setAxisData()
@@ -466,6 +466,8 @@ export default class LineChart {
466
466
  refresh() {
467
467
  this.raf(() => {
468
468
  this.clearPointPos()
469
+ this.clearCanvasSize(this.canvas)
470
+ this.layers.forEach(layer => this.clearCanvasSize(layer.canvas))
469
471
  this.setDomSizeIfNeeded()
470
472
  this.setCanvasSize(this.canvas)
471
473
  this.layers.forEach(layer => this.setCanvasSize(layer.canvas))
@@ -20,8 +20,11 @@ export default class SearchDropdown {
20
20
  this.options.itemClick = options.itemClick || itemClick
21
21
  this.options.change = options.change || noop
22
22
  this.options.wait = options.wait || 50
23
- this.place = 'bottom'
24
- this.align = 'left'
23
+ this.place = options.place || 'bottom'
24
+ this.align = options.align || 'left'
25
+ this.offset = options.offset || 14
26
+ this.offsetTop = options.offsetTop || 0
27
+ this.offsetLeft = options.offsetLeft || 0
25
28
  this.isMenuVisible = false
26
29
  this.lastKeyword = null
27
30
  this.selectedIndex = 0
@@ -53,7 +56,16 @@ export default class SearchDropdown {
53
56
  }
54
57
 
55
58
  appendMenu() {
59
+
56
60
  const menu = document.createElement('div')
61
+ const { dataset } = menu
62
+
63
+ dataset.place = this.place
64
+ dataset.align = this.align
65
+ dataset.offset = this.offset
66
+ dataset.offsetTop = this.offsetTop
67
+ dataset.offsetLeft = this.offsetLeft
68
+
57
69
  menu.className = 'search-dropdown dropdown-menu'
58
70
 
59
71
  const inputWrap = document.createElement('div')
@@ -100,15 +112,19 @@ export default class SearchDropdown {
100
112
  showMenu() {
101
113
  const { input, menu } = this
102
114
  this.getData(input.value)
115
+
103
116
  menu.style.display = 'block'
104
117
  menu.style.opacity = 0
105
118
  menu.style.transform = 'scale(.8)'
106
119
  document.body.appendChild(menu)
107
- this.adjustMenuPos()
108
- menu.style.transform = 'scale(1)'
109
- menu.style.opacity = 1
110
- this.isMenuVisible = true
111
- this.input.focus()
120
+
121
+ setTimeout(() => {
122
+ this.adjustMenuPos()
123
+ menu.style.transform = 'scale(1)'
124
+ menu.style.opacity = 1
125
+ this.isMenuVisible = true
126
+ this.input.focus()
127
+ }, 0)
112
128
  }
113
129
 
114
130
  toggleMenu() {
@@ -116,22 +132,18 @@ export default class SearchDropdown {
116
132
  }
117
133
 
118
134
  adjustMenuPos() {
119
- const { menu, dom } = this
120
- const { dataset } = menu
121
- const offsetLeft = ('offsetLeft' in dataset) ? parseInt(dataset.offsetLeft, 10) : 0
122
- const offsetTop = ('offsetTop' in dataset) ? parseInt(dataset.offsetTop, 10) : 0
123
-
135
+ const { menu, dom, offset, offsetLeft, offsetTop } = this
124
136
  const { pos, place, align } = getFloatedTargetPos({
125
137
  src: dom,
126
138
  target: menu,
127
139
  place: this.place,
128
140
  align: this.align,
129
- offset: parseInt(dom.dataset.offset, 10) || 14,
141
+ offset,
130
142
  offsetLeft,
131
143
  offsetTop
132
144
  })
133
- dataset.place = place
134
- dataset.align = align
145
+ menu.dataset.place = place
146
+ menu.dataset.align = align
135
147
  menu.style.left = toPixel(pos.left)
136
148
  menu.style.top = toPixel(pos.top)
137
149
  }
@@ -1,7 +1,7 @@
1
+ import getKey from '../utils/getKey'
2
+ import noop from '../utils/noop'
1
3
  import raf from '../utils/raf'
2
- import isStr from '../utils/isStr'
3
4
  import supportDom from '../decorators/supportDom'
4
- import getKey from '../utils/getKey'
5
5
 
6
6
  @supportDom
7
7
  export default class TagInput {
@@ -10,7 +10,8 @@ export default class TagInput {
10
10
  this.dom = dom
11
11
  this.defaultInputWidth = 128
12
12
  this.validate = options.validate || (() => ({ isTag: true }))
13
- this.change = options.change || (() => {})
13
+ this.suggest = options.suggest || noop
14
+ this.change = options.change || noop
14
15
  this.isComposing = false
15
16
  this.raf = raf
16
17
  this.tags = []
@@ -23,12 +24,29 @@ export default class TagInput {
23
24
  }
24
25
 
25
26
  setup() {
27
+ const { defaultInputWidth } = this
28
+ const inputDiv = document.createElement('div')
29
+ inputDiv.className = 'tag-input-box'
30
+
31
+ const suggestInput = document.createElement('input')
32
+ suggestInput.type = 'text'
33
+ suggestInput.style.width = defaultInputWidth + 'px'
34
+ suggestInput.className = 'tag-suggest-input'
35
+
26
36
  const input = document.createElement('input')
27
37
  input.type = 'text'
28
- input.style.width = this.defaultInputWidth + 'px'
38
+ input.style.width = defaultInputWidth + 'px'
39
+ input.className = 'tag-main-input'
40
+
41
+ inputDiv.appendChild(input)
42
+ inputDiv.appendChild(suggestInput)
43
+
29
44
  this.input = input
45
+ this.suggestInput = suggestInput
30
46
  this.canvas = document.createElement('canvas')
31
- this.dom.append(input)
47
+ this.inputDiv = inputDiv
48
+
49
+ this.dom.append(inputDiv)
32
50
  }
33
51
 
34
52
  getTextWidth(text, font) {
@@ -56,13 +74,7 @@ export default class TagInput {
56
74
  }, 500)
57
75
  }
58
76
 
59
- async addTagIfNeeded(value) {
60
- const { input } = this
61
- const inputValue = input.value
62
- const res = await this.validate(inputValue)
63
- if (! res.isTag) {
64
- return this.shake()
65
- }
77
+ addTag(inputValue, res) {
66
78
  const classname = res.classname ? ` ${res.classname}` : ''
67
79
  const tag = document.createElement('div')
68
80
 
@@ -84,8 +96,20 @@ export default class TagInput {
84
96
  tag.appendChild(btn)
85
97
 
86
98
  this.tags.push({ elem: tag, remove: handleBtnClick, res })
87
- this.dom.insertBefore(tag, input)
99
+ this.dom.insertBefore(tag, this.inputDiv)
100
+ }
101
+
102
+ async addTagIfNeeded() {
103
+ const { input, suggestInput } = this
104
+ const inputValue = suggestInput.value || input.value
105
+ const res = await this.validate(inputValue)
106
+ if (! res.isTag) {
107
+ return this.shake()
108
+ }
109
+ this.addTag(inputValue, res)
110
+
88
111
  input.value = ''
112
+ suggestInput.value = ''
89
113
 
90
114
  this.change(this.tags.slice())
91
115
  }
@@ -121,7 +145,7 @@ export default class TagInput {
121
145
  this.addEvent(input, 'keydown', async event => {
122
146
  const key = getKey(event)
123
147
  if ((key === 'enter') && (! this.isComposing)) {
124
- await this.addTagIfNeeded(input.value)
148
+ await this.addTagIfNeeded()
125
149
  }
126
150
  else if ((key === 'backspace') && (lastValue === '')) {
127
151
  this.removeTagIfNeeded()
@@ -130,6 +154,7 @@ export default class TagInput {
130
154
  })
131
155
 
132
156
  this.addEvent(input, 'input', event => {
157
+ this.suggestInputIfNeeded(input.value)
133
158
  this.raf(() => {
134
159
  const textWidth = this.getTextWidth(input.value, font)
135
160
  const nextWidth = this.getNextInputWidth(textWidth)
@@ -138,8 +163,21 @@ export default class TagInput {
138
163
  })
139
164
  }
140
165
 
166
+ async suggestInputIfNeeded(value) {
167
+ const suggestValue = await this.suggest(value)
168
+ this.raf(() => {
169
+ if (this.input.value === value) {
170
+ this.suggestInput.value = (suggestValue || '')
171
+ }
172
+ })
173
+ }
174
+
141
175
  destroy() {
142
176
  this.tags.forEach(tag => tag.remove())
143
- this.input.remove()
177
+ this.inputDiv.remove()
178
+ this.canvas = null
179
+ this.input = null
180
+ this.suggestInput = null
181
+ this.inputDiv = null
144
182
  }
145
183
  }
@@ -203,6 +203,13 @@ export default function chartCommon(target) {
203
203
  canvas.getContext('2d').scale(dpr, dpr)
204
204
  }
205
205
 
206
+ clearCanvasSize(canvas) {
207
+ canvas.width = 0
208
+ canvas.height = 0
209
+ canvas.style.width = 0
210
+ canvas.style.height = 0
211
+ }
212
+
206
213
  setDomSizeIfNeeded() {
207
214
  if (isUndef(this.options.width)) {
208
215
  this.width = this.dom.offsetWidth
@@ -0,0 +1,2 @@
1
+ export default function noop() {
2
+ }
@@ -153,6 +153,10 @@ $color-active: #5469d4;
153
153
  border: 0;
154
154
  }
155
155
 
156
+ .full-width {
157
+ width: 100% !important;
158
+ }
159
+
156
160
  hr {
157
161
  margin-top: 20px;
158
162
  margin-bottom: 20px;
@@ -1,4 +1,5 @@
1
1
  .search-dropdown.dropdown-menu {
2
+ width: 420px;
2
3
  padding: 0;
3
4
  .search-dropdown-input-wrap {
4
5
  padding: 14px;
@@ -26,8 +27,5 @@
26
27
  color: #6772e5;
27
28
  margin-right: .7em;
28
29
  }
29
- > span {
30
- max-width: 420px;
31
- }
32
30
  }
33
31
  }
@@ -3,10 +3,24 @@
3
3
  background-color: #fff;
4
4
  padding: .4em .4em 0 .4em;
5
5
  min-height: 40px;
6
- > input {
7
- border: 0;
8
- &:focus {
9
- outline: none;
6
+
7
+ .tag-suggest-input {
8
+ color: rgba(60, 66, 87, .41);
9
+ }
10
+
11
+ .tag-main-input {
12
+ position: absolute;
13
+ background-color: transparent;
14
+ }
15
+
16
+ .tag-input-box {
17
+ display: inline-block;
18
+ position: relative;
19
+ > input {
20
+ border: 0;
21
+ &:focus {
22
+ outline: none;
23
+ }
10
24
  }
11
25
  }
12
26
  .tag {
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: beyond-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.231
4
+ version: 0.0.236
5
5
  platform: ruby
6
6
  authors:
7
7
  - kmsheng
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-10-13 00:00:00.000000000 Z
12
+ date: 2020-11-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sassc
@@ -199,6 +199,7 @@ files:
199
199
  - src/js/utils/isTouchDevice.js
200
200
  - src/js/utils/isUndef.js
201
201
  - src/js/utils/msToS.js
202
+ - src/js/utils/noop.js
202
203
  - src/js/utils/promisify.js
203
204
  - src/js/utils/raf.js
204
205
  - src/js/utils/unbindAll.js