Merge pull request #700 from madeindjs/improve-wds-builder

feat(ui): Improve wds builder
writer · Dec 18, 2024 · c252a82 · c252a82
2 parents 90e3656 + 55ffbf7
commit c252a82
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 93 deletions.
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
@@ -65,7 +65,7 @@ const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	dropdown,
 	{
 		placement: "bottom",
-		middleware: [autoPlacement()],
+		middleware: [autoPlacement({ allowedPlacements: ["bottom", "top"] })],
 	},
 );
 
@@ -131,6 +131,11 @@ function onSelect(value: string) {
 
 	cursor: pointer;
 }
+.BuilderSelect__trigger:focus {
+	border: 1px solid var(--softenedAccentColor);
+	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+	outline: none;
+}
 .BuilderSelect__trigger__label {
 	text-overflow: ellipsis;
 	overflow: hidden;

diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -31,6 +31,9 @@
 					</WdsFieldWrapper>
 				</div>
 			</div>
+			<WdsButton variant="tertiary" @click="showCustomHandlerModal">
+				<i class="material-symbols-outlined">add</i>Add custom handler
+			</WdsButton>
 		</div>
 		<BuilderModal
 			v-if="stubModal"
@@ -45,62 +48,57 @@
 			<div class="codeContainer">
 				<code v-dompurify-html="stubModal.highlightedCodeHtml"> </code>
 			</div>
-			<button @click="copyToClipboard(stubModal.code)">
-				<i class="material-symbols-outlined"> content_copy </i>
+			<WdsButton
+				variant="tertiary"
+				@click="copyToClipboard(stubModal.code)"
+			>
+				<i class="material-symbols-outlined">content_copy</i>
 				Copy code to clipboard
-			</button>
+			</WdsButton>
 		</BuilderModal>
-		<div class="customHandler">
-			<button
-				title="Add a custom event handler"
-				@click="showCustomHandlerModal"
-			>
-				<i class="material-symbols-outlined">add</i>Add custom handler
-			</button>
-			<BuilderModal
-				v-if="customHandlerModal"
-				:close-action="customHandlerModalCloseAction"
-				icon="bolt"
-				modal-title="Add Custom Event Handler"
-				allow-overflow
-			>
-				<div class="customHandlerModalForm">
-					<WdsFieldWrapper
-						label="Event type"
-						hint="Can be any event type."
-					>
-						<WdsTextInput
-							v-model="customHandlerModal.eventType"
-							type="text"
-							list="commonEventTypes"
-						/>
-						<datalist id="commonEventTypes">
-							<option
-								v-for="commonEventType in commonEventTypes"
-								:key="commonEventType"
-								:value="commonEventType"
-							>
-								{{ commonEventType }}
-							</option>
-						</datalist>
-					</WdsFieldWrapper>
-					<WdsFieldWrapper
-						label="Handler function"
-						hint="The function that will handle the event."
-					>
-						<BuilderSelect
-							v-model="customHandlerModal.handlerFunctionName"
-							:options="options"
-							enable-search
-						/>
-					</WdsFieldWrapper>
-				</div>
+		<BuilderModal
+			v-if="customHandlerModal"
+			:close-action="customHandlerModalCloseAction"
+			icon="bolt"
+			modal-title="Add Custom Event Handler"
+			allow-overflow
+		>
+			<div class="customHandlerModalForm">
+				<WdsFieldWrapper
+					label="Event type"
+					hint="Can be any event type."
+				>
+					<WdsTextInput
+						v-model="customHandlerModal.eventType"
+						type="text"
+						list="commonEventTypes"
+					/>
+					<datalist id="commonEventTypes">
+						<option
+							v-for="commonEventType in commonEventTypes"
+							:key="commonEventType"
+							:value="commonEventType"
+						>
+							{{ commonEventType }}
+						</option>
+					</datalist>
+				</WdsFieldWrapper>
+				<WdsFieldWrapper
+					label="Handler function"
+					hint="The function that will handle the event."
+				>
+					<BuilderSelect
+						v-model="customHandlerModal.handlerFunctionName"
+						:options="options"
+						enable-search
+					/>
+				</WdsFieldWrapper>
+			</div>
 
-				<button @click="addCustomEventHandler()">
-					<i class="material-symbols-outlined">add</i>Add
-				</button>
-			</BuilderModal>
-		</div>
+			<WdsButton variant="tertiary" @click="addCustomEventHandler()">
+				<i class="material-symbols-outlined">add</i>Add
+			</WdsButton>
+		</BuilderModal>
 	</div>
 </template>
 
@@ -116,6 +114,7 @@ import BuilderSelect from "../BuilderSelect.vue";
 import type { Option } from "../BuilderSelect.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsButton from "@/wds/WdsButton.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -343,10 +342,6 @@ const copyToClipboard = (text: string) => {
 	gap: 24px;
 }
 
-.customHandler {
-	margin-top: 24px;
-}
-
 .addHandler .fields {
 	display: flex;
 	gap: 16px;

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -144,11 +144,13 @@ const fields = computed(() => {
 	return definition.fields;
 });
 
-const fieldCategories = [
-	FieldCategory.General,
-	FieldCategory.Style,
-	FieldCategory.Tools,
-];
+const fieldCategories = computed(() => {
+	return [
+		FieldCategory.General,
+		FieldCategory.Style,
+		FieldCategory.Tools,
+	].filter((c) => fieldsByCategory.value[c]?.length);
+});
 
 const fieldsByCategory = computed(() => {
 	const entries = Object.entries(fields.value);

diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -1,15 +1,17 @@
 <template>
 	<div class="WdsDropdownMenu">
-		<div v-if="enableSearch" class="WdsDropdownMenu__search">
-			<i class="material-symbols-outlined">search</i>
-			<input
-				ref="searchInput"
-				v-model="searchTerm"
-				class="WdsDropdownMenu__search__input"
-				type="text"
-				placeholder="Search"
-				autocomplete="off"
-			/>
+		<div v-if="enableSearch" class="WdsDropdownMenu__search-wrapper">
+			<div class="WdsDropdownMenu__search">
+				<i class="material-symbols-outlined">search</i>
+				<input
+					ref="searchInput"
+					v-model="searchTerm"
+					class="WdsDropdownMenu__search__input"
+					type="text"
+					placeholder="Search"
+					autocomplete="off"
+				/>
+			</div>
 		</div>
 		<button
 			v-for="option in optionsFiltered"
@@ -100,7 +102,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	box-shadow: 0px 1px 8px 0px #bfcbff40;
 	box-sizing: border-box;
 }
-.WdsDropdownMenu:has(.WdsDropdownMenu__search) {
+.WdsDropdownMenu:has(.WdsDropdownMenu__search-wrapper) {
 	padding-top: 0px;
 }
 
@@ -139,22 +141,26 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	overflow: hidden;
 	text-align: left;
 }
+.WdsDropdownMenu__search-wrapper {
+	position: sticky;
+	top: 0px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	background: #fff;
+}
 
 .WdsDropdownMenu__search {
 	background-color: #fafafa;
 	border-radius: 4px;
 	height: 36px;
 	width: 100%;
 
-	margin-bottom: 8px;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: 4px;
 
 	padding: 8px;
-	padding-top: 16px;
 	border: 1px solid transparent;
 
 	color: currentcolor;

diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -7,22 +7,27 @@
 					>&nbsp;:&nbsp;{{ unit }}</span
 				>
 			</label>
-			<button
+			<WdsButton
 				v-if="helpButton"
 				class="WdsFieldWrapper__title__help"
-				variant="subtle"
-				:title="typeof helpButton === 'string' ? helpButton : undefined"
+				variant="neutral"
+				size="smallIcon"
+				:data-writer-tooltip="
+					typeof helpButton === 'string' ? helpButton : undefined
+				"
 				@click="$emit('helpClick')"
 			>
 				<i class="material-symbols-outlined">help</i>
-			</button>
+			</WdsButton>
 		</div>
 		<div class="WdsFieldWrapper__slot"><slot></slot></div>
 		<div v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import WdsButton from "./WdsButton.vue";
+
 defineProps({
 	label: { type: String, required: false, default: undefined },
 	unit: { type: String, required: false, default: undefined },
@@ -57,18 +62,6 @@ defineEmits({
 	gap: 8px;
 }
 
-.WdsFieldWrapper__title__help {
-	background-color: transparent;
-	border: none;
-	border-radius: 50%;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-}
-.WdsFieldWrapper__title__help:hover {
-	color: var(--primaryColor);
-}
-
 .WdsFieldWrapper__title__label {
 	font-size: 14px;
 	font-weight: 400;