@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.
@@ -1 +1 @@
1
- 0.0.70
1
+ 0.0.73
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.70",
3
+ "version": "0.0.73",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -41,6 +41,7 @@ export default class APagination extends Vue {
41
41
  margin: 0;
42
42
  width: 28px;
43
43
  height: 28px;
44
+ white-space: nowrap;
44
45
  }
45
46
  }
46
47
  </style>
@@ -74,5 +74,9 @@ export default class ATableHeader extends Vue {
74
74
  }
75
75
  }
76
76
  }
77
+
78
+ [class*=text-] {
79
+ color: inherit;
80
+ }
77
81
  }
78
82
  </style>
@@ -84,5 +84,9 @@ export default class ATableRow extends Vue {
84
84
  }
85
85
  }
86
86
  }
87
+
88
+ [class*=text-] {
89
+ color: inherit;
90
+ }
87
91
  }
88
92
  </style>
@@ -8,6 +8,7 @@
8
8
  :changed="changed"
9
9
  :valid="valid"
10
10
  :modelToEdit="modelToEdit"
11
+ :model="model"
11
12
  />
12
13
  </v-form>
13
14
  </template>
@@ -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(this.getContent())
46
+ container.appendChild(el)
42
47
  } else {
43
- this.$el.appendChild(this.getContent())
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
- <a
7
- href=""
8
- @click.prevent="hide"
9
- >close</a>
10
-
11
- <br>
12
- <br>
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: 60vw;
75
- height: 80vh;
76
- top: 10vh;
77
- background: rgba($color: white, $alpha: .6);
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
- <div class="d-flex align-center gap-4">
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
- </div>
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.5rem;
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-icon
19
+ <v-hover
20
20
  v-if="$has.reset && changed"
21
- :small="small"
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
- {{ undoIcon }}
30
- </v-icon>
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="$emit('flyingContext', model)"
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="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 color () {
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
- <edit-form
3
- ref="form"
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
- <app-bar-button>
16
- <edit-form-buttons
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
- </app-bar-button>
24
- </template>
25
- </edit-form>
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
- mdiThumbUpOutline,
21
- mdiAccountGroup,
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
- householdMembers: mdiAccountGroup,
55
- shop: mdiShopping,
56
- annotation: mdiMessage,
57
- duplicates: mdiPencilBoxMultiple
51
+ printerIcon: mdiPrinter
58
52
  }
59
53
  },
60
54
  breakpoint: {