Skip to content

Commit

Permalink
feat(ui): introduce WdsTabs and use in builder - WF-127
Browse files Browse the repository at this point in the history
  • Loading branch information
@madeindjs
madeindjs committed Dec 13, 2024
1 parent e1322cd commit 14a67b2
Show file tree
Hide file tree
Showing 11 changed files with 266 additions and 274 deletions.
61 changes: 25 additions & 36 deletions src/ui/src/builder/settings/BuilderFieldsAlign.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,11 @@
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'default' }"
@click="
() => {
setMode('default');
setContentValue(component.id, fieldKey, undefined);
}
"
>
Default
</button>
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'css' }"
@click="setMode('css')"
>
CSS
</button>
<button
class="chip"
:class="{ active: mode == 'pick' }"
tabindex="0"
@click="setMode('pick')"
>
Pick
</button>
</div>
</div>
<WdsTabs
:tabs="tabs"
:model-value="mode"
@update:model-value="setMode"
/>

<div v-if="mode == 'pick' || mode == 'css'" class="main">
<div v-if="mode == 'pick'" class="pickerContainer">
Expand Down Expand Up @@ -75,6 +47,7 @@ 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";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand All @@ -86,6 +59,21 @@ 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",
Expand Down Expand Up @@ -231,6 +219,10 @@ const setMode = async (newMode: Mode) => {
mode.value = newMode;
await nextTick();
autofocus();
if (newMode === "default") {
setContentValue(component.value.id, fieldKey.value, undefined);
}
};
const handleInputSelect = (select: string) => {
Expand Down Expand Up @@ -263,9 +255,6 @@ onBeforeUnmount(() => {
<style scoped>
@import "../sharedStyles.css";
.chipStackContainer {
margin-top: 4px;
}
.main {
margin-top: 4px;
}
Expand Down
66 changes: 27 additions & 39 deletions src/ui/src/builder/settings/BuilderFieldsColor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,11 @@
tabindex="-1"
:data-automation-key="fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'default' }"
@click="
() => {
setMode('default');
setContentValue(component.id, fieldKey, undefined);
}
"
>
Default
</button>
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'css' }"
@click="setMode('css')"
>
CSS
</button>
<button
class="chip"
:class="{ active: mode == 'pick' }"
tabindex="0"
@click="setMode('pick')"
>
Pick
</button>
</div>
</div>

<WdsTabs
:tabs="tabs"
:model-value="mode"
@update:model-value="setMode"
/>
<div v-if="mode == 'pick' || mode == 'css'" class="main">
<div v-if="mode == 'pick'" class="pickerContainer">
<input
Expand Down Expand Up @@ -74,6 +45,24 @@ 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",
},
];
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand All @@ -83,8 +72,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 focusEls: Record<Mode, Ref<HTMLInputElement>> = {
pick: pickerEl,
css: freehandInputEl,
Expand Down Expand Up @@ -123,6 +110,10 @@ const setMode = async (newMode: Mode) => {
mode.value = newMode;
await nextTick();
autofocus();
if (newMode === "default") {
setContentValue(component.value.id, fieldKey.value, undefined);
}
};
const handleInput = (ev: Event) =>
Expand All @@ -144,9 +135,6 @@ onBeforeUnmount(() => {
<style scoped>
@import "../sharedStyles.css";
.chipStackContainer {
margin-top: 4px;
}
.main {
margin-top: 4px;
}
Expand Down
34 changes: 13 additions & 21 deletions src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,12 @@
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
class="chip"
:class="{ active: mode == 'assisted' }"
tabindex="0"
@click="setMode('assisted')"
>
Static List
</button>
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'freehand' }"
@click="setMode('freehand')"
>
JSON
</button>
</div>
</div>
<WdsTabs
class="BuilderFieldsOptions__tabs"
:tabs="tabs"
:model-value="mode"
@update:model-value="setMode"
/>

<template v-if="mode == 'assisted'">
<div class="staticList">
Expand Down Expand Up @@ -91,6 +77,7 @@ import type { InstancePath } from "@/writerTypes";
import BuilderFieldsObject from "./BuilderFieldsObject.vue";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
import { useComponentActions } from "../useComponentActions";
import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand All @@ -115,6 +102,11 @@ const formAdd: Ref<{ key: string; value: string }> = ref({
value: "",
});
const tabs: WdsTabOptions<Mode>[] = [
{ label: "Static List", value: "assisted" },
{ label: "JSON", value: "freehand" },
];
const { getEvaluatedFields } = useEvaluator(wf);
const evaluatedValue = computed<Record<string, string | number | null>>(
Expand Down Expand Up @@ -191,7 +183,7 @@ onMounted(async () => {
<style scoped>
@import "../sharedStyles.css";
.chipStackContainer {
.BuilderFieldsOptions__tabs {
margin-bottom: 8px;
}
Expand Down
62 changes: 25 additions & 37 deletions src/ui/src/builder/settings/BuilderFieldsPadding.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,11 @@
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'default' }"
@click="
() => {
setMode('default');
setContentValue(component.id, fieldKey, undefined);
}
"
>
Default
</button>
<button
class="chip"
tabindex="0"
:class="{ active: mode == 'css' }"
@click="setMode('css')"
>
CSS
</button>
<button
class="chip"
:class="{ active: mode == 'pick' }"
tabindex="0"
@click="setMode('pick')"
>
Pick
</button>
</div>
</div>
<WdsTabs
:tabs="tabs"
:model-value="mode"
@update:model-value="setMode"
/>

<div v-if="mode == 'pick' || mode == 'css'" class="main">
<div v-if="mode == 'pick'" class="pickerContainer">
Expand Down Expand Up @@ -146,6 +118,7 @@ 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";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand All @@ -158,6 +131,21 @@ 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",
Expand Down Expand Up @@ -317,6 +305,10 @@ const setMode = async (newMode: Mode) => {
mode.value = newMode;
await nextTick();
autofocus();
if (newMode === "default") {
setContentValue(component.value.id, fieldKey.value, undefined);
}
};
const handleInputSelect = (select: string) => {
Expand Down Expand Up @@ -393,10 +385,6 @@ onBeforeUnmount(() => {
@import "../sharedStyles.css";
@import "../ico.css";
.chipStackContainer {
margin-top: 4px;
}
.main {
margin-top: 4px;
}
Expand Down
Loading

0 comments on commit 14a67b2

Please sign in to comment.