tosijs-ui 1.0.0

package/dist/src/tab-selector.d.ts

@@ -0,0 +1,91 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+type TabCloseHandler = (tabBody: Element) => boolean | undefined | void;
+export declare class TabSelector extends WebComponent {
+    value: number;
+    localized: boolean;
+    makeTab(tabs: TabSelector, tabBody: HTMLElement, bodyId: string): HTMLElement;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            flexDirection: string;
+            position: string;
+            overflow: string;
+            boxShadow: string;
+        };
+        slot: {
+            position: string;
+            display: string;
+            flex: string;
+            overflow: string;
+            overflowY: string;
+        };
+        'slot[name="after-tabs"]': {
+            flex: string;
+        };
+        '::slotted([hidden])': {
+            display: string;
+        };
+        ':host::part(tabpanel)': {
+            display: string;
+            flexDirection: string;
+            overflowX: string;
+        };
+        ':host::part(tabrow)': {
+            display: string;
+        };
+        ':host .tabs': {
+            display: string;
+            userSelect: string;
+            whiteSpace: string;
+        };
+        ':host .tabs > div': {
+            padding: string;
+            cursor: string;
+            display: string;
+            alignItems: string;
+        };
+        ':host .tabs > [aria-selected="true"]': {
+            '--text-color': any;
+            color: any;
+        };
+        ':host .elastic': {
+            flex: string;
+        };
+        ':host .border': {
+            background: string;
+        };
+        ':host .border > .selected': {
+            content: string;
+            width: number;
+            height: string;
+            background: any;
+            transition: string;
+        };
+        ':host button.close': {
+            border: number;
+            background: string;
+            textAlign: string;
+            marginLeft: any;
+            padding: number;
+        };
+        ':host button.close > svg': {
+            height: string;
+        };
+    };
+    onCloseTab: TabCloseHandler | null;
+    content: any[];
+    constructor();
+    addTabBody(body: HTMLElement, selectTab?: boolean): void;
+    removeTabBody(body: HTMLElement): void;
+    keyTab: (event: Event) => void;
+    get bodies(): Element[];
+    pickTab: (event: Event) => void;
+    setupTabs: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    localeChanged: () => void;
+    onResize(): void;
+    render(): void;
+}
+export declare const tabSelector: ElementCreator<TabSelector>;
+export {};

package/dist/src/tag-list.d.ts

@@ -0,0 +1,37 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+export declare class XinTag extends WebComponent {
+    caption: string;
+    removeable: boolean;
+    removeCallback: (event: Event) => void;
+    content: () => any[];
+    constructor();
+}
+export declare const xinTag: ElementCreator<XinTag>;
+interface Tag {
+    value: string;
+    caption?: string;
+    color?: string;
+    background?: string;
+    icon?: string | HTMLElement;
+}
+type TagList = (string | Tag | null)[];
+export declare class XinTagList extends WebComponent {
+    disabled: boolean;
+    name: string;
+    availableTags: string | TagList;
+    value: string | string[];
+    textEntry: boolean;
+    editable: boolean;
+    placeholder: string;
+    get tags(): string[];
+    constructor();
+    addTag: (tag: string) => void;
+    toggleTag: (toggled: string) => void;
+    enterTag: (event: KeyboardEvent) => void;
+    popSelectMenu: () => void;
+    content: () => any[];
+    removeTag: (event: Event) => void;
+    render(): void;
+}
+export declare const xinTagList: ElementCreator<XinTagList>;
+export {};

package/dist/src/track-drag.d.ts

@@ -0,0 +1,5 @@
+type TrackerCallback = (dx: number, dy: number, event: PointerEvent) => boolean | undefined;
+export declare const trackDrag: (event: PointerEvent, callback: TrackerCallback, cursor?: string) => void;
+export declare const findHighestZ: (selector?: string) => number;
+export declare const bringToFront: (element: HTMLElement, selector?: string) => void;
+export {};

package/dist/src/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "0.9.15";

package/dist/src/via-tag.d.ts

@@ -0,0 +1,2 @@
+export declare function scriptTag(src: string, existingSymbolName?: string): Promise<any>;
+export declare function styleSheet(href: string): Promise<void>;

package/dist/tab-selector.d.ts

@@ -0,0 +1,91 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+type TabCloseHandler = (tabBody: Element) => boolean | undefined | void;
+export declare class TabSelector extends WebComponent {
+    value: number;
+    localized: boolean;
+    makeTab(tabs: TabSelector, tabBody: HTMLElement, bodyId: string): HTMLElement;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            flexDirection: string;
+            position: string;
+            overflow: string;
+            boxShadow: string;
+        };
+        slot: {
+            position: string;
+            display: string;
+            flex: string;
+            overflow: string;
+            overflowY: string;
+        };
+        'slot[name="after-tabs"]': {
+            flex: string;
+        };
+        '::slotted([hidden])': {
+            display: string;
+        };
+        ':host::part(tabpanel)': {
+            display: string;
+            flexDirection: string;
+            overflowX: string;
+        };
+        ':host::part(tabrow)': {
+            display: string;
+        };
+        ':host .tabs': {
+            display: string;
+            userSelect: string;
+            whiteSpace: string;
+        };
+        ':host .tabs > div': {
+            padding: string;
+            cursor: string;
+            display: string;
+            alignItems: string;
+        };
+        ':host .tabs > [aria-selected="true"]': {
+            '--text-color': string;
+            color: string;
+        };
+        ':host .elastic': {
+            flex: string;
+        };
+        ':host .border': {
+            background: string;
+        };
+        ':host .border > .selected': {
+            content: string;
+            width: number;
+            height: string;
+            background: string;
+            transition: string;
+        };
+        ':host button.close': {
+            border: number;
+            background: string;
+            textAlign: string;
+            marginLeft: string;
+            padding: number;
+        };
+        ':host button.close > svg': {
+            height: string;
+        };
+    };
+    onCloseTab: TabCloseHandler | null;
+    content: (HTMLDivElement | HTMLSlotElement)[];
+    constructor();
+    addTabBody(body: HTMLElement, selectTab?: boolean): void;
+    removeTabBody(body: HTMLElement): void;
+    keyTab: (event: Event) => void;
+    get bodies(): Element[];
+    pickTab: (event: Event) => void;
+    setupTabs: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    localeChanged: () => void;
+    onResize(): void;
+    render(): void;
+}
+export declare const tabSelector: ElementCreator<TabSelector>;
+export {};

package/dist/tab-selector.js

@@ -0,0 +1,326 @@
+/*#
+# 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.d.ts

@@ -0,0 +1,37 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+export declare class XinTag extends WebComponent {
+    caption: string;
+    removeable: boolean;
+    removeCallback: (event: Event) => void;
+    content: () => HTMLSpanElement[];
+    constructor();
+}
+export declare const xinTag: ElementCreator<XinTag>;
+interface Tag {
+    value: string;
+    caption?: string;
+    color?: string;
+    background?: string;
+    icon?: string | HTMLElement;
+}
+type TagList = (string | Tag | null)[];
+export declare class XinTagList extends WebComponent {
+    disabled: boolean;
+    name: string;
+    availableTags: string | TagList;
+    value: string | string[];
+    textEntry: boolean;
+    editable: boolean;
+    placeholder: string;
+    get tags(): string[];
+    constructor();
+    addTag: (tag: string) => void;
+    toggleTag: (toggled: string) => void;
+    enterTag: (event: KeyboardEvent) => void;
+    popSelectMenu: () => void;
+    content: () => (HTMLButtonElement | HTMLDivElement)[];
+    removeTag: (event: Event) => void;
+    render(): void;
+}
+export declare const xinTagList: ElementCreator<XinTagList>;
+export {};