@reviewpush/rp-treeselect 0.0.0

package/package.json

@@ -0,0 +1,140 @@
+{
+  "name": "@reviewpush/rp-treeselect",
+  "version": "0.0.0",
+  "repository": "reviewpush/rp-treeselect",
+  "main": "dist/rp-treeselect.cjs.js",
+  "unpkg": "dist/rp-treeselect.umd.min.js",
+  "css": "dist/rp-treeselect.min.css",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build-library": "node build/build-library.js",
+    "build-docs": "rimraf gh-pages && mkdir gh-pages && node build/build-docs.js",
+    "preview-docs": "http-server gh-pages",
+    "gh-pages": "npm run build-docs && gh-pages --dist gh-pages --branch gh-pages --dotfiles",
+    "cleanup-cov": "rimraf test/unit/coverage",
+    "unit": "npm run cleanup-cov && karma start test/unit/karma.conf.js --watch",
+    "testonly": "npm run cleanup-cov && karma start test/unit/karma.config.js --single-run",
+    "test": "npm run testonly",
+    "pretest": "npm run lint",
+    "lint:js": "eslint --ext .js --ext .vue --cache --cache-location node_modules/.cache/eslint --rule 'no-console: 2' .",
+    "lint:css": "stylelint '**/*.less'",
+    "lint": "npm run lint:js && npm run lint:css",
+    "verify-builds": "size-limit && node build/verify-builds.js",
+    "finish": "npm test && npm run build-library && npm run verify-builds"
+  },
+  "pre-commit": "lint",
+  "dependencies": {
+    "@babel/runtime": "^7.3.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "easings-css": "^1.0.0",
+    "fuzzysearch": "^1.0.3",
+    "is-promise": "^2.1.0",
+    "lodash": "^4.0.0",
+    "material-colors": "^1.2.6",
+    "watch-size": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.3.1",
+    "@size-limit/preset-big-lib": "^2.0.2",
+    "@vue/test-utils": "1.0.0-beta.16",
+    "autoprefixer": "^9.4.6",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-istanbul": "^5.0.1",
+    "babel-plugin-transform-vue-jsx": "^4.0.1",
+    "cache-loader": "^4.0.1",
+    "chalk": "^2.3.2",
+    "codecov": "^3.0.0",
+    "connect-history-api-fallback": "^1.5.0",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^3.0.0",
+    "entities": "^2.0.0",
+    "eslint": "^6.1.0",
+    "eslint-config-riophae": "^0.10.0",
+    "eslint-friendly-formatter": "^4.0.0",
+    "eslint-import-resolver-webpack": "^0.11.0",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-import": "^2.15.0",
+    "eslint-plugin-react": "^7.10.0",
+    "eslint-plugin-unicorn": "^12.1.0",
+    "eslint-plugin-vue": "^6.0.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.16.3",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "gh-pages": "^2.0.0",
+    "html-webpack-plugin": "^3.1.0",
+    "http-server": "^0.11.1",
+    "jasmine-core": "^3.1.0",
+    "jstransformer-markdown-it": "^2.0.0",
+    "karma": "^4.0.0",
+    "karma-chrome-launcher": "^3.0.0",
+    "karma-coverage": "^2.0.1",
+    "karma-jasmine": "^2.0.0",
+    "karma-jasmine-matchers": "^4.0.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.32",
+    "karma-webpack": "^4.0.2",
+    "less": "^3.0.1",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "open": "^7.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.0",
+    "ora": "^4.0.1",
+    "postcss-loader": "^3.0.0",
+    "pre-commit": "^1.2.2",
+    "pug": "^2.0.0",
+    "pug-loader": "^2.4.0",
+    "puppeteer": "^2.0.0",
+    "raw-loader": "^3.0.0",
+    "regenerator-runtime": "^0.13.1",
+    "rimraf": "^3.0.0",
+    "run-series": "^1.1.8",
+    "script-loader": "^0.7.2",
+    "shallow-equal": "^1.0.0",
+    "shelljs": "^0.8.1",
+    "string.prototype.repeat": "^0.2.0",
+    "strip-indent": "^3.0.0",
+    "stylelint": "^11.0.0",
+    "stylelint-config-xo-space": "^0.13.0",
+    "terser-webpack-plugin": "^2.1.0",
+    "url-loader": "^2.0.1",
+    "vodal": "^2.3.3",
+    "vue": "^2.2.0",
+    "vue-loader": "^15.6.0",
+    "vue-style-loader": "^4.0.2",
+    "vue-template-compiler": "^2.4.4",
+    "vuex": "^3.0.1",
+    "webpack": "^4.6.0",
+    "webpack-bundle-analyzer": "^3.0.2",
+    "webpack-cdn-plugin": "^3.1.4",
+    "webpack-dev-middleware": "^3.1.0",
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-merge": "^4.1.0",
+    "webpack-node-externals": "^1.7.2",
+    "yaku": "^0.19.3"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.0"
+  },
+  "keywords": [
+    "vue",
+    "component",
+    "tree",
+    "treeview",
+    "select",
+    "dropdown",
+    "treeselect",
+    "multiselect",
+    "form",
+    "control",
+    "input",
+    "ui"
+  ]
+}

package/src/components/Control.vue

@@ -0,0 +1,153 @@
+<script>
+  import { onLeftClick, isPromise } from '../utils'
+  import SingleValue from './SingleValue'
+  import MultiValue from './MultiValue'
+  import DeleteIcon from './icons/Delete'
+  import ArrowIcon from './icons/Arrow'
+
+  export default {
+    name: 'rp-treeselect--control',
+    inject: [ 'instance' ],
+
+    computed: {
+      /* eslint-disable valid-jsdoc */
+      /**
+       * Should show the "×" button that resets value?
+       * @return {boolean}
+       */
+      shouldShowX() {
+        const { instance } = this
+
+        return (
+          instance.clearable &&
+          !instance.disabled &&
+          instance.hasValue &&
+          (this.hasUndisabledValue || instance.allowClearingDisabled)
+        )
+      },
+
+      /**
+       * Should show the arrow button that toggles menu?
+       * @return {boolean}
+       */
+      shouldShowArrow() {
+        const { instance } = this
+
+        if (!instance.alwaysOpen) return true
+        // Even with `alwaysOpen: true`, sometimes the menu is still closed,
+        // e.g. when the control is disabled.
+        return !instance.menu.isOpen
+      },
+
+      /**
+       * Has any undisabled option been selected?
+       * @type {boolean}
+       */
+      hasUndisabledValue() {
+        const { instance } = this
+
+        return (
+          instance.hasValue &&
+          instance.internalValue.some(id => !instance.getNode(id).isDisabled)
+        )
+      },
+      /* eslint-enable valid-jsdoc */
+    },
+
+    methods: {
+      renderX() {
+        const { instance } = this
+        const title = instance.multiple ? instance.clearAllText : instance.clearValueText
+
+        if (!this.shouldShowX) return null
+
+        return (
+          <div class="rp-treeselect__x-container" title={title} onMousedown={this.handleMouseDownOnX}>
+            <DeleteIcon class="rp-treeselect__x" />
+          </div>
+        )
+      },
+
+      renderArrow() {
+        const { instance } = this
+        const arrowClass = {
+          'rp-treeselect__control-arrow': true,
+          'rp-treeselect__control-arrow--rotated': instance.menu.isOpen,
+        }
+
+        if (!this.shouldShowArrow) return null
+
+        return (
+          <div class="rp-treeselect__control-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
+            <ArrowIcon class={arrowClass} />
+          </div>
+        )
+      },
+
+      handleMouseDownOnX: onLeftClick(function handleMouseDownOnX(evt) {
+        /**
+         * We don't use async/await here because we don't want
+         * to rely on Babel polyfill or regenerator runtime.
+         * See: https://babeljs.io/docs/plugins/transform-regenerator/
+         * We also don't want to assume there is a global `Promise`
+         * class, since we are targeting to support IE9 without the
+         * need of any polyfill.
+         */
+
+        evt.stopPropagation()
+        evt.preventDefault()
+
+        const { instance } = this
+        const result = instance.beforeClearAll()
+        const handler = shouldClear => {
+          if (shouldClear) instance.clear()
+        }
+
+        if (isPromise(result)) {
+          // The handler will be called async.
+          result.then(handler)
+        } else {
+          // Keep the same behavior here.
+          setTimeout(() => handler(result), 0)
+          // Also, note that IE9 requires:
+          //   setTimeout(() => fn(...args), delay)
+          // Instead of:
+          //   setTimeout(fn, delay, ...args)
+        }
+      }),
+
+      handleMouseDownOnArrow: onLeftClick(function handleMouseDownOnArrow(evt) {
+        evt.preventDefault()
+        evt.stopPropagation()
+
+        const { instance } = this
+
+        // Focus the input or prevent blurring.
+        instance.focusInput()
+        instance.toggleMenu()
+      }),
+
+      // This is meant to be called by child `<Value />` component.
+      renderValueContainer(children) {
+        return (
+          <div class="rp-treeselect__value-container">
+            {children}
+          </div>
+        )
+      },
+    },
+
+    render() {
+      const { instance } = this
+      const ValueContainer = instance.single ? SingleValue : MultiValue
+
+      return (
+        <div class="rp-treeselect__control" onMousedown={instance.handleMouseDown}>
+          <ValueContainer ref="value-container" />
+          {this.renderX()}
+          {this.renderArrow()}
+        </div>
+      )
+    },
+  }
+</script>

package/src/components/HiddenFields.vue

@@ -0,0 +1,37 @@
+<script>
+  import { isNaN } from '../utils'
+
+  function stringifyValue(value) {
+    if (typeof value === 'string') return value
+    // istanbul ignore else
+    if (value != null && !isNaN(value)) return JSON.stringify(value)
+    // istanbul ignore next
+    return ''
+  }
+
+  export default {
+    name: 'rp-treeselect--hidden-fields',
+    inject: [ 'instance' ],
+    functional: true,
+
+    render(_, context) {
+      const { instance } = context.injections
+
+      if (!instance.name || instance.disabled || !instance.hasValue) return null
+
+      let stringifiedValues = instance.internalValue.map(stringifyValue)
+
+      if (instance.multiple && instance.joinValues) stringifiedValues = [
+        stringifiedValues.join(instance.delimiter),
+      ]
+
+      return stringifiedValues.map((stringifiedValue, i) => (
+        <input type="hidden"
+          name={instance.name}
+          value={stringifiedValue}
+          key={'hidden-field-' + i}
+        />
+      ))
+    },
+  }
+</script>

package/src/components/Input.vue

@@ -0,0 +1,295 @@
+<script>
+  import { debounce, deepExtend, includes } from '../utils'
+  import { MIN_INPUT_WIDTH, KEY_CODES, INPUT_DEBOUNCE_DELAY } from '../constants'
+
+  const keysThatRequireMenuBeingOpen = [
+    KEY_CODES.ENTER,
+    KEY_CODES.END,
+    KEY_CODES.HOME,
+    KEY_CODES.ARROW_LEFT,
+    KEY_CODES.ARROW_UP,
+    KEY_CODES.ARROW_RIGHT,
+    KEY_CODES.ARROW_DOWN,
+  ]
+
+  export default {
+    name: 'rp-treeselect--input',
+    inject: [ 'instance' ],
+
+    data: () => ({
+      inputWidth: MIN_INPUT_WIDTH,
+      value: '',
+    }),
+
+    computed: {
+      needAutoSize() {
+        const { instance } = this
+
+        return (
+          instance.searchable &&
+          !instance.disabled &&
+          instance.multiple
+        )
+      },
+
+      inputStyle() {
+        return {
+          width: this.needAutoSize ? `${this.inputWidth}px` : null,
+        }
+      },
+    },
+
+    watch: {
+      'instance.trigger.searchQuery'(newValue) {
+        this.value = newValue
+      },
+
+      value() {
+        // istanbul ignore else
+        if (this.needAutoSize) this.$nextTick(this.updateInputWidth)
+      },
+    },
+
+    created() {
+      this.debouncedCallback = debounce(
+        this.updateSearchQuery,
+        INPUT_DEBOUNCE_DELAY,
+        { leading: true, trailing: true },
+      )
+    },
+
+    methods: {
+      clear() {
+        this.onInput({
+          target: { value: '' },
+        })
+      },
+
+      focus() {
+        const { instance } = this
+
+        if (!instance.disabled) {
+          this.$refs.input && this.$refs.input.focus()
+        }
+      },
+
+      blur() {
+        this.$refs.input && this.$refs.input.blur()
+      },
+
+      onFocus() {
+        const { instance } = this
+
+        instance.trigger.isFocused = true
+        // istanbul ignore else
+        if (instance.openOnFocus) instance.openMenu()
+      },
+
+      onBlur() {
+        const { instance } = this
+        const menu = instance.getMenu()
+
+        // #15
+        // istanbul ignore next
+        if (menu && document.activeElement === menu) {
+          return this.focus()
+        }
+
+        instance.trigger.isFocused = false
+        instance.closeMenu()
+      },
+
+      onInput(evt) {
+        const { value } = evt.target
+
+        this.value = value
+
+        if (value) {
+          this.debouncedCallback()
+        } else {
+          this.debouncedCallback.cancel()
+          this.updateSearchQuery()
+        }
+      },
+
+      // 用 keyUp 事件存在一个问题，删除输入框最后一个字符也会导致取消选中最后一项
+      onKeyDown(evt) {
+        const { instance } = this
+        // https://css-tricks.com/snippets/javascript/javascript-keycodes/
+        // https://stackoverflow.com/questions/4471582/javascript-keycode-vs-which
+        const key = 'which' in evt ? evt.which : /* istanbul ignore next */ evt.keyCode
+
+        if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey)
+          return
+
+        if (!instance.menu.isOpen && includes(keysThatRequireMenuBeingOpen, key)) {
+          evt.preventDefault()
+          return instance.openMenu()
+        }
+
+        switch (key) {
+        case KEY_CODES.BACKSPACE: {
+          if (instance.backspaceRemoves && !this.value.length) {
+            instance.removeLastValue()
+          }
+          break
+        }
+        case KEY_CODES.ENTER: {
+          evt.preventDefault()
+          if (instance.menu.current === null) return
+          const current = instance.getNode(instance.menu.current)
+          if (current.isBranch && instance.disableBranchNodes) return
+          instance.select(current)
+          break
+        }
+        case KEY_CODES.ESCAPE: {
+          if (this.value.length) {
+            this.clear()
+          } else if (instance.menu.isOpen) {
+            instance.closeMenu()
+          }
+          break
+        }
+        case KEY_CODES.END: {
+          evt.preventDefault()
+          instance.highlightLastOption()
+          break
+        }
+        case KEY_CODES.HOME: {
+          evt.preventDefault()
+          instance.highlightFirstOption()
+          break
+        }
+        case KEY_CODES.ARROW_LEFT: {
+          const current = instance.getNode(instance.menu.current)
+          if (current.isBranch && instance.shouldExpand(current)) {
+            evt.preventDefault()
+            instance.toggleExpanded(current)
+          } else if (!current.isRootNode && (current.isLeaf || (current.isBranch && !(instance.shouldExpand(current))))) {
+            evt.preventDefault()
+            instance.setCurrentHighlightedOption(current.parentNode)
+          }
+          break
+        }
+        case KEY_CODES.ARROW_UP: {
+          evt.preventDefault()
+          instance.highlightPrevOption()
+          break
+        }
+        case KEY_CODES.ARROW_RIGHT: {
+          const current = instance.getNode(instance.menu.current)
+          if (current.isBranch && !instance.shouldExpand(current)) {
+            evt.preventDefault()
+            instance.toggleExpanded(current)
+          }
+          break
+        }
+        case KEY_CODES.ARROW_DOWN: {
+          evt.preventDefault()
+          instance.highlightNextOption()
+          break
+        }
+        case KEY_CODES.DELETE: {
+          if (instance.deleteRemoves && !this.value.length) {
+            instance.removeLastValue()
+          }
+          break
+        }
+        default: {
+          // istanbul ignore else
+          instance.openMenu()
+        }
+        }
+      },
+
+      onMouseDown(evt) {
+        // istanbul ignore next
+        if (this.value.length) {
+          // Prevent it from bubbling to the top level and triggering `preventDefault()`
+          // to make the textbox unselectable
+          evt.stopPropagation()
+        }
+      },
+
+      renderInputContainer() {
+        const { instance } = this
+        const props = {}
+        const children = []
+
+        if (instance.searchable && !instance.disabled) {
+          children.push(this.renderInput())
+          if (this.needAutoSize) children.push(this.renderSizer())
+        }
+
+        if (!instance.searchable) {
+          deepExtend(props, {
+            on: {
+              focus: this.onFocus,
+              blur: this.onBlur,
+              keydown: this.onKeyDown,
+            },
+            ref: 'input',
+          })
+        }
+
+        if (!instance.searchable && !instance.disabled) {
+          deepExtend(props, {
+            attrs: {
+              tabIndex: instance.tabIndex,
+            },
+          })
+        }
+
+        return (
+          <div class="rp-treeselect__input-container" {...props}>
+            {children}
+          </div>
+        )
+      },
+
+      renderInput() {
+        const { instance } = this
+
+        return (
+          <input ref="input"
+            class="rp-treeselect__input"
+            type="text"
+            autocomplete="off"
+            tabIndex={instance.tabIndex}
+            required={instance.required && !instance.hasValue}
+            value={this.value}
+            style={this.inputStyle}
+            onFocus={this.onFocus}
+            onInput={this.onInput}
+            onBlur={this.onBlur}
+            onKeydown={this.onKeyDown}
+            onMousedown={this.onMouseDown}
+          />
+        )
+      },
+
+      renderSizer() {
+        return (
+          <div ref="sizer" class="rp-treeselect__sizer">{this.value}</div>
+        )
+      },
+
+      updateInputWidth() {
+        this.inputWidth = Math.max(
+          MIN_INPUT_WIDTH,
+          this.$refs.sizer.scrollWidth + 15,
+        )
+      },
+
+      updateSearchQuery() {
+        const { instance } = this
+
+        instance.trigger.searchQuery = this.value
+      },
+    },
+
+    render() {
+      return this.renderInputContainer()
+    },
+  }
+</script>