goodteditor-ui 1.0.49 → 1.0.51
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/package.json +5 -3
- package/src/components/ui/Popup.vue +27 -4
- package/src/components/ui/Tooltip.vue +26 -7
- package/src/components/ui/WysiwygEditor/renders/Button.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/ColorPicker.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/Image.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/Link.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue +2 -2
- package/src/components/ui/utils/Helpers.js +6 -0
- package/src/main.js +5 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goodteditor-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.51",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"homepage": "https://goodt-ui.netlify.app/",
|
|
6
6
|
"scripts": {
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
"babel-eslint": "^10.1.0",
|
|
37
37
|
"eslint": "^6.7.2",
|
|
38
38
|
"eslint-plugin-vue": "^6.2.2",
|
|
39
|
-
"goodt-framework-css": "^2.0.0",
|
|
40
39
|
"less": "^3.13.1",
|
|
41
40
|
"less-loader": "^5.0.0",
|
|
42
41
|
"netlify-cli": "^5.0.1",
|
|
@@ -44,7 +43,10 @@
|
|
|
44
43
|
"vue-template-compiler": "^2.6.12"
|
|
45
44
|
},
|
|
46
45
|
"peerDependencies": {
|
|
47
|
-
"vue": "^2.6.12"
|
|
46
|
+
"vue": "^2.6.12",
|
|
47
|
+
"goodt-framework-css": "^2.0.0",
|
|
48
|
+
"@mdi/font": "^7.4.0",
|
|
49
|
+
"@mdi/light-font": "^0.2.0"
|
|
48
50
|
},
|
|
49
51
|
"eslintConfig": {
|
|
50
52
|
"root": true,
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
v-if="visible"
|
|
7
7
|
>
|
|
8
8
|
<div class="popup-dialog" v-bind="dialog">
|
|
9
|
-
<!--
|
|
9
|
+
<!--
|
|
10
10
|
@slot Custom close slot
|
|
11
11
|
@binding {Function} close closes the popup
|
|
12
12
|
-->
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<i class="mdi mdi-close" style="font-size: 1.25rem"></i>
|
|
16
16
|
</div>
|
|
17
17
|
</slot>
|
|
18
|
-
<div class="popup-dialog-body" :
|
|
19
|
-
<!--
|
|
18
|
+
<div class="popup-dialog-body" :style="dialogBody.style" :class="dialogBodyClass">
|
|
19
|
+
<!--
|
|
20
20
|
@slot Custom body slot
|
|
21
21
|
@binding {Function} close closes the popup
|
|
22
22
|
-->
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
:class="{ 'pad-none': !usePadding }"
|
|
28
28
|
v-if="$scopedSlots.footer"
|
|
29
29
|
>
|
|
30
|
-
<!--
|
|
30
|
+
<!--
|
|
31
31
|
@slot Custom footer slot
|
|
32
32
|
@binding {Function} close closes the popup
|
|
33
33
|
-->
|
|
@@ -89,6 +89,16 @@ export default {
|
|
|
89
89
|
return { class: {}, style: {} };
|
|
90
90
|
},
|
|
91
91
|
},
|
|
92
|
+
/**
|
|
93
|
+
* Popup dialog body options for styling css/style
|
|
94
|
+
* { class:any style:any }
|
|
95
|
+
*/
|
|
96
|
+
dialogBody: {
|
|
97
|
+
type: Object,
|
|
98
|
+
default() {
|
|
99
|
+
return { class: {}, style: {} };
|
|
100
|
+
},
|
|
101
|
+
},
|
|
92
102
|
/**
|
|
93
103
|
* Whether to show the close button
|
|
94
104
|
*/
|
|
@@ -111,6 +121,19 @@ export default {
|
|
|
111
121
|
default: 'scroll-hide',
|
|
112
122
|
},
|
|
113
123
|
},
|
|
124
|
+
computed: {
|
|
125
|
+
dialogBodyClass() {
|
|
126
|
+
const { dialogBody, usePadding } = this;
|
|
127
|
+
|
|
128
|
+
if (usePadding) {
|
|
129
|
+
return dialogBody.class;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
return Array.isArray(dialogBody.class)
|
|
133
|
+
? [dialogBody.class, 'pad-none']
|
|
134
|
+
: { ...dialogBody.class, 'pad-none': true };
|
|
135
|
+
},
|
|
136
|
+
},
|
|
114
137
|
watch: {
|
|
115
138
|
visible: {
|
|
116
139
|
handler(val) {
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
@mouseenter.native="onPopoverMouseEnter"
|
|
8
8
|
@mouseleave.native="onPopoverMouseLeave"
|
|
9
9
|
>
|
|
10
|
-
<!--
|
|
10
|
+
<!--
|
|
11
11
|
@slot Tooltip slot
|
|
12
12
|
-->
|
|
13
13
|
<slot name="tooltip">
|
|
14
14
|
<div class="tooltip">
|
|
15
|
-
<!--
|
|
15
|
+
<!--
|
|
16
16
|
@slot Tooltip content slot
|
|
17
17
|
-->
|
|
18
18
|
<slot></slot>
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</style>
|
|
29
29
|
<script>
|
|
30
30
|
import UiPopover from './Popover.vue';
|
|
31
|
-
import { Position } from './utils/Helpers';
|
|
31
|
+
import { Position, TriggerOn } from './utils/Helpers';
|
|
32
32
|
import WithPopover from './utils/WithPopover';
|
|
33
33
|
|
|
34
34
|
export default {
|
|
@@ -59,17 +59,33 @@ export default {
|
|
|
59
59
|
return [0, 5];
|
|
60
60
|
},
|
|
61
61
|
},
|
|
62
|
+
/**
|
|
63
|
+
* Conditions to trigger tooltip
|
|
64
|
+
* @default mousemove
|
|
65
|
+
* @values mousemove,click
|
|
66
|
+
*/
|
|
67
|
+
triggerOn: {
|
|
68
|
+
type: String,
|
|
69
|
+
default: TriggerOn.MOUSE_MOVE
|
|
70
|
+
}
|
|
62
71
|
},
|
|
63
72
|
data() {
|
|
64
73
|
return {
|
|
65
|
-
targetEvents: {
|
|
66
|
-
mouseenter: this.onTargetMouseEnter,
|
|
67
|
-
mouseleave: this.onTargetMouseLeave,
|
|
68
|
-
},
|
|
69
74
|
timeout: null,
|
|
70
75
|
};
|
|
71
76
|
},
|
|
72
77
|
computed: {
|
|
78
|
+
targetEvents() {
|
|
79
|
+
if (this.triggerOn === TriggerOn.MOUSE_MOVE) {
|
|
80
|
+
return {
|
|
81
|
+
mouseenter: this.onTargetMouseEnter,
|
|
82
|
+
mouseleave: this.onTargetMouseLeave,
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
return {
|
|
86
|
+
click: this.onTargetClick,
|
|
87
|
+
};
|
|
88
|
+
},
|
|
73
89
|
targetBinds() {
|
|
74
90
|
return {
|
|
75
91
|
'data-popover': this.popoverTargetId,
|
|
@@ -102,6 +118,9 @@ export default {
|
|
|
102
118
|
onTargetMouseLeave(e) {
|
|
103
119
|
this.setShow(false);
|
|
104
120
|
},
|
|
121
|
+
onTargetClick(e) {
|
|
122
|
+
this.setShow(!this.popoverShow);
|
|
123
|
+
},
|
|
105
124
|
onPopoverMouseEnter(e) {
|
|
106
125
|
this.setShow(true);
|
|
107
126
|
},
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :title="title">
|
|
3
3
|
<button
|
|
4
|
-
:class="{ 'btn-outline': !isActive
|
|
4
|
+
:class="{ 'btn-outline': !isActive }"
|
|
5
5
|
:disabled="!isEnabled"
|
|
6
|
-
class="btn btn-small btn-icon"
|
|
6
|
+
class="btn btn-small btn-icon btn-primary"
|
|
7
7
|
@click.stop="onClick">
|
|
8
8
|
<div class="icon">
|
|
9
9
|
<i :class="icon" class="mdi"></i>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :data-popover="popoverTargetId" :title="title">
|
|
3
3
|
<button
|
|
4
|
-
:class="{ 'btn-outline': !popoverShow
|
|
5
|
-
class="btn btn-small btn-icon"
|
|
4
|
+
:class="{ 'btn-outline': !popoverShow }"
|
|
5
|
+
class="btn btn-small btn-icon btn-primary"
|
|
6
6
|
@click="togglePopover">
|
|
7
7
|
<div class="icon">
|
|
8
8
|
<i class="mdi" :class="icon"></i>
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<template #button="{ togglePopover }">
|
|
4
4
|
<button
|
|
5
5
|
:title="title"
|
|
6
|
-
:class="{ 'btn-outline': !isPopoverShown
|
|
7
|
-
class="btn btn-small btn-icon"
|
|
6
|
+
:class="{ 'btn-outline': !isPopoverShown }"
|
|
7
|
+
class="btn btn-small btn-icon btn-primary"
|
|
8
8
|
@click="togglePopover">
|
|
9
9
|
<div class="icon">
|
|
10
10
|
<i class="mdi" :class="icon"></i>
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<template #button="{ togglePopover }">
|
|
4
4
|
<button
|
|
5
5
|
:title="title"
|
|
6
|
-
:class="{ 'btn-outline': !isPopoverShown
|
|
7
|
-
class="btn btn-small btn-icon"
|
|
6
|
+
:class="{ 'btn-outline': !isPopoverShown }"
|
|
7
|
+
class="btn btn-small btn-icon btn-primary"
|
|
8
8
|
@click="togglePopover">
|
|
9
9
|
<div class="icon">
|
|
10
10
|
<i class="mdi" :class="icon"></i>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :data-popover="popoverTargetId" :title="title">
|
|
3
3
|
<button
|
|
4
|
-
:class="{ 'btn-outline': !popoverShow
|
|
5
|
-
class="btn btn-small btn-icon"
|
|
4
|
+
:class="{ 'btn-outline': !popoverShow }"
|
|
5
|
+
class="btn btn-small btn-icon btn-primary"
|
|
6
6
|
@click="togglePopover">
|
|
7
7
|
<div class="icon">
|
|
8
8
|
<i class="mdi" :class="icon"></i>
|
|
@@ -34,6 +34,11 @@ const Position = {
|
|
|
34
34
|
END: 'end',
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
+
const TriggerOn = {
|
|
38
|
+
MOUSE_MOVE: 'mousemove',
|
|
39
|
+
CLICK: 'click'
|
|
40
|
+
};
|
|
41
|
+
|
|
37
42
|
const debounce = (func, delay) => {
|
|
38
43
|
let timeout;
|
|
39
44
|
return function executedFunction(...args) {
|
|
@@ -78,6 +83,7 @@ export {
|
|
|
78
83
|
nextId,
|
|
79
84
|
Key,
|
|
80
85
|
Position,
|
|
86
|
+
TriggerOn,
|
|
81
87
|
debounce,
|
|
82
88
|
useIntersectionObserver,
|
|
83
89
|
generateGetBoundingClientRect,
|
package/src/main.js
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
2
|
import App from './App.vue';
|
|
3
3
|
|
|
4
|
+
// css
|
|
5
|
+
import 'goodt-framework-css/dist/all.css';
|
|
6
|
+
import '@mdi/font/css/materialdesignicons.min.css';
|
|
7
|
+
import '@mdi/light-font/css/materialdesignicons-light.min.css';
|
|
8
|
+
|
|
4
9
|
Vue.config.productionTip = false;
|
|
5
10
|
|
|
6
11
|
new Vue({
|