goodteditor-ui 1.0.26 → 1.0.27
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.
- package/.eslintrc.js +7 -7
- package/.prettierrc +14 -14
- package/README.md +35 -35
- package/babel.config.js +5 -5
- package/index.js +53 -53
- package/jsconfig.json +13 -13
- package/package.json +67 -67
- package/src/App.vue +36 -36
- package/src/components/ui/Avatar.md +68 -68
- package/src/components/ui/Avatar.vue +180 -180
- package/src/components/ui/Badge.md +20 -20
- package/src/components/ui/Badge.vue +75 -75
- package/src/components/ui/Collapse.md +90 -90
- package/src/components/ui/Collapse.vue +86 -86
- package/src/components/ui/ColorPicker/Alpha.vue +114 -114
- package/src/components/ui/ColorPicker/Colors.vue +117 -117
- package/src/components/ui/ColorPicker/Hue.vue +113 -113
- package/src/components/ui/ColorPicker/Preview.vue +55 -55
- package/src/components/ui/ColorPicker/Saturation.vue +123 -123
- package/src/components/ui/ColorPicker/mixin.js +105 -105
- package/src/components/ui/ColorPicker.md +17 -17
- package/src/components/ui/ColorPicker.vue +314 -314
- package/src/components/ui/Datalist.md +41 -41
- package/src/components/ui/Datalist.vue +164 -164
- package/src/components/ui/DatePicker.md +168 -168
- package/src/components/ui/DatePicker.vue +527 -527
- package/src/components/ui/FileSelector.md +105 -105
- package/src/components/ui/FileSelector.vue +82 -82
- package/src/components/ui/Grid.md +130 -130
- package/src/components/ui/Grid.vue +92 -92
- package/src/components/ui/Image.md +59 -59
- package/src/components/ui/Image.vue +57 -57
- package/src/components/ui/InputAutocomplete.md +115 -115
- package/src/components/ui/InputAutocomplete.vue +349 -349
- package/src/components/ui/InputColorPicker.md +51 -51
- package/src/components/ui/InputColorPicker.vue +151 -151
- package/src/components/ui/InputDatePicker.md +121 -121
- package/src/components/ui/InputDatePicker.vue +326 -326
- package/src/components/ui/InputTags.md +51 -51
- package/src/components/ui/InputTags.vue +184 -184
- package/src/components/ui/InputTimePicker.md +25 -25
- package/src/components/ui/InputTimePicker.vue +253 -253
- package/src/components/ui/InputUnits.md +20 -20
- package/src/components/ui/InputUnits.vue +257 -257
- package/src/components/ui/Lazy.md +37 -37
- package/src/components/ui/Lazy.vue +92 -92
- package/src/components/ui/Pagination.md +74 -74
- package/src/components/ui/Pagination.vue +138 -138
- package/src/components/ui/Paginator.md +34 -34
- package/src/components/ui/Paginator.vue +83 -83
- package/src/components/ui/Popover.md +34 -34
- package/src/components/ui/Popover.vue +274 -274
- package/src/components/ui/Popup.md +59 -59
- package/src/components/ui/Popup.vue +150 -150
- package/src/components/ui/ResponsiveContainer.md +58 -58
- package/src/components/ui/ResponsiveContainer.vue +99 -99
- package/src/components/ui/Select.md +187 -187
- package/src/components/ui/Select.vue +421 -421
- package/src/components/ui/TimePicker.md +50 -50
- package/src/components/ui/TimePicker.vue +252 -252
- package/src/components/ui/Tooltip.md +54 -54
- package/src/components/ui/Tooltip.vue +113 -113
- package/src/components/ui/WysiwygEditor/WysiwygEditor.d.ts +128 -128
- package/src/components/ui/WysiwygEditor/constants.js +273 -273
- package/src/components/ui/WysiwygEditor/extensions/blockquote.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/bold.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/bullet-list.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/code-block.js +13 -13
- package/src/components/ui/WysiwygEditor/extensions/code.js +13 -13
- package/src/components/ui/WysiwygEditor/extensions/font-size.js +34 -34
- package/src/components/ui/WysiwygEditor/extensions/formatting.js +14 -14
- package/src/components/ui/WysiwygEditor/extensions/heading.js +13 -13
- package/src/components/ui/WysiwygEditor/extensions/horizontal-rule.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/image.js +37 -33
- package/src/components/ui/WysiwygEditor/extensions/index.d.ts +32 -32
- package/src/components/ui/WysiwygEditor/extensions/index.js +32 -32
- package/src/components/ui/WysiwygEditor/extensions/italic.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/link.js +16 -16
- package/src/components/ui/WysiwygEditor/extensions/list-item.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/ordered-list.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/paragraph.js +23 -23
- package/src/components/ui/WysiwygEditor/extensions/strike.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/table-cell.js +13 -13
- package/src/components/ui/WysiwygEditor/extensions/table-header.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/table-row.js +15 -15
- package/src/components/ui/WysiwygEditor/extensions/table.js +29 -29
- package/src/components/ui/WysiwygEditor/extensions/text-align.js +6 -6
- package/src/components/ui/WysiwygEditor/extensions/text-style.js +12 -12
- package/src/components/ui/WysiwygEditor/extensions/underline.js +15 -15
- package/src/components/ui/WysiwygEditor/index.d.ts +4 -4
- package/src/components/ui/WysiwygEditor/index.js +4 -4
- package/src/components/ui/WysiwygEditor/renders/Button.vue +28 -28
- package/src/components/ui/WysiwygEditor/renders/ColorPicker.vue +41 -41
- package/src/components/ui/WysiwygEditor/renders/Image.vue +200 -162
- package/src/components/ui/WysiwygEditor/renders/InputAuto.vue +34 -34
- package/src/components/ui/WysiwygEditor/renders/InputUnits.vue +37 -37
- package/src/components/ui/WysiwygEditor/renders/Link.vue +82 -82
- package/src/components/ui/WysiwygEditor/renders/Select.vue +47 -47
- package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue +49 -49
- package/src/components/ui/WysiwygEditor/renders/components/Popover.vue +15 -0
- package/src/components/ui/WysiwygEditor/renders/components/WithPopover.vue +35 -35
- package/src/components/ui/WysiwygEditor/renders/index.d.ts +8 -8
- package/src/components/ui/WysiwygEditor/renders/index.js +8 -8
- package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js +39 -39
- package/src/components/ui/WysiwygEditor/renders/mixins/index.js +1 -1
- package/src/components/ui/WysiwygEditor/tools-and-commands.js +709 -702
- package/src/components/ui/WysiwygEditor/utils.js +72 -72
- package/src/components/ui/WysiwygEditor.md +18 -18
- package/src/components/ui/WysiwygEditor.vue +266 -266
- package/src/components/ui/utils/FormComponent.js +107 -107
- package/src/components/ui/utils/Helpers.js +84 -84
- package/src/components/ui/utils/WithPopover.js +81 -81
- package/src/main.js +8 -8
- package/styleguide.config.js +37 -37
- package/vue.config.js +8 -8
- 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,67 +1,67 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "goodteditor-ui",
|
|
3
|
-
"version": "1.0.
|
|
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
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "goodteditor-ui",
|
|
3
|
+
"version": "1.0.27",
|
|
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
|
+
```
|