goodteditor-ui 1.0.12 → 1.0.13

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 (75) hide show
  1. package/.eslintrc.js +7 -7
  2. package/.prettierrc +14 -14
  3. package/README.md +35 -35
  4. package/babel.config.js +5 -5
  5. package/dist/js.png +0 -0
  6. package/index.js +51 -51
  7. package/jsconfig.json +13 -13
  8. package/package.json +57 -57
  9. package/src/App.vue +36 -36
  10. package/src/components/ui/Avatar.md +68 -68
  11. package/src/components/ui/Avatar.vue +177 -177
  12. package/src/components/ui/Badge.md +20 -20
  13. package/src/components/ui/Badge.vue +75 -75
  14. package/src/components/ui/Collapse.md +90 -90
  15. package/src/components/ui/Collapse.vue +86 -86
  16. package/src/components/ui/ColorPicker/Alpha.vue +114 -114
  17. package/src/components/ui/ColorPicker/Colors.vue +117 -117
  18. package/src/components/ui/ColorPicker/Hue.vue +113 -113
  19. package/src/components/ui/ColorPicker/Preview.vue +55 -55
  20. package/src/components/ui/ColorPicker/Saturation.vue +123 -123
  21. package/src/components/ui/ColorPicker/mixin.js +105 -105
  22. package/src/components/ui/ColorPicker.md +17 -17
  23. package/src/components/ui/ColorPicker.vue +314 -314
  24. package/src/components/ui/Datalist.md +41 -41
  25. package/src/components/ui/Datalist.vue +157 -157
  26. package/src/components/ui/DatePicker.md +168 -168
  27. package/src/components/ui/DatePicker.vue +527 -527
  28. package/src/components/ui/FileSelector.md +105 -105
  29. package/src/components/ui/FileSelector.vue +82 -82
  30. package/src/components/ui/Grid.md +130 -130
  31. package/src/components/ui/Grid.vue +92 -92
  32. package/src/components/ui/Image.md +59 -59
  33. package/src/components/ui/Image.vue +57 -57
  34. package/src/components/ui/InputAutocomplete.md +115 -115
  35. package/src/components/ui/InputAutocomplete.vue +341 -341
  36. package/src/components/ui/InputColorPicker.md +51 -51
  37. package/src/components/ui/InputColorPicker.vue +151 -151
  38. package/src/components/ui/InputDatePicker.md +121 -121
  39. package/src/components/ui/InputDatePicker.vue +310 -310
  40. package/src/components/ui/InputTags.md +51 -51
  41. package/src/components/ui/InputTags.vue +184 -184
  42. package/src/components/ui/InputTimePicker.md +25 -25
  43. package/src/components/ui/InputTimePicker.vue +253 -253
  44. package/src/components/ui/InputUnits.md +20 -20
  45. package/src/components/ui/InputUnits.vue +257 -257
  46. package/src/components/ui/Lazy.md +37 -37
  47. package/src/components/ui/Lazy.vue +92 -92
  48. package/src/components/ui/Pagination.md +74 -74
  49. package/src/components/ui/Pagination.vue +138 -138
  50. package/src/components/ui/Paginator.md +34 -34
  51. package/src/components/ui/Paginator.vue +83 -83
  52. package/src/components/ui/Popover.md +34 -34
  53. package/src/components/ui/Popover.vue +258 -209
  54. package/src/components/ui/Popup.md +59 -59
  55. package/src/components/ui/Popup.vue +150 -150
  56. package/src/components/ui/ResponsiveContainer.md +58 -58
  57. package/src/components/ui/ResponsiveContainer.vue +99 -99
  58. package/src/components/ui/Select.md +187 -187
  59. package/src/components/ui/Select.vue +420 -420
  60. package/src/components/ui/TimePicker.md +50 -50
  61. package/src/components/ui/TimePicker.vue +252 -252
  62. package/src/components/ui/Tooltip.md +114 -52
  63. package/src/components/ui/Tooltip.vue +113 -113
  64. package/src/components/ui/utils/FormComponent.js +107 -107
  65. package/src/components/ui/utils/Helpers.js +84 -61
  66. package/src/components/ui/utils/WithPopover.js +99 -81
  67. package/src/main.js +8 -8
  68. package/styleguide.config.js +37 -37
  69. package/vue.config.js +8 -8
  70. package/.idea/codeStyles/Project.xml +0 -51
  71. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  72. package/.idea/goodt-ui.iml +0 -12
  73. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  74. package/.idea/modules.xml +0 -8
  75. package/.idea/vcs.xml +0 -6
package/.eslintrc.js CHANGED
@@ -1,8 +1,8 @@
1
- module.exports = {
2
- 'extends': 'plugin:vue/essential',
3
- 'parserOptions': {
4
- parser: 'babel-eslint',
5
- sourceType: 'module',
6
- allowImportExportEverywhere: true
7
- }
1
+ module.exports = {
2
+ 'extends': 'plugin:vue/essential',
3
+ 'parserOptions': {
4
+ parser: 'babel-eslint',
5
+ sourceType: 'module',
6
+ allowImportExportEverywhere: true
7
+ }
8
8
  }
package/.prettierrc CHANGED
@@ -1,14 +1,14 @@
1
- {
2
- "printWidth": 100,
3
- "tabWidth": 4,
4
- "useTabs": false,
5
- "semi": true,
6
- "singleQuote": true,
7
- "trailingComma": "es5",
8
- "bracketSpacing": true,
9
- "jsxBracketSameLine": true,
10
- "arrowParens": "avoid",
11
- "requirePragma": false,
12
- "insertPragma": false,
13
- "proseWrap": "preserve"
14
- }
1
+ {
2
+ "printWidth": 100,
3
+ "tabWidth": 4,
4
+ "useTabs": false,
5
+ "semi": true,
6
+ "singleQuote": true,
7
+ "trailingComma": "es5",
8
+ "bracketSpacing": true,
9
+ "jsxBracketSameLine": true,
10
+ "arrowParens": "avoid",
11
+ "requirePragma": false,
12
+ "insertPragma": false,
13
+ "proseWrap": "preserve"
14
+ }
package/README.md CHANGED
@@ -1,35 +1,35 @@
1
- # goodt-ui
2
-
3
- Docs @ https://goodt-ui.netlify.app/
4
-
5
- ## Project setup
6
-
7
- ```
8
- npm install
9
- ```
10
-
11
- ### Compiles and hot-reloads for development
12
-
13
- ```
14
- npm run serve
15
- ```
16
-
17
- ### Usage
18
-
19
- ```html
20
- // Example usage in -> MyComponent.vue
21
- <template>
22
- <div>
23
- <ui-color-picker></ui-color-picker>
24
- </div>
25
- </template>
26
- <script>
27
- import { ColorPicker as UiColorPicker } from 'goodt-ui';
28
-
29
- export default {
30
- components: {
31
- UiColorPicker,
32
- },
33
- };
34
- </script>
35
- ```
1
+ # goodt-ui
2
+
3
+ Docs @ https://goodt-ui.netlify.app/
4
+
5
+ ## Project setup
6
+
7
+ ```
8
+ npm install
9
+ ```
10
+
11
+ ### Compiles and hot-reloads for development
12
+
13
+ ```
14
+ npm run serve
15
+ ```
16
+
17
+ ### Usage
18
+
19
+ ```html
20
+ // Example usage in -> MyComponent.vue
21
+ <template>
22
+ <div>
23
+ <ui-color-picker></ui-color-picker>
24
+ </div>
25
+ </template>
26
+ <script>
27
+ import { ColorPicker as UiColorPicker } from 'goodt-ui';
28
+
29
+ export default {
30
+ components: {
31
+ UiColorPicker,
32
+ },
33
+ };
34
+ </script>
35
+ ```
package/babel.config.js CHANGED
@@ -1,5 +1,5 @@
1
- module.exports = {
2
- presets: [
3
- '@vue/cli-plugin-babel/preset'
4
- ]
5
- }
1
+ module.exports = {
2
+ presets: [
3
+ '@vue/cli-plugin-babel/preset'
4
+ ]
5
+ }
package/dist/js.png ADDED
Binary file
package/index.js CHANGED
@@ -1,51 +1,51 @@
1
- import Avatar from './src/components/ui/Avatar.vue';
2
- import Badge from './src/components/ui/Badge.vue';
3
- import Collapse from './src/components/ui/Collapse.vue';
4
- import ColorPicker from './src/components/ui/ColorPicker.vue';
5
- import Datalist from './src/components/ui/Datalist.vue';
6
- import DatePicker from './src/components/ui/DatePicker.vue';
7
- import FileSelector from './src/components/ui/FileSelector.vue';
8
- import Image from './src/components/ui/Image.vue';
9
- import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
10
- import InputColorPicker from './src/components/ui/InputColorPicker.vue';
11
- import InputDatePicker from './src/components/ui/InputDatePicker.vue';
12
- import InputTags from './src/components/ui/InputTags.vue';
13
- import InputTimePicker from './src/components/ui/InputTimePicker.vue';
14
- import InputUnits from './src/components/ui/InputUnits.vue';
15
- import Lazy from './src/components/ui/Lazy.vue';
16
- import Pagination from './src/components/ui/Pagination.vue';
17
- import Paginator from './src/components/ui/Paginator.vue';
18
- import Popover from './src/components/ui/Popover.vue';
19
- import Popup from './src/components/ui/Popup.vue';
20
- import ResponsiveContainer from './src/components/ui/ResponsiveContainer.vue';
21
- import Select from './src/components/ui/Select.vue';
22
- import TimePicker from './src/components/ui/TimePicker.vue';
23
- import Tooltip from './src/components/ui/Tooltip.vue';
24
- import Grid from './src/components/ui/Grid.vue';
25
-
26
- export {
27
- Avatar,
28
- Badge,
29
- Collapse,
30
- ColorPicker,
31
- Datalist,
32
- DatePicker,
33
- FileSelector,
34
- Image,
35
- InputAutocomplete,
36
- InputColorPicker,
37
- InputDatePicker,
38
- InputTags,
39
- InputTimePicker,
40
- InputUnits,
41
- Lazy,
42
- Pagination,
43
- Paginator,
44
- Popover,
45
- Popup,
46
- ResponsiveContainer,
47
- Select,
48
- TimePicker,
49
- Tooltip,
50
- Grid,
51
- };
1
+ import Avatar from './src/components/ui/Avatar.vue';
2
+ import Badge from './src/components/ui/Badge.vue';
3
+ import Collapse from './src/components/ui/Collapse.vue';
4
+ import ColorPicker from './src/components/ui/ColorPicker.vue';
5
+ import Datalist from './src/components/ui/Datalist.vue';
6
+ import DatePicker from './src/components/ui/DatePicker.vue';
7
+ import FileSelector from './src/components/ui/FileSelector.vue';
8
+ import Image from './src/components/ui/Image.vue';
9
+ import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
10
+ import InputColorPicker from './src/components/ui/InputColorPicker.vue';
11
+ import InputDatePicker from './src/components/ui/InputDatePicker.vue';
12
+ import InputTags from './src/components/ui/InputTags.vue';
13
+ import InputTimePicker from './src/components/ui/InputTimePicker.vue';
14
+ import InputUnits from './src/components/ui/InputUnits.vue';
15
+ import Lazy from './src/components/ui/Lazy.vue';
16
+ import Pagination from './src/components/ui/Pagination.vue';
17
+ import Paginator from './src/components/ui/Paginator.vue';
18
+ import Popover from './src/components/ui/Popover.vue';
19
+ import Popup from './src/components/ui/Popup.vue';
20
+ import ResponsiveContainer from './src/components/ui/ResponsiveContainer.vue';
21
+ import Select from './src/components/ui/Select.vue';
22
+ import TimePicker from './src/components/ui/TimePicker.vue';
23
+ import Tooltip from './src/components/ui/Tooltip.vue';
24
+ import Grid from './src/components/ui/Grid.vue';
25
+
26
+ export {
27
+ Avatar,
28
+ Badge,
29
+ Collapse,
30
+ ColorPicker,
31
+ Datalist,
32
+ DatePicker,
33
+ FileSelector,
34
+ Image,
35
+ InputAutocomplete,
36
+ InputColorPicker,
37
+ InputDatePicker,
38
+ InputTags,
39
+ InputTimePicker,
40
+ InputUnits,
41
+ Lazy,
42
+ Pagination,
43
+ Paginator,
44
+ Popover,
45
+ Popup,
46
+ ResponsiveContainer,
47
+ Select,
48
+ TimePicker,
49
+ Tooltip,
50
+ Grid,
51
+ };
package/jsconfig.json CHANGED
@@ -1,14 +1,14 @@
1
- {
2
- "compilerOptions": {
3
- "target": "es6",
4
- "module": "commonjs",
5
- "allowSyntheticDefaultImports": true
6
- },
7
- "include": [
8
- "src/**/*"
9
- ],
10
- "exclude": [
11
- "node_modules",
12
- "**/node_modules/*"
13
- ]
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es6",
4
+ "module": "commonjs",
5
+ "allowSyntheticDefaultImports": true
6
+ },
7
+ "include": [
8
+ "src/**/*"
9
+ ],
10
+ "exclude": [
11
+ "node_modules",
12
+ "**/node_modules/*"
13
+ ]
14
14
  }
package/package.json CHANGED
@@ -1,57 +1,57 @@
1
- {
2
- "name": "goodteditor-ui",
3
- "version": "1.0.12",
4
- "main": "index.js",
5
- "homepage": "https://goodt-ui.netlify.app/",
6
- "scripts": {
7
- "serve": "vue-cli-service serve",
8
- "build": "vue-cli-service build",
9
- "lint": "vue-cli-service lint",
10
- "dev": "vue-styleguidist server",
11
- "docs:build": "set NODE_ENV=development && vue-styleguidist build",
12
- "docs:deploy": "npx netlify deploy --dir=docs --prod",
13
- "notify": "node ./ci/teams-notify.js",
14
- "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
15
- },
16
- "devDependencies": {
17
- "@babel/plugin-syntax-dynamic-import": "^7.8.3",
18
- "@vue/cli-plugin-babel": "^4.5.11",
19
- "@vue/cli-plugin-eslint": "^4.5.11",
20
- "@vue/cli-service": "^4.5.11",
21
- "axios": "^0.24.0",
22
- "babel-eslint": "^10.1.0",
23
- "eslint": "^6.7.2",
24
- "eslint-plugin-vue": "^6.2.2",
25
- "goodt-framework-css": "^1.1.1",
26
- "less": "^3.13.1",
27
- "less-loader": "^5.0.0",
28
- "netlify-cli": "^5.0.1",
29
- "vue-styleguidist": "4.35.0",
30
- "vue-template-compiler": "^2.6.12"
31
- },
32
- "peerDependencies": {
33
- "vue": "^2.6.12"
34
- },
35
- "eslintConfig": {
36
- "root": true,
37
- "env": {
38
- "node": true
39
- },
40
- "extends": [
41
- "plugin:vue/essential",
42
- "eslint:recommended"
43
- ],
44
- "parserOptions": {
45
- "parser": "babel-eslint"
46
- },
47
- "rules": {}
48
- },
49
- "browserslist": [
50
- "> 1%",
51
- "last 2 versions",
52
- "not dead"
53
- ],
54
- "dependencies": {
55
- "@popperjs/core": "2.11.2"
56
- }
57
- }
1
+ {
2
+ "name": "goodteditor-ui",
3
+ "version": "1.0.13",
4
+ "main": "index.js",
5
+ "homepage": "https://goodt-ui.netlify.app/",
6
+ "scripts": {
7
+ "serve": "vue-cli-service serve",
8
+ "build": "vue-cli-service build",
9
+ "lint": "vue-cli-service lint",
10
+ "dev": "vue-styleguidist server",
11
+ "docs:build": "set NODE_ENV=development && vue-styleguidist build",
12
+ "docs:deploy": "npx netlify deploy --dir=docs --prod",
13
+ "notify": "node ./ci/teams-notify.js",
14
+ "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
15
+ },
16
+ "devDependencies": {
17
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
18
+ "@vue/cli-plugin-babel": "^4.5.11",
19
+ "@vue/cli-plugin-eslint": "^4.5.11",
20
+ "@vue/cli-service": "^4.5.11",
21
+ "axios": "^0.24.0",
22
+ "babel-eslint": "^10.1.0",
23
+ "eslint": "^6.7.2",
24
+ "eslint-plugin-vue": "^6.2.2",
25
+ "goodt-framework-css": "^1.1.1",
26
+ "less": "^3.13.1",
27
+ "less-loader": "^5.0.0",
28
+ "netlify-cli": "^5.0.1",
29
+ "vue-styleguidist": "4.35.0",
30
+ "vue-template-compiler": "^2.6.12"
31
+ },
32
+ "peerDependencies": {
33
+ "vue": "^2.6.12"
34
+ },
35
+ "eslintConfig": {
36
+ "root": true,
37
+ "env": {
38
+ "node": true
39
+ },
40
+ "extends": [
41
+ "plugin:vue/essential",
42
+ "eslint:recommended"
43
+ ],
44
+ "parserOptions": {
45
+ "parser": "babel-eslint"
46
+ },
47
+ "rules": {}
48
+ },
49
+ "browserslist": [
50
+ "> 1%",
51
+ "last 2 versions",
52
+ "not dead"
53
+ ],
54
+ "dependencies": {
55
+ "@popperjs/core": "2.11.2"
56
+ }
57
+ }
package/src/App.vue CHANGED
@@ -1,36 +1,36 @@
1
- <template>
2
- <div id="app" class="pad-l1 w-100">
3
- <ui-select
4
- class="block"
5
- v-model="demoActive"
6
- :options="demos"
7
- placeholder="Select component"
8
- />
9
- <component :is="demoComponent" v-if="demoComponent"></component>
10
- </div>
11
- </template>
12
-
13
- <script>
14
- import UiSelect from './components/ui/Select.vue';
15
- import * as Components from './../index';
16
-
17
- export default {
18
- name: 'App',
19
- components: {
20
- UiSelect,
21
- },
22
- data() {
23
- return {
24
- demoActive: null,
25
- demos: Object.keys(Components).map(i => {
26
- return { value: i, label: i };
27
- }),
28
- };
29
- },
30
- computed: {
31
- demoComponent() {
32
- return this.demoActive ? Components[this.demoActive] : null;
33
- },
34
- },
35
- };
36
- </script>
1
+ <template>
2
+ <div id="app" class="pad-l1 w-100">
3
+ <ui-select
4
+ class="block"
5
+ v-model="demoActive"
6
+ :options="demos"
7
+ placeholder="Select component"
8
+ />
9
+ <component :is="demoComponent" v-if="demoComponent"></component>
10
+ </div>
11
+ </template>
12
+
13
+ <script>
14
+ import UiSelect from './components/ui/Select.vue';
15
+ import * as Components from './../index';
16
+
17
+ export default {
18
+ name: 'App',
19
+ components: {
20
+ UiSelect,
21
+ },
22
+ data() {
23
+ return {
24
+ demoActive: null,
25
+ demos: Object.keys(Components).map(i => {
26
+ return { value: i, label: i };
27
+ }),
28
+ };
29
+ },
30
+ computed: {
31
+ demoComponent() {
32
+ return this.demoActive ? Components[this.demoActive] : null;
33
+ },
34
+ },
35
+ };
36
+ </script>
@@ -1,68 +1,68 @@
1
- ```vue
2
- <template>
3
- <div class="pad-l5">
4
- <div class="p">
5
- <!-- default -->
6
- <ui-avatar v-bind="props" @load="onLoad" @error="onError"></ui-avatar>
7
-
8
- <!-- custom slots -->
9
- <ui-avatar v-bind="props">
10
- <template v-slot="{abbr}">
11
- <code>{{abbr}}</code>
12
- </template>
13
- <template #loading>loading</template>
14
- </ui-avatar>
15
- </div>
16
- <div class="row">
17
- <div class="col">
18
- <template v-for="key in Object.keys(props)">
19
- <label class="text-small " v-if="isBool(key)">
20
- <input class="checkbox checkbox-small" type="checkbox" v-model="props[key]">
21
- <span class="v-mid">{{key}}</span>
22
- </label>
23
- <div :key="key" v-else>
24
- <label class="text-xsmall">{{key}}</label>
25
- <input class="input input-small d-block" type="text" v-model="props[key]">
26
- </div>
27
- </template>
28
- </div>
29
- <div class="col">
30
- <pre class="text-xsmall" style="max-height:10rem">{{logStr}}</pre>
31
- </div>
32
- </div>
33
- </div>
34
- </template>
35
- <script>
36
- import UiAvatar from './Avatar.vue';
37
-
38
- export default {
39
- components: { UiAvatar },
40
- data() {
41
- return {
42
- props: {
43
- round: true,
44
- src:'https://picsum.photos/150/150',
45
- size: '4rem',
46
- alt: 'John Wick',
47
- color: '#ffffff',
48
- background:'#fca522',
49
- },
50
- log:[]
51
- }
52
- },
53
- computed: {
54
- logStr() {
55
- return this.log.reverse().join("\n")
56
- }
57
- },
58
- methods: {
59
- isBool(key) {
60
- return key === 'round'
61
- },
62
- addLog(n,e) { this.log.push(`event: ${n}`) },
63
- onLoad(e) { this.addLog('load') },
64
- onError(e) { this.addLog('error') },
65
- }
66
- };
67
- </script>
68
- ```
1
+ ```vue
2
+ <template>
3
+ <div class="pad-l5">
4
+ <div class="p">
5
+ <!-- default -->
6
+ <ui-avatar v-bind="props" @load="onLoad" @error="onError"></ui-avatar>
7
+
8
+ <!-- custom slots -->
9
+ <ui-avatar v-bind="props">
10
+ <template v-slot="{abbr}">
11
+ <code>{{abbr}}</code>
12
+ </template>
13
+ <template #loading>loading</template>
14
+ </ui-avatar>
15
+ </div>
16
+ <div class="row">
17
+ <div class="col">
18
+ <template v-for="key in Object.keys(props)">
19
+ <label class="text-small " v-if="isBool(key)">
20
+ <input class="checkbox checkbox-small" type="checkbox" v-model="props[key]">
21
+ <span class="v-mid">{{key}}</span>
22
+ </label>
23
+ <div :key="key" v-else>
24
+ <label class="text-xsmall">{{key}}</label>
25
+ <input class="input input-small d-block" type="text" v-model="props[key]">
26
+ </div>
27
+ </template>
28
+ </div>
29
+ <div class="col">
30
+ <pre class="text-xsmall" style="max-height:10rem">{{logStr}}</pre>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </template>
35
+ <script>
36
+ import UiAvatar from './Avatar.vue';
37
+
38
+ export default {
39
+ components: { UiAvatar },
40
+ data() {
41
+ return {
42
+ props: {
43
+ round: true,
44
+ src:'https://picsum.photos/150/150',
45
+ size: '4rem',
46
+ alt: 'John Wick',
47
+ color: '#ffffff',
48
+ background:'#fca522',
49
+ },
50
+ log:[]
51
+ }
52
+ },
53
+ computed: {
54
+ logStr() {
55
+ return this.log.reverse().join("\n")
56
+ }
57
+ },
58
+ methods: {
59
+ isBool(key) {
60
+ return key === 'round'
61
+ },
62
+ addLog(n,e) { this.log.push(`event: ${n}`) },
63
+ onLoad(e) { this.addLog('load') },
64
+ onError(e) { this.addLog('error') },
65
+ }
66
+ };
67
+ </script>
68
+ ```