@localnerve/editable-object 0.1.0

package/LICENSE.md

@@ -0,0 +1,26 @@
+Copyright (c) 2025 Alex Grant <alex@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+    * Neither the name of the LocalNerve, LLC nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL LocalNerve, LLC BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,83 @@
+# editable-object
+[![npm version](https://badge.fury.io/js/%40localnerve%2Feditable-object.svg)](http://badge.fury.io/js/%40localnerve%2Feditable-object)
+
+> A small, fast, no-dependency, editable object webcomponent.
+
+## Summary
+
+A native web component for an editable object that allows a user to edit it's values, add or remove key/value pairs. JSON values only.  
+Non-browser module exports build helpers (for building CSP rules, etc).
+
+Can be a convenient 'todo' app to test data update and mutation on the front end with the least additional ceremony.
+
+## Web Details
+  + ~11k full, ~3k gzip
+
+## Events
+
+This web component issues a 'changed' CustomEvent when an object property is added, edited, or removed. The format of the `event.detail` is as follows:
+
+```
+{
+  action: 'add' | 'edit' | 'remove',
+  key: '<the property key name>',
+  previous: '<the previous value, null if action: 'add'>',
+  new: '<the new value, null if action: 'remove'>'
+}
+```
+
+## Attributes (and Properties)
+
+* `object` - *Optional*. The initial object to edit - Must be a JSON stringified object. Can be added later without JSON stringification via the javascript property `object`.
+
+> Property name is also `object`.
+
+* `add-property-placeholder` - *Optional*. The text that prompts a user to add a new property to the object. Defaults to 'Add new property in key:value format'.
+
+  > Property name is `addPropertyPlaceholder` (camel case).
+
+## Javascript Public Properties and Methods
+
+* `object` **Property** - Assign a javascript `Object` to set the component's internals for editing. Any existing object is replaced. JSON compatible properties only (string, number, boolean, array, object, null).
+
+* `addPropertyPlaceholder` **Property** - Assign a prompt to show the user in the new property/value input box to override the default 'Add new property in key:value format'.
+
+* `mergeObject(newObject)` **method** - Call to merge more properties into the underlying object under edit.
+
+## Overridable CSS Variables
+
+* `--eo-min-width` - The min-width for the component. Defaults to 300px.
+* `--eo-bg-color` - The overall control background color. Defaults to #fafafa.
+* `--eo-border-radius` - The border-radius of the control. Defaults to 4px.
+* `--eo-border-focused-color` - The color of the control border when focused. Defaults to #444.
+* `--eo-border-defocused-color` - The color of the control border when not focused. Defaults to #aaa.
+* `--eo-item-selected-color` - The background color of the property list item when selected. Defaults to #eee.
+* `--eo-item-hover-color` - The background color of the propert list item when hovered. Defaults to #ddd.
+* `--eo-item-input-border-color` - The border color of 'add' and 'edit' input boxes. Defaults to #bbb.
+* `--eo-icon-color` - The color of the toolbar button icons. Defaults to #444.
+
+## Usage Example
+
+```html 
+  <editable-object object="{'property1':'value1','property2':'value2'}" add-property-placeholder="Add property in key:value format"></editable-object>
+```
+See [The test reference](https://github.com/localnerve/editable-object/blob/master/test/fixtures/index.html) for another usage example, run/play with the test reference with `npm run test:server`.
+
+## Non-browser Exports
+
+The non-browser version of the module exports methods to help with builds.
+
+### {Promise} getEditableObjectCssText()
+
+Asynchronously gets the raw shadow css text.  
+Useful for computing the hash for a CSP style rule.  
+Returns a Promise that resolves to the full utf8 string of css text.
+
+## License
+
+LocalNerve [BSD-3-Clause](https://github.com/localnerve/editable-object/blob/master/LICENSE.md) Licensed
+
+## Contact
+
+twitter: @localnerve
+email: alex@localnerve.com

package/dist/editable-object.css

@@ -0,0 +1 @@
+:host{--eo-min-width:300px;--eo-bg-color:#fafafa;--eo-border-radius:4px;--eo-border-focused-color:#444;--eo-border-defocused-color:#aaa;--eo-item-selected-color:#eee;--eo-item-hover-color:#ddd;--eo-item-input-border-color:#bbb;--eo-icon-color:#444}:host(.disabled){pointer-events:none}.editable-object{background:var(--eo-bg-color);border:1px solid var(--eo-border-focused-color);border-radius:var(--eo-border-radius);padding:1rem;min-width:var(--eo-min-width);display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}.editable-object.defocused{border:1px solid var(--eo-border-defocused-color)}ul{padding:0;margin:0}li{line-height:2.5;list-style:none;cursor:default}div>div,li{display:flex;align-items:center;justify-content:space-between}.editable-object:not(.defocused) li:hover{background:var(--eo-item-hover-color)}.property-wrapper{display:flex;align-items:baseline}.property-wrapper label{padding-right:1rem}.toolbar{display:flex;gap:1rem;padding-left:1rem}.editable-object.defocused .toolbar,li:not(.selected) .toolbar{opacity:0;pointer-events:none}.toolbar button{position:relative}.toolbar button:hover:before{content:"";position:absolute;width:24px;height:24px;background:rgba(0,0,0,.1);left:-4px;top:-4px;border-radius:50%}.icon{background-color:transparent;border:none;cursor:pointer;font-size:0;fill:var(--eo-icon-color);padding:0}.icon svg{width:16px;height:16px}.new-object-property{margin-top:16px;padding:0 8px 0 2px}.add-new-object-property-input,.edit-object-property-input{padding:6px 8px;border-radius:4px;border:1px solid var(--eo-item-input-border-color);min-width:18em}.editable-object.defocused .add-new-object-property-input{border:1px solid transparent;opacity:.5}.edit-object-property-input{margin-left:-8px}

package/dist/editable-object.js

@@ -0,0 +1,2 @@
+/*! editable-list@0.1.0, Copyright (c) 2025 Alex Grant <alex@localnerve.com> (https://www.localnerve.com), LocalNerve LLC, BSD-3-Clause */
+class e extends HTMLElement{#e=null;#t=[];#o=[];#i=[];static#r=["object","add-property-placeholder"];static#s={object:{},addPropertyPlaceholder:"Add new property in key:value format"};static get observedAttributes(){return this.#r}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0})}#n(t){return this.hasAttribute(t)?this.getAttribute(t):e.#s[t]}#l(e,t){return`\n      <div class="property-wrapper">\n        <label for="eo-${e}-value">${e}</label>\n        <input readonly="true" id="eo-${e}-value" type="text" value="${t}" />\n      </div>\n      <div class="toolbar">\n        <button class="editable-object-up-property icon" title="Move up">\n          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">\n            <path d="m5 9 1.41 1.41L11 5.83V22h2V5.83l4.59 4.59L19 9l-7-7-7 7z"></path>\n          </svg>\n        </button>\n        <button class="editable-object-down-property icon" title="Move down">\n          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">\n            <path d="m19 15-1.41-1.41L13 18.17V2h-2v16.17l-4.59-4.59L5 15l7 7 7-7z"></path>\n          </svg>\n        </button>\n        <button class="editable-object-remove-property icon" title="Remove">\n          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">\n            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>\n          </svg>\n        </button>\n      </div>\n    `}#d(){const e=this.shadowRoot.querySelectorAll(".editable-object-up-property"),t=this.shadowRoot.querySelectorAll(".editable-object-down-property"),o=e.length;for(let i=0;i<o;i++)e[i].style.visibility=0==i?"hidden":"visible",t[i].style.visibility=i==o-1?"hidden":"visible"}#c(e){for(;"LI"!==e.tagName;)e=e.parentNode;return e}#a(e){this.#p();const t=this.#c(e.target);t.classList.toggle("selected",!0),[...t.querySelectorAll("button")].forEach((e=>{e.tabIndex=0}))}#h(e){return new CustomEvent("change",{bubbles:!0,cancelable:!1,composed:!0,detail:e})}#u(e){"INPUT"===e.target.nodeName&&("Enter"!==e.key&&" "!==e.key||e.target.click())}#b(e){if(this._editing)return;this._editing=!0;const t=this.#c(e.target).querySelector(".property-wrapper > input");t.readOnly=!1,t._value=t.value;const o=this.#v.bind(this),i=this.#v.bind(this);t.addEventListener("blur",o,!1),this.#i.push({host:t,type:"blur",listener:o}),t.addEventListener("keypress",i,!1),this.#i.push({host:t,type:"keypress",listener:i}),t.focus()}#v(e){if(this._editing&&(e instanceof KeyboardEvent&&"Enter"===e.key||!(e instanceof KeyboardEvent))){e.preventDefault();const t=this.#c(e.target),o=t.querySelector(".property-wrapper > label").innerText,i=t.querySelector(".property-wrapper > input"),r=i._value,s=i.value;this._editing=!1,i.readOnly=!0,this.#i.forEach((e=>{e.host.removeEventListener(e.type,e.listener)})),this.#i.length=0,this.dispatchEvent(this.#h({action:"edit",key:o,previous:r,new:s}))}}#y(e){const t=e.previousElementSibling;return!!t&&(e.parentNode.insertBefore(e,t),this.#d(),!0)}#w(e){const t=e.nextElementSibling;return!!t&&(e.parentNode.insertBefore(t,e),this.#d(),!0)}#g(e){e.remove(),this.#d()}#m(e){e.stopPropagation();const t=this.#c(e.target),o=t.querySelector(".property-wrapper > label").innerText.trim(),i=t.querySelector(".property-wrapper > input").value.trim();this.#g(t),this.dispatchEvent(this.#h({action:"remove",key:o,previous:i,new:null}))}#f(e){e.stopPropagation();const t=this.#c(e.target);this.#y(t)}#k(e){e.stopPropagation();const t=this.#c(e.target);this.#w(t)}#x(){let e,t=0;return function(o){const i=(new Date).getTime(),r=i-t;r<500&&r>0?(o.preventDefault(),this.#b(o)):e=setTimeout((()=>{clearTimeout(e)}),500),t=i}.bind(this)}#E(e){const t=this.#a.bind(this);e.forEach((e=>{e.addEventListener("click",t,!1),this.#o.push({host:e,type:"click",listener:t})}))}#j(e,t){const o=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),i=this.#x(),r=this.#b.bind(this),s=this.#u.bind(this);e.forEach((e=>{e.addEventListener("keypress",s,!1),this.#o.push({host:e,type:"keypress",listener:s}),e.addEventListener("dblclick",r,!1),this.#o.push({host:e,type:"dblclick",listener:r}),o&&(e.addEventListener("touchend",i),this.#o.push({host:e,type:"touchend",listener:i}))}));const n=this.#f.bind(this),l=this.#k.bind(this),d=this.#m.bind(this);t.up.forEach((e=>{e.addEventListener("click",n,!1),this.#o.push({host:e,type:"click",listener:n})})),t.down.forEach((e=>{e.addEventListener("click",l,!1),this.#o.push({host:e,type:"click",listener:l})})),t.remove.forEach((e=>{e.addEventListener("click",d,!1),this.#o.push({host:e,type:"click",listener:d})}))}#L(e){e.composedPath().includes(this)||this.shadowRoot.querySelector(".editable-object").classList.add("defocused")}#S(){this.shadowRoot.querySelector(".editable-object").classList.remove("defocused")}#q(e){return e in this.#e}#p(){[...this.shadowRoot.querySelectorAll("li")].forEach((e=>{e.classList.toggle("selected",!1),[...e.querySelectorAll("button")].forEach((e=>{e.tabIndex=-1}))}))}#A(e){if(e instanceof KeyboardEvent&&"Enter"===e.key||!(e instanceof KeyboardEvent)){const e=this.shadowRoot.querySelector(".add-new-object-property-input"),t=e.value.trim();if(""!==t){const[o,i]=t.split(":"),r=o.trim(),s=i.trim();if(this.#q(r))return void e.focus();const n={[r]:s};this.mergeObject(n),this.dispatchEvent(this.#h({action:"add",key:r,previous:null,new:s})),this.shadowRoot.querySelector(".object-properties").lastChild.click(),e.value=""}}}get object(){return this.#e}set object(e){if(!e)return;this.#e&&Object.keys(this.#e).length>0&&[this.#o,this.#i].forEach((e=>{e.forEach((e=>{e.host.removeEventListener(e.type,e.listener)}))}));const t=this.shadowRoot.querySelector(".object-properties");t.innerHTML="";const o=[],i=[],r={up:[],down:[],remove:[]};for(const[s,n]of Object.entries(e)){const e=document.createElement("li");e.innerHTML=this.#l(s,n),t.appendChild(e),o.push(e),i.push(e.querySelector(".property-wrapper")),r.up.push(e.querySelector(".editable-object-up-property")),r.down.push(e.querySelector(".editable-object-down-property")),r.remove.push(e.querySelector(".editable-object-remove-property"))}this.#E(o),this.#j(i,r),this.#d();const s=o[0].querySelector("input");s.click(),s.focus(),this.#e=e}get addPropertyPlaceholder(){return this.#n("add-property-placeholder")}set addPropertyPlaceholder(e){const t="add-property-placeholder";e?this.setAttribute(t,e):this.removeAttribute(t)}mergeObject(e){this.object={...this.#e,...e}}connectedCallback(){const{shadowRoot:e}=this;e.innerHTML='<style>:host{--eo-min-width:300px;--eo-bg-color:#fafafa;--eo-border-radius:4px;--eo-border-focused-color:#444;--eo-border-defocused-color:#aaa;--eo-item-selected-color:#eee;--eo-item-hover-color:#ddd;--eo-item-input-border-color:#bbb;--eo-icon-color:#444}:host(.disabled){pointer-events:none}.editable-object{background:var(--eo-bg-color);border:1px solid var(--eo-border-focused-color);border-radius:var(--eo-border-radius);padding:1rem;min-width:var(--eo-min-width);display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}.editable-object.defocused{border:1px solid var(--eo-border-defocused-color)}ul{padding:0;margin:0}li{line-height:2.5;list-style:none;cursor:default}div>div,li{display:flex;align-items:center;justify-content:space-between}.editable-object:not(.defocused) li:hover{background:var(--eo-item-hover-color)}.property-wrapper{display:flex;align-items:baseline}.property-wrapper label{padding-right:1rem}.toolbar{display:flex;gap:1rem;padding-left:1rem}.editable-object.defocused .toolbar,li:not(.selected) .toolbar{opacity:0;pointer-events:none}.toolbar button{position:relative}.toolbar button:hover:before{content:"";position:absolute;width:24px;height:24px;background:rgba(0,0,0,.1);left:-4px;top:-4px;border-radius:50%}.icon{background-color:transparent;border:none;cursor:pointer;font-size:0;fill:var(--eo-icon-color);padding:0}.icon svg{width:16px;height:16px}.new-object-property{margin-top:16px;padding:0 8px 0 2px}.add-new-object-property-input,.edit-object-property-input{padding:6px 8px;border-radius:4px;border:1px solid var(--eo-item-input-border-color);min-width:18em}.editable-object.defocused .add-new-object-property-input{border:1px solid transparent;opacity:.5}.edit-object-property-input{margin-left:-8px}</style><div class="editable-object defocused"><ul class=object-properties></ul><div class=new-object-property><input class=add-new-object-property-input type=text placeholder="Add new property in key:value format"><div class=toolbar><button class="editable-object-add-property icon" title=Add><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=24 height=24 viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></button></div></div></div>';const t=this.getAttribute("object");this.object=JSON.parse(t);const o=e.querySelector(".editable-object"),i=e.querySelector(".new-object-property"),r=e.querySelector(".add-new-object-property-input"),s=e.querySelector(".editable-object-add-property"),n=this.#L.bind(this),l=this.#S.bind(this);document.addEventListener("click",n,!1),this.#t.push({host:document,type:"click",listener:n}),o.addEventListener("click",l,!0),this.#t.push({host:o,type:"click",listener:l});const d=this.#p.bind(this),c=this.#A.bind(this);i.addEventListener("click",d,!0),this.#t.push({host:i,type:"click",listener:d}),r.addEventListener("keypress",c,!1),this.#t.push({host:r,type:"keypress",listener:c}),s.addEventListener("click",c,!1),this.#t.push({host:s,type:"click",listener:c})}disconnectedCallback(){[this.#t,this.#o,this.#i].forEach((e=>{e.forEach((e=>{e.host.removeEventListener(e.type,e.listener)}))}))}attributeChangedCallback(e,t,o){o!==t&&(this[e]=this.getAttribute(e))}}customElements.define("editable-object",e);

package/dist/index.js

@@ -0,0 +1,23 @@
+/**
+ * editable-object Node entry point
+ * 
+ * Copyright (c) 2025 Alex Grant (@localnerve), LocalNerve LLC
+ * Copyrights licensed under the BSD License. See the accompanying LICENSE file for terms.
+ */
+import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
+import * as url from 'node:url';
+
+const thisDir = url.fileURLToPath(new URL('.', import.meta.url));
+
+/**
+ * Get the css file contents.
+ * Useful for CSP builds.
+ *
+ * @returns {Promise<String>} The utf8 css file content
+ */
+export function getEditableObjectCssText () {
+  return fs.readFile(path.join(thisDir, 'editable-object.css'), {
+    encoding: 'utf8'
+  });
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@localnerve/editable-object",
+  "version": "0.1.0",
+  "description": "A vanillajs editable-object web component for visual object display and editing",
+  "main": "dist/index.js",
+  "browser": "dist/editable-object.js",
+  "type": "module",
+  "scripts": {
+    "build:debug": "pushd src && node --inspect-brk build.js && popd",
+    "build": "pushd src && node build.js && webpack-cli --config webpack.prod.config.js && popd",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build",
+    "test:server": "SKIP_MIN=1 npm run build && node test/dev-server.js"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.28.0",
+    "@localnerve/web-component-build": "^1.11.0",
+    "babel-loader": "10.0.0",
+    "eslint": "^9.28.0",
+    "express": "5.1.0",
+    "globals": "^16.2.0",
+    "webpack-cli": "6.0.1"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/localnerve/editable-object.git"
+  },
+  "keywords": [
+    "editable",
+    "list",
+    "webcomponent",
+    "javascript",
+    "vanillajs"
+  ],
+  "author": "Alex Grant <alex@localnerve.com> (https://www.localnerve.com)",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/localnerve/editable-object/issues"
+  },
+  "homepage": "https://github.com/localnerve/editable-object/tree/master/src/editable-object#readme"
+}