@editora/ui-core 0.1.9 → 0.1.12

package/dist/inline-edit.cjs.js

@@ -0,0 +1,118 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-1b301e7f.js"),g=`
+  :host {
+    --ui-inline-edit-bg: transparent;
+    --ui-inline-edit-border: 1px dashed transparent;
+    --ui-inline-edit-radius: 12px;
+    --ui-inline-edit-text: var(--ui-color-text, #0f172a);
+    --ui-inline-edit-muted: var(--ui-color-muted, #64748b);
+    --ui-inline-edit-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-inline-edit-surface: var(--ui-color-surface, #ffffff);
+    display: block;
+    min-width: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+  }
+
+  .display,
+  .editor {
+    min-width: 0;
+    border-radius: var(--ui-inline-edit-radius);
+  }
+
+  .display {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 10px;
+    border: var(--ui-inline-edit-border);
+    background: var(--ui-inline-edit-bg);
+  }
+
+  .display:hover {
+    border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+  }
+
+  .value {
+    min-width: 0;
+    white-space: pre-wrap;
+    color: var(--ui-inline-edit-text);
+    font-size: 14px;
+    line-height: 1.45;
+  }
+
+  .value[data-empty="true"] {
+    color: var(--ui-inline-edit-muted);
+  }
+
+  .edit-btn,
+  .save-btn,
+  .cancel-btn {
+    appearance: none;
+    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    background: var(--ui-inline-edit-surface);
+    color: var(--ui-inline-edit-text);
+    border-radius: 10px;
+    min-height: 34px;
+    padding: 0 12px;
+    cursor: pointer;
+    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .edit-btn:disabled,
+  .save-btn:disabled,
+  .cancel-btn:disabled {
+    opacity: 0.56;
+    cursor: not-allowed;
+  }
+
+  .editor[hidden],
+  .display[hidden] {
+    display: none !important;
+  }
+
+  .field {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    border-radius: 12px;
+    background: var(--ui-inline-edit-surface);
+    color: var(--ui-inline-edit-text);
+    padding: 10px 12px;
+    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    outline: none;
+  }
+
+  .field:focus-visible {
+    border-color: color-mix(in srgb, var(--ui-inline-edit-focus) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-inline-edit-focus) 22%, transparent);
+  }
+
+  .actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+`;function o(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class v extends p.ElementBase{constructor(){super(...arguments),this._draft="",this._formUnregister=null,this._lastFocusTarget=null}static get observedAttributes(){return["value","placeholder","editing","multiline","disabled","readonly","name"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}startEditing(){this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this._lastFocusTarget=document.activeElement||this,this._draft=this.value,this.setAttribute("editing",""),queueMicrotask(()=>{var n;const t=this.root.querySelector(".field");t==null||t.focus(),(n=t==null?void 0:t.select)==null||n.call(t)}),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!0},bubbles:!0,composed:!0})))}cancelEditing(){this.removeAttribute("editing"),this._draft=this.value,this.dispatchEvent(new CustomEvent("cancel",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}saveEditing(){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;if(this.hasAttribute("required")&&!this._draft.trim()){this.setAttribute("invalid","");return}const t=this.value;this._draft?this.setAttribute("value",this._draft):this.removeAttribute("value"),this.removeAttribute("invalid"),this.removeAttribute("editing"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,previousValue:t,source:"save"},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("save",{detail:{value:this.value,previousValue:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}connectedCallback(){super.connectedCallback(),this._draft=this.value,this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),super.disconnectedCallback()}attributeChangedCallback(t,n,e){n!==e&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="value"&&!this.hasAttribute("editing")&&(this._draft=e||""),this.isConnected&&this.requestRender())}render(){var c,h,b;const t=this.hasAttribute("editing")?this._draft:this.value,n=this.getAttribute("placeholder")||"Add value",e=this.hasAttribute("multiline"),l=this.hasAttribute("editing"),a=!this.value,s=this.hasAttribute("disabled")||this.hasAttribute("readonly");this.setContent(`
+      <style>${g}</style>
+      <div class="root">
+        <div class="display"${l?" hidden":""}>
+          <div class="value" data-empty="${a}">${o(a?n:this.value)}</div>
+          <button class="edit-btn" type="button"${s?" disabled":""}>Edit</button>
+        </div>
+        <div class="editor"${l?"":" hidden"}>
+          ${e?`<textarea class="field" rows="4"${s?" disabled":""}>${o(t)}</textarea>`:`<input class="field" type="text" value="${o(t)}"${s?" disabled":""} />`}
+          <div class="actions">
+            <button class="cancel-btn" type="button"${s?" disabled":""}>Cancel</button>
+            <button class="save-btn" type="button"${s?" disabled":""}>Save</button>
+          </div>
+        </div>
+      </div>
+    `);const i=this.root.querySelector(".field");i==null||i.addEventListener("input",d=>{this._draft=d.target.value}),i==null||i.addEventListener("keydown",d=>{const r=d;r.key==="Escape"&&(r.preventDefault(),this.cancelEditing()),!e&&r.key==="Enter"&&(r.preventDefault(),this.saveEditing()),(r.metaKey||r.ctrlKey)&&r.key==="Enter"&&(r.preventDefault(),this.saveEditing())}),(c=this.root.querySelector(".edit-btn"))==null||c.addEventListener("click",()=>this.startEditing()),(h=this.root.querySelector(".cancel-btn"))==null||h.addEventListener("click",()=>this.cancelEditing()),(b=this.root.querySelector(".save-btn"))==null||b.addEventListener("click",()=>this.saveEditing())}_registerWithForm(){var t;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const e=this.getRootNode().host,a=((t=e==null?void 0:e.closest)==null?void 0:t.call(e,"ui-form"))||null||this.closest("ui-form"),s=this.getAttribute("name");a&&typeof a.registerField=="function"&&s&&(this._formUnregister=a.registerField(s,{name:s,getValue:()=>this.value,setValue:i=>{i==null||i===""?this.removeAttribute("value"):this.setAttribute("value",String(i))}}))}catch{}}_restoreFocus(){const t=this._lastFocusTarget&&this._lastFocusTarget.isConnected?this._lastFocusTarget:this.root.querySelector(".edit-btn");t&&(queueMicrotask(()=>{try{t.focus({preventScroll:!0})}catch{t.focus()}}),this._lastFocusTarget=null)}}typeof customElements<"u"&&!customElements.get("ui-inline-edit")&&customElements.define("ui-inline-edit",v);exports.UIInlineEdit=v;

package/dist/inline-edit.esm.js

@@ -0,0 +1,206 @@
+import { E as v } from "./ElementBase-909688f3.mjs";
+const p = `
+  :host {
+    --ui-inline-edit-bg: transparent;
+    --ui-inline-edit-border: 1px dashed transparent;
+    --ui-inline-edit-radius: 12px;
+    --ui-inline-edit-text: var(--ui-color-text, #0f172a);
+    --ui-inline-edit-muted: var(--ui-color-muted, #64748b);
+    --ui-inline-edit-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-inline-edit-surface: var(--ui-color-surface, #ffffff);
+    display: block;
+    min-width: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+  }
+
+  .display,
+  .editor {
+    min-width: 0;
+    border-radius: var(--ui-inline-edit-radius);
+  }
+
+  .display {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 10px;
+    border: var(--ui-inline-edit-border);
+    background: var(--ui-inline-edit-bg);
+  }
+
+  .display:hover {
+    border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+  }
+
+  .value {
+    min-width: 0;
+    white-space: pre-wrap;
+    color: var(--ui-inline-edit-text);
+    font-size: 14px;
+    line-height: 1.45;
+  }
+
+  .value[data-empty="true"] {
+    color: var(--ui-inline-edit-muted);
+  }
+
+  .edit-btn,
+  .save-btn,
+  .cancel-btn {
+    appearance: none;
+    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    background: var(--ui-inline-edit-surface);
+    color: var(--ui-inline-edit-text);
+    border-radius: 10px;
+    min-height: 34px;
+    padding: 0 12px;
+    cursor: pointer;
+    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .edit-btn:disabled,
+  .save-btn:disabled,
+  .cancel-btn:disabled {
+    opacity: 0.56;
+    cursor: not-allowed;
+  }
+
+  .editor[hidden],
+  .display[hidden] {
+    display: none !important;
+  }
+
+  .field {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    border-radius: 12px;
+    background: var(--ui-inline-edit-surface);
+    color: var(--ui-inline-edit-text);
+    padding: 10px 12px;
+    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    outline: none;
+  }
+
+  .field:focus-visible {
+    border-color: color-mix(in srgb, var(--ui-inline-edit-focus) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-inline-edit-focus) 22%, transparent);
+  }
+
+  .actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+`;
+function o(u) {
+  return u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+class g extends v {
+  constructor() {
+    super(...arguments), this._draft = "", this._formUnregister = null, this._lastFocusTarget = null;
+  }
+  static get observedAttributes() {
+    return ["value", "placeholder", "editing", "multiline", "disabled", "readonly", "name"];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+  startEditing() {
+    this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this._lastFocusTarget = document.activeElement || this, this._draft = this.value, this.setAttribute("editing", ""), queueMicrotask(() => {
+      var n;
+      const t = this.root.querySelector(".field");
+      t == null || t.focus(), (n = t == null ? void 0 : t.select) == null || n.call(t);
+    }), this.dispatchEvent(new CustomEvent("editing-change", { detail: { editing: !0 }, bubbles: !0, composed: !0 })));
+  }
+  cancelEditing() {
+    this.removeAttribute("editing"), this._draft = this.value, this.dispatchEvent(new CustomEvent("cancel", { detail: { value: this.value }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("editing-change", { detail: { editing: !1 }, bubbles: !0, composed: !0 })), this._restoreFocus();
+  }
+  saveEditing() {
+    if (this.hasAttribute("disabled") || this.hasAttribute("readonly"))
+      return;
+    if (this.hasAttribute("required") && !this._draft.trim()) {
+      this.setAttribute("invalid", "");
+      return;
+    }
+    const t = this.value;
+    this._draft ? this.setAttribute("value", this._draft) : this.removeAttribute("value"), this.removeAttribute("invalid"), this.removeAttribute("editing"), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, previousValue: t, source: "save" }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("save", { detail: { value: this.value, previousValue: t }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("editing-change", { detail: { editing: !1 }, bubbles: !0, composed: !0 })), this._restoreFocus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._draft = this.value, this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this._formUnregister && this._formUnregister(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, n, e) {
+    n !== e && (t === "name" && this.isConnected && this._registerWithForm(), t === "value" && !this.hasAttribute("editing") && (this._draft = e || ""), this.isConnected && this.requestRender());
+  }
+  render() {
+    var c, h, b;
+    const t = this.hasAttribute("editing") ? this._draft : this.value, n = this.getAttribute("placeholder") || "Add value", e = this.hasAttribute("multiline"), l = this.hasAttribute("editing"), a = !this.value, s = this.hasAttribute("disabled") || this.hasAttribute("readonly");
+    this.setContent(`
+      <style>${p}</style>
+      <div class="root">
+        <div class="display"${l ? " hidden" : ""}>
+          <div class="value" data-empty="${a}">${o(a ? n : this.value)}</div>
+          <button class="edit-btn" type="button"${s ? " disabled" : ""}>Edit</button>
+        </div>
+        <div class="editor"${l ? "" : " hidden"}>
+          ${e ? `<textarea class="field" rows="4"${s ? " disabled" : ""}>${o(t)}</textarea>` : `<input class="field" type="text" value="${o(t)}"${s ? " disabled" : ""} />`}
+          <div class="actions">
+            <button class="cancel-btn" type="button"${s ? " disabled" : ""}>Cancel</button>
+            <button class="save-btn" type="button"${s ? " disabled" : ""}>Save</button>
+          </div>
+        </div>
+      </div>
+    `);
+    const i = this.root.querySelector(".field");
+    i == null || i.addEventListener("input", (d) => {
+      this._draft = d.target.value;
+    }), i == null || i.addEventListener("keydown", (d) => {
+      const r = d;
+      r.key === "Escape" && (r.preventDefault(), this.cancelEditing()), !e && r.key === "Enter" && (r.preventDefault(), this.saveEditing()), (r.metaKey || r.ctrlKey) && r.key === "Enter" && (r.preventDefault(), this.saveEditing());
+    }), (c = this.root.querySelector(".edit-btn")) == null || c.addEventListener("click", () => this.startEditing()), (h = this.root.querySelector(".cancel-btn")) == null || h.addEventListener("click", () => this.cancelEditing()), (b = this.root.querySelector(".save-btn")) == null || b.addEventListener("click", () => this.saveEditing());
+  }
+  _registerWithForm() {
+    var t;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const e = this.getRootNode().host, a = ((t = e == null ? void 0 : e.closest) == null ? void 0 : t.call(e, "ui-form")) || null || this.closest("ui-form"), s = this.getAttribute("name");
+      a && typeof a.registerField == "function" && s && (this._formUnregister = a.registerField(s, {
+        name: s,
+        getValue: () => this.value,
+        setValue: (i) => {
+          i == null || i === "" ? this.removeAttribute("value") : this.setAttribute("value", String(i));
+        }
+      }));
+    } catch {
+    }
+  }
+  _restoreFocus() {
+    const t = this._lastFocusTarget && this._lastFocusTarget.isConnected ? this._lastFocusTarget : this.root.querySelector(".edit-btn");
+    t && (queueMicrotask(() => {
+      try {
+        t.focus({ preventScroll: !0 });
+      } catch {
+        t.focus();
+      }
+    }), this._lastFocusTarget = null);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-inline-edit") && customElements.define("ui-inline-edit", g);
+export {
+  g as UIInlineEdit
+};