@afeefa/vue-app 0.0.167 → 0.0.169

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

@@ -1 +1 @@
-0.0.167
+0.0.169

package/package.json

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

package/src/components/ADatePicker.vue

@@ -52,7 +52,7 @@ import { PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
 
 @Component({
-  props: ['value', 'validator', 'type', {dense: true, outlined: true}]
+  props: ['value', 'validator', 'type', {dense: true, outlined: true, focus: false}]
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   value_ = null
@@ -65,6 +65,8 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
   }
 
   mounted () {
+    this.setFocus()
+
     this.validate()
   }
 
@@ -74,6 +76,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     this.validate()
   }
 
+  @Watch('focus')
+  focusChanged () {
+    this.setFocus()
+  }
+
   get clearable () {
     if (this.validator && this.validator.getParam('filled')) {
       return false
@@ -292,6 +299,17 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     }
     return []
   }
+
+  setFocus (force = false) {
+    const focus = this.focus || force // set focus if this.focus or else if forced from outside
+    if (focus) {
+      // if run in a v-dialog, the dialog background would
+      // steal the focus without requestAnimationFrame
+      requestAnimationFrame(() => {
+        this.$el.querySelector('input').focus()
+      })
+    }
+  }
 }
 </script>
 

package/src/components/ATextArea.vue

@@ -10,18 +10,25 @@
 
 
 <script>
-import { Component, Vue } from '@a-vue'
+import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
-  props: ['validator', {dense: true, outlined: true}]
+  props: ['validator', {dense: true, outlined: true, focus: false}]
 })
 export default class ATextArea extends Vue {
   mounted () {
+    this.setFocus()
+
     if (this.validator) {
       this.$refs.input.validate(true)
     }
   }
 
+  @Watch('focus')
+  focusChanged () {
+    this.setFocus()
+  }
+
   get validationRules () {
     const label = this.$attrs.label
     return (this.validator && this.validator.getRules(label)) || []
@@ -33,6 +40,17 @@ export default class ATextArea extends Vue {
     }
     return this.validator.getParam('max') || false
   }
+
+  setFocus (force = false) {
+    const focus = this.focus || force // set focus if this.focus or else if forced from outside
+    if (focus) {
+      // if run in a v-dialog, the dialog background would
+      // steal the focus without requestAnimationFrame
+      requestAnimationFrame(() => {
+        this.$el.querySelector('textarea').focus()
+      })
+    }
+  }
 }
 </script>
 

package/src-admin/components/detail/DetailProperty.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <v-avatar
         v-if="_icon"
-        color="#EEEEEE"
+        color="#F4F4F4"
         size="2.5rem"
       >
         <v-icon
@@ -14,14 +14,19 @@
         </v-icon>
       </v-avatar>
 
-      <label :class="['label', {'label--withIcon': !!_icon}]">{{ label }}</label>
+      <div
+        v-else
+        class="iconPlaceholder"
+      />
+
+      <label class="label">{{ label }}</label>
 
       <div class="pl-2">
         <slot name="actionButton" />
       </div>
     </div>
 
-    <div :class="['content', {'content--withIcon': !!_icon}]">
+    <div class="content">
       <a-row
         vertical
         gap="6"
@@ -57,32 +62,34 @@ export default class DetailProperty extends Vue {
 <style lang="scss" scoped>
 .detailProperty {
   width: 100%;
+
   .header {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     height: 40px;
+    margin-bottom: .5rem;
 
     .v-avatar {
       flex: 0 0 40px;
       margin-right: 15px;
     }
 
+    .iconPlaceholder {
+      width: 55px;
+    }
+
     .label {
       display: block;
       text-transform: uppercase;
-      letter-spacing: 2px;
-      padding-left: 55px;
-      &--withIcon {
-        padding-left: 0;
-      }
+      letter-spacing: 3px;
+      border-bottom: 5px solid #CCCCCC;
+      color: #666666;
     }
   }
+
   .content {
     padding-left: 55px;
-    &--withIcon {
-      padding-left: 55px;
-    }
   }
 }
 </style>