fix: issue with vue v-model

Author: nmerget

packages/components/scripts/post-build/vue.ts

@@ -63,6 +63,10 @@ export default (tmp?: boolean) => {
 						)
 					)})\n\nconst props =`
 				});
+				replacements.push({
+					from: 'handleFrameworkEventVue(() => {}',
+					to: 'handleFrameworkEventVue(emit'
+				});
 			}
 
 			runReplacements(replacements, component, 'vue', vueFile);

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -62,7 +62,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */

packages/components/src/components/input/input.lite.tsx

@@ -81,7 +81,7 @@ export default function DBInput(props: DBInputProps) {
 
 			useTarget({
 				angular: () => handleFrameworkEventAngular(this, event),
-				vue: () => handleFrameworkEventVue(this, event)
+				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */

packages/components/src/components/radio/radio.lite.tsx

@@ -41,7 +41,7 @@ export default function DBRadio(props: DBRadioProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

packages/components/src/components/select/select.lite.tsx

@@ -85,7 +85,7 @@ export default function DBSelect(props: DBSelectProps) {
 
 			useTarget({
 				angular: () => handleFrameworkEventAngular(this, event),
-				vue: () => handleFrameworkEventVue(this, event)
+				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */

packages/components/src/components/switch/switch.lite.tsx

@@ -45,7 +45,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

packages/components/src/components/tab-item/tab-item.lite.tsx

@@ -53,7 +53,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(this, event, 'checked'),
-				vue: () => handleFrameworkEventVue(this, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
 			});
 		}
 	});

packages/components/src/components/textarea/textarea.lite.tsx

@@ -72,7 +72,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			}
 			useTarget({
 				angular: () => handleFrameworkEventAngular(this, event),
-				vue: () => handleFrameworkEventVue(this, event)
+				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the textarea */

packages/components/src/utils/form-components.ts

@@ -10,10 +10,10 @@ export const handleFrameworkEventAngular = (
 };
 
 export const handleFrameworkEventVue = (
-	component: any,
+	emit: (event: string, ...args: any[]) => void,
 	event: any,
 	modelValue: string = 'value'
 ): void => {
 	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-	component.emit(`update:${modelValue}`, event.target[modelValue]);
+	emit(`update:${modelValue}`, event.target[modelValue]);
 };

showcases/vue-showcase/src/components/section/Section.vue

@@ -10,7 +10,7 @@ import { DBSection, DBCard } from "../../../../../output/vue/src";
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
 			<DBSection
-				className="db-informational-bg-basic-level-2 section-card-container"
+				class="db-informational-bg-basic-level-2 section-card-container"
 				:spacing="exampleProps?.spacing"
 				:width="exampleProps?.width"
 			>