webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Lexical: Added color picker/indicator to form fields

Browse Source
This commit is contained in:
Dan Brown
2025-01-18 11:12:43 +00:00
parent c091f67db3
commit 04cca77ae6
10 changed files with 125 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/wysiwyg/ui/framework/forms.ts
View File

@@ -19,15 +19,17 @@ export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefiniti
valuesByLabel: Record<string, string>
}
export type EditorFormFields = (EditorFormFieldDefinition|EditorUiBuilderDefinition)[];
interface EditorFormTabDefinition {
label: string;
contents: EditorFormFieldDefinition[];
contents: EditorFormFields;
}
export interface EditorFormDefinition {
submitText: string;
action: (formData: FormData, context: EditorUiContext) => Promise<boolean>;
fields: (EditorFormFieldDefinition|EditorUiBuilderDefinition)[];
fields: EditorFormFields;
}
export class EditorFormField extends EditorUiElement {
@@ -41,6 +43,7 @@ export class EditorFormField extends EditorUiElement {
setValue(value: string) {
const input = this.getDOMElement().querySelector('input,select,textarea') as HTMLInputElement;
input.value = value;
input.dispatchEvent(new Event('change'));
}
getName(): string {
@@ -155,11 +158,17 @@ export class EditorForm extends EditorContainerUiElement {
export class EditorFormTab extends EditorContainerUiElement {
protected definition: EditorFormTabDefinition;
protected fields: EditorFormField[];
protected fields: EditorUiElement[];
protected id: string;
constructor(definition: EditorFormTabDefinition) {
const fields = definition.contents.map(fieldDef => new EditorFormField(fieldDef));
const fields = definition.contents.map(fieldDef => {
if (isUiBuilderDefinition(fieldDef)) {
return fieldDef.build();
}
return new EditorFormField(fieldDef)
});
super(fields);
this.definition = definition;