From da307775f32935de86386d6cc03ed8c87ec99115 Mon Sep 17 00:00:00 2001 From: Alexandre Rousseau Date: Fri, 13 Dec 2024 09:49:14 +0100 Subject: [PATCH] chore(ui): introduce constant to DRY - WF-127 --- .../builder/settings/BuilderFieldsAlign.vue | 23 ++++--------------- .../builder/settings/BuilderFieldsColor.vue | 23 ++++--------------- .../builder/settings/BuilderFieldsPadding.vue | 23 ++++--------------- .../builder/settings/BuilderFieldsShadow.vue | 23 ++++--------------- .../builder/settings/BuilderFieldsWidth.vue | 23 ++++--------------- .../constants/builderFieldsCssTabs.ts | 20 ++++++++++++++++ 6 files changed, 45 insertions(+), 90 deletions(-) create mode 100644 src/ui/src/builder/settings/constants/builderFieldsCssTabs.ts diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue index b95c1e42d..22cdbc446 100644 --- 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 = ref(null); const pickerEl: Ref = ref(null); const freehandInputEl: Ref = ref(null); -type Mode = "pick" | "css" | "default"; - -const tabs: WdsTabOptions[] = [ - { - 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 index 998caea24..87114caa0 100644 --- 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[] = [ - { - 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 index 70e29e215..0312f516c 100644 --- 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 = ref(null); const fixedEl = ref>(null); const freehandInputEl: Ref = ref(null); -type Mode = "pick" | "css" | "default"; - -const tabs: WdsTabOptions[] = [ - { - 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 index c52e09363..03cddfb69 100644 --- 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 = ref(null); const paramSpreadRadiusEl: Ref = ref(null); const paramColorEl: Ref = ref(null); -type Mode = "pick" | "css" | "default"; - -const tabs: WdsTabOptions[] = [ - { - label: "Default", - value: "default", - }, - { - label: "CSS", - value: "css", - }, - { - label: "Pick", - value: "pick", - }, -]; - const focusEls: Record> = { pick: paramOffsetXEl, css: freehandInputEl, diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue index a9d099fb3..12e898fae 100644 --- 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 = ref(null); const fixedEl = ref>(null); const freehandInputEl: Ref = ref(null); -type Mode = "pick" | "css" | "default"; - -const tabs: WdsTabOptions[] = [ - { - 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 new file mode 100644 index 000000000..2e1f78b57 --- /dev/null +++ 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[] +>([ + { + label: "Default", + value: "default", + }, + { + label: "CSS", + value: "css", + }, + { + label: "Pick", + value: "pick", + }, +]);