Skip to content

Commit

Permalink
Merge pull request #383 from raaymax/state_fields_autocomplete
Browse files Browse the repository at this point in the history
feat: state autocompletion for builder settings fields
  • Loading branch information
ramedina86 authored Jun 28, 2024
2 parents 19f9682 + bd5cd3a commit 2f8d82c
Show file tree
Hide file tree
Showing 24 changed files with 478 additions and 93 deletions.
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/ui/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ node_modules/
/blob-report/
/playwright/.cache/
storybook-static/
src/stories/core_components/

*storybook.log
/custom_components_dist
1 change: 1 addition & 0 deletions src/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@tato30/vue-pdf": "^1.9.6",
"arquero": "^5.2.0",
"chroma-js": "^2.4.2",
"fuse.js": "7.0.0",
"mapbox-gl": "3.2.0",
"marked": "^12.0.1",
"monaco-editor": "^0.47.0",
Expand Down
11 changes: 8 additions & 3 deletions src/ui/src/builder/BuilderFieldsAlign.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div ref="rootEl" class="BuilderFieldsAlign" tabindex="-1">
<div
ref="rootEl"
class="BuilderFieldsAlign"
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
Expand Down Expand Up @@ -43,10 +48,9 @@
/>
</div>

<input
<BuilderTemplateInput
v-if="mode == 'css'"
ref="freehandInputEl"
type="text"
:value="component.content[fieldKey]"
@input="handleInputCss"
/>
Expand All @@ -70,6 +74,7 @@ import { Component } from "../writerTypes";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderSelect from "./BuilderSelect.vue";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down
6 changes: 3 additions & 3 deletions src/ui/src/builder/BuilderFieldsColor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
ref="rootEl"
class="BuilderFieldsColor"
tabindex="-1"
:data-key="fieldKey"
:data-automation-key="fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
Expand Down Expand Up @@ -49,10 +49,9 @@
/>
</div>

<input
<BuilderTemplateInput
v-if="mode == 'css'"
ref="freehandInputEl"
type="text"
:value="component.content[fieldKey]"
@input="handleInput"
/>
Expand All @@ -74,6 +73,7 @@ import {
import { Component } from "../writerTypes";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down
30 changes: 16 additions & 14 deletions src/ui/src/builder/BuilderFieldsKeyValue.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div ref="rootEl" class="BuilderFieldsOptions" tabindex="-1">
<div
ref="rootEl"
class="BuilderFieldsOptions"
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
Expand Down Expand Up @@ -38,17 +43,19 @@
</div>
</div>
<div class="formAdd">
<input
<BuilderTemplateInput
ref="assistedKeyEl"
v-model="formAdd.key"
type="text"
class="inputKey"
placeholder="Type a key..."
:value="formAdd.key"
@update:value="($event) => (formAdd.key = $event)"
@keydown.enter="addAssistedEntry"
/>
<input
v-model="formAdd.value"
type="text"
<BuilderTemplateInput
class="inputValue"
placeholder="Type a value..."
:value="formAdd.value"
@update:value="($event) => (formAdd.value = $event)"
@keydown.enter="addAssistedEntry"
/>
<button @click="addAssistedEntry">
Expand Down Expand Up @@ -81,6 +88,7 @@ import { Component } from "../writerTypes";
import BuilderFieldsObject from "./BuilderFieldsObject.vue";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down Expand Up @@ -251,13 +259,7 @@ onMounted(async () => {
padding: 12px;
}
textarea {
resize: vertical;
height: 8em;
padding: 12px;
}
input {
.BuilderTemplateInput {
margin-bottom: 8px;
}
</style>
13 changes: 6 additions & 7 deletions src/ui/src/builder/BuilderFieldsObject.vue
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
<template>
<textarea
v-capture-tabs
<BuilderTemplateInput
class="BuilderFieldsObject"
:data-automation-key="props.fieldKey"
multiline="true"
variant="code"
:value="component.content[fieldKey]"
autocorrect="off"
autocomplete="off"
spellcheck="false"
:placeholder="templateField.default"
:placeholder="templateField.placeholder"
@input="
(ev: Event) =>
formatAndSetContentValue((ev.target as HTMLInputElement).value)
"
></textarea>
/>
</template>

<script setup lang="ts">
import { toRefs, inject, computed } from "vue";
import { Component } from "../writerTypes";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down
11 changes: 8 additions & 3 deletions src/ui/src/builder/BuilderFieldsPadding.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div ref="rootEl" class="BuilderFieldsPadding" tabindex="-1">
<div
ref="rootEl"
class="BuilderFieldsPadding"
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
Expand Down Expand Up @@ -113,10 +118,9 @@
</div>
</div>

<input
<BuilderTemplateInput
v-if="mode == 'css'"
ref="freehandInputEl"
type="text"
:value="component.content[fieldKey]"
@input="handleInputCss"
/>
Expand All @@ -141,6 +145,7 @@ import injectionKeys from "../injectionKeys";
import BuilderSelect from "./BuilderSelect.vue";
import { languages } from "monaco-editor";
import css = languages.css;
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down
11 changes: 8 additions & 3 deletions src/ui/src/builder/BuilderFieldsShadow.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div ref="rootEl" class="BuilderFieldsShadow" tabindex="-1">
<div
ref="rootEl"
class="BuilderFieldsShadow"
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
Expand Down Expand Up @@ -113,10 +118,9 @@
</div>
</div>

<input
<BuilderTemplateInput
v-if="mode == 'css'"
ref="freehandInputEl"
type="text"
:value="component.content[fieldKey]"
@input="handleCSSInput"
/>
Expand All @@ -138,6 +142,7 @@ import {
import { Component } from "../writerTypes";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down
56 changes: 14 additions & 42 deletions src/ui/src/builder/BuilderFieldsText.vue
Original file line number Diff line number Diff line change
@@ -1,55 +1,28 @@
<template>
<div class="BuilderFieldsText" :data-key="props.fieldKey">
<div class="BuilderFieldsText" :data-automation-key="props.fieldKey">
<template
v-if="
!templateField.control ||
templateField.control == FieldControl.Text
"
>
<input
type="text"
:value="component.content[fieldKey]"
<BuilderTemplateInput
class="content"
autocorrect="off"
autocomplete="off"
spellcheck="false"
:value="component.content[fieldKey]"
:placeholder="templateField?.default"
:list="
templateField.options
? `list-${componentId}-${fieldKey}`
: undefined
"
:options="options"
@input="handleInput"
/>
<datalist
v-if="templateField.options"
:id="`list-${componentId}-${fieldKey}`"
>
<option
v-for="(option, optionKey) in options"
:key="optionKey"
:value="optionKey"
>
<template
v-if="option.toLowerCase() !== optionKey.toLowerCase()"
>
{{ option }}
</template>
</option>
</datalist>
</template>
<template v-else-if="templateField.control == FieldControl.Textarea">
<textarea
v-capture-tabs
<BuilderTemplateInput
multiline="true"
variant="text"
class="content"
:value="component.content[fieldKey]"
:placeholder="templateField?.default"
autocorrect="off"
autocomplete="off"
spellcheck="false"
@input="handleInput"
>
</textarea>
/>
</template>
</div>
</template>
Expand All @@ -59,6 +32,7 @@ import { toRefs, inject, computed } from "vue";
import { Component, FieldControl } from "../writerTypes";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down Expand Up @@ -95,15 +69,13 @@ const handleInput = (ev: Event) => {
};
</script>

<style scoped>
@import "./sharedStyles.css";
.content {
<style>
.BuilderFieldsText .content {
padding: 16px 12px 12px 12px;
width: 100%;
}
</style>

textarea {
resize: vertical;
}
<style scoped>
@import "./sharedStyles.css";
</style>
11 changes: 8 additions & 3 deletions src/ui/src/builder/BuilderFieldsWidth.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div ref="rootEl" class="BuilderFieldsWidth" tabindex="-1">
<div
ref="rootEl"
class="BuilderFieldsWidth"
tabindex="-1"
:data-automation-key="props.fieldKey"
>
<div class="chipStackContainer">
<div class="chipStack">
<button
Expand Down Expand Up @@ -52,10 +57,9 @@
</div>
</div>

<input
<BuilderTemplateInput
v-if="mode == 'css'"
ref="freehandInputEl"
type="text"
:value="component.content[fieldKey]"
@input="handleInputCss"
/>
Expand All @@ -78,6 +82,7 @@ import { Component } from "../writerTypes";
import { useComponentActions } from "./useComponentActions";
import injectionKeys from "../injectionKeys";
import BuilderSelect from "./BuilderSelect.vue";
import BuilderTemplateInput from "./BuilderTemplateInput.vue";
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
Expand Down
Loading

0 comments on commit 2f8d82c

Please sign in to comment.