tosijs-ui 1.0.0

package/dist/rich-text.js

@@ -0,0 +1,296 @@
+/*#
+# word (rich text editor)
+
+`<xin-word>` is a simple and easily extensible `document.execCommand` WYSIWYG editor with some conveniences.
+
+```html
+<xin-word widgets="minimal">
+<h3>Heading</h3>
+<p>And some <b>text</b></p>
+</xin-word>
+```
+```css
+xin-word {
+  background: white;
+}
+
+xin-word [part="toolbar"] {
+  background: #f8f8f8;
+}
+
+xin-word [part="doc"] {
+  padding: 20px;
+}
+```
+
+By default, `<xin-word>` treats its initial contents as its document, but you can also set (and get)
+its `value`.
+
+## toolbar
+
+`<xin-word>` elements have a `toolbar` slot (actually a xin-slot because it doesn't use
+the shadowDOM).
+
+If you set the `widgets` attribute to `default` or `minimal` you will get a toolbar
+for free. Or you can add your own custom widgets.
+
+## helper functions
+
+A number of helper functions are available, including:
+
+- `commandButton(title: string, command: string, iconClass: string)`
+- `blockStyle(options: Array<{caption: string, tagType: string}>)`
+- `spacer(width = '10px')`
+- `elastic(width = '10px')`
+
+These each create a toolbar widget. A `blockStyle`-generated `<select>` element will
+automatically have its value changed based on the current selection.
+
+## properties
+
+A `<xin-word>` element also has `selectedText` and `selectedBlocks` properties, allowing
+you to easily perform operations on text selections, and a `selectionChange` callback (which
+simply passes through document `selectionchange` events, but also passes a reference to
+the `<xin-word>` component).
+*/
+import { Component as WebComponent, elements } from 'xinjs';
+import { icons } from './icons';
+import { xinSelect, XinSelect } from './select';
+const { xinSlot, div, button, span } = elements;
+const blockStyles = [
+    {
+        caption: 'Title',
+        tagType: 'H1',
+    },
+    {
+        caption: 'Heading',
+        tagType: 'H2',
+    },
+    {
+        caption: 'Subheading',
+        tagType: 'H3',
+    },
+    {
+        caption: 'Minor heading',
+        tagType: 'H4',
+    },
+    {
+        caption: 'Body',
+        tagType: 'P',
+    },
+    {
+        caption: 'Code Block',
+        tagType: 'PRE',
+    },
+];
+export function blockStyle(options = blockStyles) {
+    return xinSelect({
+        title: 'paragraph style',
+        slot: 'toolbar',
+        class: 'block-style',
+        options: options.map(({ caption, tagType }) => ({
+            caption,
+            value: `formatBlock,${tagType}`,
+        })),
+    });
+}
+export function spacer(width = '10px') {
+    return span({
+        slot: 'toolbar',
+        style: { flex: `0 0 ${width}`, content: ' ' },
+    });
+}
+export function elastic(width = '10px') {
+    return span({
+        slot: 'toolbar',
+        style: { flex: `0 0 ${width}`, content: ' ' },
+    });
+}
+export function commandButton(title, dataCommand, icon) {
+    return button({ slot: 'toolbar', dataCommand, title }, icon);
+}
+const paragraphStyleWidgets = () => [
+    commandButton('left-justify', 'justifyLeft', icons.alignLeft()),
+    commandButton('center', 'justifyCenter', icons.alignCenter()),
+    commandButton('right-justify', 'justifyRight', icons.alignRight()),
+    spacer(),
+    commandButton('bullet list', 'insertUnorderedList', icons.listBullet()),
+    commandButton('numbered list', 'insertOrderedList', icons.listNumber()),
+    spacer(),
+    commandButton('indent', 'indent', icons.blockIndent()),
+    commandButton('indent', 'outdent', icons.blockOutdent()),
+];
+const characterStyleWidgets = () => [
+    commandButton('bold', 'bold', icons.fontBold()),
+    commandButton('italic', 'italic', icons.fontItalic()),
+    commandButton('underline', 'underline', icons.fontUnderline()),
+];
+const minimalWidgets = () => [
+    blockStyle(),
+    spacer(),
+    ...characterStyleWidgets(),
+];
+export const richTextWidgets = () => [
+    blockStyle(),
+    spacer(),
+    ...paragraphStyleWidgets(),
+    spacer(),
+    ...characterStyleWidgets(),
+];
+export class RichText extends WebComponent {
+    widgets = 'default';
+    isInitialized = false;
+    get value() {
+        return this.isInitialized
+            ? this.parts.doc.innerHTML
+            : this.savedValue || this.innerHTML;
+    }
+    set value(docHtml) {
+        if (this.isInitialized) {
+            this.parts.doc.innerHTML = docHtml;
+        }
+        else {
+            this.innerHTML = docHtml;
+        }
+    }
+    blockElement(elt) {
+        const { doc } = this.parts;
+        while (elt.parentElement !== null && elt.parentElement !== doc) {
+            elt = elt.parentElement;
+        }
+        return elt.parentElement === doc ? elt : undefined;
+    }
+    get selectedBlocks() {
+        const { doc } = this.parts;
+        const selObject = window.getSelection();
+        if (selObject === null) {
+            return [];
+        }
+        const blocks = [];
+        for (let i = 0; i < selObject.rangeCount; i++) {
+            const range = selObject.getRangeAt(i);
+            if (!doc.contains(range.commonAncestorContainer)) {
+                continue;
+            }
+            let block = this.blockElement(range.startContainer);
+            const lastBlock = this.blockElement(range.endContainer);
+            blocks.push(block);
+            while (block !== lastBlock && block !== null) {
+                block = block.nextElementSibling;
+                blocks.push(block);
+            }
+        }
+        return blocks;
+    }
+    get selectedText() {
+        const selObject = window.getSelection();
+        if (selObject === null) {
+            return '';
+        }
+        return this.selectedBlocks.length ? selObject.toString() : '';
+    }
+    selectionChange = () => {
+        /* no not care */
+    };
+    handleSelectChange = (event) => {
+        // @ts-expect-error Typescript is wrong about event.target lacking closest
+        const select = event.target.closest(XinSelect.tagName);
+        if (select == null) {
+            return;
+        }
+        this.doCommand(select.value);
+    };
+    handleButtonClick = (event) => {
+        // @ts-expect-error Typescript is wrong about event.target lacking closest
+        const button = event.target.closest('button');
+        if (button == null) {
+            return;
+        }
+        this.doCommand(button.dataset.command);
+    };
+    content = [
+        xinSlot({
+            name: 'toolbar',
+            part: 'toolbar',
+            onClick: this.handleButtonClick,
+            onChange: this.handleSelectChange,
+        }),
+        div({
+            part: 'doc',
+            contenteditable: true,
+            style: {
+                flex: '1 1 auto',
+                outline: 'none',
+            },
+        }),
+        xinSlot({
+            part: 'content',
+        }),
+    ];
+    constructor() {
+        super();
+        this.initAttributes('widgets');
+    }
+    doCommand(command) {
+        if (command === undefined) {
+            return;
+        }
+        const args = command.split(',');
+        console.log('execCommand', args[0], false, ...args.slice(1));
+        document.execCommand(args[0], false, ...args.slice(1));
+    }
+    updateBlockStyle() {
+        const select = this.parts.toolbar.querySelector('.block-style');
+        if (select === null) {
+            return;
+        }
+        let blockTags = this.selectedBlocks.map((block) => block.tagName);
+        blockTags = [...new Set(blockTags)];
+        select.value = blockTags.length === 1 ? `formatBlock,${blockTags[0]}` : '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const { doc, content } = this.parts;
+        if (content.innerHTML !== '' && doc.innerHTML === '') {
+            doc.innerHTML = content.innerHTML;
+            content.innerHTML = '';
+        }
+        this.isInitialized = true;
+        content.style.display = 'none';
+        document.addEventListener('selectionchange', (event) => {
+            this.updateBlockStyle();
+            this.selectionChange(event, this);
+        });
+    }
+    render() {
+        const { toolbar } = this.parts;
+        super.render();
+        if (toolbar.children.length === 0) {
+            switch (this.widgets) {
+                case 'minimal':
+                    toolbar.append(...minimalWidgets());
+                    break;
+                case 'default':
+                    toolbar.append(...richTextWidgets());
+                    break;
+            }
+        }
+    }
+}
+export const richText = RichText.elementCreator({
+    tag: 'xin-word',
+    styleSpec: {
+        ':host': {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+        },
+        ':host [part="toolbar"]': {
+            padding: '4px',
+            display: 'flex',
+            gap: '0px',
+            flex: '0 0 auto',
+            flexWrap: 'wrap',
+        },
+    },
+});

package/dist/segmented.d.ts

@@ -0,0 +1,80 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+interface Choice {
+    icon?: string | SVGElement;
+    value: string;
+    caption: string;
+}
+export declare class XinSegmented extends WebComponent {
+    choices: string | Choice[];
+    other: string;
+    multiple: boolean;
+    name: string;
+    placeholder: string;
+    localized: boolean;
+    value: null | string;
+    get values(): string[];
+    content: () => (HTMLDivElement | HTMLSlotElement)[];
+    static styleSpec: {
+        ':host': {
+            display: string;
+            gap: string;
+            alignItems: string;
+        };
+        ':host, :host::part(options)': {
+            flexDirection: string;
+        };
+        ':host label': {
+            display: string;
+            alignItems: string;
+            gap: string;
+            gridTemplateColumns: string;
+            padding: string;
+            font: string;
+        };
+        ':host label:has(:checked)': {
+            color: string;
+            background: string;
+        };
+        ':host svg': {
+            height: string;
+            stroke: string;
+        };
+        ':host label.no-icon': {
+            gap: number;
+            gridTemplateColumns: string;
+        };
+        ':host input[type="radio"], :host input[type="checkbox"]': {
+            visibility: string;
+        };
+        ':host::part(options)': {
+            display: string;
+            borderRadius: string;
+            background: string;
+            color: string;
+            overflow: string;
+            alignItems: string;
+        };
+        ':host::part(custom)': {
+            padding: string;
+            color: string;
+            background: string;
+            font: string;
+            border: string;
+            outline: string;
+        };
+        ':host::part(custom)::placeholder': {
+            color: string;
+            opacity: string;
+        };
+    };
+    constructor();
+    private valueChanged;
+    handleChange: () => void;
+    handleKey: (event: KeyboardEvent) => void;
+    connectedCallback(): void;
+    private get _choices();
+    get isOtherValue(): boolean;
+    render(): void;
+}
+export declare const xinSegmented: ElementCreator<XinSegmented>;
+export {};

package/dist/segmented.js

@@ -0,0 +1,298 @@
+/*#
+# segmented select
+
+This is a fairly general-purpose segmented select control.
+
+```html
+<blockquote>
+Check the console to see the values being set.
+</blockquote>
+
+<div class="grid">
+<xin-segmented value="yes" choices="yes, no, don't care">
+  Should we?
+</xin-segmented>
+
+<div>
+  <b>Localized!</b><br>
+  <xin-segmented
+    localized
+    title="do you like?"
+    choices="yes=Yes:thumbsUp, no=No:thumbsDown"
+  ></xin-segmented>
+</div>
+
+<xin-segmented
+  style="--segmented-direction: column; --segmented-align-items: stretch"
+  choices="in a relationship, single" other="it's complicated…"
+  placeholder="oooh… please elaborate"
+  value="separated"
+>
+  Relationship Status
+</xin-segmented>
+
+<xin-segmented
+  multiple
+  style="
+    --segmented-direction: column;
+    --segmented-align-items: start;
+    --segmented-option-grid-columns: 24px 24px 100px;
+    --segmented-input-visibility: visible;
+  "
+  choices="star=Star:star, game=Game:game, bug=Bug:bug, camera=Camera:camera"
+  value="star,bug"
+>
+  Pick all that apply
+</xin-segmented>
+</div>
+```
+```css
+.preview .grid {
+  --segmented-option-current-background: var(--brand-color);
+  --segmented-option-current-color: var(--brand-text-color);
+  padding: 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+```
+```js
+function logEvent(event) {
+  const { target } = event
+  if (target.tagName === 'XIN-SEGMENTED') {
+    console.log((target.textContent || target.title).trim(), target.value)
+  }
+}
+preview.addEventListener('change', logEvent, true)
+```
+
+## Properties
+
+- `values` is an array of values (only really useful if `multiple` is set to true)
+
+You can set `choices` programmatically to an array of `Choice` objects:
+
+    interface Choice {
+      icon?: string | SVGElement
+      value: string
+      caption: string
+    }
+
+## Attributes
+
+- `choices` is a string of comma-delimited options of the form `value=caption:icon`,
+  where caption and icon are optional
+- `multiple` allows multiple selection
+- `name` allows you to set the name of the `<input>` elements to a specific value, it will default
+  to the component's `instanceId`
+- `other` (default '', meaning other is not allowed) is the caption for other options, allowing
+  the user to input their choice. It will be reset to '' if `multiple` is set.
+- `placeholder` is the placeholder displayed in the `<input>` field for **other** responses
+- `localized` automatically localizes captions
+
+## Styling
+
+The following CSS variables can be used to control customize the `<xin-segmented>` component.
+
+    --segmented-align-items
+    --segmented-direction
+    --segmented-option-color
+    --segmented-option-current-background
+    --segmented-option-current-color
+    --segmented-option-font
+    --segmented-option-gap
+    --segmented-option-grid-columns
+    --segmented-option-icon-color
+    --segmented-option-padding
+    --segmented-options-background
+    --segmented-options-border-radius
+    --segmented-placeholder-opacity
+*/
+import { Component as WebComponent, elements, varDefault, } from 'xinjs';
+import { icons } from './icons';
+import { xinLocalized } from './localize';
+const { div, slot, label, span, input } = elements;
+export class XinSegmented extends WebComponent {
+    choices = '';
+    other = '';
+    multiple = false;
+    name = '';
+    placeholder = 'Please specify…';
+    localized = false;
+    value = null;
+    get values() {
+        return (this.value || '')
+            .split(',')
+            .map((v) => v.trim())
+            .filter((v) => v !== '');
+    }
+    content = () => [
+        slot(),
+        div({ part: 'options' }, input({ part: 'custom', hidden: true })),
+    ];
+    static styleSpec = {
+        ':host': {
+            display: 'inline-flex',
+            gap: varDefault.segmentedOptionGap('8px'),
+            alignItems: varDefault.segmentedAlignItems('center'),
+        },
+        ':host, :host::part(options)': {
+            flexDirection: varDefault.segmentedDirection('row'),
+        },
+        ':host label': {
+            display: 'inline-grid',
+            alignItems: 'center',
+            gap: varDefault.segmentedOptionGap('8px'),
+            gridTemplateColumns: varDefault.segmentedOptionGridColumns('0px 24px 1fr'),
+            padding: varDefault.segmentedOptionPadding('4px 12px'),
+            font: varDefault.segmentedOptionFont('16px'),
+        },
+        ':host label:has(:checked)': {
+            color: varDefault.segmentedOptionCurrentColor('#eee'),
+            background: varDefault.segmentedOptionCurrentBackground('#44a'),
+        },
+        ':host svg': {
+            height: varDefault.segmentOptionIconSize('16px'),
+            stroke: varDefault.segmentedOptionIconColor('currentColor'),
+        },
+        ':host label.no-icon': {
+            gap: 0,
+            gridTemplateColumns: varDefault.segmentedOptionGridColumns('0px 1fr'),
+        },
+        ':host input[type="radio"], :host input[type="checkbox"]': {
+            visibility: varDefault.segmentedInputVisibility('hidden'),
+        },
+        ':host::part(options)': {
+            display: 'flex',
+            borderRadius: varDefault.segmentedOptionsBorderRadius('8px'),
+            background: varDefault.segmentedOptionsBackground('#fff'),
+            color: varDefault.segmentedOptionColor('#222'),
+            overflow: 'hidden',
+            alignItems: varDefault.segmentedOptionAlignItems('stretch'),
+        },
+        ':host::part(custom)': {
+            padding: varDefault.segmentedOptionPadding('4px 12px'),
+            color: varDefault.segmentedOptionCurrentColor('#eee'),
+            background: varDefault.segmentedOptionCurrentBackground('#44a'),
+            font: varDefault.segmentedOptionFont('16px'),
+            border: '0',
+            outline: 'none',
+        },
+        ':host::part(custom)::placeholder': {
+            color: varDefault.segmentedOptionCurrentColor('#eee'),
+            opacity: varDefault.segmentedPlaceholderOpacity(0.75),
+        },
+    };
+    constructor() {
+        super();
+        this.initAttributes('direction', 'choices', 'other', 'multiple', 'name', 'placeholder', 'localized');
+    }
+    valueChanged = false;
+    handleChange = () => {
+        const { options, custom } = this.parts;
+        if (this.multiple) {
+            const inputs = [
+                ...options.querySelectorAll('input:checked'),
+            ];
+            this.value = inputs.map((input) => input.value).join(',');
+        }
+        else {
+            const input = options.querySelector('input:checked');
+            if (!input) {
+                this.value = null;
+            }
+            else if (input.value) {
+                custom.setAttribute('hidden', '');
+                this.value = input.value;
+            }
+            else {
+                custom.removeAttribute('hidden');
+                custom.focus();
+                custom.select();
+                this.value = custom.value;
+            }
+        }
+        this.valueChanged = true;
+    };
+    handleKey = (event) => {
+        switch (event.code) {
+            case 'Space':
+                ;
+                event.target.click();
+                break;
+        }
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        const { options } = this.parts;
+        if (this.name === '') {
+            this.name = this.instanceId;
+        }
+        options.addEventListener('change', this.handleChange);
+        options.addEventListener('keydown', this.handleKey);
+        if (this.other && this.multiple) {
+            console.warn(this, 'is set to [other] and [multiple]; [other] will be ignored');
+            this.other = '';
+        }
+    }
+    get _choices() {
+        const options = Array.isArray(this.choices)
+            ? this.choices
+            : this.choices
+                .split(',')
+                .filter((c) => c.trim() !== '')
+                .map((c) => {
+                const [value, remains] = c.split('=').map((v) => v.trim());
+                const [caption, iconName] = (remains || value)
+                    .split(':')
+                    .map((v) => v.trim());
+                const icon = iconName ? icons[iconName]() : '';
+                const choice = { value, icon, caption };
+                return choice;
+            });
+        if (this.other && !this.multiple) {
+            const [caption, icon] = this.other.split(':');
+            options.push({
+                value: '',
+                caption,
+                icon,
+            });
+        }
+        return options;
+    }
+    get isOtherValue() {
+        return Boolean(this.value === '' ||
+            (this.value &&
+                !this._choices.find((choice) => choice.value === this.value)));
+    }
+    render() {
+        super.render();
+        if (this.valueChanged) {
+            this.valueChanged = false;
+            return;
+        }
+        const { options, custom } = this.parts;
+        options.textContent = '';
+        const type = this.multiple ? 'checkbox' : 'radio';
+        const { values, isOtherValue } = this;
+        options.append(...this._choices.map((choice) => {
+            return label({ tabindex: 0 }, input({
+                type,
+                name: this.name,
+                value: choice.value,
+                checked: values.includes(choice.value) ||
+                    (choice.value === '' && isOtherValue),
+                tabIndex: -1,
+            }), choice.icon || { class: 'no-icon' }, this.localized ? xinLocalized(choice.caption) : span(choice.caption));
+        }));
+        if (this.other && !this.multiple) {
+            custom.hidden = !isOtherValue;
+            custom.value = isOtherValue ? this.value : '';
+            custom.placeholder = this.placeholder;
+            options.append(custom);
+        }
+    }
+}
+export const xinSegmented = XinSegmented.elementCreator({
+    tag: 'xin-segmented',
+});