To make WVUI work well with code in various stages of being migrated to Vue 3, we should make sure it works both with the Vue 3 migration build in compatibility mode, and with compatibility mode disabled.
Issues discovered so far:
- Avoid binding false to attributes, bind null or 'false' instead
- WvuiToggleButton's aria-pressed attribute
- WvuiCheckbox's aria-disabled attribute
- class attribute no longer applies to root when inheritAttrs: false is used
- WvuiInput uses this, but WvuiTypeaheadSearch sets class on it. This applies to the root now but will move to the <input> element, which could cause problems. We may need to set :class="$attrs.class" on the root element of WvuiInput. This only affects the z-index: 1 rule on hover so the breakage would be subtle.
- The standard prop and event names for v-model changed from value and input in Vue 2 to modelValue and update:modelValue in Vue 3. We should work around this by setting model: { prop: 'modelValue', event: 'update:modelValue' } on all components that use accept v-model, and emitting the previous events for backwards compatibility in cases where codesearch finds that they were listened to. We should also check in codesearch that the prop names are unused (as they hopefully mostly are).
- WvuiInput
- WvuiCheckbox
- WvuiRadio
- WvuiDropdown
- WvuiOptionsMenu
- Vue.observable() should be replaced with Vue.reactive() from the composition API
- WvuiCheckbox
- Something about how WvuiCheckbox uses template refs doesn't work with the Vue 3 migration build: the focusInput method throws an error because input.value is undefined.