vue-editify 0.2.3 → 0.2.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/examples/App.vue +35 -10
  2. package/lib/editify/editify.vue.d.ts +9 -0
  3. package/lib/editify/props.d.ts +4 -0
  4. package/lib/editify.es.js +29 -8
  5. package/lib/editify.umd.js +2 -2
  6. package/lib/index.d.ts +10 -1
  7. package/package.json +1 -1
  8. package/src/components/button/button.less +16 -16
  9. package/src/components/checkbox/checkbox.less +14 -14
  10. package/src/components/colors/colors.less +9 -9
  11. package/src/components/insertImage/insertImage.less +13 -13
  12. package/src/components/insertLink/insertLink.less +9 -9
  13. package/src/components/insertTable/insertTable.less +4 -4
  14. package/src/components/insertVideo/insertVideo.less +13 -13
  15. package/src/components/layer/layer.less +6 -6
  16. package/src/components/menu/menu.less +7 -7
  17. package/src/components/toolbar/toolbar.less +10 -10
  18. package/src/components/tooltip/tooltip.less +1 -1
  19. package/src/components/tooltip/tooltip.vue +4 -2
  20. package/src/components/triangle/triangle.less +11 -8
  21. package/src/css/hljs.less +8 -8
  22. package/src/css/var.less +81 -0
  23. package/src/editify/editify.less +56 -55
  24. package/src/editify/editify.vue +17 -0
  25. package/src/editify/props.ts +5 -0
  26. package/src/index.ts +3 -1
  27. package/src/plugins/attachment/insertAttachment/insertAttachment.less +19 -19
  28. package/src/plugins/mathformula/insertMathformula/insertMathformula.less +9 -9
  29. package/vite.config.ts +1 -2
  30. package/src/css/base.less +0 -32
package/src/plugins/attachment/insertAttachment/insertAttachment.less CHANGED
@@ -20,7 +20,7 @@
20
20
  border-radius: 2px;
21
21
  left: 0;
22
22
  bottom: 0;
23
- transition: left 200ms;
23
+ transition: left 300ms;
24
24
 
25
25
  &.editify-upload {
26
26
  left: 5px;
@@ -34,10 +34,10 @@
34
34
  .editify-attachment-header-item {
35
35
  display: block;
36
36
  text-align: center;
37
- font-size: @font-size;
38
- color: @font-color;
37
+ font-size: var(--font-size);
38
+ color: var(--editify-font-color);
39
39
  opacity: 0.8;
40
- transition: all 200ms;
40
+ transition: all 300ms;
41
41
  width: 60px;
42
42
  overflow: hidden;
43
43
  white-space: nowrap;
@@ -54,7 +54,7 @@
54
54
 
55
55
  &.editify-active {
56
56
  opacity: 1;
57
- color: @font-color-dark;
57
+ color: var(--editify-font-color-dark);
58
58
  }
59
59
  }
60
60
  }
@@ -72,18 +72,18 @@
72
72
  margin: 0 0 10px 0;
73
73
  padding: 4px 2px;
74
74
  border: none;
75
- font-size: @font-size;
76
- color: @font-color;
77
- border-bottom: 1px solid @border-color;
75
+ font-size: var(--font-size);
76
+ color: var(--editify-font-color);
77
+ border-bottom: 1px solid var(--editify-border-color);
78
78
  line-height: 1.5;
79
- transition: border-color 500ms;
79
+ transition: border-color 300ms;
80
80
  background-color: transparent;
81
81
  outline: none;
82
82
  box-sizing: border-box;
83
83
 
84
84
  &::-webkit-input-placeholder,
85
85
  &::placeholder {
86
- color: @font-color-disabled;
86
+ color: var(--editify-font-color-disabled);
87
87
  font-family: inherit;
88
88
  font-size: inherit;
89
89
  vertical-align: middle;
@@ -95,9 +95,9 @@
95
95
  justify-content: flex-end;
96
96
  align-items: center;
97
97
  width: 100%;
98
- font-size: @font-size;
98
+ font-size: var(--font-size);
99
99
  opacity: 0.8;
100
- transition: all 200ms;
100
+ transition: all 300ms;
101
101
 
102
102
  &:hover {
103
103
  cursor: pointer;
@@ -122,11 +122,11 @@
122
122
  margin: 0;
123
123
  padding: 4px 2px;
124
124
  border: none;
125
- font-size: @font-size;
126
- color: @font-color;
127
- border-bottom: 1px solid @border-color;
125
+ font-size: var(--font-size);
126
+ color: var(--editify-font-color);
127
+ border-bottom: 1px solid var(--editify-border-color);
128
128
  line-height: 1.5;
129
- transition: border-color 500ms;
129
+ transition: border-color 300ms;
130
130
  background-color: transparent;
131
131
  outline: none;
132
132
  box-sizing: border-box;
@@ -134,7 +134,7 @@
134
134
 
135
135
  &::-webkit-input-placeholder,
136
136
  &::placeholder {
137
- color: @font-color-disabled;
137
+ color: var(--editify-font-color-disabled);
138
138
  font-family: inherit;
139
139
  font-size: inherit;
140
140
  vertical-align: middle;
@@ -146,8 +146,8 @@
146
146
  font-size: 20px;
147
147
  line-height: 1;
148
148
  opacity: 0.8;
149
- transition: all 200ms;
150
- color: @font-color;
149
+ transition: all 300ms;
150
+ color: var(--editify-font-color);
151
151
  border-radius: 2px;
152
152
  padding: 2px;
153
153
  margin-left: 15px;
package/src/plugins/mathformula/insertMathformula/insertMathformula.less CHANGED
@@ -7,8 +7,8 @@
7
7
  display: block;
8
8
  text-align: left;
9
9
  margin-bottom: 10px;
10
- font-size: @font-size;
11
- color: @font-color;
10
+ font-size: var(--font-size);
11
+ color: var(--editify-font-color);
12
12
  }
13
13
 
14
14
  .editify-mathformula-textarea {
@@ -16,7 +16,7 @@
16
16
  appearance: none;
17
17
  -webkit-appearance: none;
18
18
  -moz-appearance: none;
19
- border: 1px solid @border-color;
19
+ border: 1px solid var(--editify-border-color);
20
20
  width: 100%;
21
21
  height: 100px;
22
22
  overflow-x: hidden;
@@ -24,10 +24,10 @@
24
24
  border-radius: 2px;
25
25
  margin: 0;
26
26
  padding: 6px;
27
- font-size: @font-size;
28
- color: @font-color;
27
+ font-size: var(--font-size);
28
+ color: var(--editify-font-color);
29
29
  line-height: 1.5;
30
- transition: border-color 500ms;
30
+ transition: border-color 300ms;
31
31
  background-color: transparent;
32
32
  outline: none;
33
33
  box-sizing: border-box;
@@ -36,7 +36,7 @@
36
36
 
37
37
  &::-webkit-input-placeholder,
38
38
  &::placeholder {
39
- color: @font-color-disabled;
39
+ color: var(--editify-font-color-disabled);
40
40
  font-family: inherit;
41
41
  font-size: inherit;
42
42
  vertical-align: middle;
@@ -53,8 +53,8 @@
53
53
  span {
54
54
  cursor: pointer;
55
55
  opacity: 0.8;
56
- transition: all 200ms;
57
- font-size: @font-size;
56
+ transition: all 300ms;
57
+ font-size: var(--font-size);
58
58
 
59
59
  &:hover {
60
60
  opacity: 1;
package/vite.config.ts CHANGED
@@ -37,8 +37,7 @@ export default defineConfig({
37
37
  preprocessorOptions: {
38
38
  less: {
39
39
  // 使用 less 编写样式的 UI 库（如 antd）时建议加入这个设置
40
- javascriptEnabled: true,
41
- additionalData: `@import "src/css/base.less";`
40
+ javascriptEnabled: true
42
41
  }
43
42
  }
44
43
  },
package/src/css/base.less DELETED
@@ -1,32 +0,0 @@
1
- //三角图标大小
2
- @triangle-size: 6px;
3
- //编辑器内的默认字体大小
4
- @font-size: 14px;
5
- //较小的字体（工具提示等）
6
- @font-size-small: 12px;
7
- //字体颜色
8
- @font-color: #555;
9
- //较浅的字体颜色（副文本颜色）
10
- @font-color-light: #888;
11
- //更浅的字体颜色（placeholder和禁用字体颜色）
12
- @font-color-disabled: #bbb;
13
- //较深的字体颜色（编辑器内容区域字体颜色）
14
- @font-color-dark: #333;
15
- //链接字体颜色
16
- @font-color-link: #079457;
17
- //链接字体悬浮色
18
- @font-color-link-dark: #05683d;
19
- //边框颜色
20
- @border-color: #dfdfdf;
21
- //默认背景色
22
- @background: #fff;
23
- //较深的背景色
24
- @background-dark: #f7f8fa;
25
- //更深的背景色
26
- @background-darker: #ebedf0;
27
- //代码块背景色
28
- @pre-background: #f2f6fb;
29
- //反色调字体颜色
30
- @reverse-color: #fff;
31
- //反色调背景色
32
- @reverse-background: #000;