chore(ui): introduce constant to DRY - WF-127

writer · Dec 13, 2024 · da30777 · da30777
1 parent 14a67b2
commit da30777
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 90 deletions.
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -47,7 +47,11 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
-import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -57,23 +61,6 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
-const tabs: WdsTabOptions<Mode>[] = [
-	{
-		label: "Default",
-		value: "default",
-	},
-	{
-		label: "CSS",
-		value: "css",
-	},
-	{
-		label: "Pick",
-		value: "pick",
-	},
-];
-
 enum SubMode {
 	hleft = "start",
 	hcenter = "center",

diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -45,24 +45,11 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
-import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
-
-type Mode = "pick" | "css" | "default";
-
-const tabs: WdsTabOptions<Mode>[] = [
-	{
-		label: "Default",
-		value: "default",
-	},
-	{
-		label: "CSS",
-		value: "css",
-	},
-	{
-		label: "Pick",
-		value: "pick",
-	},
-];
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -118,7 +118,11 @@ import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
-import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -129,23 +133,6 @@ const pickerEl: Ref<HTMLInputElement> = ref(null);
 const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
-const tabs: WdsTabOptions<Mode>[] = [
-	{
-		label: "Default",
-		value: "default",
-	},
-	{
-		label: "CSS",
-		value: "css",
-	},
-	{
-		label: "Pick",
-		value: "pick",
-	},
-];
-
 enum SubMode {
 	all_sides = "all_sides",
 	xy_sides = "XY sides",

diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -114,7 +114,11 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
-import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -128,23 +132,6 @@ const paramBlurRadiusEl: Ref<HTMLInputElement> = ref(null);
 const paramSpreadRadiusEl: Ref<HTMLInputElement> = ref(null);
 const paramColorEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
-const tabs: WdsTabOptions<Mode>[] = [
-	{
-		label: "Default",
-		value: "default",
-	},
-	{
-		label: "CSS",
-		value: "css",
-	},
-	{
-		label: "Pick",
-		value: "pick",
-	},
-];
-
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: paramOffsetXEl,
 	css: freehandInputEl,

diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -57,7 +57,11 @@ import injectionKeys from "../../injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
-import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -68,23 +72,6 @@ const pickerEl: Ref<HTMLInputElement> = ref(null);
 const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
-const tabs: WdsTabOptions<Mode>[] = [
-	{
-		label: "Default",
-		value: "default",
-	},
-	{
-		label: "CSS",
-		value: "css",
-	},
-	{
-		label: "Pick",
-		value: "pick",
-	},
-];
-
 enum SubMode {
 	fixed = "fixed",
 	fit_content = "fit-content",

diff --git a/src/ui/src/builder/settings/constants/builderFieldsCssTabs.ts b/src/ui/src/builder/settings/constants/builderFieldsCssTabs.ts
@@ -0,0 +1,20 @@
+import type { WdsTabOptions } from "@/wds/WdsTabs.vue";
+
+export type BuilderFieldCssMode = "pick" | "css" | "default";
+
+export const BUILDER_FIELD_CSS_TAB_OPTIONS = Object.freeze<
+	WdsTabOptions<BuilderFieldCssMode>[]
+>([
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+]);