feat(ui): harmonize WdsSelect - WF-188

src/ui/src/builder/BuilderApplicationSelect.vue

@@ -8,13 +8,13 @@ import {
 	PropType,
 } from "vue";
 import { useListResources } from "@/composables/useListResources";
-import type { Option } from "./BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import type { WriterApplication } from "@/writerTypes";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("./BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
@@ -86,7 +86,7 @@ defineExpose({ selectedData });
 
 <template>
 	<div class="BuilderGraphSelect--text">
-		<BuilderSelect
+		<WdsSelect
 			v-if="graphs.length > 0 || isLoading"
 			v-model="currentValue"
 			:options="options"

src/ui/src/builder/BuilderGraphSelect.spec.ts

@@ -3,7 +3,7 @@ import BuilderGraphSelect from "./BuilderGraphSelect.vue";
 import { flushPromises, shallowMount } from "@vue/test-utils";
 import { buildMockCore } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
-import BuilderSelect from "./BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
 describe("BuilderGraphSelect", () => {
@@ -26,7 +26,7 @@ describe("BuilderGraphSelect", () => {
 			props: { modelValue: "1" },
 			global: {
 				stubs: {
-					BuilderSelect: true,
+					WdsSelect: true,
 				},
 				provide: {
 					[injectionKeys.core as symbol]: core,
@@ -35,7 +35,7 @@ describe("BuilderGraphSelect", () => {
 		});
 		await flushPromises();
 		expect(sendListResourcesRequest).toHaveBeenCalledOnce();
-		expect(wrapper.findComponent(BuilderSelect).exists()).toBe(true);
+		expect(wrapper.findComponent(WdsSelect).exists()).toBe(true);
 	});
 
 	it("should fallback to input", async () => {
@@ -47,7 +47,7 @@ describe("BuilderGraphSelect", () => {
 			props: { modelValue: "1" },
 			global: {
 				stubs: {
-					BuilderSelect: true,
+					WdsSelect: true,
 				},
 				provide: {
 					[injectionKeys.core as symbol]: core,
@@ -56,7 +56,7 @@ describe("BuilderGraphSelect", () => {
 		});
 		await flushPromises();
 		expect(sendListResourcesRequest).toHaveBeenCalledOnce();
-		expect(wrapper.findComponent(BuilderSelect).exists()).toBe(false);
+		expect(wrapper.findComponent(WdsSelect).exists()).toBe(false);
 		expect(wrapper.findComponent(WdsTextInput).exists()).toBe(true);
 	});
 });

src/ui/src/builder/BuilderGraphSelect.vue

@@ -8,13 +8,13 @@ import {
 	PropType,
 } from "vue";
 import { useListResources } from "@/composables/useListResources";
-import type { Option } from "./BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import type { WriterGraph } from "@/writerTypes";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("./BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
@@ -73,7 +73,7 @@ defineExpose({ selectedData });
 
 <template>
 	<div class="BuilderGraphSelect--text">
-		<BuilderSelect
+		<WdsSelect
 			v-if="graphs.length > 0 || isLoading"
 			v-model="currentValue"
 			:options="options"

src/ui/src/builder/settings/BuilderFieldsAlign.vue

@@ -13,7 +13,7 @@
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
-				<BuilderSelect
+				<WdsSelect
 					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
@@ -58,8 +58,8 @@ import {
 } from "./constants/builderFieldsCssTabs";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("../BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 

src/ui/src/builder/settings/BuilderFieldsBlueprintKey.spec.ts

@@ -4,7 +4,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { buildMockCore, buildMockComponent, mockProvides } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
 import { generateBuilderManager } from "../builderManager";
-import BuilderSelect from "../BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import type { generateCore } from "@/core";
 
@@ -57,7 +57,7 @@ describe("BuilderFieldsBlueprintKey", () => {
 
 		expect(wrapper.attributes("data-automation-key")).toBe(fieldKey);
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe("");
 
@@ -74,7 +74,7 @@ describe("BuilderFieldsBlueprintKey", () => {
 		const wrapper = buildWrapper(componentWf2.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		select.vm.$emit("update:modelValue", componentWf1.content.key);
 
@@ -104,7 +104,7 @@ describe("BuilderFieldsBlueprintKey", () => {
 		const wrapper = buildWrapper(componentWf3.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe(unexstingBlueprintKey);
 

src/ui/src/builder/settings/BuilderFieldsBlueprintKey.vue

@@ -3,7 +3,7 @@
 		class="BuilderFieldsBlueprintKey"
 		:data-automation-key="props.fieldKey"
 	>
-		<BuilderSelect v-model="selectedBlueprintKey" :options="options" />
+		<WdsSelect v-model="selectedBlueprintKey" :options="options" />
 		<WdsButton
 			v-if="selectedBlueprintComponentId"
 			variant="neutral"
@@ -21,11 +21,9 @@ import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import WdsButton from "@/wds/WdsButton.vue";
-import { Option } from "../BuilderSelect.vue";
+import { Option } from "@/wds/WdsSelect.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/settings/BuilderFieldsComponentEventType.vue

@@ -3,7 +3,7 @@
 		class="BuilderFieldsComponentEventType"
 		:data-automation-key="props.fieldKey"
 	>
-		<BuilderSelect
+		<WdsSelect
 			v-if="options.length"
 			v-model="selected"
 			:options="options"
@@ -17,13 +17,11 @@
 import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
-import type { Option } from "../BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import { FieldType } from "@/writerTypes";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts

@@ -4,7 +4,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { buildMockCore, buildMockComponent, mockProvides } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
 import { generateBuilderManager } from "../builderManager";
-import BuilderSelect from "../BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import type { generateCore } from "@/core";
 
@@ -33,9 +33,6 @@ describe("BuilderFieldsComponentId", () => {
 				fieldKey,
 			},
 			global: {
-				stubs: {
-					BaseSelect: true,
-				},
 				provide: {
 					...mockProvides,
 					[injectionKeys.builderManager as symbol]: wfbm,
@@ -59,7 +56,7 @@ describe("BuilderFieldsComponentId", () => {
 
 		expect(wrapper.attributes("data-automation-key")).toBe(fieldKey);
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe("");
 
@@ -80,7 +77,7 @@ describe("BuilderFieldsComponentId", () => {
 		const wrapper = buildWrapper(componentPage.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		select.vm.$emit("update:modelValue", componentButton.id);
 

src/ui/src/builder/settings/BuilderFieldsComponentId.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="BuilderFieldsComponentId" :data-automation-key="props.fieldKey">
-		<BuilderSelect v-model="selected" :options="options" enable-search />
+		<WdsSelect v-model="selected" :options="options" enable-search />
 		<WdsButton
 			v-if="selected"
 			variant="neutral"
@@ -18,13 +18,11 @@
 import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
-import type { Option } from "../BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import { useComponentDescription } from "../useComponentDescription";
 import WdsButton from "@/wds/WdsButton.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts

@@ -4,7 +4,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { buildMockCore, buildMockComponent, mockProvides } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
 import { generateBuilderManager } from "../builderManager";
-import BuilderSelect from "../BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import type { generateCore } from "@/core";
 
 describe("BuilderFieldsHandler", () => {
@@ -25,9 +25,6 @@ describe("BuilderFieldsHandler", () => {
 				fieldKey,
 			},
 			global: {
-				stubs: {
-					BaseSelect: true,
-				},
 				provide: {
 					...mockProvides,
 					[injectionKeys.builderManager as symbol]: ssbm,
@@ -55,7 +52,7 @@ describe("BuilderFieldsHandler", () => {
 
 		expect(wrapper.attributes("data-automation-key")).toBe(fieldKey);
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe("");
 
@@ -72,7 +69,7 @@ describe("BuilderFieldsHandler", () => {
 		const wrapper = buildWrapper(component1.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		select.vm.$emit("update:modelValue", "func1");
 
@@ -94,7 +91,7 @@ describe("BuilderFieldsHandler", () => {
 		const wrapper = buildWrapper(component2.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe(unexstingHandler);
 

src/ui/src/builder/settings/BuilderFieldsHandler.vue

@@ -1,18 +1,16 @@
 <template>
 	<div class="BuilderFieldsHandler" :data-automation-key="props.fieldKey">
-		<BuilderSelect v-model="selectedHandler" :options="options" />
+		<WdsSelect v-model="selectedHandler" :options="options" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
-import { Option } from "../BuilderSelect.vue";
+import { Option } from "@/wds/WdsSelect.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/settings/BuilderFieldsPadding.vue

@@ -13,7 +13,7 @@
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
-				<BuilderSelect
+				<WdsSelect
 					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
@@ -128,8 +128,8 @@ import {
 } from "./constants/builderFieldsCssTabs";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("../BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 

src/ui/src/builder/settings/BuilderFieldsWidth.vue

@@ -13,7 +13,7 @@
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
-				<BuilderSelect
+				<WdsSelect
 					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
@@ -67,8 +67,8 @@ import {
 } from "./constants/builderFieldsCssTabs";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("../BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });