@afeefa/vue-app 0.0.68 → 0.0.71

Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +1 @@
1
- 0.0.68
1
+ 0.0.71
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.68",
3
+ "version": "0.0.71",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -16,6 +16,7 @@
16
16
  v-bind="{...$attrs, ...attrs}"
17
17
  :rules="validationRules"
18
18
  v-on="on"
19
+ @click:clear="clearDate"
19
20
  @click.native="on.click"
20
21
  />
21
22
  </template>
@@ -24,6 +25,8 @@
24
25
  v-if="menu"
25
26
  :value="date"
26
27
  no-title
28
+ :type="type"
29
+ v-bind="$attrs"
27
30
  @input="dateChanged"
28
31
  />
29
32
  </v-menu>
@@ -36,7 +39,7 @@ import { formatDate } from '@a-vue/utils/format-date'
36
39
  import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
37
40
 
38
41
  @Component({
39
- props: ['value', 'validator']
42
+ props: ['value', 'validator', 'type']
40
43
  })
41
44
  export default class ADatePicker extends Mixins(ComponentWidthMixin) {
42
45
  value_ = null
@@ -62,7 +65,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
62
65
 
63
66
  get date () {
64
67
  return this.value_
65
- ? this.value_.toISOString().substr(0, 10)
68
+ ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
66
69
  : null
67
70
  }
68
71
 
@@ -70,6 +73,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
70
73
  return this.$attrs.label
71
74
  }
72
75
 
76
+ clearDate () {
77
+ this.value_ = null
78
+ this.$emit('input', this.value_)
79
+ }
80
+
73
81
  dateChanged (date) {
74
82
  this.menu = false
75
83
  this.value_ = new Date(date)
@@ -78,7 +86,14 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
78
86
 
79
87
  get formattedDate () {
80
88
  const date = this.value_
81
- return formatDate(date ? new Date(date) : null)
89
+ if (!date) {
90
+ return null
91
+ }
92
+ if (this.type === 'month') {
93
+ const monthName = date.toLocaleString('default', { month: 'long' })
94
+ return monthName + ' ' + date.getFullYear()
95
+ }
96
+ return formatDate(new Date(date))
82
97
  }
83
98
 
84
99
  get validationRules () {
@@ -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>
@@ -88,7 +88,7 @@
88
88
  class="topbar"
89
89
  >
90
90
  <v-app-bar-nav-icon
91
- class="sidebarToggleButton mr-2 ml-4"
91
+ class="sidebarToggleButton mr-2 ml-3"
92
92
  @click="toggleDrawer"
93
93
  />
94
94
 
@@ -97,7 +97,7 @@
97
97
 
98
98
  <v-container
99
99
  fluid
100
- class="pa-8 pt-4"
100
+ class="pa-8 pt-2"
101
101
  >
102
102
  <sticky-header />
103
103
 
@@ -229,7 +229,7 @@ export default class App extends Vue {
229
229
  width: 100%;
230
230
  left: 0;
231
231
  top: 0;
232
- padding: .2rem 1rem;
232
+ padding: .2rem 1.1rem;
233
233
  }
234
234
 
235
235
  .a-breadcrumbs {
@@ -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>
@@ -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
 
@@ -120,6 +128,7 @@ export default class ListView extends Mixins(ListViewMixin) {
120
128
  <style lang="scss" scoped>
121
129
  .listView {
122
130
  max-width: 100%;
131
+ padding-top: .2rem; // unless, floating input labels might be cut
123
132
  overflow-x: auto;
124
133
  overflow-y: hidden;
125
134
  }
@@ -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 {
@@ -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: {