vue-editify 0.1.3 → 0.1.4

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 (32) hide show
  1. package/README.md +3 -3
  2. package/examples/App.vue +5668 -5669
  3. package/examples/main.js +4 -4
  4. package/lib/editify.es.js +167 -192
  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 +1188 -1178
  9. package/src/components/Menu.vue +1623 -1623
  10. package/src/components/Toolbar.vue +1214 -1214
  11. package/src/components/base/Button.vue +450 -450
  12. package/src/components/base/Checkbox.vue +196 -196
  13. package/src/components/base/Icon.vue +31 -31
  14. package/src/components/base/Layer.vue +712 -712
  15. package/src/components/base/Tooltip.vue +82 -82
  16. package/src/components/base/Triangle.vue +159 -159
  17. package/src/components/common/Colors.vue +138 -138
  18. package/src/components/common/InsertImage.vue +316 -316
  19. package/src/components/common/InsertLink.vue +136 -136
  20. package/src/components/common/InsertTable.vue +157 -157
  21. package/src/components/common/InsertVideo.vue +316 -316
  22. package/src/core/function.js +1044 -1044
  23. package/src/core/rule.js +239 -239
  24. package/src/core/tool.js +1056 -1051
  25. package/src/css/base.less +30 -30
  26. package/src/css/hljs.less +54 -54
  27. package/src/hljs/index.js +62 -62
  28. package/src/icon/iconfont.css +219 -219
  29. package/src/index.js +24 -24
  30. package/src/locale/en_US.js +86 -86
  31. package/src/locale/index.js +14 -14
  32. package/src/locale/zh_CN.js +86 -86
package/src/components/common/Colors.vue CHANGED
@@ -1,138 +1,138 @@
1
- <template>
2
- <div class="editify-colors">
3
- <div class="editify-colors-header" @click="selectColor({ value: '' })">
4
- <Icon value="remove"></Icon>
5
- <span>{{ $editTrans('defaultColor') }}</span>
6
- </div>
7
- <div class="editify-colors-list">
8
- <div class="editify-color" :class="{ active: value == item.value }" v-for="item in data" :style="{ borderColor: value == item.value ? color : '' }">
9
- <Tooltip block :content="item.label" :disabled="!tooltip">
10
- <div @click="selectColor(item)" class="editify-color-el" :style="{ background: item.value }"></div>
11
- </Tooltip>
12
- </div>
13
- </div>
14
- </div>
15
- </template>
16
- <script>
17
- import Icon from '../base/Icon'
18
- import Tooltip from '../base/Tooltip'
19
- export default {
20
- name: 'Colors',
21
- emits: ['change'],
22
- props: {
23
- //颜色数组
24
- data: {
25
- type: Array,
26
- default: function () {
27
- return []
28
- }
29
- },
30
- //选中的颜色
31
- value: {
32
- type: String,
33
- default: null
34
- },
35
- //激活状态颜色
36
- color: {
37
- type: String,
38
- default: ''
39
- },
40
- //是否使用工具提示
41
- tooltip: {
42
- type: Boolean,
43
- default: false
44
- }
45
- },
46
- data() {
47
- return {}
48
- },
49
- inject: ['$editTrans'],
50
- components: {
51
- Icon,
52
- Tooltip
53
- },
54
- methods: {
55
- //选择颜色
56
- selectColor(item) {
57
- this.$emit('change', item.value)
58
- }
59
- }
60
- }
61
- </script>
62
- <style lang="less" scoped>
63
- .editify-colors {
64
- display: block;
65
- color: @font-color;
66
- font-size: @font-size;
67
- padding: 6px 10px;
68
- box-sizing: border-box;
69
- width: 244px;
70
-
71
- .editify-colors-header {
72
- display: flex;
73
- justify-content: flex-start;
74
- align-items: center;
75
- position: relative;
76
- padding: 6px 10px;
77
- transform: all 200ms;
78
- margin-bottom: 10px;
79
- opacity: 0.8;
80
-
81
- &::after {
82
- content: '';
83
- width: 100%;
84
- height: 1px;
85
- background-color: @background-darker;
86
- position: absolute;
87
- left: 0;
88
- bottom: -5px;
89
- }
90
-
91
- :deep(.editify-icon) {
92
- margin-right: 10px;
93
- }
94
-
95
- &:hover {
96
- cursor: pointer;
97
- background-color: @background-dark;
98
- opacity: 1;
99
- }
100
-
101
- &:active {
102
- opacity: 1;
103
- background-color: @background-darker;
104
- }
105
- }
106
-
107
- .editify-colors-list {
108
- display: flex;
109
- justify-content: flex-start;
110
- flex-wrap: wrap;
111
-
112
- .editify-color {
113
- display: block;
114
- padding: 4px;
115
- border: 1px solid transparent;
116
- border-radius: 2px;
117
-
118
- &.active {
119
- border-color: @font-color-light;
120
- }
121
-
122
- .editify-color-el {
123
- display: block;
124
- width: 16px;
125
- height: 16px;
126
- border: 1px solid @border-color;
127
- border-radius: 2px;
128
- cursor: pointer;
129
- transition: all 200ms;
130
-
131
- &:hover {
132
- transform: scale(1.2);
133
- }
134
- }
135
- }
136
- }
137
- }
138
- </style>
1
+ <template>
2
+ <div class="editify-colors">
3
+ <div class="editify-colors-header" @click="selectColor({ value: '' })">
4
+ <Icon value="remove"></Icon>
5
+ <span>{{ $editTrans('defaultColor') }}</span>
6
+ </div>
7
+ <div class="editify-colors-list">
8
+ <div class="editify-color" :class="{ active: value == item.value }" v-for="item in data" :style="{ borderColor: value == item.value ? color : '' }">
9
+ <Tooltip block :content="item.label" :disabled="!tooltip">
10
+ <div @click="selectColor(item)" class="editify-color-el" :style="{ background: item.value }"></div>
11
+ </Tooltip>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ </template>
16
+ <script>
17
+ import Icon from '../base/Icon'
18
+ import Tooltip from '../base/Tooltip'
19
+ export default {
20
+ name: 'Colors',
21
+ emits: ['change'],
22
+ props: {
23
+ //颜色数组
24
+ data: {
25
+ type: Array,
26
+ default: function () {
27
+ return []
28
+ }
29
+ },
30
+ //选中的颜色
31
+ value: {
32
+ type: String,
33
+ default: null
34
+ },
35
+ //激活状态颜色
36
+ color: {
37
+ type: String,
38
+ default: ''
39
+ },
40
+ //是否使用工具提示
41
+ tooltip: {
42
+ type: Boolean,
43
+ default: false
44
+ }
45
+ },
46
+ data() {
47
+ return {}
48
+ },
49
+ inject: ['$editTrans'],
50
+ components: {
51
+ Icon,
52
+ Tooltip
53
+ },
54
+ methods: {
55
+ //选择颜色
56
+ selectColor(item) {
57
+ this.$emit('change', item.value)
58
+ }
59
+ }
60
+ }
61
+ </script>
62
+ <style lang="less" scoped>
63
+ .editify-colors {
64
+ display: block;
65
+ color: @font-color;
66
+ font-size: @font-size;
67
+ padding: 6px 10px;
68
+ box-sizing: border-box;
69
+ width: 244px;
70
+
71
+ .editify-colors-header {
72
+ display: flex;
73
+ justify-content: flex-start;
74
+ align-items: center;
75
+ position: relative;
76
+ padding: 6px 10px;
77
+ transform: all 200ms;
78
+ margin-bottom: 10px;
79
+ opacity: 0.8;
80
+
81
+ &::after {
82
+ content: '';
83
+ width: 100%;
84
+ height: 1px;
85
+ background-color: @background-darker;
86
+ position: absolute;
87
+ left: 0;
88
+ bottom: -5px;
89
+ }
90
+
91
+ :deep(.editify-icon) {
92
+ margin-right: 10px;
93
+ }
94
+
95
+ &:hover {
96
+ cursor: pointer;
97
+ background-color: @background-dark;
98
+ opacity: 1;
99
+ }
100
+
101
+ &:active {
102
+ opacity: 1;
103
+ background-color: @background-darker;
104
+ }
105
+ }
106
+
107
+ .editify-colors-list {
108
+ display: flex;
109
+ justify-content: flex-start;
110
+ flex-wrap: wrap;
111
+
112
+ .editify-color {
113
+ display: block;
114
+ padding: 4px;
115
+ border: 1px solid transparent;
116
+ border-radius: 2px;
117
+
118
+ &.active {
119
+ border-color: @font-color-light;
120
+ }
121
+
122
+ .editify-color-el {
123
+ display: block;
124
+ width: 16px;
125
+ height: 16px;
126
+ border: 1px solid @border-color;
127
+ border-radius: 2px;
128
+ cursor: pointer;
129
+ transition: all 200ms;
130
+
131
+ &:hover {
132
+ transform: scale(1.2);
133
+ }
134
+ }
135
+ }
136
+ }
137
+ }
138
+ </style>