goodteditor-ui 1.0.21 → 1.0.23

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 (114) 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/index.js +53 -53
  6. package/jsconfig.json +13 -13
  7. package/package.json +66 -70
  8. package/src/App.vue +36 -36
  9. package/src/components/ui/Avatar.md +68 -68
  10. package/src/components/ui/Avatar.vue +180 -177
  11. package/src/components/ui/Badge.md +20 -20
  12. package/src/components/ui/Badge.vue +75 -75
  13. package/src/components/ui/Collapse.md +90 -90
  14. package/src/components/ui/Collapse.vue +86 -86
  15. package/src/components/ui/ColorPicker/Alpha.vue +114 -114
  16. package/src/components/ui/ColorPicker/Colors.vue +117 -117
  17. package/src/components/ui/ColorPicker/Hue.vue +113 -113
  18. package/src/components/ui/ColorPicker/Preview.vue +55 -55
  19. package/src/components/ui/ColorPicker/Saturation.vue +123 -123
  20. package/src/components/ui/ColorPicker/mixin.js +105 -105
  21. package/src/components/ui/ColorPicker.md +17 -17
  22. package/src/components/ui/ColorPicker.vue +314 -314
  23. package/src/components/ui/Datalist.md +41 -41
  24. package/src/components/ui/Datalist.vue +157 -157
  25. package/src/components/ui/DatePicker.md +168 -168
  26. package/src/components/ui/DatePicker.vue +527 -527
  27. package/src/components/ui/FileSelector.md +105 -105
  28. package/src/components/ui/FileSelector.vue +82 -82
  29. package/src/components/ui/Grid.md +130 -130
  30. package/src/components/ui/Grid.vue +92 -92
  31. package/src/components/ui/Image.md +59 -59
  32. package/src/components/ui/Image.vue +57 -57
  33. package/src/components/ui/InputAutocomplete.md +115 -115
  34. package/src/components/ui/InputAutocomplete.vue +341 -341
  35. package/src/components/ui/InputColorPicker.md +51 -51
  36. package/src/components/ui/InputColorPicker.vue +151 -151
  37. package/src/components/ui/InputDatePicker.md +121 -121
  38. package/src/components/ui/InputDatePicker.vue +326 -326
  39. package/src/components/ui/InputTags.md +51 -51
  40. package/src/components/ui/InputTags.vue +184 -184
  41. package/src/components/ui/InputTimePicker.md +25 -25
  42. package/src/components/ui/InputTimePicker.vue +253 -253
  43. package/src/components/ui/InputUnits.md +20 -20
  44. package/src/components/ui/InputUnits.vue +257 -257
  45. package/src/components/ui/Lazy.md +37 -37
  46. package/src/components/ui/Lazy.vue +92 -92
  47. package/src/components/ui/Pagination.md +74 -74
  48. package/src/components/ui/Pagination.vue +138 -138
  49. package/src/components/ui/Paginator.md +34 -34
  50. package/src/components/ui/Paginator.vue +83 -83
  51. package/src/components/ui/Popover.md +34 -34
  52. package/src/components/ui/Popover.vue +274 -274
  53. package/src/components/ui/Popup.md +59 -59
  54. package/src/components/ui/Popup.vue +150 -150
  55. package/src/components/ui/ResponsiveContainer.md +58 -58
  56. package/src/components/ui/ResponsiveContainer.vue +99 -99
  57. package/src/components/ui/Select.md +187 -187
  58. package/src/components/ui/Select.vue +421 -421
  59. package/src/components/ui/TimePicker.md +50 -50
  60. package/src/components/ui/TimePicker.vue +252 -252
  61. package/src/components/ui/Tooltip.md +54 -114
  62. package/src/components/ui/Tooltip.vue +113 -113
  63. package/src/components/ui/WysiwygEditor/WysiwygEditor.d.ts +119 -119
  64. package/src/components/ui/WysiwygEditor/constants.js +264 -264
  65. package/src/components/ui/WysiwygEditor/extensions/blockquote.js +15 -15
  66. package/src/components/ui/WysiwygEditor/extensions/bold.js +15 -15
  67. package/src/components/ui/WysiwygEditor/extensions/bullet-list.js +15 -15
  68. package/src/components/ui/WysiwygEditor/extensions/code-block.js +13 -13
  69. package/src/components/ui/WysiwygEditor/extensions/code.js +13 -13
  70. package/src/components/ui/WysiwygEditor/extensions/font-size.js +34 -34
  71. package/src/components/ui/WysiwygEditor/extensions/formatting.js +14 -14
  72. package/src/components/ui/WysiwygEditor/extensions/heading.js +13 -13
  73. package/src/components/ui/WysiwygEditor/extensions/horizontal-rule.js +15 -15
  74. package/src/components/ui/WysiwygEditor/extensions/image.js +19 -19
  75. package/src/components/ui/WysiwygEditor/extensions/index.d.ts +32 -32
  76. package/src/components/ui/WysiwygEditor/extensions/index.js +32 -32
  77. package/src/components/ui/WysiwygEditor/extensions/italic.js +15 -15
  78. package/src/components/ui/WysiwygEditor/extensions/link.js +16 -16
  79. package/src/components/ui/WysiwygEditor/extensions/list-item.js +15 -15
  80. package/src/components/ui/WysiwygEditor/extensions/ordered-list.js +15 -15
  81. package/src/components/ui/WysiwygEditor/extensions/paragraph.js +23 -23
  82. package/src/components/ui/WysiwygEditor/extensions/strike.js +15 -15
  83. package/src/components/ui/WysiwygEditor/extensions/table-cell.js +13 -13
  84. package/src/components/ui/WysiwygEditor/extensions/table-header.js +15 -15
  85. package/src/components/ui/WysiwygEditor/extensions/table-row.js +15 -15
  86. package/src/components/ui/WysiwygEditor/extensions/table.js +29 -29
  87. package/src/components/ui/WysiwygEditor/extensions/text-align.js +6 -6
  88. package/src/components/ui/WysiwygEditor/extensions/text-style.js +15 -15
  89. package/src/components/ui/WysiwygEditor/extensions/underline.js +15 -15
  90. package/src/components/ui/WysiwygEditor/index.d.ts +4 -4
  91. package/src/components/ui/WysiwygEditor/index.js +4 -4
  92. package/src/components/ui/WysiwygEditor/renders/Button.vue +28 -28
  93. package/src/components/ui/WysiwygEditor/renders/ColorPicker.vue +41 -41
  94. package/src/components/ui/WysiwygEditor/renders/InputAuto.vue +34 -34
  95. package/src/components/ui/WysiwygEditor/renders/InputBrowse.vue +35 -35
  96. package/src/components/ui/WysiwygEditor/renders/InputUnits.vue +38 -38
  97. package/src/components/ui/WysiwygEditor/renders/Link.vue +87 -87
  98. package/src/components/ui/WysiwygEditor/renders/Select.vue +47 -47
  99. package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue +49 -49
  100. package/src/components/ui/WysiwygEditor/renders/index.d.ts +8 -8
  101. package/src/components/ui/WysiwygEditor/renders/index.js +8 -8
  102. package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js +39 -39
  103. package/src/components/ui/WysiwygEditor/renders/mixins/index.js +1 -1
  104. package/src/components/ui/WysiwygEditor/tools-and-commands.js +704 -704
  105. package/src/components/ui/WysiwygEditor/utils.js +72 -72
  106. package/src/components/ui/WysiwygEditor.md +18 -18
  107. package/src/components/ui/WysiwygEditor.vue +271 -271
  108. package/src/components/ui/utils/FormComponent.js +107 -107
  109. package/src/components/ui/utils/Helpers.js +84 -84
  110. package/src/components/ui/utils/WithPopover.js +81 -99
  111. package/src/main.js +8 -8
  112. package/styleguide.config.js +37 -37
  113. package/vue.config.js +8 -8
  114. package/dist/js.png +0 -0
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/index.js CHANGED
@@ -1,53 +1,53 @@
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
- import WysiwygEditor from './src/components/ui/WysiwygEditor.vue';
26
-
27
- export {
28
- Avatar,
29
- Badge,
30
- Collapse,
31
- ColorPicker,
32
- Datalist,
33
- DatePicker,
34
- FileSelector,
35
- Image,
36
- InputAutocomplete,
37
- InputColorPicker,
38
- InputDatePicker,
39
- InputTags,
40
- InputTimePicker,
41
- InputUnits,
42
- Lazy,
43
- Pagination,
44
- Paginator,
45
- Popover,
46
- Popup,
47
- ResponsiveContainer,
48
- Select,
49
- TimePicker,
50
- Tooltip,
51
- Grid,
52
- WysiwygEditor
53
- };
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
+ import WysiwygEditor from './src/components/ui/WysiwygEditor.vue';
26
+
27
+ export {
28
+ Avatar,
29
+ Badge,
30
+ Collapse,
31
+ ColorPicker,
32
+ Datalist,
33
+ DatePicker,
34
+ FileSelector,
35
+ Image,
36
+ InputAutocomplete,
37
+ InputColorPicker,
38
+ InputDatePicker,
39
+ InputTags,
40
+ InputTimePicker,
41
+ InputUnits,
42
+ Lazy,
43
+ Pagination,
44
+ Paginator,
45
+ Popover,
46
+ Popup,
47
+ ResponsiveContainer,
48
+ Select,
49
+ TimePicker,
50
+ Tooltip,
51
+ Grid,
52
+ WysiwygEditor
53
+ };
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,70 +1,66 @@
1
- {
2
- "name": "goodteditor-ui",
3
- "version": "1.0.21",
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
- "dependencies": {
17
- "@popperjs/core": "2.11.2",
18
- "@tiptap/extension-color": "^2.0.0-beta.207",
19
- "@tiptap/extension-font-family": "^2.0.0-beta.207",
20
- "@tiptap/extension-image": "^2.0.0-beta.27",
21
- "@tiptap/extension-link": "^2.0.0-beta.36",
22
- "@tiptap/extension-table": "2.0.0-beta.48",
23
- "@tiptap/extension-table-cell": "^2.0.0-beta.20",
24
- "@tiptap/extension-table-header": "^2.0.0-beta.22",
25
- "@tiptap/extension-table-row": "^2.0.0-beta.19",
26
- "@tiptap/extension-text-align": "^2.0.0-beta.207",
27
- "@tiptap/extension-text-style": "^2.0.0-beta.207",
28
- "@tiptap/extension-underline": "^2.0.0-beta.207",
29
- "@tiptap/starter-kit": "^2.0.0-beta.183",
30
- "@tiptap/vue-2": "^2.0.0-beta.84"
31
- },
32
- "devDependencies": {
33
- "@babel/plugin-syntax-dynamic-import": "^7.8.3",
34
- "@vue/cli-plugin-babel": "^4.5.11",
35
- "@vue/cli-plugin-eslint": "^4.5.11",
36
- "@vue/cli-service": "^4.5.11",
37
- "axios": "^0.24.0",
38
- "babel-eslint": "^10.1.0",
39
- "eslint": "^6.7.2",
40
- "eslint-plugin-vue": "^6.2.2",
41
- "goodt-framework-css": "^1.1.1",
42
- "less": "^3.13.1",
43
- "less-loader": "^5.0.0",
44
- "netlify-cli": "^5.0.1",
45
- "vue-styleguidist": "4.35.0",
46
- "vue-template-compiler": "^2.6.12"
47
- },
48
- "peerDependencies": {
49
- "vue": "^2.6.12"
50
- },
51
- "eslintConfig": {
52
- "root": true,
53
- "env": {
54
- "node": true
55
- },
56
- "extends": [
57
- "plugin:vue/essential",
58
- "eslint:recommended"
59
- ],
60
- "parserOptions": {
61
- "parser": "babel-eslint"
62
- },
63
- "rules": {}
64
- },
65
- "browserslist": [
66
- "> 1%",
67
- "last 2 versions",
68
- "not dead"
69
- ]
70
- }
1
+ {
2
+ "name": "goodteditor-ui",
3
+ "version": "1.0.23",
4
+ "main": "index.js",
5
+ "homepage": "https://goodt-ui.netlify.app/",
6
+ "scripts": {
7
+ "serve": "vue-styleguidist server",
8
+ "build": "vue-styleguidist build",
9
+ "docs:build": "set NODE_ENV=development && npm run build",
10
+ "docs:deploy": "npx netlify deploy --dir=docs --prod"
11
+ },
12
+ "dependencies": {
13
+ "@popperjs/core": "2.11.2",
14
+ "@tiptap/extension-color": "^2.0.0-beta.207",
15
+ "@tiptap/extension-font-family": "^2.0.0-beta.207",
16
+ "@tiptap/extension-image": "^2.0.0-beta.27",
17
+ "@tiptap/extension-link": "^2.0.0-beta.36",
18
+ "@tiptap/extension-table": "2.0.0-beta.48",
19
+ "@tiptap/extension-table-cell": "^2.0.0-beta.20",
20
+ "@tiptap/extension-table-header": "^2.0.0-beta.22",
21
+ "@tiptap/extension-table-row": "^2.0.0-beta.19",
22
+ "@tiptap/extension-text-align": "^2.0.0-beta.207",
23
+ "@tiptap/extension-text-style": "^2.0.0-beta.207",
24
+ "@tiptap/extension-underline": "^2.0.0-beta.207",
25
+ "@tiptap/starter-kit": "^2.0.0-beta.183",
26
+ "@tiptap/vue-2": "^2.0.0-beta.84"
27
+ },
28
+ "devDependencies": {
29
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
30
+ "@vue/cli-plugin-babel": "^4.5.11",
31
+ "@vue/cli-plugin-eslint": "^4.5.11",
32
+ "@vue/cli-service": "^4.5.11",
33
+ "axios": "^0.24.0",
34
+ "babel-eslint": "^10.1.0",
35
+ "eslint": "^6.7.2",
36
+ "eslint-plugin-vue": "^6.2.2",
37
+ "goodt-framework-css": "^1.1.1",
38
+ "less": "^3.13.1",
39
+ "less-loader": "^5.0.0",
40
+ "netlify-cli": "^5.0.1",
41
+ "vue-styleguidist": "4.35.0",
42
+ "vue-template-compiler": "^2.6.12"
43
+ },
44
+ "peerDependencies": {
45
+ "vue": "^2.6.12"
46
+ },
47
+ "eslintConfig": {
48
+ "root": true,
49
+ "env": {
50
+ "node": true
51
+ },
52
+ "extends": [
53
+ "plugin:vue/essential",
54
+ "eslint:recommended"
55
+ ],
56
+ "parserOptions": {
57
+ "parser": "babel-eslint"
58
+ },
59
+ "rules": {}
60
+ },
61
+ "browserslist": [
62
+ "> 1%",
63
+ "last 2 versions",
64
+ "not dead"
65
+ ]
66
+ }
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
+ ```