@asd20/ui 3.2.387 → 3.2.390

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.383",
+  "version": "3.2.389",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -13063,6 +13063,19 @@
       "integrity": "sha512-LI7v2mH02R55SekHYdv9pRHR9RajVNyIJ2N5IEkWbg7FT5ZmJ9Hw4mWxHeEUcd+dJo0QmzztHvDvWcc7prVFsw==",
       "dev": true
     },
+    "focus-trap": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+      "requires": {
+        "tabbable": "^5.3.3"
+      }
+    },
+    "focus-trap-vue": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-1.1.1.tgz",
+      "integrity": "sha512-N+M4d4uYymCogct417gUL7wWSMIW/oUcCicfg3eRdo+gz7jlQnIGwUwViFxPkKV7iyzpc81g6JeSxRWiYWU3eQ=="
+    },
     "follow-redirects": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
@@ -27968,6 +27981,11 @@
       "integrity": "sha512-R9N6uDkVsghHePKh1TEqbnLddO2IY25OcsksyFp/qBe7XYd0PVbKEWxhcdMhpLzE1I6skj5l4aEZ3CRxcbArlA==",
       "dev": true
     },
+    "tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
     "table": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.387",
+  "version": "3.2.390",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -33,6 +33,8 @@
     "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",
     "date-fns": "^1.30.1",
+    "focus-trap": "^6.9.4",
+    "focus-trap-vue": "^1.1.1",
     "js-cookie": "^2.2.1",
     "lodash-es": "^4.17.15",
     "swiper": "^5.4.5",

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-show="group.description || group.contactPhone || group.contactEmail" :class="classes">
+  <div
+    v-show="group.description || group.contactPhone || group.contactEmail"
+    :class="classes"
+  >
     <div  class="asd20-department-contact-card__header">
       <h2 v-show="group.description">{{ group.title }}</h2>
       <p v-show="group.description">{{ group.description }}</p>
@@ -143,7 +146,9 @@ export default {
   methods: {
     onItemClick(item) {
       console.log(item)
-      if (item.label === 'Send an Email') this.composingEmail = true
+      if (item.label === 'Send an Email') {
+        this.composingEmail = true
+      }
     },
   },
 }

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

@@ -102,8 +102,10 @@ export default {
       }
     },
     tag() {
-      if (this.actionable && this.to && this.to[0] === '/' && this.$router)
-        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'
       return 'div'
     },
@@ -128,11 +130,17 @@ export default {
 
   methods: {
     onClick(e) {
-      if (this.tag === 'button') {
+      if (this.tag === 'button' && this.$router) {
         e.preventDefault()
         this.$router.push(this.to)
       }
     },
+    // onClick(e) {
+    //   if (this.tag === 'button') {
+    //     e.preventDefault()
+    //     this.$router.push(this.to)
+    //   }
+    // },
   },
 }
 </script>

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

@@ -6,30 +6,33 @@
     @before-leave="transitioning = true"
   >
     <div v-if="open" :class="classes">
-      <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
-            v-if="dismissable"
-            size="md"
-            icon="close"
-            label="Close"
-            hide-label
-            transparent
-            @click.native="$emit('dismiss', false)"
-          />
-        </div>
-        <slot name="header" />
-        <div class="asd20-modal__content">
-          <slot name="default" :transitioning="transitioning" />
-          <slot name="main" />
-        </div>
-        <div class="asd20-modal__footer">
-          <slot name="footer" />
+      <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"
+              label="Close"
+              hide-label
+              transparent
+              @click.native="$emit('dismiss', false)"
+            />
+          </div>
+          <slot name="header" />
+          <div class="asd20-modal__content">
+            <slot name="default" :transitioning="transitioning" />
+            <slot name="main" />
+          </div>
+          <div class="asd20-modal__footer">
+            <slot name="footer" />
+          </div>
         </div>
-      </div>
+      </focus-trap>
     </div>
   </transition>
 </template>
@@ -37,9 +40,11 @@
 <script>
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
+import { FocusTrap } from 'focus-trap-vue'
+
 export default {
   name: 'Asd20Modal',
-  components: { Asd20Icon, Asd20Button },
+  components: { Asd20Icon, Asd20Button, FocusTrap },
   model: { prop: 'open', event: 'dismiss' },
   props: {
     open: { type: Boolean, default: false },
@@ -59,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>