fix: issue with vue v-model

db-ui · Jan 16, 2025 · 397bf2a · 397bf2a
1 parent a4cd422
commit 397bf2a
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 10 deletions.
diff --git a/packages/components/scripts/post-build/vue.ts b/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);

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/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 */

diff --git a/packages/components/src/components/input/input.lite.tsx b/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 */

diff --git a/packages/components/src/components/radio/radio.lite.tsx b/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>) => {

diff --git a/packages/components/src/components/select/select.lite.tsx b/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 */

diff --git a/packages/components/src/components/switch/switch.lite.tsx b/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>) => {

diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/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')
 			});
 		}
 	});

diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/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 */

diff --git a/packages/components/src/utils/form-components.ts b/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]);
 };
diff --git a/showcases/vue-showcase/src/components/section/Section.vue b/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"
 			>