@vollowx/seele 0.7.0

package/src/base/input.js

@@ -0,0 +1,182 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { FormAssociated } from './mixins/form-associated.js';
+import { InternalsAttached, internals } from './mixins/internals-attached.js';
+const Base = FormAssociated(InternalsAttached(LitElement));
+export class Input extends Base {
+    constructor() {
+        super(...arguments);
+        this.type = 'text';
+        this.value = '';
+        this.placeholder = '';
+        this.required = false;
+        this.readOnly = false;
+        /**
+         * Whether the input accepts multiple values (e.g. email).
+         */
+        this.multiple = false;
+        this.min = '';
+        this.max = '';
+        this.step = '';
+        this.minLength = -1;
+        this.maxLength = -1;
+        /**
+         * The pattern regex.
+         */
+        this.pattern = '';
+        this.autocomplete = '';
+        this.focused = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    render() {
+        const isTextarea = this.type === 'textarea';
+        const minLength = this.minLength > -1 ? this.minLength : nothing;
+        const maxLength = this.maxLength > -1 ? this.maxLength : nothing;
+        if (isTextarea) {
+            return html `
+        <textarea
+          part="input"
+          .value=${live(this.value)}
+          placeholder=${(this.placeholder || nothing)}
+          ?required=${this.required}
+          ?readonly=${this.readOnly}
+          ?disabled=${this.disabled}
+          minlength=${minLength}
+          maxlength=${maxLength}
+          autocomplete=${(this.autocomplete || nothing)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        ></textarea>
+      `;
+        }
+        return html `
+      <input
+        part="input"
+        type=${this.type}
+        .value=${live(this.value)}
+        placeholder=${(this.placeholder || nothing)}
+        ?required=${this.required}
+        ?readonly=${this.readOnly}
+        ?disabled=${this.disabled}
+        ?multiple=${this.multiple}
+        min=${(this.min || nothing)}
+        max=${(this.max || nothing)}
+        step=${(this.step || nothing)}
+        minlength=${minLength}
+        maxlength=${maxLength}
+        pattern=${(this.pattern || nothing)}
+        autocomplete=${(this.autocomplete || nothing)}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      />
+    `;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this[internals].setFormValue(this.value);
+            this.syncValidity();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.syncValidity();
+    }
+    handleChange(event) {
+        this.redispatchEvent(event);
+    }
+    handleFocus() {
+        this.focused = true;
+    }
+    handleBlur() {
+        this.focused = false;
+    }
+    redispatchEvent(event) {
+        // Redispatch 'change' event as composed to escape shadow root
+        const newEvent = new Event(event.type, {
+            bubbles: event.bubbles,
+            cancelable: event.cancelable,
+            composed: true,
+        });
+        this.dispatchEvent(newEvent);
+    }
+    syncValidity() {
+        if (!this.inputOrTextarea)
+            return;
+        this[internals].setValidity(this.inputOrTextarea.validity, this.inputOrTextarea.validationMessage, this.inputOrTextarea);
+    }
+    select() {
+        this.inputOrTextarea?.select();
+    }
+    stepUp(n) {
+        this.inputOrTextarea?.stepUp(n);
+        this.handleInput({ target: this.inputOrTextarea });
+    }
+    stepDown(n) {
+        this.inputOrTextarea?.stepDown(n);
+        this.handleInput({ target: this.inputOrTextarea });
+    }
+    formResetCallback() {
+        this.value = this.getAttribute('value') || '';
+        this.syncValidity();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+        this.syncValidity();
+    }
+}
+__decorate([
+    property({ reflect: true })
+], Input.prototype, "type", void 0);
+__decorate([
+    property()
+], Input.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], Input.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Input.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Input.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Input.prototype, "multiple", void 0);
+__decorate([
+    property()
+], Input.prototype, "min", void 0);
+__decorate([
+    property()
+], Input.prototype, "max", void 0);
+__decorate([
+    property()
+], Input.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], Input.prototype, "minLength", void 0);
+__decorate([
+    property({ type: Number })
+], Input.prototype, "maxLength", void 0);
+__decorate([
+    property()
+], Input.prototype, "pattern", void 0);
+__decorate([
+    property({ reflect: true })
+], Input.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Input.prototype, "focused", void 0);
+__decorate([
+    query('[part~=input]')
+], Input.prototype, "inputOrTextarea", void 0);

package/src/base/item.js

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+/**
+ * This class works as a "UI item", it should be contained in menu items,
+ * options, etc.
+ */
+export class Item extends LitElement {
+}

package/src/base/list-item.js

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { genUniqueId } from '../core/unique-id.js';
+import { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { FormAssociated } from './mixins/form-associated.js';
+import { hiddenStyles } from './hidden-styles.css.js';
+export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.focused = false;
+        this._role = 'option';
+    }
+    static { this.styles = [hiddenStyles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this[internals].role = this._role;
+        this.setAttribute('tabindex', '-1');
+        this.#updateInternals();
+        if (!this.id)
+            this.id = genUniqueId('item');
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('disabled') ||
+            changed.has('focused') ||
+            changed.has('selected')) {
+            this.#updateInternals();
+        }
+    }
+    #updateInternals() {
+        this[internals].ariaDisabled = this.disabled ? 'true' : 'false';
+        this.focused
+            ? this[internals].states.add('focused')
+            : this[internals].states.delete('focused');
+        this[internals].ariaSelected = this.selected ? 'true' : 'false';
+        this.selected
+            ? this[internals].states.add('selected')
+            : this[internals].states.delete('selected');
+    }
+    focus() {
+        this.focused = true;
+    }
+    blur() {
+        this.focused = false;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ListItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ListItem.prototype, "focused", void 0);

package/src/base/menu-item.js

@@ -0,0 +1,12 @@
+import { ListItem } from './list-item.js';
+export const MenuItemMixin = (superClass) => {
+    class OptionElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this._role = 'menuitem';
+        }
+    }
+    return OptionElement;
+};
+export class MenuItem extends MenuItemMixin(ListItem) {
+}

package/src/base/menu-utils.js

@@ -0,0 +1,111 @@
+export const MenuActions = {
+    Close: 0,
+    CloseSelect: 1,
+    First: 2,
+    Last: 3,
+    Next: 4,
+    Open: 5,
+    PageDown: 6,
+    PageUp: 7,
+    Previous: 8,
+    Select: 9,
+    Type: 10,
+};
+export function filterOptions(options = [], filter, exclude = []) {
+    return options.filter((option) => {
+        const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
+        return matches && exclude.indexOf(option) < 0;
+    });
+}
+export function getActionFromKey(event, menuOpen) {
+    const { key, altKey, ctrlKey, metaKey } = event;
+    const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
+    if (!menuOpen && openKeys.includes(key)) {
+        return MenuActions.Open;
+    }
+    if (key === 'Home') {
+        return MenuActions.First;
+    }
+    if (key === 'End') {
+        return MenuActions.Last;
+    }
+    if (key === 'Backspace' ||
+        key === 'Clear' ||
+        (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)) {
+        return MenuActions.Type;
+    }
+    if (menuOpen) {
+        if (key === 'ArrowUp' && altKey) {
+            return MenuActions.CloseSelect;
+        }
+        else if (key === 'ArrowDown' && !altKey) {
+            return MenuActions.Next;
+        }
+        else if (key === 'ArrowUp') {
+            return MenuActions.Previous;
+        }
+        else if (key === 'PageUp') {
+            return MenuActions.PageUp;
+        }
+        else if (key === 'PageDown') {
+            return MenuActions.PageDown;
+        }
+        else if (key === 'Escape') {
+            return MenuActions.Close;
+        }
+        else if (key === 'Enter' || key === ' ') {
+            return MenuActions.CloseSelect;
+        }
+    }
+    return undefined;
+}
+export function getIndexByLetter(options, filter, startIndex = 0) {
+    const orderedOptions = [
+        ...options.slice(startIndex),
+        ...options.slice(0, startIndex),
+    ];
+    const firstMatch = filterOptions(orderedOptions, filter)[0];
+    const allSameLetter = (array) => array.every((letter) => letter === array[0]);
+    if (firstMatch) {
+        return options.indexOf(firstMatch);
+    }
+    else if (allSameLetter(filter.split(''))) {
+        const matches = filterOptions(orderedOptions, filter[0]);
+        return options.indexOf(matches[0]);
+    }
+    else {
+        return -1;
+    }
+}
+export function getUpdatedIndex(currentIndex, maxIndex, action) {
+    const pageSize = 10;
+    switch (action) {
+        case MenuActions.First:
+            return 0;
+        case MenuActions.Last:
+            return maxIndex;
+        case MenuActions.Previous:
+            return Math.max(0, currentIndex - 1);
+        case MenuActions.Next:
+            return Math.min(maxIndex, currentIndex + 1);
+        case MenuActions.PageUp:
+            return Math.max(0, currentIndex - pageSize);
+        case MenuActions.PageDown:
+            return Math.min(maxIndex, currentIndex + pageSize);
+        default:
+            return currentIndex;
+    }
+}
+export function scrollItemIntoView(menu, item, paddingY = 0) {
+    if (!menu)
+        return;
+    // Basic scroll into view logic
+    const menuRect = menu.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    if (itemRect.bottom + paddingY > menuRect.bottom) {
+        menu.scrollTop += itemRect.bottom - menuRect.bottom + paddingY;
+    }
+    else if (itemRect.top - paddingY < menuRect.top) {
+        menu.scrollTop -= menuRect.top - itemRect.top + paddingY;
+    }
+}

package/src/base/menu.js

@@ -0,0 +1,244 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { setFocusVisible } from '../core/focus-visible.js';
+import { Attachable } from './mixins/attachable.js';
+import { internals, InternalsAttached } from './mixins/internals-attached.js';
+import { PopoverController } from './controllers/popover-controller.js';
+import { ListController } from './controllers/list-controller.js';
+import { MenuActions, getActionFromKey, getUpdatedIndex, scrollItemIntoView, } from './menu-utils.js';
+const Base = InternalsAttached(Attachable(LitElement));
+/**
+ * @csspart menu
+ * @csspart items
+ *
+ * @fires {Event} select - Fired when a menu item has been selected.
+ */
+export class Menu extends Base {
+    constructor() {
+        super();
+        this._possibleItemTags = [];
+        this._durations = { show: 0, hide: 0 };
+        this._scrollPadding = 0;
+        this.open = false;
+        this.quick = false;
+        this.align = 'bottom-start';
+        this.alignStrategy = 'absolute';
+        this.offset = 0;
+        this.keepOpenBlur = false;
+        this.keepOpenClickItem = false;
+        this.keepOpenClickOutside = false;
+        this.$lastFocused = null;
+        this.popoverController = new PopoverController(this, {
+            popover: () => this.$menu,
+            trigger: () => this.$control,
+            positioning: {
+                placement: () => this.align,
+                strategy: () => this.alignStrategy,
+                offset: () => this.offset,
+                windowPadding: () => 16,
+            },
+            durations: {
+                open: () => (this.quick ? 0 : this._durations.show),
+                close: () => (this.quick ? 0 : this._durations.hide),
+            },
+            onClickOutside: () => {
+                if (!this.keepOpenClickOutside)
+                    this.open = false;
+            },
+        });
+        this.listController = new ListController(this, {
+            isItem: (item) => this._possibleItemTags.includes(item.tagName.toLowerCase()) &&
+                !item.hasAttribute('disabled'),
+            getPossibleItems: () => Array.from(this.children).filter((child) => this._possibleItemTags.includes(child.tagName.toLowerCase()) &&
+                !child.hasAttribute('disabled')),
+            blurItem: (item) => {
+                item.focused = false;
+            },
+            focusItem: (item) => {
+                item.focused = true;
+                // this[internals].ariaActiveDescendantElement = item;
+                // Somehow setting ariaActiveDescendantElement doesn't actually update it
+                this.setAttribute('aria-activedescendant', item.id);
+                scrollItemIntoView(this.$menu, item, this._scrollPadding);
+            },
+            wrapNavigation: () => false,
+        });
+        this[internals].role = 'menu';
+        this.tabIndex = -1;
+    }
+    render() {
+        return html `<div part="menu">${this.renderItemSlot()}</div>`;
+    }
+    renderItemSlot() {
+        return html `<slot part="items"></slot>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.#handleKeyDown.bind(this));
+        this.addEventListener('focusout', this.#handleFocusOut.bind(this));
+        if (this.$control) {
+            // TODO: Handle $control change
+            this.$control.ariaHasPopup = 'true';
+            this.$control.ariaExpanded = 'false';
+            this.$control.ariaControlsElements = [this];
+            this[internals].ariaLabelledByElements = [this.$control];
+            this.$control.addEventListener('focusout', this.#handleFocusOut.bind(this));
+        }
+        this.listController.items.forEach((item) => {
+            item.addEventListener('mouseover', this.#handleItemMouseOver.bind(this));
+            item.addEventListener('click', this.#handleItemClick.bind(this));
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.#handleKeyDown.bind(this));
+        this.removeEventListener('focusout', this.#handleFocusOut.bind(this));
+        if (this.$control) {
+            this.$control.removeEventListener('focusout', this.#handleFocusOut.bind(this));
+        }
+    }
+    updated(changed) {
+        if (changed.has('open')) {
+            if (this.open) {
+                this.$lastFocused = document.activeElement;
+                if (this.$control) {
+                    this.$control.ariaExpanded = 'true';
+                }
+                this.popoverController.animateOpen().then(() => {
+                    this.focus();
+                    this.listController.focusFirstItem();
+                });
+            }
+            else {
+                this.listController.clearSearch();
+                if (this.$control) {
+                    this.$control.ariaExpanded = 'false';
+                }
+                this.popoverController.animateClose().then(() => {
+                    if (this.$lastFocused) {
+                        this.$lastFocused.focus();
+                        this.$lastFocused = null;
+                    }
+                });
+            }
+        }
+    }
+    #handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const action = getActionFromKey(event, this.open);
+        const items = this.listController.items;
+        const currentIndex = this.listController.currentIndex;
+        const maxIndex = items.length - 1;
+        switch (action) {
+            case MenuActions.Last:
+            case MenuActions.First:
+                this.open = true;
+            // intentional fallthrough
+            case MenuActions.Next:
+            case MenuActions.Previous:
+            case MenuActions.PageUp:
+            case MenuActions.PageDown:
+                event.preventDefault();
+                const nextIndex = getUpdatedIndex(currentIndex, maxIndex, action);
+                this.listController._focusItem(items[nextIndex]);
+                return;
+            case MenuActions.CloseSelect:
+                event.preventDefault();
+                if (currentIndex >= 0) {
+                    this.listController.items[currentIndex].focused = false;
+                    this.dispatchEvent(new CustomEvent('select', {
+                        detail: {
+                            item: this.listController.items[currentIndex],
+                            index: currentIndex,
+                        },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    if (this.keepOpenClickItem)
+                        return;
+                    this.open = false;
+                }
+                return;
+            case MenuActions.Close:
+                event.preventDefault();
+                this.open = false;
+                return;
+            case MenuActions.Type:
+                this.open = true;
+                this.listController.handleType(event.key);
+                return;
+            case MenuActions.Open:
+                event.preventDefault();
+                this.open = true;
+                return;
+        }
+    }
+    #handleFocusOut(event) {
+        if (this.keepOpenBlur)
+            return;
+        const newFocus = event.relatedTarget;
+        const isInside = this.contains(newFocus) ||
+            this.shadowRoot?.contains(newFocus) ||
+            this.$control?.contains(newFocus);
+        if (!isInside) {
+            this.open = false;
+        }
+    }
+    #handleItemMouseOver(event) {
+        setFocusVisible(false);
+        const hoveredItem = event.currentTarget;
+        this.listController._focusItem(hoveredItem);
+    }
+    #handleItemClick(event) {
+        const clickedItem = event.currentTarget;
+        const index = this.listController.items.indexOf(clickedItem);
+        this.listController.items[index].focused = false;
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                item: this.listController.items[index],
+                index: index,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.keepOpenClickItem)
+            return;
+        this.open = false;
+    }
+    // Exposed functions
+    show() {
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Menu.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Menu.prototype, "quick", void 0);
+__decorate([
+    property({ reflect: true })
+], Menu.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Menu.prototype, "alignStrategy", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Menu.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean })
+], Menu.prototype, "keepOpenBlur", void 0);
+__decorate([
+    property({ type: Boolean })
+], Menu.prototype, "keepOpenClickItem", void 0);
+__decorate([
+    property({ type: Boolean })
+], Menu.prototype, "keepOpenClickOutside", void 0);
+__decorate([
+    query('[part="menu"]')
+], Menu.prototype, "$menu", void 0);

package/src/base/mixins/attachable.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+export const Attachable = (superClass) => {
+    class AttachableElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this.currentControl = null;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setCurrentControl(this.$control);
+        }
+        disconnectedCallback() {
+            this.setCurrentControl(null);
+            super.disconnectedCallback();
+        }
+        /**
+         * If has `for` attribute, use it to find the control element.
+         * Otherwise, use the parent element as the control.
+         */
+        get $control() {
+            if (this.hasAttribute('for')) {
+                if (!this.htmlFor || !this.isConnected) {
+                    return null;
+                }
+                return this.getRootNode().querySelector(`#${this.htmlFor}`);
+            }
+            return this.currentControl || this.parentNode instanceof ShadowRoot
+                ? this.parentNode.host
+                : this.parentElement;
+        }
+        set $control(control) {
+            if (control) {
+                this.attach(control);
+            }
+            else {
+                this.detach();
+            }
+        }
+        updated(changed) {
+            super.updated(changed);
+            if (changed.has('htmlFor')) {
+                // Will be triggered when first render using `for` attribute, will be
+                // prevented in setCurrentControl since it's unnecessary.
+                this.setCurrentControl(this.$control);
+            }
+        }
+        setCurrentControl(control) {
+            if (control === this.currentControl)
+                return;
+            this.handleControlChange(this.currentControl, control);
+            this.currentControl = control;
+        }
+        attach(control) {
+            this.setCurrentControl(control);
+            this.removeAttribute('for');
+        }
+        detach() {
+            this.setCurrentControl(null);
+            this.setAttribute('for', '');
+        }
+        /**
+         * Handles the first attaching and actual control element changing
+         */
+        handleControlChange(prev = null, next = null) { }
+    }
+    __decorate([
+        property({ attribute: 'for', type: String })
+    ], AttachableElement.prototype, "htmlFor", void 0);
+    return AttachableElement;
+};