@easemate/web-kit 0.2.0 → 0.3.0

package/build/decorators/Query.d.ts

@@ -1,27 +0,0 @@
-type QueryRoot = 'shadow' | 'light' | 'document';
-type QueryHost = HTMLElement & {
-    renderRoot?: ShadowRoot | DocumentFragment | HTMLElement;
-};
-type QueryFallback<TResult, THost extends QueryHost> = TResult | ((host: THost) => TResult);
-interface BaseQueryOptions<TResult, THost extends QueryHost> {
-    from?: QueryRoot;
-    fallback?: QueryFallback<TResult, THost>;
-}
-interface QueryAllOptions<TElement extends Element, THost extends QueryHost> extends BaseQueryOptions<TElement[], THost> {
-    all: true;
-    closest?: false;
-}
-interface QueryClosestOptions<THost extends QueryHost> extends BaseQueryOptions<Element | null, THost> {
-    closest: true;
-    all?: false;
-}
-interface QuerySingleOptions<TElement extends Element, THost extends QueryHost> extends BaseQueryOptions<TElement | null, THost> {
-    all?: false;
-    closest?: false;
-}
-type QueryOptions<TElement extends Element, THost extends QueryHost> = QueryAllOptions<TElement, THost> | QueryClosestOptions<THost> | QuerySingleOptions<TElement, THost>;
-type QueryReturnType<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>> = TOptions extends QueryAllOptions<TElement, THost> ? TElement[] : TOptions extends QueryClosestOptions<THost> ? Element | null : TElement | null;
-type QueryDecorator<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>> = (target: ClassAccessorDecoratorTarget<THost, QueryReturnType<TElement, THost, TOptions>> | undefined, context: ClassFieldDecoratorContext<THost, QueryReturnType<TElement, THost, TOptions>> | ClassAccessorDecoratorContext<THost, QueryReturnType<TElement, THost, TOptions>>) => ClassAccessorDecoratorResult<THost, QueryReturnType<TElement, THost, TOptions>> | undefined;
-export declare function Query<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>>(selector: string, userOptions: TOptions): QueryDecorator<TElement, THost, TOptions>;
-export declare function Query<TElement extends Element = Element, THost extends QueryHost = QueryHost>(selector: string): QueryDecorator<TElement, THost, QuerySingleOptions<TElement, THost>>;
-export {};

package/build/decorators/Query.js

@@ -1,76 +0,0 @@
-const defaultOptions = {
-    all: false,
-    closest: false,
-    from: 'shadow',
-    fallback: null
-};
-const resolveFallback = (fallback, host) => {
-    if (typeof fallback === 'function') {
-        return fallback(host);
-    }
-    return fallback;
-};
-const resolveRoot = (host, option) => {
-    switch (option) {
-        case 'document':
-            return document;
-        case 'light':
-            return host;
-        default:
-            return host.renderRoot ?? host.shadowRoot ?? host;
-    }
-};
-const resolveQuery = (host, selector, options) => {
-    if (options.closest) {
-        const result = host.closest(selector);
-        return result ?? resolveFallback(options.fallback, host) ?? null;
-    }
-    const root = resolveRoot(host, options.from);
-    if (!root) {
-        return options.all
-            ? (resolveFallback(options.fallback, host) ?? [])
-            : (resolveFallback(options.fallback, host) ?? null);
-    }
-    if (options.all) {
-        const elements = Array.from(root.querySelectorAll(selector));
-        return elements.length > 0
-            ? elements
-            : (resolveFallback(options.fallback, host) ?? []);
-    }
-    const match = root.querySelector(selector);
-    return match ?? resolveFallback(options.fallback, host) ?? null;
-};
-const createQueryDecorator = (selector, options) => {
-    return (_target, context) => {
-        if (context.kind === 'accessor') {
-            const descriptor = {
-                get() {
-                    return resolveQuery(this, selector, options);
-                },
-                set(_value) {
-                    // Readonly accessor
-                }
-            };
-            return descriptor;
-        }
-        context.addInitializer(function () {
-            Object.defineProperty(this, context.name, {
-                configurable: true,
-                enumerable: true,
-                get: () => resolveQuery(this, selector, options)
-            });
-        });
-        return;
-    };
-};
-export function Query(selector, userOptions) {
-    if (!selector) {
-        throw new Error('@Query requires a selector.');
-    }
-    if (userOptions) {
-        const merged = { ...defaultOptions, ...userOptions };
-        return createQueryDecorator(selector, merged);
-    }
-    const merged = defaultOptions;
-    return createQueryDecorator(selector, merged);
-}

package/build/decorators/Watch.cjs

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Watch = Watch;
-const renderQueue = new WeakMap();
-const scheduleRender = (instance) => {
-    if (typeof instance.requestRender === 'function') {
-        instance.requestRender();
-        return;
-    }
-    if (typeof instance.render !== 'function') {
-        return;
-    }
-    if (renderQueue.get(instance)) {
-        return;
-    }
-    renderQueue.set(instance, true);
-    requestAnimationFrame(() => {
-        renderQueue.set(instance, false);
-        instance.render?.();
-    });
-};
-const defaultCompare = (previous, next) => previous === next;
-function Watch(options = {}) {
-    const { compare = defaultCompare, onChange, transform } = options;
-    return (accessor, context) => {
-        if (context.kind !== 'accessor') {
-            throw new Error('@Watch requires the "accessor" keyword on the property.');
-        }
-        return {
-            get() {
-                return accessor.get.call(this);
-            },
-            set(value) {
-                const previous = accessor.get.call(this);
-                if (compare(previous, value)) {
-                    return;
-                }
-                accessor.set.call(this, value);
-                if (onChange) {
-                    onChange.call(this, value, previous);
-                }
-                scheduleRender(this);
-            },
-            init(initialValue) {
-                if (transform) {
-                    return transform.call(this, initialValue);
-                }
-                return initialValue;
-            }
-        };
-    };
-}

package/build/decorators/Watch.d.cts

@@ -1,11 +0,0 @@
-type RenderHost = HTMLElement & {
-    requestRender?(): void;
-    render?(): void;
-};
-interface WatchOptions<TValue, THost extends RenderHost> {
-    compare?: (previous: TValue, next: TValue) => boolean;
-    onChange?: (this: THost, next: TValue, previous: TValue) => void;
-    transform?: (this: THost, initial: TValue) => TValue;
-}
-export declare function Watch<TValue, THost extends RenderHost = RenderHost>(options?: WatchOptions<TValue, THost>): (accessor: ClassAccessorDecoratorTarget<THost, TValue>, context: ClassAccessorDecoratorContext<THost, TValue>) => ClassAccessorDecoratorResult<THost, TValue>;
-export {};

package/build/decorators/Watch.d.ts

@@ -1,11 +0,0 @@
-type RenderHost = HTMLElement & {
-    requestRender?(): void;
-    render?(): void;
-};
-interface WatchOptions<TValue, THost extends RenderHost> {
-    compare?: (previous: TValue, next: TValue) => boolean;
-    onChange?: (this: THost, next: TValue, previous: TValue) => void;
-    transform?: (this: THost, initial: TValue) => TValue;
-}
-export declare function Watch<TValue, THost extends RenderHost = RenderHost>(options?: WatchOptions<TValue, THost>): (accessor: ClassAccessorDecoratorTarget<THost, TValue>, context: ClassAccessorDecoratorContext<THost, TValue>) => ClassAccessorDecoratorResult<THost, TValue>;
-export {};

package/build/decorators/Watch.js

@@ -1,49 +0,0 @@
-const renderQueue = new WeakMap();
-const scheduleRender = (instance) => {
-    if (typeof instance.requestRender === 'function') {
-        instance.requestRender();
-        return;
-    }
-    if (typeof instance.render !== 'function') {
-        return;
-    }
-    if (renderQueue.get(instance)) {
-        return;
-    }
-    renderQueue.set(instance, true);
-    requestAnimationFrame(() => {
-        renderQueue.set(instance, false);
-        instance.render?.();
-    });
-};
-const defaultCompare = (previous, next) => previous === next;
-export function Watch(options = {}) {
-    const { compare = defaultCompare, onChange, transform } = options;
-    return (accessor, context) => {
-        if (context.kind !== 'accessor') {
-            throw new Error('@Watch requires the "accessor" keyword on the property.');
-        }
-        return {
-            get() {
-                return accessor.get.call(this);
-            },
-            set(value) {
-                const previous = accessor.get.call(this);
-                if (compare(previous, value)) {
-                    return;
-                }
-                accessor.set.call(this, value);
-                if (onChange) {
-                    onChange.call(this, value, previous);
-                }
-                scheduleRender(this);
-            },
-            init(initialValue) {
-                if (transform) {
-                    return transform.call(this, initialValue);
-                }
-                return initialValue;
-            }
-        };
-    };
-}

package/build/decorators/index.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Watch = exports.Query = exports.Prop = exports.OutsideClick = exports.Listen = exports.Component = void 0;
-var Component_1 = require("./Component.cjs");
-Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_1.Component; } });
-var Listen_1 = require("./Listen.cjs");
-Object.defineProperty(exports, "Listen", { enumerable: true, get: function () { return Listen_1.Listen; } });
-var OutsideClick_1 = require("./OutsideClick.cjs");
-Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return OutsideClick_1.OutsideClick; } });
-var Prop_1 = require("./Prop.cjs");
-Object.defineProperty(exports, "Prop", { enumerable: true, get: function () { return Prop_1.Prop; } });
-var Query_1 = require("./Query.cjs");
-Object.defineProperty(exports, "Query", { enumerable: true, get: function () { return Query_1.Query; } });
-var Watch_1 = require("./Watch.cjs");
-Object.defineProperty(exports, "Watch", { enumerable: true, get: function () { return Watch_1.Watch; } });

package/build/decorators/index.d.cts

@@ -1,6 +0,0 @@
-export { Component, type RenderContext } from "./Component.cjs";
-export { Listen } from "./Listen.cjs";
-export { OutsideClick } from "./OutsideClick.cjs";
-export { Prop } from "./Prop.cjs";
-export { Query } from "./Query.cjs";
-export { Watch } from "./Watch.cjs";

package/build/decorators/index.d.ts

@@ -1,6 +0,0 @@
-export { Component, type RenderContext } from "./Component.js";
-export { Listen } from "./Listen.js";
-export { OutsideClick } from "./OutsideClick.js";
-export { Prop } from "./Prop.js";
-export { Query } from "./Query.js";
-export { Watch } from "./Watch.js";

package/build/decorators/index.js

@@ -1,6 +0,0 @@
-export { Component } from "./Component.js";
-export { Listen } from "./Listen.js";
-export { OutsideClick } from "./OutsideClick.js";
-export { Prop } from "./Prop.js";
-export { Query } from "./Query.js";
-export { Watch } from "./Watch.js";

package/build/elements/button/index.cjs

@@ -1,214 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const lit_html_1 = require("lit-html");
-const Component_1 = require("../../decorators/Component");
-const Prop_1 = require("../../decorators/Prop");
-@(0, Component_1.Component)({
-    tag: 'ease-button',
-    autoSlot: true,
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    :host([data-variant="headless"]) {
-      display: inline-flex;
-      width: auto;
-    }
-
-    button {
-      appearance: none;
-      font-family: var(--ease-font-family, inherit);
-      font-optical-sizing: auto;
-      font-size: var(--ease-button-font-size, var(--ease-font-size-sm, 12px));
-      font-weight: 550;
-      color: var(--ease-button-color, var(--color-blue-100));
-      min-width: 0;
-      padding: var(--ease-button-padding, 7px 8px);
-      display: block;
-      border-radius: var(--ease-button-radius, 5px);
-      background-color: var(--ease-button-background, var(--color-gray-850));
-      border: none;
-      outline: none;
-      margin: 0;
-      line-height: var(--ease-button-line-height, 14px);
-      box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
-      transition: color 0.2s, background-color 0.2s, scale 0.2s, box-shadow 0.2s;
-      cursor: pointer;
-      min-width: var(--ease-button-min-width, 88px);
-      white-space: nowrap;
-      overflow: hidden;
-      position: relative;
-      text-overflow: ellipsis;
-      text-align: center;
-
-      &[data-pill="true"] {
-        border-radius: 999px;
-      }
-
-      &[data-full-width="true"] {
-        width: 100%;
-      }
-
-      &[data-block="icon"] {
-        --ease-icon-size: 16px;
-        width: 28px;
-        height: 28px;
-        min-width: 28px;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-gray-700);
-
-        &:hover,
-        &:focus-visible {
-          color: var(--ease-button-hover-color, var(--color-blue-100));
-        }
-
-        &[data-variant="headless"] {
-          --ease-icon-size: 16px;
-          width: auto;
-          height: auto;
-          padding: 0;
-          min-width: 0;
-          margin: -1px;
-        }
-      }
-      
-      &[data-block="small"] {
-        padding: 5px 8px;
-        font-size: 12px;
-        line-height: 14px;
-        border-radius: 5px;
-      }
-      
-      &[data-block="large"] {
-        padding: 9px 12px;
-        font-size: 13px;
-        line-height: 14px;
-        border-radius: 8px;
-      }
-
-      &:hover,
-      &:focus-visible {
-        background-color: var(--ease-button-hover-background-color, var(--color-gray-825));
-        color: var(--ease-button-hover-color, var(--color-blue-100));
-      }
-
-      &[data-variant="headless"],
-      &[data-variant="headless-muted"] {
-        background-color: transparent;
-        box-shadow: none;
-        min-width: 0;
-        width: auto;
-        padding: 0;
-        transition: scale 0.2s, color 0.2s;
-
-        &:hover,
-        &:focus-visible {
-          scale: 1.05;
-        }
-
-        &:active {
-          scale: 0.95;
-        }
-      }
-
-      &[data-variant="headless-muted"] {
-        color: var(--ease-button-color, var(--color-gray-600));
-
-        &:hover,
-        &:focus-visible {
-          color: var(--ease-button-hover-color, var(--color-blue-100));
-        }
-      }
-
-      &[data-variant="link"] {
-        background-color: transparent;
-        box-shadow: none;
-
-        &:hover,
-        &:focus-visible {
-          background-color: var(--ease-button-hover-background-color, var(--color-gray-875));
-        }
-      }
-
-      &[data-variant="primary"] {
-        color: var(--color-blue-100);
-        font-weight: 450;
-        border-radius: 36px;
-        
-        background: radial-gradient(217.29% 45.98% at 99.13% 4.17%, rgba(21, 24, 220, 0.40) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(104.75% 41.7% at 3.06% 100%, rgba(233, 208, 254, 0.30) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(30.53% 47.92% at 46.51% -14.58%, rgba(233, 208, 254, 0.60) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(22.57% 35.42% at 46.29% 112.5%, rgba(233, 208, 254, 0.20) 0%, rgba(21, 24, 220, 0.00) 100%), rgba(255, 255, 255, 0.12);
-        background-repeat: no-repeat;
-
-        box-shadow: 
-          0px 1px 0px 0px rgba(255, 255, 255, 0.2), 
-          inset 0px 0px 50px 0px rgba(255, 255, 255, 0.02), 
-          inset 0px 0px 0px 1px rgba(255, 255, 255, 0.02), 
-          inset 0px 0px 4px 0px rgba(69, 40, 255, 0.4);
-
-
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: var(--color-white-2);
-          box-shadow: inset 0px 0.5px 0.75px 0px var(--color-white-30);
-          mix-blend-mode: overlay;
-          pointer-events: none;
-          z-index: 1;
-          border-radius: inherit;
-        }
-
-        &:hover,
-        &:focus-visible {
-           filter: brightness(1.1);
-        }
-      }
-    }
-  `
-})
-class Button extends HTMLElement {
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor disabled = false;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor pill = false;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor fullWidth = false;
-    @(0, Prop_1.Prop)({ type: String, reflect: true, defaultValue: 'button' })
-    accessor type;
-    @(0, Prop_1.Prop)({
-        type: String,
-        reflect: true,
-        defaultValue: 'medium',
-        onAttributeChange() {
-            this.requestRender?.();
-        }
-    })
-    accessor block = 'medium';
-    @(0, Prop_1.Prop)({
-        type: String,
-        reflect: true,
-        defaultValue: 'default'
-    })
-    accessor variant;
-    render() {
-        return (0, lit_html_1.html) `
-      <button
-        type=${this.type}
-        ?disabled=${this.disabled}
-        data-variant=${this.variant}
-        data-full-width=${this.fullWidth}
-        data-pill=${this.pill}
-        data-block="${this.block}"
-      >
-        <slot></slot>
-      </button>
-    `;
-    }
-}
-exports.Button = Button;

package/build/elements/button/index.d.cts

@@ -1,11 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-export declare class Button extends HTMLElement {
-    requestRender: () => void;
-    accessor disabled: boolean;
-    accessor pill: boolean;
-    accessor fullWidth: boolean;
-    accessor type: 'submit' | 'reset' | 'button';
-    accessor block: 'icon' | 'small' | 'medium' | 'large';
-    accessor variant: 'default' | 'primary' | 'headless' | 'headless-muted' | 'link';
-    render(): TemplateResult;
-}

package/build/elements/button/index.d.ts

@@ -1,11 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-export declare class Button extends HTMLElement {
-    requestRender: () => void;
-    accessor disabled: boolean;
-    accessor pill: boolean;
-    accessor fullWidth: boolean;
-    accessor type: 'submit' | 'reset' | 'button';
-    accessor block: 'icon' | 'small' | 'medium' | 'large';
-    accessor variant: 'default' | 'primary' | 'headless' | 'headless-muted' | 'link';
-    render(): TemplateResult;
-}