@asd20/ui-next 1.0.8 → 1.0.10

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "private": false,
   "description": "ASD20 UI component library migration workspace.",
   "license": "MIT",

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

@@ -29,7 +29,6 @@ import { shouldOpenInNewWindow } from '../../../helpers/linkPolicy'
 
 export default {
   name: 'Asd20Button',
-  emits: ['click', 'mouseup', 'keyup', 'focusin'],
   components: { Asd20Badge, Asd20Icon },
   props: {
     label: { type: String, default: '' },
@@ -54,6 +53,7 @@ export default {
     disabled: { type: Boolean, default: false },
     iconAngle: { type: Number, default: 0 },
   },
+  emits: ['click', 'mouseup', 'keyup', 'focusin'],
   computed: {
     classes() {
       return {

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

@@ -49,11 +49,11 @@ import { format } from 'date-fns'
 
 export default {
   name: 'Asd20CalendarEventButton',
-  emits: ['click'],
   props: {
     event: { type: Object, default: null },
     large: { type: Boolean, default: false },
   },
+  emits: ['click'],
   computed: {
     classes() {
       const event = this.event || {}

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

@@ -8,13 +8,8 @@
     ]"
   >
     <input
-      :id="id"
+      v-bind="checkboxAttrs"
       ref="checkbox"
-      :checked="resolvedValue"
-      :role="!checkbox ? 'switch' : null"
-      :aria-checked="resolvedValue.toString()"
-      v-bind="$attrs"
-      type="checkbox"
       @change="toggle"
     />
     <label
@@ -64,6 +59,16 @@ export default {
     resolvedValue() {
       return typeof this.modelValue === 'boolean' ? this.modelValue : this.value
     },
+    checkboxAttrs() {
+      return {
+        ...this.$attrs,
+        id: this.id,
+        checked: this.resolvedValue,
+        role: !this.checkbox ? 'switch' : null,
+        'aria-checked': this.resolvedValue.toString(),
+        type: 'checkbox',
+      }
+    },
     id() {
       if (this.$attrs.id) return this.$attrs.id
 

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

@@ -13,10 +13,7 @@
       />
       <div class="asd20-select-input__select-wrapper">
         <select
-          v-bind="inputAttrs"
-          :id="computedId"
-          :value="resolvedValue"
-          :aria-label="hideLabel ? label : ''"
+          v-bind="mergedInputAttrs"
           v-on="legacyListeners"
           @input="input"
         >
@@ -62,6 +59,15 @@ export default {
   name: 'Asd20SelectInput',
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        value: this.resolvedValue,
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
 }
 </script>
 

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

@@ -18,7 +18,6 @@
 import Asd20Button from '../../atoms/Asd20Button'
 export default {
   name: 'Asd20ActionMenuItem',
-  emits: ['click', 'mouseup', 'keyup'],
   components: {
     Asd20Button,
   },
@@ -38,6 +37,7 @@ export default {
     active: { type: Boolean, default: false },
     // target: { type: [Boolean, String], default: false },
   },
+  emits: ['click', 'mouseup', 'keyup'],
   computed: {
     classes() {
       return [

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

@@ -260,7 +260,6 @@ import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20Card',
-  emits: ['click', 'keydown'],
 
   components: { Asd20Icon, Asd20Tag },
 
@@ -306,6 +305,7 @@ export default {
     dateLeft: { type: Boolean, default: false },
     cardType: { type: String, default: '' },
   },
+  emits: ['click', 'keydown'],
   computed: {
     truncatedDescription() {
       const strippedDescription = this.description

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

@@ -13,10 +13,7 @@
       />
 
       <input
-        :id="computedId"
-        type="file"
-        v-bind="inputAttrs"
-        :aria-label="hideLabel ? label : ''"
+        v-bind="mergedInputAttrs"
         v-on="legacyListeners"
         @input="input"
       />
@@ -46,6 +43,15 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        type: 'file',
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
   methods: {
     input(event) {
       this.isDirty = true

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

@@ -120,7 +120,6 @@ import {
 
 export default {
   name: 'Asd20ListItem',
-  emits: ['click'],
 
   components: {
     Asd20Icon,
@@ -152,6 +151,7 @@ export default {
     logoUrl: { type: String, default: '' },
     attribution: { type: Boolean, default: false },
   },
+  emits: ['click'],
 
   computed: {
     classes() {

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

@@ -41,7 +41,6 @@ import Asd20Icon from '../../atoms/Asd20Icon'
 
 export default {
   name: 'Asd20SearchField',
-  emits: ['input', 'update:modelValue', 'click', 'focusin', 'keyup'],
   components: { Asd20Icon },
   props: {
     value: { type: String, default: '' },
@@ -51,6 +50,7 @@ export default {
     large: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Search' },
   },
+  emits: ['input', 'update:modelValue', 'click', 'focusin', 'keyup'],
   computed: {
     classes() {
       return {

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

@@ -24,7 +24,6 @@
 <script>
 export default {
   name: 'Asd20SliderInput',
-  emits: ['input', 'update:modelValue'],
 
   props: {
     label: { type: String, default: '' },
@@ -35,6 +34,7 @@ export default {
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
   },
+  emits: ['input', 'update:modelValue'],
 
   computed: {
     resolvedValue() {

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

@@ -69,7 +69,6 @@ import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20Swipe',
-  emits: ['change', 'click', 'keyup'],
   props: {
     loop: {
       type: Boolean,
@@ -104,6 +103,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['change', 'click', 'keyup'],
   data() {
     return {
       width: 0,

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

@@ -34,7 +34,6 @@ import Asd20Badge from '../../../components/atoms/Asd20Badge'
 
 export default {
   name: 'Asd20Tab',
-  emits: ['click'],
 
   components: {
     Asd20Badge,
@@ -49,6 +48,7 @@ export default {
     active: { type: Boolean, default: false },
     to: { type: [String, Object], default: '' },
   },
+  emits: ['click'],
 
   computed: {
     component() {

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

@@ -17,12 +17,7 @@
       />
 
       <textarea
-        :id="computedId"
-        rows="10"
-        cols="100"
-        :value="resolvedValue"
-        v-bind="inputAttrs"
-        :aria-label="hideLabel ? label : ''"
+        v-bind="mergedInputAttrs"
         v-on="legacyListeners"
         @input="input"
       />
@@ -56,6 +51,17 @@ export default {
     value: { type: String, default: '' },
     label: { type: String, default: '' },
   },
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        rows: '10',
+        cols: '100',
+        value: this.resolvedValue,
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
 }
 </script>
 

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

@@ -13,10 +13,7 @@
       />
 
       <input
-        :id="computedId"
-        :value="resolvedValue"
-        v-bind="inputAttrs"
-        :aria-label="hideLabel ? label : ''"
+        v-bind="mergedInputAttrs"
         v-on="legacyListeners"
         @input="input"
       />
@@ -46,6 +43,15 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        value: this.resolvedValue,
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
 }
 </script>
 

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

@@ -71,12 +71,12 @@
         />
         <asd20-button
           label="Submit Issue"
-        :disabled="!isValid || sending"
-        horizontal
-        centered
-        bordered
-        @click="sendAccessibilityIssue"
-      />
+          :disabled="!isValid || sending"
+          horizontal
+          centered
+          bordered
+          @click="sendAccessibilityIssue"
+        />
         <asd20-spinner
           v-if="sending"
           size="sm"

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

@@ -90,13 +90,13 @@ import organizationSubtitle from '../../../helpers/organizationSubtitle'
 
 export default {
   name: 'Asd20CampusHeader',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Button,
     Asd20DistrictLogo,
     Asd20OrganizationPicker,
   },
   directives: { scrollTrack },
+  mixins: [responsiveBreakpointMixin],
   props: {
     organization: { type: Object, default: null },
     organizationOptions: { type: Array, default: () => [] },

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

@@ -221,9 +221,9 @@ export default {
       padding: space(1);
       font-size: 1rem;
 
-      * {
-        align-items: center;
-      }
+      // * {
+      //   align-items: center;
+      // }
     }
 
     .description {

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

@@ -48,7 +48,7 @@
               v-if="languageCode"
               reversed
               :language-code="languageCode"
-              v-on="$listeners"
+              @update:languageCode="$emit('update:languageCode', $event)"
             />
             <Asd20Share></Asd20Share>
             <asd20-button
@@ -199,7 +199,6 @@ import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20ImageHeader',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Button,
     // Asd20DistrictLogo,
@@ -211,6 +210,7 @@ export default {
     Asd20FormattedDate,
   },
   directives: { scrollTrack },
+  mixins: [responsiveBreakpointMixin],
   props: {
     heading: { type: String, default: '' },
     lead: { type: String, default: '' },

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

@@ -18,14 +18,8 @@
         <asd20-notification
           v-for="(notification, notificationIndex) of notificationsFromIndex"
           :key="notification.key || notification.title"
-          class="notification"
-          v-bind="notification"
-          :notification-style="groupType"
-          :aria-hidden="notificationIndex ? true : undefined"
-          :focus-disabled="notificationIndex ? true : false"
-          @dismiss="$emit('dismiss', notification)"
-        >
-        </asd20-notification>
+          v-bind="notificationBindings(notification, notificationIndex)"
+        />
       </transition-group>
     </transition>
 
@@ -154,6 +148,16 @@ export default {
     this.initNotifications(this.notifications)
   },
   methods: {
+    notificationBindings(notification, notificationIndex) {
+      return {
+        ...notification,
+        class: ['notification', notification.class].filter(Boolean),
+        notificationStyle: this.groupType,
+        ariaHidden: notificationIndex ? true : undefined,
+        focusDisabled: notificationIndex ? true : false,
+        onDismiss: () => this.$emit('dismiss', notification),
+      }
+    },
     initNotifications(incomingNotifications) {
       // filter out old notifications that are no longer present in incoming notifications
       this.notificationsFromIndex = this.notificationsFromIndex.filter(n =>

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

@@ -47,7 +47,7 @@
               v-if="languageCode"
               reversed
               :language-code="languageCode"
-              v-on="$listeners"
+              @update:languageCode="$emit('update:languageCode', $event)"
             />
             <Asd20Share></Asd20Share>
             <asd20-button
@@ -191,7 +191,6 @@ import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20PageHeader',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Button,
     // Asd20DistrictLogo,
@@ -203,6 +202,7 @@ export default {
     Asd20FormattedDate,
   },
   directives: { scrollTrack },
+  mixins: [responsiveBreakpointMixin],
   props: {
     heading: { type: String, default: '' },
     lead: { type: String, default: '' },

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

@@ -172,7 +172,6 @@ import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20AppTemplate',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20AppHeader,
     Asd20Button,
@@ -184,6 +183,7 @@ export default {
     Asd20NotificationGroup,
     MqLayout,
   },
+  mixins: [responsiveBreakpointMixin],
 
   props: {
     title: { type: String, default: '' },

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -34,7 +34,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -37,7 +37,7 @@
       :publish-date-time="publishDateTime"
       :categories="messageCategories"
       :language-code="languageCode"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -23,7 +23,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -23,7 +23,7 @@
       :language-code="languageCode"
       :images="firstMessage.images"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <template #top>
         <client-only>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -72,7 +72,7 @@
               reversed
               no-label
               :language-code="languageCode"
-              v-on="$listeners"
+              @update:languageCode="$emit('update:languageCode', $event)"
             />
           </client-only>
 

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

@@ -88,7 +88,7 @@
                 reversed
                 no-label
                 :language-code="languageCode"
-                v-on="$listeners"
+                @update:languageCode="$emit('update:languageCode', $event)"
               />
             </client-only>
 

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

@@ -36,7 +36,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
       :language-code="languageCode"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <client-only>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -52,7 +52,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -37,7 +37,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -114,7 +114,7 @@
                 reversed
                 no-label
                 :language-code="languageCode"
-                v-on="$listeners"
+                @update:languageCode="$emit('update:languageCode', $event)"
               />
             </client-only>
             <!-- Floating Notifications -->

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

@@ -115,7 +115,7 @@
                 reversed
                 no-label
                 :language-code="languageCode"
-                v-on="$listeners"
+                @update:languageCode="$emit('update:languageCode', $event)"
               />
             </client-only>
 

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

@@ -112,7 +112,6 @@ import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20SearchAppTemplate',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Viewport,
     Asd20Modal,
@@ -122,6 +121,7 @@ export default {
     Asd20Button,
     MqLayout,
   },
+  mixins: [responsiveBreakpointMixin],
 
   props: {
     resultCount: { type: Number, default: 0 },

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

package/src/mixins/inputComponentMixin.js

@@ -143,6 +143,12 @@ export default {
     },
   },
   methods: {
+    mergeInputAttrs(overrides = {}) {
+      return {
+        ...this.inputAttrs,
+        ...overrides,
+      }
+    },
     validate(value) {
       // Clear validation errors
       this.validationErrors = []