@fishawack/lab-velocity 0.8.6 → 0.8.8
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/components/_wysiwyg2.scss +4 -1
- package/form/Wysiwyg2.vue +39 -67
- package/package.json +1 -1
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
min-width: 28px;
|
|
29
29
|
padding: 3px 5px;
|
|
30
30
|
line-height: 1;
|
|
31
|
+
border: none;
|
|
31
32
|
&.is-active, &:hover {
|
|
32
33
|
background-color: $color5;
|
|
33
34
|
}
|
|
@@ -79,8 +80,10 @@
|
|
|
79
80
|
~ div {
|
|
80
81
|
// margin-top: $spacing;
|
|
81
82
|
border: solid $color5 2px;
|
|
82
|
-
padding: 2* $spacing;
|
|
83
83
|
background-color: $color0;
|
|
84
|
+
> div {
|
|
85
|
+
padding: 2 * $spacing;
|
|
86
|
+
}
|
|
84
87
|
}
|
|
85
88
|
}
|
|
86
89
|
.vel-wysiwyg__button {
|
package/form/Wysiwyg2.vue
CHANGED
|
@@ -46,121 +46,79 @@
|
|
|
46
46
|
Table
|
|
47
47
|
<template #dropdown>
|
|
48
48
|
<el-dropdown-menu>
|
|
49
|
-
<el-dropdown-item>
|
|
50
|
-
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
|
|
49
|
+
<el-dropdown-item @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
|
|
51
50
|
Insert table
|
|
52
|
-
</button>
|
|
53
51
|
</el-dropdown-item>
|
|
54
|
-
<el-dropdown-item>
|
|
55
|
-
<button @click="editor.chain().focus().addColumnBefore().run()">
|
|
52
|
+
<el-dropdown-item @click="editor.chain().focus().addColumnBefore().run()">
|
|
56
53
|
Add column before
|
|
57
|
-
</button>
|
|
58
54
|
</el-dropdown-item>
|
|
59
|
-
<el-dropdown-item>
|
|
60
|
-
<button @click="editor.chain().focus().addColumnAfter().run()">
|
|
55
|
+
<el-dropdown-item @click="editor.chain().focus().addColumnAfter().run()">
|
|
61
56
|
Add column after
|
|
62
|
-
</button>
|
|
63
57
|
</el-dropdown-item>
|
|
64
|
-
<el-dropdown-item>
|
|
65
|
-
<button @click="editor.chain().focus().deleteColumn().run()">
|
|
58
|
+
<el-dropdown-item @click="editor.chain().focus().deleteColumn().run()">
|
|
66
59
|
Delete column
|
|
67
|
-
</button>
|
|
68
60
|
</el-dropdown-item>
|
|
69
|
-
<el-dropdown-item>
|
|
70
|
-
<button @click="editor.chain().focus().addRowBefore().run()">
|
|
61
|
+
<el-dropdown-item @click="editor.chain().focus().addRowBefore().run()">
|
|
71
62
|
Add row before
|
|
72
|
-
</button>
|
|
73
63
|
</el-dropdown-item>
|
|
74
|
-
<el-dropdown-item>
|
|
75
|
-
<button @click="editor.chain().focus().addRowAfter().run()">
|
|
64
|
+
<el-dropdown-item @click="editor.chain().focus().addRowAfter().run()">
|
|
76
65
|
Add row after
|
|
77
|
-
</button>
|
|
78
66
|
</el-dropdown-item>
|
|
79
|
-
<el-dropdown-item>
|
|
80
|
-
<button @click="editor.chain().focus().deleteRow().run()">
|
|
67
|
+
<el-dropdown-item @click="editor.chain().focus().deleteRow().run()">
|
|
81
68
|
Delete row
|
|
82
|
-
</button>
|
|
83
69
|
</el-dropdown-item>
|
|
84
|
-
<el-dropdown-item>
|
|
85
|
-
<button @click="editor.chain().focus().deleteTable().run()">
|
|
70
|
+
<el-dropdown-item @click="editor.chain().focus().deleteTable().run()">
|
|
86
71
|
Delete table
|
|
87
|
-
</button>
|
|
88
72
|
</el-dropdown-item>
|
|
89
|
-
<el-dropdown-item>
|
|
90
|
-
<button @click="editor.chain().focus().mergeCells().run()">
|
|
73
|
+
<el-dropdown-item @click="editor.chain().focus().mergeCells().run()">
|
|
91
74
|
Merge cells
|
|
92
|
-
</button>
|
|
93
75
|
</el-dropdown-item>
|
|
94
|
-
<el-dropdown-item>
|
|
95
|
-
<button @click="editor.chain().focus().splitCell().run()">
|
|
76
|
+
<el-dropdown-item @click="editor.chain().focus().splitCell().run()">
|
|
96
77
|
Split cell
|
|
97
|
-
</button>
|
|
98
78
|
</el-dropdown-item>
|
|
99
|
-
<el-dropdown-item>
|
|
100
|
-
<button @click="editor.chain().focus().toggleHeaderColumn().run()">
|
|
79
|
+
<el-dropdown-item @click="editor.chain().focus().toggleHeaderColumn().run()">
|
|
101
80
|
Toggle header column
|
|
102
|
-
</button>
|
|
103
81
|
</el-dropdown-item>
|
|
104
|
-
<el-dropdown-item>
|
|
105
|
-
<button @click="editor.chain().focus().toggleHeaderRow().run()">
|
|
82
|
+
<el-dropdown-item @click="editor.chain().focus().toggleHeaderRow().run()">
|
|
106
83
|
Toggle header row
|
|
107
|
-
</button>
|
|
108
84
|
</el-dropdown-item>
|
|
109
|
-
<el-dropdown-item>
|
|
110
|
-
<button @click="editor.chain().focus().toggleHeaderCell().run()">
|
|
85
|
+
<el-dropdown-item @click="editor.chain().focus().toggleHeaderCell().run()">
|
|
111
86
|
Toggle header cell
|
|
112
|
-
</button>
|
|
113
87
|
</el-dropdown-item>
|
|
114
|
-
<el-dropdown-item>
|
|
115
|
-
<button @click="editor.chain().focus().mergeOrSplit().run()">
|
|
88
|
+
<el-dropdown-item @click="editor.chain().focus().mergeOrSplit().run()">
|
|
116
89
|
Merge or split
|
|
117
|
-
</button>
|
|
118
90
|
</el-dropdown-item>
|
|
119
|
-
<el-dropdown-item>
|
|
120
|
-
<button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
|
|
91
|
+
<el-dropdown-item @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
|
|
121
92
|
Set cell attribute
|
|
122
|
-
</button>
|
|
123
93
|
</el-dropdown-item>
|
|
124
|
-
<el-dropdown-item>
|
|
125
|
-
<button @click="editor.chain().focus().fixTables().run()">
|
|
94
|
+
<el-dropdown-item @click="editor.chain().focus().fixTables().run()">
|
|
126
95
|
Fix tables
|
|
127
|
-
</button>
|
|
128
|
-
</el-dropdown-item>
|
|
129
|
-
<el-dropdown-item>
|
|
130
|
-
<button @click="editor.chain().focus().goToNextCell().run()">
|
|
131
|
-
Go to next cell
|
|
132
|
-
</button>
|
|
133
|
-
</el-dropdown-item>
|
|
134
|
-
<el-dropdown-item>
|
|
135
|
-
<button @click="editor.chain().focus().goToPreviousCell().run()">
|
|
136
|
-
Go to previous cell
|
|
137
|
-
</button>
|
|
138
96
|
</el-dropdown-item>
|
|
139
97
|
</el-dropdown-menu>
|
|
140
98
|
</template>
|
|
141
99
|
</el-dropdown>
|
|
142
|
-
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
|
|
100
|
+
<button type="button" @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
|
|
143
101
|
<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line> <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line> <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line> <line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line> </svg>
|
|
144
102
|
</button>
|
|
145
|
-
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
|
|
103
|
+
<button type="button" @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
|
|
146
104
|
<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line> <line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line> <path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path> <path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path> <path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path> </svg>
|
|
147
105
|
</button>
|
|
148
|
-
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
|
106
|
+
<button type="button" @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
|
149
107
|
Code block
|
|
150
108
|
</button>
|
|
151
|
-
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
|
109
|
+
<button type="button" @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
|
152
110
|
Blockquote
|
|
153
111
|
</button>
|
|
154
|
-
<button @click="editor.chain().focus().setHorizontalRule().run()">
|
|
112
|
+
<button type="button" @click="editor.chain().focus().setHorizontalRule().run()">
|
|
155
113
|
Horizontal rule
|
|
156
114
|
</button>
|
|
157
|
-
<button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
|
|
115
|
+
<button type="button" @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
|
|
158
116
|
<svg viewBox="0 0 18 18"> <path class="ql-fill" d="M15.5,7H13.861a4.015,4.015,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.922,1.922,0,0,0,12.021,3.7a0.5,0.5,0,1,0,.957.291,0.917,0.917,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.077-1.164,1.925-1.934,2.486A1.423,1.423,0,0,0,12,7.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,7Z"></path> <path class="ql-fill" d="M9.651,5.241a1,1,0,0,0-1.41.108L6,7.964,3.759,5.349a1,1,0,1,0-1.519,1.3L4.683,9.5,2.241,12.35a1,1,0,1,0,1.519,1.3L6,11.036,8.241,13.65a1,1,0,0,0,1.519-1.3L7.317,9.5,9.759,6.651A1,1,0,0,0,9.651,5.241Z"></path> </svg>
|
|
159
117
|
</button>
|
|
160
|
-
<button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
|
|
118
|
+
<button type="button" @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
|
|
161
119
|
<svg viewBox="0 0 18 18"> <path class="ql-fill" d="M15.5,15H13.861a3.858,3.858,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.921,1.921,0,0,0,12.021,11.7a0.50013,0.50013,0,1,0,.957.291h0a0.914,0.914,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.076-1.16971,1.86982-1.93971,2.43082A1.45639,1.45639,0,0,0,12,15.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,15Z"></path> <path class="ql-fill" d="M9.65,5.241a1,1,0,0,0-1.409.108L6,7.964,3.759,5.349A1,1,0,0,0,2.192,6.59178Q2.21541,6.6213,2.241,6.649L4.684,9.5,2.241,12.35A1,1,0,0,0,3.71,13.70722q0.02557-.02768.049-0.05722L6,11.036,8.241,13.65a1,1,0,1,0,1.567-1.24277Q9.78459,12.3777,9.759,12.35L7.316,9.5,9.759,6.651A1,1,0,0,0,9.65,5.241Z"></path> </svg>
|
|
162
120
|
</button>
|
|
163
|
-
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
|
121
|
+
<button type="button" @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
|
164
122
|
<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line> <path class="ql-even ql-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path> <path class="ql-even ql-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path> </svg>
|
|
165
123
|
</button>
|
|
166
124
|
</div>
|
|
@@ -233,6 +191,16 @@ export default {
|
|
|
233
191
|
dialogVisible:false,
|
|
234
192
|
}),
|
|
235
193
|
|
|
194
|
+
watch: {
|
|
195
|
+
modelValue: {
|
|
196
|
+
handler(val) {
|
|
197
|
+
if (this.hold !== val) {
|
|
198
|
+
this.setValue();
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
|
|
236
204
|
methods: {
|
|
237
205
|
setValue() {
|
|
238
206
|
const temp =
|
|
@@ -240,6 +208,7 @@ export default {
|
|
|
240
208
|
? `<p>${this.modelValue}</p>`
|
|
241
209
|
: this.modelValue;
|
|
242
210
|
this.editor.commands.setContent(temp);
|
|
211
|
+
this.hold = temp;
|
|
243
212
|
|
|
244
213
|
|
|
245
214
|
},
|
|
@@ -320,7 +289,10 @@ export default {
|
|
|
320
289
|
this.setValue();
|
|
321
290
|
|
|
322
291
|
this.editor.on('blur', ({ editor, event }) => {
|
|
323
|
-
this
|
|
292
|
+
if(this.hold !== event.srcElement.innerHTML) {
|
|
293
|
+
this.hold = event.srcElement.innerHTML;
|
|
294
|
+
this.$emit("update:modelValue", this.hold);
|
|
295
|
+
}
|
|
324
296
|
})
|
|
325
297
|
},
|
|
326
298
|
};
|