diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts index 82dd4909fd6..d092e72019e 100644 --- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts @@ -449,7 +449,7 @@ describe('compiler: transform v-model', () => { expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`) }) - test('should generate modelModifiers for component v-model', () => { + test('should generate modelValueModifiers for component v-model', () => { const root = parseWithVModel('', { prefixIdentifiers: true, }) @@ -461,7 +461,7 @@ describe('compiler: transform v-model', () => { { key: { content: `modelValue` } }, { key: { content: `onUpdate:modelValue` } }, { - key: { content: 'modelModifiers' }, + key: { content: 'modelValueModifiers' }, value: { content: `{ trim: true, "bar-baz": true }`, isStatic: false, @@ -469,7 +469,7 @@ describe('compiler: transform v-model', () => { }, ], }) - // should NOT include modelModifiers in dynamicPropNames because it's never + // should NOT include modelValueModifiers in dynamicPropNames because it's never // gonna change expect(vnodeCall.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`) }) diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts index 598c1ea4387..c75ef1c3e60 100644 --- a/packages/compiler-core/src/transforms/vModel.ts +++ b/packages/compiler-core/src/transforms/vModel.ts @@ -138,7 +138,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => { ? isStaticExp(arg) ? `${arg.content}Modifiers` : createCompoundExpression([arg, ' + "Modifiers"']) - : `modelModifiers` + : `modelValueModifiers` props.push( createObjectProperty( modifiersKey, diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap index 12462dcf423..cdf71076819 100644 --- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap @@ -6,7 +6,7 @@ exports[`defineModel() > basic usage 1`] = ` export default { props: { "modelValue": { required: true }, - "modelModifiers": {}, + "modelValueModifiers": {}, "count": {}, "countModifiers": {}, "toString": { type: Function }, @@ -34,7 +34,7 @@ export default /*@__PURE__*/_defineComponent({ "modelValue": { required: true }, - "modelModifiers": {}, + "modelValueModifiers": {}, }, emits: ["update:modelValue"], setup(__props, { expose: __expose }) { @@ -60,7 +60,7 @@ export default /*@__PURE__*/_defineComponent({ default: 0, required: true, }, - "modelModifiers": {}, + "modelValueModifiers": {}, }, emits: ["update:modelValue"], setup(__props, { expose: __expose }) { @@ -86,7 +86,7 @@ export default /*@__PURE__*/_defineComponent({ }, { "modelValue": { }, - "modelModifiers": {}, + "modelValueModifiers": {}, }), emits: ["update:modelValue"], setup(__props: any, { expose: __expose }) { @@ -109,7 +109,7 @@ exports[`defineModel() > w/ Boolean And Function types, production mode 1`] = ` export default /*@__PURE__*/_defineComponent({ props: { "modelValue": { type: [Boolean, String] }, - "modelModifiers": {}, + "modelValueModifiers": {}, }, emits: ["update:modelValue"], setup(__props, { expose: __expose }) { @@ -150,7 +150,7 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = ` export default { props: /*@__PURE__*/_mergeModels({ foo: String }, { "modelValue": { default: 0 }, - "modelModifiers": {}, + "modelValueModifiers": {}, }), emits: /*@__PURE__*/_mergeModels(['change'], ["update:modelValue"]), setup(__props, { expose: __expose }) { @@ -172,7 +172,7 @@ exports[`defineModel() > w/ types, basic usage 1`] = ` export default /*@__PURE__*/_defineComponent({ props: { "modelValue": { type: [Boolean, String] }, - "modelModifiers": {}, + "modelValueModifiers": {}, "count": { type: Number }, "countModifiers": {}, "disabled": { type: Number, ...{ required: false } }, @@ -201,7 +201,7 @@ exports[`defineModel() > w/ types, production mode 1`] = ` export default /*@__PURE__*/_defineComponent({ props: { "modelValue": { type: Boolean }, - "modelModifiers": {}, + "modelValueModifiers": {}, "fn": {}, "fnModifiers": {}, "fnWithDefault": { type: Function, ...{ default: () => null } }, @@ -233,7 +233,7 @@ exports[`defineModel() > w/ types, production mode, boolean + multiple types 1`] export default /*@__PURE__*/_defineComponent({ props: { "modelValue": { type: [Boolean, String, Object] }, - "modelModifiers": {}, + "modelValueModifiers": {}, }, emits: ["update:modelValue"], setup(__props, { expose: __expose }) { @@ -253,7 +253,7 @@ exports[`defineModel() > w/ types, production mode, function + runtime opts + mu export default /*@__PURE__*/_defineComponent({ props: { "modelValue": { type: [Number, Function], ...{ default: () => 1 } }, - "modelModifiers": {}, + "modelValueModifiers": {}, }, emits: ["update:modelValue"], setup(__props, { expose: __expose }) { diff --git a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts index 5d696a95d88..210c18ddaec 100644 --- a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts @@ -94,7 +94,7 @@ describe('defineModel()', () => { ) assertCode(content) expect(content).toMatch('"modelValue": { type: [Boolean, String] }') - expect(content).toMatch('"modelModifiers": {}') + expect(content).toMatch('"modelValueModifiers": {}') expect(content).toMatch('"count": { type: Number }') expect(content).toMatch( '"disabled": { type: Number, ...{ required: false } }', diff --git a/packages/compiler-sfc/src/script/defineModel.ts b/packages/compiler-sfc/src/script/defineModel.ts index 05082800284..9c8f254fee4 100644 --- a/packages/compiler-sfc/src/script/defineModel.ts +++ b/packages/compiler-sfc/src/script/defineModel.ts @@ -167,9 +167,7 @@ export function genModelProps(ctx: ScriptCompileContext) { modelPropsDecl += `\n ${JSON.stringify(name)}: ${decl},` // also generate modifiers prop - const modifierPropName = JSON.stringify( - name === 'modelValue' ? `modelModifiers` : `${name}Modifiers`, - ) + const modifierPropName = JSON.stringify(`${name}Modifiers`) modelPropsDecl += `\n ${modifierPropName}: {},` } return `{${modelPropsDecl}\n }` diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap index 5ef064974c0..14330e57811 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -1,13 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = ` +exports[`compiler: vModel transform > component > v-model for component should generate modelValueModifiers 1`] = ` "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; export function render(_ctx) { const _component_Comp = _resolveComponent("Comp") const n0 = _createComponentWithFallback(_component_Comp, { modelValue: () => (_ctx.foo), "onUpdate:modelValue": () => _value => (_ctx.foo = _value), - modelModifiers: () => ({ trim: true, "bar-baz": true }) }, null, true) + modelValueModifiers: () => ({ trim: true, "bar-baz": true }) }, null, true) return n0 }" `; diff --git a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts index 51eaa9e0230..bed60ff63a5 100644 --- a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts @@ -266,13 +266,13 @@ describe('compiler: vModel transform', () => { }) }) - test('v-model for component should generate modelModifiers', () => { + test('v-model for component should generate modelValueModifiers', () => { const { code, ir } = compileWithVModel( '', ) expect(code).toMatchSnapshot() expect(code).contain( - `modelModifiers: () => ({ trim: true, "bar-baz": true })`, + `modelValueModifiers: () => ({ trim: true, "bar-baz": true })`, ) expect(ir.block.dynamic.children[0].operation).toMatchObject({ type: IRNodeTypes.CREATE_COMPONENT_NODE, diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts index 7c232db754b..1c251928ce5 100644 --- a/packages/compiler-vapor/src/generators/component.ts +++ b/packages/compiler-vapor/src/generators/component.ts @@ -240,9 +240,7 @@ function genModelModifiers( if (!modelModifiers || !modelModifiers.length) return [] const modifiersKey = key.isStatic - ? key.content === 'modelValue' - ? [`modelModifiers`] - : [`${key.content}Modifiers`] + ? [`${key.content}Modifiers`] : ['[', ...genExpression(key, context), ' + "Modifiers"]'] const modifiersVal = genDirectiveModifiers(modelModifiers) diff --git a/packages/runtime-core/__tests__/componentEmits.spec.ts b/packages/runtime-core/__tests__/componentEmits.spec.ts index dc82c04919f..c793433921a 100644 --- a/packages/runtime-core/__tests__/componentEmits.spec.ts +++ b/packages/runtime-core/__tests__/componentEmits.spec.ts @@ -325,7 +325,7 @@ describe('component: emit', () => { const Comp = () => h(Foo, { modelValue: null, - modelModifiers: { number: true }, + modelValueModifiers: { number: true }, 'onUpdate:modelValue': fn1, foo: null, @@ -356,7 +356,7 @@ describe('component: emit', () => { const Comp = () => h(Foo, { modelValue: null, - modelModifiers: { trim: true }, + modelValueModifiers: { trim: true }, 'onUpdate:modelValue': fn1, foo: null, @@ -410,7 +410,7 @@ describe('component: emit', () => { const Comp = () => h(Foo, { modelValue: null, - modelModifiers: { trim: true }, + modelValueModifiers: { trim: true }, 'onUpdate:modelValue': fn1, firstName: null, @@ -464,7 +464,7 @@ describe('component: emit', () => { const Comp = () => h(Foo, { modelValue: null, - modelModifiers: { trim: true, number: true }, + modelValueModifiers: { trim: true, number: true }, 'onUpdate:modelValue': fn1, foo: null, @@ -492,7 +492,7 @@ describe('component: emit', () => { const Comp = () => h(Foo, { modelValue: null, - modelModifiers: { trim: true }, + modelValueModifiers: { trim: true }, 'onUpdate:modelValue': fn, }) diff --git a/packages/runtime-core/src/helpers/useModel.ts b/packages/runtime-core/src/helpers/useModel.ts index e85edc6e9a7..603a7bf6ea8 100644 --- a/packages/runtime-core/src/helpers/useModel.ts +++ b/packages/runtime-core/src/helpers/useModel.ts @@ -145,9 +145,9 @@ export const getModelModifiers = ( modelName: string, getter: (props: Record, key: string) => any, ): Record | undefined => { - return modelName === 'modelValue' || modelName === 'model-value' - ? getter(props, 'modelModifiers') - : getter(props, `${modelName}Modifiers`) || - getter(props, `${camelize(modelName)}Modifiers`) || - getter(props, `${hyphenate(modelName)}Modifiers`) + return ( + getter(props, `${modelName}Modifiers`) || + getter(props, `${camelize(modelName)}Modifiers`) || + getter(props, `${hyphenate(modelName)}Modifiers`) + ) } diff --git a/packages/runtime-vapor/__tests__/componentEmits.spec.ts b/packages/runtime-vapor/__tests__/componentEmits.spec.ts index 8c8a56085ba..6b542bbf6cc 100644 --- a/packages/runtime-vapor/__tests__/componentEmits.spec.ts +++ b/packages/runtime-vapor/__tests__/componentEmits.spec.ts @@ -265,7 +265,7 @@ describe('component: emit', () => { const fn2 = vi.fn() render({ modelValue: () => null, - modelModifiers: () => ({ number: true }), + modelValueModifiers: () => ({ number: true }), ['onUpdate:modelValue']: () => fn1, foo: () => null, fooModifiers: () => ({ number: true }), @@ -291,7 +291,7 @@ describe('component: emit', () => { modelValue() { return null }, - modelModifiers() { + modelValueModifiers() { return { trim: true } }, ['onUpdate:modelValue']() { @@ -327,7 +327,7 @@ describe('component: emit', () => { modelValue() { return null }, - modelModifiers() { + modelValueModifiers() { return { trim: true, number: true } }, ['onUpdate:modelValue']() { @@ -361,7 +361,7 @@ describe('component: emit', () => { modelValue() { return null }, - modelModifiers() { + modelValueModifiers() { return { trim: true } }, ['onUpdate:modelValue']() {