beyond-rails 0.0.227 → 0.0.232

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4240bb4020f2fa8d7a190f8026ba1bc9434e0a20ccc545156ff5935ad174f76c
-  data.tar.gz: b0eef0c93430d3955695451c4db43fb350dfbd02afe9bf16e1a49d5df3f543e0
+  metadata.gz: 2b9562fcd46c8ebb8eb393ebbde56ddc3ace49fc91dc072c864586b7efa9c7f7
+  data.tar.gz: 5e2ff6d2ad3c8f5df2eb4a3ee3ec81dd2edcd50149a3e957d8dba12ad4ac6077
 SHA512:
-  metadata.gz: b050adf27c9cf90bae213bd72144f227b2ff831c5c2b768380ee44473fa31f1b885032c66ff66c31874a78025a07f9f00238ced01ce861d68d644a2bd5f265a6
-  data.tar.gz: e763f9218b0ea16809f0ad13f6027b06758e26604789f85b44e54341a3ae88ff0027abc36b6a3edfb5f8d29c90794cd959bc809e820a5f4f907e8a3b1eab0f91
+  metadata.gz: 2d856bb1e158d85d71618b26d0cde2d5bab43a9cdad0cc27f4175b400bcb19ab47274609b9b5b6e6e22c7664db7aeb035b6b7db9b91ffb84e915ddfd761d1838
+  data.tar.gz: 4205d83e358f13508a52f1ed92b41aef10bf684fcc9f86ce3bb0543dc4393ee838c9dfe6ba679dc1ec5f269768a6f9f6d352d7e523ba9dd09d14d449df1b8358

data/src/js/components/Dropdown.js

@@ -51,15 +51,28 @@ export default class Dropdown {
     this.addEvents()
   }
 
-  hideMenu() {
+  restoreMenuAttrs() {
+    const { menu, place, align } = this
+    if (place) {
+      menu.dataset.place = place
+    }
+    if (align) {
+      menu.dataset.align = align
+    }
+  }
+
+  hideMenu(immediate = false) {
     const { menu } = this
     menu.style.transform = 'scale(.8)'
     menu.style.opacity = 0
-    setTimeout(() => menu.remove(), 300)
 
-    // recover
-    menu.dataset.place = this.place
-    menu.dataset.align = this.align
+    if (immediate) {
+      menu.remove()
+    }
+    else {
+      setTimeout(() => menu.remove(), 300)
+    }
+    this.restoreMenuAttrs()
     this.isMenuVisible = false
   }
 
@@ -145,4 +158,13 @@ export default class Dropdown {
       this.adjustMenuPos()
     }, 300))
   }
+
+  destroy() {
+    // prevent next re-bind error
+    const { menu } = this
+    if (menu) {
+      this.hideMenu(true)
+      document.body.appendChild(menu)
+    }
+  }
 }

data/src/js/components/SearchDropdown.js

@@ -20,8 +20,11 @@ export default class SearchDropdown {
     this.options.itemClick = options.itemClick || itemClick
     this.options.change = options.change || noop
     this.options.wait = options.wait || 50
-    this.place = 'bottom'
-    this.align = 'left'
+    this.place = options.place || 'bottom'
+    this.align = options.align || 'left'
+    this.offset = options.offset || 14
+    this.offsetTop = options.offsetTop || 0
+    this.offsetLeft = options.offsetLeft || 0
     this.isMenuVisible = false
     this.lastKeyword = null
     this.selectedIndex = 0
@@ -53,7 +56,16 @@ export default class SearchDropdown {
   }
 
   appendMenu() {
+
     const menu = document.createElement('div')
+    const { dataset } = menu
+
+    dataset.place = this.place
+    dataset.align = this.align
+    dataset.offset = this.offset
+    dataset.offsetTop = this.offsetTop
+    dataset.offsetLeft = this.offsetLeft
+
     menu.className = 'search-dropdown dropdown-menu'
 
     const inputWrap = document.createElement('div')
@@ -100,15 +112,19 @@ export default class SearchDropdown {
   showMenu() {
     const { input, menu } = this
     this.getData(input.value)
+
     menu.style.display = 'block'
     menu.style.opacity = 0
     menu.style.transform = 'scale(.8)'
     document.body.appendChild(menu)
-    this.adjustMenuPos()
-    menu.style.transform = 'scale(1)'
-    menu.style.opacity = 1
-    this.isMenuVisible = true
-    this.input.focus()
+
+    setTimeout(() => {
+      this.adjustMenuPos()
+      menu.style.transform = 'scale(1)'
+      menu.style.opacity = 1
+      this.isMenuVisible = true
+      this.input.focus()
+    }, 0)
   }
 
   toggleMenu() {
@@ -116,22 +132,18 @@ export default class SearchDropdown {
   }
 
   adjustMenuPos() {
-    const { menu, dom } = this
-    const { dataset } = menu
-    const offsetLeft = ('offsetLeft' in dataset) ? parseInt(dataset.offsetLeft, 10) : 0
-    const offsetTop = ('offsetTop' in dataset) ? parseInt(dataset.offsetTop, 10) : 0
-
+    const { menu, dom, offset, offsetLeft, offsetTop } = this
     const { pos, place, align } = getFloatedTargetPos({
       src: dom,
       target: menu,
       place: this.place,
       align: this.align,
-      offset: parseInt(dom.dataset.offset, 10) || 14,
+      offset,
       offsetLeft,
       offsetTop
     })
-    dataset.place = place
-    dataset.align = align
+    menu.dataset.place = place
+    menu.dataset.align = align
     menu.style.left = toPixel(pos.left)
     menu.style.top = toPixel(pos.top)
   }

data/src/js/components/TagInput.js

@@ -0,0 +1,144 @@
+import raf from '../utils/raf'
+import supportDom from '../decorators/supportDom'
+import getKey from '../utils/getKey'
+
+@supportDom
+export default class TagInput {
+
+  constructor(dom, options = {}) {
+    this.dom = dom
+    this.defaultInputWidth = 128
+    this.validate = options.validate || (() => ({ isTag: true }))
+    this.change = options.change || (() => {})
+    this.isComposing = false
+    this.raf = raf
+    this.tags = []
+    this.init()
+  }
+
+  init() {
+    this.setup()
+    this.addEvents()
+  }
+
+  setup() {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.style.width = this.defaultInputWidth + 'px'
+    this.input = input
+    this.canvas = document.createElement('canvas')
+    this.dom.append(input)
+  }
+
+  getTextWidth(text, font) {
+    const context = this.canvas.getContext('2d')
+    context.font = font
+    const metrics = context.measureText(text)
+    return metrics.width
+  }
+
+  getNextInputWidth(textWidth) {
+    const { defaultInputWidth } = this
+    // spaces before text and after text
+    const delta = 5
+    const nextWidth = textWidth + delta
+    if (nextWidth < defaultInputWidth) {
+      return defaultInputWidth
+    }
+    return nextWidth
+  }
+
+  shake() {
+    this.dom.classList.add('shake')
+    setTimeout(() => {
+      this.dom.classList.remove('shake')
+    }, 500)
+  }
+
+  async addTagIfNeeded(value) {
+    const { input } = this
+    const inputValue = input.value
+    const res = await this.validate(inputValue)
+    if (! res.isTag) {
+      return this.shake()
+    }
+    const classname = res.classname ? ` ${res.classname}` : ''
+    const tag = document.createElement('div')
+
+    tag.className = 'tag' + classname
+    tag.textContent = inputValue
+
+    const btn = document.createElement('button')
+    btn.type = 'button'
+
+    // https://wesbos.com/times-html-entity-close-button
+    btn.textContent = '×'
+    const handleBtnClick = () => {
+      this.tags = this.tags.filter(row => row.elem !== tag)
+      btn.removeEventListener('click', handleBtnClick)
+      tag.remove()
+      this.change(this.tags.slice())
+    }
+    btn.addEventListener('click', handleBtnClick)
+    tag.appendChild(btn)
+
+    this.tags.push({ elem: tag, remove: handleBtnClick, res })
+    this.dom.insertBefore(tag, input)
+    input.value = ''
+
+    this.change(this.tags.slice())
+  }
+
+  removeTagIfNeeded() {
+    const lastTag = this.tags[this.tags.length - 1]
+    if ((this.input.value === '') && lastTag) {
+      lastTag.remove()
+    }
+  }
+
+  addEvents() {
+    const { input } = this
+    const font = window.getComputedStyle(input)
+      .getPropertyValue('font')
+
+    this.addEvent(this.dom, 'click', event => {
+      if (event.target === this.dom) {
+        this.input.focus()
+      }
+    })
+
+    this.addEvent(input, 'compositionstart', event => {
+      this.isComposing = true
+    })
+
+    this.addEvent(input, 'compositionend', event => {
+      this.isComposing = false
+    })
+
+    let lastValue = ''
+
+    this.addEvent(input, 'keydown', async event => {
+      const key = getKey(event)
+      if ((key === 'enter') && (! this.isComposing)) {
+        await this.addTagIfNeeded(input.value)
+      }
+      else if ((key === 'backspace') && (lastValue === '')) {
+        this.removeTagIfNeeded()
+      }
+      lastValue = input.value
+    })
+
+    this.addEvent(input, 'input', event => {
+      this.raf(() => {
+        const textWidth = this.getTextWidth(input.value, font)
+        const nextWidth = this.getNextInputWidth(textWidth)
+        input.style.width = nextWidth + 'px'
+      })
+    })
+  }
+
+  destroy() {
+    this.tags.forEach(tag => tag.remove())
+    this.input.remove()
+  }
+}

data/src/js/decorators/chartCommon.js

@@ -1,4 +1,4 @@
-import isDef from '../utils/isDef'
+import raf from '../utils/raf'
 import isUndef from '../utils/isUndef'
 import { getDomPos, range, toPixel, isFunction } from '../utils'
 
@@ -6,6 +6,11 @@ export default function chartCommon(target) {
 
   return class extends target {
 
+    constructor(...args) {
+      super(...args)
+      this.raf = raf
+    }
+
     init() {
       this.layers = []
       if (isFunction(super.init)) {
@@ -159,13 +164,6 @@ export default function chartCommon(target) {
       return this.ctx.measureText(value).width
     }
 
-    raf(fn) {
-      if (isDef(window.requestAnimationFrame)) {
-        return window.requestAnimationFrame(fn)
-      }
-      return fn()
-    }
-
     removeAllLayers() {
       const { dom } = this
       this.layers.forEach(layer => {

data/src/js/index.js

@@ -20,6 +20,7 @@ import Navbar from './components/Navbar'
 import Radio from './components/Radio'
 import SearchDropdown from './components/SearchDropdown'
 import Sidebar from './components/Sidebar'
+import TagInput from './components/TagInput'
 import Tabbox from './components/Tabbox'
 import Timepicker from './components/Timepicker'
 import Toast from './components/Toast'
@@ -55,6 +56,7 @@ export {
   Radio,
   SearchDropdown,
   Sidebar,
+  TagInput,
   Tabbox,
   Timepicker,
   Toast,

data/src/js/utils/getKey.js

@@ -1,4 +1,5 @@
 const keyMap = {
+  8: 'backspace',
   13: 'enter',
   17: 'ctrl',
   27: 'esc',

data/src/js/utils/isStr.js

@@ -0,0 +1,3 @@
+export default function isStr(value) {
+  return (typeof value === 'string')
+}

data/src/js/utils/raf.js

@@ -0,0 +1,8 @@
+import isDef from './isDef'
+
+export default function raf(fn) {
+  if (isDef(window.requestAnimationFrame)) {
+    return window.requestAnimationFrame(fn)
+  }
+  return fn()
+}

data/src/sass/_animations.scss

@@ -0,0 +1,13 @@
+@keyframes shake {
+  0% { transform: translate(1px, 1px) rotate(0deg); }
+  10% { transform: translate(-1px, -2px) rotate(-1deg); }
+  20% { transform: translate(-3px, 0px) rotate(1deg); }
+  30% { transform: translate(3px, 2px) rotate(0deg); }
+  40% { transform: translate(1px, -1px) rotate(1deg); }
+  50% { transform: translate(-1px, 2px) rotate(-1deg); }
+  60% { transform: translate(-3px, 1px) rotate(0deg); }
+  70% { transform: translate(3px, 1px) rotate(-1deg); }
+  80% { transform: translate(-1px, -1px) rotate(1deg); }
+  90% { transform: translate(1px, 2px) rotate(0deg); }
+  100% { transform: translate(1px, -2px) rotate(-1deg); }
+}

data/src/sass/_beyond.scss

@@ -5,6 +5,7 @@
 @import './vendor/_turbolink';
 @import './base/_background';
 @import './base/_typography';
+@import './_animations';
 @import './_main';
 @import './layout/_border-util';
 @import './layout/_col';
@@ -44,6 +45,7 @@
 @import './components/_tabbox';
 @import './components/_table';
 @import './components/_tag';
+@import './components/_tag-input';
 @import './components/_time-input';
 @import './components/_time-menu';
 @import './components/_toast';

data/src/sass/components/_form.scss

@@ -345,6 +345,9 @@ input[type="file"] {
   > .form-control {
     flex: 1 1 0%;
   }
+  .invalid-feedback {
+    flex-basis: 100%;
+  }
 }
 
 .input-group-text {

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

@@ -1,4 +1,5 @@
 .search-dropdown.dropdown-menu {
+  width: 420px;
   padding: 0;
   .search-dropdown-input-wrap {
     padding: 14px;
@@ -26,8 +27,5 @@
       color: #6772e5;
       margin-right: .7em;
     }
-    > span {
-      max-width: 420px;
-    }
   }
 }

data/src/sass/components/_tag-input.scss

@@ -0,0 +1,26 @@
+.tag-input {
+  cursor: text;
+  background-color: #fff;
+  padding: .4em .4em 0 .4em;
+  min-height: 40px;
+  > input {
+    border: 0;
+    &:focus {
+      outline: none;
+    }
+  }
+  .tag {
+    padding-right: 0;
+    display: inline-flex;
+    align-items: center;
+    margin-right: .7em;
+    margin-bottom: .7em;
+    > button {
+      border: 0;
+      background-color: transparent;
+    }
+  }
+  &.shake {
+    animation: shake .5s;
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.227
+  version: 0.0.232
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-12 00:00:00.000000000 Z
+date: 2020-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -79,6 +79,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: will_paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.3.0
 description: 
 email: kmsh3ng@gmail.com
 executables: []
@@ -130,6 +144,7 @@ files:
 - src/js/components/SearchDropdown.js
 - src/js/components/Sidebar.js
 - src/js/components/Tabbox.js
+- src/js/components/TagInput.js
 - src/js/components/TimeInput.js
 - src/js/components/TimeMenu.js
 - src/js/components/Timepicker.js
@@ -180,11 +195,14 @@ files:
 - src/js/utils/index.js
 - src/js/utils/isDef.js
 - src/js/utils/isInt.js
+- src/js/utils/isStr.js
 - src/js/utils/isTouchDevice.js
 - src/js/utils/isUndef.js
 - src/js/utils/msToS.js
 - src/js/utils/promisify.js
+- src/js/utils/raf.js
 - src/js/utils/unbindAll.js
+- src/sass/_animations.scss
 - src/sass/_beyond-sprockets.scss
 - src/sass/_beyond.scss
 - src/sass/_main.scss
@@ -225,6 +243,7 @@ files:
 - src/sass/components/_switch.scss
 - src/sass/components/_tabbox.scss
 - src/sass/components/_table.scss
+- src/sass/components/_tag-input.scss
 - src/sass/components/_tag.scss
 - src/sass/components/_time-input.scss
 - src/sass/components/_time-menu.scss