vue-editify 0.1.17 → 0.1.19
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.
- package/README.md +3 -3
- package/examples/App.vue +62 -53
- package/examples/main.ts +4 -4
- package/lib/components/button/button.vue.d.ts +11 -11
- package/lib/components/checkbox/checkbox.vue.d.ts +8 -8
- package/lib/components/colors/colors.vue.d.ts +4 -4
- package/lib/components/icon/icon.vue.d.ts +1 -1
- package/lib/components/insertImage/insertImage.vue.d.ts +9 -9
- package/lib/components/insertLink/insertLink.vue.d.ts +2 -2
- package/lib/components/insertTable/insertTable.vue.d.ts +2 -2
- package/lib/components/insertVideo/insertVideo.vue.d.ts +9 -9
- package/lib/components/layer/layer.vue.d.ts +9 -9
- package/lib/components/menu/menu.vue.d.ts +4 -4
- package/lib/components/toolbar/toolbar.vue.d.ts +9 -9
- package/lib/components/tooltip/tooltip.vue.d.ts +1 -1
- package/lib/components/triangle/triangle.vue.d.ts +4 -4
- package/lib/editify/editify.vue.d.ts +88 -70
- package/lib/editify/props.d.ts +11 -3
- package/lib/editify.es.js +65 -46
- package/lib/editify.umd.js +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/style.css +1 -1
- package/package.json +45 -45
- package/src/components/button/button.less +145 -145
- package/src/components/button/button.vue +197 -197
- package/src/components/button/props.ts +95 -95
- package/src/components/checkbox/checkbox.less +84 -84
- package/src/components/checkbox/checkbox.vue +68 -68
- package/src/components/checkbox/props.ts +49 -49
- package/src/components/colors/colors.less +75 -75
- package/src/components/colors/colors.vue +36 -36
- package/src/components/colors/props.ts +29 -29
- package/src/components/icon/icon.less +14 -14
- package/src/components/icon/icon.vue +12 -12
- package/src/components/icon/props.ts +11 -11
- package/src/components/insertImage/insertImage.less +135 -135
- package/src/components/insertImage/insertImage.vue +146 -146
- package/src/components/insertImage/props.ts +43 -43
- package/src/components/insertLink/insertLink.less +64 -64
- package/src/components/insertLink/insertLink.vue +58 -58
- package/src/components/insertLink/props.ts +16 -16
- package/src/components/insertTable/insertTable.less +54 -54
- package/src/components/insertTable/insertTable.vue +85 -85
- package/src/components/insertTable/props.ts +27 -27
- package/src/components/insertVideo/insertVideo.less +135 -135
- package/src/components/insertVideo/insertVideo.vue +146 -146
- package/src/components/insertVideo/props.ts +43 -43
- package/src/components/layer/layer.less +49 -49
- package/src/components/layer/layer.vue +598 -598
- package/src/components/layer/props.ts +71 -71
- package/src/components/menu/menu.less +63 -63
- package/src/components/menu/menu.vue +1569 -1569
- package/src/components/menu/props.ts +17 -17
- package/src/components/toolbar/props.ts +35 -35
- package/src/components/toolbar/toolbar.less +89 -89
- package/src/components/toolbar/toolbar.vue +1101 -1101
- package/src/components/tooltip/props.ts +21 -21
- package/src/components/tooltip/tooltip.less +23 -23
- package/src/components/tooltip/tooltip.vue +37 -37
- package/src/components/triangle/props.ts +26 -26
- package/src/components/triangle/triangle.less +79 -79
- package/src/components/triangle/triangle.vue +65 -65
- package/src/core/function.ts +1144 -1144
- package/src/core/rule.ts +259 -259
- package/src/core/tool.ts +1137 -1137
- package/src/css/base.less +30 -30
- package/src/css/hljs.less +54 -54
- package/src/editify/editify.less +404 -403
- package/src/editify/editify.vue +803 -792
- package/src/editify/props.ts +156 -146
- package/src/hljs/index.ts +197 -197
- package/src/icon/iconfont.css +219 -219
- package/src/index.ts +32 -32
- package/src/locale/en_US.ts +88 -88
- package/src/locale/index.ts +12 -12
- package/src/locale/zh_CN.ts +88 -88
- package/tsconfig.json +27 -27
- package/tsconfig.node.json +11 -11
- package/vite-env.d.ts +1 -1
- package/vite.config.ts +42 -42
@@ -1,71 +1,71 @@
|
|
1
|
-
import { ExtractPublicPropTypes, PropType } from 'vue'
|
2
|
-
|
3
|
-
export type LayerPlacementType = 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
|
4
|
-
|
5
|
-
export type LayerAnimationType = 'translate' | 'fade' | null
|
6
|
-
|
7
|
-
export const LayerProps = {
|
8
|
-
//是否显示
|
9
|
-
modelValue: {
|
10
|
-
type: Boolean,
|
11
|
-
default: false
|
12
|
-
},
|
13
|
-
//关联元素
|
14
|
-
node: {
|
15
|
-
type: [String, HTMLElement] as PropType<string | HTMLElement | null>,
|
16
|
-
default: null
|
17
|
-
},
|
18
|
-
//是否显示边框
|
19
|
-
border: {
|
20
|
-
type: Boolean,
|
21
|
-
default: false
|
22
|
-
},
|
23
|
-
//边框颜色
|
24
|
-
borderColor: {
|
25
|
-
type: String,
|
26
|
-
default: null
|
27
|
-
},
|
28
|
-
//背景色
|
29
|
-
background: {
|
30
|
-
type: String,
|
31
|
-
default: null
|
32
|
-
},
|
33
|
-
//字体颜色
|
34
|
-
color: {
|
35
|
-
type: String,
|
36
|
-
default: null
|
37
|
-
},
|
38
|
-
//位置
|
39
|
-
placement: {
|
40
|
-
type: String as PropType<LayerPlacementType>,
|
41
|
-
default: 'bottom',
|
42
|
-
validator(value: any) {
|
43
|
-
return ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'].includes(value)
|
44
|
-
}
|
45
|
-
},
|
46
|
-
//是否显示三角形
|
47
|
-
showTriangle: {
|
48
|
-
type: Boolean,
|
49
|
-
default: false
|
50
|
-
},
|
51
|
-
//层级
|
52
|
-
zIndex: {
|
53
|
-
type: Number,
|
54
|
-
default: 10
|
55
|
-
},
|
56
|
-
//动画
|
57
|
-
animation: {
|
58
|
-
type: String as PropType<LayerAnimationType>,
|
59
|
-
default: null,
|
60
|
-
validator(value: any) {
|
61
|
-
return ['translate', 'fade', null].includes(value)
|
62
|
-
}
|
63
|
-
},
|
64
|
-
//是否根据range对象来定位,此时不需要传入node
|
65
|
-
useRange: {
|
66
|
-
type: Boolean,
|
67
|
-
default: false
|
68
|
-
}
|
69
|
-
}
|
70
|
-
|
71
|
-
export type LayerPropsType = ExtractPublicPropTypes<typeof LayerProps>
|
1
|
+
import { ExtractPublicPropTypes, PropType } from 'vue'
|
2
|
+
|
3
|
+
export type LayerPlacementType = 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
|
4
|
+
|
5
|
+
export type LayerAnimationType = 'translate' | 'fade' | null
|
6
|
+
|
7
|
+
export const LayerProps = {
|
8
|
+
//是否显示
|
9
|
+
modelValue: {
|
10
|
+
type: Boolean,
|
11
|
+
default: false
|
12
|
+
},
|
13
|
+
//关联元素
|
14
|
+
node: {
|
15
|
+
type: [String, HTMLElement] as PropType<string | HTMLElement | null>,
|
16
|
+
default: null
|
17
|
+
},
|
18
|
+
//是否显示边框
|
19
|
+
border: {
|
20
|
+
type: Boolean,
|
21
|
+
default: false
|
22
|
+
},
|
23
|
+
//边框颜色
|
24
|
+
borderColor: {
|
25
|
+
type: String,
|
26
|
+
default: null
|
27
|
+
},
|
28
|
+
//背景色
|
29
|
+
background: {
|
30
|
+
type: String,
|
31
|
+
default: null
|
32
|
+
},
|
33
|
+
//字体颜色
|
34
|
+
color: {
|
35
|
+
type: String,
|
36
|
+
default: null
|
37
|
+
},
|
38
|
+
//位置
|
39
|
+
placement: {
|
40
|
+
type: String as PropType<LayerPlacementType>,
|
41
|
+
default: 'bottom',
|
42
|
+
validator(value: any) {
|
43
|
+
return ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'].includes(value)
|
44
|
+
}
|
45
|
+
},
|
46
|
+
//是否显示三角形
|
47
|
+
showTriangle: {
|
48
|
+
type: Boolean,
|
49
|
+
default: false
|
50
|
+
},
|
51
|
+
//层级
|
52
|
+
zIndex: {
|
53
|
+
type: Number,
|
54
|
+
default: 10
|
55
|
+
},
|
56
|
+
//动画
|
57
|
+
animation: {
|
58
|
+
type: String as PropType<LayerAnimationType>,
|
59
|
+
default: null,
|
60
|
+
validator(value: any) {
|
61
|
+
return ['translate', 'fade', null].includes(value)
|
62
|
+
}
|
63
|
+
},
|
64
|
+
//是否根据range对象来定位,此时不需要传入node
|
65
|
+
useRange: {
|
66
|
+
type: Boolean,
|
67
|
+
default: false
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
export type LayerPropsType = ExtractPublicPropTypes<typeof LayerProps>
|
@@ -1,63 +1,63 @@
|
|
1
|
-
.editify-menu {
|
2
|
-
display: flex;
|
3
|
-
justify-content: flex-start;
|
4
|
-
flex-wrap: wrap;
|
5
|
-
width: 100%;
|
6
|
-
background-color: @background;
|
7
|
-
position: relative;
|
8
|
-
z-index: 2;
|
9
|
-
|
10
|
-
//默认菜单模式
|
11
|
-
&[data-editify-mode='default'] {
|
12
|
-
margin-bottom: 10px;
|
13
|
-
padding: 6px 10px;
|
14
|
-
|
15
|
-
//默认菜单模式显示边框,同时显示圆角
|
16
|
-
&.border {
|
17
|
-
border: 1px solid @border-color;
|
18
|
-
border-radius: 4px;
|
19
|
-
}
|
20
|
-
|
21
|
-
//全屏模式下,默认菜单的边框失效,此时加一个下边框
|
22
|
-
&.fullscreen {
|
23
|
-
border-bottom: 1px solid @border-color;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
//inner菜单模式
|
28
|
-
&[data-editify-mode='inner'] {
|
29
|
-
padding: 10px;
|
30
|
-
margin-bottom: -20px;
|
31
|
-
|
32
|
-
//inner菜单模式显示边框,同时显示圆角
|
33
|
-
&.border {
|
34
|
-
border: 1px solid @border-color;
|
35
|
-
border-bottom: none;
|
36
|
-
border-radius: 4px 4px 0 0;
|
37
|
-
transition: all 500ms;
|
38
|
-
}
|
39
|
-
|
40
|
-
//inner菜单模式加一个下边框,此边框在代码视图下不显示
|
41
|
-
&:not(.source)::before {
|
42
|
-
position: absolute;
|
43
|
-
content: '';
|
44
|
-
width: calc(100% - 20px);
|
45
|
-
height: 1px;
|
46
|
-
background-color: @border-color;
|
47
|
-
left: 50%;
|
48
|
-
transform: translateX(-50%);
|
49
|
-
bottom: 0;
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
//fixed菜单模式
|
54
|
-
&[data-editify-mode='fixed'] {
|
55
|
-
padding: 6px 10px;
|
56
|
-
position: fixed;
|
57
|
-
left: 0;
|
58
|
-
top: 0;
|
59
|
-
width: 100%;
|
60
|
-
border-bottom: 1px solid @border-color;
|
61
|
-
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
|
62
|
-
}
|
63
|
-
}
|
1
|
+
.editify-menu {
|
2
|
+
display: flex;
|
3
|
+
justify-content: flex-start;
|
4
|
+
flex-wrap: wrap;
|
5
|
+
width: 100%;
|
6
|
+
background-color: @background;
|
7
|
+
position: relative;
|
8
|
+
z-index: 2;
|
9
|
+
|
10
|
+
//默认菜单模式
|
11
|
+
&[data-editify-mode='default'] {
|
12
|
+
margin-bottom: 10px;
|
13
|
+
padding: 6px 10px;
|
14
|
+
|
15
|
+
//默认菜单模式显示边框,同时显示圆角
|
16
|
+
&.border {
|
17
|
+
border: 1px solid @border-color;
|
18
|
+
border-radius: 4px;
|
19
|
+
}
|
20
|
+
|
21
|
+
//全屏模式下,默认菜单的边框失效,此时加一个下边框
|
22
|
+
&.fullscreen {
|
23
|
+
border-bottom: 1px solid @border-color;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
//inner菜单模式
|
28
|
+
&[data-editify-mode='inner'] {
|
29
|
+
padding: 10px;
|
30
|
+
margin-bottom: -20px;
|
31
|
+
|
32
|
+
//inner菜单模式显示边框,同时显示圆角
|
33
|
+
&.border {
|
34
|
+
border: 1px solid @border-color;
|
35
|
+
border-bottom: none;
|
36
|
+
border-radius: 4px 4px 0 0;
|
37
|
+
transition: all 500ms;
|
38
|
+
}
|
39
|
+
|
40
|
+
//inner菜单模式加一个下边框,此边框在代码视图下不显示
|
41
|
+
&:not(.source)::before {
|
42
|
+
position: absolute;
|
43
|
+
content: '';
|
44
|
+
width: calc(100% - 20px);
|
45
|
+
height: 1px;
|
46
|
+
background-color: @border-color;
|
47
|
+
left: 50%;
|
48
|
+
transform: translateX(-50%);
|
49
|
+
bottom: 0;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
//fixed菜单模式
|
54
|
+
&[data-editify-mode='fixed'] {
|
55
|
+
padding: 6px 10px;
|
56
|
+
position: fixed;
|
57
|
+
left: 0;
|
58
|
+
top: 0;
|
59
|
+
width: 100%;
|
60
|
+
border-bottom: 1px solid @border-color;
|
61
|
+
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
|
62
|
+
}
|
63
|
+
}
|