vue-editify 0.0.27 → 0.0.28

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 +41 -41
  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/bussiness/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>