tosijs-ui 1.0.0 → 1.0.2

package/dist/form.js

@@ -1,466 +0,0 @@
-/*#
-# 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.js

@@ -1,115 +0,0 @@
-/*#
-# 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');
-}