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 +4 -4
- data/src/js/components/BarChart.js +3 -0
- data/src/js/components/LineChart.js +2 -0
- data/src/js/components/SearchDropdown.js +27 -15
- data/src/js/components/TagInput.js +53 -15
- data/src/js/decorators/chartCommon.js +7 -0
- data/src/js/utils/noop.js +2 -0
- data/src/sass/_main.scss +4 -0
- data/src/sass/components/_search-dropdown.scss +1 -3
- 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: d18db8c043fc4f94860e382889c2d130fc78d7d607643fe5454a7d0f5f9fc71c
|
4
|
+
data.tar.gz: c2bc9f9b12837e0df45d321949278433516a4716c7a458d1ef46597de546bd34
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
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
|
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.
|
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 =
|
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.
|
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
|
-
|
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,
|
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(
|
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.
|
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
|
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.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-
|
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
|