beyond-rails 0.0.268 → 0.0.273
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/DateMenu.js +8 -2
- data/src/js/components/SearchDropdown.js +64 -18
- data/src/js/components/TagInput.js +6 -1
- data/src/sass/components/_date-menu.scss +4 -0
- data/src/sass/components/_search-dropdown.scss +14 -0
- data/src/sass/components/_spinner.scss +37 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c04ff681a69cc5fa1390b5604f9a688b755cd9f777a7e7dec03233926f02d64e
|
4
|
+
data.tar.gz: d1e29eac5f98b4a9756df1b782ae0e25ac1362ff56c0a8727f2462f98da04227
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7d23e149d907d36fe563a10722de5ea0c82ae4ee59cf5a556d2a6dc9b43ffb5e9160677eb4f01b65d5c6af25ddfca0725ad1fbfaaac920ddaddc71bd02467768
|
7
|
+
data.tar.gz: 1de47922ab5d2db2c2219c42cf79d0c91a6e068a151bb7778bcc595734443549b993675300aa107685078124f7c596d74cc1667b7382632c4a8d299b1fddb7d9
|
@@ -12,12 +12,13 @@ import {
|
|
12
12
|
getDaysInMonth,
|
13
13
|
getMonth,
|
14
14
|
getYear,
|
15
|
-
|
15
|
+
isFuture,
|
16
16
|
range,
|
17
17
|
set,
|
18
18
|
startOfDay,
|
19
19
|
startOfMonth,
|
20
20
|
subMonths,
|
21
|
+
throttle,
|
21
22
|
toPixel,
|
22
23
|
format
|
23
24
|
} from '../utils'
|
@@ -46,6 +47,7 @@ export default class DateMenu {
|
|
46
47
|
this.endDate = endDate
|
47
48
|
this.hoveredCellData = null
|
48
49
|
this.options = options
|
50
|
+
this.noFuture = options.noFuture || false
|
49
51
|
this.tz = options.tz || DEFAULT_TIMEZONE
|
50
52
|
this.locale = options.locale || DEFAULT_LOCALE
|
51
53
|
this.captionPattern = options.captionPattern || 'yyyy MMMM'
|
@@ -74,7 +76,7 @@ export default class DateMenu {
|
|
74
76
|
|
75
77
|
getTableRows(date) {
|
76
78
|
|
77
|
-
const { startDate, endDate } = this
|
79
|
+
const { noFuture, startDate, endDate } = this
|
78
80
|
|
79
81
|
const daysInMonth = getDaysInMonth(date)
|
80
82
|
const firstDateOfMonth = startOfMonth(date)
|
@@ -118,6 +120,7 @@ export default class DateMenu {
|
|
118
120
|
isStartDate: dateEq(initialStartDate, d),
|
119
121
|
isEndDate: dateEq(initialEndDate, d),
|
120
122
|
isSelected: (resCompareStart <= 0) && (resCompareEnd >= 0),
|
123
|
+
isDisabled: noFuture && isFuture(d),
|
121
124
|
isToday: (today === formatDate(d)),
|
122
125
|
day
|
123
126
|
}
|
@@ -191,6 +194,9 @@ export default class DateMenu {
|
|
191
194
|
if (row.type === CELL_TYPE_EMPTY) {
|
192
195
|
return '<td></td>'
|
193
196
|
}
|
197
|
+
if (row.isDisabled) {
|
198
|
+
return `<td class="cell js-disabled">${row.day}</td>`
|
199
|
+
}
|
194
200
|
if (row.isStartDate || row.isEndDate) {
|
195
201
|
return `<td class="cell selected-ex" data-date-table-cell>${row.day}</td>`
|
196
202
|
}
|
@@ -25,12 +25,15 @@ export default class SearchDropdown {
|
|
25
25
|
this.offset = options.offset || 14
|
26
26
|
this.offsetTop = options.offsetTop || 0
|
27
27
|
this.offsetLeft = options.offsetLeft || 0
|
28
|
+
this.noDataMsg = options.noDataMsg || '沒有資料'
|
28
29
|
this.isMenuVisible = false
|
29
30
|
this.lastKeyword = null
|
30
31
|
this.selectedIndex = 0
|
31
32
|
this.items = []
|
32
33
|
this.compositionStarted = false
|
33
34
|
this.compositionJustEnded = false
|
35
|
+
this.noDataMsgVisible = false
|
36
|
+
this.loading = true
|
34
37
|
this.init()
|
35
38
|
}
|
36
39
|
|
@@ -77,6 +80,19 @@ export default class SearchDropdown {
|
|
77
80
|
|
78
81
|
inputWrap.appendChild(input)
|
79
82
|
|
83
|
+
const loader = document.createElement('div')
|
84
|
+
loader.className = 'search-dropdown-loader'
|
85
|
+
|
86
|
+
loader.innerHTML = `
|
87
|
+
<div class="fb-loader">
|
88
|
+
<div></div>
|
89
|
+
<div></div>
|
90
|
+
<div></div>
|
91
|
+
</div>
|
92
|
+
`
|
93
|
+
|
94
|
+
inputWrap.appendChild(loader)
|
95
|
+
|
80
96
|
if (this.options.placeholder) {
|
81
97
|
input.setAttribute('placeholder', this.options.placeholder)
|
82
98
|
}
|
@@ -88,6 +104,20 @@ export default class SearchDropdown {
|
|
88
104
|
this.menu = menu
|
89
105
|
this.input = input
|
90
106
|
this.menuContent = menuContent
|
107
|
+
this.loader = loader
|
108
|
+
}
|
109
|
+
|
110
|
+
setLoading(loading) {
|
111
|
+
this.loading = loading
|
112
|
+
|
113
|
+
if (loading) {
|
114
|
+
this.input.classList.add('loading')
|
115
|
+
this.loader.style.display = 'block'
|
116
|
+
}
|
117
|
+
else {
|
118
|
+
this.input.classList.remove('loading')
|
119
|
+
this.loader.style.display = 'none'
|
120
|
+
}
|
91
121
|
}
|
92
122
|
|
93
123
|
setMenuContentActive(active) {
|
@@ -150,15 +180,23 @@ export default class SearchDropdown {
|
|
150
180
|
}
|
151
181
|
|
152
182
|
renderMenu() {
|
153
|
-
const { menuContent, items } = this
|
154
|
-
|
155
|
-
|
183
|
+
const { menuContent, items, selectedIndex } = this
|
184
|
+
const { renderItem } = this.options
|
185
|
+
|
186
|
+
const menuItems = items.map((item, i) => {
|
187
|
+
return renderItem(item, i, (selectedIndex === i))
|
156
188
|
})
|
157
|
-
|
189
|
+
|
190
|
+
if (this.noDataMsgVisible) {
|
191
|
+
menuItems.unshift(`<div class="search-dropdown-menu-item">${this.noDataMsg}</div>`)
|
192
|
+
}
|
193
|
+
|
194
|
+
menuContent.innerHTML = menuItems.join('')
|
195
|
+
|
158
196
|
this.setMenuContentActive(items.length > 0)
|
159
197
|
|
160
198
|
const menuItemEls = this.getMenuItemEls()
|
161
|
-
const selectedEl = menuItemEls[
|
199
|
+
const selectedEl = menuItemEls[selectedIndex]
|
162
200
|
if (selectedEl) {
|
163
201
|
const scrollTop = menuContent.scrollTop
|
164
202
|
const contentTop = menuContent.offsetTop
|
@@ -168,10 +206,10 @@ export default class SearchDropdown {
|
|
168
206
|
const elBottom = elTop + elHeight
|
169
207
|
|
170
208
|
if (elTop < contentTop) {
|
171
|
-
|
209
|
+
menuContent.scrollTop -= elHeight
|
172
210
|
}
|
173
211
|
else if (elBottom > contentBottom) {
|
174
|
-
|
212
|
+
menuContent.scrollTop += elHeight
|
175
213
|
}
|
176
214
|
}
|
177
215
|
}
|
@@ -187,8 +225,19 @@ export default class SearchDropdown {
|
|
187
225
|
}
|
188
226
|
this.resetSelectedIndex()
|
189
227
|
this.lastKeyword = keyword
|
228
|
+
this.noDataMsgVisible = false
|
229
|
+
this.setItems([])
|
230
|
+
|
231
|
+
this.setLoading(true)
|
232
|
+
|
190
233
|
const items = await this.options.getData(keyword)
|
191
234
|
|
235
|
+
this.setLoading(false)
|
236
|
+
|
237
|
+
if (items.length === 0) {
|
238
|
+
this.noDataMsgVisible = true
|
239
|
+
}
|
240
|
+
|
192
241
|
if (this.lastKeyword === this.input.value) {
|
193
242
|
this.setItems(items)
|
194
243
|
}
|
@@ -198,17 +247,10 @@ export default class SearchDropdown {
|
|
198
247
|
return Array.from(this.menuContent.querySelectorAll('[data-item]'))
|
199
248
|
}
|
200
249
|
|
201
|
-
findClickedItem(target
|
202
|
-
const
|
203
|
-
|
204
|
-
|
205
|
-
if ('item' in node.dataset) {
|
206
|
-
const index = rows.findIndex(row => row === node)
|
207
|
-
return this.items[index]
|
208
|
-
}
|
209
|
-
node = node.parentNode
|
210
|
-
}
|
211
|
-
return null
|
250
|
+
findClickedItem(target) {
|
251
|
+
const index = this.getMenuItemEls()
|
252
|
+
.findIndex(item => (target === item) || (item.contains(target)))
|
253
|
+
return this.items[index]
|
212
254
|
}
|
213
255
|
|
214
256
|
isInputFocused() {
|
@@ -350,5 +392,9 @@ export default class SearchDropdown {
|
|
350
392
|
|
351
393
|
destroy() {
|
352
394
|
this.menu.remove()
|
395
|
+
this.menu = null
|
396
|
+
this.input = null
|
397
|
+
this.menuContent = null
|
398
|
+
this.loader = null
|
353
399
|
}
|
354
400
|
}
|
@@ -170,6 +170,11 @@ export default class TagInput {
|
|
170
170
|
const { input, suggestInput } = this
|
171
171
|
const inputValue = suggestInput.value || input.value
|
172
172
|
const res = await this.validate(inputValue)
|
173
|
+
if (res.clear) {
|
174
|
+
input.value = ''
|
175
|
+
suggestInput.value = ''
|
176
|
+
return
|
177
|
+
}
|
173
178
|
if (! res.isTag) {
|
174
179
|
return this.shake()
|
175
180
|
}
|
@@ -243,7 +248,7 @@ export default class TagInput {
|
|
243
248
|
|
244
249
|
destroy() {
|
245
250
|
this.tags.forEach(tag => tag.remove())
|
246
|
-
this.inputDiv.remove()
|
251
|
+
this.inputDiv && this.inputDiv.remove()
|
247
252
|
this.canvas = null
|
248
253
|
this.input = null
|
249
254
|
this.suggestInput = null
|
@@ -2,10 +2,24 @@
|
|
2
2
|
width: 420px;
|
3
3
|
padding: 0;
|
4
4
|
.search-dropdown-input-wrap {
|
5
|
+
position: relative;
|
5
6
|
padding: 14px;
|
6
7
|
}
|
7
8
|
.search-dropdown-input.input {
|
8
9
|
width: 100%;
|
10
|
+
&.loading {
|
11
|
+
padding-right: 40px;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
.search-dropdown-loader {
|
15
|
+
display: none;
|
16
|
+
position: absolute;
|
17
|
+
right: 20px;
|
18
|
+
top: 0;
|
19
|
+
bottom: 0;
|
20
|
+
margin-top: auto;
|
21
|
+
margin-bottom: auto;
|
22
|
+
height: 32px;
|
9
23
|
}
|
10
24
|
.search-dropdown-menu.active {
|
11
25
|
border-top: 1px solid rgba(60, 66, 87, .16);
|
@@ -6,6 +6,16 @@
|
|
6
6
|
transform: rotate(360deg);
|
7
7
|
}
|
8
8
|
}
|
9
|
+
@keyframes fb-loader {
|
10
|
+
0% {
|
11
|
+
top: 6px;
|
12
|
+
height: 25px;
|
13
|
+
}
|
14
|
+
50%, 100% {
|
15
|
+
top: 10px;
|
16
|
+
height: 12px;
|
17
|
+
}
|
18
|
+
}
|
9
19
|
|
10
20
|
.loader {
|
11
21
|
margin: 50px auto;
|
@@ -77,3 +87,30 @@
|
|
77
87
|
.ring-loader div:nth-child(3) {
|
78
88
|
animation-delay: -0.15s;
|
79
89
|
}
|
90
|
+
|
91
|
+
.fb-loader {
|
92
|
+
display: inline-block;
|
93
|
+
position: relative;
|
94
|
+
@include size(32px);
|
95
|
+
}
|
96
|
+
|
97
|
+
.fb-loader div {
|
98
|
+
display: inline-block;
|
99
|
+
position: absolute;
|
100
|
+
left: 0;
|
101
|
+
width: 4px;
|
102
|
+
background: $bg-primary-ex;
|
103
|
+
animation: fb-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
104
|
+
}
|
105
|
+
.fb-loader div:nth-child(1) {
|
106
|
+
left: 6px;
|
107
|
+
animation-delay: -0.24s;
|
108
|
+
}
|
109
|
+
.fb-loader div:nth-child(2) {
|
110
|
+
left: 14px;
|
111
|
+
animation-delay: -0.12s;
|
112
|
+
}
|
113
|
+
.fb-loader div:nth-child(3) {
|
114
|
+
left: 22px;
|
115
|
+
animation-delay: 0;
|
116
|
+
}
|
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.273
|
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-
|
12
|
+
date: 2020-12-24 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sassc
|