vue-editify 0.0.24 → 0.0.25

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/README.md +3 -3
  2. package/examples/App.vue +90 -90
  3. package/examples/main.js +4 -4
  4. package/lib/editify.es.js +30 -30
  5. package/lib/editify.umd.js +1 -1
  6. package/lib/style.css +1 -1
  7. package/package.json +37 -37
  8. package/src/Editify.vue +2004 -2004
  9. package/src/components/base/Button.vue +440 -440
  10. package/src/components/base/Checkbox.vue +196 -196
  11. package/src/components/base/Icon.vue +31 -31
  12. package/src/components/base/Layer.vue +712 -712
  13. package/src/components/base/Tooltip.vue +82 -82
  14. package/src/components/base/Triangle.vue +159 -159
  15. package/src/components/bussiness/Colors.vue +138 -138
  16. package/src/components/bussiness/InsertImage.vue +316 -316
  17. package/src/components/bussiness/InsertLink.vue +136 -136
  18. package/src/components/bussiness/InsertTable.vue +157 -157
  19. package/src/components/bussiness/InsertVideo.vue +316 -316
  20. package/src/components/bussiness/Menu.vue +1458 -1458
  21. package/src/components/bussiness/Toolbar.vue +1122 -1122
  22. package/src/core/index.js +1263 -1263
  23. package/src/css/base.less +30 -30
  24. package/src/css/hljs.less +54 -54
  25. package/src/hljs/index.js +62 -62
  26. package/src/icon/iconfont.css +211 -211
  27. package/src/index.js +24 -24
  28. package/src/locale/en_US.js +84 -84
  29. package/src/locale/index.js +14 -14
  30. package/src/locale/zh_CN.js +84 -84
package/src/components/base/Tooltip.vue CHANGED
@@ -1,82 +1,82 @@
1
- <template>
2
- <div class="editify-tooltip" :class="{ block: block }" @mouseenter="showContent" @mouseleave="hideContent">
3
- <div ref="target" class="editify-tooltip-target">
4
- <slot></slot>
5
- </div>
6
- <Layer v-model="show" :node="node" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade">
7
- <div class="editify-tooltip-content">{{ content }}</div>
8
- </Layer>
9
- </div>
10
- </template>
11
- <script>
12
- import Layer from './Layer'
13
- export default {
14
- name: 'Tooltip',
15
- props: {
16
- //提示内容
17
- content: {
18
- type: String,
19
- default: ''
20
- },
21
- //是否禁用
22
- disabled: {
23
- type: Boolean,
24
- default: false
25
- },
26
- //是否块级
27
- block: {
28
- type: Boolean,
29
- default: false
30
- }
31
- },
32
- data() {
33
- return {
34
- show: false,
35
- node: null
36
- }
37
- },
38
- components: {
39
- Layer
40
- },
41
- methods: {
42
- showContent() {
43
- if (this.disabled) {
44
- return
45
- }
46
- this.node = this.$refs.target
47
- this.show = true
48
- },
49
- hideContent() {
50
- if (this.disabled) {
51
- return
52
- }
53
- this.show = false
54
- }
55
- }
56
- }
57
- </script>
58
- <style lang="less" scoped>
59
- .editify-tooltip {
60
- position: relative;
61
- display: inline-block;
62
-
63
- .editify-tooltip-target {
64
- display: inline-block;
65
- }
66
-
67
- .editify-tooltip-content {
68
- display: block;
69
- padding: 6px 10px;
70
- font-size: @font-size;
71
- white-space: nowrap;
72
- }
73
-
74
- &.block {
75
- display: block;
76
-
77
- .editify-tooltip-target {
78
- display: block;
79
- }
80
- }
81
- }
82
- </style>
1
+ <template>
2
+ <div class="editify-tooltip" :class="{ block: block }" @mouseenter="showContent" @mouseleave="hideContent">
3
+ <div ref="target" class="editify-tooltip-target">
4
+ <slot></slot>
5
+ </div>
6
+ <Layer v-model="show" :node="node" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade">
7
+ <div class="editify-tooltip-content">{{ content }}</div>
8
+ </Layer>
9
+ </div>
10
+ </template>
11
+ <script>
12
+ import Layer from './Layer'
13
+ export default {
14
+ name: 'Tooltip',
15
+ props: {
16
+ //提示内容
17
+ content: {
18
+ type: String,
19
+ default: ''
20
+ },
21
+ //是否禁用
22
+ disabled: {
23
+ type: Boolean,
24
+ default: false
25
+ },
26
+ //是否块级
27
+ block: {
28
+ type: Boolean,
29
+ default: false
30
+ }
31
+ },
32
+ data() {
33
+ return {
34
+ show: false,
35
+ node: null
36
+ }
37
+ },
38
+ components: {
39
+ Layer
40
+ },
41
+ methods: {
42
+ showContent() {
43
+ if (this.disabled) {
44
+ return
45
+ }
46
+ this.node = this.$refs.target
47
+ this.show = true
48
+ },
49
+ hideContent() {
50
+ if (this.disabled) {
51
+ return
52
+ }
53
+ this.show = false
54
+ }
55
+ }
56
+ }
57
+ </script>
58
+ <style lang="less" scoped>
59
+ .editify-tooltip {
60
+ position: relative;
61
+ display: inline-block;
62
+
63
+ .editify-tooltip-target {
64
+ display: inline-block;
65
+ }
66
+
67
+ .editify-tooltip-content {
68
+ display: block;
69
+ padding: 6px 10px;
70
+ font-size: @font-size;
71
+ white-space: nowrap;
72
+ }
73
+
74
+ &.block {
75
+ display: block;
76
+
77
+ .editify-tooltip-target {
78
+ display: block;
79
+ }
80
+ }
81
+ }
82
+ </style>
package/src/components/base/Triangle.vue CHANGED
@@ -1,159 +1,159 @@
1
- <template>
2
- <div class="editify-triangle" :style="style" :data-editify-placement="placement">
3
- <div class="editify-triangle-el" :style="elStyle"></div>
4
- </div>
5
- </template>
6
-
7
- <script>
8
- export default {
9
- name: 'Triangle',
10
- props: {
11
- //位置
12
- placement: {
13
- type: String,
14
- default: 'top',
15
- validator(value) {
16
- return ['top', 'left', 'right', 'bottom'].includes(value)
17
- }
18
- },
19
- //边框颜色
20
- color: {
21
- type: String,
22
- default: null
23
- },
24
- //背景色
25
- background: {
26
- type: String,
27
- default: null
28
- }
29
- },
30
- computed: {
31
- style() {
32
- if (this.placement == 'top') {
33
- return {
34
- borderBottomColor: this.color ? this.color : ''
35
- }
36
- }
37
- if (this.placement == 'bottom') {
38
- return {
39
- borderTopColor: this.color ? this.color : ''
40
- }
41
- }
42
- if (this.placement == 'left') {
43
- return {
44
- borderRightColor: this.color ? this.color : ''
45
- }
46
- }
47
- if (this.placement == 'right') {
48
- return {
49
- borderLeftColor: this.color ? this.color : ''
50
- }
51
- }
52
- },
53
- elStyle() {
54
- if (this.placement == 'top') {
55
- return {
56
- borderBottomColor: this.background ? this.background : ''
57
- }
58
- }
59
- if (this.placement == 'bottom') {
60
- return {
61
- borderTopColor: this.background ? this.background : ''
62
- }
63
- }
64
- if (this.placement == 'left') {
65
- return {
66
- borderRightColor: this.background ? this.background : ''
67
- }
68
- }
69
- if (this.placement == 'right') {
70
- return {
71
- borderLeftColor: this.background ? this.background : ''
72
- }
73
- }
74
- }
75
- }
76
- }
77
- </script>
78
-
79
- <style lang="less" scoped>
80
- .editify-triangle {
81
- position: relative;
82
- display: inline-block;
83
- width: 0;
84
- height: 0;
85
- border-color: transparent;
86
- border-style: solid;
87
- border-width: @triangle-size;
88
-
89
- .editify-triangle-el {
90
- position: absolute;
91
- display: inline-block;
92
- width: 0;
93
- height: 0;
94
- border-color: transparent;
95
- border-style: solid;
96
- border-width: calc(@triangle-size - 1px);
97
- }
98
-
99
- &[data-editify-placement='top'] {
100
- border-top: none;
101
- border-bottom-color: @border-color;
102
-
103
- .editify-triangle-el {
104
- border-top: none;
105
- border-bottom-color: @background;
106
- left: 1px;
107
- top: 1.5px;
108
- right: auto;
109
- bottom: 0;
110
- margin-left: -@triangle-size;
111
- }
112
- }
113
-
114
- &[data-editify-placement='bottom'] {
115
- border-bottom: none;
116
- border-top-color: @border-color;
117
-
118
- .editify-triangle-el {
119
- border-bottom: none;
120
- border-top-color: @background;
121
- left: 1px;
122
- bottom: 1.5px;
123
- top: auto;
124
- right: auto;
125
- margin-left: -@triangle-size;
126
- }
127
- }
128
-
129
- &[data-editify-placement='left'] {
130
- border-left: none;
131
- border-right-color: @border-color;
132
-
133
- .editify-triangle-el {
134
- border-left: none;
135
- border-right-color: @background;
136
- left: 1.5px;
137
- top: 1px;
138
- right: auto;
139
- bottom: auto;
140
- margin-top: -@triangle-size;
141
- }
142
- }
143
-
144
- &[data-editify-placement='right'] {
145
- border-right: none;
146
- border-left-color: @border-color;
147
-
148
- .editify-triangle-el {
149
- border-right: none;
150
- border-left-color: @background;
151
- right: 1.5px;
152
- top: 1px;
153
- bottom: auto;
154
- left: auto;
155
- margin-top: -@triangle-size;
156
- }
157
- }
158
- }
159
- </style>
1
+ <template>
2
+ <div class="editify-triangle" :style="style" :data-editify-placement="placement">
3
+ <div class="editify-triangle-el" :style="elStyle"></div>
4
+ </div>
5
+ </template>
6
+
7
+ <script>
8
+ export default {
9
+ name: 'Triangle',
10
+ props: {
11
+ //位置
12
+ placement: {
13
+ type: String,
14
+ default: 'top',
15
+ validator(value) {
16
+ return ['top', 'left', 'right', 'bottom'].includes(value)
17
+ }
18
+ },
19
+ //边框颜色
20
+ color: {
21
+ type: String,
22
+ default: null
23
+ },
24
+ //背景色
25
+ background: {
26
+ type: String,
27
+ default: null
28
+ }
29
+ },
30
+ computed: {
31
+ style() {
32
+ if (this.placement == 'top') {
33
+ return {
34
+ borderBottomColor: this.color ? this.color : ''
35
+ }
36
+ }
37
+ if (this.placement == 'bottom') {
38
+ return {
39
+ borderTopColor: this.color ? this.color : ''
40
+ }
41
+ }
42
+ if (this.placement == 'left') {
43
+ return {
44
+ borderRightColor: this.color ? this.color : ''
45
+ }
46
+ }
47
+ if (this.placement == 'right') {
48
+ return {
49
+ borderLeftColor: this.color ? this.color : ''
50
+ }
51
+ }
52
+ },
53
+ elStyle() {
54
+ if (this.placement == 'top') {
55
+ return {
56
+ borderBottomColor: this.background ? this.background : ''
57
+ }
58
+ }
59
+ if (this.placement == 'bottom') {
60
+ return {
61
+ borderTopColor: this.background ? this.background : ''
62
+ }
63
+ }
64
+ if (this.placement == 'left') {
65
+ return {
66
+ borderRightColor: this.background ? this.background : ''
67
+ }
68
+ }
69
+ if (this.placement == 'right') {
70
+ return {
71
+ borderLeftColor: this.background ? this.background : ''
72
+ }
73
+ }
74
+ }
75
+ }
76
+ }
77
+ </script>
78
+
79
+ <style lang="less" scoped>
80
+ .editify-triangle {
81
+ position: relative;
82
+ display: inline-block;
83
+ width: 0;
84
+ height: 0;
85
+ border-color: transparent;
86
+ border-style: solid;
87
+ border-width: @triangle-size;
88
+
89
+ .editify-triangle-el {
90
+ position: absolute;
91
+ display: inline-block;
92
+ width: 0;
93
+ height: 0;
94
+ border-color: transparent;
95
+ border-style: solid;
96
+ border-width: calc(@triangle-size - 1px);
97
+ }
98
+
99
+ &[data-editify-placement='top'] {
100
+ border-top: none;
101
+ border-bottom-color: @border-color;
102
+
103
+ .editify-triangle-el {
104
+ border-top: none;
105
+ border-bottom-color: @background;
106
+ left: 1px;
107
+ top: 1.5px;
108
+ right: auto;
109
+ bottom: 0;
110
+ margin-left: -@triangle-size;
111
+ }
112
+ }
113
+
114
+ &[data-editify-placement='bottom'] {
115
+ border-bottom: none;
116
+ border-top-color: @border-color;
117
+
118
+ .editify-triangle-el {
119
+ border-bottom: none;
120
+ border-top-color: @background;
121
+ left: 1px;
122
+ bottom: 1.5px;
123
+ top: auto;
124
+ right: auto;
125
+ margin-left: -@triangle-size;
126
+ }
127
+ }
128
+
129
+ &[data-editify-placement='left'] {
130
+ border-left: none;
131
+ border-right-color: @border-color;
132
+
133
+ .editify-triangle-el {
134
+ border-left: none;
135
+ border-right-color: @background;
136
+ left: 1.5px;
137
+ top: 1px;
138
+ right: auto;
139
+ bottom: auto;
140
+ margin-top: -@triangle-size;
141
+ }
142
+ }
143
+
144
+ &[data-editify-placement='right'] {
145
+ border-right: none;
146
+ border-left-color: @border-color;
147
+
148
+ .editify-triangle-el {
149
+ border-right: none;
150
+ border-left-color: @background;
151
+ right: 1.5px;
152
+ top: 1px;
153
+ bottom: auto;
154
+ left: auto;
155
+ margin-top: -@triangle-size;
156
+ }
157
+ }
158
+ }
159
+ </style>