@reviewpush/rp-treeselect 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/README.md +172 -0
  2. package/dist/rp-treeselect.cjs.js +3656 -0
  3. package/dist/rp-treeselect.cjs.js.map +1 -0
  4. package/dist/rp-treeselect.cjs.min.js +2 -0
  5. package/dist/rp-treeselect.cjs.min.js.map +1 -0
  6. package/dist/rp-treeselect.css +947 -0
  7. package/dist/rp-treeselect.css.map +1 -0
  8. package/dist/rp-treeselect.min.css +1 -0
  9. package/dist/rp-treeselect.umd.js +4837 -0
  10. package/dist/rp-treeselect.umd.js.map +1 -0
  11. package/dist/rp-treeselect.umd.min.js +2 -0
  12. package/dist/rp-treeselect.umd.min.js.map +1 -0
  13. package/package.json +140 -0
  14. package/src/assets/checkbox-checked-disabled.png +0 -0
  15. package/src/assets/checkbox-checked-disabled@2x.png +0 -0
  16. package/src/assets/checkbox-checked-disabled@3x.png +0 -0
  17. package/src/assets/checkbox-checked.png +0 -0
  18. package/src/assets/checkbox-checked@2x.png +0 -0
  19. package/src/assets/checkbox-checked@3x.png +0 -0
  20. package/src/assets/checkbox-indeterminate-disabled.png +0 -0
  21. package/src/assets/checkbox-indeterminate-disabled@2x.png +0 -0
  22. package/src/assets/checkbox-indeterminate-disabled@3x.png +0 -0
  23. package/src/assets/checkbox-indeterminate.png +0 -0
  24. package/src/assets/checkbox-indeterminate@2x.png +0 -0
  25. package/src/assets/checkbox-indeterminate@3x.png +0 -0
  26. package/src/components/Control.vue +153 -0
  27. package/src/components/HiddenFields.vue +37 -0
  28. package/src/components/Input.vue +295 -0
  29. package/src/components/Menu.vue +313 -0
  30. package/src/components/MenuPortal.vue +179 -0
  31. package/src/components/MultiValue.vue +56 -0
  32. package/src/components/MultiValueItem.vue +45 -0
  33. package/src/components/Option.vue +300 -0
  34. package/src/components/Placeholder.vue +21 -0
  35. package/src/components/SingleValue.vue +34 -0
  36. package/src/components/Tip.vue +32 -0
  37. package/src/components/Treeselect.vue +42 -0
  38. package/src/components/icons/Arrow.vue +11 -0
  39. package/src/components/icons/Delete.vue +11 -0
  40. package/src/constants.js +50 -0
  41. package/src/index.js +14 -0
  42. package/src/mixins/treeselectMixin.js +1949 -0
  43. package/src/style.less +1147 -0
  44. package/src/utils/.eslintrc.js +6 -0
  45. package/src/utils/constant.js +1 -0
  46. package/src/utils/createMap.js +1 -0
  47. package/src/utils/debounce.js +1 -0
  48. package/src/utils/deepExtend.js +25 -0
  49. package/src/utils/find.js +6 -0
  50. package/src/utils/identity.js +1 -0
  51. package/src/utils/includes.js +3 -0
  52. package/src/utils/index.js +38 -0
  53. package/src/utils/isNaN.js +3 -0
  54. package/src/utils/isPromise.js +1 -0
  55. package/src/utils/last.js +1 -0
  56. package/src/utils/noop.js +1 -0
  57. package/src/utils/onLeftClick.js +7 -0
  58. package/src/utils/once.js +1 -0
  59. package/src/utils/quickDiff.js +9 -0
  60. package/src/utils/removeFromArray.js +4 -0
  61. package/src/utils/scrollIntoView.js +15 -0
  62. package/src/utils/setupResizeAndScrollEventListeners.js +34 -0
  63. package/src/utils/warning.js +11 -0
  64. package/src/utils/watchSize.js +67 -0
package/README.md ADDED
@@ -0,0 +1,172 @@
1
+ # rp-treeselect
2
+ [![npm](https://badgen.now.sh/npm/v/@reviewpush/rp-treeselect)](https://www.npmjs.com/package/@reviewpush/rp-treeselect) [![Build](https://badgen.now.sh/circleci/github/riophae/rp-treeselect)](https://circleci.com/gh/riophae/rp-treeselect/tree/master) [![Coverage](https://badgen.net/codecov/c/github/riophae/rp-treeselect)](https://codecov.io/gh/riophae/rp-treeselect?branch=master)
3
+ ![npm monthly downloads](https://badgen.now.sh/npm/dm/@reviewpush/rp-treeselect)
4
+ ![jsDelivr monthly hits](https://badgen.net/jsdelivr/hits/npm/@reviewpush/rp-treeselect) [![Known vulnerabilities](https://snyk.io/test/npm/@reviewpush/rp-treeselect/badge.svg)](https://snyk.io/test/npm/@reviewpush/rp-treeselect) ![License](https://badgen.net/github/license/riophae/rp-treeselect)
5
+
6
+ > A multi-select component with nested options support for Vue.js
7
+
8
+ ![Rp-Treeselect Screenshot](https://raw.githubusercontent.com/riophae/rp-treeselect/master/screenshot.png)
9
+
10
+ ### Features
11
+
12
+ - Single & multiple select with nested options support
13
+ - Fuzzy matching
14
+ - Async searching
15
+ - Delayed loading (load data of deep level options only when needed)
16
+ - Keyboard support (navigate using <kbd>Arrow Up</kbd> & <kbd>Arrow Down</kbd> keys, select option using <kbd>Enter</kbd> key, etc.)
17
+ - Rich options & highly customizable
18
+ - Supports a wide range of browsers (see [below](#browser-compatibility))
19
+ - RTL support
20
+
21
+ *Requires Vue 2.2+*
22
+
23
+ ### Getting Started
24
+
25
+ It's recommended to install rp-treeselect via npm, and build your app using a bundler like [webpack](https://webpack.js.org/).
26
+
27
+ ```bash
28
+ npm install --save @reviewpush/rp-treeselect
29
+ ```
30
+
31
+ This example shows how to integrate rp-treeselect with your [Vue SFCs](https://vuejs.org/v2/guide/single-file-components.html).
32
+
33
+ ```vue
34
+ <!-- Vue SFC -->
35
+ <template>
36
+ <div id="app">
37
+ <treeselect v-model="value" :multiple="true" :options="options" />
38
+ </div>
39
+ </template>
40
+
41
+ <script>
42
+ // import the component
43
+ import Treeselect from '@reviewpush/rp-treeselect'
44
+ // import the styles
45
+ import '@reviewpush/rp-treeselect/dist/rp-treeselect.css'
46
+
47
+ export default {
48
+ // register the component
49
+ components: { Treeselect },
50
+ data() {
51
+ return {
52
+ // define the default value
53
+ value: null,
54
+ // define options
55
+ options: [ {
56
+ id: 'a',
57
+ label: 'a',
58
+ children: [ {
59
+ id: 'aa',
60
+ label: 'aa',
61
+ }, {
62
+ id: 'ab',
63
+ label: 'ab',
64
+ } ],
65
+ }, {
66
+ id: 'b',
67
+ label: 'b',
68
+ }, {
69
+ id: 'c',
70
+ label: 'c',
71
+ } ],
72
+ }
73
+ },
74
+ }
75
+ </script>
76
+ ```
77
+
78
+ If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before rp-treeselect.
79
+
80
+ ```html
81
+ <html>
82
+ <head>
83
+ <!-- include Vue 2.x -->
84
+ <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
85
+ <!-- include rp-treeselect & its styles. you can change the version tag to better suit your needs. -->
86
+ <script src="https://cdn.jsdelivr.net/npm/@reviewpush/rp-treeselect@^0.4.0/dist/rp-treeselect.umd.min.js"></script>
87
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@reviewpush/rp-treeselect@^0.4.0/dist/rp-treeselect.min.css">
88
+ </head>
89
+ <body>
90
+ <div id="app">
91
+ <treeselect v-model="value" :multiple="true" :options="options" />
92
+ </div>
93
+ </body>
94
+ <script>
95
+ // register the component
96
+ Vue.component('treeselect', RpTreeselect.Treeselect)
97
+
98
+ new Vue({
99
+ el: '#app',
100
+ data: {
101
+ // define the default value
102
+ value: null,
103
+ // define options
104
+ options: [ {
105
+ id: 'a',
106
+ label: 'a',
107
+ children: [ {
108
+ id: 'aa',
109
+ label: 'aa',
110
+ }, {
111
+ id: 'ab',
112
+ label: 'ab',
113
+ } ],
114
+ }, {
115
+ id: 'b',
116
+ label: 'b',
117
+ }, {
118
+ id: 'c',
119
+ label: 'c',
120
+ } ],
121
+ },
122
+ })
123
+ </script>
124
+ </html>
125
+ ```
126
+
127
+ ### Documentation & Live Demo
128
+
129
+ [Visit the website](https://rp-treeselect.js.org/)
130
+
131
+ Note: please use a desktop browser since the website hasn't been optimized for mobile devices.
132
+
133
+ ### Browser Compatibility
134
+
135
+ - Chrome
136
+ - Edge
137
+ - Firefox
138
+ - IE ≥ 9
139
+ - Safari
140
+
141
+ It should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as `transition` and `animation`. Nevertheless it should look 90% same as on modern browsers.
142
+
143
+ ### Bugs
144
+
145
+ You can use this [pen](https://codepen.io/riophae/pen/MExgzP) to reproduce bugs and then [open an issue](https://github.com/riophae/rp-treeselect/issues/new).
146
+
147
+ ### Contributing
148
+
149
+ 1. Fork & clone the repo
150
+ 2. Install dependencies by `yarn` or `npm install`
151
+ 3. Check out a new branch
152
+ 4. `npm run dev` & hack
153
+ 5. Make sure `npm test` passes
154
+ 6. Push your changes & file a pull request
155
+
156
+ ### Credits
157
+
158
+ This project is inspired by [vue-multiselect](https://github.com/monterail/vue-multiselect), [react-select](https://github.com/JedWatson/react-select) and [Ant Design](https://github.com/ant-design/ant-design/). Special thanks go to their respective authors!
159
+
160
+ Some icons used in this project:
161
+
162
+ - "link" icon made by [Smashicons](https://www.flaticon.com/authors/smashicons) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
163
+ - "spinner" icon from [SpinKit](https://github.com/tobiasahlin/SpinKit) is licensed under the [MIT License](https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE)
164
+ - "caret" icon made by [Dave Gandy](https://www.flaticon.com/authors/dave-gandy) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
165
+ - "delete" icon made by [Freepik](https://www.flaticon.com/authors/freepik) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
166
+ - "checkmark symbol" & "minus symbol" icons made by [Catalin Fertu](https://www.flaticon.com/authors/catalin-fertu) are licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
167
+
168
+ ### License
169
+
170
+ Copyright (c) 2017-present [Riophae Lee](https://github.com/riophae).
171
+
172
+ Released under the [MIT License](https://github.com/riophae/rp-treeselect/blob/master/LICENSE).