@asd20/ui-next 1.0.11 → 2.0.1

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

@@ -67,19 +67,26 @@ export default {
     menuActive: function(val) {
       if (!val) {
         this.$nextTick(() => {
-          this.$refs.menuButton.$el.focus()
+          this.focusRef('menuButton')
         })
       }
     },
     searchActive: function(val) {
       if (!val) {
         this.$nextTick(() => {
-          this.$refs.searchButton.$el.focus()
+          this.focusRef('searchButton')
         })
       }
     },
   },
   methods: {
+    focusRef(refName) {
+      const ref = this.$refs[refName]
+      const focusTarget = ref?.$el || ref
+      if (typeof focusTarget?.focus === 'function') {
+        focusTarget.focus()
+      }
+    },
     toggleMenu(event) {
       this.$emit('update:menuActive', !this.menuActive)
       this.$emit('keyboardTriggeredLastAction', event.type === 'keyup')

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

@@ -105,7 +105,6 @@
 import scrollTrack from '../../../directives/scroll-track'
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
 import Asd20Button from '../../atoms/Asd20Button'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20SchoolHomepageVideoHeader',
@@ -160,9 +159,9 @@ export default {
     this.checkIsMobile()
     window.addEventListener('resize', this.checkIsMobile)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownResizeListener()
-  }),
+  },
   methods: {
     teardownResizeListener() {
       window.removeEventListener('resize', this.checkIsMobile)

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

@@ -126,7 +126,6 @@
 
 <script>
 import Asd20Messaging from '../../atoms/Asd20Messaging'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20SecondaryHeader',
@@ -220,9 +219,9 @@ export default {
     // Initial set
     this.scheduleParallaxUpdate()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownParallax()
-  }),
+  },
   methods: {
     teardownParallax() {
       this.disableParallax()

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

@@ -86,7 +86,6 @@ import Asd20Navbar from '../../../components/organisms/Asd20Navbar'
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
 // import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20SiteNavigation',
@@ -124,7 +123,7 @@ export default {
     menuOpen: function (val) {
       this.$nextTick(() => {
         if (val) {
-          this.$refs.siteMenu.$el.focus()
+          this.focusSiteMenu()
         }
       })
     },
@@ -136,10 +135,20 @@ export default {
     this.isLoaded = true
     window.addEventListener('resize', this.handleResize)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
-  }),
+  },
   methods: {
+    focusSiteMenu() {
+      const focusTarget =
+        this.$refs.siteMenu?.$refs?.menuContainer ||
+        this.$refs.siteMenu?.$el ||
+        this.$refs.siteMenu
+
+      if (typeof focusTarget?.focus === 'function') {
+        focusTarget.focus()
+      }
+    },
     onKeyboardToggleEvent(event) {
       this.keyboardToggleEvent = event
     },

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

@@ -558,7 +558,6 @@ import queryAiSite from '../../../helpers/queryAiSite'
 
 // Mixins
 import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 const DISTRICT_ORG_ID = '26eaf390-d8ab-11e9-a3a8-5de5bba4f125'
 const SEARCH_ROUTE_QUERY_KEYS = {
@@ -1193,9 +1192,9 @@ export default {
     }
   },
 
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownSearchLifecycle()
-  }),
+  },
 
   methods: {
     teardownSearchLifecycle() {
@@ -1963,17 +1962,19 @@ export default {
     },
 
     focusQuery() {
-      if (this.$refs.query && this.$refs.query.$el) {
-        const input = this.$refs.query.$el.querySelector('input')
-        if (input) input.focus()
-      }
+      const input = this.getQueryInput()
+      if (input) input.focus()
     },
 
     blurQuery() {
-      if (this.$refs.query && this.$refs.query.$el) {
-        const input = this.$refs.query.$el.querySelector('input')
-        if (input) input.blur()
-      }
+      const input = this.getQueryInput()
+      if (input) input.blur()
+    },
+
+    getQueryInput() {
+      const queryRef = this.$refs.query?.$el || this.$refs.query
+      if (typeof queryRef?.querySelector !== 'function') return null
+      return queryRef.querySelector('input')
     },
 
     getResultsViewportRef(tabLabel = this.currentTab) {

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

@@ -29,7 +29,7 @@
             <asd20-card
               v-bind="card"
               :card-type="cardType"
-              seperate-image
+              separate-image
               @click="$emit('select', card)"
               @keydown.tab.exact="nextCard"
               @keydown.tab.shift="prevCard"

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

@@ -33,7 +33,6 @@
 
 <script>
 import Asd20Tab from '../../../components/molecules/Asd20Tab'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 export default {
   name: 'Asd20TabBar',
 
@@ -69,11 +68,11 @@ export default {
       window.addEventListener('resize', this.onResize, { passive: true })
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof window !== 'undefined') {
       window.removeEventListener('resize', this.onResize)
     }
-  }),
+  },
 
   methods: {
     onScroll() {

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

@@ -151,7 +151,6 @@
 
 <script>
 import scrollTrack from '../../../directives/scroll-track'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 // import Asd20Button from '../../atoms/Asd20Button'
 
 export default {
@@ -202,9 +201,9 @@ export default {
     this.checkIsMobile()
     window.addEventListener('resize', this.checkIsMobile)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownResizeListener()
-  }),
+  },
   methods: {
     teardownResizeListener() {
       window.removeEventListener('resize', this.checkIsMobile)

package/src/components/templates/Asd20AppTemplate/index.vue

@@ -48,9 +48,9 @@
       <slot name="toolbar-start"></slot>
       <asd20-search-field
         v-if="searchable"
-        :value="keywords"
+        :model-value="keywords"
         :placeholder="searchPlaceholder"
-        @input="$emit('update:keywords', $event)"
+        @update:modelValue="$emit('update:keywords', $event)"
       />
       <asd20-button
         v-if="
@@ -80,9 +80,9 @@
       <slot name="tabs" />
     </asd20-tab-bar>
 
-    <mq-layout
+    <div
+      v-if="isDesktopMq"
       class="asd20-app-template__desktop-layout"
-      mq="lg+"
     >
       <div
         v-if="$slots.sidebar"
@@ -117,10 +117,10 @@
         </client-only>
         <slot />
       </div>
-    </mq-layout>
+    </div>
 
-    <mq-layout
-      :mq="['sm', 'md']"
+    <div
+      v-if="isMobileMq"
       class="asd20-app-template__mobile-layout"
     >
       <asd20-modal
@@ -146,7 +146,7 @@
       <div class="asd20-app-template__main">
         <slot />
       </div>
-    </mq-layout>
+    </div>
     <client-only>
       <asd20-notification-group
         :notifications="activeNotificationsByType.floating"
@@ -160,6 +160,7 @@
 
 <script>
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
+import { matchesMqQuery } from '../../../utils/responsive-mq'
 import Asd20AppHeader from '../../organisms/Asd20AppHeader'
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Icon from '../../atoms/Asd20Icon'
@@ -168,7 +169,6 @@ import Asd20SearchField from '../../molecules/Asd20SearchField'
 import Asd20TabBar from '../../organisms/Asd20TabBar'
 import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20NotificationGroup from '../../organisms/Asd20NotificationGroup'
-import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20AppTemplate',
@@ -181,7 +181,6 @@ export default {
     Asd20TabBar,
     Asd20Badge,
     Asd20NotificationGroup,
-    MqLayout,
   },
   mixins: [responsiveBreakpointMixin],
 
@@ -212,6 +211,14 @@ export default {
     sidebarOpen: false,
     zoomed: false,
   }),
+  computed: {
+    isDesktopMq() {
+      return matchesMqQuery(this.mq, 'lg+')
+    },
+    isMobileMq() {
+      return matchesMqQuery(this.mq, ['sm', 'md'])
+    },
+  },
   mounted() {
     this.zoomed = window.innerHeight <= 500
     window.addEventListener('resize', this.handleResize)

package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue

@@ -85,16 +85,16 @@
         </h2>
         <!-- <div class="search-header">
           <asd20-search-field
-            :value="keywords"
-            @input="$emit('update:keywords', $event)"
+            :model-value="keywords"
+            @update:modelValue="$emit('update:keywords', $event)"
             medium
           />
           <asd20-multiselect-input
             label="Categories"
             :taggable="false"
-            :value="selectedCategories"
+            :model-value="selectedCategories"
             :items="categoryOptions"
-            @input="$emit('update:selected-categories', $event)"
+            @update:modelValue="$emit('update:selected-categories', $event)"
             :hideLabel="true"
             placeholder="Filter by Category"
           />

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -85,18 +85,18 @@
         </h2>
         <div class="search-header">
           <asd20-search-field
-            :value="keywords"
+            :model-value="keywords"
             medium
-            @input="$emit('update:keywords', $event)"
+            @update:modelValue="$emit('update:keywords', $event)"
           />
           <asd20-multiselect-input
             label="Categories"
             :taggable="false"
-            :value="selectedCategories"
+            :model-value="selectedCategories"
             :items="categoryOptions"
             :hide-label="true"
             placeholder="Filter by Category"
-            @input="$emit('update:selected-categories', $event)"
+            @update:modelValue="$emit('update:selected-categories', $event)"
           />
         </div>
 
@@ -159,7 +159,7 @@
               :key="index"
               v-bind="card"
               zoom
-              seperate-image
+              separate-image
             ></asd20-card>
           </div>
           <div

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -96,19 +96,19 @@
           </h2>
           <div class="search-header">
             <asd20-search-field
-              :value="keywords"
+              :model-value="keywords"
               medium
-              @input="$emit('update:keywords', $event)"
+              @update:modelValue="$emit('update:keywords', $event)"
             />
             <asd20-multiselect-input
               label="Categories"
               :taggable="false"
-              :value="selectedCategories"
+              :model-value="selectedCategories"
               :items="categoryOptions"
               :hide-label="true"
               placeholder="Filter by Category"
               autocomplete="off"
-              @input="onCategorySelect"
+              @update:modelValue="onCategorySelect"
             />
           </div>
           <div v-if="cards.length < 1">

package/src/components/templates/Asd20ClubsTemplate/index.vue

@@ -103,16 +103,16 @@
         </div>
         <div class="search-header">
           <asd20-search-field
-            :value="keywords"
+            :model-value="keywords"
             medium
-            @input="$emit('update:keywords', $event)"
+            @update:modelValue="$emit('update:keywords', $event)"
           />
           <!-- <asd20-multiselect-input
             label="Categories"
             :taggable="false"
-            :value="selectedCategories"
+            :model-value="selectedCategories"
             :items="categoryOptions"
-            @input="$emit('update:selected-categories', $event)"
+            @update:modelValue="$emit('update:selected-categories', $event)"
           /> -->
         </div>
 

package/src/components/templates/Asd20SalaryCalculatorTemplate/index.vue

@@ -95,7 +95,6 @@
         class="years-selector"
         label="Years of Experience"
         icon="calendar"
-        :value="years"
         :items="yearsOfExperience"
       />
       <p class="selectionHeading">
@@ -106,7 +105,6 @@
         class="education-selector"
         label="Education Level"
         icon="school"
-        :value="educationLevel"
         :items="educationLevelOptions"
       />
       <asd20-button

package/src/components/templates/Asd20SearchAppTemplate/index.vue

@@ -4,8 +4,8 @@
       <slot name="toolbar-start"></slot>
       <asd20-search-field
         v-if="searchable"
-        :value="keywords"
-        @input="$emit('update:keywords', $event)"
+        :model-value="keywords"
+        @update:modelValue="$emit('update:keywords', $event)"
       />
       <asd20-button
         v-if="$slots.filters && (mq === 'sm' || mq === 'md')"
@@ -24,9 +24,9 @@
       <slot name="toolbar-end"></slot>
     </div>
 
-    <mq-layout
+    <div
+      v-if="isDesktopMq"
       class="asd20-search-app-template__desktop-layout"
-      mq="lg+"
     >
       <aside v-if="$slots.filters || $slots.aside">
         <h2 v-if="$slots.filters">
@@ -59,10 +59,10 @@
       <main v-if="$slots.results">
         <slot name="results" />
       </main>
-    </mq-layout>
+    </div>
 
-    <mq-layout
-      :mq="['sm', 'md']"
+    <div
+      v-if="isMobileMq"
       class="asd20-search-app-template__mobile-layout"
     >
       <asd20-modal
@@ -96,19 +96,19 @@
       </asd20-modal>
 
       <slot name="results" />
-    </mq-layout>
+    </div>
   </div>
 </template>
 
 <script>
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
+import { matchesMqQuery } from '../../../utils/responsive-mq'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import Asd20Modal from '../../molecules/Asd20Modal'
 import Asd20SearchField from '../../molecules/Asd20SearchField'
 import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
-import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20SearchAppTemplate',
@@ -119,7 +119,6 @@ export default {
     Asd20Badge,
     Asd20Icon,
     Asd20Button,
-    MqLayout,
   },
   mixins: [responsiveBreakpointMixin],
 
@@ -135,6 +134,14 @@ export default {
   data: () => ({
     filtersOpen: false,
   }),
+  computed: {
+    isDesktopMq() {
+      return matchesMqQuery(this.mq, 'lg+')
+    },
+    isMobileMq() {
+      return matchesMqQuery(this.mq, ['sm', 'md'])
+    },
+  },
 
   methods: {
     clearFilters() {

package/src/components/utils/FocusTrap.vue

@@ -10,7 +10,6 @@
 
 <script>
 import { createFocusTrap } from 'focus-trap'
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'FocusTrap',
@@ -53,9 +52,9 @@ export default {
       this.syncTrapState()
     })
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.disposeTrap()
-  }),
+  },
   methods: {
     syncTrapState() {
       if (!this.trap) return

package/src/components/utils/Intersect.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Intersect',
@@ -29,9 +28,9 @@ export default {
   updated() {
     this.refreshObserver()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.resetObserver()
-  }),
+  },
   methods: {
     getTarget() {
       const root = this.$refs.root

package/src/components/utils/MqLayout.vue

@@ -9,7 +9,6 @@
 
 <script>
 import { DEFAULT_MQ, getResponsiveMq, matchesMqQuery } from '../../utils/responsive-mq'
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'MqLayout',
@@ -43,10 +42,10 @@ export default {
     if (typeof window === 'undefined') return
     window.addEventListener('resize', this.updateMq)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof window === 'undefined') return
     window.removeEventListener('resize', this.updateMq)
-  }),
+  },
 
   methods: {
     updateMq() {

package/src/components/utils/Multiselect.vue

@@ -128,7 +128,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 function normalizeOption(option, optionLabel, trackBy) {
   if (option && typeof option === 'object') return option
@@ -263,9 +262,9 @@ export default {
       document.addEventListener('mousedown', this.handleDocumentMouseDown)
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.removeDocumentListener()
-  }),
+  },
   methods: {
     getOptionKey(option) {
       const normalized = normalizeOption(option, this.label, this.trackBy)

package/src/components/utils/Recaptcha.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 const RECAPTCHA_SCRIPT_ID = 'asd20-recaptcha-script'
 const RECAPTCHA_SCRIPT_SRC =
@@ -92,9 +91,9 @@ export default {
   mounted() {
     if (this.loadRecaptchaScript) this.ensureWidget()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.reset()
-  }),
+  },
   methods: {
     async getRecaptcha() {
       if (!isBrowser()) return null

package/src/directives/lazy-image.js

@@ -48,14 +48,16 @@ function mountLazyImage(el, binding = {}) {
   }
 
   el.setAttribute('src', TRANSPARENT_PIXEL)
-  el.__lazyImageObserver = new window.IntersectionObserver(
+  const observer = new window.IntersectionObserver(
     entries => {
+      if (el.__lazyImageObserver !== observer) return
       if (!entries.some(entry => entry.isIntersecting)) return
       loadLazyImage(el)
     },
     { rootMargin: '200px 0px' }
   )
-  el.__lazyImageObserver.observe(el)
+  el.__lazyImageObserver = observer
+  observer.observe(el)
 }
 
 export default {

package/src/helpers/mapPageQueryResultToPageTemplateProps.js

@@ -331,7 +331,7 @@ export default function mapPageQueryResultToPageTemplateProps(queryResult) {
 // In the comm-center project look at
 // /packages/configurations/helpers/*
 
-// TODO: Eventually move this function into a seperate package
+// TODO: Eventually move this function into a separate package
 // Make this package a part of the comm-center project or ui project
 // e.g. /packages/template-utilities
-// Possible you could combine the configurations packages, or create a seperate package
+// Possible you could combine the configurations packages, or create a separate package

package/src/mixins/inputComponentMixin.js

@@ -15,8 +15,7 @@ function omitKeys(source, keys) {
 export default {
   inheritAttrs: false,
   props: {
-    value: { default: '' },
-    modelValue: { default: undefined },
+    modelValue: { default: '' },
     label: { type: String, default: '' },
     hideLabel: { type: Boolean, default: false },
     helpText: { type: String, default: '' },
@@ -89,7 +88,7 @@ export default {
       return this.validationErrors.length === 0
     },
     resolvedValue() {
-      return this.modelValue !== undefined ? this.modelValue : this.value
+      return this.modelValue
     },
 
     computedId() {
@@ -133,9 +132,6 @@ export default {
     inputAttrs() {
       return omitKeys(this.$attrs, INPUT_MODEL_LISTENER_KEYS)
     },
-    legacyListeners() {
-      return omitKeys(this.$options._parentListeners || {}, ['input'])
-    },
   },
   watch: {
     resolvedValue(value) {
@@ -192,7 +188,6 @@ export default {
     input(event) {
       this.isDirty = true
       this.validate(event.target.value)
-      this.$emit('input', event.target.value)
       this.$emit('update:modelValue', event.target.value)
     },
   },