zydx-plus 1.35.591 → 1.35.593
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/package.json
CHANGED
|
@@ -157,6 +157,7 @@ import {Editor, EditorContent, BubbleMenu} from '@tiptap/vue-3'
|
|
|
157
157
|
import StarterKit from '@tiptap/starter-kit'
|
|
158
158
|
import Image from '@tiptap/extension-image'
|
|
159
159
|
import TextAlign from '@tiptap/extension-text-align'
|
|
160
|
+
import Heading from '@tiptap/extension-heading'
|
|
160
161
|
import Placeholder from '@tiptap/extension-placeholder'
|
|
161
162
|
import Color from '@tiptap/extension-color'
|
|
162
163
|
import textStyle from '@tiptap/extension-text-style'
|
|
@@ -414,6 +415,13 @@ export default {
|
|
|
414
415
|
titleId,
|
|
415
416
|
CustomImage,
|
|
416
417
|
Contenteditable,
|
|
418
|
+
Heading.configure({
|
|
419
|
+
levels: [1, 2, 3], // 启用 h1/h2/h3(按需调整)
|
|
420
|
+
// 可选:自定义 H3 的 HTML 属性(如 class)
|
|
421
|
+
HTMLAttributes: {
|
|
422
|
+
class: 'tiptap-h3' // 给所有标题添加统一类名(方便样式定制)
|
|
423
|
+
}
|
|
424
|
+
}),
|
|
417
425
|
Color.configure({
|
|
418
426
|
types: ['textStyle'],
|
|
419
427
|
}),
|
|
@@ -953,9 +961,13 @@ export default {
|
|
|
953
961
|
this.editor.commands.setContent(html)
|
|
954
962
|
this.editor.chain().focus().setTextSelection(0).run()
|
|
955
963
|
}
|
|
956
|
-
if (v === 'h1') this.editor.chain().focus().setFontSize('18px').setBold().run()
|
|
957
|
-
if (v === 'h2') this.editor.chain().focus().setFontSize('16px').setBold().run()
|
|
958
|
-
if (v === 'h3') this.editor.chain().focus().setFontSize('14px').setBold().run()
|
|
964
|
+
// if (v === 'h1') this.editor.chain().focus().setFontSize('18px').setBold().run()
|
|
965
|
+
// if (v === 'h2') this.editor.chain().focus().setFontSize('16px').setBold().run()
|
|
966
|
+
// if (v === 'h3') this.editor.chain().focus().setFontSize('14px').setBold().run()
|
|
967
|
+
if(v === 'h1') this.editor.chain().focus().toggleHeading({ level: 1 }).setFontSize('18px').run()
|
|
968
|
+
if(v === 'h2') this.editor.chain().focus().toggleHeading({ level: 2 }).setFontSize('16px').run()
|
|
969
|
+
if(v === 'h3') this.editor.chain().focus().toggleHeading({ level: 3 }).setFontSize('14px').run()
|
|
970
|
+
|
|
959
971
|
if (v === 'p') {
|
|
960
972
|
this.editor.chain().focus().setFontSize('14px').run()
|
|
961
973
|
this.editor.chain().focus().unsetBold().run()
|
package/src/index.js
CHANGED
|
@@ -1,264 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<script lang="jsx">
|
|
3
|
-
import { defineComponent, h } from 'vue';
|
|
4
|
-
export const FILE_ERROR = {
|
|
5
|
-
SIZE: 'SIZE_ERROR',
|
|
6
|
-
TYPE: 'TYPE_ERROR'
|
|
7
|
-
}
|
|
8
|
-
export default defineComponent({
|
|
9
|
-
name: 'zydx-button-group',
|
|
10
|
-
props: {
|
|
11
|
-
buttons: {
|
|
12
|
-
type: Array,
|
|
13
|
-
default: () => []
|
|
14
|
-
},
|
|
15
|
-
accordian: {
|
|
16
|
-
type: Boolean,
|
|
17
|
-
default: false
|
|
18
|
-
},
|
|
19
|
-
reset: {
|
|
20
|
-
type: Boolean,
|
|
21
|
-
default: false
|
|
22
|
-
},
|
|
23
|
-
activeColor: {
|
|
24
|
-
type: String,
|
|
25
|
-
default: '#00ff00'
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
data() {
|
|
29
|
-
return {
|
|
30
|
-
active_state: [],
|
|
31
|
-
is_show_search: false,
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
mounted() {
|
|
35
|
-
this.active_state = this.buttons.map(() => false)
|
|
36
|
-
},
|
|
37
|
-
methods: {
|
|
38
|
-
trackClick(idx) {
|
|
39
|
-
if (this.accordian) {
|
|
40
|
-
this.active_state = this.active_state.map((_, i) => {
|
|
41
|
-
if (i === idx) {
|
|
42
|
-
return this.active_state[i] = !this.active_state[i]
|
|
43
|
-
} else {
|
|
44
|
-
return false
|
|
45
|
-
}
|
|
46
|
-
})
|
|
47
|
-
} else {
|
|
48
|
-
this.active_state[idx] = !this.active_state[idx]
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
onInputChange({ event, accept = [], onError = () => null, file_size = 2, cb, disabled }) {
|
|
53
|
-
if (disabled) return
|
|
54
|
-
let file = event.target.files[0]
|
|
55
|
-
if (file.size > file_size * 1024 * 1024) {
|
|
56
|
-
onError({ type: FILE_ERROR.SIZE })
|
|
57
|
-
return
|
|
58
|
-
}
|
|
59
|
-
if (accept.length && !accept.includes(file.type)) {
|
|
60
|
-
onError({ type: FILE_ERROR.TYPE })
|
|
61
|
-
return
|
|
62
|
-
}
|
|
63
|
-
cb(file)
|
|
64
|
-
},
|
|
65
|
-
showSearch: function () {
|
|
66
|
-
this.is_show_search = true
|
|
67
|
-
},
|
|
68
|
-
handleClose: function () {
|
|
69
|
-
this.is_show_search = false
|
|
70
|
-
},
|
|
71
|
-
handleSearch: function () {
|
|
72
|
-
this.$emit('search', this.$el.querySelector('.search_input').value)
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
watch: {
|
|
76
|
-
reset: function (v) {
|
|
77
|
-
if (v) {
|
|
78
|
-
this.active_state = this.buttons.map(() => false)
|
|
79
|
-
this.is_show_search = false
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
render() {
|
|
84
|
-
const { trackClick, onInputChange, showSearch, handleSearch, handleClose, is_show_search } = this
|
|
85
|
-
const render = ({ type, name, accept = '', file_size, flip = null, ignore = false, onClick, onError, disabled, idx, data_id }) => {
|
|
86
|
-
let active_name = flip ? flip : name
|
|
87
|
-
switch (type) {
|
|
88
|
-
case 'button': {
|
|
89
|
-
let curr_name = this.active_state[idx] ? active_name : name
|
|
90
|
-
let style = {color:this.active_state[idx] ? this.activeColor:disabled?'#717171': '#000000'}
|
|
91
|
-
let btn = h(
|
|
92
|
-
<button
|
|
93
|
-
class={this.active_state[idx] ? 'z-button z-active theme-text' : disabled ? 'z-button disabled' : 'z-button'}
|
|
94
|
-
data-id={data_id}
|
|
95
|
-
onClick={() => { onClick(); ignore ? () => null : trackClick(idx) }
|
|
96
|
-
}
|
|
97
|
-
disabled={disabled}
|
|
98
|
-
style={style}
|
|
99
|
-
>
|
|
100
|
-
</button>,
|
|
101
|
-
{
|
|
102
|
-
innerHTML: curr_name
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
return btn
|
|
106
|
-
}
|
|
107
|
-
case 'file': {
|
|
108
|
-
let btn = h('label', { class: disabled ? 'z-button disabled' : 'z-button' },
|
|
109
|
-
[
|
|
110
|
-
h('span', { innerHTML: name }),
|
|
111
|
-
disabled
|
|
112
|
-
? null
|
|
113
|
-
: h('input', {
|
|
114
|
-
type: 'file',
|
|
115
|
-
class: 'hidden',
|
|
116
|
-
accept: accept,
|
|
117
|
-
'data-id': data_id,
|
|
118
|
-
onClick: (e) => e.target.value = null,
|
|
119
|
-
onChange: (e) => onInputChange({ event: e, accept, file_size, cb: onClick, onError, disabled })
|
|
120
|
-
})
|
|
121
|
-
]
|
|
122
|
-
)
|
|
123
|
-
return btn
|
|
124
|
-
}
|
|
125
|
-
case 'search':
|
|
126
|
-
return is_show_search
|
|
127
|
-
?
|
|
128
|
-
<div class="search_container">
|
|
129
|
-
<input type="text" class="search_input"></input>
|
|
130
|
-
<div class="icons">
|
|
131
|
-
<span class="search" onClick={handleSearch}>
|
|
132
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#333" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z" /></svg>
|
|
133
|
-
</span>
|
|
134
|
-
<span class="separator"></span>
|
|
135
|
-
<span class="close" onClick={handleClose}>
|
|
136
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#333" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6Z" /></svg>
|
|
137
|
-
</span>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
: <button
|
|
141
|
-
class="z-button"
|
|
142
|
-
data-id={data_id}
|
|
143
|
-
onClick={showSearch}
|
|
144
|
-
>
|
|
145
|
-
{name}
|
|
146
|
-
</button>
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
return (
|
|
150
|
-
<div class="z-button-group">
|
|
151
|
-
{
|
|
152
|
-
this.buttons
|
|
153
|
-
.map(({ onClick, onError, disabled, file_size, accept, flip, ignore, type = "button", name, data_id = '' }, idx) => {
|
|
154
|
-
return render({ type, name, accept, file_size, flip, ignore, onClick, onError, disabled, idx, data_id })
|
|
155
|
-
}
|
|
156
|
-
)
|
|
157
|
-
}
|
|
158
|
-
</div>
|
|
159
|
-
)
|
|
160
|
-
}
|
|
161
|
-
})
|
|
162
|
-
</script>
|
|
163
|
-
|
|
164
|
-
<style scoped>
|
|
165
|
-
.z-button-group {
|
|
166
|
-
display: flex;
|
|
167
|
-
align-items: center;
|
|
168
|
-
justify-content: center;
|
|
169
|
-
width: auto;
|
|
170
|
-
height: 30px;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
.z-button {
|
|
174
|
-
margin: 1px;
|
|
175
|
-
width: auto;
|
|
176
|
-
min-width: 60px;
|
|
177
|
-
max-width: 60px;
|
|
178
|
-
text-overflow: ellipsis;
|
|
179
|
-
white-space: nowrap;
|
|
180
|
-
overflow: hidden;
|
|
181
|
-
height: 20px;
|
|
182
|
-
background-color: transparent;
|
|
183
|
-
color: #000000;
|
|
184
|
-
border: #000000 1px solid;
|
|
185
|
-
line-height: 18px;
|
|
186
|
-
border-radius: 3px;
|
|
187
|
-
font-size: 12px !important;
|
|
188
|
-
letter-spacing: 0px !important;
|
|
189
|
-
text-align: center;
|
|
190
|
-
cursor: pointer;
|
|
191
|
-
padding: 0 5px;
|
|
192
|
-
font-weight: normal;
|
|
193
|
-
box-sizing: border-box;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.z-button.disabled {
|
|
197
|
-
background-color: #ffffff;
|
|
198
|
-
color: #717171;
|
|
199
|
-
border: #717171 1px solid;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.search_container {
|
|
203
|
-
width: 180px;
|
|
204
|
-
height: 20px;
|
|
205
|
-
border: 1px solid #ccc;
|
|
206
|
-
border-radius: 2px;
|
|
207
|
-
padding-right: 40px;
|
|
208
|
-
display: flex;
|
|
209
|
-
align-items: center;
|
|
210
|
-
position: relative;
|
|
211
|
-
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.search_container .icons {
|
|
215
|
-
position: absolute;
|
|
216
|
-
right: 0;
|
|
217
|
-
top: 0;
|
|
218
|
-
height: 18px;
|
|
219
|
-
width: 40px;
|
|
220
|
-
gap: 3px;
|
|
221
|
-
display: flex;
|
|
222
|
-
align-items: center;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.search_container .icons .separator {
|
|
226
|
-
width: 1px;
|
|
227
|
-
height: 14px;
|
|
228
|
-
background-color: #ccc;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.search_container .icons .search,
|
|
232
|
-
.search_container .icons .close {
|
|
233
|
-
display: flex;
|
|
234
|
-
align-items: center;
|
|
235
|
-
justify-content: center;
|
|
236
|
-
cursor: pointer;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.search_input {
|
|
240
|
-
width: 100%;
|
|
241
|
-
height: 18px;
|
|
242
|
-
border: none;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.z-button.active {
|
|
246
|
-
color: #00ff00 !important;
|
|
247
|
-
}
|
|
248
|
-
/*
|
|
249
|
-
*/
|
|
250
|
-
/* .z-button.textActivep {
|
|
251
|
-
color: rgba(75, 12, 119, 1) !important;
|
|
252
|
-
} */
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
.z-button:disabled {
|
|
256
|
-
background-color: #ffffff;
|
|
257
|
-
color: #717171;
|
|
258
|
-
border: #717171 1px solid;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.hidden {
|
|
262
|
-
display: none;
|
|
263
|
-
}
|
|
264
|
-
</style>
|