tosijs-ui 1.0.0 → 1.0.2

package/dist/select.js

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

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

@@ -1,118 +0,0 @@
-import { Component as WebComponent, elements } from 'xinjs';
-const { slot } = elements;
-/*#
-# size-break
-
-While we wait for enough browsers to implement [container-queries](https://www.w3.org/TR/css-contain-3/),
-and in any event when you simply want to do different things at different sizes (e.g. in the project I'm
-working on right now, a row of buttons turns into a menu at narrow widths) there's `<xin-sizebreak>`.
-
-Note that the sizes referred to are of the `<xin-sizebreak>`'s `.offsetParent`, and it watches for
-the window's `resize` events and its own (via `ResizeObserver`).
-
-```html
-<div class="container">
-  <xin-sizebreak min-width="300" min-height="150">
-    <h1>BIG!</h1>
-    <i slot="small">little</i>
-  </xin-sizebreak>
-  <xin-sizer></xin-sizer>
-</div>
-```
-```css
-.preview {
-  touch-action: none;
-}
-
-.preview xin-sizebreak {
-  width: 100%;
-  height: 100%;
-  background: #fff8;
-  border: 1px solid #aaa;
-}
-
-.preview xin-sizebreak * {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.preview .container {
-  position: relative;
-  min-width: 100px;
-  min-height: 40px;
-  max-height: 100%;
-  width: 400px;
-  height: 100px;
-}
-
-.preview .sizer {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  background: #0002;
-  bottom: 0;
-  right: 0;
-  cursor: nwse-resize;
-  opacity: 0.5;
-}
-
-.preview .sizer:hover {
-  opacity: 1.0;
-}
-```
-
-`<xin-sizebreak>` supports both `min-width` and/or `min-height`, and you can of course target only one
-of the slots if you like. The demo site uses them to hide the [bundlejs](https://bundlejs.com/) badge when
-space is tight.
-*/
-export class SizeBreak extends WebComponent {
-    minWidth = 0;
-    minHeight = 0;
-    value = 'normal';
-    content = [slot({ part: 'normal' }), slot({ part: 'small', name: 'small' })];
-    static styleSpec = {
-        ':host': {
-            display: 'inline-block',
-            position: 'relative',
-        },
-    };
-    constructor() {
-        super();
-        this.initAttributes('minWidth', 'minHeight');
-    }
-    onResize = () => {
-        const { normal, small } = this.parts;
-        const parent = this.offsetParent;
-        if (!(parent instanceof HTMLElement)) {
-            return;
-        }
-        else if (parent.offsetWidth < this.minWidth ||
-            parent.offsetHeight < this.minHeight) {
-            normal.hidden = true;
-            small.hidden = false;
-            this.value = 'small';
-        }
-        else {
-            normal.hidden = false;
-            small.hidden = true;
-            this.value = 'normal';
-        }
-    };
-    // TODO trigger a resize event when an ancestor element
-    // is inserted or moved into the DOM.
-    connectedCallback() {
-        super.connectedCallback();
-        globalThis.addEventListener('resize', this.onResize);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        globalThis.removeEventListener('resize', this.onResize);
-    }
-}
-export const sizeBreak = SizeBreak.elementCreator({
-    tag: 'xin-sizebreak',
-});