@asd20/ui-next 1.0.10 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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)
 
 ## [1.0.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.8...ui-next-v1.0.9) (2026-03-23)

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.10",
+  "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/Asd20ActionMenu/index.vue

@@ -23,18 +23,6 @@ export default {
     zoomed: { type: Boolean, default: false },
     emptyNav: { type: Boolean, default: false },
   },
-
-  computed: {
-    hidden() {
-      return (this.$store && this.$store.state && this.$store.state.scrolling) || false
-    },
-    classes() {
-      return {
-        'action-menu__fab--hidden': this.hidden,
-        'action-menu__fab--open': this.open,
-      }
-    },
-  },
 }
 </script>
 

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

@@ -79,6 +79,15 @@
           :active="expanded"
           :inline="true"
           :show-contacts="false"
+          :pages="pages"
+          :files="files"
+          :groups="groups"
+          :include-district-results="includeDistrictResults"
+          :search-language-code="searchLanguageCode"
+          :query-pages-handler="queryPagesHandler"
+          :query-files-handler="queryFilesHandler"
+          :query-groups-handler="queryGroupsHandler"
+          :query-ai-site-handler="queryAiSiteHandler"
           :organization="organization"
           :organization-options="organizationOptions"
           :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
@@ -94,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'
@@ -110,6 +118,15 @@ export default {
     Asd20Button,
   },
   props: {
+    pages: { type: Array, default: () => [] },
+    files: { type: Array, default: () => [] },
+    groups: { type: Array, default: () => [] },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
     organization: { type: Object, default: () => ({}) },
     organizationOptions: { type: Array, default: () => [] },
     aiSearchFeedbackFormUrl: { type: String, default: '' },
@@ -169,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/Asd20PageFooter/index.vue

@@ -199,28 +199,6 @@ export default {
     websiteLogoProps2: { type: Object, default: null },
   },
   computed: {
-    collapsed() {
-      if (typeof window === 'undefined') return false
-      const storeState = this.$store && this.$store.state
-      if (!storeState) return false
-      return (
-        storeState.scrollPosition > window.innerHeight &&
-        storeState.scrollVerticalDirection !== -1
-      )
-    },
-    condensed() {
-      if (typeof window === 'undefined') return false
-      const storeState = this.$store && this.$store.state
-      if (!storeState) return false
-      return storeState.scrollPosition > window.innerHeight / 4
-    },
-    classes() {
-      return {
-        'page-header--fullscreen': this.fullscreen,
-        'page-header--collapsed': this.collapsed,
-        'page-header--condensed': this.condensed,
-      }
-    },
     administrator() {
       if (
         !this.organization ||

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)