tosijs-ui 1.0.0

package/dist/select.d.ts

@@ -0,0 +1,43 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+import { MenuItem } from './menu';
+type OptionRequest = () => Promise<string | undefined>;
+export interface SelectOption {
+    icon?: string | HTMLElement;
+    caption: string;
+    value: string | OptionRequest;
+}
+export interface SelectOptionSubmenu {
+    icon?: string | HTMLElement;
+    caption: string;
+    options: SelectOptions;
+}
+export type SelectOptions = Array<string | null | SelectOption | SelectOptionSubmenu>;
+export declare class XinSelect extends WebComponent {
+    editable: boolean;
+    showIcon: boolean;
+    hideCaption: boolean;
+    options: string | SelectOptions;
+    value: string;
+    placeholder: string;
+    filter: string;
+    localized: boolean;
+    private setValue;
+    private getValue;
+    get selectOptions(): SelectOptions;
+    private buildOptionMenuItem;
+    get optionsMenu(): MenuItem[];
+    handleChange: (event: Event) => void;
+    handleKey: (event: KeyboardEvent) => void;
+    filterMenu: (...args: any[]) => void;
+    popOptions: (event?: Event) => void;
+    content: () => HTMLButtonElement[];
+    constructor();
+    get allOptions(): SelectOption[];
+    findOption(): SelectOption;
+    localeChanged: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}
+export declare const xinSelect: ElementCreator<XinSelect>;
+export {};

package/dist/select.js

@@ -0,0 +1,427 @@
+/*#
+# select
+
+`<xin-select>` (`xinSelect` is the `ElementCreator`) is a replacement for the lamentable
+built in `<select>` element that addresses its various shortcomings.
+
+- since `<xin-select>` is powered by `popMenu`, and supports separators and submenus.
+- options can have icons.
+- `<xin-select>` will retain and display a value even if the matching option is missing.
+- its displayed value can be made `editable`, allowing use as a "combo box".
+- options can have `async` callbacks that return a value.
+- picking an item triggers an `action` event even if the value hasn't changed.
+- available options are set via the `options` attribute or the element's `options` property (not `<option>` elements)
+
+```html
+<xin-select
+  title="simple select"
+  options="this,that,,the other"
+  value="not an option!"
+></xin-select><br>
+<xin-select
+  show-icon
+  title="has captions"
+  class="captions"
+  value="image"
+></xin-select><br>
+<xin-select
+  show-icon
+  title="combo select with icons"
+  class="icons"
+  editable
+  placeholder="pick an icon"
+></xin-select><br>
+<xin-select
+  show-icon
+  hide-caption
+  title="icons only"
+  class="icons-only"
+  placeholder="pick an icon"
+></xin-select>
+<pre contenteditable>Select some text in here…
+…to check for focus stealing</pre>
+```
+```js
+const { icons } = xinjsui
+
+const captions = preview.querySelector('.captions')
+
+captions.options = [
+  {
+    caption: 'a heading',
+    value: 'heading'
+  },
+  {
+    caption: 'a paragraph',
+    value: 'paragraph'
+  },
+  null,
+  {
+    caption: 'choose some other',
+    options: [
+      {
+        icon: 'image',
+        caption: 'an image',
+        value: 'image'
+      },
+      {
+        icon: 'fileText',
+        caption: 'a text file',
+        value: 'text',
+      },
+      {
+        icon: 'video',
+        caption: 'a video',
+        value: 'video'
+      },
+      null,
+      {
+        caption: 'anything goes…',
+        value: () => prompt('Enter your other', 'other') || undefined
+      },
+      {
+        caption: 'brother… (after 1s delay)',
+        value: async () => new Promise(resolve => {
+          setTimeout(() => resolve('brother'), 1000)
+        })
+      }
+    ]
+  }
+]
+
+const iconsSelect = preview.querySelector('.icons')
+const iconsOnly = preview.querySelector('.icons-only')
+
+iconsSelect.options = iconsOnly.options = Object.keys(icons).sort().map(icon =>({
+  icon,
+  caption: icon,
+  value: icon
+}))
+
+preview.addEventListener('action', (event) => {
+  console.log(event.target.title, 'user picked', event.target.value)
+}, true)
+
+preview.addEventListener('change', (event) => {
+  console.log(event.target.title, 'changed to', event.target.value)
+}, true)
+```
+<xin-css-var-editor element-selector="xin-select"></xin-css-var-editor>
+
+## `options`
+
+    type OptionRequest = () => Promise<string | undefined>
+
+    export interface SelectOption {
+      icon?: string | HTMLElement
+      caption: string
+      value: string | OptionRequest
+    }
+
+    export interface SelectOptionSubmenu {
+      icon?: string | HTMLElement
+      caption: string
+      options: SelectOptions
+    }
+
+    export type SelectOptions = Array<string | null | SelectOption | SelectOptionSubmenu>
+
+A `<xin-select>` can be assigned `options` as a string of comma-delimited choices,
+or be provided a `SelectOptions` array (which allows for submenus, separators, etc.).
+
+## Attributes
+
+`<xin-select>` supports several attributes:
+
+- `editable` lets the user directly edit the value (like a "combo box").
+- `show-icon` displays the icon corresponding to the currently selected value.
+- `hide-caption` hides the caption.
+- `placeholder` allows you to set a placeholder.
+- `options` allows you to assign options as a comma-delimited string attribute.
+
+## Events
+
+Picking an option triggers an `action` event (whether or not this changes the value).
+
+Changing the value, either by typing in an editable `<xin-select>` or picking a new
+value triggers a `change` event.
+
+You can look at the console to see the events triggered by the second example.
+
+## Localization
+
+`<xin-select>` supports the `localized` attribute which automatically localizes
+options.
+
+```html
+<xin-select
+  localized
+  placeholder="localized placeholder"
+  options="yes,no,,moderate"
+></xin-select>
+```
+*/
+import { Component as WebComponent, elements, vars, throttle, } from 'xinjs';
+import { icons } from './icons';
+import { popMenu, removeLastMenu } from './menu';
+import { localize, XinLocalized } from './localize';
+const { button, span, input } = elements;
+const hasValue = (options, value) => {
+    return !!options.find((option) => {
+        if (option === null || value == null) {
+            return false;
+        }
+        else if (Array.isArray(option)) {
+            return hasValue(option, value);
+        }
+        else if (option.value === value || option === value) {
+            return true;
+        }
+    });
+};
+export class XinSelect extends WebComponent {
+    editable = false;
+    showIcon = false;
+    hideCaption = false;
+    options = '';
+    value = '';
+    placeholder = '';
+    filter = '';
+    localized = false;
+    setValue = (value, triggerAction = false) => {
+        if (this.value !== value) {
+            this.value = value;
+            this.queueRender(true);
+        }
+        if (triggerAction) {
+            this.dispatchEvent(new Event('action'));
+        }
+    };
+    getValue = () => this.value;
+    get selectOptions() {
+        return typeof this.options === 'string'
+            ? this.options.split(',').map((option) => option.trim() || null)
+            : this.options;
+    }
+    buildOptionMenuItem = (option) => {
+        if (option === null) {
+            return null;
+        }
+        const { setValue, getValue } = this;
+        let icon;
+        let caption;
+        let value;
+        if (typeof option === 'string') {
+            caption = value = option;
+        }
+        else {
+            ;
+            ({ icon, caption, value } = option);
+        }
+        if (this.localized) {
+            caption = localize(caption);
+        }
+        const { options } = option;
+        if (options) {
+            return {
+                icon,
+                caption,
+                checked: () => hasValue(options, getValue()),
+                menuItems: options.map(this.buildOptionMenuItem),
+            };
+        }
+        return {
+            icon,
+            caption,
+            checked: () => getValue() === value,
+            action: typeof value === 'function'
+                ? async () => {
+                    const newValue = await value();
+                    if (newValue !== undefined) {
+                        setValue(newValue, true);
+                    }
+                }
+                : () => {
+                    if (typeof value === 'string') {
+                        setValue(value, true);
+                    }
+                },
+        };
+    };
+    get optionsMenu() {
+        const options = this.selectOptions.map(this.buildOptionMenuItem);
+        if (this.filter === '') {
+            return options;
+        }
+        const showOption = (option) => {
+            if (option === null) {
+                return true;
+            }
+            else if (option.menuItems) {
+                ;
+                option.menuItems = option.menuItems.filter(showOption);
+                return option.menuItems.length > 0;
+            }
+            else {
+                return option.caption.toLocaleLowerCase().includes(this.filter);
+            }
+        };
+        return options.filter(showOption);
+    }
+    handleChange = (event) => {
+        const { value } = this.parts;
+        const newValue = value.value || '';
+        if (this.value !== String(newValue)) {
+            this.value = newValue;
+            this.dispatchEvent(new Event('change'));
+        }
+        this.filter = '';
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    handleKey = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+        }
+    };
+    filterMenu = throttle(() => {
+        this.filter = this.parts.value.value.toLocaleLowerCase();
+        removeLastMenu(0);
+        this.popOptions();
+    });
+    popOptions = (event) => {
+        if (event && event.type === 'click') {
+            this.filter = '';
+        }
+        this.poppedOptions = this.optionsMenu;
+        popMenu({
+            target: this,
+            menuItems: this.poppedOptions,
+        });
+    };
+    content = () => [
+        button({
+            onClick: this.popOptions,
+        }, span(), input({
+            part: 'value',
+            value: this.value,
+            tabindex: 0,
+            onKeydown: this.handleKey,
+            onInput: this.filterMenu,
+            onChange: this.handleChange,
+        }), icons.chevronDown()),
+    ];
+    constructor() {
+        super();
+        this.initAttributes('options', 'editable', 'placeholder', 'showIcon', 'hideCaption', 'localized');
+    }
+    get allOptions() {
+        const all = [];
+        function flatten(some) {
+            for (const option of some) {
+                if (typeof option === 'string') {
+                    all.push({ caption: option, value: option });
+                }
+                else if (option?.value) {
+                    all.push(option);
+                }
+                else if (option?.options) {
+                    flatten(option.options);
+                }
+            }
+        }
+        flatten(this.selectOptions);
+        return all;
+    }
+    findOption() {
+        const found = this.allOptions.find((option) => option.value === this.value);
+        return found || { caption: this.value, value: this.value };
+    }
+    localeChanged = () => {
+        this.queueRender();
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.localized) {
+            XinLocalized.allInstances.add(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.localized) {
+            XinLocalized.allInstances.delete(this);
+        }
+    }
+    render() {
+        super.render();
+        const { value } = this.parts;
+        const icon = value.previousElementSibling;
+        const option = this.findOption();
+        let newIcon = span();
+        value.value = this.localized ? localize(option.caption) : option.caption;
+        if (option.icon) {
+            if (option.icon instanceof HTMLElement) {
+                newIcon = option.icon.cloneNode(true);
+            }
+            else {
+                newIcon = icons[option.icon]();
+            }
+        }
+        icon.replaceWith(newIcon);
+        value.setAttribute('placeholder', this.localized ? localize(this.placeholder) : this.placeholder);
+        value.style.pointerEvents = this.editable ? '' : 'none';
+        value.readOnly = !this.editable;
+    }
+}
+export const xinSelect = XinSelect.elementCreator({
+    tag: 'xin-select',
+    styleSpec: {
+        ':host': {
+            '--gap': '8px',
+            '--touch-size': '44px',
+            '--padding': '0 8px',
+            '--value-padding': '0 8px',
+            '--icon-width': '24px',
+            '--fieldWidth': '140px',
+            display: 'inline-block',
+            position: 'relative',
+        },
+        ':host button': {
+            display: 'grid',
+            alignItems: 'center',
+            gap: vars.gap,
+            textAlign: 'left',
+            height: vars.touchSize,
+            padding: vars.padding,
+            gridTemplateColumns: `auto ${vars.iconWidth}`,
+            position: 'relative',
+        },
+        ':host[show-icon] button': {
+            gridTemplateColumns: `${vars.iconWidth} auto ${vars.iconWidth}`,
+        },
+        ':host[hide-caption] button': {
+            gridTemplateColumns: `${vars.iconWidth} ${vars.iconWidth}`,
+        },
+        ':host:not([show-icon]) button > :first-child': {
+            display: 'none',
+        },
+        ':host[hide-caption] button > :nth-child(2)': {
+            display: 'none',
+        },
+        ':host [part="value"]': {
+            width: vars.fieldWidth,
+            padding: vars.valuePadding,
+            height: vars.touchSize,
+            lineHeight: vars.touchSize,
+            boxShadow: 'none',
+            whiteSpace: 'nowrap',
+            outline: 'none',
+            background: 'transparent',
+        },
+        ':host [part="value"]:not(:focus)': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            background: 'transparent',
+        },
+    },
+});

package/dist/side-nav.d.ts

@@ -0,0 +1,36 @@
+import { Component, ElementCreator } from 'tosijs';
+export declare class SideNav extends Component {
+    minSize: number;
+    navSize: number;
+    compact: boolean;
+    content: HTMLSlotElement[];
+    private _contentVisible;
+    get contentVisible(): boolean;
+    set contentVisible(visible: boolean);
+    static styleSpec: {
+        ':host': {
+            display: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+            position: string;
+            margin: string;
+            transition: string;
+        };
+        ':host slot': {
+            position: string;
+        };
+        ':host slot:not([name])': {
+            display: string;
+        };
+        ':host slot[name="nav"]': {
+            display: string;
+        };
+    };
+    onResize: () => void;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    constructor();
+    render(): void;
+}
+export declare const sideNav: ElementCreator<SideNav>;

package/dist/side-nav.js

@@ -0,0 +1,106 @@
+/*#
+# sidebar
+
+The default layout for iOS / iPadOS apps is to hide the sidebar when displaying content on small
+screens, and display the sidebar when space is available (with the user able to explicitly hide
+the sidebar if so desired). `<xin-sidenav>` provides this functionality.
+
+`<xin-sidenav>` is used to handle the layout of the documentation tab panel.
+
+`<xin-sidenav>`'s behavior is controlled by two attributes, `minSize` is the point at which it will toggle between showing the navigation
+sidebar and content, while `navSize` is the width of the sidebar. You can interrogate its `compact` property to find out if it's
+currently in `compact` form.
+*/
+import { Component, elements, varDefault } from 'xinjs';
+const { slot } = elements;
+export class SideNav extends Component {
+    minSize = 800;
+    navSize = 200;
+    compact = false;
+    content = [slot({ name: 'nav', part: 'nav' }), slot({ part: 'content' })];
+    _contentVisible = false;
+    get contentVisible() {
+        return this._contentVisible;
+    }
+    set contentVisible(visible) {
+        this._contentVisible = visible;
+        this.queueRender();
+    }
+    static styleSpec = {
+        ':host': {
+            display: 'grid',
+            gridTemplateColumns: `${varDefault.navWidth('50%')} ${varDefault.contentWidth('50%')}`,
+            gridTemplateRows: '100%',
+            position: 'relative',
+            margin: varDefault.margin('0 0 0 -100%'),
+            transition: varDefault.sideNavTransition('0.25s ease-out'),
+        },
+        ':host slot': {
+            position: 'relative',
+        },
+        ':host slot:not([name])': {
+            display: 'block',
+        },
+        ':host slot[name="nav"]': {
+            display: 'block',
+        },
+    };
+    onResize = () => {
+        const { content } = this.parts;
+        const parent = this.offsetParent;
+        if (parent === null) {
+            return;
+        }
+        this.compact = parent.offsetWidth < this.minSize;
+        const empty = [...this.childNodes].find((node) => node instanceof Element ? node.getAttribute('slot') !== 'nav' : true) === undefined;
+        if (empty) {
+            this.style.setProperty('--nav-width', '100%');
+            this.style.setProperty('--content-width', '0%');
+            return;
+        }
+        if (!this.compact) {
+            content.classList.add('-xin-sidenav-visible');
+            this.style.setProperty('--nav-width', `${this.navSize}px`);
+            this.style.setProperty('--content-width', `calc(100% - ${this.navSize}px)`);
+            this.style.setProperty('--margin', '0');
+        }
+        else {
+            content.classList.remove('-xin-sidenav-visible');
+            this.style.setProperty('--nav-width', '50%');
+            this.style.setProperty('--content-width', '50%');
+            if (this.contentVisible) {
+                this.style.setProperty('--margin', '0 0 0 -100%');
+            }
+            else {
+                this.style.setProperty('--margin', '0 -100% 0 0');
+            }
+        }
+    };
+    observer;
+    connectedCallback() {
+        super.connectedCallback();
+        this.contentVisible = this.parts.content.childNodes.length === 0;
+        globalThis.addEventListener('resize', this.onResize);
+        this.observer = new MutationObserver(this.onResize);
+        this.observer.observe(this, { childList: true });
+        this.style.setProperty('--side-nav-transition', '0s');
+        setTimeout(() => {
+            this.style.removeProperty('--side-nav-transition');
+        }, 250);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer.disconnect();
+    }
+    constructor() {
+        super();
+        this.initAttributes('minSize', 'navSize', 'compact');
+    }
+    render() {
+        super.render();
+        this.onResize();
+    }
+}
+export const sideNav = SideNav.elementCreator({
+    tag: 'xin-sidenav',
+});

package/dist/size-break.d.ts

@@ -0,0 +1,18 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+export declare class SizeBreak extends WebComponent {
+    minWidth: number;
+    minHeight: number;
+    value: 'normal' | 'small';
+    content: HTMLSlotElement[];
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+        };
+    };
+    constructor();
+    onResize: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare const sizeBreak: ElementCreator<SizeBreak>;