godown 2.7.4 → 2.7.6

package/web-components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, ifDefined, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport GodownAnchor from \"../../supers/anchor.js\";\nimport { createScope } from \"../../supers/root.js\";\n\nconst defineName = \"avatar\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Avatar} renders the avatar or name and has a href.\n */\n@define(defineName)\nexport class Avatar extends GodownAnchor {\n  /**\n   * Image src.\n   */\n  @property() src: string | undefined | null = \"\";\n  /**\n   * Default image src.\n   */\n  @property() def: string = undefined;\n  /**\n   * Link href.\n   */\n  @property() href = undefined;\n  /**\n   * If the image is not available, the {@linkcode Avatar.avaName} will be displayed.\n   */\n  @property() name = \"\";\n  /**\n   * If there is a value, the {@linkcode Avatar.avaMore} will be displayed.\n   */\n  @property({ type: Number }) more = 0;\n\n  static styles = [\n    css`\n      :host {\n        ${cssvarScope}--ava: 1.5em;\n        display: inline-flex;\n        align-items: center;\n      }\n\n      * {\n        border-radius: inherit;\n      }\n\n      img {\n        width: 100%;\n        height: 100%;\n      }\n\n      a {\n        height: var(${cssvarScope}--ava);\n        width: var(${cssvarScope}--ava);\n        color: inherit;\n        display: flex;\n        position: relative;\n        align-items: inherit;\n      }\n\n      span {\n        position: absolute;\n        width: 100%;\n        text-align: center;\n      }\n\n      slot[name=\"mask\"] {\n        position: absolute;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`\n      <a href=\"${ifDefined(this.href)}\"> ${this.renderAva()} ${htmlSlot(\"mask\")} </a>\n      ${htmlSlot()}\n    `;\n  }\n\n  private renderAva(): HTMLTemplate {\n    if (this.more) {\n      return html`<span>${this.avaMore()}</span>`;\n    }\n    if (this.src) {\n      return html`<img src=\"${this.src}\" @error=${this.imgOnError} alt=\"\" />`;\n    }\n    if (this.name) {\n      return html`<span>${this.avaName()}</span>`;\n    }\n    return htmlSlot(\"avatar\");\n  }\n\n  avaMore(): string | number {\n    if (this.more < 0) {\n      return \"+\";\n    }\n    return (this.more > 99 ? \"99\" : this.more) + \"+\";\n  }\n\n  avaName(): string {\n    const name = this.name.slice(0, 2);\n    return name[0].toUpperCase() + name.slice(1);\n  }\n\n  imgOnError(e: ErrorEvent) {\n    if (this.def) {\n      (e.target as HTMLImageElement).src = this.def;\n    } else {\n      this.src = undefined;\n    }\n  }\n}\n\nexport default Avatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"avatar-a\": Avatar;\n    \"g-avatar\": Avatar;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AA+CI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,YAAY;IAAjC;;QAKL;;WAEG;QACS,YAAO,GAAW,SAAS,CAAC;QACxC;;WAEG;QACS,SAAI,GAAG,SAAS,CAAC;QAC7B;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;IA2BxB,CAAC;IAzBW,MAAM;QACd,OAAO,IAAI,CAAA,wBAAwB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;IAC3G,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,GAAG,YAAY,IAAI,CAAC,UAAU,SAAS,IAAI,CAAC,IAAI,MAAM,CAAC;QACnG,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;QACzD,CAAC;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,UAAU,CAAC,CAAa;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAChB,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;QACvB,CAAC;IACH,CAAC;CACF,CAAA;AAvCa;IAAX,QAAQ,EAAE;mCAAgC;AAI/B;IAAX,QAAQ,EAAE;uCAA6B;AAI5B;IAAX,QAAQ,EAAE;oCAAkB;AAIjB;IAAX,QAAQ,EAAE;oCAAW;AAhBX,MAAM;IA9ClB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ;;;;;;;;;;;;;;;;qBAgBG,QAAQ;sBACP,QAAQ;;;;;;;;;;;;;;;;;;;;;;;GAuB3B;KACF,CAAC;GACW,MAAM,CA2ClB;;AAED,eAAe,MAAM,CAAC;AAEtB,mBAAmB;AACnB,sCAAsC;AACtC,gCAAgC;AAChC,MAAM;AACN,IAAI","sourcesContent":["import { css, html, ifDefined, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport GodownAnchor from \"../../proto/super-a.js\";\nimport { createScope } from \"../../styles/global.js\";\n\nconst protoName = \"avatar\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Avatar} renders the avatar or name and has a href.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--avatar-size: 2.4em;\n      display: inline-block;\n    }\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    a {\n      display: block;\n      color: inherit;\n      overflow: hidden;\n      position: relative;\n      border-radius: inherit;\n      width: var(--${cssScope}--avatar-size);\n      height: var(--${cssScope}--avatar-size);\n    }\n\n    span {\n      position: absolute;\n      width: 100%;\n    }\n\n    a,\n    [part=\"name\"] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    [part=\"mask\"] {\n      position: absolute;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n    }\n  `,\n])\nexport class Avatar extends GodownAnchor {\n  /**\n   * Image src.\n   */\n  @property() src: string | undefined | null;\n  /**\n   * Default image src.\n   */\n  @property() default: string = undefined;\n  /**\n   * Link href.\n   */\n  @property() href = undefined;\n  /**\n   * If the image is not available, the {@linkcode Avatar.format} will be displayed.\n   */\n  @property() name = \"\";\n\n  protected render() {\n    return html`<a part=\"root\" href=\"${ifDefined(this.href)}\"> ${this.renderAva()} ${htmlSlot(\"mask\")}</a> `;\n  }\n\n  private renderAva() {\n    if (this.src) {\n      return html`<img part=\"image\" src=\"${this.src}\" @error=${this.imgOnError} alt=\"${this.name}\" />`;\n    }\n    if (this.name) {\n      return html`<span part=\"name\">${this.format()}</span>`;\n    }\n    return htmlSlot();\n  }\n\n  format(): string {\n    return this.name;\n  }\n\n  imgOnError(e: ErrorEvent) {\n    if (this.default) {\n      (e.target as HTMLImageElement).src = this.default;\n    } else {\n      this.src = undefined;\n    }\n  }\n}\n\nexport default Avatar;\n\n// declare global {\n//   interface HTMLElementTagNameMap {\n//     [\"godown-avatar\"]: Avatar\n//   }\n// }\n"]}

package/web-components/button/button.d.ts

@@ -1,15 +1,5 @@
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
-declare const colors: {
-    black: string[];
-    gary: string[];
-    white: string[];
-    red: string[];
-    green: string[];
-    blue: string[];
-    yellow: string[];
-};
-type Colors = keyof typeof colors;
+import { GodownElement } from "../../proto/godown-element.js";
+declare const colors: Record<"teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "black" | "gray" | "white", string>;
 /**
  * {@linkcode Button}.
  *
@@ -31,47 +21,24 @@ export declare class Button extends GodownElement {
     /**
      * Enables rounded corners to appear capsule shaped.
      */
-    radius: boolean;
+    round: boolean;
     /**
      * The primary color.
      */
-    color: "none" | Colors;
+    color: "none" | keyof typeof colors;
     /**
      * Text inside.
      */
     text: string;
-    _b: HTMLElement;
-    _div: HTMLButtonElement;
-    static styles: import("lit").CSSResult[];
-    protected render(): HTMLTemplate;
+    _modalRoot: HTMLElement;
+    _root: HTMLElement;
+    protected render(): import("lit").TemplateResult<1>;
     focus(): void;
     blur(): void;
-    protected firstUpdated(): void;
-    protected _handleModal(e: MouseEvent): void;
+    firstUpdated(): void;
     protected _handelClick(e: MouseEvent): void;
-    /**
-     * Get the color to render, default is this.color.
-     *
-     * @returns New color.
-     *
-     * Colors can be set for different states.
-     *
-     * The matching selector is `[color=COLOR]`.
-     *
-     * @example
-     * ```ts
-     * button.adoptStyles("[color=COLOR1]{...}")
-     * button.adoptStyles("[color=COLOR2]{...}")
-     * button.nextColor = () => state ? COLOR1 : COLOR2
-     * ```
-     */
-    nextColor(): Colors | string;
+    protected _handleModal(e: MouseEvent): void;
+    nextColor(): "teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "none" | "black" | "gray" | "white";
 }
 export default Button;
-declare global {
-    interface HTMLElementTagNameMap {
-        "base-button": Button;
-        "g-button": Button;
-    }
-}
 //# sourceMappingURL=button.d.ts.map

package/web-components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/button/button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAe,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAalE,QAAA,MAAM,MAAM;;;;;;;;CA2CX,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AAElC;;;;GAIG;AACH,qBACa,MAAO,SAAQ,aAAa;IACvC;;OAEG;IACyC,QAAQ,UAAS;IAC7D;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACyC,MAAM,UAAS;IAC3D;;OAEG;IACyC,MAAM,UAAS;IAC3D;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,MAAM,CAAW;IAC7C;;OAEG;IACS,IAAI,SAAM;IAEV,EAAE,EAAE,WAAW,CAAC;IACd,IAAI,EAAE,iBAAiB,CAAC;IAEtC,MAAM,CAAC,MAAM,4BAoHX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAShC,KAAK;IAOL,IAAI;IAIJ,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAgBpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAYpC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,IAAI,MAAM,GAAG,MAAM;CAG7B;AAED,eAAe,MAAM,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,MAAM,CAAC;QACtB,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/button/button.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAS9D,QAAA,MAAM,MAAM,0HA4DX,CAAC;AAEF;;;;GAIG;AACH,qBAgGa,MAAO,SAAQ,aAAa;IACvC;;OAEG;IACyC,QAAQ,EAAE,OAAO,CAAC;IAC9D;;OAEG;IACyC,KAAK,EAAE,OAAO,CAAC;IAC3D;;OAEG;IACyC,MAAM,EAAE,OAAO,CAAC;IAC5D;;OAEG;IACyC,KAAK,EAAE,OAAO,CAAC;IAC3D;;OAEG;IAC0B,KAAK,EAAE,MAAM,GAAG,MAAM,OAAO,MAAM,CAAW;IAC3E;;OAEG;IACS,IAAI,EAAE,MAAM,CAAC;IAEL,UAAU,EAAE,WAAW,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC;IAEjC,SAAS,CAAC,MAAM;IAWhB,KAAK;IAOL,IAAI;IAIJ,YAAY;IAIZ,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IASpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAepC,SAAS;CAGV;AAED,eAAe,MAAM,CAAC"}

package/web-components/button/button.js

@@ -1,62 +1,73 @@
 import { __decorate } from "tslib";
-import { css, html, property, query, unsafeCSS } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { constructCSS } from "../../lib/utils.js";
-import { createScope, GodownElement } from "../../supers/root.js";
-const defineName = "button";
-const cssvarScope = createScope(defineName);
-const shadow1 = "-2px 2px 5px -2px";
-const shadow2 = "2px -2px 5px -2px";
-const linearGradient = "linear-gradient";
-const fff = "#fff";
-const _000 = "#000";
-const deg = `var(${cssvarScope}--deg)`;
-const vars = ["color", "background", "box-shadow", "ghost-color"];
-const colors = {
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { part } from "../../decorators/part.js";
+import { styles } from "../../decorators/styles.js";
+import { constructCSSObject } from "../../lib/css.js";
+import { htmlSlot, htmlStyle } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { colorValues, createScope } from "../../styles/global.js";
+const protoName = "button";
+const cssScope = createScope(protoName);
+const whiteFont = colorValues.lightgray[0];
+const blackFont = colorValues.darkgray[6];
+const colors = constructCSSObject(["color", "background", "gradients"].map((k) => `--${cssScope}--${k}`), {
     black: [
-        fff, //
-        `${linearGradient}(${deg}, rgb(30 30 30), rgb(65 65 65))`,
-        `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,
-        "rgb(22 20 20)",
+        whiteFont, // color
+        colorValues.darkgray[7], // background
+        colorValues.darkgray[4], // gradients
     ],
-    gary: [
-        fff, //
-        `${linearGradient}(${deg}, rgb(65 65 65),  rgb(100 100 100))`,
-        `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,
-        "rgb(56 56 56)",
+    gray: [
+        whiteFont, // color
+        colorValues.darkgray[1], // background
+        colorValues.lightgray[8], // gradients
     ],
     white: [
-        _000, //
-        `${linearGradient}(${deg}, rgb(225 225 225), rgb(240 240 240))`,
-        `${shadow1} rgb(255 255 255 / 20%), ${shadow2} rgb(165 165 165 / 20%)`,
-        "rgb(212 212 212)",
+        blackFont, // color
+        colorValues.lightgray[3], // background
+        colorValues.lightgray[0], // gradients
     ],
-    red: [
-        fff, //
-        `${linearGradient}(${deg}, rgb(215 57 68), rgb(250 141 106))`,
-        `${shadow1} rgb(181 35 44 / 20%), ${shadow2} rgb(234 130 174 / 20%)`,
-        "rgb(214 11 23)",
+    blue: [
+        whiteFont, // color
+        colorValues.blue[6], // background
+        colorValues.blue[4], // gradients
     ],
     green: [
-        _000, //
-        `${linearGradient}(${deg}, rgb(21 206 71), rgb(99 253 122))`,
-        `${shadow1} rgb(63 179 69 / 20%), ${shadow2} rgb(136 225 142 / 20%)`,
-        "rgb(60 214 68)",
+        whiteFont, // color
+        colorValues.green[6], // background
+        colorValues.green[4], // gradients
     ],
-    blue: [
-        fff, //
-        `${linearGradient}(${deg}, rgb(14 143 255), rgb(121 211 255))`,
-        `${shadow1} rgb(92 182 255 / 20%), ${shadow2} rgb(135 232 222 / 20%)`,
-        "rgb(42 141 221)",
+    red: [
+        whiteFont, // color
+        colorValues.red[6], // background
+        colorValues.red[4], // gradients
+    ],
+    orange: [
+        whiteFont, // color
+        colorValues.orange[6], // background
+        colorValues.orange[4], // gradients
+    ],
+    pink: [
+        whiteFont, // color
+        colorValues.pink[6], // background
+        colorValues.pink[4], // gradients
+    ],
+    purple: [
+        whiteFont, // color
+        colorValues.purple[6], // background
+        colorValues.purple[4], // gradients
     ],
     yellow: [
-        _000, //
-        `${linearGradient}(${deg}, rgb(255 190 54), rgb(255 249 68))`,
-        `${shadow1} rgb(214 203 55 / 20%), ${shadow2} rgb(202 203 137 / 20%)`,
-        "rgb(255 235 59)",
+        blackFont, // color
+        colorValues.yellow[6], // background
+        colorValues.yellow[4], // gradients
     ],
-};
+    teal: [
+        whiteFont, // color
+        colorValues.teal[6], // background
+        colorValues.teal[4], //gradients
+    ],
+}, () => `:host`);
 /**
  * {@linkcode Button}.
  *
@@ -65,37 +76,19 @@ const colors = {
 let Button = class Button extends GodownElement {
     constructor() {
         super(...arguments);
-        /**
-         * Whether to disable this element.
-         */
-        this.disabled = false;
-        /**
-         * Invert font and background color.
-         */
-        this.ghost = false;
-        /**
-         * Whether this element is active or not.
-         */
-        this.active = false;
-        /**
-         * Enables rounded corners to appear capsule shaped.
-         */
-        this.radius = false;
         /**
          * The primary color.
          */
         this.color = "black";
-        /**
-         * Text inside.
-         */
-        this.text = "";
     }
     render() {
+        const color = this.nextColor();
         return html `
-      <div color="${this.nextColor()}">
-        <b></b>
-        <p>${this.text || htmlSlot()}</p>
+      <div part="root">
+        <span part="modal-root"></span>
+        <div part="slot">${this.text || htmlSlot()}</div>
       </div>
+      ${htmlStyle(colors[color])}
     `;
     }
     focus() {
@@ -108,165 +101,34 @@ let Button = class Button extends GodownElement {
         this.active = false;
     }
     firstUpdated() {
-        this.addEvent(document, "click", this._handelClick.bind(this));
-    }
-    _handleModal(e) {
-        const a = this._div.offsetHeight + 1;
-        const b = this._div.offsetWidth + 1;
-        const size = `${Math.sqrt(a * a + b * b) * 2}px`;
-        const translate = `translate(calc(-50% + ${e.offsetX}px), calc(-50% + ${e.offsetY}px))`;
-        this._b.style.width = size;
-        this._b.style.height = size;
-        this._b.style.transform = translate;
-        const i = document.createElement("i");
-        i.style.animationName = "i";
-        this._b.appendChild(i);
-        setTimeout(() => {
-            i.remove();
-        }, 2000);
+        this.addEvent(this, "click", this._handelClick, true);
     }
     _handelClick(e) {
         if (this.disabled) {
+            e.stopPropagation();
+            e.preventDefault();
             return;
         }
-        if (e.target === this) {
-            this._handleModal(e);
-            this.focus();
-        }
-        else {
-            this.blur();
-        }
+        this._handleModal(e);
+    }
+    _handleModal(e) {
+        const modal = document.createElement("i");
+        const rect = this.getBoundingClientRect();
+        const h = rect.height;
+        const w = rect.width;
+        const size = `${Math.sqrt(h * h + w * w) * 2}px`;
+        modal.style.height = size;
+        modal.style.width = size;
+        modal.style.left = `${e.clientX - rect.left}px`;
+        modal.style.top = `${e.clientY - rect.y}px`;
+        modal.style.animationName = "kf";
+        this._modalRoot.appendChild(modal);
+        modal.addEventListener("animationend", () => modal.remove(), { once: true });
     }
-    /**
-     * Get the color to render, default is this.color.
-     *
-     * @returns New color.
-     *
-     * Colors can be set for different states.
-     *
-     * The matching selector is `[color=COLOR]`.
-     *
-     * @example
-     * ```ts
-     * button.adoptStyles("[color=COLOR1]{...}")
-     * button.adoptStyles("[color=COLOR2]{...}")
-     * button.nextColor = () => state ? COLOR1 : COLOR2
-     * ```
-     */
     nextColor() {
         return this.color;
     }
 };
-Button.styles = [
-    unsafeCSS(constructCSS(vars, colors, (raw) => `[color=${raw}]`, (k, v) => `${cssvarScope}--${k}:${v}`)),
-    css `
-      :host {
-        ${cssvarScope}--padding: .05em .25em;
-        ${cssvarScope}--deg: 45deg;
-        ${cssvarScope}--ghost-width: .09em;
-        ${cssvarScope}--modal-opacity: .15;
-        ${cssvarScope}--modal-opacity-end: 0;
-        ${cssvarScope}--modal-animation-duration: 1s;
-        ${cssvarScope}--focus-scale: .975;
-        transition: 0.1s;
-        display: flex;
-        width: fit-content;
-        border-radius: 0.25em;
-        cursor: pointer;
-        background: none !important;
-      }
-
-      :host([disabled]) {
-        cursor: not-allowed;
-      }
-
-      :host(:active) {
-        scale: var(${cssvarScope}--focus-scale);
-      }
-
-      div {
-        background: var(${cssvarScope}--background);
-        box-shadow: var(${cssvarScope}--box-shadow);
-        color: var(${cssvarScope}--color, inherit);
-        width: 100%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        border-radius: inherit;
-        transition-duration: inherit;
-        transition-property: scale;
-        pointer-events: none;
-        box-sizing: border-box;
-      }
-
-      b {
-        pointer-events: none;
-        transform: translate(-50%, -50%);
-        position: absolute;
-        visibility: hidden;
-      }
-
-      p {
-        padding: var(${cssvarScope}--padding);
-        margin: 0;
-        user-select: none;
-        transition: none;
-      }
-
-      :host([ghost]) p {
-        background-image: var(${cssvarScope}--background);
-        margin: calc(-1 * var(${cssvarScope}--ghost-width));
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-      }
-
-      :host([ghost]) div {
-        background: transparent;
-        border: var(${cssvarScope}--ghost-width) solid var(${cssvarScope}--ghost-color);
-      }
-
-      :host([radius]) {
-        border-radius: calc(infinity * 1px);
-        ${cssvarScope}--padding: .075em .5em;
-      }
-    `,
-    css `
-      i {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        border-radius: 50%;
-        transform: translate(0, 0);
-        background: currentColor;
-        opacity: var(${cssvarScope}--modal-opacity-end);
-        visibility: visible;
-        animation-duration: min(var(${cssvarScope}--modal-animation-duration), 2s);
-      }
-
-      :host([ghost]) i {
-        background: var(${cssvarScope}--ghost-color);
-      }
-
-      @keyframes i {
-        0% {
-          transform: scale(0);
-          opacity: var(${cssvarScope}--modal-opacity);
-        }
-        80% {
-          transform: scale(1);
-        }
-        100% {
-          opacity: var(${cssvarScope}--modal-opacity-end);
-        }
-      }
-    `,
-];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Button.prototype, "disabled", void 0);
@@ -278,21 +140,116 @@ __decorate([
 ], Button.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Button.prototype, "radius", void 0);
+], Button.prototype, "round", void 0);
 __decorate([
-    property()
+    property({ reflect: true })
 ], Button.prototype, "color", void 0);
 __decorate([
     property()
 ], Button.prototype, "text", void 0);
 __decorate([
-    query("b")
-], Button.prototype, "_b", void 0);
+    part("modal-root")
+], Button.prototype, "_modalRoot", void 0);
 __decorate([
-    query("div")
-], Button.prototype, "_div", void 0);
+    part("root")
+], Button.prototype, "_root", void 0);
 Button = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host(:not([disabled]):active) {
+      transform: scale(var(--${cssScope}--focus-scale));
+    }
+
+    :host([round]) {
+      --${cssScope}--padding-x: .75em;
+      border-radius: calc(infinity * 1px);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      filter: brightness(0.85);
+    }
+
+    :host([ghost]) {
+      --${cssScope}--modal-background: var(--${cssScope}--ghost-color);
+      border-color: var(--${cssScope}--ghost-color);
+      border-width: var(--${cssScope}--ghost-width);
+      color: var(--${cssScope}--ghost-color);
+      background: transparent;
+      border-style: solid;
+    }
+  `,
+        css `
+    :host {
+      --${cssScope}--padding-x: .5em;
+      --${cssScope}--padding: .1em var(--${cssScope}--padding-x);
+      --${cssScope}--modal-animation-duration: 1s;
+      --${cssScope}--ghost-width: .08em;
+      --${cssScope}--focus-scale: .97;
+      --${cssScope}--deg: 45deg;
+      --${cssScope}--ghost-color:var(--${cssScope}--background);
+      color: var(--${cssScope}--color, inherit);
+      background: linear-gradient(
+        var(--${cssScope}--deg),
+        var(--${cssScope}--background),
+        var(--${cssScope}--gradients, var(--${cssScope}--background))
+      );
+      border-radius: 0.3em;
+      width: -moz-fit-content;
+      width: fit-content;
+      transition: 0.1s;
+      display: block;
+      overflow: hidden;
+      text-align: center;
+      padding: 0 !important;
+      cursor: pointer;
+    }
+
+    [part="root"] {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: relative;
+      border-radius: inherit;
+      -webkit-user-select: none;
+              user-select: none;
+      transition: none;
+      transition-duration: inherit;
+    }
+
+    [part="slot"] {
+      padding: var(--${cssScope}--padding);
+    }
+
+    i {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      visibility: visible;
+      pointer-events: none;
+      transform-origin: 0 0;
+      background: var(--${cssScope}--modal-background, currentColor);
+      animation-duration: var(--${cssScope}--modal-animation-duration);
+    }
+
+    @keyframes kf {
+      0% {
+        transform: scale(0) translate(-50%, -50%);
+        opacity: var(--${cssScope}--modal-opacity, 0.18);
+      }
+      80% {
+        transform: scale(1) translate(-50%, -50%);
+      }
+      to {
+        opacity: 0;
+      }
+    }
+  `,
+    ])
 ], Button);
 export { Button };
 export default Button;

package/web-components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, query, unsafeCSS } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { constructCSS } from \"../../lib/utils.js\";\nimport { createScope, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"button\";\nconst cssvarScope = createScope(defineName);\n\nconst shadow1 = \"-2px 2px 5px -2px\";\nconst shadow2 = \"2px -2px 5px -2px\";\nconst linearGradient = \"linear-gradient\";\nconst fff = \"#fff\";\nconst _000 = \"#000\";\nconst deg = `var(${cssvarScope}--deg)`;\n\nconst vars = [\"color\", \"background\", \"box-shadow\", \"ghost-color\"];\nconst colors = {\n  black: [\n    fff, //\n    `${linearGradient}(${deg}, rgb(30 30 30), rgb(65 65 65))`,\n    `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,\n    \"rgb(22 20 20)\",\n  ],\n  gary: [\n    fff, //\n    `${linearGradient}(${deg}, rgb(65 65 65),  rgb(100 100 100))`,\n    `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,\n    \"rgb(56 56 56)\",\n  ],\n  white: [\n    _000, //\n    `${linearGradient}(${deg}, rgb(225 225 225), rgb(240 240 240))`,\n    `${shadow1} rgb(255 255 255 / 20%), ${shadow2} rgb(165 165 165 / 20%)`,\n    \"rgb(212 212 212)\",\n  ],\n  red: [\n    fff, //\n    `${linearGradient}(${deg}, rgb(215 57 68), rgb(250 141 106))`,\n    `${shadow1} rgb(181 35 44 / 20%), ${shadow2} rgb(234 130 174 / 20%)`,\n    \"rgb(214 11 23)\",\n  ],\n  green: [\n    _000, //\n    `${linearGradient}(${deg}, rgb(21 206 71), rgb(99 253 122))`,\n    `${shadow1} rgb(63 179 69 / 20%), ${shadow2} rgb(136 225 142 / 20%)`,\n    \"rgb(60 214 68)\",\n  ],\n  blue: [\n    fff, //\n    `${linearGradient}(${deg}, rgb(14 143 255), rgb(121 211 255))`,\n    `${shadow1} rgb(92 182 255 / 20%), ${shadow2} rgb(135 232 222 / 20%)`,\n    \"rgb(42 141 221)\",\n  ],\n  yellow: [\n    _000, //\n    `${linearGradient}(${deg}, rgb(255 190 54), rgb(255 249 68))`,\n    `${shadow1} rgb(214 203 55 / 20%), ${shadow2} rgb(202 203 137 / 20%)`,\n    \"rgb(255 235 59)\",\n  ],\n};\n\ntype Colors = keyof typeof colors;\n\n/**\n * {@linkcode Button}.\n *\n * Inspired by Next-ui.\n */\n@define(defineName)\nexport class Button extends GodownElement {\n  /**\n   * Whether to disable this element.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**\n   * Invert font and background color.\n   */\n  @property({ type: Boolean, reflect: true }) ghost = false;\n  /**\n   * Whether this element is active or not.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n  /**\n   * Enables rounded corners to appear capsule shaped.\n   */\n  @property({ type: Boolean, reflect: true }) radius = false;\n  /**\n   * The primary color.\n   */\n  @property() color: \"none\" | Colors = \"black\";\n  /**\n   * Text inside.\n   */\n  @property() text = \"\";\n\n  @query(\"b\") _b: HTMLElement;\n  @query(\"div\") _div: HTMLButtonElement;\n\n  static styles = [\n    unsafeCSS(\n      constructCSS(\n        vars,\n        colors,\n        (raw) => `[color=${raw}]`,\n        (k, v) => `${cssvarScope}--${k}:${v}`,\n      ),\n    ),\n    css`\n      :host {\n        ${cssvarScope}--padding: .05em .25em;\n        ${cssvarScope}--deg: 45deg;\n        ${cssvarScope}--ghost-width: .09em;\n        ${cssvarScope}--modal-opacity: .15;\n        ${cssvarScope}--modal-opacity-end: 0;\n        ${cssvarScope}--modal-animation-duration: 1s;\n        ${cssvarScope}--focus-scale: .975;\n        transition: 0.1s;\n        display: flex;\n        width: fit-content;\n        border-radius: 0.25em;\n        cursor: pointer;\n        background: none !important;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n\n      :host(:active) {\n        scale: var(${cssvarScope}--focus-scale);\n      }\n\n      div {\n        background: var(${cssvarScope}--background);\n        box-shadow: var(${cssvarScope}--box-shadow);\n        color: var(${cssvarScope}--color, inherit);\n        width: 100%;\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n        border-radius: inherit;\n        transition-duration: inherit;\n        transition-property: scale;\n        pointer-events: none;\n        box-sizing: border-box;\n      }\n\n      b {\n        pointer-events: none;\n        transform: translate(-50%, -50%);\n        position: absolute;\n        visibility: hidden;\n      }\n\n      p {\n        padding: var(${cssvarScope}--padding);\n        margin: 0;\n        user-select: none;\n        transition: none;\n      }\n\n      :host([ghost]) p {\n        background-image: var(${cssvarScope}--background);\n        margin: calc(-1 * var(${cssvarScope}--ghost-width));\n        background-clip: text;\n        -webkit-background-clip: text;\n        color: transparent;\n      }\n\n      :host([ghost]) div {\n        background: transparent;\n        border: var(${cssvarScope}--ghost-width) solid var(${cssvarScope}--ghost-color);\n      }\n\n      :host([radius]) {\n        border-radius: calc(infinity * 1px);\n        ${cssvarScope}--padding: .075em .5em;\n      }\n    `,\n    css`\n      i {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        border-radius: 50%;\n        transform: translate(0, 0);\n        background: currentColor;\n        opacity: var(${cssvarScope}--modal-opacity-end);\n        visibility: visible;\n        animation-duration: min(var(${cssvarScope}--modal-animation-duration), 2s);\n      }\n\n      :host([ghost]) i {\n        background: var(${cssvarScope}--ghost-color);\n      }\n\n      @keyframes i {\n        0% {\n          transform: scale(0);\n          opacity: var(${cssvarScope}--modal-opacity);\n        }\n        80% {\n          transform: scale(1);\n        }\n        100% {\n          opacity: var(${cssvarScope}--modal-opacity-end);\n        }\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`\n      <div color=\"${this.nextColor()}\">\n        <b></b>\n        <p>${this.text || htmlSlot()}</p>\n      </div>\n    `;\n  }\n\n  focus() {\n    if (this.disabled) {\n      return;\n    }\n    this.active = true;\n  }\n\n  blur() {\n    this.active = false;\n  }\n\n  protected firstUpdated() {\n    this.addEvent(document, \"click\", this._handelClick.bind(this));\n  }\n\n  protected _handleModal(e: MouseEvent) {\n    const a = this._div.offsetHeight + 1;\n    const b = this._div.offsetWidth + 1;\n    const size = `${Math.sqrt(a * a + b * b) * 2}px`;\n    const translate = `translate(calc(-50% + ${e.offsetX}px), calc(-50% + ${e.offsetY}px))`;\n    this._b.style.width = size;\n    this._b.style.height = size;\n    this._b.style.transform = translate;\n    const i = document.createElement(\"i\");\n    i.style.animationName = \"i\";\n    this._b.appendChild(i);\n    setTimeout(() => {\n      i.remove();\n    }, 2000);\n  }\n\n  protected _handelClick(e: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n    if (e.target === this) {\n      this._handleModal(e);\n      this.focus();\n    } else {\n      this.blur();\n    }\n  }\n\n  /**\n   * Get the color to render, default is this.color.\n   *\n   * @returns New color.\n   *\n   * Colors can be set for different states.\n   *\n   * The matching selector is `[color=COLOR]`.\n   *\n   * @example\n   * ```ts\n   * button.adoptStyles(\"[color=COLOR1]{...}\")\n   * button.adoptStyles(\"[color=COLOR2]{...}\")\n   * button.nextColor = () => state ? COLOR1 : COLOR2\n   * ```\n   */\n  nextColor(): Colors | string {\n    return this.color;\n  }\n}\n\nexport default Button;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"base-button\": Button;\n    \"g-button\": Button;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { part } from \"../../decorators/part.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { constructCSSObject } from \"../../lib/css.js\";\nimport { htmlSlot, htmlStyle } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { colorValues, createScope } from \"../../styles/global.js\";\n\nconst protoName = \"button\";\nconst cssScope = createScope(protoName);\n\nconst whiteFont = colorValues.lightgray[0];\nconst blackFont = colorValues.darkgray[6];\n\nconst colors = constructCSSObject(\n  [\"color\", \"background\", \"gradients\"].map((k) => `--${cssScope}--${k}`),\n  {\n    black: [\n      whiteFont, // color\n      colorValues.darkgray[7], // background\n      colorValues.darkgray[4], // gradients\n    ],\n    gray: [\n      whiteFont, // color\n      colorValues.darkgray[1], // background\n      colorValues.lightgray[8], // gradients\n    ],\n    white: [\n      blackFont, // color\n      colorValues.lightgray[3], // background\n      colorValues.lightgray[0], // gradients\n    ],\n    blue: [\n      whiteFont, // color\n      colorValues.blue[6], // background\n      colorValues.blue[4], // gradients\n    ],\n    green: [\n      whiteFont, // color\n      colorValues.green[6], // background\n      colorValues.green[4], // gradients\n    ],\n    red: [\n      whiteFont, // color\n      colorValues.red[6], // background\n      colorValues.red[4], // gradients\n    ],\n    orange: [\n      whiteFont, // color\n      colorValues.orange[6], // background\n      colorValues.orange[4], // gradients\n    ],\n    pink: [\n      whiteFont, // color\n      colorValues.pink[6], // background\n      colorValues.pink[4], // gradients\n    ],\n    purple: [\n      whiteFont, // color\n      colorValues.purple[6], // background\n      colorValues.purple[4], // gradients\n    ],\n    yellow: [\n      blackFont, // color\n      colorValues.yellow[6], // background\n      colorValues.yellow[4], // gradients\n    ],\n    teal: [\n      whiteFont, // color\n      colorValues.teal[6], // background\n      colorValues.teal[4], //gradients\n    ],\n  },\n  () => `:host`,\n);\n\n/**\n * {@linkcode Button}.\n *\n * Inspired by Next-ui.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host(:not([disabled]):active) {\n      transform: scale(var(--${cssScope}--focus-scale));\n    }\n\n    :host([round]) {\n      --${cssScope}--padding-x: .75em;\n      border-radius: calc(infinity * 1px);\n    }\n\n    :host([disabled]) {\n      cursor: not-allowed;\n      filter: brightness(0.85);\n    }\n\n    :host([ghost]) {\n      --${cssScope}--modal-background: var(--${cssScope}--ghost-color);\n      border-color: var(--${cssScope}--ghost-color);\n      border-width: var(--${cssScope}--ghost-width);\n      color: var(--${cssScope}--ghost-color);\n      background: transparent;\n      border-style: solid;\n    }\n  `,\n  css`\n    :host {\n      --${cssScope}--padding-x: .5em;\n      --${cssScope}--padding: .1em var(--${cssScope}--padding-x);\n      --${cssScope}--modal-animation-duration: 1s;\n      --${cssScope}--ghost-width: .08em;\n      --${cssScope}--focus-scale: .97;\n      --${cssScope}--deg: 45deg;\n      --${cssScope}--ghost-color:var(--${cssScope}--background);\n      color: var(--${cssScope}--color, inherit);\n      background: linear-gradient(\n        var(--${cssScope}--deg),\n        var(--${cssScope}--background),\n        var(--${cssScope}--gradients, var(--${cssScope}--background))\n      );\n      border-radius: 0.3em;\n      width: -moz-fit-content;\n      width: fit-content;\n      transition: 0.1s;\n      display: block;\n      overflow: hidden;\n      text-align: center;\n      padding: 0 !important;\n      cursor: pointer;\n    }\n\n    [part=\"root\"] {\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n      border-radius: inherit;\n      -webkit-user-select: none;\n              user-select: none;\n      transition: none;\n      transition-duration: inherit;\n    }\n\n    [part=\"slot\"] {\n      padding: var(--${cssScope}--padding);\n    }\n\n    i {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      visibility: visible;\n      pointer-events: none;\n      transform-origin: 0 0;\n      background: var(--${cssScope}--modal-background, currentColor);\n      animation-duration: var(--${cssScope}--modal-animation-duration);\n    }\n\n    @keyframes kf {\n      0% {\n        transform: scale(0) translate(-50%, -50%);\n        opacity: var(--${cssScope}--modal-opacity, 0.18);\n      }\n      80% {\n        transform: scale(1) translate(-50%, -50%);\n      }\n      to {\n        opacity: 0;\n      }\n    }\n  `,\n])\nexport class Button extends GodownElement {\n  /**\n   * Whether to disable this element.\n   */\n  @property({ type: Boolean, reflect: true }) disabled: boolean;\n  /**\n   * Invert font and background color.\n   */\n  @property({ type: Boolean, reflect: true }) ghost: boolean;\n  /**\n   * Whether this element is active or not.\n   */\n  @property({ type: Boolean, reflect: true }) active: boolean;\n  /**\n   * Enables rounded corners to appear capsule shaped.\n   */\n  @property({ type: Boolean, reflect: true }) round: boolean;\n  /**\n   * The primary color.\n   */\n  @property({ reflect: true }) color: \"none\" | keyof typeof colors = \"black\";\n  /**\n   * Text inside.\n   */\n  @property() text: string;\n\n  @part(\"modal-root\") _modalRoot: HTMLElement;\n  @part(\"root\") _root: HTMLElement;\n\n  protected render() {\n    const color = this.nextColor();\n    return html`\n      <div part=\"root\">\n        <span part=\"modal-root\"></span>\n        <div part=\"slot\">${this.text || htmlSlot()}</div>\n      </div>\n      ${htmlStyle(colors[color])}\n    `;\n  }\n\n  focus() {\n    if (this.disabled) {\n      return;\n    }\n    this.active = true;\n  }\n\n  blur() {\n    this.active = false;\n  }\n\n  firstUpdated() {\n    this.addEvent(this, \"click\", this._handelClick, true);\n  }\n\n  protected _handelClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.stopPropagation();\n      e.preventDefault();\n      return;\n    }\n    this._handleModal(e);\n  }\n\n  protected _handleModal(e: MouseEvent) {\n    const modal = document.createElement(\"i\");\n    const rect = this.getBoundingClientRect();\n    const h = rect.height;\n    const w = rect.width;\n    const size = `${Math.sqrt(h * h + w * w) * 2}px`;\n    modal.style.height = size;\n    modal.style.width = size;\n    modal.style.left = `${e.clientX - rect.left}px`;\n    modal.style.top = `${e.clientY - rect.y}px`;\n    modal.style.animationName = \"kf\";\n    this._modalRoot.appendChild(modal);\n    modal.addEventListener(\"animationend\", () => modal.remove(), { once: true });\n  }\n\n  nextColor() {\n    return this.color;\n  }\n}\n\nexport default Button;\n"]}