beyond-rails 0.0.232 → 0.0.237
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 +4 -4
- data/src/js/components/BarChart.js +3 -0
- data/src/js/components/LineChart.js +2 -0
- data/src/js/components/TagInput.js +53 -14
- data/src/js/decorators/chartCommon.js +7 -0
- data/src/js/utils/dom.js +11 -1
- data/src/js/utils/noop.js +2 -0
- data/src/sass/_main.scss +4 -0
- data/src/sass/components/_tag-input.scss +18 -4
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: adbb95db12425b98f0284cfcc9cef65c0034a927658bf3e730478387ba25822e
|
4
|
+
data.tar.gz: b3037f00f20178cda7ac995bbc37d87483a79dc6d34f8b0574e149d40a485085
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 498139b642aee1c76d4761b64a0ac14a02b60117be1a54daf66a00cd207de1e6df1e1aa3a4eda946e5c7fe29cba4d2eea07fb0a41301319ae4adad60828c2256
|
7
|
+
data.tar.gz: a39287a38305fa8b558e4b833a4935a7c4ae55a9a305aecb6167871fe892f52828a750dd1130d9b2e743b96ce56bdcbaddc4deab7b8e16e1dc4107784e5bfd6c
|
@@ -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))
|
@@ -1,6 +1,7 @@
|
|
1
|
+
import getKey from '../utils/getKey'
|
2
|
+
import noop from '../utils/noop'
|
1
3
|
import raf from '../utils/raf'
|
2
4
|
import supportDom from '../decorators/supportDom'
|
3
|
-
import getKey from '../utils/getKey'
|
4
5
|
|
5
6
|
@supportDom
|
6
7
|
export default class TagInput {
|
@@ -9,7 +10,8 @@ export default class TagInput {
|
|
9
10
|
this.dom = dom
|
10
11
|
this.defaultInputWidth = 128
|
11
12
|
this.validate = options.validate || (() => ({ isTag: true }))
|
12
|
-
this.
|
13
|
+
this.suggest = options.suggest || noop
|
14
|
+
this.change = options.change || noop
|
13
15
|
this.isComposing = false
|
14
16
|
this.raf = raf
|
15
17
|
this.tags = []
|
@@ -22,12 +24,29 @@ export default class TagInput {
|
|
22
24
|
}
|
23
25
|
|
24
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
|
+
|
25
36
|
const input = document.createElement('input')
|
26
37
|
input.type = 'text'
|
27
|
-
input.style.width =
|
38
|
+
input.style.width = defaultInputWidth + 'px'
|
39
|
+
input.className = 'tag-main-input'
|
40
|
+
|
41
|
+
inputDiv.appendChild(input)
|
42
|
+
inputDiv.appendChild(suggestInput)
|
43
|
+
|
28
44
|
this.input = input
|
45
|
+
this.suggestInput = suggestInput
|
29
46
|
this.canvas = document.createElement('canvas')
|
30
|
-
this.
|
47
|
+
this.inputDiv = inputDiv
|
48
|
+
|
49
|
+
this.dom.append(inputDiv)
|
31
50
|
}
|
32
51
|
|
33
52
|
getTextWidth(text, font) {
|
@@ -55,13 +74,7 @@ export default class TagInput {
|
|
55
74
|
}, 500)
|
56
75
|
}
|
57
76
|
|
58
|
-
|
59
|
-
const { input } = this
|
60
|
-
const inputValue = input.value
|
61
|
-
const res = await this.validate(inputValue)
|
62
|
-
if (! res.isTag) {
|
63
|
-
return this.shake()
|
64
|
-
}
|
77
|
+
addTag(inputValue, res) {
|
65
78
|
const classname = res.classname ? ` ${res.classname}` : ''
|
66
79
|
const tag = document.createElement('div')
|
67
80
|
|
@@ -83,8 +96,20 @@ export default class TagInput {
|
|
83
96
|
tag.appendChild(btn)
|
84
97
|
|
85
98
|
this.tags.push({ elem: tag, remove: handleBtnClick, res })
|
86
|
-
this.dom.insertBefore(tag,
|
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
|
+
|
87
111
|
input.value = ''
|
112
|
+
suggestInput.value = ''
|
88
113
|
|
89
114
|
this.change(this.tags.slice())
|
90
115
|
}
|
@@ -120,7 +145,7 @@ export default class TagInput {
|
|
120
145
|
this.addEvent(input, 'keydown', async event => {
|
121
146
|
const key = getKey(event)
|
122
147
|
if ((key === 'enter') && (! this.isComposing)) {
|
123
|
-
await this.addTagIfNeeded(
|
148
|
+
await this.addTagIfNeeded()
|
124
149
|
}
|
125
150
|
else if ((key === 'backspace') && (lastValue === '')) {
|
126
151
|
this.removeTagIfNeeded()
|
@@ -129,6 +154,7 @@ export default class TagInput {
|
|
129
154
|
})
|
130
155
|
|
131
156
|
this.addEvent(input, 'input', event => {
|
157
|
+
this.suggestInputIfNeeded(input.value)
|
132
158
|
this.raf(() => {
|
133
159
|
const textWidth = this.getTextWidth(input.value, font)
|
134
160
|
const nextWidth = this.getNextInputWidth(textWidth)
|
@@ -137,8 +163,21 @@ export default class TagInput {
|
|
137
163
|
})
|
138
164
|
}
|
139
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
|
+
|
140
175
|
destroy() {
|
141
176
|
this.tags.forEach(tag => tag.remove())
|
142
|
-
this.
|
177
|
+
this.inputDiv.remove()
|
178
|
+
this.canvas = null
|
179
|
+
this.input = null
|
180
|
+
this.suggestInput = null
|
181
|
+
this.inputDiv = null
|
143
182
|
}
|
144
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
|
data/src/js/utils/dom.js
CHANGED
@@ -5,7 +5,17 @@ const unloadRows = []
|
|
5
5
|
const onPage = row => {
|
6
6
|
const { controller, action } = row
|
7
7
|
const { dataset } = document.body
|
8
|
-
|
8
|
+
|
9
|
+
let controllerMatched = (dataset.controller === controller)
|
10
|
+
let actionMatched = (dataset.action === action)
|
11
|
+
|
12
|
+
if (controller === '*') {
|
13
|
+
controllerMatched = true
|
14
|
+
}
|
15
|
+
if (action === '*') {
|
16
|
+
actionMatched = true
|
17
|
+
}
|
18
|
+
return controllerMatched && actionMatched
|
9
19
|
}
|
10
20
|
|
11
21
|
export const $ = (selector, dom = document) => dom.querySelector(selector)
|
data/src/sass/_main.scss
CHANGED
@@ -3,10 +3,24 @@
|
|
3
3
|
background-color: #fff;
|
4
4
|
padding: .4em .4em 0 .4em;
|
5
5
|
min-height: 40px;
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
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.
|
4
|
+
version: 0.0.237
|
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-
|
12
|
+
date: 2020-11-06 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
|