beyond-rails 0.0.233 → 0.0.238
Sign up to get free protection for your applications and to get access to all the features.
- 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/components/_modal.scss +14 -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: d6f31382aa19dc9e597d9142844819d5979a31e79e211662c03b57f5695656d0
|
4
|
+
data.tar.gz: e86efab321917174dd1b4e2d89f4d0b8c8b90ca5b9e1440fc4d49b59bd6a41e2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: cdad3b285c7a2e05e7af766929d9670c6d0233149055e8cfd4d2d524935584c41a02f45289c944f0714b24f81d32166de5d17373ea6df520cc3d593c6259c935
|
7
|
+
data.tar.gz: e1d9d6afec1abe4ec7c5f6cd1350baa9dff1004d62e352705aad5b7ac2f764018a83ac67f34d5b075a9e0fe595b71dc4ac469e1d93eda215ee3974394b28583b
|
@@ -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)
|
@@ -20,8 +20,22 @@
|
|
20
20
|
background-color: #fff;
|
21
21
|
margin: 20px auto 0;
|
22
22
|
max-width: 600px;
|
23
|
+
&.modal-sm {
|
24
|
+
max-width: 400px;
|
25
|
+
}
|
26
|
+
&.modal-lg {
|
27
|
+
max-width: 900px;
|
28
|
+
}
|
29
|
+
&.modal-xl {
|
30
|
+
max-width: 1140px;
|
31
|
+
}
|
23
32
|
@media (max-width: $screen-sm) {
|
24
33
|
max-width: 90%;
|
34
|
+
&.modal-sm,
|
35
|
+
&.modal-lg,
|
36
|
+
&.modal-xl {
|
37
|
+
max-width: 90%;
|
38
|
+
}
|
25
39
|
}
|
26
40
|
}
|
27
41
|
&.js-active {
|
@@ -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.238
|
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
|