diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js index 8ec7a26191b..34fb2bcb559 100644 --- a/packages/components/scripts/post-build/components.js +++ b/packages/components/scripts/post-build/components.js @@ -55,10 +55,7 @@ const getComponents = () => [ }, config: { vue: { - vModel: [ - { modelValue: 'checked', binding: ':checked' }, - { modelValue: 'indeterminate', binding: ':indeterminate' } - ] + vModel: [{ modelValue: 'checked', binding: ':checked' }] } } }, diff --git a/packages/components/scripts/post-build/vue.js b/packages/components/scripts/post-build/vue.js index ccd72617e5b..045f139113d 100644 --- a/packages/components/scripts/post-build/vue.js +++ b/packages/components/scripts/post-build/vue.js @@ -32,14 +32,6 @@ const updateNestedComponents = (input, rootComponentName) => { const updateVModelBindings = (input, bindings) => { let fileContent = input; - // Replace internal underscore value - bindings.forEach((bin) => { - fileContent = fileContent.replace( - `${bin.binding}="_${bin.modelValue}"`, - `${bin.binding}="${bin.modelValue}"` - ); - }); - // Add emits to component config fileContent = fileContent.replace( @@ -52,19 +44,8 @@ const updateVModelBindings = (input, bindings) => { return fileContent .split('\n') .map((line) => { - const foundBinding = bindings.find( - (bin) => - line.includes(`this._${bin.modelValue} =`) && - !line.includes( - `this._${bin.modelValue} = this.${bin.modelValue}` - ) - ); - if (foundBinding) { - const emitFunction = `this.$emit("update:${foundBinding.modelValue}", this._${foundBinding.modelValue});`; - return `${line}\n${emitFunction}`; - } - return line; + return line.replace('// VUE:', ''); }) .join('\n'); }; diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx index 51738449d1b..535c2cc8e87 100644 --- a/packages/components/src/components/checkbox/checkbox.lite.tsx +++ b/packages/components/src/components/checkbox/checkbox.lite.tsx @@ -28,9 +28,6 @@ export default function DBCheckbox(props: DBCheckboxProps) { initialized: false, _id: DEFAULT_ID, _isValid: undefined, - _value: '', - _checked: false, - _indeterminate: false, handleChange: (event: any) => { if (props.onChange) { @@ -41,15 +38,15 @@ export default function DBCheckbox(props: DBCheckboxProps) { props.change(event); } - state._checked = event.target?.checked; - state._indeterminate = event.target?.indeterminate; - if (event.target?.validity?.valid != state._isValid) { state._isValid = event.target?.validity?.valid; if (props.validityChange) { props.validityChange(!!event.target?.validity?.valid); } } + + // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved" + // VUE:this.$emit("update:checked", event.target.checked); }, handleBlur: (event: any) => { if (props.onBlur) { @@ -78,10 +75,6 @@ export default function DBCheckbox(props: DBCheckboxProps) { state.initialized = true; state._id = props.id ? props.id : 'checkbox-' + uuid(); - if (props.value) { - state._value = props.value; - } - if (props.stylePath) { state.stylePath = props.stylePath; } @@ -123,7 +116,7 @@ export default function DBCheckbox(props: DBCheckboxProps) { name={props.name} checked={props.checked} disabled={props.disabled} - value={state._value} + value={props.value} aria-describedby={props.describedbyid} aria-invalid={props.invalid} data-size={props.size} diff --git a/packages/components/src/components/checkbox/model.ts b/packages/components/src/components/checkbox/model.ts index d3afa13e02a..f115e33fd35 100644 --- a/packages/components/src/components/checkbox/model.ts +++ b/packages/components/src/components/checkbox/model.ts @@ -9,8 +9,7 @@ import { GlobalState, FormProps, FormState, - FormCheckProps, - FormCheckState + FormCheckProps } from '../../shared/model'; export interface DBCheckboxDefaultProps { @@ -43,5 +42,4 @@ export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState & FocusEventState & - FormState & - FormCheckState; + FormState; diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx index 90bd48b3536..19dbcd88338 100644 --- a/packages/components/src/components/input/input.lite.tsx +++ b/packages/components/src/components/input/input.lite.tsx @@ -49,7 +49,6 @@ export default function DBInput(props: DBInputProps) { _id: DEFAULT_ID, _isValid: undefined, _dataListId: DEFAULT_ID, - _value: '', iconVisible: (icon?: string) => { return Boolean(icon && icon !== '_' && icon !== 'none'); }, @@ -69,15 +68,15 @@ export default function DBInput(props: DBInputProps) { props.change(event); } - // using controlled components for react forces us to using state for value - state._value = event.target.value; - if (event.target?.validity?.valid != state._isValid) { state._isValid = event.target?.validity?.valid; if (props.validityChange) { props.validityChange(!!event.target?.validity?.valid); } } + + // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved" + // VUE:this.$emit("update:value", event.target.value); }, handleBlur: (event: any) => { if (props.onBlur) { @@ -108,10 +107,6 @@ export default function DBInput(props: DBInputProps) { ? props.dataListId : `datalist-${state._id}`; - if (props.value) { - state._value = props.value; - } - if (props.stylePath) { state.stylePath = props.stylePath; } @@ -138,7 +133,7 @@ export default function DBInput(props: DBInputProps) { disabled={props.disabled} required={props.required} defaultValue={props.defaultValue} - value={state._value} + value={props.value} aria-invalid={props.invalid} maxLength={props.maxLength} minLength={props.minLength} diff --git a/packages/components/src/components/radio/model.ts b/packages/components/src/components/radio/model.ts index 1deb6033a94..c67d519b0e3 100644 --- a/packages/components/src/components/radio/model.ts +++ b/packages/components/src/components/radio/model.ts @@ -9,8 +9,7 @@ import { GlobalState, FormProps, FormState, - FormCheckProps, - FormCheckState + FormCheckProps } from '../../shared/model'; export interface DBRadioDefaultProps { @@ -35,5 +34,4 @@ export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState & FocusEventState & - FormState & - FormCheckState; + FormState; diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx index bd24f404ab3..f6c2673dc9a 100644 --- a/packages/components/src/components/radio/radio.lite.tsx +++ b/packages/components/src/components/radio/radio.lite.tsx @@ -27,7 +27,6 @@ export default function DBRadio(props: DBRadioProps) { const state = useStore({ initialized: false, _id: DEFAULT_ID, - _checked: false, _isValid: undefined, handleChange: (event: any) => { @@ -39,8 +38,6 @@ export default function DBRadio(props: DBRadioProps) { props.change(event); } - state._checked = event.target?.checked; - if (event.target?.validity?.valid != state._isValid) { state._isValid = event.target?.validity?.valid; if (props.validityChange) { diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts index c3cb0cde809..501a6dac15d 100644 --- a/packages/components/src/shared/model.ts +++ b/packages/components/src/shared/model.ts @@ -121,10 +121,6 @@ export type FormState = { _value?: any; }; -export type FormCheckState = { - _checked: boolean; -}; - export type GlobalTextProps = { placeholder?: string; maxLength?: number;