refactor: replace custom useButtonClipboard composable function with the one from vueuse library

Author: VladKrasny

src/ui/src/builder/settings/BuilderSettings.vue

@@ -96,7 +96,7 @@ import BuilderSettingsMain from "./BuilderSettingsMain.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsIcon from "@/wds/WdsIcon.vue";
 import { SelectionStatus } from "../builderManager";
-import { useButtonClipboard } from "../useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import SharedMoreDropdown from "@/components/shared/SharedMoreDropdown.vue";
 import { useWriterTracking } from "@/composables/useWriterTracking";
 import BuilderSettingsActions from "./BuilderSettingsActions.vue";
@@ -117,8 +117,11 @@ const { component, definition: componentDefinition } = useComponentInformation(
 );
 const resultId = useBlueprintComponentResultId(component, componentDefinition);
 
-const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
-	useButtonClipboard(resultId);
+const { copy, copied: isComponentIdCopied } = useClipboard();
+
+function copyComponentId() {
+	copy(resultId.value);
+}
 
 const tracking = useWriterTracking(wf);
 

src/ui/src/builder/settings/BuilderSettingsArtifactAPITriggerDetails.vue

@@ -46,7 +46,7 @@
 					<WdsButton
 						variant="tertiary"
 						size="small"
-						@click="copyCreate"
+						@click="copyCreate()"
 					>
 						<WdsIcon
 							:name="isCreateCopied ? 'check' : 'clipboard'"
@@ -83,7 +83,7 @@
 						variant="tertiary"
 						size="small"
 						:disabled="isPollDisabled"
-						@click="copyPoll"
+						@click="copyPoll()"
 					>
 						<WdsIcon :name="isPollCopied ? 'check' : 'clipboard'" />
 						Copy poll async
@@ -103,7 +103,7 @@ import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 import BuilderFieldsCode from "./BuilderFieldsCode.vue";
-import { useButtonClipboard } from "../useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import WdsTitle2 from "@/wds/WdsTitle2.vue";
 import { FieldType } from "@/writerTypes";
 
@@ -153,8 +153,9 @@ const parsedOutput = computed(() => {
 	}
 });
 
-const { copyText: copyCreate, isCopied: isCreateCopied } =
-	useButtonClipboard(curlCreate);
+const { copy: copyCreate, copied: isCreateCopied } = useClipboard({
+	source: curlCreate,
+});
 
 const isPollDisabled = computed(() => {
 	return !parsedOutput.value?.poll_url?.trim();
@@ -168,8 +169,9 @@ const curlPoll = computed(() => {
 	);
 });
 
-const { copyText: copyPoll, isCopied: isPollCopied } =
-	useButtonClipboard(curlPoll);
+const { copy: copyPoll, copied: isPollCopied } = useClipboard({
+	source: curlPoll,
+});
 </script>
 
 <style scoped>

src/ui/src/builder/settings/BuilderSettingsMain.vue

@@ -73,7 +73,7 @@ import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
 import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsIcon from "@/wds/WdsIcon.vue";
-import { useButtonClipboard } from "../useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import { artifactRegistry } from "./artifacts";
 import { defineAsyncComponentWithLoader } from "@/utils/defineAsyncComponentWithLoader";
 
@@ -108,8 +108,11 @@ watch(component, (newComponent) => {
 	if (!newComponent) ssbm.setSelection(null);
 });
 
-const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
-	useButtonClipboard(computed(() => ssbm.firstSelectedId.value));
+const { copy, copied: isComponentIdCopied } = useClipboard();
+
+function copyComponentId() {
+	copy(ssbm.firstSelectedId.value);
+}
 
 const isBindable = computed(() =>
 	Object.values(componentDefinition.value?.events ?? {}).some(

src/ui/src/builder/useButtonClipboard.ts

@@ -3,7 +3,7 @@ import { computed, inject } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useComponentInformation } from "@/composables/useComponentInformation";
 import { useBlueprintComponentResultId } from "@/composables/useBlueprintComponentResultId";
-import { useButtonClipboard } from "@/builder/useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsIcon from "@/wds/WdsIcon.vue";
 import SharedMoreDropdown from "@/components/shared/SharedMoreDropdown.vue";
@@ -33,8 +33,11 @@ const { component, definition: def } = useComponentInformation(wf, componentId);
 const resultId = useBlueprintComponentResultId(component, def);
 const tracking = useWriterTracking(wf);
 
-const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
-	useButtonClipboard(resultId);
+const { copy, copied: isComponentIdCopied } = useClipboard();
+
+function copyComponentId() {
+	copy(resultId.value);
+}
 
 const settingsActions = useBuilderSettingsActions(
 	wf,