terrier-engine 4.33.0 → 4.34.1

package/data-dive/plots/dive-plot-traces.ts

@@ -59,7 +59,7 @@ class TraceStyleFields extends TerrierFormFields<TraceStyle> {
                     .label("Color")
                     .textInput({placeholder: 'Color'})
 
-                this.numericCompoundField(container, 'strokeWidth')
+                this.compoundField(container, 'strokeWidth')
                     .label("Width")
                     .numberInput({placeholder: 'Width'})
 

package/package.json

@@ -4,7 +4,7 @@
   "files": [
     "*"
   ],
-  "version": "4.33.0",
+  "version": "4.34.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"

package/terrier/forms.ts

@@ -1,7 +1,16 @@
-import {Field, FormFields, FormPartData, InputType, KeyOfType, SelectOptions} from "tuff-core/forms"
+import {FieldConstructor, FormFields, FormPartData, InputType, KeyOfType, SelectOptions} from "tuff-core/forms"
 import {DbErrors} from "./db-client"
 import {PartTag} from "tuff-core/parts"
-import {DivTag, InputTag, InputTagAttrs, SelectTag, SelectTagAttrs, TextAreaTag, TextAreaTagAttrs} from "tuff-core/html"
+import {
+    DefaultTagAttrs,
+    DivTag,
+    InputTag,
+    InputTagAttrs,
+    SelectTag,
+    SelectTagAttrs,
+    TextAreaTag,
+    TextAreaTagAttrs
+} from "tuff-core/html"
 import TerrierPart from "./parts/terrier-part"
 import GlypPicker from "./parts/glyp-picker"
 import Glyps from "./glyps"
@@ -90,33 +99,27 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
         })
     }
 
-    protected input<Key extends KeyOfType<T, any> & string>(parent: PartTag, type: InputType, name: Key, serializerType: {
-        new(name: string): Field<any, Element>
-    }, attrs?: InputTagAttrs): InputTag {
+    protected addErrorClass(name: string, attrs: DefaultTagAttrs) {
         if (this.errors && this.errors[name]) {
             attrs ||= {}
             attrs.classes ||= []
             attrs.classes.push('error')
         }
+    }
+
+    input<Key extends KeyOfType<T,any> & string>(parent: PartTag, type: InputType, name: Key, serializerType: FieldConstructor<any, Element>, attrs: InputTagAttrs={}): InputTag {
+        this.addErrorClass(name, attrs)
         return super.input(parent, type, name, serializerType, attrs);
     }
 
-    select<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, options?: SelectOptions, attrs: SelectTagAttrs = {}): SelectTag {
-        if (this.errors && this.errors[name]) {
-            attrs ||= {}
-            attrs.classes ||= []
-            attrs.classes.push('error')
-        }
-        return super.select(parent, name, options, attrs);
+    select<Key extends keyof T & string, TSerializer extends FieldConstructor<T[Key], HTMLSelectElement>>(parent: PartTag, name: Key, options?: SelectOptions, attrs: SelectTagAttrs = {}, serializerType?: TSerializer): SelectTag {
+        this.addErrorClass(name, attrs)
+        return super.select(parent, name, options, attrs, serializerType);
     }
 
-    textArea<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, attrs: TextAreaTagAttrs={}): TextAreaTag {
-        if (this.errors && this.errors[name]) {
-            attrs ||= {}
-            attrs.classes ||= []
-            attrs.classes.push('error')
-        }
-        return super.textArea(parent, name, attrs);
+    textArea<Key extends keyof T & string, TSerializer extends FieldConstructor<T[Key], HTMLTextAreaElement>>(parent: PartTag, name: Key, attrs: TextAreaTagAttrs = {}, serializerType?: TSerializer): TextAreaTag {
+        this.addErrorClass(name, attrs)
+        return super.textArea(parent, name, attrs, serializerType);
     }
 
     /**
@@ -146,22 +149,14 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
         }).emitClick(this.pickGlypKey, {key})
     }
 
-    compoundField<Key extends KeyOfType<T, string> & string>(parent: PartTag, key: Key, ...classes: string[]): StringCompoundFieldBuilder<T, Key> {
-        return new StringCompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
-    }
-
-    numericCompoundField<Key extends KeyOfType<T, number> & string>(parent: PartTag, key: Key, ...classes: string[]): NumericCompoundFieldBuilder<T, Key> {
-        return new NumericCompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
+    compoundField<Key extends keyof T & string>(parent: PartTag, key: Key, ...classes: string[]): CompoundFieldBuilder<T, Key> {
+        return new CompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
     }
 
     fileCompoundField<Key extends KeyOfType<T, File> & string>(parent: PartTag, key: Key, ...classes: string[]): FileCompoundFieldBuilder<T, Key> {
         return new FileCompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
     }
 
-    booleanCompoundField<Key extends KeyOfType<T, boolean> & string>(parent: PartTag, key: Key, ...classes: string[]): BooleanCompoundFieldBuilder<T, Key> {
-        return new BooleanCompoundFieldBuilder(this, parent, key, (this.part as TerrierPart<any>).theme, ...classes)
-    }
-
     /**
      * Makes a label with a radio and title span inside of it.
      * @param parent
@@ -170,7 +165,7 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
      * @param title the title to put in the label span
      * @param attrs attributes for the radio input
      */
-    radioLabel<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, value: string, title?: string, attrs: InputTagAttrs = {}) {
+    radioLabel<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, value: T[Key], title?: string, attrs: InputTagAttrs = {}) {
         return parent.label('.body-size', label => {
             this.radio(label, name, value, attrs)
             label.span().text(title || value)
@@ -179,7 +174,7 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
 
 }
 
-abstract class CompoundFieldBuilder<T extends Record<string, unknown>, K extends KeyOfType<T, unknown> & string> {
+class CompoundFieldBuilder<T extends Record<string, unknown>, K extends keyof T & string> {
 
     field!: DivTag
 
@@ -194,119 +189,120 @@ abstract class CompoundFieldBuilder<T extends Record<string, unknown>, K extends
         }
     }
 
-    readonly(text?: string): this {
-        this.field.div('.readonly', {text: text ?? Objects.safeToString(this.formFields.data[this.key]) })
+    hiddenInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.hiddenInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    label(text: string, ...classes: string[]): this {
-        this.field.label({ text, htmlFor: `${this.formFields.part.id}-${this.key}`, classes })
+    textInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.textInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    tooltip(text: string): this {
-        this.field.dataAttr('tooltip', text)
+    numberInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.numberInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    hint(hint: Hint, options?: HintRenderOptions): this {
-        Hints.renderHint(this.theme, this.field, hint, options)
+    emailInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.emailInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    icon(icon: IconName, color: ColorName = 'secondary'): this {
-        this.theme.renderIcon(this.field, icon, color)
+    phoneInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.phoneInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    css(styles: InlineStyle): this {
-        this.field.css(styles)
+    passwordInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.passwordInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    action(action: Action, color: ColorName = 'link'): this {
-        action.classes ||= []
-        action.classes.push(color)
-        this.theme.renderActions(this.field, action, {iconColor: color})
+    searchInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.searchInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-
-    class(...s: string[]): this {
-        this.field.class(...s)
+    urlInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.urlInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-}
-
-class StringCompoundFieldBuilder<T extends Record<string, unknown>, K extends KeyOfType<T, string> & string> extends CompoundFieldBuilder<T, K> {
-    hiddenInput(attrs?: InputTagAttrs): this {
-        this.formFields.hiddenInput(this.field, this.key, attrs ?? {})
+    textArea(attrs?: TextAreaTagAttrs, serializerType?: FieldConstructor<T[K], HTMLTextAreaElement>): this {
+        this.formFields.textArea(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    textInput(attrs?: InputTagAttrs): this {
-        this.formFields.textInput(this.field, this.key, attrs ?? {})
+    dateInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.dateInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    emailInput(attrs?: InputTagAttrs): this {
-        this.formFields.emailInput(this.field, this.key, attrs ?? {})
+    timeInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.timeInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    phoneInput(attrs?: InputTagAttrs): this {
-        this.formFields.phoneInput(this.field, this.key, attrs ?? {})
+    dateTimeInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.dateTimeInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    passwordInput(attrs?: InputTagAttrs): this {
-        this.formFields.passwordInput(this.field, this.key, attrs ?? {})
+    monthInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.monthInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    searchInput(attrs?: InputTagAttrs): this {
-        this.formFields.searchInput(this.field, this.key, attrs ?? {})
+    weekInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.weekInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    urlInput(attrs?: InputTagAttrs): this {
-        this.formFields.urlInput(this.field, this.key, attrs ?? {})
+    radio(value: T[K], attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.radio(this.field, this.key, value, attrs ?? {}, serializerType)
         return this
     }
-    textArea(attrs?: TextAreaTagAttrs): this {
-        this.formFields.textArea(this.field, this.key, attrs ?? {})
+    checkbox(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.checkbox(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    dateInput(attrs?: InputTagAttrs): this {
-        this.formFields.dateInput(this.field, this.key, attrs ?? {})
+    select(selectOptions?: SelectOptions, attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLSelectElement>): this {
+        this.formFields.select(this.field, this.key, selectOptions, attrs ?? {}, serializerType)
         return this
     }
-    timeInput(attrs?: InputTagAttrs): this {
-        this.formFields.timeInput(this.field, this.key, attrs ?? {})
+    colorInput(attrs?: InputTagAttrs, serializerType?: FieldConstructor<T[K], HTMLInputElement>): this {
+        this.formFields.colorInput(this.field, this.key, attrs ?? {}, serializerType)
         return this
     }
-    dateTimeInput(attrs?: InputTagAttrs): this {
-        this.formFields.dateTimeInput(this.field, this.key, attrs ?? {})
+
+    readonly(text?: string): this {
+        this.field.div('.readonly-field', {text: text ?? Objects.safeToString(this.formFields.data[this.key]) })
         return this
     }
-    monthInput(attrs?: InputTagAttrs): this {
-        this.formFields.monthInput(this.field, this.key, attrs ?? {})
+
+    label(text: string, ...classes: string[]): this {
+        this.field.label({ text, htmlFor: `${this.formFields.part.id}-${this.key}`, classes })
         return this
     }
-    weekInput(attrs?: InputTagAttrs): this {
-        this.formFields.weekInput(this.field, this.key, attrs ?? {})
+
+    tooltip(text: string): this {
+        this.field.dataAttr('tooltip', text)
         return this
     }
-    radio(value: string, attrs?: InputTagAttrs): this {
-        this.formFields.radio(this.field, this.key, value, attrs ?? {})
+
+    hint(hint: Hint, options?: HintRenderOptions): this {
+        Hints.renderHint(this.theme, this.field, hint, options)
         return this
     }
-    select(selectOptions?: SelectOptions, attrs?: InputTagAttrs): this {
-        this.formFields.select(this.field, this.key, selectOptions, attrs ?? {})
+
+    icon(icon: IconName, color: ColorName | null = 'secondary'): this {
+        this.field.label('.icon-only', label => {
+            this.theme.renderIcon(label, icon, color)
+        })
         return this
     }
-    colorInput(attrs?: InputTagAttrs): this {
-        this.formFields.colorInput(this.field, this.key, attrs ?? {})
+
+    css(styles: InlineStyle): this {
+        this.field.css(styles)
         return this
     }
-}
 
-class NumericCompoundFieldBuilder<T extends Record<string, unknown>, K extends KeyOfType<T, number> & string> extends CompoundFieldBuilder<T, K> {
-    numberInput(attrs?: InputTagAttrs): this {
-        this.formFields.numberInput(this.field, this.key, attrs ?? {})
+    action(action: Action, color: ColorName = 'link'): this {
+        action.classes ||= []
+        action.classes.push(color)
+        this.theme.renderActions(this.field, action, {iconColor: color})
+        return this
+    }
+
+    class(...s: string[]): this {
+        this.field.class(...s)
         return this
     }
 }
@@ -318,13 +314,6 @@ class FileCompoundFieldBuilder<T extends Record<string, unknown>, K extends KeyO
     }
 }
 
-class BooleanCompoundFieldBuilder<T extends Record<string, unknown>, K extends KeyOfType<T, boolean> & string> extends CompoundFieldBuilder<T, K> {
-
-    checkbox(attrs?: InputTagAttrs): this {
-        this.formFields.checkbox(this.field, this.key, attrs ?? {})
-        return this
-    }
-}