@afeefa/vue-app 0.0.75 → 0.0.76

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

@@ -1 +1 @@
-0.0.75
+0.0.76

package/package.json

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

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">
@@ -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 () {

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)
   }
 

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 />
 

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,7 +57,7 @@ export default class StickyHeader extends Vue {
 #stickyHeader {
   position: sticky;
   top: -1px;
-  margin: -1rem -2rem 2rem;
+  margin: 0 -2rem 2rem;
   padding: 1rem 2rem;
 
   &:not(.visible) {