@afeefa/vue-app 0.0.150 → 0.0.151

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

@@ -1 +1 @@
-0.0.150
+0.0.151

package/package.json

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

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

@@ -2,7 +2,7 @@
   <div>
     <v-hover v-slot="{ hover }">
       <v-btn
-        :class="'a-btn-standard removeButton-' + dialogId"
+        :class="'a-btn-standard removeButton-' + removeButtonId"
         fab
         :color="(hover ? 'red' : 'grey lighten-3')"
         :title="title"
@@ -18,67 +18,36 @@
       </v-btn>
     </v-hover>
 
-    <a-dialog
-      :id="dialogId"
-      :anchor="'.removeButton-' + dialogId"
-      :active="protect ? removeKey === removeConfirmed : true"
-    >
-      <template v-if="protect">
-        <div>Bitte folgenden Key eingeben: <strong class="removeKey">{{ removeKey }}</strong></div>
-
-        <a-text-field
-          v-model="removeConfirmed"
-          label="Key"
-          :focus="true"
-          width="100"
-        />
-      </template>
-    </a-dialog>
+    <remove-dialog
+      ref="dialog"
+      :anchor="'.removeButton-' + removeButtonId"
+      v-bind="$attrs"
+      v-on="$listeners"
+    />
   </div>
 </template>
 
 
 <script>
 import { Component, Vue } from '@a-vue'
-import { DialogEvent } from '@a-vue/events'
 import { randomCssClass } from '@a-vue/utils/random'
 
 @Component({
-  props: ['iconSize', 'title', 'message', 'info', 'itemTitle', 'protect']
+  props: ['iconSize']
 })
-export default class EditPage extends Vue {
-  dialogId = randomCssClass(10)
-  removeKey = null
-  removeConfirmed = null
+export default class RemoveButton extends Vue {
+  removeButtonId = randomCssClass(10)
 
   get isSmall () {
     return Object.keys(this.$attrs).filter(k => k.match(/x-small|default|large|x-large/)).length === 0
   }
 
   async remove () {
-    if (this.protect) {
-      this.removeKey = [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')
-    }
-
-    const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
-      id: this.dialogId,
-      title: this.itemTitle + ' löschen?',
-      message: ['Soll ' + this.itemTitle + ' gelöscht werden?', this.message].filter(m => m).join('<br><br>'),
-      info: this.info,
-      yesButton: 'Löschen',
-      yesColor: 'red white--text'
-    }))
+    this.$refs.dialog.remove()
+  }
 
-    if (result === DialogEvent.RESULT_YES) {
-      this.$emit('remove')
-    }
+  get title () {
+    return this.$attrs.title || 'Löschen'
   }
 }
 </script>
-
-
-<style lang="scss" scoped>
-.removeKey {
-  user-select: none;
-}
-</style>

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

@@ -0,0 +1,71 @@
+<template>
+  <a-dialog
+    :id="dialogId"
+    :anchor="anchor"
+    :active="protect ? removeKey === removeConfirmed : true"
+  >
+    <template v-if="protect">
+      <div>Bitte folgenden Key eingeben: <strong class="removeKey">{{ removeKey }}</strong></div>
+
+      <a-text-field
+        v-model="removeConfirmed"
+        label="Key"
+        :focus="true"
+        width="100"
+      />
+    </template>
+  </a-dialog>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { DialogEvent } from '@a-vue/events'
+import { randomCssClass } from '@a-vue/utils/random'
+
+@Component({
+  props: ['anchor', 'title', 'message', 'info', 'itemTitle', {protect: false, dialog: true}]
+})
+export default class RemoveDialog extends Vue {
+  dialogId = randomCssClass(10)
+  removeKey = null
+  removeConfirmed = null
+
+  get isSmall () {
+    return Object.keys(this.$attrs).filter(k => k.match(/x-small|default|large|x-large/)).length === 0
+  }
+
+  async remove () {
+    if (!this.dialog) {
+      this.$emit('remove')
+      return
+    }
+
+    if (this.protect) {
+      this.removeKey = [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')
+    }
+
+    const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
+      id: this.dialogId,
+      title: this.itemTitle + ' löschen?',
+      message: ['Soll ' + this.itemTitle + ' gelöscht werden?', this.message].filter(m => m).join('<br><br>'),
+      info: this.info,
+      yesButton: 'Löschen',
+      yesColor: 'red white--text'
+    }))
+
+    if (result === DialogEvent.RESULT_YES) {
+      this.$emit('remove')
+    } else {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.removeKey {
+  user-select: none;
+}
+</style>

package/src-admin/components/index.js

@@ -10,6 +10,7 @@ import DetailTitle from './detail/DetailTitle'
 import FlyingContext from './FlyingContext.vue'
 import EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
+import RemoveDialog from './form/RemoveDialog'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListContent from './list/ListContent'
@@ -33,6 +34,7 @@ Vue.component('ListView', ListView)
 Vue.component('EditPage', EditPage)
 Vue.component('EditFormButtons', EditFormButtons)
 Vue.component('RemoveButton', RemoveButton)
+Vue.component('RemoveDialog', RemoveDialog)
 
 Vue.component('ModelCount', ModelCount)
 Vue.component('ModelIcon', ModelIcon)