@afeefa/vue-app 0.0.92 → 0.0.94
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/.afeefa/package/release/version.txt +1 -1
- package/package.json +1 -1
- package/src/components/ARichTextArea.vue +33 -22
- package/src/components/form/fields/FormFieldRichTextArea.vue +5 -1
- package/src-admin/components/form/RemoveButton.vue +7 -3
- package/src-admin/components/list/ListColumnHeader.vue +3 -0
- package/src-admin/styles.scss +8 -0
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.94
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused':
|
2
|
+
<div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': editorFocus}]">
|
3
3
|
<div
|
4
4
|
v-if="editor"
|
5
5
|
class="menu-bar"
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<div>
|
8
8
|
<v-btn
|
9
9
|
small
|
10
|
-
:class="['menu-button', {'is-active':
|
10
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('bold')}]"
|
11
11
|
title="fett"
|
12
12
|
@click="editor.chain().focus().toggleBold().run()"
|
13
13
|
>
|
@@ -16,7 +16,7 @@
|
|
16
16
|
|
17
17
|
<v-btn
|
18
18
|
small
|
19
|
-
:class="['menu-button', {'is-active':
|
19
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('italic')}]"
|
20
20
|
title="kursiv"
|
21
21
|
@click="editor.chain().focus().toggleItalic().run()"
|
22
22
|
>
|
@@ -25,7 +25,7 @@
|
|
25
25
|
|
26
26
|
<v-btn
|
27
27
|
small
|
28
|
-
:class="['menu-button', 'strike', {'is-active':
|
28
|
+
:class="['menu-button', 'strike', {'is-active': editorFocus && editor.isActive('strike')}]"
|
29
29
|
title="durchgestrichen"
|
30
30
|
@click="editor.chain().focus().toggleStrike().run()"
|
31
31
|
>
|
@@ -34,7 +34,7 @@
|
|
34
34
|
|
35
35
|
<v-btn
|
36
36
|
small
|
37
|
-
:class="['menu-button', {'is-active':
|
37
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('heading', {level: 1})}]"
|
38
38
|
title="überschrift 1"
|
39
39
|
@click="editor.chain().focus().toggleHeading({level: 1}).run()"
|
40
40
|
>
|
@@ -43,7 +43,7 @@
|
|
43
43
|
|
44
44
|
<v-btn
|
45
45
|
small
|
46
|
-
:class="['menu-button', {'is-active':
|
46
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('heading', {level: 2})}]"
|
47
47
|
title="pberschrift 2"
|
48
48
|
@click="editor.chain().focus().toggleHeading({level: 2}).run()"
|
49
49
|
>
|
@@ -52,7 +52,7 @@
|
|
52
52
|
|
53
53
|
<v-btn
|
54
54
|
small
|
55
|
-
:class="['menu-button', {'is-active':
|
55
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('bulletList')}]"
|
56
56
|
title="punkt-liste"
|
57
57
|
@click="editor.chain().focus().toggleBulletList().run()"
|
58
58
|
>
|
@@ -61,7 +61,7 @@
|
|
61
61
|
|
62
62
|
<v-btn
|
63
63
|
small
|
64
|
-
:class="['menu-button', {'is-active':
|
64
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('orderedList')}]"
|
65
65
|
title="nummerierte liste"
|
66
66
|
@click="editor.chain().focus().toggleOrderedList().run()"
|
67
67
|
>
|
@@ -70,7 +70,7 @@
|
|
70
70
|
|
71
71
|
<v-btn
|
72
72
|
small
|
73
|
-
:class="['menu-button', {'is-active':
|
73
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('blockquote')}]"
|
74
74
|
title="zitat"
|
75
75
|
@click="editor.chain().focus().toggleBlockquote().run()"
|
76
76
|
>
|
@@ -80,10 +80,10 @@
|
|
80
80
|
<v-btn
|
81
81
|
small
|
82
82
|
class="menu-button"
|
83
|
-
:class="{ 'is-active':
|
84
|
-
title="
|
85
|
-
color="
|
86
|
-
@click="editor.chain().focus().setColor('#0000FF').run()"
|
83
|
+
:class="{ 'is-active': editorFocus && editorSelectionIs('#0000FF')}"
|
84
|
+
title="blau"
|
85
|
+
color="blue--text"
|
86
|
+
@click="editorSelectionIs('#0000FF') ? editor.chain().focus().unsetColor().run() : editor.chain().focus().setColor('#0000FF').run()"
|
87
87
|
>
|
88
88
|
<v-icon>$paletteIcon</v-icon>
|
89
89
|
</v-btn>
|
@@ -91,10 +91,10 @@
|
|
91
91
|
<v-btn
|
92
92
|
small
|
93
93
|
class="menu-button"
|
94
|
-
:class="{ 'is-active':
|
95
|
-
title="
|
96
|
-
color="
|
97
|
-
@click="editor.chain().focus().setColor('#FF0000').run()"
|
94
|
+
:class="{ 'is-active': editorFocus && editorSelectionIs('#FF0000')}"
|
95
|
+
title="rot"
|
96
|
+
color="red--text"
|
97
|
+
@click="editorSelectionIs('#FF0000') ? editor.chain().focus().unsetColor().run() : editor.chain().focus().setColor('#FF0000').run()"
|
98
98
|
>
|
99
99
|
<v-icon>$paletteIcon</v-icon>
|
100
100
|
</v-btn>
|
@@ -118,7 +118,7 @@
|
|
118
118
|
|
119
119
|
<editor-content
|
120
120
|
:editor="editor"
|
121
|
-
:class="['a-rich-text-editor', {
|
121
|
+
:class="['a-rich-text-editor', {editorFocus}]"
|
122
122
|
/>
|
123
123
|
</div>
|
124
124
|
</template>
|
@@ -144,7 +144,7 @@ import { Color } from '@tiptap/extension-color'
|
|
144
144
|
import TextStyle from '@tiptap/extension-text-style'
|
145
145
|
|
146
146
|
@Component({
|
147
|
-
props: ['value', 'validator'],
|
147
|
+
props: ['value', 'validator', 'focus'],
|
148
148
|
components: {
|
149
149
|
EditorContent
|
150
150
|
}
|
@@ -153,7 +153,7 @@ export default class ARichTextArea extends Vue {
|
|
153
153
|
editor = null
|
154
154
|
internalValue = null
|
155
155
|
initialValue = null
|
156
|
-
|
156
|
+
editorFocus = false
|
157
157
|
|
158
158
|
boldIcon = mdiFormatBold
|
159
159
|
italicIcon = mdiFormatItalic
|
@@ -172,12 +172,15 @@ export default class ARichTextArea extends Vue {
|
|
172
172
|
}
|
173
173
|
|
174
174
|
mounted () {
|
175
|
+
this.editorFocus = !!this.focus
|
176
|
+
|
175
177
|
if (this.validator) {
|
176
178
|
this.$refs.input.validate(true)
|
177
179
|
}
|
178
180
|
|
179
181
|
this.editor = new Editor({
|
180
182
|
content: this.internalValue,
|
183
|
+
autofocus: this.focus ? 'end' : false,
|
181
184
|
extensions: [
|
182
185
|
StarterKit,
|
183
186
|
TextStyle,
|
@@ -187,11 +190,11 @@ export default class ARichTextArea extends Vue {
|
|
187
190
|
this.$emit('input', this.editor.getHTML())
|
188
191
|
},
|
189
192
|
onFocus: ({ editor, event }) => {
|
190
|
-
this.
|
193
|
+
this.editorFocus = true
|
191
194
|
this.$emit('focus')
|
192
195
|
},
|
193
196
|
onBlur: ({ editor, event }) => {
|
194
|
-
this.
|
197
|
+
this.editorFocus = false
|
195
198
|
this.$emit('blur')
|
196
199
|
}
|
197
200
|
})
|
@@ -201,6 +204,10 @@ export default class ARichTextArea extends Vue {
|
|
201
204
|
this.editor.destroy()
|
202
205
|
}
|
203
206
|
|
207
|
+
editorSelectionIs (color) {
|
208
|
+
return this.editor.isActive('textStyle', { color: color })
|
209
|
+
}
|
210
|
+
|
204
211
|
/**
|
205
212
|
* reset the text area to disable the undo button
|
206
213
|
* e.g. after saving the form while keeping it open
|
@@ -216,6 +223,10 @@ export default class ARichTextArea extends Vue {
|
|
216
223
|
const isSame = this.editor.getHTML() === this.internalValue
|
217
224
|
if (!isSame) {
|
218
225
|
this.editor.commands.setContent(this.internalValue, false)
|
226
|
+
// witch reusing the editor component, we need to restore the focus state
|
227
|
+
if (this.focus && this.focus === true) {
|
228
|
+
this.editor.commands.focus('end')
|
229
|
+
}
|
219
230
|
}
|
220
231
|
}
|
221
232
|
|
@@ -4,14 +4,14 @@
|
|
4
4
|
<v-btn
|
5
5
|
:class="'a-btn-standard removeButton-' + dialogId"
|
6
6
|
fab
|
7
|
-
small
|
8
7
|
:color="(hover ? 'red' : 'grey lighten-3')"
|
9
8
|
:title="title"
|
9
|
+
v-bind="{ small: isSmall, ...$attrs}"
|
10
10
|
@click="remove"
|
11
11
|
>
|
12
12
|
<v-icon
|
13
13
|
class="white--hover"
|
14
|
-
size="1.3rem"
|
14
|
+
:size="iconSize || '1.3rem'"
|
15
15
|
>
|
16
16
|
$trashCanIcon
|
17
17
|
</v-icon>
|
@@ -44,13 +44,17 @@ import { DialogEvent } from '@a-vue/events'
|
|
44
44
|
import { randomCssClass } from '@a-vue/utils/random'
|
45
45
|
|
46
46
|
@Component({
|
47
|
-
props: ['title', 'message', 'info', 'itemTitle', 'protect']
|
47
|
+
props: ['iconSize', 'title', 'message', 'info', 'itemTitle', 'protect']
|
48
48
|
})
|
49
49
|
export default class EditPage extends Vue {
|
50
50
|
dialogId = randomCssClass(10)
|
51
51
|
removeKey = null
|
52
52
|
removeConfirmed = null
|
53
53
|
|
54
|
+
get isSmall () {
|
55
|
+
return Object.keys(this.$attrs).filter(k => k.match(/x-small|default|large|x-large/)).length === 0
|
56
|
+
}
|
57
|
+
|
54
58
|
async remove () {
|
55
59
|
if (this.protect) {
|
56
60
|
this.removeKey = [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')
|
@@ -57,6 +57,9 @@ export default class ListColumnHeader extends Vue {
|
|
57
57
|
if (this.orderValue) {
|
58
58
|
return this.orderValue
|
59
59
|
} else {
|
60
|
+
if (!this.filter.options[this.order]) {
|
61
|
+
console.warn(`Order filter ${this.order} not defined.`)
|
62
|
+
}
|
60
63
|
const direction = this.filter.options[this.order][0]
|
61
64
|
return direction || 'asc'
|
62
65
|
}
|
package/src-admin/styles.scss
CHANGED
@@ -59,6 +59,10 @@
|
|
59
59
|
opacity: .08;
|
60
60
|
}
|
61
61
|
|
62
|
+
.theme--light.v-input .error--text {
|
63
|
+
color: #616161 !important;
|
64
|
+
}
|
65
|
+
|
62
66
|
.theme--light.v-btn.v-btn--disabled,
|
63
67
|
.theme--light.v-btn.v-btn--disabled span,
|
64
68
|
.theme--light.v-btn.v-btn--disabled .v-icon,
|
@@ -66,6 +70,10 @@
|
|
66
70
|
color: white !important;
|
67
71
|
}
|
68
72
|
|
73
|
+
.theme--light.v-btn:focus-visible {
|
74
|
+
outline: 2px solid #1976D2;
|
75
|
+
}
|
76
|
+
|
69
77
|
.theme--light.v-btn.v-btn--disabled.v-btn--has-bg {
|
70
78
|
background-color: #EEEEEE !important;
|
71
79
|
}
|