vue-editify 0.2.3 → 0.2.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 (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 +14 -14
  9. package/src/components/checkbox/checkbox.less +13 -13
  10. package/src/components/colors/colors.less +8 -8
  11. package/src/components/insertImage/insertImage.less +10 -10
  12. package/src/components/insertLink/insertLink.less +6 -6
  13. package/src/components/insertTable/insertTable.less +4 -4
  14. package/src/components/insertVideo/insertVideo.less +10 -10
  15. package/src/components/layer/layer.less +5 -5
  16. package/src/components/menu/menu.less +7 -7
  17. package/src/components/toolbar/toolbar.less +7 -7
  18. package/src/components/tooltip/tooltip.vue +4 -2
  19. package/src/components/triangle/triangle.less +11 -8
  20. package/src/css/hljs.less +8 -8
  21. package/src/css/root.less +79 -0
  22. package/src/css/var.less +6 -0
  23. package/src/editify/editify.less +46 -45
  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 +15 -15
  28. package/src/plugins/mathformula/insertMathformula/insertMathformula.less +6 -6
  29. package/vite.config.ts +1 -1
  30. package/src/css/base.less +0 -32
package/lib/index.d.ts CHANGED
@@ -114,6 +114,10 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
114
114
  type: import('vue').PropType<import('./core/tool').PluginType[]>;
115
115
  default: () => never[];
116
116
  };
117
+ dark: {
118
+ type: BooleanConstructor;
119
+ default: boolean;
120
+ };
117
121
  }, {
118
122
  editor: import('vue').Ref<{
119
123
  $el: HTMLElement;
@@ -687,6 +691,10 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
687
691
  type: import('vue').PropType<import('./core/tool').PluginType[]>;
688
692
  default: () => never[];
689
693
  };
694
+ dark: {
695
+ type: BooleanConstructor;
696
+ default: boolean;
697
+ };
690
698
  }>> & {
691
699
  onFocus?: ((...args: any[]) => any) | undefined;
692
700
  onBlur?: ((...args: any[]) => any) | undefined;
@@ -726,6 +734,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
726
734
  renderRules: ((el: import('alex-editor').AlexElement) => void)[];
727
735
  tab: boolean;
728
736
  plugins: import('./core/tool').PluginType[];
737
+ dark: boolean;
729
738
  }, {}>>;
730
739
  export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from './components/button/props';
731
740
  export type { InsertImageUploadErrorType } from './components/insertImage/props';
@@ -734,7 +743,7 @@ export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuI
734
743
  export type { ElementMatchConfigType } from './core/function';
735
744
  export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from './core/function';
736
745
  declare const install: (app: App) => void;
737
- declare const version = "0.2.3";
746
+ declare const version = "0.2.4";
738
747
  export { AlexElement } from 'alex-editor';
739
748
  export type { AttachmentOptionsType } from './plugins/attachment';
740
749
  export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-editify",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "private": false,
5
5
  "sideEffects": [
6
6
  "*.css"
package/src/components/button/button.less CHANGED
@@ -3,7 +3,7 @@
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  position: relative;
6
- color: @font-color;
6
+ color: var(--editify-font-color);
7
7
  font-size: @font-size;
8
8
 
9
9
  .editify-button-wrap {
@@ -18,7 +18,7 @@
18
18
  transform: translateY(-50%);
19
19
  height: 18px;
20
20
  width: 1px;
21
- background-color: @border-color;
21
+ background-color: var(--editify-border-color);
22
22
  }
23
23
 
24
24
  &.editify-left-border::before {
@@ -29,7 +29,7 @@
29
29
  transform: translateY(-50%);
30
30
  height: 18px;
31
31
  width: 1px;
32
- background-color: @border-color;
32
+ background-color: var(--editify-border-color);
33
33
  }
34
34
 
35
35
  .editify-button-el {
@@ -39,8 +39,8 @@
39
39
  white-space: nowrap;
40
40
  height: 28px;
41
41
  line-height: 1;
42
- transition: all 200ms;
43
- background-color: @background;
42
+ transition: all 300ms;
43
+ background-color: var(--editify-background);
44
44
  padding: 0 8px;
45
45
  border-radius: 2px;
46
46
 
@@ -53,7 +53,7 @@
53
53
  .editify-button-caret {
54
54
  margin-left: 2px;
55
55
  transform: scale(0.6);
56
- transition: transform 200ms;
56
+ transition: transform 300ms;
57
57
  font-size: 14px;
58
58
 
59
59
  &.editify-rotate {
@@ -63,18 +63,18 @@
63
63
 
64
64
  &:hover {
65
65
  cursor: pointer;
66
- background-color: @background-dark;
66
+ background-color: var(--editify-background-dark);
67
67
  }
68
68
 
69
69
  &:active,
70
70
  &.editify-active {
71
- background-color: @background-darker;
71
+ background-color: var(--editify-background-darker);
72
72
  }
73
73
 
74
74
  &.editify-disabled {
75
- color: @font-color-disabled;
75
+ color: var(--editify-font-color-disabled);
76
76
  cursor: not-allowed;
77
- background-color: @background;
77
+ background-color: var(--editify-background);
78
78
  }
79
79
  }
80
80
  }
@@ -100,7 +100,7 @@
100
100
  align-items: center;
101
101
  width: 100%;
102
102
  padding: 6px 12px;
103
- transition: all 200ms;
103
+ transition: all 300ms;
104
104
  opacity: 0.8;
105
105
  white-space: nowrap;
106
106
  text-overflow: ellipsis;
@@ -110,17 +110,17 @@
110
110
  &:hover {
111
111
  opacity: 1;
112
112
  cursor: pointer;
113
- background-color: @background-dark;
113
+ background-color: var(--editify-background-dark);
114
114
  }
115
115
 
116
116
  &:active {
117
117
  opacity: 1;
118
- background-color: @background-darker;
118
+ background-color: var(--editify-background-darker);
119
119
  }
120
120
 
121
121
  &.editify-active {
122
122
  opacity: 1;
123
- background-color: @background-darker;
123
+ background-color: var(--editify-background-darker);
124
124
  }
125
125
 
126
126
  .editify-button-option-flex {
package/src/components/checkbox/checkbox.less CHANGED
@@ -26,10 +26,10 @@
26
26
  position: relative;
27
27
  margin: 0;
28
28
  padding: 1px;
29
- border: 1px solid @border-color;
30
- background-color: @background;
29
+ border: 1px solid var(--editify-border-color);
30
+ background-color: var(--editify-background);
31
31
  border-radius: 2px;
32
- color: @background;
32
+ color: var(--editify-background);
33
33
  transition: border-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46), color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46);
34
34
 
35
35
  &.editify-round {
@@ -37,13 +37,13 @@
37
37
  }
38
38
 
39
39
  &.editify-checked {
40
- background-color: @font-color;
41
- border-color: @font-color;
40
+ background-color: var(--editify-font-color);
41
+ border-color: var(--editify-font-color);
42
42
 
43
43
  &.editify-reverse {
44
- background-color: @background;
45
- color: @font-color-light;
46
- border-color: @border-color;
44
+ background-color: var(--editify-background);
45
+ color: var(--editify-font-color-light);
46
+ border-color: var(--editify-border-color);
47
47
  }
48
48
  }
49
49
 
@@ -55,7 +55,7 @@
55
55
 
56
56
  .editify-checkbox-label {
57
57
  vertical-align: middle;
58
- color: @font-color;
58
+ color: var(--editify-font-color);
59
59
  user-select: none;
60
60
  line-height: 1;
61
61
 
@@ -72,13 +72,13 @@
72
72
  cursor: not-allowed;
73
73
  .editify-checkbox-item,
74
74
  .editify-checkbox-item.check {
75
- background-color: @background-darker;
76
- border-color: @border-color;
77
- color: @font-color-disabled;
75
+ background-color: var(--editify-background-darker);
76
+ border-color: var(--editify-border-color);
77
+ color: var(--editify-font-color-disabled);
78
78
  }
79
79
 
80
80
  .editify-checkbox-label {
81
- color: @font-color-disabled;
81
+ color: var(--editify-font-color-disabled);
82
82
  }
83
83
  }
84
84
  }
package/src/components/colors/colors.less CHANGED
@@ -1,6 +1,6 @@
1
1
  .editify-colors {
2
2
  display: block;
3
- color: @font-color;
3
+ color: var(--editify-font-color);
4
4
  font-size: @font-size;
5
5
  padding: 6px 10px;
6
6
  box-sizing: border-box;
@@ -12,7 +12,7 @@
12
12
  align-items: center;
13
13
  position: relative;
14
14
  padding: 6px 10px;
15
- transition: all 200ms;
15
+ transition: all 300ms;
16
16
  margin-bottom: 10px;
17
17
  opacity: 0.8;
18
18
 
@@ -20,7 +20,7 @@
20
20
  content: '';
21
21
  width: 100%;
22
22
  height: 1px;
23
- background-color: @background-darker;
23
+ background-color: var(--editify-background-darker);
24
24
  position: absolute;
25
25
  left: 0;
26
26
  bottom: -5px;
@@ -32,13 +32,13 @@
32
32
 
33
33
  &:hover {
34
34
  cursor: pointer;
35
- background-color: @background-dark;
35
+ background-color: var(--editify-background-dark);
36
36
  opacity: 1;
37
37
  }
38
38
 
39
39
  &:active {
40
40
  opacity: 1;
41
- background-color: @background-darker;
41
+ background-color: var(--editify-background-darker);
42
42
  }
43
43
  }
44
44
 
@@ -54,17 +54,17 @@
54
54
  border-radius: 2px;
55
55
 
56
56
  &.editify-active {
57
- border-color: @font-color-light;
57
+ border-color: var(--editify-font-color-light);
58
58
  }
59
59
 
60
60
  .editify-color-el {
61
61
  display: block;
62
62
  width: 16px;
63
63
  height: 16px;
64
- border: 1px solid @border-color;
64
+ border: 1px solid var(--editify-border-color);
65
65
  border-radius: 2px;
66
66
  cursor: pointer;
67
- transition: all 200ms;
67
+ transition: all 300ms;
68
68
 
69
69
  &:hover {
70
70
  transform: scale(1.2);
package/src/components/insertImage/insertImage.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;
@@ -35,9 +35,9 @@
35
35
  display: block;
36
36
  text-align: center;
37
37
  font-size: @font-size;
38
- color: @font-color;
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
  }
@@ -73,10 +73,10 @@
73
73
  padding: 4px 2px;
74
74
  border: none;
75
75
  font-size: @font-size;
76
- color: @font-color;
77
- border-bottom: 1px solid @border-color;
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;
@@ -84,7 +84,7 @@
84
84
 
85
85
  &::-webkit-input-placeholder,
86
86
  &::placeholder {
87
- color: @font-color-disabled;
87
+ color: var(--editify-font-color-disabled);
88
88
  font-family: inherit;
89
89
  font-size: inherit;
90
90
  vertical-align: middle;
@@ -98,7 +98,7 @@
98
98
  width: 100%;
99
99
  font-size: @font-size;
100
100
  opacity: 0.8;
101
- transition: all 200ms;
101
+ transition: all 300ms;
102
102
 
103
103
  &:hover {
104
104
  cursor: pointer;
@@ -115,7 +115,7 @@
115
115
  padding: 15px 0;
116
116
  font-size: 36px;
117
117
  opacity: 0.8;
118
- transition: all 200ms;
118
+ transition: all 300ms;
119
119
  position: relative;
120
120
 
121
121
  &:hover {
package/src/components/insertLink/insertLink.less CHANGED
@@ -8,7 +8,7 @@
8
8
  text-align: left;
9
9
  margin-bottom: 10px;
10
10
  font-size: @font-size;
11
- color: @font-color;
11
+ color: var(--editify-font-color);
12
12
  }
13
13
 
14
14
  input {
@@ -21,10 +21,10 @@
21
21
  padding: 4px 2px;
22
22
  border: none;
23
23
  font-size: @font-size;
24
- color: @font-color;
25
- border-bottom: 1px solid @border-color;
24
+ color: var(--editify-font-color);
25
+ border-bottom: 1px solid var(--editify-border-color);
26
26
  line-height: 1.5;
27
- transition: border-color 500ms;
27
+ transition: border-color 300ms;
28
28
  background-color: transparent;
29
29
  outline: none;
30
30
  box-sizing: border-box;
@@ -32,7 +32,7 @@
32
32
 
33
33
  &::-webkit-input-placeholder,
34
34
  &::placeholder {
35
- color: @font-color-disabled;
35
+ color: var(--editify-font-color-disabled);
36
36
  font-family: inherit;
37
37
  font-size: inherit;
38
38
  vertical-align: middle;
@@ -53,7 +53,7 @@
53
53
  & > span {
54
54
  cursor: pointer;
55
55
  opacity: 0.8;
56
- transition: all 200ms;
56
+ transition: all 300ms;
57
57
  font-size: @font-size;
58
58
 
59
59
  &:hover {
package/src/components/insertTable/insertTable.less CHANGED
@@ -5,7 +5,7 @@
5
5
  box-sizing: border-box;
6
6
 
7
7
  table {
8
- border: 1px solid @border-color;
8
+ border: 1px solid var(--editify-border-color);
9
9
  margin: 0;
10
10
  padding: 0;
11
11
  border-collapse: collapse;
@@ -17,7 +17,7 @@
17
17
  td {
18
18
  margin: 0;
19
19
  padding: 0;
20
- border: 1px solid @border-color;
20
+ border: 1px solid var(--editify-border-color);
21
21
 
22
22
  span {
23
23
  display: block;
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  &.editify-inside {
33
- background-color: @background-darker;
33
+ background-color: var(--editify-background-darker);
34
34
  }
35
35
  }
36
36
  }
@@ -38,7 +38,7 @@
38
38
 
39
39
  .editify-table-footer {
40
40
  text-align: center;
41
- color: @font-color-light;
41
+ color: var(--editify-font-color-light);
42
42
  line-height: 1;
43
43
  font-size: 12px;
44
44
  position: absolute;
package/src/components/insertVideo/insertVideo.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;
@@ -35,9 +35,9 @@
35
35
  display: block;
36
36
  text-align: center;
37
37
  font-size: @font-size;
38
- color: @font-color;
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
  }
@@ -73,10 +73,10 @@
73
73
  padding: 4px 2px;
74
74
  border: none;
75
75
  font-size: @font-size;
76
- color: @font-color;
77
- border-bottom: 1px solid @border-color;
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;
@@ -84,7 +84,7 @@
84
84
 
85
85
  &::-webkit-input-placeholder,
86
86
  &::placeholder {
87
- color: @font-color-disabled;
87
+ color: var(--editify-font-color-disabled);
88
88
  font-family: inherit;
89
89
  font-size: inherit;
90
90
  vertical-align: middle;
@@ -98,7 +98,7 @@
98
98
  width: 100%;
99
99
  font-size: @font-size;
100
100
  opacity: 0.8;
101
- transition: all 200ms;
101
+ transition: all 300ms;
102
102
 
103
103
  &:hover {
104
104
  cursor: pointer;
@@ -115,7 +115,7 @@
115
115
  padding: 15px 0;
116
116
  font-size: 36px;
117
117
  opacity: 0.8;
118
- transition: all 200ms;
118
+ transition: all 300ms;
119
119
  position: relative;
120
120
 
121
121
  &:hover {
package/src/components/layer/layer.less CHANGED
@@ -4,7 +4,7 @@
4
4
  }
5
5
  .editify-layer-fade-enter-active,
6
6
  .editify-layer-fade-leave-active {
7
- transition: opacity 200ms linear;
7
+ transition: opacity 300ms linear;
8
8
  }
9
9
 
10
10
  .editify-layer-translate-enter-from,
@@ -15,7 +15,7 @@
15
15
 
16
16
  .editify-layer-translate-enter-active,
17
17
  .editify-layer-translate-leave-active {
18
- transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
18
+ transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
19
19
  }
20
20
 
21
21
  .editify-layer {
@@ -23,7 +23,7 @@
23
23
  position: absolute;
24
24
  padding: 0 0 10px 0;
25
25
  font-size: @font-size;
26
- color: @font-color;
26
+ color: var(--editify-font-color);
27
27
 
28
28
  &[data-editify-placement='bottom'],
29
29
  &[data-editify-placement='bottom-start'],
@@ -38,12 +38,12 @@
38
38
 
39
39
  .editify-layer-wrap {
40
40
  display: block;
41
- background-color: @background;
41
+ background-color: var(--editify-background);
42
42
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
43
43
  border-radius: 4px;
44
44
 
45
45
  &.editify-border {
46
- border: 1px solid @border-color;
46
+ border: 1px solid var(--editify-border-color);
47
47
  }
48
48
  }
49
49
  }
package/src/components/menu/menu.less CHANGED
@@ -3,7 +3,7 @@
3
3
  justify-content: flex-start;
4
4
  flex-wrap: wrap;
5
5
  width: 100%;
6
- background-color: @background;
6
+ background-color: var(--editify-background);
7
7
  position: relative;
8
8
  z-index: 2;
9
9
 
@@ -14,13 +14,13 @@
14
14
 
15
15
  //默认菜单模式显示边框，同时显示圆角
16
16
  &.editify-border {
17
- border: 1px solid @border-color;
17
+ border: 1px solid var(--editify-border-color);
18
18
  border-radius: 4px;
19
19
  }
20
20
 
21
21
  //全屏模式下，默认菜单的边框失效，此时加一个下边框
22
22
  &.editify-fullscreen {
23
- border-bottom: 1px solid @border-color;
23
+ border-bottom: 1px solid var(--editify-border-color);
24
24
  }
25
25
  }
26
26
 
@@ -31,10 +31,10 @@
31
31
 
32
32
  //inner菜单模式显示边框，同时显示圆角
33
33
  &.editify-border {
34
- border: 1px solid @border-color;
34
+ border: 1px solid var(--editify-border-color);
35
35
  border-bottom: none;
36
36
  border-radius: 4px 4px 0 0;
37
- transition: all 500ms;
37
+ transition: all 300ms;
38
38
  }
39
39
 
40
40
  //inner菜单模式加一个下边框，此边框在代码视图下不显示
@@ -43,7 +43,7 @@
43
43
  content: '';
44
44
  width: calc(100% - 20px);
45
45
  height: 1px;
46
- background-color: @border-color;
46
+ background-color: var(--editify-border-color);
47
47
  left: 50%;
48
48
  transform: translateX(-50%);
49
49
  bottom: 0;
@@ -57,7 +57,7 @@
57
57
  left: 0;
58
58
  top: 0;
59
59
  width: 100%;
60
- border-bottom: 1px solid @border-color;
60
+ border-bottom: 1px solid var(--editify-border-color);
61
61
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
62
62
  }
63
63
  }
package/src/components/toolbar/toolbar.less CHANGED
@@ -19,7 +19,7 @@
19
19
  text-align: left;
20
20
  margin-bottom: 10px;
21
21
  font-size: @font-size;
22
- color: @font-color;
22
+ color: var(--editify-font-color);
23
23
  }
24
24
 
25
25
  input {
@@ -32,16 +32,16 @@
32
32
  padding: 4px 2px;
33
33
  border: none;
34
34
  font-size: @font-size;
35
- color: @font-color;
36
- border-bottom: 1px solid @border-color;
35
+ color: var(--editify-font-color);
36
+ border-bottom: 1px solid var(--editify-border-color);
37
37
  line-height: 1.5;
38
- transition: all 500ms;
38
+ transition: all 300ms;
39
39
  background-color: transparent;
40
40
  outline: none;
41
41
 
42
42
  &::-webkit-input-placeholder,
43
43
  &::placeholder {
44
- color: @font-color-disabled;
44
+ color: var(--editify-font-color-disabled);
45
45
  font-family: inherit;
46
46
  font-size: inherit;
47
47
  vertical-align: middle;
@@ -59,7 +59,7 @@
59
59
  align-items: center;
60
60
  width: 100%;
61
61
  font-size: @font-size;
62
- color: @font-color-light;
62
+ color: var(--editify-font-color-light);
63
63
 
64
64
  .editify-toolbar-link-operations {
65
65
  display: flex;
@@ -70,7 +70,7 @@
70
70
  & > a {
71
71
  cursor: pointer;
72
72
  opacity: 0.8;
73
- transition: all 200ms;
73
+ transition: all 300ms;
74
74
 
75
75
  &:hover {
76
76
  opacity: 1;
package/src/components/tooltip/tooltip.vue CHANGED
@@ -3,13 +3,13 @@
3
3
  <div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
4
4
  <slot></slot>
5
5
  </div>
6
- <Layer v-model="show" :node="targetRef" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade" :z-index="10">
6
+ <Layer v-model="show" :node="targetRef" border :border-color="isDark ? '#e8e8e8' : '#1a1a1a'" :background="isDark ? '#e8e8e8' : '#1a1a1a'" show-triangle :color="isDark ? '#1a1a1a' : '#e8e8e8'" placement="bottom" animation="fade" :z-index="10">
7
7
  <div class="editify-tooltip-content">{{ content }}</div>
8
8
  </Layer>
9
9
  </div>
10
10
  </template>
11
11
  <script setup lang="ts">
12
- import { ref } from 'vue'
12
+ import { ComputedRef, inject, ref } from 'vue'
13
13
  import Layer from '@/components/layer/layer.vue'
14
14
  import { TooltipProps } from './props'
15
15
 
@@ -18,6 +18,8 @@ defineOptions({
18
18
  })
19
19
  const props = defineProps(TooltipProps)
20
20
 
21
+ const isDark = inject<ComputedRef<boolean>>('isDark')
22
+
21
23
  const show = ref<boolean>(false)
22
24
  const targetRef = ref<HTMLElement | null>(null)
23
25