tosijs-ui 1.0.1 → 1.0.2

package/dist/rich-text.js

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

@@ -1,298 +0,0 @@
-/*#
-# 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',
-});