@asd20/ui-next 1.0.11 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+# [2.0.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.11...ui-next-v2.0.0) (2026-03-27)
+
+
+* feat!: finalize Vue 3-only shared input contract ([8a4652e](https://github.com/academydistrict20/asd20-ui-next/commit/8a4652eaa09378b86a574951fa3996c000b12bb8))
+
+
+### BREAKING CHANGES
+
+* @asd20/ui-next now publishes a Vue 3-only peer baseline and the shared input primitives no longer support the legacy value/input API. Asd20CheckboxList is now modelValue-only and no longer emits update:checkedValues.
+
 ## [1.0.11](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.10...ui-next-v1.0.11) (2026-03-26)
 
 ## [1.0.10](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.9...ui-next-v1.0.10) (2026-03-26)

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.11",
+  "version": "2.0.0",
   "private": false,
-  "description": "ASD20 UI component library migration workspace.",
+  "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -45,6 +45,6 @@
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
-    "vue": "^2.6.14 || ^3.0.0"
+    "vue": "^3.0.0"
   }
 }

package/src/components/atoms/Asd20Checkbox/index.vue

@@ -40,8 +40,7 @@ export default {
   name: 'Asd20CheckboxIcon',
   components: { Asd20Badge },
   props: {
-    value: { type: Boolean, default: false },
-    modelValue: { type: Boolean, default: undefined },
+    modelValue: { type: Boolean, default: false },
     label: { type: String, default: '' },
     description: { type: String, default: '' },
     count: { type: Number, default: 0 },
@@ -57,7 +56,7 @@ export default {
   },
   computed: {
     resolvedValue() {
-      return typeof this.modelValue === 'boolean' ? this.modelValue : this.value
+      return this.modelValue
     },
     checkboxAttrs() {
       return {
@@ -83,7 +82,6 @@ export default {
   methods: {
     toggle() {
       const nextValue = !this.resolvedValue
-      this.$emit('input', nextValue)
       this.$emit('update:modelValue', nextValue)
       this.toggleIcon = nextValue
     },

package/src/components/atoms/Asd20CountUp/index.vue

@@ -5,7 +5,6 @@
 <script>
 import _isFunction from 'lodash/isFunction'
 import { CountUp } from 'countup.js'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   __countup__: CountUp,
@@ -35,9 +34,9 @@ export default {
   mounted() {
     this.init()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.uninit()
-  }),
+  },
   methods: {
     init() {
       if (this.instance) {

package/src/components/atoms/Asd20Icon/index.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { defineAsyncComponent, markRaw } from 'vue'
 import camelCase from 'lodash/camelCase'
 import iconLoaders from '../icons/registry'
 import createComponentInstanceId from '../../../utils/createComponentInstanceId'
@@ -40,64 +41,11 @@ function normalizeIconName(name) {
     .toLowerCase()
 }
 
-function resolveDefineAsyncComponent() {
-  let vueRuntime = {}
-
-  try {
-    vueRuntime = require('vue')
-  } catch {
-    return null
-  }
-
-  if (typeof vueRuntime.defineAsyncComponent === 'function') {
-    return vueRuntime.defineAsyncComponent
-  }
-
-  if (
-    vueRuntime.default &&
-    typeof vueRuntime.default.defineAsyncComponent === 'function'
-  ) {
-    return vueRuntime.default.defineAsyncComponent
-  }
-
-  return null
-}
-
-function resolveMarkRaw() {
-  let vueRuntime = {}
-
-  try {
-    vueRuntime = require('vue')
-  } catch {
-    return null
-  }
-
-  if (typeof vueRuntime.markRaw === 'function') {
-    return vueRuntime.markRaw
-  }
-
-  if (
-    vueRuntime.default &&
-    typeof vueRuntime.default.markRaw === 'function'
-  ) {
-    return vueRuntime.default.markRaw
-  }
-
-  return null
-}
-
 function createAsyncComponent(loader) {
-  const defineAsyncComponent = resolveDefineAsyncComponent()
-
-  if (typeof defineAsyncComponent === 'function') {
-    return defineAsyncComponent({
-      loader,
-      suspensible: false,
-    })
-  }
-
-  // Vue 2 accepts the loader function directly for async components.
-  return loader
+  return defineAsyncComponent({
+    loader,
+    suspensible: false,
+  })
 }
 
 export default {
@@ -174,11 +122,7 @@ export default {
         return
       }
 
-      const asyncComponent = createAsyncComponent(this.loader)
-      const markRaw = resolveMarkRaw()
-
-      this.iconTemplate =
-        typeof markRaw === 'function' ? markRaw(asyncComponent) : asyncComponent
+      this.iconTemplate = markRaw(createAsyncComponent(this.loader))
     },
   },
 }

package/src/components/atoms/Asd20MultiselectInput/index.vue

@@ -89,6 +89,12 @@ export default {
   name: 'Asd20MultiselectInput',
   components: { Asd20Icon, Multiselect },
   mixins: [inputComponentMixin],
+  props: {
+    modelValue: {
+      type: [Array, Object, String, Number, Boolean],
+      default: () => [],
+    },
+  },
   data: () => ({
     taggedItems: [],
   }),
@@ -148,7 +154,6 @@ export default {
   },
   methods: {
     emitValue(value) {
-      this.$emit('input', value)
       this.$emit('update:modelValue', value)
     },
     getItemKey(item) {

package/src/components/atoms/Asd20SelectInput/index.vue

@@ -14,7 +14,6 @@
       <div class="asd20-select-input__select-wrapper">
         <select
           v-bind="mergedInputAttrs"
-          v-on="legacyListeners"
           @input="input"
         >
           <option
@@ -59,6 +58,9 @@ export default {
   name: 'Asd20SelectInput',
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
+  props: {
+    modelValue: { default: '' },
+  },
   computed: {
     mergedInputAttrs() {
       return this.mergeInputAttrs({

package/src/components/atoms/Asd20WidgetViewport/index.vue

@@ -37,7 +37,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20Viewport',
@@ -83,9 +82,9 @@ export default {
     this.checkForOverflow()
     window.addEventListener('resize', this.checkForOverflow)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.checkForOverflow)
-  }),
+  },
   methods: {
     checkForOverflow() {
       const viewport = this.$refs.viewport

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

@@ -71,7 +71,6 @@ import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import createComponentInstanceId from '../../../utils/createComponentInstanceId'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 const FOCUSABLE_SELECTOR = [
   'a[href]',
@@ -125,9 +124,9 @@ export default {
   updated() {
     this.syncCollapsedContentInteractivity()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.restoreCollapsedContentInteractivity()
-  }),
+  },
   methods: {
     toggleOpen: function() {
       this.open = !this.open

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

@@ -292,6 +292,7 @@ export default {
     reversed: { type: Boolean, default: false },
     pinned: { type: Boolean, default: false },
     zoom: { type: Boolean, default: false },
+    separateImage: { type: Boolean, default: false },
     seperateImage: { type: Boolean, default: false },
     expandedHeader: { type: Boolean, default: false },
     expandedDescription: { type: Boolean, default: false },
@@ -316,6 +317,8 @@ export default {
       return truncate(strippedDescription, { length: 150, separator: /,? +/ })
     },
     classes() {
+      const hasSeparateImage = this.separateImage || this.seperateImage
+
       return {
         'asd20-card': true,
         'asd20-card--without-image': !this.image || this.noCoverImage,
@@ -323,7 +326,8 @@ export default {
         'asd20-card--selected': this.selected,
         'asd20-card--reversed': this.reversed,
         'asd20-card--zoom': this.zoom,
-        'asd20-card--seperate-image': this.seperateImage,
+        'asd20-card--separate-image': hasSeparateImage,
+        'asd20-card--seperate-image': hasSeparateImage,
         'asd20-card--pinned': this.pinned,
         'asd20-card--emphasized-date': this.emphasizedDate,
         'asd20-card--expanded-header': this.expandedHeader,
@@ -801,7 +805,8 @@ export default {
     }
   }
 
-  &--seperate-image:not(.asd20-card--without-image) {
+  &--seperate-image:not(.asd20-card--without-image),
+  &--separate-image:not(.asd20-card--without-image) {
     transform: rotate(0deg);
     justify-content: flex-start;
     background: var(--website-card__background-color);
@@ -835,14 +840,14 @@ export default {
     }
   }
 
-  &--with-image:not(.asd20-card--seperate-image),
+  &--with-image:not(.asd20-card--seperate-image):not(.asd20-card--separate-image),
   &--without-image.asd20-card--reversed {
     .asd20-card__title {
       color: var(--website-card__reverse-foreground-color);
     }
   }
 
-  &--with-image:not(.asd20-card--seperate-image) {
+  &--with-image:not(.asd20-card--seperate-image):not(.asd20-card--separate-image) {
     min-height: 30vh;
     .asd20-card__content {
       background: linear-gradient(
@@ -854,7 +859,7 @@ export default {
   }
 
   &--reversed,
-  &--with-image:not(.asd20-card--seperate-image) {
+  &--with-image:not(.asd20-card--seperate-image):not(.asd20-card--separate-image) {
     color: var(--website-card__reverse-foreground-color);
   }
   &--reversed {

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

@@ -10,9 +10,9 @@
         :label="option.text"
         :count="option.count"
         :description="option.description"
-        :value="resolvedCheckedValues.indexOf(option.value) > -1"
+        :model-value="resolvedCheckedValues.indexOf(option.value) > -1"
         :radio="radio"
-        @input="onInput($event, option)"
+        @update:modelValue="onInput($event, option)"
       />
       <slot
         name="item"
@@ -29,20 +29,14 @@ import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 export default {
   name: 'Asd20CheckboxList',
   components: { Asd20Checkbox },
-  model: {
-    prop: 'checkedValues',
-  },
   props: {
-    checkedValues: { type: Array, default: () => [] },
-    modelValue: { type: Array, default: undefined },
+    modelValue: { type: Array, default: () => [] },
     options: { type: Array, default: () => [] },
     radio: { type: Boolean, default: false },
   },
   computed: {
     resolvedCheckedValues() {
-      return Array.isArray(this.modelValue)
-        ? this.modelValue
-        : this.checkedValues
+      return this.modelValue
     },
   },
   methods: {
@@ -57,9 +51,6 @@ export default {
         )
       }
       this.$emit('change', { option, checked })
-
-      this.$emit('input', modifiedCheckedValues, option, checked)
-      this.$emit('update:checkedValues', modifiedCheckedValues)
       this.$emit('update:modelValue', modifiedCheckedValues)
     },
   },

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

@@ -14,7 +14,6 @@
 
       <input
         v-bind="mergedInputAttrs"
-        v-on="legacyListeners"
         @input="input"
       />
 
@@ -43,6 +42,9 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  props: {
+    modelValue: { default: null },
+  },
   computed: {
     mergedInputAttrs() {
       return this.mergeInputAttrs({
@@ -56,7 +58,6 @@ export default {
     input(event) {
       this.isDirty = true
       this.validate(event.target.value)
-      this.$emit('input', event.target.files)
       this.$emit('update:modelValue', event.target.files)
     },
   },

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

@@ -43,14 +43,13 @@ export default {
   name: 'Asd20SearchField',
   components: { Asd20Icon },
   props: {
-    value: { type: String, default: '' },
-    modelValue: { type: String, default: undefined },
+    modelValue: { type: String, default: '' },
     extra: { type: String, default: '' },
     idTag: { type: String, default: '' },
     large: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Search' },
   },
-  emits: ['input', 'update:modelValue', 'click', 'focusin', 'keyup'],
+  emits: ['update:modelValue', 'click', 'focusin', 'keyup'],
   computed: {
     classes() {
       return {
@@ -58,13 +57,12 @@ export default {
       }
     },
     resolvedValue() {
-      return this.modelValue !== undefined ? this.modelValue : this.value
+      return this.modelValue
     },
   },
   methods: {
     input(event) {
       const value = event.target.value
-      this.$emit('input', value)
       this.$emit('update:modelValue', value)
     },
   },

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

@@ -60,7 +60,6 @@
 
 <script>
 import Asd20Button from '../../atoms/Asd20Button'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 export default {
   name: 'Asd20Share',
 
@@ -79,14 +78,14 @@ export default {
       document.addEventListener('click', this.onDocumentClick)
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof document !== 'undefined') {
       document.removeEventListener('click', this.onDocumentClick)
     }
     if (this.toastTimeoutId) {
       clearTimeout(this.toastTimeoutId)
     }
-  }),
+  },
 
   methods: {
     share() {

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

@@ -27,18 +27,17 @@ export default {
 
   props: {
     label: { type: String, default: '' },
-    value: { type: Number, default: 50 },
-    modelValue: { type: Number, default: undefined },
+    modelValue: { type: Number, default: 50 },
     progressColor: { type: String, default: '' },
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
   },
-  emits: ['input', 'update:modelValue'],
+  emits: ['update:modelValue'],
 
   computed: {
     resolvedValue() {
-      return typeof this.modelValue === 'number' ? this.modelValue : this.value
+      return this.modelValue
     },
     percentage() {
       if (this.max === 0) return '0%'
@@ -48,7 +47,6 @@ export default {
   methods: {
     input(event) {
       const value = Number(event.target.value)
-      this.$emit('input', value)
       this.$emit('update:modelValue', value)
     },
   },

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

@@ -65,7 +65,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20Swipe',
@@ -140,9 +139,9 @@ export default {
   mounted() {
     this.init()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.clearAutoplayTimer()
-  }),
+  },
 
   methods: {
     clearAutoplayTimer() {

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

@@ -48,7 +48,6 @@ import {
 } from 'swiper/js/swiper.esm'
 import merge from 'lodash/merge'
 import 'swiper/css/swiper.css'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 // see http://idangero.us/swiper/api/#custom-build
 Swiper.use([A11y, Keyboard, Pagination, Navigation, Mousewheel])
@@ -85,9 +84,9 @@ export default {
   updated() {
     this.swiper.update()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.destroySwiper()
-  }),
+  },
 
   methods: {
     destroySwiper() {

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

@@ -18,7 +18,6 @@
 
       <textarea
         v-bind="mergedInputAttrs"
-        v-on="legacyListeners"
         @input="input"
       />
 
@@ -48,8 +47,7 @@ export default {
   mixins: [inputComponentMixin],
   inheritAttrs: false,
   props: {
-    value: { type: String, default: '' },
-    label: { type: String, default: '' },
+    modelValue: { type: String, default: '' },
   },
   computed: {
     mergedInputAttrs() {

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

@@ -14,7 +14,6 @@
 
       <input
         v-bind="mergedInputAttrs"
-        v-on="legacyListeners"
         @input="input"
       />
 
@@ -43,6 +42,9 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: '' },
+  },
   computed: {
     mergedInputAttrs() {
       return this.mergeInputAttrs({

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

@@ -103,7 +103,6 @@ import Asd20SearchField from '../../molecules/Asd20SearchField'
 import Asd20SiteSearch from '../Asd20SiteSearch'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 const SEARCH_SESSION_STORAGE_KEY = 'asd20-site-search-state-v1'
 const SEARCH_STATE_SYNC_EVENT = 'asd20-site-search:state-sync'
@@ -187,9 +186,9 @@ export default {
       window.addEventListener('focus', this.onWindowFocus, { passive: true })
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownWindowBindings()
-  }),
+  },
   methods: {
     teardownWindowBindings() {
       if (typeof document !== 'undefined') {

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',
@@ -136,9 +135,9 @@ export default {
     this.isLoaded = true
     window.addEventListener('resize', this.handleResize)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
-  }),
+  },
   methods: {
     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() {

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)
     },
   },

package/src/mixins/responsiveBreakpointMixin.js

@@ -1,5 +1,4 @@
 import { DEFAULT_MQ, getResponsiveMq } from '../utils/responsive-mq'
-import createLegacyDestroyHooks from '../utils/createLegacyDestroyHooks'
 
 export default {
   data: () => ({
@@ -20,10 +19,10 @@ export default {
     if (typeof window === 'undefined') return
     window.addEventListener('resize', this.updateResponsiveMq)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof window === 'undefined') return
     window.removeEventListener('resize', this.updateResponsiveMq)
-  }),
+  },
 
   methods: {
     updateResponsiveMq() {

package/src/utils/createLegacyDestroyHooks.js

@@ -1,10 +0,0 @@
-export default function createLegacyDestroyHooks(cleanup) {
-  return {
-    beforeDestroy() {
-      cleanup.call(this)
-    },
-    beforeUnmount() {
-      cleanup.call(this)
-    },
-  }
-}