feat(ui): use WdsTag for BuilderSelect - WF-138

src/ui/src/builder/BuilderSelect.vue

@@ -11,6 +11,19 @@
 				>{{ currentIcon }}</i
 			>
 			<div
+				v-if="enableMultiSelection"
+				class="BuilderSelect__trigger__multiSelectLabel"
+			>
+				<WdsTag
+					v-for="option of selectedOptions"
+					:key="option.value"
+					:text="option.label"
+					closable
+					@close="handleRemoveValue(option.value)"
+				/>
+			</div>
+			<div
+				v-else
 				class="BuilderSelect__trigger__label"
 				data-writer-tooltip-strategy="overflow"
 				:data-writer-tooltip="currentLabel"
@@ -52,6 +65,7 @@ import {
 import { useFloating, autoPlacement } from "@floating-ui/vue";
 import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
 import { useFocusWithin } from "@/composables/useFocusWithin";
+import WdsTag from "@/wds/WdsTag.vue";
 
 const WdsDropdownMenu = defineAsyncComponent(
 	() => import("@/wds/WdsDropdownMenu.vue"),
@@ -99,8 +113,19 @@ const expandIcon = computed(() =>
 	isOpen.value ? "keyboard_arrow_up" : "expand_more",
 );
 
-const selectedOptions = computed(() =>
-	props.options.filter((o) => isSelected(o.value)),
+const currentValueArray = computed(() => {
+	if (!currentValue.value) return [];
+	const array = Array.isArray(currentValue.value)
+		? currentValue.value
+		: [currentValue.value];
+	return array.filter(Boolean);
+});
+
+const selectedOptions = computed<WdsDropdownMenuOption[]>(() =>
+	currentValueArray.value.map(
+		(v) =>
+			props.options.find((o) => o.value === v) ?? { value: v, label: v },
+	),
 );
 
 const hasUnknowOptionSelected = computed(() => {
@@ -142,10 +167,9 @@ function onSelect(value: string | string[]) {
 	currentValue.value = value;
 }
 
-function isSelected(value: string) {
-	return Array.isArray(currentValue.value)
-		? currentValue.value.includes(value)
-		: currentValue.value === value;
+function handleRemoveValue(value: string) {
+	if (!Array.isArray(currentValue.value)) return;
+	currentValue.value = currentValue.value.filter((v) => v !== value);
 }
 </script>
 
@@ -162,7 +186,7 @@ function isSelected(value: string) {
 	align-items: center;
 	gap: 8px;
 
-	height: 40px;
+	min-height: 40px;
 	width: 100%;
 	padding: 8.5px 12px 8.5px 12px;
 
@@ -198,4 +222,13 @@ function isSelected(value: string) {
 	font-weight: 300;
 	cursor: pointer;
 }
+
+.BuilderSelect__trigger__multiSelectLabel {
+	flex-grow: 1;
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	gap: 8px;
+}
 </style>

src/ui/src/wds/WdsTag.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+export type WdsTagVariant = "normal" | "category" | "status";
+export type WdsTagSize = "normal" | "small";
+</script>
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+
+const props = defineProps({
+	text: { type: String, required: true },
+	closable: { type: Boolean, required: false },
+	size: { type: String as PropType<WdsTagSize>, default: "normal" },
+	variant: { type: String as PropType<WdsTagVariant>, default: "normal" },
+});
+
+const classes = computed<string[]>(() => [
+	`WdsTag--size-${props.size}`,
+	`WdsTag--variant-${props.variant}`,
+]);
+
+defineEmits({
+	close: () => true,
+});
+</script>
+
+<template>
+	<div class="WdsTag" :class="classes">
+		<span class="WdsTag__text">{{ text }}</span>
+		<button
+			v-if="closable"
+			role="button"
+			class="WdsTag__close"
+			@click.stop="$emit('close')"
+		>
+			<i class="material-symbols-outlined">close</i>
+		</button>
+	</div>
+</template>
+
+<style scoped>
+.WdsTag {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	border-radius: 12px;
+	padding: 3px 12px;
+}
+
+.WdsTag--size-normal {
+	font-size: 12px;
+}
+.WdsTag--size-small {
+	font-size: 10px;
+}
+
+.WdsTag--variant-normal {
+	background-color: var(--wdsColorBlue2);
+}
+.WdsTag--variant-normal:hover {
+	background-color: var(--wdsColorBlue3);
+}
+
+.WdsTag__close {
+	border: none;
+	background-color: transparent;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	cursor: pointer;
+}
+</style>