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.
Files changed (80) hide show
  1. package/README.md +3 -3
  2. package/examples/App.vue +62 -53
  3. package/examples/main.ts +4 -4
  4. package/lib/components/button/button.vue.d.ts +11 -11
  5. package/lib/components/checkbox/checkbox.vue.d.ts +8 -8
  6. package/lib/components/colors/colors.vue.d.ts +4 -4
  7. package/lib/components/icon/icon.vue.d.ts +1 -1
  8. package/lib/components/insertImage/insertImage.vue.d.ts +9 -9
  9. package/lib/components/insertLink/insertLink.vue.d.ts +2 -2
  10. package/lib/components/insertTable/insertTable.vue.d.ts +2 -2
  11. package/lib/components/insertVideo/insertVideo.vue.d.ts +9 -9
  12. package/lib/components/layer/layer.vue.d.ts +9 -9
  13. package/lib/components/menu/menu.vue.d.ts +4 -4
  14. package/lib/components/toolbar/toolbar.vue.d.ts +9 -9
  15. package/lib/components/tooltip/tooltip.vue.d.ts +1 -1
  16. package/lib/components/triangle/triangle.vue.d.ts +4 -4
  17. package/lib/editify/editify.vue.d.ts +88 -70
  18. package/lib/editify/props.d.ts +11 -3
  19. package/lib/editify.es.js +65 -46
  20. package/lib/editify.umd.js +1 -1
  21. package/lib/index.d.ts +1 -1
  22. package/lib/style.css +1 -1
  23. package/package.json +45 -45
  24. package/src/components/button/button.less +145 -145
  25. package/src/components/button/button.vue +197 -197
  26. package/src/components/button/props.ts +95 -95
  27. package/src/components/checkbox/checkbox.less +84 -84
  28. package/src/components/checkbox/checkbox.vue +68 -68
  29. package/src/components/checkbox/props.ts +49 -49
  30. package/src/components/colors/colors.less +75 -75
  31. package/src/components/colors/colors.vue +36 -36
  32. package/src/components/colors/props.ts +29 -29
  33. package/src/components/icon/icon.less +14 -14
  34. package/src/components/icon/icon.vue +12 -12
  35. package/src/components/icon/props.ts +11 -11
  36. package/src/components/insertImage/insertImage.less +135 -135
  37. package/src/components/insertImage/insertImage.vue +146 -146
  38. package/src/components/insertImage/props.ts +43 -43
  39. package/src/components/insertLink/insertLink.less +64 -64
  40. package/src/components/insertLink/insertLink.vue +58 -58
  41. package/src/components/insertLink/props.ts +16 -16
  42. package/src/components/insertTable/insertTable.less +54 -54
  43. package/src/components/insertTable/insertTable.vue +85 -85
  44. package/src/components/insertTable/props.ts +27 -27
  45. package/src/components/insertVideo/insertVideo.less +135 -135
  46. package/src/components/insertVideo/insertVideo.vue +146 -146
  47. package/src/components/insertVideo/props.ts +43 -43
  48. package/src/components/layer/layer.less +49 -49
  49. package/src/components/layer/layer.vue +598 -598
  50. package/src/components/layer/props.ts +71 -71
  51. package/src/components/menu/menu.less +63 -63
  52. package/src/components/menu/menu.vue +1569 -1569
  53. package/src/components/menu/props.ts +17 -17
  54. package/src/components/toolbar/props.ts +35 -35
  55. package/src/components/toolbar/toolbar.less +89 -89
  56. package/src/components/toolbar/toolbar.vue +1101 -1101
  57. package/src/components/tooltip/props.ts +21 -21
  58. package/src/components/tooltip/tooltip.less +23 -23
  59. package/src/components/tooltip/tooltip.vue +37 -37
  60. package/src/components/triangle/props.ts +26 -26
  61. package/src/components/triangle/triangle.less +79 -79
  62. package/src/components/triangle/triangle.vue +65 -65
  63. package/src/core/function.ts +1144 -1144
  64. package/src/core/rule.ts +259 -259
  65. package/src/core/tool.ts +1137 -1137
  66. package/src/css/base.less +30 -30
  67. package/src/css/hljs.less +54 -54
  68. package/src/editify/editify.less +404 -403
  69. package/src/editify/editify.vue +803 -792
  70. package/src/editify/props.ts +156 -146
  71. package/src/hljs/index.ts +197 -197
  72. package/src/icon/iconfont.css +219 -219
  73. package/src/index.ts +32 -32
  74. package/src/locale/en_US.ts +88 -88
  75. package/src/locale/index.ts +12 -12
  76. package/src/locale/zh_CN.ts +88 -88
  77. package/tsconfig.json +27 -27
  78. package/tsconfig.node.json +11 -11
  79. package/vite-env.d.ts +1 -1
  80. package/vite.config.ts +42 -42
@@ -1,21 +1,21 @@
1
- import { ExtractPublicPropTypes } from 'vue'
2
-
3
- export const TooltipProps = {
4
- //提示内容
5
- content: {
6
- type: String,
7
- default: ''
8
- },
9
- //是否禁用
10
- disabled: {
11
- type: Boolean,
12
- default: false
13
- },
14
- //是否块级
15
- block: {
16
- type: Boolean,
17
- default: false
18
- }
19
- }
20
-
21
- export type TooltipPropsType = ExtractPublicPropTypes<typeof TooltipProps>
1
+ import { ExtractPublicPropTypes } from 'vue'
2
+
3
+ export const TooltipProps = {
4
+ //提示内容
5
+ content: {
6
+ type: String,
7
+ default: ''
8
+ },
9
+ //是否禁用
10
+ disabled: {
11
+ type: Boolean,
12
+ default: false
13
+ },
14
+ //是否块级
15
+ block: {
16
+ type: Boolean,
17
+ default: false
18
+ }
19
+ }
20
+
21
+ export type TooltipPropsType = ExtractPublicPropTypes<typeof TooltipProps>
@@ -1,23 +1,23 @@
1
- .editify-tooltip {
2
- position: relative;
3
- display: inline-block;
4
-
5
- .editify-tooltip-target {
6
- display: inline-block;
7
- }
8
-
9
- .editify-tooltip-content {
10
- display: block;
11
- padding: 6px 10px;
12
- font-size: @font-size;
13
- white-space: nowrap;
14
- }
15
-
16
- &.block {
17
- display: block;
18
-
19
- .editify-tooltip-target {
20
- display: block;
21
- }
22
- }
23
- }
1
+ .editify-tooltip {
2
+ position: relative;
3
+ display: inline-block;
4
+
5
+ .editify-tooltip-target {
6
+ display: inline-block;
7
+ }
8
+
9
+ .editify-tooltip-content {
10
+ display: block;
11
+ padding: 6px 10px;
12
+ font-size: @font-size;
13
+ white-space: nowrap;
14
+ }
15
+
16
+ &.block {
17
+ display: block;
18
+
19
+ .editify-tooltip-target {
20
+ display: block;
21
+ }
22
+ }
23
+ }
@@ -1,37 +1,37 @@
1
- <template>
2
- <div class="editify-tooltip" :class="{ block: block }">
3
- <div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
4
- <slot></slot>
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">
7
- <div class="editify-tooltip-content">{{ content }}</div>
8
- </Layer>
9
- </div>
10
- </template>
11
- <script setup lang="ts">
12
- import { ref } from 'vue'
13
- import Layer from '../layer/layer.vue'
14
- import { TooltipProps } from './props'
15
-
16
- defineOptions({
17
- name: 'Tooltip'
18
- })
19
- const props = defineProps(TooltipProps)
20
-
21
- const show = ref<boolean>(false)
22
- const targetRef = ref<HTMLElement | null>(null)
23
-
24
- const showContent = () => {
25
- if (props.disabled) {
26
- return
27
- }
28
- show.value = true
29
- }
30
- const hideContent = () => {
31
- if (props.disabled) {
32
- return
33
- }
34
- show.value = false
35
- }
36
- </script>
37
- <style scoped src="./tooltip.less"></style>
1
+ <template>
2
+ <div class="editify-tooltip" :class="{ block: block }">
3
+ <div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
4
+ <slot></slot>
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">
7
+ <div class="editify-tooltip-content">{{ content }}</div>
8
+ </Layer>
9
+ </div>
10
+ </template>
11
+ <script setup lang="ts">
12
+ import { ref } from 'vue'
13
+ import Layer from '../layer/layer.vue'
14
+ import { TooltipProps } from './props'
15
+
16
+ defineOptions({
17
+ name: 'Tooltip'
18
+ })
19
+ const props = defineProps(TooltipProps)
20
+
21
+ const show = ref<boolean>(false)
22
+ const targetRef = ref<HTMLElement | null>(null)
23
+
24
+ const showContent = () => {
25
+ if (props.disabled) {
26
+ return
27
+ }
28
+ show.value = true
29
+ }
30
+ const hideContent = () => {
31
+ if (props.disabled) {
32
+ return
33
+ }
34
+ show.value = false
35
+ }
36
+ </script>
37
+ <style scoped src="./tooltip.less"></style>
@@ -1,26 +1,26 @@
1
- import { ExtractPublicPropTypes, PropType } from 'vue'
2
-
3
- export type TrianglePlacementType = 'top' | 'left' | 'right' | 'bottom'
4
-
5
- export const TriangleProps = {
6
- //位置
7
- placement: {
8
- type: String as PropType<TrianglePlacementType>,
9
- default: 'top',
10
- validator(value: any) {
11
- return ['top', 'left', 'right', 'bottom'].includes(value)
12
- }
13
- },
14
- //边框颜色
15
- color: {
16
- type: String,
17
- default: null
18
- },
19
- //背景色
20
- background: {
21
- type: String,
22
- default: null
23
- }
24
- }
25
-
26
- export type TrianglePropsType = ExtractPublicPropTypes<typeof TriangleProps>
1
+ import { ExtractPublicPropTypes, PropType } from 'vue'
2
+
3
+ export type TrianglePlacementType = 'top' | 'left' | 'right' | 'bottom'
4
+
5
+ export const TriangleProps = {
6
+ //位置
7
+ placement: {
8
+ type: String as PropType<TrianglePlacementType>,
9
+ default: 'top',
10
+ validator(value: any) {
11
+ return ['top', 'left', 'right', 'bottom'].includes(value)
12
+ }
13
+ },
14
+ //边框颜色
15
+ color: {
16
+ type: String,
17
+ default: null
18
+ },
19
+ //背景色
20
+ background: {
21
+ type: String,
22
+ default: null
23
+ }
24
+ }
25
+
26
+ export type TrianglePropsType = ExtractPublicPropTypes<typeof TriangleProps>
@@ -1,79 +1,79 @@
1
- .editify-triangle {
2
- position: relative;
3
- display: inline-block;
4
- width: 0;
5
- height: 0;
6
- border-color: transparent;
7
- border-style: solid;
8
- border-width: @triangle-size;
9
-
10
- .editify-triangle-el {
11
- position: absolute;
12
- display: inline-block;
13
- width: 0;
14
- height: 0;
15
- border-color: transparent;
16
- border-style: solid;
17
- border-width: calc(@triangle-size - 1px);
18
- }
19
-
20
- &[data-editify-placement='top'] {
21
- border-top: none;
22
- border-bottom-color: @border-color;
23
-
24
- .editify-triangle-el {
25
- border-top: none;
26
- border-bottom-color: @background;
27
- left: 1px;
28
- top: 1.5px;
29
- right: auto;
30
- bottom: 0;
31
- margin-left: -@triangle-size;
32
- }
33
- }
34
-
35
- &[data-editify-placement='bottom'] {
36
- border-bottom: none;
37
- border-top-color: @border-color;
38
-
39
- .editify-triangle-el {
40
- border-bottom: none;
41
- border-top-color: @background;
42
- left: 1px;
43
- bottom: 1.5px;
44
- top: auto;
45
- right: auto;
46
- margin-left: -@triangle-size;
47
- }
48
- }
49
-
50
- &[data-editify-placement='left'] {
51
- border-left: none;
52
- border-right-color: @border-color;
53
-
54
- .editify-triangle-el {
55
- border-left: none;
56
- border-right-color: @background;
57
- left: 1.5px;
58
- top: 1px;
59
- right: auto;
60
- bottom: auto;
61
- margin-top: -@triangle-size;
62
- }
63
- }
64
-
65
- &[data-editify-placement='right'] {
66
- border-right: none;
67
- border-left-color: @border-color;
68
-
69
- .editify-triangle-el {
70
- border-right: none;
71
- border-left-color: @background;
72
- right: 1.5px;
73
- top: 1px;
74
- bottom: auto;
75
- left: auto;
76
- margin-top: -@triangle-size;
77
- }
78
- }
79
- }
1
+ .editify-triangle {
2
+ position: relative;
3
+ display: inline-block;
4
+ width: 0;
5
+ height: 0;
6
+ border-color: transparent;
7
+ border-style: solid;
8
+ border-width: @triangle-size;
9
+
10
+ .editify-triangle-el {
11
+ position: absolute;
12
+ display: inline-block;
13
+ width: 0;
14
+ height: 0;
15
+ border-color: transparent;
16
+ border-style: solid;
17
+ border-width: calc(@triangle-size - 1px);
18
+ }
19
+
20
+ &[data-editify-placement='top'] {
21
+ border-top: none;
22
+ border-bottom-color: @border-color;
23
+
24
+ .editify-triangle-el {
25
+ border-top: none;
26
+ border-bottom-color: @background;
27
+ left: 1px;
28
+ top: 1.5px;
29
+ right: auto;
30
+ bottom: 0;
31
+ margin-left: -@triangle-size;
32
+ }
33
+ }
34
+
35
+ &[data-editify-placement='bottom'] {
36
+ border-bottom: none;
37
+ border-top-color: @border-color;
38
+
39
+ .editify-triangle-el {
40
+ border-bottom: none;
41
+ border-top-color: @background;
42
+ left: 1px;
43
+ bottom: 1.5px;
44
+ top: auto;
45
+ right: auto;
46
+ margin-left: -@triangle-size;
47
+ }
48
+ }
49
+
50
+ &[data-editify-placement='left'] {
51
+ border-left: none;
52
+ border-right-color: @border-color;
53
+
54
+ .editify-triangle-el {
55
+ border-left: none;
56
+ border-right-color: @background;
57
+ left: 1.5px;
58
+ top: 1px;
59
+ right: auto;
60
+ bottom: auto;
61
+ margin-top: -@triangle-size;
62
+ }
63
+ }
64
+
65
+ &[data-editify-placement='right'] {
66
+ border-right: none;
67
+ border-left-color: @border-color;
68
+
69
+ .editify-triangle-el {
70
+ border-right: none;
71
+ border-left-color: @background;
72
+ right: 1.5px;
73
+ top: 1px;
74
+ bottom: auto;
75
+ left: auto;
76
+ margin-top: -@triangle-size;
77
+ }
78
+ }
79
+ }
@@ -1,65 +1,65 @@
1
- <template>
2
- <div class="editify-triangle" :style="style" :data-editify-placement="placement">
3
- <div class="editify-triangle-el" :style="elStyle"></div>
4
- </div>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import { computed } from 'vue'
9
- import { TriangleProps } from './props'
10
- import { ObjectType } from '../../core/tool'
11
-
12
- defineOptions({
13
- name: 'Triangle'
14
- })
15
- const props = defineProps(TriangleProps)
16
-
17
- const style = computed<ObjectType>(() => {
18
- if (props.placement == 'top') {
19
- return {
20
- borderBottomColor: props.color || ''
21
- }
22
- }
23
- if (props.placement == 'bottom') {
24
- return {
25
- borderTopColor: props.color || ''
26
- }
27
- }
28
- if (props.placement == 'left') {
29
- return {
30
- borderRightColor: props.color || ''
31
- }
32
- }
33
- if (props.placement == 'right') {
34
- return {
35
- borderLeftColor: props.color || ''
36
- }
37
- }
38
- return {}
39
- })
40
- const elStyle = computed<ObjectType>(() => {
41
- if (props.placement == 'top') {
42
- return {
43
- borderBottomColor: props.background || ''
44
- }
45
- }
46
- if (props.placement == 'bottom') {
47
- return {
48
- borderTopColor: props.background || ''
49
- }
50
- }
51
- if (props.placement == 'left') {
52
- return {
53
- borderRightColor: props.background || ''
54
- }
55
- }
56
- if (props.placement == 'right') {
57
- return {
58
- borderLeftColor: props.background || ''
59
- }
60
- }
61
- return {}
62
- })
63
- </script>
64
-
65
- <style scoped src="./triangle.less"></style>
1
+ <template>
2
+ <div class="editify-triangle" :style="style" :data-editify-placement="placement">
3
+ <div class="editify-triangle-el" :style="elStyle"></div>
4
+ </div>
5
+ </template>
6
+
7
+ <script setup lang="ts">
8
+ import { computed } from 'vue'
9
+ import { TriangleProps } from './props'
10
+ import { ObjectType } from '../../core/tool'
11
+
12
+ defineOptions({
13
+ name: 'Triangle'
14
+ })
15
+ const props = defineProps(TriangleProps)
16
+
17
+ const style = computed<ObjectType>(() => {
18
+ if (props.placement == 'top') {
19
+ return {
20
+ borderBottomColor: props.color || ''
21
+ }
22
+ }
23
+ if (props.placement == 'bottom') {
24
+ return {
25
+ borderTopColor: props.color || ''
26
+ }
27
+ }
28
+ if (props.placement == 'left') {
29
+ return {
30
+ borderRightColor: props.color || ''
31
+ }
32
+ }
33
+ if (props.placement == 'right') {
34
+ return {
35
+ borderLeftColor: props.color || ''
36
+ }
37
+ }
38
+ return {}
39
+ })
40
+ const elStyle = computed<ObjectType>(() => {
41
+ if (props.placement == 'top') {
42
+ return {
43
+ borderBottomColor: props.background || ''
44
+ }
45
+ }
46
+ if (props.placement == 'bottom') {
47
+ return {
48
+ borderTopColor: props.background || ''
49
+ }
50
+ }
51
+ if (props.placement == 'left') {
52
+ return {
53
+ borderRightColor: props.background || ''
54
+ }
55
+ }
56
+ if (props.placement == 'right') {
57
+ return {
58
+ borderLeftColor: props.background || ''
59
+ }
60
+ }
61
+ return {}
62
+ })
63
+ </script>
64
+
65
+ <style scoped src="./triangle.less"></style>