@afeefa/vue-app 0.0.134 → 0.0.135
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
0.0.
|
|
1
|
+
0.0.135
|
package/package.json
CHANGED
|
@@ -1,126 +1,127 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
<div
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<div :class="['editorWrapper', {hasError: !isValid, focused: editorFocus}]">
|
|
4
|
+
<div
|
|
5
|
+
v-if="editor"
|
|
6
|
+
class="menu-bar"
|
|
7
|
+
>
|
|
8
|
+
<div>
|
|
9
|
+
<v-btn
|
|
10
|
+
small
|
|
11
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('bold')}]"
|
|
12
|
+
title="fett"
|
|
13
|
+
@click="editor.chain().focus().toggleBold().run()"
|
|
14
|
+
>
|
|
15
|
+
<v-icon>{{ boldIcon }}</v-icon>
|
|
16
|
+
</v-btn>
|
|
17
|
+
|
|
18
|
+
<v-btn
|
|
19
|
+
small
|
|
20
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('italic')}]"
|
|
21
|
+
title="kursiv"
|
|
22
|
+
@click="editor.chain().focus().toggleItalic().run()"
|
|
23
|
+
>
|
|
24
|
+
<v-icon>{{ italicIcon }}</v-icon>
|
|
25
|
+
</v-btn>
|
|
26
|
+
|
|
27
|
+
<v-btn
|
|
28
|
+
small
|
|
29
|
+
:class="['menu-button', 'strike', {'is-active': editorFocus && editor.isActive('strike')}]"
|
|
30
|
+
title="durchgestrichen"
|
|
31
|
+
@click="editor.chain().focus().toggleStrike().run()"
|
|
32
|
+
>
|
|
33
|
+
<v-icon>{{ strikeIcon }}</v-icon>
|
|
34
|
+
</v-btn>
|
|
35
|
+
|
|
36
|
+
<v-btn
|
|
37
|
+
small
|
|
38
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('bulletList')}]"
|
|
39
|
+
title="punkt-liste"
|
|
40
|
+
@click="editor.chain().focus().toggleBulletList().run()"
|
|
41
|
+
>
|
|
42
|
+
<v-icon>{{ ulIcon }}</v-icon>
|
|
43
|
+
</v-btn>
|
|
44
|
+
|
|
45
|
+
<v-btn
|
|
46
|
+
small
|
|
47
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('orderedList')}]"
|
|
48
|
+
title="nummerierte liste"
|
|
49
|
+
@click="editor.chain().focus().toggleOrderedList().run()"
|
|
50
|
+
>
|
|
51
|
+
<v-icon>{{ olIcon }}</v-icon>
|
|
52
|
+
</v-btn>
|
|
53
|
+
|
|
54
|
+
<v-btn
|
|
55
|
+
small
|
|
56
|
+
:class="['menu-button', {'is-active': editorFocus && editor.isActive('blockquote')}]"
|
|
57
|
+
title="zitat"
|
|
58
|
+
@click="editor.chain().focus().toggleBlockquote().run()"
|
|
59
|
+
>
|
|
60
|
+
<v-icon>{{ commentIcon }}</v-icon>
|
|
61
|
+
</v-btn>
|
|
62
|
+
|
|
63
|
+
<v-btn
|
|
64
|
+
small
|
|
65
|
+
class="menu-button"
|
|
66
|
+
:class="{ 'is-active': editorFocus && editor.isActive('highlight', { color: '#00FF00' })}"
|
|
67
|
+
title="grün"
|
|
68
|
+
color="green--text"
|
|
69
|
+
@click="editor.chain().focus().toggleHighlight({ color: '#00FF00' }).run()"
|
|
70
|
+
>
|
|
71
|
+
<v-icon>$paletteIcon</v-icon>
|
|
72
|
+
</v-btn>
|
|
73
|
+
|
|
74
|
+
<v-btn
|
|
75
|
+
small
|
|
76
|
+
class="menu-button"
|
|
77
|
+
:class="{ 'is-active': editorFocus && editor.isActive('highlight', { color: '#FF0000' })}"
|
|
78
|
+
title="rot"
|
|
79
|
+
color="red--text"
|
|
80
|
+
@click="editor.chain().focus().toggleHighlight({ color: '#FF0000' }).run()"
|
|
81
|
+
>
|
|
82
|
+
<v-icon>$paletteIcon</v-icon>
|
|
83
|
+
</v-btn>
|
|
84
|
+
|
|
85
|
+
<v-btn
|
|
86
|
+
small
|
|
87
|
+
class="menu-button"
|
|
88
|
+
:class="{ 'is-active': editorFocus && editor.isActive('highlight', { color: '#FFFF00' })}"
|
|
89
|
+
title="gelb"
|
|
90
|
+
color="yellow--text"
|
|
91
|
+
@click="editor.chain().focus().toggleHighlight({ color: '#FFFF00' }).run()"
|
|
92
|
+
>
|
|
93
|
+
<v-icon>$paletteIcon</v-icon>
|
|
94
|
+
</v-btn>
|
|
95
|
+
|
|
96
|
+
<v-btn
|
|
97
|
+
small
|
|
98
|
+
class="menu-button undo-button"
|
|
99
|
+
:disabled="initialValue === editor.getHTML()"
|
|
100
|
+
title="rückgängig"
|
|
101
|
+
@click="editor.chain().focus().undo().run()"
|
|
102
|
+
>
|
|
103
|
+
<v-icon>{{ undoIcon }}</v-icon>
|
|
104
|
+
</v-btn>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
<div>
|
|
109
|
+
<slot name="buttons" />
|
|
110
|
+
</div>
|
|
104
111
|
</div>
|
|
105
112
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
113
|
+
<editor-content
|
|
114
|
+
:editor="editor"
|
|
115
|
+
:class="['a-rich-text-editor', {editorFocus}]"
|
|
116
|
+
/>
|
|
110
117
|
</div>
|
|
111
118
|
|
|
112
|
-
<
|
|
113
|
-
:
|
|
114
|
-
|
|
115
|
-
/>
|
|
116
|
-
<v-text-field
|
|
117
|
-
v-show="false"
|
|
118
|
-
ref="input"
|
|
119
|
-
v-model="currentValueStripped"
|
|
119
|
+
<a-text-field
|
|
120
|
+
:value="currentValueStripped"
|
|
121
|
+
class="validationInput"
|
|
120
122
|
:label="label"
|
|
121
123
|
:rules="validationRules"
|
|
122
|
-
|
|
123
|
-
v-on="$listeners"
|
|
124
|
+
:valid.sync="isValid"
|
|
124
125
|
/>
|
|
125
126
|
</div>
|
|
126
127
|
</template>
|
|
@@ -156,6 +157,7 @@ export default class ARichTextArea extends Vue {
|
|
|
156
157
|
internalValue = null
|
|
157
158
|
initialValue = null
|
|
158
159
|
editorFocus = false
|
|
160
|
+
isValid = false
|
|
159
161
|
|
|
160
162
|
boldIcon = mdiFormatBold
|
|
161
163
|
italicIcon = mdiFormatItalic
|
|
@@ -226,8 +228,7 @@ export default class ARichTextArea extends Vue {
|
|
|
226
228
|
}
|
|
227
229
|
|
|
228
230
|
get validationRules () {
|
|
229
|
-
|
|
230
|
-
return (this.validator && this.validator.getRules(label)) || []
|
|
231
|
+
return (this.validator && this.validator.getRules(this.label)) || []
|
|
231
232
|
}
|
|
232
233
|
|
|
233
234
|
get counter () {
|
|
@@ -247,9 +248,25 @@ export default class ARichTextArea extends Vue {
|
|
|
247
248
|
|
|
248
249
|
|
|
249
250
|
<style lang="scss" scoped>
|
|
250
|
-
.
|
|
251
|
+
.editorWrapper {
|
|
252
|
+
padding: .5rem;
|
|
253
|
+
|
|
254
|
+
border: 1px solid white;
|
|
255
|
+
outline: 1px solid rgb(0 0 0 / 38%);
|
|
256
|
+
border-radius: 4px !important;
|
|
257
|
+
|
|
251
258
|
:deep(.ProseMirror-focused) {
|
|
252
|
-
|
|
259
|
+
outline: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&.focused {
|
|
263
|
+
border: 1px solid #1975D2;
|
|
264
|
+
outline: 1px solid #1975D2;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&.hasError {
|
|
268
|
+
border: 1px solid #FF5252;
|
|
269
|
+
outline: 1px solid #FF5252;
|
|
253
270
|
}
|
|
254
271
|
}
|
|
255
272
|
|
|
@@ -271,6 +288,7 @@ export default class ARichTextArea extends Vue {
|
|
|
271
288
|
border: none;
|
|
272
289
|
box-shadow: none;
|
|
273
290
|
border-radius: 0;
|
|
291
|
+
margin-right: 2px;
|
|
274
292
|
|
|
275
293
|
:deep(.v-icon) {
|
|
276
294
|
font-size: 20px;
|
|
@@ -290,6 +308,7 @@ export default class ARichTextArea extends Vue {
|
|
|
290
308
|
|
|
291
309
|
&:disabled {
|
|
292
310
|
background: none !important;
|
|
311
|
+
|
|
293
312
|
:deep(*) {
|
|
294
313
|
color: #CCCCCC !important;
|
|
295
314
|
}
|
|
@@ -319,4 +338,12 @@ export default class ARichTextArea extends Vue {
|
|
|
319
338
|
margin: 16px 0;
|
|
320
339
|
}
|
|
321
340
|
}
|
|
341
|
+
|
|
342
|
+
.validationInput {
|
|
343
|
+
margin-top: .3rem;
|
|
344
|
+
|
|
345
|
+
:deep(.v-input__slot) {
|
|
346
|
+
display: none;
|
|
347
|
+
}
|
|
348
|
+
}
|
|
322
349
|
</style>
|
|
@@ -12,6 +12,19 @@
|
|
|
12
12
|
align-center
|
|
13
13
|
fill-height
|
|
14
14
|
>
|
|
15
|
+
<a-row
|
|
16
|
+
justify-end
|
|
17
|
+
width="100%"
|
|
18
|
+
>
|
|
19
|
+
<v-app-bar-nav-icon
|
|
20
|
+
class="sidebarToggleButton mt-1 mr-2 ml-3"
|
|
21
|
+
title="Menu schließen"
|
|
22
|
+
@click="toggleDrawer"
|
|
23
|
+
>
|
|
24
|
+
<v-icon>{{ closeMenuIcon }}</v-icon>
|
|
25
|
+
</v-app-bar-nav-icon>
|
|
26
|
+
</a-row>
|
|
27
|
+
|
|
15
28
|
<router-link
|
|
16
29
|
:to="{name: rootRouteName}"
|
|
17
30
|
class="logoContainer d-flex flex-column align-center pa-6"
|
|
@@ -91,7 +104,9 @@
|
|
|
91
104
|
align-start
|
|
92
105
|
>
|
|
93
106
|
<v-app-bar-nav-icon
|
|
107
|
+
v-if="!drawer"
|
|
94
108
|
class="sidebarToggleButton mr-2 ml-3"
|
|
109
|
+
title="Menu öffnen"
|
|
95
110
|
@click="toggleDrawer"
|
|
96
111
|
/>
|
|
97
112
|
|
|
@@ -132,6 +147,7 @@ import StickyFooterContainer from './StickyFooterContainer'
|
|
|
132
147
|
import Sidebar from './Sidebar'
|
|
133
148
|
import StickyHeader from './StickyHeader'
|
|
134
149
|
import '../styles.scss'
|
|
150
|
+
import { mdiBackburger } from '@mdi/js'
|
|
135
151
|
|
|
136
152
|
@Component({
|
|
137
153
|
components: {
|
|
@@ -147,6 +163,7 @@ export default class App extends Vue {
|
|
|
147
163
|
$hasOptions = ['settings']
|
|
148
164
|
|
|
149
165
|
drawer = true
|
|
166
|
+
closeMenuIcon = mdiBackburger
|
|
150
167
|
isLoading = false
|
|
151
168
|
|
|
152
169
|
created () {
|