@afeefa/vue-app 0.0.70 → 0.0.73
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/APagination.vue +1 -0
- package/src/components/ATableHeader.vue +4 -0
- package/src/components/ATableRow.vue +4 -0
- package/src/components/form/EditForm.vue +1 -0
- package/src-admin/components/FlyingContext.vue +7 -2
- package/src-admin/components/FlyingContextContainer.vue +30 -12
- package/src-admin/components/app/AppBarButton.vue +8 -1
- package/src-admin/components/app/AppBarTitle.vue +3 -3
- package/src-admin/components/form/EditFormButtons.vue +13 -10
- package/src-admin/components/form/RemoveButton.vue +2 -5
- package/src-admin/components/list/ListColumnHeader.vue +26 -1
- package/src-admin/components/list/ListView.vue +9 -1
- package/src-admin/components/model/ModelIcon.vue +8 -3
- package/src-admin/components/pages/EditPage.vue +27 -20
- package/src-admin/config/vuetify.js +3 -9
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.73
|
package/package.json
CHANGED
@@ -35,12 +35,17 @@ export default class FlyingContext extends Vue {
|
|
35
35
|
}
|
36
36
|
|
37
37
|
this.isVisible = this.show
|
38
|
+
const el = this.getContent()
|
39
|
+
|
40
|
+
if (!el) {
|
41
|
+
return // hmr reload removes dom element but keeps this instance
|
42
|
+
}
|
38
43
|
|
39
44
|
if (this.isVisible) {
|
40
45
|
const container = this.getSidebarContainer()
|
41
|
-
container.appendChild(
|
46
|
+
container.appendChild(el)
|
42
47
|
} else {
|
43
|
-
this.$el.appendChild(
|
48
|
+
this.$el.appendChild(el)
|
44
49
|
}
|
45
50
|
}
|
46
51
|
|
@@ -3,15 +3,24 @@
|
|
3
3
|
id="flyingContextContainer"
|
4
4
|
:class="{visible}"
|
5
5
|
>
|
6
|
-
<
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
6
|
+
<div class="closeButton">
|
7
|
+
<v-btn
|
8
|
+
fab
|
9
|
+
x-small
|
10
|
+
color="gray"
|
11
|
+
target="_blank"
|
12
|
+
title="Schließen"
|
13
|
+
@click.prevent="hide"
|
14
|
+
>
|
15
|
+
<v-icon>
|
16
|
+
$closeIcon
|
17
|
+
</v-icon>
|
18
|
+
</v-btn>
|
19
|
+
</div>
|
13
20
|
|
14
21
|
<div id="flyingContextContainer__children" />
|
22
|
+
|
23
|
+
<div class="v-navigation-drawer__border" />
|
15
24
|
</div>
|
16
25
|
</template>
|
17
26
|
|
@@ -71,15 +80,24 @@ export default class FlyingContextContainer extends Vue {
|
|
71
80
|
position: fixed;
|
72
81
|
z-index: 200;
|
73
82
|
right: 0;
|
74
|
-
width:
|
75
|
-
height:
|
76
|
-
top:
|
77
|
-
background:
|
78
|
-
border: 1px solid black;
|
83
|
+
width: 50vw;
|
84
|
+
height: 100%;
|
85
|
+
top: 0;
|
86
|
+
background: white;
|
79
87
|
transition: right .2s;
|
88
|
+
padding: 2rem;
|
80
89
|
|
81
90
|
&:not(.visible) {
|
82
91
|
right: -80vw;
|
83
92
|
}
|
93
|
+
|
94
|
+
.v-navigation-drawer__border {
|
95
|
+
background-color: rgba(0, 0, 0, .12);
|
96
|
+
left: 0;
|
97
|
+
}
|
98
|
+
|
99
|
+
.closeButton {
|
100
|
+
margin: -1rem 0 2rem -1rem;
|
101
|
+
}
|
84
102
|
}
|
85
103
|
</style>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div>
|
2
|
+
<div class="project-buttons gap-3">
|
3
3
|
<slot />
|
4
4
|
</div>
|
5
5
|
</template>
|
@@ -39,3 +39,10 @@ export default class AppBarButton extends Vue {
|
|
39
39
|
}
|
40
40
|
}
|
41
41
|
</script>
|
42
|
+
|
43
|
+
<style scoped>
|
44
|
+
.project-buttons {
|
45
|
+
display: flex;
|
46
|
+
align-items: center;
|
47
|
+
}
|
48
|
+
</style>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
2
|
+
<a-row gap="4">
|
3
3
|
<v-btn
|
4
4
|
v-if="back"
|
5
5
|
fab
|
@@ -31,7 +31,7 @@
|
|
31
31
|
</h3>
|
32
32
|
<h2>{{ title }}</h2>
|
33
33
|
</div>
|
34
|
-
</
|
34
|
+
</a-row>
|
35
35
|
</template>
|
36
36
|
|
37
37
|
<script>
|
@@ -83,7 +83,7 @@ h3 {
|
|
83
83
|
|
84
84
|
h2 {
|
85
85
|
font-size: 1.5rem;
|
86
|
-
line-height: 1.
|
86
|
+
line-height: 1.7rem;
|
87
87
|
|
88
88
|
white-space: nowrap;
|
89
89
|
overflow: hidden;
|
@@ -16,18 +16,21 @@
|
|
16
16
|
</v-icon>
|
17
17
|
</v-btn>
|
18
18
|
|
19
|
-
<v-
|
19
|
+
<v-hover
|
20
20
|
v-if="$has.reset && changed"
|
21
|
-
|
22
|
-
:class="{disabled: !changed}"
|
23
|
-
:disabled="!changed"
|
24
|
-
color="#999999"
|
25
|
-
text
|
26
|
-
title="Formular zurücksetzen"
|
27
|
-
@click="$emit('reset')"
|
21
|
+
v-slot="{ hover }"
|
28
22
|
>
|
29
|
-
|
30
|
-
|
23
|
+
<v-icon
|
24
|
+
:small="small"
|
25
|
+
:class="{disabled: !changed}"
|
26
|
+
:color="hover ? '#666666' : '#999999'"
|
27
|
+
text
|
28
|
+
title="Formular zurücksetzen"
|
29
|
+
@click="$emit('reset')"
|
30
|
+
>
|
31
|
+
{{ undoIcon }}
|
32
|
+
</v-icon>
|
33
|
+
</v-hover>
|
31
34
|
</a-row>
|
32
35
|
</template>
|
33
36
|
|
@@ -4,15 +4,12 @@
|
|
4
4
|
<v-btn
|
5
5
|
:class="'removeButton-' + dialogId"
|
6
6
|
fab
|
7
|
-
small
|
7
|
+
x-small
|
8
8
|
:color="(hover ? 'red' : 'grey lighten-3')"
|
9
9
|
title="Löschen"
|
10
10
|
@click="remove"
|
11
11
|
>
|
12
|
-
<v-icon
|
13
|
-
:color="hover ? 'white' : '#999999'"
|
14
|
-
size="1.4rem"
|
15
|
-
>
|
12
|
+
<v-icon :color="hover ? 'white' : '#999999'">
|
16
13
|
$trashCanIcon
|
17
14
|
</v-icon>
|
18
15
|
</v-btn>
|
@@ -5,10 +5,27 @@
|
|
5
5
|
@click="toggleSort"
|
6
6
|
>
|
7
7
|
<div
|
8
|
+
v-if="!icon"
|
8
9
|
:class="['text', {active}]"
|
9
10
|
v-html="text"
|
10
11
|
/>
|
11
12
|
|
13
|
+
<v-tooltip
|
14
|
+
v-else
|
15
|
+
bottom
|
16
|
+
>
|
17
|
+
<template #activator="{ on, attrs }">
|
18
|
+
<v-icon
|
19
|
+
:class="['mt-n1', {active}]"
|
20
|
+
v-bind="attrs"
|
21
|
+
v-on="on"
|
22
|
+
>
|
23
|
+
{{ icon }}
|
24
|
+
</v-icon>
|
25
|
+
</template>
|
26
|
+
<span>{{ text }}</span>
|
27
|
+
</v-tooltip>
|
28
|
+
|
12
29
|
<svg
|
13
30
|
v-if="order"
|
14
31
|
:class="['sortIcon', direction, {active}]"
|
@@ -25,7 +42,7 @@
|
|
25
42
|
import { Component, Vue } from '@a-vue'
|
26
43
|
|
27
44
|
@Component({
|
28
|
-
props: ['text', 'order']
|
45
|
+
props: ['text', 'icon', 'order']
|
29
46
|
})
|
30
47
|
export default class ListColumnHeader extends Vue {
|
31
48
|
get orderValue () {
|
@@ -92,6 +109,14 @@ export default class ListColumnHeader extends Vue {
|
|
92
109
|
}
|
93
110
|
}
|
94
111
|
|
112
|
+
::v-deep .v-icon {
|
113
|
+
color: #AAAAAA !important;
|
114
|
+
|
115
|
+
&.active {
|
116
|
+
color: #666666 !important;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
95
120
|
.text.active {
|
96
121
|
color: #333333;
|
97
122
|
}
|
@@ -36,7 +36,7 @@
|
|
36
36
|
:class="{selectable: hasFlyingContext}"
|
37
37
|
v-bind="getRowAttributes(model)"
|
38
38
|
v-on="getRowListeners(model)"
|
39
|
-
@click="
|
39
|
+
@click="emitFlyingContext(model)"
|
40
40
|
>
|
41
41
|
<v-icon
|
42
42
|
v-if="$has.icon"
|
@@ -113,6 +113,14 @@ export default class ListView extends Mixins(ListViewMixin) {
|
|
113
113
|
get hasFlyingContext () {
|
114
114
|
return !!this.$listeners.flyingContext
|
115
115
|
}
|
116
|
+
|
117
|
+
emitFlyingContext (model) {
|
118
|
+
if (window.getSelection().toString()) { // do not open if text selected
|
119
|
+
console.log(window.getSelection().toString())
|
120
|
+
return
|
121
|
+
}
|
122
|
+
this.$emit('flyingContext', model)
|
123
|
+
}
|
116
124
|
}
|
117
125
|
</script>
|
118
126
|
|
@@ -1,8 +1,9 @@
|
|
1
1
|
<template>
|
2
2
|
<v-icon
|
3
3
|
class="modelIcon"
|
4
|
-
:color="
|
4
|
+
:color="_color"
|
5
5
|
v-bind="$attrs"
|
6
|
+
v-on="$listeners"
|
6
7
|
v-text="icon"
|
7
8
|
/>
|
8
9
|
</template>
|
@@ -11,7 +12,7 @@
|
|
11
12
|
import { Component, Vue } from '@a-vue'
|
12
13
|
|
13
14
|
@Component({
|
14
|
-
props: ['model', 'modelClass']
|
15
|
+
props: ['model', 'modelClass', 'color']
|
15
16
|
})
|
16
17
|
export default class ModelIcon extends Vue {
|
17
18
|
get icon () {
|
@@ -22,7 +23,11 @@ export default class ModelIcon extends Vue {
|
|
22
23
|
}
|
23
24
|
}
|
24
25
|
|
25
|
-
get
|
26
|
+
get _color () {
|
27
|
+
if (this.color) {
|
28
|
+
return this.color
|
29
|
+
}
|
30
|
+
|
26
31
|
if (this.model) {
|
27
32
|
return this.model.getIcon().color
|
28
33
|
} else {
|
@@ -1,28 +1,35 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
3
|
-
|
4
|
-
:model="model"
|
5
|
-
:createModelToEdit="createModelToEdit"
|
6
|
-
>
|
7
|
-
<template #form="{modelToEdit, changed, valid}">
|
8
|
-
<slot
|
9
|
-
name="form"
|
10
|
-
:modelToEdit="modelToEdit"
|
11
|
-
:changed="changed"
|
12
|
-
:valid="valid"
|
13
|
-
/>
|
2
|
+
<div>
|
3
|
+
<slot name="before-form" />
|
14
4
|
|
15
|
-
|
16
|
-
|
5
|
+
<edit-form
|
6
|
+
ref="form"
|
7
|
+
:model="model"
|
8
|
+
:createModelToEdit="createModelToEdit"
|
9
|
+
>
|
10
|
+
<template #form="{modelToEdit, model, changed, valid}">
|
11
|
+
<slot
|
12
|
+
name="form"
|
13
|
+
:modelToEdit="modelToEdit"
|
14
|
+
:model="model"
|
17
15
|
:changed="changed"
|
18
16
|
:valid="valid"
|
19
|
-
:has="{reset: !!modelToEdit.id}"
|
20
|
-
@save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
|
21
|
-
@reset="$refs.form.reset()"
|
22
17
|
/>
|
23
|
-
|
24
|
-
|
25
|
-
|
18
|
+
|
19
|
+
<app-bar-button>
|
20
|
+
<edit-form-buttons
|
21
|
+
:changed="changed"
|
22
|
+
:valid="valid"
|
23
|
+
:has="{reset: !!modelToEdit.id}"
|
24
|
+
@save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
|
25
|
+
@reset="$refs.form.reset()"
|
26
|
+
/>
|
27
|
+
</app-bar-button>
|
28
|
+
</template>
|
29
|
+
</edit-form>
|
30
|
+
|
31
|
+
<slot name="after-form" />
|
32
|
+
</div>
|
26
33
|
</template>
|
27
34
|
|
28
35
|
<script>
|
@@ -17,11 +17,8 @@ import {
|
|
17
17
|
mdiMenuUp,
|
18
18
|
mdiPencil,
|
19
19
|
mdiPlus,
|
20
|
-
|
21
|
-
|
22
|
-
mdiShopping,
|
23
|
-
mdiMessage,
|
24
|
-
mdiPencilBoxMultiple
|
20
|
+
mdiPrinter,
|
21
|
+
mdiThumbUpOutline
|
25
22
|
} from '@mdi/js'
|
26
23
|
import Vue from 'vue'
|
27
24
|
import Vuetify from 'vuetify/lib'
|
@@ -51,10 +48,7 @@ export default new Vuetify({
|
|
51
48
|
arrowLeftIcon: mdiArrowLeft,
|
52
49
|
caretDownIcon: mdiMenuDown,
|
53
50
|
caretUpIcon: mdiMenuUp,
|
54
|
-
|
55
|
-
shop: mdiShopping,
|
56
|
-
annotation: mdiMessage,
|
57
|
-
duplicates: mdiPencilBoxMultiple
|
51
|
+
printerIcon: mdiPrinter
|
58
52
|
}
|
59
53
|
},
|
60
54
|
breakpoint: {
|