@easemate/web-kit 0.1.5 → 0.3.0

package/build/elements/origin/index.js

@@ -1,165 +0,0 @@
-import "../dropdown/index.js";
-import { html } from 'lit-html';
-import { dispatchControlEvent, setBooleanAttribute } from "../shared.js";
-import { Component } from '../../decorators/Component';
-import { Listen } from '../../decorators/Listen';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-@Component({
-    tag: 'ease-origin',
-    styles: `
-    :host {
-      display: contents;
-    }
-
-    [part="container"] {
-      flex: 1;
-      width: 100%;
-      display: grid;
-      grid-template-columns: 30px auto;
-      grid-gap: 8px;
-    }
-
-    [part="preview"] {
-      width: 30px;
-      height: 30px;
-      border-radius: var(--radii-md);
-      background-color: var(--color-gray-875);
-      cursor: pointer;
-      box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
-      border-radius: var(--radii-md);
-      position: relative;
-
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        width: 3px;
-        height: 3px;
-        background-color: var(--color-blue-100);
-        border-radius: 50%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin-top: -1.5px;
-        margin-left: -1.5px;
-      }
-
-      &::before {
-        background-color: var(--color-gray-700);
-        box-shadow: -6.5px -6.5px 0 0 var(--color-gray-700), 0 -6.5px 0 0 var(--color-gray-700), 6.5px -6.5px 0 0 var(--color-gray-700), -6.5px 0 0 0 var(--color-gray-700), 6.5px 0 0 0 var(--color-gray-700), -6.5px 6.5px 0 0 var(--color-gray-700), 0 6.5px 0 0 var(--color-gray-700), 6.5px 6.5px 0 0 var(--color-gray-700);
-      }
-
-      &::after {
-        translate: var(--ease-origin-translate-x, 0) var(--ease-origin-translate-y, 0);
-        scale: 1.25;
-        transition: translate 0.3s cubic-bezier(0.25, 0, 0.5, 1);
-      }
-
-      &:hover {
-        background-color: var(--color-gray-850);
-      }
-
-      &:focus-within {
-        background-color: var(--color-gray-825);
-      }
-
-      &[data-value="top-left"] {
-        --ease-origin-translate-x: -6.5px;
-        --ease-origin-translate-y: -6.5px;
-      }
-
-      &[data-value="top-center"] {
-        --ease-origin-translate-x: 0;
-        --ease-origin-translate-y: -6.5px;  
-      }
-      
-      &[data-value="top-right"] {
-        --ease-origin-translate-x: 6.5px;
-        --ease-origin-translate-y: -6.5px;
-      }
-
-      &[data-value="center-left"] {
-        --ease-origin-translate-x: -6.5px;
-        --ease-origin-translate-y: 0
-      }
-
-      &[data-value="center-center"] {
-        --ease-origin-translate-x: 0;
-        --ease-origin-translate-y: 0;
-      }
-
-      &[data-value="center-right"] {
-        --ease-origin-translate-x: 6.5px;
-        --ease-origin-translate-y: 0;
-      }
-      
-      &[data-value="bottom-left"] {
-        --ease-origin-translate-x: -6.5px;
-        --ease-origin-translate-y: 6.5px;
-      }
-      
-      &[data-value="bottom-center"] {
-        --ease-origin-translate-x: 0;
-        --ease-origin-translate-y: 6.5px;
-      }
-      
-      &[data-value="bottom-right"] {
-        --ease-origin-translate-x: 6.5px;
-        --ease-origin-translate-y: 6.5px;
-      }
-    }
-
-    ease-dropdown[part="dropdown"] {
-      --ease-dropdown-max-height: 180px;
-
-      width: 100%;
-    }
-  `,
-    template() {
-        return html `
-      <div part="container">
-        <div part="preview" data-value=${this.value ?? 'center-center'}></div>
-        
-        <ease-dropdown part="dropdown" placeholder="Select" id="origin-dropdown" .value=${this.value ?? 'center-center'} fullWidth name=${this.name} @value-change=${this.handleValueChange}>
-          <button slot="content" value="top-left">Top Left</button>
-          <button slot="content" value="top-center">Top Center</button>
-          <button slot="content" value="top-right">Top Right</button>
-          <hr slot="content" />
-          <button slot="content" value="center-left">Center Left</button>
-          <button slot="content" value="center-center">Center Center</button>
-          <button slot="content" value="center-right">Center Right</button>
-          <hr slot="content" />
-          <button slot="content" value="bottom-left">Bottom Left</button>
-          <button slot="content" value="bottom-center">Bottom Center</button>
-          <button slot="content" value="bottom-right">Bottom Right</button>
-        </ease-dropdown>
-      </div>
-    `;
-    }
-})
-export class Origin extends HTMLElement {
-    @Prop({ reflect: true, defaultValue: 'center-center' })
-    accessor value = 'center-center';
-    @Prop({ type: Boolean, reflect: true })
-    accessor disabled;
-    @Query('ease-dropdown')
-    accessor control;
-    @Prop({ reflect: true, defaultValue: '' })
-    accessor name = '';
-    afterRender() {
-        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
-    }
-    @Listen('change', { selector: 'ease-dropdown' })
-    handleChange(event, target) {
-        if (!target) {
-            return;
-        }
-        this.value = String(target.value ?? 'center-center');
-        dispatchControlEvent(this, 'change', { value: this.value, event });
-    }
-    handleValueChange = (event) => {
-        this.value = String(this.control?.value ?? 'center-center');
-        dispatchControlEvent(this, 'change', { value: this.value, event });
-    };
-}

package/build/elements/popover/index.cjs

@@ -1,209 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popover = void 0;
-const lit_html_1 = require("lit-html");
-const Component_1 = require("../../decorators/Component");
-const Prop_1 = require("../../decorators/Prop");
-const nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
-@(0, Component_1.Component)({
-    tag: 'ease-popover',
-    autoSlot: false,
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: contents;
-      --ease-popover-offset: 8px;
-      --ease-popover-anchor-name: --ease-popover-anchor;
-      --ease-popover-transform-origin: center center;
-      --ease-popover-duration: 200ms;
-      --ease-popover-content-min-width: auto;
-      --ease-popover-content-max-width: none;
-      --ease-popover-content-width: max-content;
-    }
-
-    ::slotted([slot="trigger"]) {
-      anchor-name: var(--ease-popover-anchor-name);
-    }
-
-    [part="content"] {
-      position-anchor: var(--ease-popover-anchor-name);
-      position: fixed;
-      margin: 0;
-      transform-origin: var(--ease-popover-transform-origin);
-      width: var(--ease-popover-content-width);
-      min-width: var(--ease-popover-content-min-width);
-      max-width: var(--ease-popover-content-max-width);
-      box-sizing: border-box;
-      overscroll-behavior: contain;
-      z-index: 100;
-      display: none;
-    }
-
-    :host([open]) [part="content"] {
-      display: block;
-    }
-
-    :host([placement="top-start"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="top-center"]) [part="content"] {
-      position-area: top center;
-      top: anchor(top);
-      left: anchor(center);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="top-end"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="bottom-start"]) [part="content"] {
-      position-area: bottom right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="bottom-center"]) [part="content"] {
-      position-area: bottom center;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="bottom-end"]) [part="content"] {
-      position-area: bottom left;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="left-start"]) [part="content"] {
-      position-area: left bottom;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="left-center"]) [part="content"] {
-      position-area: left center;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="left-end"]) [part="content"] {
-      position-area: left top;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="right-start"]) [part="content"] {
-      position-area: right end;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-
-    :host([placement="right-center"]) [part="content"] {
-      position-area: right center;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-
-    :host([placement="right-end"]) [part="content"] {
-      position-area: right start;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-  `
-})
-class Popover extends HTMLElement {
-    #anchorName = nextAnchorName();
-    #contentElement = null;
-    #initialized = false;
-    get contentElement() {
-        return this.#contentElement;
-    }
-    @(0, Prop_1.Prop)({
-        reflect: true,
-        defaultValue: 'bottom-start',
-        onChange() {
-            this.handlePlacementChange();
-        }
-    })
-    accessor placement;
-    @(0, Prop_1.Prop)({
-        type: Number,
-        reflect: true,
-        defaultValue: 8,
-        onChange() {
-            this.handleOffsetChange();
-        }
-    })
-    accessor offset = 8;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor open = false;
-    connectedCallback() {
-        this.#syncAnchorName();
-        this.#syncOffset();
-    }
-    disconnectedCallback() {
-        this.#contentElement = null;
-        this.#initialized = false;
-    }
-    render() {
-        return (0, lit_html_1.html) `
-      <slot slot="trigger" name="trigger"></slot>
-      <div
-        part="content"
-        data-popover-content
-        role="region"
-        data-placement=${this.placement}
-      >
-        <slot></slot>
-      </div>
-    `;
-    }
-    handlePlacementChange() {
-        if (!this.#initialized) {
-            this.requestRender();
-            return;
-        }
-        this.#syncPlacement();
-    }
-    handleOffsetChange() {
-        if (!this.#initialized) {
-            this.requestRender();
-            return;
-        }
-        this.#syncOffset();
-    }
-    #syncPlacement() {
-        this.dataset.placement = this.placement;
-        if (this.#contentElement) {
-            this.#contentElement.dataset.placement = this.placement;
-        }
-    }
-    #syncOffset() {
-        const offset = Number.isFinite(this.offset) ? this.offset : 0;
-        this.style.setProperty('--ease-popover-offset', `${offset}px`);
-    }
-    #syncAnchorName() {
-        this.style.setProperty('--ease-popover-anchor-name', this.#anchorName);
-    }
-}
-exports.Popover = Popover;
-exports.default = {
-    Popover
-};

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

@@ -1,19 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
-export declare class Popover extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    get contentElement(): HTMLElement | null;
-    accessor placement: Placement;
-    accessor offset: number;
-    accessor open: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): TemplateResult;
-    handlePlacementChange(): void;
-    handleOffsetChange(): void;
-}
-declare const _default: {
-    Popover: typeof Popover;
-};
-export default _default;

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

@@ -1,19 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
-export declare class Popover extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    get contentElement(): HTMLElement | null;
-    accessor placement: Placement;
-    accessor offset: number;
-    accessor open: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): TemplateResult;
-    handlePlacementChange(): void;
-    handleOffsetChange(): void;
-}
-declare const _default: {
-    Popover: typeof Popover;
-};
-export default _default;

package/build/elements/popover/index.js

@@ -1,205 +0,0 @@
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-const nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
-@Component({
-    tag: 'ease-popover',
-    autoSlot: false,
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: contents;
-      --ease-popover-offset: 8px;
-      --ease-popover-anchor-name: --ease-popover-anchor;
-      --ease-popover-transform-origin: center center;
-      --ease-popover-duration: 200ms;
-      --ease-popover-content-min-width: auto;
-      --ease-popover-content-max-width: none;
-      --ease-popover-content-width: max-content;
-    }
-
-    ::slotted([slot="trigger"]) {
-      anchor-name: var(--ease-popover-anchor-name);
-    }
-
-    [part="content"] {
-      position-anchor: var(--ease-popover-anchor-name);
-      position: fixed;
-      margin: 0;
-      transform-origin: var(--ease-popover-transform-origin);
-      width: var(--ease-popover-content-width);
-      min-width: var(--ease-popover-content-min-width);
-      max-width: var(--ease-popover-content-max-width);
-      box-sizing: border-box;
-      overscroll-behavior: contain;
-      z-index: 100;
-      display: none;
-    }
-
-    :host([open]) [part="content"] {
-      display: block;
-    }
-
-    :host([placement="top-start"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="top-center"]) [part="content"] {
-      position-area: top center;
-      top: anchor(top);
-      left: anchor(center);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="top-end"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="bottom-start"]) [part="content"] {
-      position-area: bottom right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="bottom-center"]) [part="content"] {
-      position-area: bottom center;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="bottom-end"]) [part="content"] {
-      position-area: bottom left;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="left-start"]) [part="content"] {
-      position-area: left bottom;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="left-center"]) [part="content"] {
-      position-area: left center;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="left-end"]) [part="content"] {
-      position-area: left top;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="right-start"]) [part="content"] {
-      position-area: right end;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-
-    :host([placement="right-center"]) [part="content"] {
-      position-area: right center;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-
-    :host([placement="right-end"]) [part="content"] {
-      position-area: right start;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-  `
-})
-export class Popover extends HTMLElement {
-    #anchorName = nextAnchorName();
-    #contentElement = null;
-    #initialized = false;
-    get contentElement() {
-        return this.#contentElement;
-    }
-    @Prop({
-        reflect: true,
-        defaultValue: 'bottom-start',
-        onChange() {
-            this.handlePlacementChange();
-        }
-    })
-    accessor placement;
-    @Prop({
-        type: Number,
-        reflect: true,
-        defaultValue: 8,
-        onChange() {
-            this.handleOffsetChange();
-        }
-    })
-    accessor offset = 8;
-    @Prop({ type: Boolean, reflect: true })
-    accessor open = false;
-    connectedCallback() {
-        this.#syncAnchorName();
-        this.#syncOffset();
-    }
-    disconnectedCallback() {
-        this.#contentElement = null;
-        this.#initialized = false;
-    }
-    render() {
-        return html `
-      <slot slot="trigger" name="trigger"></slot>
-      <div
-        part="content"
-        data-popover-content
-        role="region"
-        data-placement=${this.placement}
-      >
-        <slot></slot>
-      </div>
-    `;
-    }
-    handlePlacementChange() {
-        if (!this.#initialized) {
-            this.requestRender();
-            return;
-        }
-        this.#syncPlacement();
-    }
-    handleOffsetChange() {
-        if (!this.#initialized) {
-            this.requestRender();
-            return;
-        }
-        this.#syncOffset();
-    }
-    #syncPlacement() {
-        this.dataset.placement = this.placement;
-        if (this.#contentElement) {
-            this.#contentElement.dataset.placement = this.placement;
-        }
-    }
-    #syncOffset() {
-        const offset = Number.isFinite(this.offset) ? this.offset : 0;
-        this.style.setProperty('--ease-popover-offset', `${offset}px`);
-    }
-    #syncAnchorName() {
-        this.style.setProperty('--ease-popover-anchor-name', this.#anchorName);
-    }
-}
-export default {
-    Popover
-};