wip: update

Author: 9romise

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

@@ -10,6 +10,7 @@ import { transformElement } from '../../../compiler-core/src/transforms/transfor
 import { DOMErrorCodes } from '../../src/errors'
 import {
   V_MODEL_CHECKBOX,
+  V_MODEL_DETAILS,
   V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
@@ -99,6 +100,12 @@ describe('compiler: transform v-model', () => {
     expect(generate(root).code).toMatchSnapshot()
   })
 
+  test('simple expression for details', () => {
+    const root = transformWithModel('<details v-model="model" />')
+    expect(root.helpers).toContain(V_MODEL_DETAILS)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
   describe('errors', () => {
     test('plain elements with argument', () => {
       const onError = vi.fn()

packages/compiler-dom/src/errors.ts

@@ -53,7 +53,7 @@ export const DOMErrorMessages: Record<DOMErrorCodes, string> = {
   [DOMErrorCodes.X_V_HTML_WITH_CHILDREN]: `v-html will override element children.`,
   [DOMErrorCodes.X_V_TEXT_NO_EXPRESSION]: `v-text is missing expression.`,
   [DOMErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
-  [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
+  [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea>, <select> and <details> elements.`,
   [DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
   [DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,

packages/compiler-dom/src/runtimeHelpers.ts

@@ -8,6 +8,9 @@ export const V_MODEL_TEXT: unique symbol = Symbol(__DEV__ ? `vModelText` : ``)
 export const V_MODEL_SELECT: unique symbol = Symbol(
   __DEV__ ? `vModelSelect` : ``,
 )
+export const V_MODEL_DETAILS: unique symbol = Symbol(
+  __DEV__ ? `vModelDetails` : ``,
+)
 export const V_MODEL_DYNAMIC: unique symbol = Symbol(
   __DEV__ ? `vModelDynamic` : ``,
 )

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

@@ -51,6 +51,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     tag === 'input' ||
     tag === 'textarea' ||
     tag === 'select' ||
+    tag === 'details' ||
     isCustomElement
   ) {
     let directiveToUse = V_MODEL_TEXT

packages/compiler-ssr/src/transforms/ssrVModel.ts

@@ -174,6 +174,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       node.children = [createInterpolation(model, model.loc)]
     } else if (node.tag === 'select') {
       processSelectChildren(node.children)
+    } else if (node.tag === 'details') {
+      // TODO
     } else {
       context.onError(
         createDOMCompilerError(

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

@@ -77,6 +77,12 @@ describe('compiler: vModel transform', () => {
     expect(root2.helpers).toContain('applyDynamicModel')
   })
 
+  test.todo('should support details', () => {
+    const { code, helpers } = compileWithVModel('<details v-model="model" />')
+    expect(code).toMatchSnapshot()
+    expect(helpers).toContain('applyDetailsModel')
+  })
+
   describe('errors', () => {
     test('invalid element', () => {
       const onError = vi.fn()