@afeefa/vue-app 0.0.68 → 0.0.71

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.68
+0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.68",
+  "version": "0.0.71",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/ADatePicker.vue

@@ -16,6 +16,7 @@
         v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
         v-on="on"
+        @click:clear="clearDate"
         @click.native="on.click"
       />
     </template>
@@ -24,6 +25,8 @@
       v-if="menu"
       :value="date"
       no-title
+      :type="type"
+      v-bind="$attrs"
       @input="dateChanged"
     />
   </v-menu>
@@ -36,7 +39,7 @@ import { formatDate } from '@a-vue/utils/format-date'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['value', 'validator']
+  props: ['value', 'validator', 'type']
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   value_ = null
@@ -62,7 +65,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
   get date () {
     return this.value_
-      ? this.value_.toISOString().substr(0, 10)
+      ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
       : null
   }
 
@@ -70,6 +73,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     return this.$attrs.label
   }
 
+  clearDate () {
+    this.value_ = null
+    this.$emit('input', this.value_)
+  }
+
   dateChanged (date) {
     this.menu = false
     this.value_ = new Date(date)
@@ -78,7 +86,14 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
   get formattedDate () {
     const date = this.value_
-    return formatDate(date ? new Date(date) : null)
+    if (!date) {
+      return null
+    }
+    if (this.type === 'month') {
+      const monthName = date.toLocaleString('default', { month: 'long' })
+      return monthName + ' ' + date.getFullYear()
+    }
+    return formatDate(new Date(date))
   }
 
   get validationRules () {

package/src/components/ATableHeader.vue

@@ -74,5 +74,9 @@ export default class ATableHeader extends Vue {
       }
     }
   }
+
+  [class*=text-] {
+    color: inherit;
+  }
 }
 </style>

package/src/components/ATableRow.vue

@@ -84,5 +84,9 @@ export default class ATableRow extends Vue {
       }
     }
   }
+
+  [class*=text-] {
+    color: inherit;
+  }
 }
 </style>

package/src-admin/components/App.vue

@@ -88,7 +88,7 @@
         class="topbar"
       >
         <v-app-bar-nav-icon
-          class="sidebarToggleButton mr-2 ml-4"
+          class="sidebarToggleButton mr-2 ml-3"
           @click="toggleDrawer"
         />
 
@@ -97,7 +97,7 @@
 
       <v-container
         fluid
-        class="pa-8 pt-4"
+        class="pa-8 pt-2"
       >
         <sticky-header />
 
@@ -229,7 +229,7 @@ export default class App extends Vue {
   width: 100%;
   left: 0;
   top: 0;
-  padding: .2rem 1rem;
+  padding: .2rem 1.1rem;
 }
 
 .a-breadcrumbs {

package/src-admin/components/FlyingContext.vue

@@ -35,12 +35,17 @@ export default class FlyingContext extends Vue {
     }
 
     this.isVisible = this.show
+    const el = this.getContent()
+
+    if (!el) {
+      return // hmr reload removes dom element but keeps this instance
+    }
 
     if (this.isVisible) {
       const container = this.getSidebarContainer()
-      container.appendChild(this.getContent())
+      container.appendChild(el)
     } else {
-      this.$el.appendChild(this.getContent())
+      this.$el.appendChild(el)
     }
   }
 

package/src-admin/components/FlyingContextContainer.vue

@@ -3,15 +3,24 @@
     id="flyingContextContainer"
     :class="{visible}"
   >
-    <a
-      href=""
-      @click.prevent="hide"
-    >close</a>
-
-    <br>
-    <br>
+    <div class="closeButton">
+      <v-btn
+        fab
+        x-small
+        color="gray"
+        target="_blank"
+        title="Schließen"
+        @click.prevent="hide"
+      >
+        <v-icon>
+          $closeIcon
+        </v-icon>
+      </v-btn>
+    </div>
 
     <div id="flyingContextContainer__children" />
+
+    <div class="v-navigation-drawer__border" />
   </div>
 </template>
 
@@ -71,15 +80,24 @@ export default class FlyingContextContainer extends Vue {
   position: fixed;
   z-index: 200;
   right: 0;
-  width: 60vw;
-  height: 80vh;
-  top: 10vh;
-  background: rgba($color: white, $alpha: .6);
-  border: 1px solid black;
+  width: 50vw;
+  height: 100%;
+  top: 0;
+  background: white;
   transition: right .2s;
+  padding: 2rem;
 
   &:not(.visible) {
     right: -80vw;
   }
+
+  .v-navigation-drawer__border {
+     background-color: rgba(0, 0, 0, .12);
+     left: 0;
+  }
+
+  .closeButton {
+    margin: -1rem 0 2rem -1rem;
+  }
 }
 </style>

package/src-admin/components/app/AppBarButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="project-buttons gap-3">
     <slot />
   </div>
 </template>
@@ -39,3 +39,10 @@ export default class AppBarButton extends Vue {
   }
 }
 </script>
+
+<style scoped>
+.project-buttons {
+  display: flex;
+  align-items: center;
+}
+</style>

package/src-admin/components/app/AppBarTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center gap-4">
+  <a-row gap="4">
     <v-btn
       v-if="back"
       fab
@@ -31,7 +31,7 @@
       </h3>
       <h2>{{ title }}</h2>
     </div>
-  </div>
+  </a-row>
 </template>
 
 <script>

package/src-admin/components/form/RemoveButton.vue

@@ -4,15 +4,12 @@
       <v-btn
         :class="'removeButton-' + dialogId"
         fab
-        small
+        x-small
         :color="(hover ? 'red' : 'grey lighten-3')"
         title="Löschen"
         @click="remove"
       >
-        <v-icon
-          :color="hover ? 'white' : '#999999'"
-          size="1.4rem"
-        >
+        <v-icon :color="hover ? 'white' : '#999999'">
           $trashCanIcon
         </v-icon>
       </v-btn>

package/src-admin/components/list/ListColumnHeader.vue

@@ -5,10 +5,27 @@
       @click="toggleSort"
     >
       <div
+        v-if="!icon"
         :class="['text', {active}]"
         v-html="text"
       />
 
+      <v-tooltip
+        v-else
+        bottom
+      >
+        <template #activator="{ on, attrs }">
+          <v-icon
+            :class="['mt-n1', {active}]"
+            v-bind="attrs"
+            v-on="on"
+          >
+            {{ icon }}
+          </v-icon>
+        </template>
+        <span>{{ text }}</span>
+      </v-tooltip>
+
       <svg
         v-if="order"
         :class="['sortIcon', direction, {active}]"
@@ -25,7 +42,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['text', 'order']
+  props: ['text', 'icon', 'order']
 })
 export default class ListColumnHeader extends Vue {
   get orderValue () {
@@ -92,6 +109,14 @@ export default class ListColumnHeader extends Vue {
   }
 }
 
+::v-deep .v-icon {
+  color: #AAAAAA !important;
+
+  &.active {
+    color: #666666 !important;
+  }
+}
+
 .text.active {
   color: #333333;
 }

package/src-admin/components/list/ListView.vue

@@ -36,7 +36,7 @@
             :class="{selectable: hasFlyingContext}"
             v-bind="getRowAttributes(model)"
             v-on="getRowListeners(model)"
-            @click="$emit('flyingContext', model)"
+            @click="emitFlyingContext(model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -113,6 +113,14 @@ export default class ListView extends Mixins(ListViewMixin) {
   get hasFlyingContext () {
     return !!this.$listeners.flyingContext
   }
+
+  emitFlyingContext (model) {
+    if (window.getSelection().toString()) { // do not open if text selected
+      console.log(window.getSelection().toString())
+      return
+    }
+    this.$emit('flyingContext', model)
+  }
 }
 </script>
 
@@ -120,6 +128,7 @@ export default class ListView extends Mixins(ListViewMixin) {
 <style lang="scss" scoped>
 .listView {
   max-width: 100%;
+  padding-top: .2rem; // unless, floating input labels might be cut
   overflow-x: auto;
   overflow-y: hidden;
 }

package/src-admin/components/model/ModelIcon.vue

@@ -1,8 +1,9 @@
 <template>
   <v-icon
     class="modelIcon"
-    :color="color"
+    :color="_color"
     v-bind="$attrs"
+    v-on="$listeners"
     v-text="icon"
   />
 </template>
@@ -11,7 +12,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['model', 'modelClass']
+  props: ['model', 'modelClass', 'color']
 })
 export default class ModelIcon extends Vue {
   get icon () {
@@ -22,7 +23,11 @@ export default class ModelIcon extends Vue {
     }
   }
 
-  get color () {
+  get _color () {
+    if (this.color) {
+      return this.color
+    }
+
     if (this.model) {
       return this.model.getIcon().color
     } else {

package/src-admin/config/vuetify.js

@@ -17,11 +17,8 @@ import {
   mdiMenuUp,
   mdiPencil,
   mdiPlus,
-  mdiThumbUpOutline,
-  mdiAccountGroup,
-  mdiShopping,
-  mdiMessage,
-  mdiPencilBoxMultiple
+  mdiPrinter,
+  mdiThumbUpOutline
 } from '@mdi/js'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
@@ -51,10 +48,7 @@ export default new Vuetify({
       arrowLeftIcon: mdiArrowLeft,
       caretDownIcon: mdiMenuDown,
       caretUpIcon: mdiMenuUp,
-      householdMembers: mdiAccountGroup,
-      shop: mdiShopping,
-      annotation: mdiMessage,
-      duplicates: mdiPencilBoxMultiple
+      printerIcon: mdiPrinter
     }
   },
   breakpoint: {