goodteditor-ui 1.0.23 → 1.0.25

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