@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.
@@ -1 +1 @@
1
- 0.0.92
1
+ 0.0.94
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.92",
3
+ "version": "0.0.94",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': focus}]">
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': focus && editor.isActive('bold')}]"
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': focus && editor.isActive('italic')}]"
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': focus && editor.isActive('strike')}]"
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': focus && editor.isActive('heading', {level: 1})}]"
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': focus && editor.isActive('heading', {level: 2})}]"
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': focus && editor.isActive('bulletList')}]"
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': focus && editor.isActive('orderedList')}]"
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': focus && editor.isActive('blockquote')}]"
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': editor.isActive('textStyle', { color: '#0000FF' })}"
84
- title="rot"
85
- color="red--text"
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': editor.isActive('textStyle', { color: '#FF0000' })}"
95
- title="blau"
96
- color="blue--text"
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', {focus}]"
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
- focus = false
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.focus = true
193
+ this.editorFocus = true
191
194
  this.$emit('focus')
192
195
  },
193
196
  onBlur: ({ editor, event }) => {
194
- this.focus = false
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
 
@@ -1,5 +1,9 @@
1
1
  <template>
2
- <a-rich-text-area v-model="model[name]">
2
+ <a-rich-text-area
3
+ v-model="model[name]"
4
+ v-bind="$attrs"
5
+ v-on="$listeners"
6
+ >
3
7
  <template #buttons>
4
8
  <slot name="buttons" />
5
9
  </template>
@@ -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
  }
@@ -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
  }