@afeefa/vue-app 0.0.71 → 0.0.74

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

@@ -1 +1 @@
-0.0.71
+0.0.74

package/package.json

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

package/src/components/APagination.vue

@@ -41,6 +41,7 @@ export default class APagination extends Vue {
     margin: 0;
     width: 28px;
     height: 28px;
+    white-space: nowrap;
   }
 }
 </style>

package/src/components/form/EditForm.vue

@@ -8,6 +8,7 @@
       :changed="changed"
       :valid="valid"
       :modelToEdit="modelToEdit"
+      :model="model"
     />
   </v-form>
 </template>
@@ -46,6 +47,8 @@ export default class EditForm extends Vue {
       this.modelToEdit = this.model.cloneForEdit()
     }
     this.lastJson = this.json
+
+    this.$emit('update:modelToEdit', this.modelToEdit)
   }
 
   /**

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

@@ -83,7 +83,7 @@ h3 {
 
 h2 {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.7rem;
 
   white-space: nowrap;
   overflow: hidden;

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

@@ -16,18 +16,21 @@
       </v-icon>
     </v-btn>
 
-    <v-icon
+    <v-hover
       v-if="$has.reset && changed"
-      :small="small"
-      :class="{disabled: !changed}"
-      :disabled="!changed"
-      color="#999999"
-      text
-      title="Formular zurücksetzen"
-      @click="$emit('reset')"
+      v-slot="{ hover }"
     >
-      {{ undoIcon }}
-    </v-icon>
+      <v-icon
+        :small="small"
+        :class="{disabled: !changed}"
+        :color="hover ? '#666666' : '#999999'"
+        text
+        title="Formular zurücksetzen"
+        @click="$emit('reset')"
+      >
+        {{ undoIcon }}
+      </v-icon>
+    </v-hover>
   </a-row>
 </template>
 

package/src-admin/components/pages/EditPage.vue

@@ -1,28 +1,36 @@
 <template>
-  <edit-form
-    ref="form"
-    :model="model"
-    :createModelToEdit="createModelToEdit"
-  >
-    <template #form="{modelToEdit, changed, valid}">
-      <slot
-        name="form"
-        :modelToEdit="modelToEdit"
-        :changed="changed"
-        :valid="valid"
-      />
+  <div>
+    <slot name="before-form" />
 
-      <app-bar-button>
-        <edit-form-buttons
+    <edit-form
+      ref="form"
+      :model="model"
+      :createModelToEdit="createModelToEdit"
+      v-on="$listeners"
+    >
+      <template #form="{modelToEdit, model, changed, valid}">
+        <slot
+          name="form"
+          :modelToEdit="modelToEdit"
+          :model="model"
           :changed="changed"
           :valid="valid"
-          :has="{reset: !!modelToEdit.id}"
-          @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
-          @reset="$refs.form.reset()"
         />
-      </app-bar-button>
-    </template>
-  </edit-form>
+
+        <app-bar-button>
+          <edit-form-buttons
+            :changed="changed"
+            :valid="valid"
+            :has="{reset: !!modelToEdit.id}"
+            @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
+            @reset="$refs.form.reset()"
+          />
+        </app-bar-button>
+      </template>
+    </edit-form>
+
+    <slot name="after-form" />
+  </div>
 </template>
 
 <script>