tosijs-ui 1.0.0

package/dist/form.d.ts

@@ -0,0 +1,68 @@
+import { Component as XinComponent, ElementCreator } from 'tosijs';
+export declare class XinField extends XinComponent {
+    caption: string;
+    key: string;
+    type: '' | 'checkbox' | 'number' | 'range' | 'date' | 'text' | 'color';
+    optional: boolean;
+    pattern: string;
+    placeholder: string;
+    min: string;
+    max: string;
+    step: string;
+    fixedPrecision: number;
+    value: any;
+    content: HTMLLabelElement;
+    constructor();
+    private valueChanged;
+    handleChange: () => void;
+    initialize(form: XinForm): void;
+    connectedCallback(): void;
+    render(): void;
+}
+export declare class XinForm extends XinComponent {
+    context: {
+        [key: string]: any;
+    };
+    value: {
+        [key: string]: any;
+    };
+    get isValid(): boolean;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            flexDirection: string;
+        };
+        ':host::part(header), :host::part(footer)': {
+            display: string;
+        };
+        ':host::part(content)': {
+            display: string;
+            flexDirection: string;
+            overflow: string;
+            height: string;
+            width: string;
+            position: string;
+            boxSizing: string;
+        };
+        ':host form': {
+            display: string;
+            flex: string;
+            position: string;
+            overflow: string;
+        };
+    };
+    content: (HTMLFormElement | HTMLSlotElement)[];
+    getField: (key: string) => XinField | null;
+    get fields(): any;
+    set fields(values: {
+        [key: string]: any;
+    });
+    submit: () => void;
+    handleSubmit: (event: SubmitEvent) => void;
+    submitCallback: (value: {
+        [key: string]: any;
+    }, isValid: boolean) => void;
+    connectedCallback(): void;
+}
+export declare const xinField: ElementCreator<XinField>;
+export declare const xinForm: ElementCreator<XinForm>;

package/dist/form.js

@@ -0,0 +1,466 @@
+/*#
+# forms
+
+`<xin-form>` and `<xin-field>` can be used to quickly create forms complete with
+[client-side validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#built-in_form_validation_examples).
+
+```js
+const form = preview.querySelector('xin-form')
+preview.querySelector('.submit').addEventListener('click', form.submit)
+```
+```html
+<xin-form value='{"formInitializer": "initial value from form"}'>
+  <h3 slot="header">Example Form Header</h3>
+  <xin-field caption="Required field" key="required"></xin-field>
+  <xin-field optional key="optional"><i>Optional</i> Field</xin-field>
+  <xin-field key="text" type="text" placeholder="type it in here">Tell us a long story</xin-field>
+  <xin-field caption="Zip Code" placeholder="12345 or 12345-6789" key="zipcode" pattern="\d{5}(-\d{4})?"></xin-field>
+  <xin-field caption="Date" key="date" type="date"></xin-field>
+  <xin-field caption="Number" key="number" type="number"></xin-field>
+  <xin-field caption="Range" key="range" type="range" min="0" max="10"></xin-field>
+  <xin-field key="boolean" type="checkbox">😃 <b>Agreed?!</b></xin-field>
+  <xin-field key="color" type="color" value="pink">
+    favorite color
+  </xin-field>
+  <xin-field key="select">
+    Custom Field
+    <select slot="input">
+      <option>This</option>
+      <option>That</option>
+      <option>The Other</option>
+    </select>
+  </xin-field>
+  <xin-field key="tags">
+    Tag List
+    <xin-tag-list editable slot="input" available-tags="pick me,no pick me"></xin-tag-list>
+  </xin-field>
+  <xin-field key="rating">
+    Rate this form!
+    <xin-rating slot="input"></xin-rating>
+  </xin-field>
+  <xin-field key="like">
+    Do you like it?
+    <xin-segmented
+      choices="yes=Yes:thumbsUp,no=No:thumbsDown"
+      slot="input"
+    ></xin-segmented>
+  </xin-field>
+  <xin-field key="relationship">
+    Relationship Status
+    <xin-segmented
+      style="--segmented-direction: column; --segmented-align-items: stretch"
+      choices="couple=In a relationship,single=Single"
+      other="It's complicated…"
+      slot="input"
+    ></xin-segmented>
+  </xin-field>
+  <xin-field key="amount" fixed-precision="2" type="number" prefix="$" suffix="(USD)">
+    What's it worth?
+  </xin-field>
+  <xin-field key="valueInitializer" value="initial value from field">
+    Initialized by field
+  </xin-field>
+  <xin-field key="formInitializer">
+    Initialized by form
+  </xin-field>
+  <button slot="footer" class="submit">Submit</button>
+</xin-form>
+```
+```css
+.preview xin-form {
+  height: 100%;
+}
+
+.preview ::part(header), .preview ::part(footer) {
+  background: var(--inset-bg);
+  justify-content: center;
+  padding: calc(var(--spacing) * 0.5) var(--spacing);
+}
+
+.preview h3, .preview h4 {
+  margin: 0;
+  padding: 0;
+}
+
+.preview ::part(content) {
+  padding: var(--spacing);
+  gap: var(--spacing);
+  background: var(--background);
+}
+
+.preview label {
+  display: grid;
+  grid-template-columns: 180px auto 100px;
+  gap: var(--spacing);
+}
+
+.preview label [part="caption"] {
+  text-align: right;
+}
+
+.preview label:has(:invalid:required)::after {
+  content: '* required'
+}
+
+@media (max-width: 500px) {
+  .preview label [part="caption"] {
+    text-align: center;
+  }
+
+  .preview label {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  .preview label:has(:invalid:required)::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: '*'
+  }
+
+  .preview xin-field [part="field"],
+  .preview xin-field [part="input"] > * {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.preview :invalid {
+  box-shadow: inset 0 0 0 2px #F008;
+}
+```
+
+## `<xin-form>`
+
+`<xin-form>` prevents the default form behavior when a `submit` event is triggered and instead validates the
+form contents (generating feedback if desired) and calls its `submitCallback(value: {[key: string]: any}, isValid: boolean): void`
+method.
+
+`<xin-form>` offers a `fields` proxy that allows values stored in the form to be updated. Any changes will trigger a `change`
+event on the `<xin-form>` (in addition to any events fired by form fields).
+
+`<xin-form>` instances have `value` and `isValid` properties you can access any time. Note that `isValid` is computed
+and triggers form validation.
+
+`<xin-form>` has `header` and `footer` `<slot>`s in addition to default `<slot>`, which is tucked inside a `<form>` element.
+
+## `<xin-field>`
+
+`<xin-field>` is a simple web-component with no shadowDOM that combines an `<input>` field wrapped with a `<label>`. Any
+content of the custom-element will become the `caption` or you can simply set the `caption` attribute.
+
+You can replace the default `<input>` field by adding an element to the slot `input` (it's a `xinSlot`) whereupon
+the `value` of that element will be used instead of the built-in `<input>`. (The `<input>` is retained and
+is used to drive form-validation.)
+
+`<xin-field>` supports the following attributes:
+
+- `caption` labels the field
+- `key` determines the form property the field will populate
+- `type` determines the data-type: '' | 'checkbox' | 'number' | 'range' | 'date' | 'text' | 'color'
+- `optional` turns off the `required` attribute (fields are required by default)
+- `pattern` is an (optional) regex pattern
+- `placeholder` is an (optional) placeholder
+
+The `text` type populates the `input` slot with a `<textarea>` element.
+
+The `color` type populates the `input` slot with a `<xin-color>` element (and thus supports colors with alpha values).
+
+<xin-css-var-editor element-selector="xin-field" target-selector=".preview"></xin-css-var-editor>
+*/
+import { Component as XinComponent, elements, varDefault, } from 'xinjs';
+import { colorInput } from './color-input';
+const { form, slot, xinSlot, label, input, span } = elements;
+function attr(element, name, value) {
+    if (value !== '' && value !== false) {
+        element.setAttribute(name, value);
+    }
+    else {
+        element.removeAttribute(name);
+    }
+}
+function getInputValue(input) {
+    switch (input.type) {
+        case 'checkbox':
+            return input.checked;
+        case 'radio': {
+            const picked = input.parentElement?.querySelector(`input[type="radio"][name="${input.name}"]:checked`);
+            return picked ? picked.value : null;
+        }
+        case 'range':
+        case 'number':
+            return Number(input.value);
+        default:
+            return Array.isArray(input.value) && input.value.length === 0
+                ? null
+                : input.value;
+    }
+}
+function setElementValue(input, value) {
+    if (!(input instanceof HTMLElement)) {
+        // do nothing
+    }
+    else if (input instanceof HTMLInputElement) {
+        switch (input.type) {
+            case 'checkbox':
+                input.checked = value;
+                break;
+            case 'radio':
+                input.checked = value === input.value;
+                break;
+            default:
+                input.value = String(value || '');
+        }
+    }
+    else {
+        if (value != null || input.value != null) {
+            ;
+            input.value = String(value || '');
+        }
+    }
+}
+export class XinField extends XinComponent {
+    caption = '';
+    key = '';
+    type = '';
+    optional = false;
+    pattern = '';
+    placeholder = '';
+    min = '';
+    max = '';
+    step = '';
+    fixedPrecision = -1;
+    value = null;
+    content = label(xinSlot({ part: 'caption' }), span({ part: 'field' }, xinSlot({ part: 'input', name: 'input' }), input({ part: 'valueHolder' })));
+    constructor() {
+        super();
+        this.initAttributes('caption', 'key', 'type', 'optional', 'pattern', 'placeholder', 'min', 'max', 'step', 'fixedPrecision', 'prefix', 'suffix');
+    }
+    valueChanged = false;
+    handleChange = () => {
+        const { input, valueHolder } = this.parts;
+        const inputElement = (input.children[0] || valueHolder);
+        if (inputElement !== valueHolder) {
+            valueHolder.value = inputElement.value;
+        }
+        this.value = getInputValue(inputElement);
+        this.valueChanged = true;
+        const form = this.closest('xin-form');
+        if (form && this.key !== '') {
+            switch (this.type) {
+                case 'checkbox':
+                    form.fields[this.key] = inputElement.checked;
+                    break;
+                case 'number':
+                case 'range':
+                    if (this.fixedPrecision > -1) {
+                        inputElement.value = Number(inputElement.value).toFixed(this.fixedPrecision);
+                        form.fields[this.key] = Number(inputElement.value);
+                    }
+                    else {
+                        form.fields[this.key] = Number(inputElement.value);
+                    }
+                    break;
+                default:
+                    form.fields[this.key] = inputElement.value;
+            }
+        }
+    };
+    initialize(form) {
+        const initialValue = form.fields[this.key] !== undefined ? form.fields[this.key] : this.value;
+        if (initialValue != null && initialValue !== '') {
+            if (form.fields[this.key] == null)
+                form.fields[this.key] = initialValue;
+            this.value = initialValue;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const { input, valueHolder } = this.parts;
+        const form = this.closest(XinForm.tagName);
+        if (form instanceof XinForm) {
+            this.initialize(form);
+        }
+        valueHolder.addEventListener('change', this.handleChange);
+        input.addEventListener('change', this.handleChange, true);
+    }
+    render() {
+        if (this.valueChanged) {
+            this.valueChanged = false;
+            return;
+        }
+        const { input, caption, valueHolder, field } = this.parts;
+        if (caption.textContent?.trim() === '') {
+            caption.append(this.caption !== '' ? this.caption : this.key);
+        }
+        if (this.type === 'text') {
+            input.textContent = '';
+            const textarea = elements.textarea({ value: this.value });
+            if (this.placeholder) {
+                textarea.setAttribute('placeholder', this.placeholder);
+            }
+            input.append(textarea);
+        }
+        else if (this.type === 'color') {
+            input.textContent = '';
+            input.append(colorInput({ value: this.value }));
+        }
+        else if (input.children.length === 0) {
+            attr(valueHolder, 'placeholder', this.placeholder);
+            attr(valueHolder, 'type', this.type);
+            attr(valueHolder, 'pattern', this.pattern);
+            attr(valueHolder, 'min', this.min);
+            attr(valueHolder, 'max', this.max);
+            attr(valueHolder, 'step', this.step);
+        }
+        setElementValue(valueHolder, this.value);
+        setElementValue(input.children[0], this.value);
+        this.prefix
+            ? field.setAttribute('prefix', this.prefix)
+            : field.removeAttribute('prefix');
+        this.suffix
+            ? field.setAttribute('suffix', this.suffix)
+            : field.removeAttribute('suffix');
+        valueHolder.classList.toggle('hidden', input.children.length > 0);
+        if (input.children.length > 0) {
+            valueHolder.setAttribute('tabindex', '-1');
+        }
+        else {
+            valueHolder.removeAttribute('tabindex');
+        }
+        input.style.display = input.children.length === 0 ? 'none' : '';
+        attr(valueHolder, 'required', !this.optional);
+    }
+}
+export class XinForm extends XinComponent {
+    context = {};
+    value = {};
+    get isValid() {
+        const widgets = [...this.querySelectorAll('*')].filter((widget) => widget.required !== undefined);
+        return widgets.find((widget) => !widget.reportValidity()) === undefined;
+    }
+    static styleSpec = {
+        ':host': {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        ':host::part(header), :host::part(footer)': {
+            display: 'flex',
+        },
+        ':host::part(content)': {
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden auto',
+            height: '100%',
+            width: '100%',
+            position: 'relative',
+            boxSizing: 'border-box',
+        },
+        ':host form': {
+            display: 'flex',
+            flex: '1 1 auto',
+            position: 'relative',
+            overflow: 'hidden',
+        },
+    };
+    content = [
+        slot({ part: 'header', name: 'header' }),
+        form({ part: 'form' }, slot({ part: 'content' })),
+        slot({ part: 'footer', name: 'footer' }),
+    ];
+    getField = (key) => {
+        return this.querySelector(`xin-field[key="${key}"]`);
+    };
+    get fields() {
+        if (typeof this.value === 'string') {
+            try {
+                this.value = JSON.parse(this.value);
+            }
+            catch (e) {
+                console.log('<xin-form> could not use its value, expects valid JSON');
+                this.value = {};
+            }
+        }
+        const { getField } = this;
+        const dispatch = this.dispatchEvent.bind(this);
+        return new Proxy(this.value, {
+            get(target, prop) {
+                return target[prop];
+            },
+            set(target, prop, newValue) {
+                if (target[prop] !== newValue) {
+                    target[prop] = newValue;
+                    const field = getField(prop);
+                    if (field) {
+                        field.value = newValue;
+                    }
+                    dispatch(new Event('change'));
+                }
+                return true;
+            },
+        });
+    }
+    set fields(values) {
+        const fields = [...this.querySelectorAll(XinField.tagName)];
+        for (const field of fields) {
+            field.value = values[field.key];
+        }
+    }
+    submit = () => {
+        this.parts.form.dispatchEvent(new Event('submit'));
+    };
+    handleSubmit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.submitCallback(this.value, this.isValid);
+    };
+    submitCallback = (value, isValid) => {
+        console.log('override submitCallback to handle this data', {
+            value,
+            isValid,
+        });
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        const { form } = this.parts;
+        form.addEventListener('submit', this.handleSubmit);
+    }
+}
+export const xinField = XinField.elementCreator({
+    tag: 'xin-field',
+    styleSpec: {
+        ':host [part="field"]': {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            gap: varDefault.prefixSuffixGap('8px'),
+        },
+        ':host [part="field"][prefix]::before': {
+            content: 'attr(prefix)',
+        },
+        ':host [part="field"][suffix]::after': {
+            content: 'attr(suffix)',
+        },
+        ':host [part="field"] > *, :host [part="input"] > *': {
+            width: '100%',
+        },
+        ':host textarea': {
+            resize: 'none',
+        },
+        ':host input[type="checkbox"]': {
+            width: 'fit-content',
+        },
+        ':host .hidden': {
+            position: 'absolute',
+            pointerEvents: 'none',
+            opacity: 0,
+        },
+    },
+});
+export const xinForm = XinForm.elementCreator({
+    tag: 'xin-form',
+});

package/dist/gamepad.d.ts

@@ -0,0 +1,34 @@
+export interface XinButton {
+    index: number;
+    pressed: boolean;
+    value: number;
+}
+export interface XinGamepad {
+    id: string;
+    axes: number[];
+    buttons: {
+        [key: number]: number;
+    };
+}
+export declare function gamepadState(): {
+    id: string;
+    axes: readonly number[];
+    buttons: {
+        [key: number]: number;
+    };
+}[];
+export declare function gamepadText(): string;
+export interface XinXRControllerComponentState {
+    pressed: boolean;
+    axes?: number[];
+}
+export interface XinXRControllerState {
+    [key: string]: XinXRControllerComponentState;
+}
+export interface XinXRControllerMap {
+    [key: string]: XinXRControllerState;
+}
+export declare function xrControllers(xrHelper: any): {
+    [key: string]: XinXRControllerState;
+};
+export declare function xrControllersText(controllers?: XinXRControllerMap): string;

package/dist/gamepad.js

@@ -0,0 +1,115 @@
+/*#
+# gamepads
+
+A couple of utility functions for dealing with gamepads and XRInputs.
+
+`gamepadState()` gives you a condensed version of active gamepad state
+
+`gamepadText()` provides the above in minimal text form for debugging
+
+```js
+const { elements } = xinjs
+const { gamepadText } = xinjsui
+
+const pre = elements.pre()
+preview.append(pre)
+
+const interval = setInterval(() => {
+  if (!pre.closest('body')) {
+    clearInterval(interval)
+  } else {
+    pre.textContent = gamepadText()
+  }
+}, 100)
+```
+
+## XRInput Devices
+
+> This is experimental, the API is changing and stuff doesn't work. Hopefully it
+> will become a lot more generally useful once Apple's VisionPro comes out.
+
+`xrControllers(babylonjsXRHelper)` returns an `XinXRControllerMap` structure that tries to
+conveniently render the current state of XR controls. (The babylonjs API for this is horrific!)
+
+`xrControllerText(controllerMap)` renders the map output by the above in a compact form
+which is useful when debugging.
+*/
+export function gamepadState() {
+    const gamepads = navigator
+        .getGamepads()
+        .filter((p) => p !== null);
+    return gamepads.map((p) => {
+        const { id, axes, buttons } = p;
+        return {
+            id,
+            axes,
+            buttons: buttons
+                .map((button, index) => {
+                const { pressed, value } = button;
+                return {
+                    index,
+                    pressed,
+                    value,
+                };
+            })
+                .filter((b) => b.pressed || b.value !== 0)
+                .reduce((map, button) => {
+                map[button.index] = button.value;
+                return map;
+            }, {}),
+        };
+    });
+}
+export function gamepadText() {
+    const state = gamepadState();
+    return state.length === 0
+        ? 'no active gamepads'
+        : state
+            .map(({ id, axes, buttons }) => {
+            const axesText = axes.map((a) => a.toFixed(2)).join(' ');
+            const buttonText = Object.keys(buttons)
+                .map((key) => `[${key}](${buttons[Number(key)].toFixed(2)})`)
+                .join(' ');
+            return `${id}\n${axesText}\n${buttonText}`;
+        })
+            .join('\n');
+}
+export function xrControllers(xrHelper) {
+    const controllers = {};
+    xrHelper.input.onControllerAddedObservable.add((controller) => {
+        controller.onMotionControllerInitObservable.add((mc) => {
+            const state = {};
+            const componentIds = mc.getComponentIds();
+            componentIds.forEach((componentId) => {
+                const component = mc.getComponent(componentId);
+                state[componentId] = { pressed: component.pressed };
+                component.onButtonStateChangedObservable.add(() => {
+                    state[componentId].pressed = component.pressed;
+                });
+                // TODO does this work?! inquiring minds…
+                if (component.onAxisValueChangedObservable) {
+                    state[componentId].axes = [];
+                    component.onAxisValueChangedObservable.add((axes) => {
+                        state[componentId].axes = axes;
+                    });
+                }
+            });
+            controllers[mc.handedness] = state;
+        });
+    });
+    return controllers;
+}
+export function xrControllersText(controllers) {
+    if (controllers === undefined || Object.keys(controllers).length === 0) {
+        return 'no xr inputs';
+    }
+    return Object.keys(controllers)
+        .map((controllerId) => {
+        const state = controllers[controllerId];
+        const buttonText = Object.keys(state)
+            .filter((componentId) => state[componentId].pressed)
+            .join(' ');
+        return `${controllerId}\n${buttonText}`;
+    })
+        .join('\n');
+}