tosijs-ui 1.0.0 → 1.0.2

package/dist/tab-selector.js

@@ -1,326 +0,0 @@
-/*#
-# tabs
-
-`<xin-tabs>` creates a `tabpanel` for its children, creating a `tab` for each based on its
-`name` attribute.
-
-```js
-[...preview.querySelectorAll('div[name]')].forEach(div => {
-  div.style.color = `hsl(${(Math.random() * 360).toFixed(0)} 50% 50%)`
-})
-
-const { div, button } = xinjs.elements
-const tabSelector = preview.querySelector('xin-tabs')
-
-tabSelector.onCloseTab = body => {
-  if (!confirm(`Are you sure you want to close the ${body.getAttribute('name')} tab?`)) {
-    return false
-  }
-}
-
-let bodycount = 0
-preview.querySelector('.add').addEventListener('click', () => {
-  const name = `new tab ${++bodycount}`
-  const body = div(
-    {name, dataClose: true},
-    name,
-  )
-  tabSelector.addTabBody(body, true)
-})
-```
-```html
-<xin-tabs>
-  <div name="first">first body</div>
-  <div name="second" data-close>
-    <template role="tab">
-      <xin-icon
-        style="
-          display: inline-block;
-          width: 16px;
-          height: 16px;
-          transform: translateY(2px);
-          margin-right: 4px;
-          stroke: var(--brand-color);
-        "
-        icon="eye"
-      ></xin-icon>
-      <span>Ooooh!!!</span>
-    </template>
-    look at the html…
-  </div>
-  <div name="third">third body</div>
-  <button class="add" slot="after-tabs">
-    <xin-icon icon="plus"></xin-icon>
-  </button>
-</xin-tabs>
-```
-```css
-  .preview xin-tabs {
-    height: 100%;
-  }
-
-  .preview div[name] {
-    padding: 20px;
-    text-align: center;
-    height: 100%;
-    font-size: 200%;
-  }
-
-  .preview .add {
-    width: 38px;
-    line-height: 38px;
-    height: 38px;
-    padding: 0;
-  }
-```
-
-The `<xin-tabs>`s `value` is the index of its active body.
-
-A `<xin-tabs>` has `addTabBody(body: HTMLElement, select?: boolean)` and
-`removeTabBody(body: number | HTMLElement)` methods for updating its content.
-
-You can also just insert or remove tab bodies directly and call `setupTabs()`.
-
-## Closeable Tabs
-
-Adding the `data-close` attribute to a tab will make it closeable.
-
-When a tab is closed, the `<xin-tabs>` element's `onCloseTab: (tabBody: Element) => boolean | undefined | void`
-will be called. If you override this method and return `false`, the tab will
-not be closed (e.g. if you want to implement save/cancel behavior).
-
-## Custom Tab Content
-
-You can specify the exact content of the tab for a given body by
-adding a `<template role="tab">` to that body. The contents of that
-template will be cloned into the tab.
-
-## Localized Support
-
-```html
-<xin-tabs localized>
-  <div name="localize"><h2>localize!</h2></div>
-  <div name="tabs"><h2>tabs</h2></div>
-</xin-tabs>
-```
-
-`<xin-tabs>` supports the `localized` attribute. It will automatically localize
-tab names (but it won't override custom tab content, so localizing that is on you).
-*/
-import { Component as WebComponent, elements, vars, } from 'xinjs';
-import { xinLocalized, XinLocalized } from './localize';
-import { icons } from '../src';
-const { div, slot, span, button } = elements;
-export class TabSelector extends WebComponent {
-    value = 0;
-    localized = false;
-    makeTab(tabs, tabBody, bodyId) {
-        const tabName = tabBody.getAttribute('name');
-        const tabContent = tabBody.querySelector('template[role="tab"]')?.content.cloneNode(true) ||
-            (this.localized ? xinLocalized(tabName) : span(tabName));
-        const tab = div(tabContent, {
-            part: 'tab',
-            tabindex: 0,
-            role: 'tab',
-            ariaControls: bodyId,
-        }, tabBody.hasAttribute('data-close')
-            ? button({
-                title: 'close',
-                class: 'close',
-            }, icons.x())
-            : {});
-        return tab;
-    }
-    static styleSpec = {
-        ':host': {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'relative',
-            overflow: 'hidden',
-            boxShadow: 'none !important',
-        },
-        slot: {
-            position: 'relative',
-            display: 'block',
-            flex: '1',
-            overflow: 'hidden',
-            overflowY: 'auto',
-        },
-        'slot[name="after-tabs"]': {
-            flex: '0 0 auto',
-        },
-        '::slotted([hidden])': {
-            display: 'none !important',
-        },
-        ':host::part(tabpanel)': {
-            display: 'flex',
-            flexDirection: 'column',
-            overflowX: 'auto',
-        },
-        ':host::part(tabrow)': {
-            display: 'flex',
-        },
-        ':host .tabs': {
-            display: 'flex',
-            userSelect: 'none',
-            whiteSpace: 'nowrap',
-        },
-        ':host .tabs > div': {
-            padding: `${vars.spacing50} ${vars.spacing}`,
-            cursor: 'default',
-            display: 'flex',
-            alignItems: 'baseline',
-        },
-        ':host .tabs > [aria-selected="true"]': {
-            '--text-color': vars.xinTabsSelectedColor,
-            color: vars.textColor,
-        },
-        ':host .elastic': {
-            flex: '1',
-        },
-        ':host .border': {
-            background: 'var(--xin-tabs-bar-color, #ccc)',
-        },
-        ':host .border > .selected': {
-            content: ' ',
-            width: 0,
-            height: 'var(--xin-tabs-bar-height, 2px)',
-            background: vars.xinTabsSelectedColor,
-            transition: 'ease-out 0.2s',
-        },
-        ':host button.close': {
-            border: 0,
-            background: 'transparent',
-            textAlign: 'center',
-            marginLeft: vars.spacing50,
-            padding: 0,
-        },
-        ':host button.close > svg': {
-            height: '12px',
-        },
-    };
-    onCloseTab = null;
-    content = [
-        div({ role: 'tabpanel', part: 'tabpanel' }, div({ part: 'tabrow' }, div({ class: 'tabs', part: 'tabs' }), div({ class: 'elastic' }), slot({ name: 'after-tabs' })), div({ class: 'border' }, div({ class: 'selected', part: 'selected' }))),
-        slot(),
-    ];
-    constructor() {
-        super();
-        this.initAttributes('localized');
-    }
-    addTabBody(body, selectTab = false) {
-        if (!body.hasAttribute('name')) {
-            console.error('element has no name attribute', body);
-            throw new Error('element has no name attribute');
-        }
-        this.append(body);
-        this.setupTabs();
-        if (selectTab) {
-            this.value = this.bodies.length - 1;
-        }
-        this.queueRender();
-    }
-    removeTabBody(body) {
-        body.remove();
-        this.setupTabs();
-        this.queueRender();
-    }
-    keyTab = (event) => {
-        const { tabs } = this.parts;
-        const tabIndex = [...tabs.children].indexOf(event.target);
-        switch (event.key) {
-            case 'ArrowLeft':
-                this.value =
-                    (tabIndex + Number(tabs.children.length) - 1) % tabs.children.length;
-                tabs.children[this.value].focus();
-                event.preventDefault();
-                break;
-            case 'ArrowRight':
-                this.value = (tabIndex + 1) % tabs.children.length;
-                tabs.children[this.value].focus();
-                event.preventDefault();
-                break;
-            case ' ':
-                this.pickTab(event);
-                event.preventDefault();
-                break;
-            default:
-            // console.log(event.key)
-        }
-    };
-    get bodies() {
-        return [...this.children].filter((elt) => elt.hasAttribute('name'));
-    }
-    pickTab = (event) => {
-        const { tabs } = this.parts;
-        const target = event.target;
-        const isCloseEvent = target.closest('button.close') !== null;
-        const tab = target.closest('.tabs > div');
-        const tabIndex = [...tabs.children].indexOf(tab);
-        if (isCloseEvent) {
-            const body = this.bodies[tabIndex];
-            if (!this.onCloseTab || this.onCloseTab(body) !== false) {
-                this.removeTabBody(this.bodies[tabIndex]);
-            }
-        }
-        else {
-            if (tabIndex > -1) {
-                this.value = tabIndex;
-            }
-        }
-    };
-    setupTabs = () => {
-        const { tabs } = this.parts;
-        const tabBodies = [...this.children].filter((child) => !child.hasAttribute('slot') && child.hasAttribute('name'));
-        tabs.textContent = '';
-        if (this.value >= tabBodies.length) {
-            this.value = tabBodies.length - 1;
-        }
-        for (const index in tabBodies) {
-            const tabBody = tabBodies[index];
-            const bodyId = `${this.instanceId}-${index}`;
-            tabBody.id = bodyId;
-            const tab = this.makeTab(this, tabBody, bodyId);
-            tabs.append(tab);
-        }
-    };
-    connectedCallback() {
-        super.connectedCallback();
-        const { tabs } = this.parts;
-        tabs.addEventListener('click', this.pickTab);
-        tabs.addEventListener('keydown', this.keyTab);
-        this.setupTabs();
-        XinLocalized.allInstances.add(this);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        XinLocalized.allInstances.delete(this);
-    }
-    localeChanged = () => {
-        this.queueRender();
-    };
-    onResize() {
-        this.queueRender();
-    }
-    render() {
-        const { tabs, selected } = this.parts;
-        const tabBodies = this.bodies;
-        for (let i = 0; i < tabBodies.length; i++) {
-            const tabBody = tabBodies[i];
-            const tab = tabs.children[i];
-            if (this.value === Number(i)) {
-                tab.setAttribute('aria-selected', 'true');
-                selected.style.marginLeft = `${tab.offsetLeft - tabs.offsetLeft}px`;
-                selected.style.width = `${tab.offsetWidth}px`;
-                tabBody.toggleAttribute('hidden', false);
-            }
-            else {
-                tab.toggleAttribute('aria-selected', false);
-                tabBody.toggleAttribute('hidden', true);
-            }
-        }
-    }
-}
-export const tabSelector = TabSelector.elementCreator({
-    tag: 'xin-tabs',
-});

package/dist/tag-list.js

@@ -1,375 +0,0 @@
-/*#
-# tag-list
-
-Building a tag-list from standard HTML elements is a bit of a nightmare.
-
-`<xin-tag-list>` allows you to display an editable or read-only tag list (represented either
-as a comma-delimited string or an array of strings).
-
-```html
-<label style="position: absolute; right: 10px; top: 10px; display: block">
-  <input type="checkbox" class="disable-toggle">
-  <b>Disable All</b>
-</label>
-<label>
-  <b>Display Only</b>
-  <xin-tag-list
-    value="this,that,,the-other"
-  ></xin-tag-list>
-</label>
-<xin-tag-list
-  class="compact"
-  value="this,that,,the-other"
-></xin-tag-list>
-<br>
-<label>
-  <b>Editable</b>
-  <xin-tag-list
-    class="editable-tag-list"
-    value="belongs,also belongs,custom"
-    editable
-    available-tags="belongs,also belongs,not initially chosen"
-  ></xin-tag-list>
-</label>
-<br>
-<b>Text-Entry</b>
-<xin-tag-list
-  value="this,that,the-other,not,enough,space"
-  editable
-  text-entry
-  available-tags="tomasina,dick,,harriet"
-></xin-tag-list>
-```
-```css
-.preview .compact {
-  --spacing: 8px;
-  --font-size: 12px;
-  --line-height: 18px;
-}
-.preview label {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-```
-```js
-preview.addEventListener('change', (event) => {
-  if (event.target.matches('xin-tag-list')) {
-    console.log(event.target, event.target.value)
-  }
-}, true)
-preview.querySelector('.disable-toggle').addEventListener('change', (event) => {
-  const tagLists = Array.from(preview.querySelectorAll('xin-tag-list'))
-  for(const tagList of tagLists) {
-    tagList.disabled = event.target.checked
-  }
-})
-```
-
-## Properties
-
-### `value`: string | string[]
-
-A list of tags
-
-### `tags`: string[]
-
-## `popSelectMenu`: () => void
-
-This is the method called when the user clicks the menu button. By default is displays a
-pick list of tags, but if you wish to customize the behavior, just replace this method.
-
-A read-only property giving the value as an array.
-
-### `available-tags`: string | string[]
-
-A list of tags that will be displayed in the popup menu by default. The popup menu
-will always display custom tags (allowing their removal).
-
-### `editable`: boolean
-
-Allows the tag list to be modified via menu and removing tags.
-
-### `text-entry`: boolean
-
-If `editable`, an input field is provided for entering tags directly.
-
-### `placeholder`: string = 'enter tags'
-
-Placeholder shown on input field.
-*/
-import { Component as WebComponent, elements, vars, varDefault, } from 'xinjs';
-import { popMenu } from './menu';
-import { icons } from './icons';
-const { div, input, span, button } = elements;
-export class XinTag extends WebComponent {
-    caption = '';
-    removeable = false;
-    removeCallback = () => {
-        this.remove();
-    };
-    content = () => [
-        span({ part: 'caption' }, this.caption),
-        button(icons.x(), {
-            part: 'remove',
-            hidden: !this.removeable,
-            onClick: this.removeCallback,
-        }),
-    ];
-    constructor() {
-        super();
-        this.initAttributes('caption', 'removeable');
-    }
-}
-export const xinTag = XinTag.elementCreator({
-    tag: 'xin-tag',
-    styleSpec: {
-        ':host': {
-            '--tag-close-button-color': '#000c',
-            '--tag-close-button-bg': '#fffc',
-            '--tag-button-opacity': '0.5',
-            '--tag-button-hover-opacity': '0.75',
-            '--tag-bg': varDefault.brandColor('blue'),
-            '--tag-text-color': varDefault.brandTextColor('white'),
-            display: 'inline-flex',
-            borderRadius: varDefault.tagRoundedRadius(vars.spacing50),
-            color: vars.tagTextColor,
-            background: vars.tagBg,
-            padding: `0 ${vars.spacing75} 0 ${vars.spacing75}`,
-            height: `calc(${vars.lineHeight} + ${vars.spacing50})`,
-            lineHeight: `calc(${vars.lineHeight} + ${vars.spacing50})`,
-        },
-        ':host > [part="caption"]': {
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            flex: '1 1 auto',
-            fontSize: varDefault.fontSize('16px'),
-            color: vars.tagTextColor,
-            textOverflow: 'ellipsis',
-        },
-        ':host [part="remove"]': {
-            boxShadow: 'none',
-            margin: `0 ${vars.spacing_50} 0 ${vars.spacing25}`,
-            padding: 0,
-            display: 'inline-flex',
-            alignItems: 'center',
-            alignSelf: 'center',
-            justifyContent: 'center',
-            height: vars.spacing150,
-            width: vars.spacing150,
-            '--text-color': vars.tagCloseButtonColor,
-            background: vars.tagCloseButtonBg,
-            borderRadius: varDefault.tagCloseButtonRadius('99px'),
-            opacity: vars.tagButtonOpacity,
-        },
-        ':host [part="remove"]:hover': {
-            background: vars.tagCloseButtonBg,
-            opacity: vars.tagButtonHoverOpacity,
-        },
-    },
-});
-export class XinTagList extends WebComponent {
-    disabled = false;
-    name = '';
-    availableTags = [];
-    value = [];
-    textEntry = false;
-    editable = false;
-    placeholder = 'enter tags';
-    get tags() {
-        return typeof this.value === 'string'
-            ? this.value
-                .split(',')
-                .map((tag) => tag.trim())
-                .filter((tag) => tag !== '')
-            : this.value;
-    }
-    constructor() {
-        super();
-        this.initAttributes('name', 'value', 'textEntry', 'availableTags', 'editable', 'placeholder', 'disabled');
-    }
-    addTag = (tag) => {
-        if (tag.trim() === '') {
-            return;
-        }
-        const { tags } = this;
-        if (!tags.includes(tag)) {
-            tags.push(tag);
-        }
-        this.value = tags;
-        this.queueRender(true);
-    };
-    toggleTag = (toggled) => {
-        if (this.tags.includes(toggled)) {
-            this.value = this.tags.filter((tag) => tag !== toggled);
-        }
-        else {
-            this.addTag(toggled);
-        }
-        this.queueRender(true);
-    };
-    enterTag = (event) => {
-        const { tagInput } = this.parts;
-        switch (event.key) {
-            case ',':
-                {
-                    const tag = tagInput.value.split(',')[0];
-                    this.addTag(tag);
-                }
-                break;
-            case 'Enter':
-                {
-                    const tag = tagInput.value.split(',')[0];
-                    this.addTag(tag);
-                }
-                event.stopPropagation();
-                event.preventDefault();
-                break;
-            default:
-            // do nothing
-        }
-    };
-    popSelectMenu = () => {
-        const { toggleTag } = this;
-        const { tagMenu } = this.parts;
-        const tags = typeof this.availableTags === 'string'
-            ? this.availableTags.split(',')
-            : this.availableTags;
-        const extraTags = this.tags.filter((tag) => !tags.includes(tag));
-        if (extraTags.length) {
-            tags.push(null, ...extraTags);
-        }
-        const menuItems = tags.map((tag) => {
-            if (tag === '' || tag === null) {
-                return null;
-            }
-            else if (typeof tag === 'object') {
-                return {
-                    checked: () => this.tags.includes(tag.value),
-                    caption: tag.caption,
-                    action() {
-                        toggleTag(tag.value);
-                    },
-                };
-            }
-            else {
-                return {
-                    checked: () => this.tags.includes(tag),
-                    caption: tag,
-                    action() {
-                        toggleTag(tag);
-                    },
-                };
-            }
-        });
-        popMenu({
-            target: tagMenu,
-            width: 'auto',
-            menuItems,
-        });
-    };
-    content = () => [
-        // this button is simply here to eat click events sent via a label
-        button({ style: { visibility: 'hidden' }, tabindex: -1 }),
-        div({
-            part: 'tagContainer',
-            class: 'row',
-        }),
-        input({
-            part: 'tagInput',
-            class: 'elastic',
-            onKeydown: this.enterTag,
-        }),
-        button({
-            title: 'add tag',
-            part: 'tagMenu',
-            onClick: this.popSelectMenu,
-        }, icons.chevronDown()),
-    ];
-    removeTag = (event) => {
-        if (this.editable && !this.disabled) {
-            const tag = event.target.closest(XinTag.tagName);
-            this.value = this.tags.filter((value) => value !== tag.caption);
-            tag.remove();
-            this.queueRender(true);
-        }
-        event.stopPropagation();
-        event.preventDefault();
-    };
-    render() {
-        super.render();
-        const { tagContainer, tagMenu, tagInput } = this.parts;
-        tagMenu.disabled = this.disabled;
-        tagInput.value = '';
-        tagInput.setAttribute('placeholder', this.placeholder);
-        if (this.editable && !this.disabled) {
-            tagMenu.toggleAttribute('hidden', false);
-            tagInput.toggleAttribute('hidden', !this.textEntry);
-        }
-        else {
-            tagMenu.toggleAttribute('hidden', true);
-            tagInput.toggleAttribute('hidden', true);
-        }
-        tagContainer.textContent = '';
-        const { tags } = this;
-        for (const tag of tags) {
-            tagContainer.append(xinTag({
-                caption: tag,
-                removeable: this.editable && !this.disabled,
-                removeCallback: this.removeTag,
-            }));
-        }
-    }
-}
-export const xinTagList = XinTagList.elementCreator({
-    tag: 'xin-tag-list',
-    styleSpec: {
-        ':host': {
-            '--tag-list-bg': '#f8f8f8',
-            '--touch-size': '44px',
-            '--spacing': '16px',
-            display: 'grid',
-            gridTemplateColumns: 'auto',
-            alignItems: 'center',
-            background: vars.tagListBg,
-            gap: vars.spacing25,
-            borderRadius: varDefault.taglistRoundedRadius(vars.spacing50),
-            overflow: 'hidden',
-        },
-        ':host[editable]': {
-            gridTemplateColumns: `0px auto ${vars.touchSize}`,
-        },
-        ':host[editable][text-entry]': {
-            gridTemplateColumns: `0px 2fr 1fr ${vars.touchSize}`,
-        },
-        ':host [part="tagContainer"]': {
-            display: 'flex',
-            content: '" "',
-            alignItems: 'center',
-            background: vars.inputBg,
-            borderRadius: varDefault.tagContainerRadius(vars.spacing50),
-            boxShadow: vars.borderShadow,
-            flexWrap: 'nowrap',
-            overflow: 'auto hidden',
-            gap: vars.spacing25,
-            minHeight: `calc(${vars.lineHeight} + ${vars.spacing})`,
-            padding: vars.spacing25,
-        },
-        ':host [part="tagMenu"]': {
-            width: vars.touchSize,
-            height: vars.touchSize,
-            lineHeight: vars.touchSize,
-            textAlign: 'center',
-            padding: 0,
-            margin: 0,
-        },
-        ':host [hidden]': {
-            display: 'none !important',
-        },
-        ':host button[part="tagMenu"]': {
-            background: vars.brandColor,
-            color: vars.brandTextColor,
-        },
-    },
-});