beyond-rails 0.0.266 → 0.0.271

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 805f3abdc89e3ba6a80306075b91a7a3a0f75760a97755d07ca5a40ecce2326d
4
- data.tar.gz: 9b0c72b2864035924f833226877d10c38f18e0e43d01de5f55115ebcf7f1f3fb
3
+ metadata.gz: 01dd97cd11c2e48ea6e8418c073f9ca5ca91e311873309f7651e4174c00e2c84
4
+ data.tar.gz: 6e6598b62c2149288f16856521ad20a397c8fdb127698c7e56d7dcbcc8baa498
5
5
  SHA512:
6
- metadata.gz: 7219f2a16076bed1de20e2a149a92f92e595ec8a25427d36eab1fbb78ae5cf9036195017524d8a3c73e93a87bf4a876e876c9cbe933bc9283708fa2a23825a39
7
- data.tar.gz: b7aa777f115fbd0c822e5fe8cf0994ff09d7a4af90b4e7bbed0adaf43bd93b3cb192ed033159b09b1b7b03ffe6d86d283b0373150c07198b97aa7065fb29d08b
6
+ metadata.gz: 12da64daa3b927b0b6a4d3f7bfac9803211926a2f6973362271576e2ef8c4e6cd6818ec118ddd4e525a709e595e0c6eafe5847114c42449c06dd48a7fe78bb7a
7
+ data.tar.gz: 2e571a176fc54d6fd755d15d4a974b20cc808b2c7bc2673426f4ec74e3f0c0bb65fe5aeb7a14ab580c473fc09fecb3c794302750ccec5c905733ea4ef5a06876
@@ -58,8 +58,9 @@ export default class Modal {
58
58
  show(html) {
59
59
 
60
60
  if (this.isVisible && html) {
61
- this.modal.style.display = 'block'
62
61
  this.replace(html)
62
+ this.modal.classList.add('js-active')
63
+ this.modal.style.display = 'block'
63
64
  return this.triggerShowEventIfNeeded()
64
65
  }
65
66
 
@@ -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
- menuContent.innerHTML = items.map((item, i) => {
155
- return this.options.renderItem(item, i, (this.selectedIndex === i))
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
- .join('')
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[this.selectedIndex]
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
- this.menuContent.scrollTop -= elHeight
209
+ menuContent.scrollTop -= elHeight
172
210
  }
173
211
  else if (elBottom > contentBottom) {
174
- this.menuContent.scrollTop += elHeight
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
  }
@@ -202,7 +251,7 @@ export default class SearchDropdown {
202
251
  const rows = this.getMenuItemEls()
203
252
  let node = target
204
253
  while (node.parentNode !== parent) {
205
- if ('item' in node.dataset) {
254
+ if (node.dataset && ('item' in node.dataset)) {
206
255
  const index = rows.findIndex(row => row === node)
207
256
  return this.items[index]
208
257
  }
@@ -350,5 +399,9 @@ export default class SearchDropdown {
350
399
 
351
400
  destroy() {
352
401
  this.menu.remove()
402
+ this.menu = null
403
+ this.input = null
404
+ this.menuContent = null
405
+ this.loader = null
353
406
  }
354
407
  }
@@ -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
  }
@@ -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.266
4
+ version: 0.0.271
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-07 00:00:00.000000000 Z
12
+ date: 2020-12-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sassc