@afeefa/vue-app 0.0.75 → 0.0.78

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

@@ -1 +1 @@
-0.0.75
+0.0.78

package/package.json

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

package/src/api-resources/SaveAction.js

@@ -18,7 +18,7 @@ export class SaveAction extends ApiAction {
 
   processError (result) {
     eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-      headline: 'Die Daten konntent nicht gespeichert werden.',
+      headline: 'Die Daten konnten nicht gespeichert werden.',
       message: result.message,
       detail: result.detail
     }))

package/src/components/AAlert.vue

@@ -17,9 +17,10 @@
       <h3>{{ _headline }}</h3>
 
       <div v-html="message" />
+
       <div
         v-if="detail"
-        class="pt-3"
+        class="pt-1 details"
         v-html="detail"
       />
     </div>
@@ -126,7 +127,12 @@ export default class AAlert extends Vue {
 
       h3 {
         margin-bottom: .5rem;
-        font-size: 1.4rem;
+        font-size: 1.2rem;
+        line-height: 1.2;
+      }
+
+      .details {
+        font-size: .9rem;
       }
 
       .closeButton {

package/src/components/ADialog.vue

@@ -5,8 +5,9 @@
     :contentClass="_dialogId"
     transition="v-fade-transition"
     v-bind="$attrs"
+    persistent
+    no-click-animation
     @click:outside="cancel"
-    @keydown.esc="cancel"
   >
     <template #activator="{ on }">
       <div v-on="on">
@@ -18,7 +19,7 @@
       v-if="dialog"
       class="pb-1"
     >
-      <v-card-title>
+      <v-card-title class="pa-3">
         {{ title }}
       </v-card-title>
 
@@ -26,7 +27,7 @@
         <span v-html="message" />
       </v-card-text>
 
-      <v-card-text>
+      <v-card-text v-if="$slots.default">
         <slot :props="props" />
       </v-card-text>
 
@@ -59,11 +60,12 @@ import { DialogEvent } from './dialog/DialogEvent'
 import { PositionConfig } from '../services/PositionService'
 import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
 import { randomCssClass } from '../utils/random'
+import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
   props: ['id', 'anchor', 'active', 'payload']
 })
-export default class ADialog extends Mixins(UsesPositionServiceMixin) {
+export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEscMixin) {
   dialogId = randomCssClass(10)
 
   title = null
@@ -88,6 +90,11 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin) {
     this.$events.off(DialogEvent.SHOW, this.show)
   }
 
+  coe_cancelOnEsc () {
+    this.cancel()
+    return false // stop esc propagation
+  }
+
   @Watch('dialog')
   dialogChanged () {
     // called without event from activator
@@ -105,6 +112,13 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin) {
 
       this.calledViaEvent = false
     }
+
+    // register for esc
+    if (this.dialog) {
+      this.coe_watchCancel()
+    } else {
+      this.coe_unwatchCancel()
+    }
   }
 
   get _dialogId () {
@@ -195,11 +209,11 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin) {
 <style lang="scss" scoped>
 .v-card__title {
   background: #EEEEEE;
-  padding: .3rem 1rem !important;
+  padding: .6rem 1rem .3rem !important;
 }
 
 .v-card__text {
-  padding: .5rem 1rem !important;
+  padding: .8rem 1rem !important;
 }
 
 ::v-deep .v-dialog {

package/src/components/AModal.vue

@@ -7,10 +7,9 @@
     v-bind="$attrs"
     :contentClass="modalId"
     transition="v-fade-transition"
-    :persistent="true"
-    :no-click-animation="true"
+    persistent
+    no-click-animation
     @click:outside="cancel"
-    @keydown.esc="cancel"
   >
     <template #activator="{ on }">
       <div
@@ -41,11 +40,12 @@ import { UsesPositionServiceMixin } from '@a-vue/services/position/UsesPositionS
 import { randomCssClass } from '../utils/random'
 import { getZIndex } from 'vuetify/lib/util/helpers'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
+import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
   props: ['show', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
 })
-export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin) {
+export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin, CancelOnEscMixin) {
   modalId = randomCssClass(10)
 
   modal = false
@@ -79,6 +79,11 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
     }
   }
 
+  coe_cancelOnEsc () {
+    this.cancel()
+    return false // stop esc propagation
+  }
+
   /**
    * visiblility changes from outside
    * this will trigger the modal watcher
@@ -107,6 +112,14 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
     } else {
       this.removeTransientAnchor()
     }
+
+    // register for esc
+    if (this.modal) {
+      this.coe_watchCancel()
+    } else {
+      this.coe_unwatchCancel()
+    }
+
     this.$emit('update:show', this.modal)
   }
 
@@ -168,11 +181,11 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
 <style lang="scss" scoped>
 .v-card__title {
   background: #EEEEEE;
-  padding: .3rem 1rem !important;
+  padding: .6rem 1rem .3rem !important;
 }
 
 .v-card__text {
-  padding: .5rem 1rem !important;
+  padding: .8rem 1rem !important;
   color: inherit !important;
 }
 

package/src/components/ARadioGroup.vue

@@ -9,9 +9,12 @@
     <template v-for="option in options_">
       <v-radio
         :key="option.itemText"
-        :label="option.itemText"
         :value="option.itemValue"
-      />
+      >
+        <template #label>
+          <div v-html="option.itemText" />
+        </template>
+      </v-radio>
     </template>
   </v-radio-group>
 </template>
@@ -62,6 +65,7 @@ export default class ARadioGroup extends Vue {
 
 <style lang="scss" scoped>
 .v-input {
+  margin: 0;
 
   &:not(.hasLabel) {
     ::v-deep legend {

package/src/components/ATextField.vue

@@ -22,6 +22,8 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
   props: ['focus', 'debounce', 'validator', {password: false, number: false}]
 })
 export default class ATextField extends Mixins(ComponentWidthMixin) {
+  $hasOptions = ['counter']
+
   showPassword = false
 
   created () {
@@ -83,6 +85,10 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
   }
 
   get counter () {
+    if (!this.$has.counter) {
+      return false
+    }
+
     if (!this.validator) {
       return false
     }

package/src/components/form/FormFieldMixin.js

@@ -2,7 +2,7 @@ import { Component, Vue } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
 @Component({
-  props: ['name', 'label']
+  props: ['name', 'label', 'additionalRules']
 })
 export class FormFieldMixin extends Vue {
   get model () {
@@ -69,7 +69,18 @@ export class FormFieldMixin extends Vue {
     }
 
     if (field.hasOptions()) {
-      const options = field.getOptions()
+      let options = field.getOptions()
+
+      if (!Array.isArray(options)) {
+        options = Object.entries(options).map(([key, title]) => {
+          return {
+            itemText: title,
+            itemValue: key
+          }
+        })
+        return options
+      }
+
       return options.map((value, index) => {
         if (typeof value === 'object') { // object option
           return {
@@ -87,6 +98,12 @@ export class FormFieldMixin extends Vue {
   }
 
   get validator () {
+    const validator = this.field.getValidator()
+    if (this.additionalRules) {
+      this.additionalRules.forEach(validate => {
+        validator.addRule(validate)
+      })
+    }
     return this.field.getValidator()
   }
 

package/src/components/form/fields/FormFieldText.vue

@@ -55,6 +55,7 @@ export default class FormFieldText extends Mixins(FormFieldMixin) {
     }
 
     this.model[this.name] = value
+    this.$emit('input', value)
   }
 
   setInternalValue (value, reset = false) {

package/src/utils/debounce.js

@@ -11,6 +11,10 @@ export function debounce (callback, delay = 300, condition = () => true) {
       clearTimeout(timeout)
     }
 
+    /**
+     * fire immediately if condition falsy
+     * e.g. textfield content gets canceled using (x)
+     */
     if (!condition(...args)) {
       callback(...args)
       return

package/src-admin/components/App.vue

@@ -97,7 +97,7 @@
 
       <v-container
         fluid
-        class="pa-8 pt-2"
+        class="pa-8 pt-0"
       >
         <sticky-header />
 
@@ -230,6 +230,7 @@ export default class App extends Vue {
   left: 0;
   top: 0;
   padding: .2rem 1.1rem;
+  background-color: white;
 }
 
 .a-breadcrumbs {

package/src-admin/components/FlyingContext.vue

@@ -7,14 +7,15 @@
 </template>
 
 <script>
-import { Component, Watch, Vue } from '@a-vue'
+import { Component, Watch, Mixins } from '@a-vue'
 import { FlyingContextEvent } from '@a-vue/events'
 import { randomCssClass } from '@a-vue/utils/random'
+import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
   props: [{show: false}]
 })
-export default class FlyingContext extends Vue {
+export default class FlyingContext extends Mixins(CancelOnEscMixin) {
   isVisible = false
   contextId = randomCssClass(10)
 
@@ -44,8 +45,10 @@ export default class FlyingContext extends Vue {
     if (this.isVisible) {
       const container = this.getSidebarContainer()
       container.appendChild(el)
+      this.coe_watchCancel() // show context -> watch esc
     } else {
       this.$el.appendChild(el)
+      this.coe_unwatchCancel() // hide context -> do not watch esc any more
     }
   }
 
@@ -62,11 +65,17 @@ export default class FlyingContext extends Vue {
   onHide () {
     if (this.isVisible) {
       this.$el.appendChild(this.getContent())
+      this.coe_unwatchCancel() // hide context -> do not watch esc any more
       this.isVisible = false
       this.$emit('hide')
     }
   }
 
+  coe_cancelOnEsc () {
+    this.onHide()
+    return false // stop esc propagation
+  }
+
   getContent () {
     return document.querySelector('.' + this.contextId)
   }

package/src-admin/components/StickyHeader.vue

@@ -57,8 +57,9 @@ export default class StickyHeader extends Vue {
 #stickyHeader {
   position: sticky;
   top: -1px;
-  margin: -1rem -2rem 2rem;
+  margin: 0 -2rem 2rem;
   padding: 1rem 2rem;
+  background-color: white;
 
   &:not(.visible) {
     display: none !important;

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

@@ -3,18 +3,32 @@
     gap="1"
     v-bind="$attrs"
   >
-    <v-btn
-      fab
-      small
-      :disabled="($has.reset && !changed) || !valid"
-      color="green white--text"
-      title="Speichern"
-      @click="$emit('save')"
-    >
-      <v-icon>
-        $checkIcon
-      </v-icon>
-    </v-btn>
+    <v-tooltip bottom>
+      <template #activator="{ on }">
+        <div v-on="disabled ? on : null">
+          <v-btn
+            fab
+            small
+            :disabled="disabled"
+            color="green white--text"
+            title="Speichern"
+            @click="$emit('save')"
+          >
+            <v-icon>
+              $checkIcon
+            </v-icon>
+          </v-btn>
+        </div>
+      </template>
+      <span v-if="disabled">
+        <template v-if="!valid">
+          Daten berichtigen,<br>um zu speichern
+        </template>
+        <template v-else>
+          Daten ändern,<br>um zu speichern
+        </template>
+      </span>
+    </v-tooltip>
 
     <v-hover
       v-if="$has.reset && changed"
@@ -49,12 +63,9 @@ export default class EditFormButtons extends Vue {
   $hasOptions = ['reset']
 
   undoIcon = mdiRotateLeft
-}
-</script>
-
 
-<style lang="scss" scoped>
-.v-icon--disabled {
-  opacity: .3;
+  get disabled () {
+    return (this.$has.reset && !this.changed) || !this.valid
+  }
 }
-</style>
+</script>

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

@@ -2,14 +2,14 @@
   <div>
     <v-hover v-slot="{ hover }">
       <v-btn
-        :class="'removeButton-' + dialogId"
+        :class="'a-btn-standard removeButton-' + dialogId"
         fab
         x-small
         :color="(hover ? 'red' : 'grey lighten-3')"
-        title="Löschen"
+        :title="title"
         @click="remove"
       >
-        <v-icon :color="hover ? 'white' : '#999999'">
+        <v-icon class="white--hover">
           $trashCanIcon
         </v-icon>
       </v-btn>
@@ -17,7 +17,7 @@
 
     <a-dialog
       :id="dialogId"
-      :anchor="[document, '.removeButton-' + dialogId]"
+      :anchor="'.removeButton-' + dialogId"
       :active="protect ? removeKey === removeConfirmed : true"
     >
       <template v-if="protect">
@@ -41,11 +41,10 @@ import { DialogEvent } from '@a-vue/events'
 import { randomCssClass } from '@a-vue/utils/random'
 
 @Component({
-  props: ['itemTitle', 'protect']
+  props: ['title', 'itemTitle', 'protect']
 })
 export default class EditPage extends Vue {
   dialogId = randomCssClass(10)
-  document = document
   removeKey = null
   removeConfirmed = null
 

package/src-admin/styles.scss

@@ -28,11 +28,39 @@
   }
 }
 
+.theme--light.v-btn.a-btn-standard {
+  background-color: #E9E9E9;
+
+  &:not(:hover) {
+    background-color: #EEEEEE !important;
+    border-color: #EEEEEE !important;
+  }
+
+  span,
+  .v-icon {
+    color: grey !important;
+  }
+
+  &:hover {
+    span,
+    .v-icon {
+      &.white--hover {
+        color: white !important;
+      }
+    }
+  }
+}
+
 .theme--light.v-btn.v-btn--has-bg {
   background-color: #E9E9E9;
 }
 
+.theme--light.v-btn:focus::before {
+  opacity: .08;
+}
+
 .theme--light.v-btn.v-btn--disabled,
+.theme--light.v-btn.v-btn--disabled span,
 .theme--light.v-btn.v-btn--disabled .v-icon,
 .theme--light.v-btn.v-btn--disabled .v-btn__loading {
   color: white !important;