beyond-rails 0.0.268 → 0.0.273

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a80d33b12a4f62600a763bcf01d21cd3e68cbd279e26c35c0ba87c995875c4fa
-  data.tar.gz: 1722caa06e09243aaec6dfc4e09f81bdd48e70245d9bb548709cd39809eb6c2c
+  metadata.gz: c04ff681a69cc5fa1390b5604f9a688b755cd9f777a7e7dec03233926f02d64e
+  data.tar.gz: d1e29eac5f98b4a9756df1b782ae0e25ac1362ff56c0a8727f2462f98da04227
 SHA512:
-  metadata.gz: 95830b23c996b9f04bebd8d8a0f0a4907d6c974f3eb0e9e24eb80bae26f8ad3a142743ace98ff3be2381126b449d34ad84e4dc8d1a0ded6d5bd0752947b6fda6
-  data.tar.gz: ed4b9a8faa36c1718ccfbdd15a55f8f04109179abaaddc5120ee037029632e577534f61f475acc8355f857f9c6cb700db18b01df0725ac1cff3342d373f4a4d3
+  metadata.gz: 7d23e149d907d36fe563a10722de5ea0c82ae4ee59cf5a556d2a6dc9b43ffb5e9160677eb4f01b65d5c6af25ddfca0725ad1fbfaaac920ddaddc71bd02467768
+  data.tar.gz: 1de47922ab5d2db2c2219c42cf79d0c91a6e068a151bb7778bcc595734443549b993675300aa107685078124f7c596d74cc1667b7382632c4a8d299b1fddb7d9

data/src/js/components/DateMenu.js

@@ -12,12 +12,13 @@ import {
   getDaysInMonth,
   getMonth,
   getYear,
-  throttle,
+  isFuture,
   range,
   set,
   startOfDay,
   startOfMonth,
   subMonths,
+  throttle,
   toPixel,
   format
 } from '../utils'
@@ -46,6 +47,7 @@ export default class DateMenu {
     this.endDate = endDate
     this.hoveredCellData = null
     this.options = options
+    this.noFuture = options.noFuture || false
     this.tz = options.tz || DEFAULT_TIMEZONE
     this.locale = options.locale || DEFAULT_LOCALE
     this.captionPattern = options.captionPattern || 'yyyy MMMM'
@@ -74,7 +76,7 @@ export default class DateMenu {
 
   getTableRows(date) {
 
-    const { startDate, endDate } = this
+    const { noFuture, startDate, endDate } = this
 
     const daysInMonth = getDaysInMonth(date)
     const firstDateOfMonth = startOfMonth(date)
@@ -118,6 +120,7 @@ export default class DateMenu {
         isStartDate: dateEq(initialStartDate, d),
         isEndDate: dateEq(initialEndDate, d),
         isSelected: (resCompareStart <= 0) && (resCompareEnd >= 0),
+        isDisabled: noFuture && isFuture(d),
         isToday: (today === formatDate(d)),
         day
       }
@@ -191,6 +194,9 @@ export default class DateMenu {
     if (row.type === CELL_TYPE_EMPTY) {
       return '<td></td>'
     }
+    if (row.isDisabled) {
+      return `<td class="cell js-disabled">${row.day}</td>`
+    }
     if (row.isStartDate || row.isEndDate) {
       return `<td class="cell selected-ex" data-date-table-cell>${row.day}</td>`
     }

data/src/js/components/SearchDropdown.js

@@ -25,12 +25,15 @@ export default class SearchDropdown {
     this.offset = options.offset || 14
     this.offsetTop = options.offsetTop || 0
     this.offsetLeft = options.offsetLeft || 0
+    this.noDataMsg = options.noDataMsg || '沒有資料'
     this.isMenuVisible = false
     this.lastKeyword = null
     this.selectedIndex = 0
     this.items = []
     this.compositionStarted = false
     this.compositionJustEnded = false
+    this.noDataMsgVisible = false
+    this.loading = true
     this.init()
   }
 
@@ -77,6 +80,19 @@ export default class SearchDropdown {
 
     inputWrap.appendChild(input)
 
+    const loader = document.createElement('div')
+    loader.className = 'search-dropdown-loader'
+
+    loader.innerHTML = `
+      <div class="fb-loader">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    `
+
+    inputWrap.appendChild(loader)
+
     if (this.options.placeholder) {
       input.setAttribute('placeholder', this.options.placeholder)
     }
@@ -88,6 +104,20 @@ export default class SearchDropdown {
     this.menu = menu
     this.input = input
     this.menuContent = menuContent
+    this.loader = loader
+  }
+
+  setLoading(loading) {
+    this.loading = loading
+
+    if (loading) {
+      this.input.classList.add('loading')
+      this.loader.style.display = 'block'
+    }
+    else {
+      this.input.classList.remove('loading')
+      this.loader.style.display = 'none'
+    }
   }
 
   setMenuContentActive(active) {
@@ -150,15 +180,23 @@ export default class SearchDropdown {
   }
 
   renderMenu() {
-    const { menuContent, items } = this
-    menuContent.innerHTML = items.map((item, i) => {
-      return this.options.renderItem(item, i, (this.selectedIndex === i))
+    const { menuContent, items, selectedIndex } = this
+    const { renderItem } = this.options
+
+    const menuItems = items.map((item, i) => {
+      return renderItem(item, i, (selectedIndex === i))
     })
-      .join('')
+
+    if (this.noDataMsgVisible) {
+      menuItems.unshift(`<div class="search-dropdown-menu-item">${this.noDataMsg}</div>`)
+    }
+
+    menuContent.innerHTML = menuItems.join('')
+
     this.setMenuContentActive(items.length > 0)
 
     const menuItemEls = this.getMenuItemEls()
-    const selectedEl = menuItemEls[this.selectedIndex]
+    const selectedEl = menuItemEls[selectedIndex]
     if (selectedEl) {
       const scrollTop = menuContent.scrollTop
       const contentTop = menuContent.offsetTop
@@ -168,10 +206,10 @@ export default class SearchDropdown {
       const elBottom = elTop + elHeight
 
       if (elTop < contentTop) {
-        this.menuContent.scrollTop -= elHeight
+        menuContent.scrollTop -= elHeight
       }
       else if (elBottom > contentBottom) {
-        this.menuContent.scrollTop += elHeight
+        menuContent.scrollTop += elHeight
       }
     }
   }
@@ -187,8 +225,19 @@ export default class SearchDropdown {
     }
     this.resetSelectedIndex()
     this.lastKeyword = keyword
+    this.noDataMsgVisible = false
+    this.setItems([])
+
+    this.setLoading(true)
+
     const items = await this.options.getData(keyword)
 
+    this.setLoading(false)
+
+    if (items.length === 0) {
+      this.noDataMsgVisible = true
+    }
+
     if (this.lastKeyword === this.input.value) {
       this.setItems(items)
     }
@@ -198,17 +247,10 @@ export default class SearchDropdown {
     return Array.from(this.menuContent.querySelectorAll('[data-item]'))
   }
 
-  findClickedItem(target, parent) {
-    const rows = this.getMenuItemEls()
-    let node = target
-    while (node.parentNode !== parent) {
-      if ('item' in node.dataset) {
-        const index = rows.findIndex(row => row === node)
-        return this.items[index]
-      }
-      node = node.parentNode
-    }
-    return null
+  findClickedItem(target) {
+    const index = this.getMenuItemEls()
+      .findIndex(item => (target === item) || (item.contains(target)))
+    return this.items[index]
   }
 
   isInputFocused() {
@@ -350,5 +392,9 @@ export default class SearchDropdown {
 
   destroy() {
     this.menu.remove()
+    this.menu = null
+    this.input = null
+    this.menuContent = null
+    this.loader = null
   }
 }

data/src/js/components/TagInput.js

@@ -170,6 +170,11 @@ export default class TagInput {
     const { input, suggestInput } = this
     const inputValue = suggestInput.value || input.value
     const res = await this.validate(inputValue)
+    if (res.clear) {
+      input.value = ''
+      suggestInput.value = ''
+      return
+    }
     if (! res.isTag) {
       return this.shake()
     }
@@ -243,7 +248,7 @@ export default class TagInput {
 
   destroy() {
     this.tags.forEach(tag => tag.remove())
-    this.inputDiv.remove()
+    this.inputDiv && this.inputDiv.remove()
     this.canvas = null
     this.input = null
     this.suggestInput = null

data/src/sass/components/_date-menu.scss

@@ -70,6 +70,10 @@
         border-style: solid;
         border-color: #e3e8ee;
       }
+      &.cell.js-disabled {
+        opacity: .4;
+        cursor: not-allowed;
+      }
       &.cell.today {
         background-color: #fffef4;
       }

data/src/sass/components/_search-dropdown.scss

@@ -2,10 +2,24 @@
   width: 420px;
   padding: 0;
   .search-dropdown-input-wrap {
+    position: relative;
     padding: 14px;
   }
   .search-dropdown-input.input {
     width: 100%;
+    &.loading {
+      padding-right: 40px;
+    }
+  }
+  .search-dropdown-loader {
+    display: none;
+    position: absolute;
+    right: 20px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    height: 32px;
   }
   .search-dropdown-menu.active {
     border-top: 1px solid rgba(60, 66, 87, .16);

data/src/sass/components/_spinner.scss

@@ -6,6 +6,16 @@
     transform: rotate(360deg);
   }
 }
+@keyframes fb-loader {
+  0% {
+    top: 6px;
+    height: 25px;
+  }
+  50%, 100% {
+    top: 10px;
+    height: 12px;
+  }
+}
 
 .loader {
   margin: 50px auto;
@@ -77,3 +87,30 @@
 .ring-loader div:nth-child(3) {
   animation-delay: -0.15s;
 }
+
+.fb-loader {
+  display: inline-block;
+  position: relative;
+  @include size(32px);
+}
+
+.fb-loader div {
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  width: 4px;
+  background: $bg-primary-ex;
+  animation: fb-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+.fb-loader div:nth-child(1) {
+  left: 6px;
+  animation-delay: -0.24s;
+}
+.fb-loader div:nth-child(2) {
+  left: 14px;
+  animation-delay: -0.12s;
+}
+.fb-loader div:nth-child(3) {
+  left: 22px;
+  animation-delay: 0;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.268
+  version: 0.0.273
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-07 00:00:00.000000000 Z
+date: 2020-12-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc