godown 2.7.5 → 2.7.6

package/web-components/dialog/dialog.js

@@ -1,14 +1,16 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import GodownOpenable from "../../supers/openable.js";
-import { cssvar, cssvarValues } from "../../supers/root.js";
-const defineName = "dialog";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
+import GodownSuperOpenable from "../../proto/super-openable.js";
+import { createScope, cssGlobalVars } from "../../styles/global.js";
+const protoName = "dialog";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode Dialog} similar to dialog.
  */
-let Dialog = class Dialog extends GodownOpenable {
+let Dialog = class Dialog extends GodownSuperOpenable {
     constructor() {
         super(...arguments);
         this.direction = "center";
@@ -16,51 +18,32 @@ let Dialog = class Dialog extends GodownOpenable {
          * Enable modal.
          */
         this.modal = false;
-        /**
-         * Enable scale.
-         */
-        this.scale = false;
-        /**
-         * Scale gap.
-         */
-        this.gap = 0.2;
         /**
          * Exit key, which can be multiple.
          */
         this.key = "Escape";
     }
     render() {
-        return html `<div style="--s:1" class="${this.direction}">${htmlSlot()}</div>`;
+        return html `<div part="root" class="${this.direction}">${htmlSlot()}</div>`;
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEvent(this, "submit", this._handelSubmit);
-        if (this.scale && this.direction === "center") {
-            this.addEvent(this, "wheel", this._handleWheel);
-        }
         if (this.key) {
             this.addEvent(document, "keydown", this._handleKeydown.bind(this));
         }
-        if (this.open) {
-            this.show();
-        }
     }
     showModal() {
         this.modal = true;
         this.show();
     }
-    _handleWheel(e) {
-        let scale = Number(this._div.style.getPropertyValue("--s"));
-        if (e.deltaY > 0) {
-            scale -= this.gap;
-        }
-        else {
-            scale += this.gap;
+    _handelWheel(e) {
+        if (this.modal) {
+            e.preventDefault();
         }
-        this._div.style.setProperty("--s", `${scale}`);
     }
     _handleKeydown(e) {
-        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);
+        const keys = this.key.split(/[\s;]/);
         if (keys.includes(e.key) || keys.includes(e.code)) {
             this.close();
         }
@@ -71,122 +54,89 @@ let Dialog = class Dialog extends GodownOpenable {
         }
     }
 };
-Dialog.styles = [
-    GodownOpenable.styles,
-    css `
-      :host {
-        display: block;
-        transition:
-          all 0.3s ease-in-out,
-          color 0s,
-          background 0s;
-        height: fit-content;
-      }
-    `,
-    css `
-      :host {
-        ${cssvar}--background: rgb(var(${cssvarValues.mainRGB}) / 0%);
-        ${cssvar}--background-modal: rgb(var(${cssvarValues.mainRGB}) / 15%);
-        position: fixed;
-        height: 100%;
-        width: 100%;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        transition: all 0.3s;
-        display: flex;
-        visibility: hidden;
-        background: var(${cssvar}--background);
-        pointer-events: none;
-      }
-
-      :host([open]) {
-        visibility: visible;
-      }
-
-      :host([open][modal]) {
-        pointer-events: all;
-        backdrop-filter: blur(0.25px);
-        background: var(${cssvar}--background-modal);
-      }
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Dialog.prototype, "modal", void 0);
+__decorate([
+    property({ type: String })
+], Dialog.prototype, "key", void 0);
+Dialog = __decorate([
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--background: none;
+      --${cssScope}--background-modal: rgb(var(--${cssGlobalVars.backgroundRGB}) / 15%);
+      background: var(--${cssScope}--background);
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      inset:0;
+      display: flex;
+      visibility: hidden;
+      transition: all 0.3s;
+      pointer-events: none;
+    }
 
-      :host([open]) slot {
-        opacity: 1 !important;
-        transform: translateY(0) translateX(0) !important;
-      }
+    :host([open]) {
+      visibility: visible;
+    }
 
-      div {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        transition: inherit;
-        transform: scale(var(--s));
-      }
+    :host([open][modal]) {
+      pointer-events: all;
+      background: var(--${cssScope}--background-modal);
+    }
 
-      slot {
-        display: block;
-        width: fit-content;
-        height: fit-content;
-        margin: auto;
-        opacity: 0;
-        transition: inherit;
-        pointer-events: all;
-      }
+    :host([open]) div {
+      opacity: 1;
+    }
 
-      div {
-        position: relative;
-      }
+    div {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      opacity: 0;
+      position: relative;
+    }
 
-      slot {
-        position: absolute;
-      }
+    slot {
+      display: block;
+      width: -moz-fit-content;
+      width: fit-content;
+      height: -moz-fit-content;
+      height: fit-content;
+      margin: auto;
+      transition: inherit;
+      pointer-events: all;
+      position: absolute;
+    }
 
-      [class^="top"] slot {
-        top: 0;
-      }
+    [class^="top"] slot {
+      top: 0;
+    }
 
-      [class^="bottom"] slot {
-        bottom: 0;
-      }
+    [class^="bottom"] slot {
+      bottom: 0;
+    }
 
-      [class$="right"] slot {
-        right: 0%;
-      }
+    [class$="right"] slot {
+      right: 0%;
+    }
 
-      [class$="left"] slot {
-        left: 0%;
-      }
+    [class$="left"] slot {
+      left: 0%;
+    }
 
-      div[class$="center"],
-      .top,
-      .left,
-      .right,
-      .bottom {
-        align-items: center;
-        justify-content: center;
-        align-items: center;
-        justify-content: center;
-      }
-    `,
-];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Dialog.prototype, "modal", void 0);
-__decorate([
-    property({ type: Boolean })
-], Dialog.prototype, "scale", void 0);
-__decorate([
-    property({ type: Number })
-], Dialog.prototype, "gap", void 0);
-__decorate([
-    property({ type: String })
-], Dialog.prototype, "key", void 0);
-__decorate([
-    query("div")
-], Dialog.prototype, "_div", void 0);
-Dialog = __decorate([
-    define(defineName)
+    div[class$="center"],
+    .top,
+    .left,
+    .right,
+    .bottom {
+      align-items: center;
+      justify-content: center;
+    }
+  `,
+    ])
 ], Dialog);
 export { Dialog };
 export default Dialog;

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport GodownOpenable, { Direction9 } from \"../../supers/openable.js\";\nimport { cssvar, cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"dialog\";\n\n/**\n * {@linkcode Dialog} similar to dialog.\n */\n@define(defineName)\nexport class Dialog extends GodownOpenable {\n  direction: Direction9 = \"center\";\n  /**\n   * Enable modal.\n   */\n  @property({ type: Boolean, reflect: true }) modal = false;\n  /**\n   * Enable scale.\n   */\n  @property({ type: Boolean }) scale = false;\n  /**\n   * Scale gap.\n   */\n  @property({ type: Number }) gap = 0.2;\n  /**\n   * Exit key, which can be multiple.\n   */\n  @property({ type: String }) key = \"Escape\";\n\n  @query(\"div\") _div: HTMLDivElement;\n\n  static styles: CSSResultGroup = [\n    GodownOpenable.styles,\n    css`\n      :host {\n        display: block;\n        transition:\n          all 0.3s ease-in-out,\n          color 0s,\n          background 0s;\n        height: fit-content;\n      }\n    `,\n    css`\n      :host {\n        ${cssvar}--background: rgb(var(${cssvarValues.mainRGB}) / 0%);\n        ${cssvar}--background-modal: rgb(var(${cssvarValues.mainRGB}) / 15%);\n        position: fixed;\n        height: 100%;\n        width: 100%;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        transition: all 0.3s;\n        display: flex;\n        visibility: hidden;\n        background: var(${cssvar}--background);\n        pointer-events: none;\n      }\n\n      :host([open]) {\n        visibility: visible;\n      }\n\n      :host([open][modal]) {\n        pointer-events: all;\n        backdrop-filter: blur(0.25px);\n        background: var(${cssvar}--background-modal);\n      }\n\n      :host([open]) slot {\n        opacity: 1 !important;\n        transform: translateY(0) translateX(0) !important;\n      }\n\n      div {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        transition: inherit;\n        transform: scale(var(--s));\n      }\n\n      slot {\n        display: block;\n        width: fit-content;\n        height: fit-content;\n        margin: auto;\n        opacity: 0;\n        transition: inherit;\n        pointer-events: all;\n      }\n\n      div {\n        position: relative;\n      }\n\n      slot {\n        position: absolute;\n      }\n\n      [class^=\"top\"] slot {\n        top: 0;\n      }\n\n      [class^=\"bottom\"] slot {\n        bottom: 0;\n      }\n\n      [class$=\"right\"] slot {\n        right: 0%;\n      }\n\n      [class$=\"left\"] slot {\n        left: 0%;\n      }\n\n      div[class$=\"center\"],\n      .top,\n      .left,\n      .right,\n      .bottom {\n        align-items: center;\n        justify-content: center;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div style=\"--s:1\" class=\"${this.direction}\">${htmlSlot()}</div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEvent(this, \"submit\", this._handelSubmit);\n    if (this.scale && this.direction === \"center\") {\n      this.addEvent(this, \"wheel\", this._handleWheel);\n    }\n    if (this.key) {\n      this.addEvent(document, \"keydown\", this._handleKeydown.bind(this));\n    }\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  showModal() {\n    this.modal = true;\n    this.show();\n  }\n\n  protected _handleWheel(e: any) {\n    let scale = Number(this._div.style.getPropertyValue(\"--s\"));\n    if (e.deltaY > 0) {\n      scale -= this.gap;\n    } else {\n      scale += this.gap;\n    }\n    this._div.style.setProperty(\"--s\", `${scale}`);\n  }\n\n  protected _handleKeydown(e: KeyboardEvent) {\n    const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);\n    if (keys.includes(e.key) || keys.includes(e.code)) {\n      this.close();\n    }\n  }\n\n  protected _handelSubmit(e: SubmitEvent) {\n    if ((e.target as HTMLFormElement).method === \"dialog\") {\n      this.close();\n    }\n  }\n}\n\nexport default Dialog;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-dialog\": Dialog;\n    \"dialog-item\": Dialog;\n    \"g-dialog\": Dialog;\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/dialog/dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,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,mBAAwC,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AA6EI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,mBAAmB;IAAxC;;QACL,cAAS,GAAe,QAAQ,CAAC;QACjC;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAS1D;;WAEG;QACyB,QAAG,GAAG,QAAQ,CAAC;IAqC7C,CAAC;IAnCW,MAAM;QACd,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,QAAQ,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAClD,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAES,YAAY,CAAC,CAAa;QAClC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAES,cAAc,CAAC,CAAgB;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAES,aAAa,CAAC,CAAc;QACpC,IAAK,CAAC,CAAC,MAA0B,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACtD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;CACF,CAAA;AAjD6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAY9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAgB;AAjBhC,MAAM;IA5ElB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ;UACR,QAAQ,iCAAiC,aAAa,CAAC,aAAa;0BACpD,QAAQ;;;;;;;;;;;;;;;;;0BAiBR,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmD/B;KACF,CAAC;GACW,MAAM,CAsDlB;;AAED,eAAe,MAAM,CAAC","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport GodownSuperOpenable, { type Direction9 } from \"../../proto/super-openable.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\n\nconst protoName = \"dialog\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Dialog} similar to dialog.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--background: none;\n      --${cssScope}--background-modal: rgb(var(--${cssGlobalVars.backgroundRGB}) / 15%);\n      background: var(--${cssScope}--background);\n      height: 100%;\n      width: 100%;\n      position: fixed;\n      inset:0;\n      display: flex;\n      visibility: hidden;\n      transition: all 0.3s;\n      pointer-events: none;\n    }\n\n    :host([open]) {\n      visibility: visible;\n    }\n\n    :host([open][modal]) {\n      pointer-events: all;\n      background: var(--${cssScope}--background-modal);\n    }\n\n    :host([open]) div {\n      opacity: 1;\n    }\n\n    div {\n      height: 100%;\n      width: 100%;\n      display: flex;\n      opacity: 0;\n      position: relative;\n    }\n\n    slot {\n      display: block;\n      width: -moz-fit-content;\n      width: fit-content;\n      height: -moz-fit-content;\n      height: fit-content;\n      margin: auto;\n      transition: inherit;\n      pointer-events: all;\n      position: absolute;\n    }\n\n    [class^=\"top\"] slot {\n      top: 0;\n    }\n\n    [class^=\"bottom\"] slot {\n      bottom: 0;\n    }\n\n    [class$=\"right\"] slot {\n      right: 0%;\n    }\n\n    [class$=\"left\"] slot {\n      left: 0%;\n    }\n\n    div[class$=\"center\"],\n    .top,\n    .left,\n    .right,\n    .bottom {\n      align-items: center;\n      justify-content: center;\n    }\n  `,\n])\nexport class Dialog extends GodownSuperOpenable {\n  direction: Direction9 = \"center\";\n  /**\n   * Enable modal.\n   */\n  @property({ type: Boolean, reflect: true }) modal = false;\n  /**\n   * @deprecated\n   */\n  scale: boolean;\n  /**\n   * @deprecated\n   */\n  gap: number;\n  /**\n   * Exit key, which can be multiple.\n   */\n  @property({ type: String }) key = \"Escape\";\n\n  protected render() {\n    return html`<div part=\"root\" class=\"${this.direction}\">${htmlSlot()}</div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEvent(this, \"submit\", this._handelSubmit);\n    if (this.key) {\n      this.addEvent(document, \"keydown\", this._handleKeydown.bind(this));\n    }\n  }\n\n  showModal() {\n    this.modal = true;\n    this.show();\n  }\n\n  protected _handelWheel(e: WheelEvent) {\n    if (this.modal) {\n      e.preventDefault();\n    }\n  }\n\n  protected _handleKeydown(e: KeyboardEvent) {\n    const keys = this.key.split(/[\\s;]/);\n    if (keys.includes(e.key) || keys.includes(e.code)) {\n      this.close();\n    }\n  }\n\n  protected _handelSubmit(e: SubmitEvent) {\n    if ((e.target as HTMLFormElement).method === \"dialog\") {\n      this.close();\n    }\n  }\n}\n\nexport default Dialog;\n"]}

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

@@ -0,0 +1,13 @@
+import { GodownElement } from "../../proto/godown-element.js";
+/**
+ * {@linkcode Divider} similar to hr.
+ */
+export declare class Divider extends GodownElement {
+    /**
+     * Enable vertical.
+     */
+    vertical: boolean;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export default Divider;
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/divider/divider.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D;;GAEG;AACH,qBAyDa,OAAQ,SAAQ,aAAa;IACxC;;OAEG;IACyC,QAAQ,UAAS;IAE7D,SAAS,CAAC,MAAM;CAYjB;AAED,eAAe,OAAO,CAAC"}

package/web-components/divider/divider.js

@@ -0,0 +1,95 @@
+import { __decorate } from "tslib";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { ifValue } from "../../lib/directives.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { createScope } from "../../styles/global.js";
+const protoName = "divider";
+const cssScope = createScope(protoName);
+/**
+ * {@linkcode Divider} similar to hr.
+ */
+let Divider = class Divider extends GodownElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Enable vertical.
+         */
+        this.vertical = false;
+    }
+    render() {
+        const hasElement = this.childElementCount || this.textContent;
+        return html `<div part="root" class="${this.vertical ? "vertical" : "horizontal"}">
+      ${ifValue(hasElement, html `<hr part="before" class="before" />
+          ${htmlSlot()}
+          <hr part="after" class="after" />`, html `<hr part="cross" />`)}
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "vertical", void 0);
+Divider = __decorate([
+    godown(protoName),
+    styles(css `
+  :host {
+    --${cssScope}--before-length: auto;
+    --${cssScope}--after-length: auto;
+    --${cssScope}--breadth: .05em;
+    display: block;
+    background: none;
+    margin: auto;
+  }
+  :host([vertical]) {
+    width: -moz-fit-content;
+    width: fit-content;
+    height: 100%;
+  }
+  div {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    width: 100%;
+  }
+
+  hr {
+    border-radius: inherit;
+    margin: 0;
+    border: 0;
+    flex: 1;
+    background: currentColor;
+  }
+  .horizontal {
+    display: flex;
+  }
+
+  .vertical {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+  .horizontal hr {
+    height: var(--${cssScope}--breadth);
+  }
+  .horizontal .before {
+    max-width: var(--${cssScope}--before-length);
+  }
+  .horizontal .after {
+    max-width: var(--${cssScope}--after-length);
+  }
+  .vertical hr {
+    width: var(--${cssScope}--breadth);
+  }
+  .vertical .before {
+    max-height: var(--${cssScope}--before-length);
+  }
+  .vertical .after {
+    max-height: var(--${cssScope}--after-length);
+  }
+`)
+], Divider);
+export { Divider };
+export default Divider;
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/divider/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AA0DI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QACL;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;IAc/D,CAAC;IAZW,MAAM;QACd,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAC;QAC9D,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;QAC3E,OAAO,CACP,UAAU,EACV,IAAI,CAAA;YACA,QAAQ,EAAE;4CACsB,EACpC,IAAI,CAAA,qBAAqB,CAC1B;WACI,CAAC;IACV,CAAC;CACF,CAAA;AAd6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAkB;AAJlD,OAAO;IAzDnB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;QAEH,QAAQ;QACR,QAAQ;QACR,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAkCI,QAAQ;;;uBAGL,QAAQ;;;uBAGR,QAAQ;;;mBAGZ,QAAQ;;;wBAGH,QAAQ;;;wBAGR,QAAQ;;CAE/B,CAAC;GACW,OAAO,CAkBnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { createScope } from \"../../styles/global.js\";\n\nconst protoName = \"divider\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Divider} similar to hr.\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    --${cssScope}--before-length: auto;\n    --${cssScope}--after-length: auto;\n    --${cssScope}--breadth: .05em;\n    display: block;\n    background: none;\n    margin: auto;\n  }\n  :host([vertical]) {\n    width: -moz-fit-content;\n    width: fit-content;\n    height: 100%;\n  }\n  div {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    width: 100%;\n  }\n\n  hr {\n    border-radius: inherit;\n    margin: 0;\n    border: 0;\n    flex: 1;\n    background: currentColor;\n  }\n  .horizontal {\n    display: flex;\n  }\n\n  .vertical {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n  .horizontal hr {\n    height: var(--${cssScope}--breadth);\n  }\n  .horizontal .before {\n    max-width: var(--${cssScope}--before-length);\n  }\n  .horizontal .after {\n    max-width: var(--${cssScope}--after-length);\n  }\n  .vertical hr {\n    width: var(--${cssScope}--breadth);\n  }\n  .vertical .before {\n    max-height: var(--${cssScope}--before-length);\n  }\n  .vertical .after {\n    max-height: var(--${cssScope}--after-length);\n  }\n`)\nexport class Divider extends GodownElement {\n  /**\n   * Enable vertical.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  protected render() {\n    const hasElement = this.childElementCount || this.textContent;\n    return html`<div part=\"root\" class=\"${this.vertical ? \"vertical\" : \"horizontal\"}\">\n      ${ifValue(\n        hasElement,\n        html`<hr part=\"before\" class=\"before\" />\n          ${htmlSlot()}\n          <hr part=\"after\" class=\"after\" />`,\n        html`<hr part=\"cross\" />`,\n      )}\n    </div>`;\n  }\n}\n\nexport default Divider;\n"]}

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

@@ -1,29 +1,22 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
+import { GodownElement } from "../../proto/godown-element.js";
 /**
- * {@linkcode Form} gets all the names and actual values of the child element.
+ * {@linkcode Form} Gets child element key-value object,
+ * which will be nested if the child element is the same as this element.
+ *
+ * @slot - Child elements.
  */
-export declare class Form<T extends object = object> extends GodownElement {
+export declare class Form<T = object> extends GodownElement {
     name: string;
-    value: T;
-    nameValue: () => [string, Record<string, any>];
-    /**
-     * Form enctype.
-     */
-    enctype: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
-    _form: HTMLFormElement;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
+    get value(): T;
+    nameValue: () => [string, T];
+    protected render(): import("lit").TemplateResult<1>;
     reset(): void;
-    namevalue(enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain"): [string, Record<string, any>];
-    FormData(): FormData;
+    namevalue(): [string, T];
+    static buildValue(elements: (Element & {
+        name?: string;
+        value?: unknown;
+        namevalue?: () => [string, unknown];
+    })[]): Record<string, any>;
 }
 export default Form;
-declare global {
-    interface HTMLElementTagNameMap {
-        "base-form": Form;
-        "g-form": Form;
-    }
-}
 //# sourceMappingURL=form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,gBAAgB,CAAC;AAEjF,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD;;GAEG;AACH,qBACa,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IACpD,IAAI,SAAM;IACM,KAAK,IAAW;IAE5C,SAAS,sCAA0B;IACnC;;OAEG;IACS,OAAO,EAAE,mCAAmC,GAAG,qBAAqB,GAAG,YAAY,CAAyB;IAEzG,KAAK,EAAE,eAAe,CAAC;IAEtC,MAAM,CAAC,MAAM,iBAcO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAQhC,KAAK;IA0BL,SAAS,CAAC,OAAO,6EAAe,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAgChE,QAAQ,IAAI,QAAQ;CA8BrB;AACD,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,IAAI,CAAC;QAClB,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"form.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/form/form.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D;;;;;GAKG;AACH,qBAQa,IAAI,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,aAAa;IACrC,IAAI,SAAM;IACtB,IAAI,KAAK,IAAI,CAAC,CAEb;IAED,SAAS,QAiBI,CAAC,MAAM,EAAE,CAAC,CAAC,CAjBG;IAE3B,SAAS,CAAC,MAAM;IAIhB,KAAK;IAWL,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAIxB,MAAM,CAAC,UAAU,CACf,QAAQ,EAAE,CAAC,OAAO,GAAG;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACrC,CAAC,EAAE,GACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAoBvB;AAED,eAAe,IAAI,CAAC"}