@vollowx/seele 0.13.4 → 0.13.6

package/src/base/controllers/list-controller.d.ts

@@ -0,0 +1,37 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ListItem } from '../list-item.js';
+export interface ListControllerConfig<Item extends ListItem> {
+    isItem: (item: HTMLElement) => item is Item;
+    getPossibleItems: () => HTMLElement[];
+    blurItem: (item: Item) => void;
+    focusItem: (item: Item) => void;
+    isActivatable?: (item: Item) => boolean;
+    wrapNavigation?: () => boolean;
+}
+export declare class ListController<Item extends ListItem> implements ReactiveController {
+    host: ReactiveControllerHost;
+    isItem: (item: HTMLElement) => item is Item;
+    private readonly getPossibleItems;
+    private readonly blurItem;
+    private readonly focusItem;
+    private readonly wrapNavigation;
+    constructor(host: ReactiveControllerHost, config: ListControllerConfig<Item>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get items(): Item[];
+    get currentIndex(): number;
+    _focusedItem: Item | null;
+    private searchString;
+    private searchTimeout;
+    handleType(char: string): boolean;
+    private getSearchString;
+    clearSearch(): void;
+    _focusItem(item: Item): void;
+    _blurItem(item: Item): void;
+    focusFirstItem(): void;
+    focusLastItem(): void;
+    focusNextItem(): void;
+    focusPreviousItem(): void;
+    handleSlotChange(): void;
+}
+export declare function getIndexByLetter(options: string[], filter: string, startIndex?: number): number;

package/src/base/controllers/list-controller.js

@@ -1,6 +1,6 @@
 import { filterOptions } from '../menu.js';
 export class ListController {
-    constructor(host, config){
+    constructor(host, config) {
         this._focusedItem = null;
         this.searchString = '';
         this.searchTimeout = null;
@@ -12,25 +12,28 @@ export class ListController {
         this.focusItem = focusItem;
         this.wrapNavigation = wrapNavigation;
     }
-    hostConnected() {}
-    hostDisconnected() {}
+    hostConnected() { }
+    hostDisconnected() { }
     get items() {
         return this.getPossibleItems().filter(this.isItem);
     }
     get currentIndex() {
-        if (!this._focusedItem) return -1;
+        if (!this._focusedItem)
+            return -1;
         return this.items.indexOf(this._focusedItem);
     }
     handleType(char) {
         const searchString = this.getSearchString(char);
         const items = this.items;
-        const optionsText = items.map((item)=>item.innerText);
+        const optionsText = items.map((item) => item.innerText);
         const searchIndex = getIndexByLetter(optionsText, searchString, this.currentIndex + 1);
         if (searchIndex >= 0) {
             this._focusItem(items[searchIndex]);
             return true;
-        } else {
-            if (this.searchTimeout) window.clearTimeout(this.searchTimeout);
+        }
+        else {
+            if (this.searchTimeout)
+                window.clearTimeout(this.searchTimeout);
             this.searchString = '';
             return false;
         }
@@ -39,7 +42,7 @@ export class ListController {
         if (this.searchTimeout) {
             window.clearTimeout(this.searchTimeout);
         }
-        this.searchTimeout = window.setTimeout(()=>{
+        this.searchTimeout = window.setTimeout(() => {
             this.searchString = '';
         }, 500);
         this.searchString += char;
@@ -53,7 +56,8 @@ export class ListController {
         }
     }
     _focusItem(item) {
-        if (this._focusedItem !== null) this._blurItem(this._focusedItem);
+        if (this._focusedItem !== null)
+            this._blurItem(this._focusedItem);
         this.focusItem(item);
         this._focusedItem = item;
     }
@@ -70,7 +74,8 @@ export class ListController {
     focusNextItem() {
         const items = this.items;
         const count = items.length;
-        if (count === 0) return;
+        if (count === 0)
+            return;
         let nextIndex = this.currentIndex + 1;
         if (nextIndex >= count) {
             nextIndex = this.wrapNavigation() ? 0 : count - 1;
@@ -80,7 +85,8 @@ export class ListController {
     focusPreviousItem() {
         const items = this.items;
         const count = items.length;
-        if (count === 0) return;
+        if (count === 0)
+            return;
         let prevIndex = this.currentIndex - 1;
         if (prevIndex < 0) {
             prevIndex = this.wrapNavigation() ? count - 1 : 0;
@@ -96,16 +102,18 @@ export class ListController {
 export function getIndexByLetter(options, filter, startIndex = 0) {
     const orderedOptions = [
         ...options.slice(startIndex),
-        ...options.slice(0, startIndex)
+        ...options.slice(0, startIndex),
     ];
     const firstMatch = filterOptions(orderedOptions, filter)[0];
-    const allSameLetter = (array)=>array.every((letter)=>letter === array[0]);
+    const allSameLetter = (array) => array.every((letter) => letter === array[0]);
     if (firstMatch) {
         return options.indexOf(firstMatch);
-    } else if (allSameLetter(filter.split(''))) {
+    }
+    else if (allSameLetter(filter.split(''))) {
         const matches = filterOptions(orderedOptions, filter[0]);
         return options.indexOf(matches[0]);
-    } else {
+    }
+    else {
         return -1;
     }
 }

package/src/base/controllers/popover-controller.d.ts

@@ -0,0 +1,35 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { InternalsAttachedInterface } from '../mixins/internals-attached.js';
+import { MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
+export declare function transformOriginFromArrow(placement: Placement, arrowData?: MiddlewareData['arrow']): string;
+export interface PopoverControllerConfig {
+    popover: () => HTMLElement | null;
+    trigger: () => HTMLElement | null;
+    positioning: {
+        placement: () => Placement;
+        strategy: () => Strategy;
+        offset: () => number;
+        windowPadding: () => number;
+    };
+    durations: {
+        open: () => number;
+        close: () => number;
+    };
+    onClickAway?: () => void;
+}
+export declare class PopoverController implements ReactiveController {
+    #private;
+    host: ReactiveControllerHost & InternalsAttachedInterface;
+    private readonly config;
+    private _open;
+    get open(): boolean;
+    private cleanupAutoUpdate?;
+    constructor(host: ReactiveControllerHost & InternalsAttachedInterface, config: PopoverControllerConfig);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    animateOpen(): Promise<void>;
+    animateClose(): Promise<void>;
+    private cleanup;
+    private _dummyArrow;
+    reposition(): Promise<void>;
+}

package/src/base/controllers/popover-controller.js

@@ -1,6 +1,6 @@
 import { isServer } from 'lit';
-import { internals } from '../mixins/internals-attached.js';
-import { autoUpdate, computePosition, arrow, flip, offset, shift } from '@floating-ui/dom';
+import { internals, } from '../mixins/internals-attached.js';
+import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
 export function transformOriginFromArrow(placement, arrowData) {
     const { x: arrowX, y: arrowY } = arrowData || {};
     const [side] = placement.split('-');
@@ -9,13 +9,16 @@ export function transformOriginFromArrow(placement, arrowData) {
     if (side === 'top') {
         originX = arrowX != null ? `${arrowX}px` : 'center';
         originY = 'bottom';
-    } else if (side === 'bottom') {
+    }
+    else if (side === 'bottom') {
         originX = arrowX != null ? `${arrowX}px` : 'center';
         originY = 'top';
-    } else if (side === 'left') {
+    }
+    else if (side === 'left') {
         originX = 'right';
         originY = arrowY != null ? `${arrowY}px` : 'center';
-    } else if (side === 'right') {
+    }
+    else if (side === 'right') {
         originX = 'left';
         originY = arrowY != null ? `${arrowY}px` : 'center';
     }
@@ -25,7 +28,7 @@ export class PopoverController {
     get open() {
         return this._open;
     }
-    constructor(host, config){
+    constructor(host, config) {
         this._open = false;
         // Different from those in the Tooltip, these timers are used to manage the
         // animation timing.
@@ -33,12 +36,14 @@ export class PopoverController {
         this.#closeTimer = null;
         // TODO: Provide the ability to specify an arrow element.
         this._dummyArrow = isServer ? null : document.createElement('div');
-        this.#handleClickAway = (event)=>{
+        this.#handleClickAway = (event) => {
             const trigger = this.config.trigger();
             const popover = this.config.popover();
             const path = event.composedPath();
-            if (trigger && path.includes(trigger)) return;
-            if (popover && path.includes(popover)) return;
+            if (trigger && path.includes(trigger))
+                return;
+            if (popover && path.includes(popover))
+                return;
             this.config.onClickAway?.();
         };
         (this.host = host).addController(this);
@@ -54,14 +59,17 @@ export class PopoverController {
         this.cleanupAutoUpdate?.();
         window.removeEventListener('pointerup', this.#handleClickAway);
     }
+    // Different from those in the Tooltip, these timers are used to manage the
+    // animation timing.
     #openTimer;
     #closeTimer;
     async animateOpen() {
-        if (this._open) return;
+        if (this._open)
+            return;
         this._open = true;
         // Prevent the click that triggered the open from immediately closing it
         // TODO: Use a global event listener to manage this more effectively
-        setTimeout(()=>{
+        setTimeout(() => {
             if (this._open) {
                 window.addEventListener('pointerup', this.#handleClickAway);
             }
@@ -75,29 +83,31 @@ export class PopoverController {
         const popover = this.config.popover();
         if (trigger && popover) {
             this.cleanupAutoUpdate?.();
-            this.cleanupAutoUpdate = autoUpdate(trigger, popover, ()=>this.reposition());
+            this.cleanupAutoUpdate = autoUpdate(trigger, popover, () => this.reposition());
             // Initial position
             await this.reposition();
         }
         if (openDuration === 0) {
             this.host[internals].states.add('opened');
-        } else {
+        }
+        else {
             // Wait for a frame to ensure the element is rendered with base styles
             // e.g. (opacity 0) before adding the opening state e.g. (opacity 1) to
             // trigger transition.
-            requestAnimationFrame(()=>{
+            requestAnimationFrame(() => {
                 if (this._open) {
                     this.host[internals].states.add('opening');
                 }
             });
-            this.#openTimer = setTimeout(()=>{
+            this.#openTimer = setTimeout(() => {
                 this.host[internals].states.delete('opening');
                 this.host[internals].states.add('opened');
             }, openDuration);
         }
     }
     async animateClose() {
-        if (!this._open) return;
+        if (!this._open)
+            return;
         this._open = false;
         window.removeEventListener('pointerup', this.#handleClickAway);
         clearTimeout(this.#openTimer);
@@ -110,9 +120,10 @@ export class PopoverController {
             this.cleanup();
             this.host[internals].states.delete('closing');
             this.host[internals].states.add('closed');
-        } else {
+        }
+        else {
             this.host[internals].states.add('closing');
-            this.#closeTimer = setTimeout(()=>{
+            this.#closeTimer = setTimeout(() => {
                 this.cleanup();
                 this.host[internals].states.delete('closing');
                 this.host[internals].states.add('closed');
@@ -126,28 +137,25 @@ export class PopoverController {
     reposition() {
         const trigger = this.config.trigger();
         const popover = this.config.popover();
-        if (!trigger || !popover) return Promise.resolve();
+        if (!trigger || !popover)
+            return Promise.resolve();
         return computePosition(trigger, popover, {
             placement: this.config.positioning.placement(),
             strategy: this.config.positioning.strategy(),
             middleware: [
                 offset(this.config.positioning.offset()),
-                flip({
-                    padding: this.config.positioning.windowPadding()
-                }),
+                flip({ padding: this.config.positioning.windowPadding() }),
                 shift({
                     padding: this.config.positioning.windowPadding(),
-                    crossAxis: true
+                    crossAxis: true,
                 }),
-                arrow({
-                    element: this._dummyArrow
-                })
-            ]
-        }).then(({ x, y, placement, middlewareData })=>{
+                arrow({ element: this._dummyArrow }),
+            ],
+        }).then(({ x, y, placement, middlewareData }) => {
             Object.assign(popover.style, {
                 left: `${x}px`,
                 top: `${y}px`,
-                transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow)
+                transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
             });
         });
     }

package/src/base/dialog.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * @csspart dialog
+ *
+ * Example `render()`:
+ *
+ * ```
+ * <dialog
+ *   part="dialog"
+ *   @cancel="${this._handleCancel}">
+ *   <slot></slot>
+ * </dialog>
+ * ```
+ */
+export declare class Dialog extends LitElement {
+    $dialog: HTMLDialogElement;
+    _handleCancel: (e: Event) => void;
+    show(): void;
+    close(): void;
+}

package/src/base/dialog.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { query } from 'lit/decorators.js';
 /**
@@ -13,20 +13,22 @@ import { query } from 'lit/decorators.js';
  *   <slot></slot>
  * </dialog>
  * ```
- */ export class Dialog extends LitElement {
+ */
+export class Dialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._handleCancel = (e) => {
+            e.preventDefault();
+            this.close();
+        };
+    }
     show() {
         this.$dialog.showModal();
     }
     close() {
         this.$dialog.close();
     }
-    constructor(...args){
-        super(...args), this._handleCancel = (e)=>{
-            e.preventDefault();
-            this.close();
-        };
-    }
 }
-_ts_decorate([
+__decorate([
     query('dialog')
 ], Dialog.prototype, "$dialog", void 0);

package/src/base/field.d.ts

@@ -0,0 +1,3 @@
+import { LitElement } from 'lit';
+export declare class Field extends LitElement {
+}

package/src/base/input.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2018-2023 Google, Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Input extends Base {
+    type: string;
+    value: string;
+    placeholder: string;
+    required: boolean;
+    readOnly: boolean;
+    /**
+     * Whether the input accepts multiple values (e.g. email).
+     */
+    multiple: boolean;
+    min: string;
+    max: string;
+    step: string;
+    minLength: number;
+    maxLength: number;
+    /**
+     * The pattern regex.
+     */
+    pattern: string;
+    autocomplete: string;
+    focused: boolean;
+    $inputOrTextarea: HTMLInputElement | HTMLTextAreaElement;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private redispatchEvent;
+    private syncValidity;
+    select(): void;
+    stepUp(n?: number): void;
+    stepDown(n?: number): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+}
+export {};

package/src/base/input.js

@@ -1,9 +1,10 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 /**
  * @license
  * Copyright 2018-2023 Google, Inc.
  * SPDX-License-Identifier: Apache-2.0
- */ import { LitElement, html, nothing } from 'lit';
+ */
+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 { InternalsAttached, internals } from './mixins/internals-attached.js';
@@ -11,14 +12,37 @@ import { FocusDelegated } from './mixins/focus-delegated.js';
 import { FormAssociated } from './mixins/form-associated.js';
 const Base = FormAssociated(FocusDelegated(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;
+    }
     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 `<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}">`;
+        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);
@@ -46,12 +70,13 @@ export class Input extends Base {
         const newEvent = new Event(event.type, {
             bubbles: event.bubbles,
             cancelable: event.cancelable,
-            composed: true
+            composed: true,
         });
         this.dispatchEvent(newEvent);
     }
     syncValidity() {
-        if (!this.$inputOrTextarea) return;
+        if (!this.$inputOrTextarea)
+            return;
         this[internals].setValidity(this.$inputOrTextarea.validity, this.$inputOrTextarea.validationMessage, this.$inputOrTextarea);
     }
     select() {
@@ -59,15 +84,11 @@ export class Input extends Base {
     }
     stepUp(n) {
         this.$inputOrTextarea?.stepUp(n);
-        this.handleInput({
-            target: this.$inputOrTextarea
-        });
+        this.handleInput({ target: this.$inputOrTextarea });
     }
     stepDown(n) {
         this.$inputOrTextarea?.stepDown(n);
-        this.handleInput({
-            target: this.$inputOrTextarea
-        });
+        this.handleInput({ target: this.$inputOrTextarea });
     }
     formResetCallback() {
         this.value = this.getAttribute('value') || '';
@@ -77,78 +98,49 @@ export class Input extends Base {
         this.value = state;
         this.syncValidity();
     }
-    constructor(...args){
-        super(...args), 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;
-    }
 }
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Input.prototype, "type", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Input.prototype, "value", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Input.prototype, "placeholder", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Input.prototype, "required", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Input.prototype, "readOnly", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Input.prototype, "multiple", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Input.prototype, "min", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Input.prototype, "max", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Input.prototype, "step", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Input.prototype, "minLength", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Input.prototype, "maxLength", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Input.prototype, "pattern", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Input.prototype, "autocomplete", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Input.prototype, "focused", void 0);
-_ts_decorate([
+__decorate([
     query('[part~=input]')
 ], Input.prototype, "$inputOrTextarea", void 0);

package/src/base/item.d.ts

@@ -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 declare class Item extends LitElement {
+}

package/src/base/item.js

@@ -2,5 +2,6 @@ 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 {
+ */
+export class Item extends LitElement {
 }

package/src/base/list-item.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+declare const ListItem_base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class ListItem extends ListItem_base {
+    #private;
+    _role: string;
+    static styles: any[];
+    selected: boolean;
+    focused: boolean;
+    get displayText(): string;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    focus(): void;
+    blur(): void;
+}
+export {};