feat(v-model): add support for custom element form bindings with cust…

packages/compiler-core/src/options.ts

@@ -19,6 +19,14 @@ export interface ErrorHandlingOptions {
   onError?: (error: CompilerError) => void
 }
 
+type CustomElementFormBindings =
+  | 'checkbox'
+  | 'text-input'
+  | 'textarea'
+  | 'radio'
+  | 'file'
+  | 'select'
+
 export interface ParserOptions
   extends ErrorHandlingOptions,
     CompilerCompatOptions {
@@ -60,6 +68,10 @@ export interface ParserOptions
    * Separate option for end users to extend the native elements list
    */
   isCustomElement?: (tag: string) => boolean | void
+  /**
+   * Separate option for end users to specify type of custom element so appropriate v-model is applied
+   */
+  customElementType?: (tag: string) => CustomElementFormBindings | void
   /**
    * Get tag namespace
    */
@@ -240,6 +252,10 @@ export interface TransformOptions
    * Used by some transforms that expects only native elements
    */
   isCustomElement?: (tag: string) => boolean | void
+  /**
+   * Used by v-model transform to apply correct form bindings for custom elements
+   */
+  customElementType?: (tag: string) => CustomElementFormBindings | void
   /**
    * Transform expressions like {{ foo }} to `_ctx.foo`.
    * If this option is false, the generated code will be wrapped in a

packages/compiler-core/src/parser.ts

@@ -31,7 +31,7 @@ import {
   isCompatEnabled,
   warnDeprecation,
 } from './compat/compatConfig'
-import { NO, extend } from '@vue/shared'
+import { NO, extend, NOOP } from '@vue/shared'
 import {
   ErrorCodes,
   createCompilerError,
@@ -73,6 +73,7 @@ export const defaultParserOptions: MergedParserOptions = {
   isVoidTag: NO,
   isPreTag: NO,
   isCustomElement: NO,
+  customElementType: NOOP,
   onError: defaultOnError,
   onWarn: defaultOnWarn,
   comments: __DEV__,

packages/compiler-core/src/transform.ts

@@ -137,6 +137,7 @@ export function createTransformContext(
     transformHoist = null,
     isBuiltInComponent = NOOP,
     isCustomElement = NOOP,
+    customElementType = NOOP,
     expressionPlugins = [],
     scopeId = null,
     slotted = true,
@@ -165,6 +166,7 @@ export function createTransformContext(
     transformHoist,
     isBuiltInComponent,
     isCustomElement,
+    customElementType,
     expressionPlugins,
     scopeId,
     slotted,

packages/compiler-dom/__tests__/transforms/vModel.spec.ts

@@ -90,6 +90,39 @@ describe('compiler: transform v-model', () => {
     expect(generate(root).code).toMatchSnapshot()
   })
 
+  describe('v-model types on custom elements', () => {
+    const testCustomVModel = (
+      type:
+        | 'checkbox'
+        | 'text-input'
+        | 'textarea'
+        | 'radio'
+        | 'file'
+        | 'select'
+        | void,
+      modelType: any
+    ) => {
+      const root = transformWithModel(`<my-${type} v-model="model" />`, {
+        isCustomElement: tag => tag.startsWith('my-'),
+        customElementType: tag => (tag === `my-${type}` ? type : undefined)
+      })
+
+      // if (type==='select')console.log(root.helpers)
+      expect(root.helpers).toContain(modelType)
+    }
+
+    test('should set checkbox v-model', () =>
+      testCustomVModel('checkbox', V_MODEL_CHECKBOX))
+    test('should set radio v-model', () =>
+      testCustomVModel('radio', V_MODEL_RADIO))
+    test('should set input v-model', () =>
+      testCustomVModel('text-input', V_MODEL_TEXT))
+    test('should set select v-model', () =>
+      testCustomVModel('select', V_MODEL_SELECT))
+    test('should set textarea v-model', () =>
+      testCustomVModel('textarea', V_MODEL_TEXT))
+  })
+
   describe('errors', () => {
     test('plain elements with argument', () => {
       const onError = vi.fn()

packages/compiler-dom/src/transforms/vModel.ts

@@ -47,6 +47,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
 
   const { tag } = node
   const isCustomElement = context.isCustomElement(tag)
+  const customElementType = context.customElementType(tag)
   if (
     tag === 'input' ||
     tag === 'textarea' ||
@@ -55,14 +56,17 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
   ) {
     let directiveToUse = V_MODEL_TEXT
     let isInvalidType = false
-    if (tag === 'input' || isCustomElement) {
+    if (
+      tag === 'input' ||
+      (isCustomElement && customElementType !== 'select')
+    ) {
       const type = findProp(node, `type`)
-      if (type) {
-        if (type.type === NodeTypes.DIRECTIVE) {
+      if (type || customElementType) {
+        if (type?.type === NodeTypes.DIRECTIVE) {
           // :type="foo"
           directiveToUse = V_MODEL_DYNAMIC
-        } else if (type.value) {
-          switch (type.value.content) {
+        } else if (type?.value || customElementType) {
+          switch (type?.value?.content || customElementType) {
             case 'radio':
               directiveToUse = V_MODEL_RADIO
               break
@@ -92,7 +96,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
         // text type
         __DEV__ && checkDuplicatedValue()
       }
-    } else if (tag === 'select') {
+    } else if (tag === 'select' || customElementType === 'select') {
       directiveToUse = V_MODEL_SELECT
     } else {
       // textarea