Merge pull request #638 from madeindjs/WF-45

feat(ui): use `BuilderSelect` for handlers + implement Design System - WF-45
writer · Nov 28, 2024 · 0f8a653 · 0f8a653
2 parents c6bd286 + 5ea2448
commit 0f8a653
Show file tree

Hide file tree

Showing 9 changed files with 496 additions and 195 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ui/package.json b/src/ui/package.json
@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^15.0.2",
+		"@floating-ui/vue": "^1.1.5",
 		"@fontsource-variable/material-symbols-outlined": "^5.0.34",
 		"@fontsource/poppins": "^5.0.14",
 		"@googlemaps/js-api-loader": "^1.16.6",

diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/BuilderFieldsAlign.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@input="handleInputSelect"
 				/>
 			</div>
 

diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.all_sides" class="row">
 					<i>All</i>

diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/BuilderFieldsWidth.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
 					<input