@asd20/ui 3.2.389 → 3.2.392

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.388",
+  "version": "3.2.389",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.389",
+  "version": "3.2.392",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/molecules/Asd20DepartmentContactCard/index.vue

@@ -21,7 +21,6 @@
     <asd20-compose-email-modal
       v-if="group"
       :open="composingEmail"
-      v-model="isActive"
       :recipient-id="group.id"
       @dismiss="composingEmail = false"
     />
@@ -43,7 +42,6 @@ export default {
   },
   data: () => ({
     composingEmail: false,
-    isActive: false,
   }),
   computed: {
     classes() {
@@ -150,7 +148,6 @@ export default {
       console.log(item)
       if (item.label === 'Send an Email') {
         this.composingEmail = true
-        this.isActive = true
       }
     },
   },

package/src/components/molecules/Asd20ListItem/index.vue

@@ -102,11 +102,16 @@ export default {
       }
     },
     tag() {
-      if (this.actionable)
-      return 'button'
+      // if (this.actionable)
+      // return 'button'
       // if (this.actionable && this.to && this.to[0] === '/' && this.$router)
       //   return 'button'
-      if (this.actionable && this.hrefValue) return 'a'
+      if (this.actionable && this.hrefValue) {
+        return 'a'
+      }
+      if (this.actionable) {
+        return 'button'
+      }
       return 'div'
     },
     hrefAttr() {

package/src/components/molecules/Asd20Modal/index.vue

@@ -6,13 +6,14 @@
     @before-leave="transitioning = true"
   >
     <div v-if="open" :class="classes">
-      <focus-trap :isActive="isActive">
+      <focus-trap :open="open">
         <div class="asd20-modal">
           <div v-if="title || $slots.title" class="asd20-modal__header">
             <asd20-icon v-if="icon" :name="icon" size="md" />
             <h2>{{ title }}<slot name="title" /></h2>
 
             <asd20-button
+              ref="closeButton"
               v-if="dismissable"
               size="md"
               icon="close"
@@ -20,7 +21,6 @@
               hide-label
               transparent
               @click.native="$emit('dismiss', false)"
-              @click="isActive = false"
             />
           </div>
           <slot name="header" />
@@ -38,11 +38,9 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
 import { FocusTrap } from 'focus-trap-vue'
-Vue.use(FocusTrap)
 
 export default {
   name: 'Asd20Modal',
@@ -57,7 +55,6 @@ export default {
   },
   data: () => ({
     transitioning: false,
-    isActive: false,
   }),
   computed: {
     classes() {
@@ -67,6 +64,26 @@ export default {
       }
     },
   },
+  watch: {
+    open: function(newVal) {
+      if (newVal) {
+        this.setFocus()
+      }
+    },
+  },
+  methods: {
+    setFocus() {
+      this.$nextTick(() => {
+        this.$refs.closeButton.$el.focus()
+      })
+    },
+  },
+
+  mounted() {
+    if (this.open === true) {
+      this.setFocus()
+    }
+  },
 }
 </script>
 

package/src/components/organisms/Asd20ComposeEmailModal/index.vue

@@ -1,7 +1,6 @@
 <template>
   <asd20-modal
     :open="open"
-    :isActive="isActive"
     title="Send an Email"
     icon="email"
     dismissable
@@ -78,7 +77,6 @@ export default {
     },
     composing: false,
     sending: false,
-    isActive: false,
     emailMessage: {
       senderName: '',
       senderEmail: '',

package/src/components/organisms/Asd20PeopleList/index.vue

@@ -5,13 +5,12 @@
         v-for="(person, index) in mappedPeople"
         :key="index"
         v-bind="person"
-        @click.native="()=>{onPersonClick(person); isActive = true}"
+        @click.native="onPersonClick(person)"
       />
     </asd20-list>
     <Asd20PersonModal
       :person="selectedPerson"
       :open="!!selectedPerson"
-      :isActive="isActive"
       @dismiss="selectedPerson = null"
       :force-display-email="forceDisplayEmail"
     />
@@ -46,7 +45,6 @@ export default {
   data: () => ({
     // loadedPeople: [],
     selectedPerson: null,
-    isActive: false,
   }),
 
   methods: {

package/src/components/organisms/Asd20PersonModal/index.vue

@@ -2,7 +2,6 @@
   <asd20-modal
     v-if="person"
     :open="open"
-    :isActive="isActive"
     title="Staff Details"
     icon="staff"
     dismissable
@@ -46,12 +45,7 @@
           icon-size="lg"
           label="Send an Email"
           actionable
-          @click.native="
-            ()=>{
-              composingEmail = true;
-              isActive = true
-            }
-          "
+          @click.native="composingEmail = true"
         />
         <Asd20ListItem
           v-show="person.email && !useEmailForm"
@@ -84,7 +78,6 @@
     <asd20-compose-email-modal
       v-show="person"
       :open="open && composingEmail"
-      :isActive="isActive"
       :recipient-id="person.id"
       @dismiss="composingEmail = false"
     />
@@ -115,7 +108,6 @@ export default {
   },
   data: () => ({
     composingEmail: false,
-    isActive: false,
   }),
   computed: {
     initials() {