@burger-editor/frozen-patty 0.11.0 → 4.0.0-alpha.2

package/dist/set-value.js

@@ -1,60 +1,32 @@
+import { fieldNameParser } from './field-name-parser.js';
+import { kebabCase } from './utils.js';
 /**
  * Set value to an element
  *
  * ```html
  * <div [target-attribute] data-[attr]="[name]:[target-attribute]"></div>
  * ```
- *
  * @param el A target element
  * @param name A label name
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
  */
 export function setValue(el, name, datum, attr = 'field', filter) {
-    const bindingFormats = el.getAttribute(`data-${attr}`) || '';
-    for (let bindingFormat of bindingFormats.split(/\s*,\s*/)) {
-        bindingFormat = bindingFormat.trim();
-        /**
-         * 抽出した対象キー
-         */
-        let key;
-        /**
-         * 対象属性
-         *
-         * `null`の場合は`innerHTML`が対象となる
-         * ただし要素がinput要素の場合は`value`に設定
-         */
-        let targetAttr;
-        //
-        // 対象属性名の抽出
-        //
-        if (/^[_a-z-][\w-]*:[_a-z-][\w-]*(?:\([a-z-]+\))?/i.test(bindingFormat)) {
-            const splitKey = bindingFormat.split(':');
-            key = splitKey[0]?.trim() ?? '';
-            targetAttr = splitKey[1]?.trim() ?? '';
-        }
-        else {
-            key = bindingFormat.trim();
-            targetAttr = null;
-        }
-        //
-        // 対象キーが一致しなければスキップする
-        //
-        if (name !== key) {
+    const rawValue = el.getAttribute(`data-${attr}`);
+    const fieldList = rawValue?.split(/\s*,\s*/) ?? [];
+    for (const field of fieldList) {
+        const { fieldName, propName } = fieldNameParser(field);
+        if (name !== fieldName) {
             continue;
         }
         if (filter) {
             datum = filter(datum);
         }
-        //
-        // 属性による対応
-        //
-        if (targetAttr) {
-            //
-            // style属性
-            //
-            if (/^style\([a-z-]+\)$/i.test(targetAttr)) {
-                const cssPropertyName = targetAttr.replace(/^style\(([a-z-]+)\)$/i, '$1');
+        // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
+        if (propName) {
+            if (/^style\([a-z-]+\)$/i.test(propName)) {
+                const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
                 let cssValue;
                 switch (cssPropertyName) {
                     case 'background-image': {
@@ -78,59 +50,81 @@ export function setValue(el, name, datum, attr = 'field', filter) {
                     }
                 }
                 el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
-                //
-                // 属性
-                //
             }
             else if (el instanceof HTMLElement) {
-                setAttribute(el, targetAttr, datum);
+                // HTMLElement
+                set(el, attr, propName, datum);
             }
             else {
                 // SVGElement or more
-                el.setAttribute(targetAttr, `${datum}`);
-            }
-            //
-            // 属性指定がない場合
-            //
-        }
-        else {
-            if (el instanceof HTMLInputElement ||
-                el instanceof HTMLSelectElement ||
-                el instanceof HTMLTextAreaElement) {
-                el.value = `${datum}`;
-            }
-            else {
-                el.innerHTML = `${datum}`;
+                el.setAttribute(propName, `${datum}`);
             }
+            return;
         }
+        setContent(el, datum);
     }
 }
 /**
- * Set attribute
- *
- * @param el Target HTML element
- * @param attr Attribute name
- * @param datum Datum
  *
+ * @param el
+ * @param prefix
+ * @param name
+ * @param datum
  */
-function setAttribute(el, attr, datum) {
+function set(el, prefix, name, datum) {
     if (datum == null) {
-        el.removeAttribute(attr);
+        el.removeAttribute(name);
+        return;
+    }
+    switch (name) {
+        case 'text': {
+            setContent(el, datum, false);
+            return;
+        }
+        case 'html': {
+            setContent(el, datum, true);
+            return;
+        }
+        case 'node': {
+            if (typeof datum !== 'string') {
+                return;
+            }
+            const nodeName = el.localName ?? el.nodeName.toLowerCase();
+            if (nodeName === datum.toLowerCase()) {
+                return;
+            }
+            const node = (el.ownerDocument ?? document).createElement(`${datum}`);
+            for (const child of el.childNodes) {
+                node.append(child.cloneNode(true));
+            }
+            for (const { name, value } of el.attributes) {
+                node.setAttribute(name, value);
+            }
+            el.replaceWith(node);
+            return;
+        }
+    }
+    if (!name.startsWith('data-') && !(name in el)) {
+        const dataAttr = `data-${prefix}-${kebabCase(name)}`;
+        if (el.hasAttribute(dataAttr)) {
+            el.setAttribute(dataAttr, `${datum}`);
+        }
         return;
     }
-    switch (attr) {
+    switch (name) {
         case 'contenteditable': {
             switch (datum) {
+                case true:
                 case 'true':
                 case '': {
                     el.contentEditable = 'true';
                     break;
                 }
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'dir': {
             switch (datum) {
@@ -141,10 +135,10 @@ function setAttribute(el, attr, datum) {
                 }
                 // case 'auto':
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'draggable': {
             if (typeof datum === 'boolean') {
@@ -162,18 +156,22 @@ function setAttribute(el, attr, datum) {
                 }
                 // case 'auto':
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'hidden': {
+            if (datum === 'until-found') {
+                el.setAttribute(name, datum);
+                return;
+            }
             el.hidden = !!datum;
-            break;
+            return;
         }
         case 'spellcheck': {
             el.spellcheck = !!datum;
-            break;
+            return;
         }
         case 'tabindex': {
             let i;
@@ -187,16 +185,16 @@ function setAttribute(el, attr, datum) {
                 i = datum;
             }
             el.tabIndex = Number.isNaN(i) ? -1 : Math.floor(i);
-            break;
+            return;
         }
         case 'async': {
             if (el instanceof HTMLScriptElement) {
                 el.async = !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autocomplete': {
             if (el instanceof HTMLInputElement || el instanceof HTMLFormElement) {
@@ -204,9 +202,9 @@ function setAttribute(el, attr, datum) {
                 el.autocomplete = datum ? `${datum}` : 'off';
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autofocus': {
             if (el instanceof HTMLButtonElement ||
@@ -216,84 +214,84 @@ function setAttribute(el, attr, datum) {
                 el.autofocus = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autoplay': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
                 el.autoplay = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'checked': {
             if (el instanceof HTMLInputElement) {
                 el.checked = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'cols': {
             if (el instanceof HTMLTextAreaElement) {
                 const cols = toInt(datum);
                 if (Number.isNaN(cols)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.cols = cols;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'colspan': {
             if (el instanceof HTMLTableCellElement) {
                 const colSpan = toInt(datum);
                 if (Number.isNaN(colSpan)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.colSpan = colSpan;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'controls': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
                 el.controls = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'default': {
             if (el instanceof HTMLTrackElement) {
                 el.default = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'defer': {
             if (el instanceof HTMLScriptElement) {
                 el.defer = !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'disabled': {
             if (el instanceof HTMLButtonElement ||
@@ -306,9 +304,9 @@ function setAttribute(el, attr, datum) {
                 el.disabled = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'download': {
             if (el instanceof HTMLAnchorElement) {
@@ -316,61 +314,61 @@ function setAttribute(el, attr, datum) {
                     el.download = `${datum}`;
                 }
                 else {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'high': {
             if (el instanceof HTMLMeterElement) {
                 const high = toInt(datum);
                 if (Number.isNaN(high)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.high = high;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'ismap': {
             if (el instanceof HTMLImageElement) {
                 el.isMap = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'loop': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
                 el.loop = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'low': {
             if (el instanceof HTMLMeterElement) {
                 const low = toInt(datum);
                 if (Number.isNaN(low)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.low = low;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'max': {
             if (el instanceof HTMLInputElement ||
@@ -378,88 +376,88 @@ function setAttribute(el, attr, datum) {
                 el instanceof HTMLProgressElement) {
                 const max = toInt(datum);
                 if (Number.isNaN(max)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.max = max;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'maxlength': {
             if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
                 const maxLength = toInt(datum);
                 if (Number.isNaN(maxLength)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.maxLength = Math.floor(maxLength);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'min': {
             if (el instanceof HTMLInputElement || el instanceof HTMLMeterElement) {
                 const min = toInt(datum);
                 if (Number.isNaN(min)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.min = min;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'multiple': {
             if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
                 el.multiple = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'novalidate': {
             if (el instanceof HTMLFormElement) {
                 el.noValidate = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
+            }
+            return;
+        }
+        case 'open': {
+            if (el instanceof HTMLDetailsElement) {
+                el.open = datum === '' ? true : !!datum;
+            }
+            else {
+                el.setAttribute(name, `${datum}`);
             }
             break;
         }
-        // ⚰️ Unsupported HTMLDetailsElement yet...
-        // case 'open': {
-        // 	if (el instanceof HTMLDetailsElement) {
-        // 		el.open = datum === '' ? true : !!datum;
-        // 	} else {
-        // 		el.setAttribute(attr, `${datum}`);
-        // 	}
-        // 	break;
-        // }
         case 'optimum': {
             if (el instanceof HTMLMeterElement) {
                 const optimum = toInt(datum);
                 if (Number.isNaN(optimum)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.optimum = Math.floor(optimum);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'preload': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
@@ -476,18 +474,18 @@ function setAttribute(el, attr, datum) {
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'readonly': {
             if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
                 el.readOnly = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'required': {
             if (el instanceof HTMLInputElement ||
@@ -496,93 +494,93 @@ function setAttribute(el, attr, datum) {
                 el.required = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'reversed': {
             if (el instanceof HTMLOListElement) {
                 el.reversed = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'rows': {
             if (el instanceof HTMLTextAreaElement) {
                 const rows = toInt(datum);
                 if (Number.isNaN(rows)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.rows = Math.floor(rows);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'rowspan': {
             if (el instanceof HTMLTableCellElement) {
                 const rowSpan = toInt(datum);
                 if (Number.isNaN(rowSpan)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.rowSpan = Math.floor(rowSpan);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'size': {
             if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
                 const size = toInt(datum);
                 if (Number.isNaN(size)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.size = size;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'span': {
             if (el instanceof HTMLTableColElement) {
                 const span = toInt(datum);
                 if (Number.isNaN(span)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.span = span;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'start': {
             if (el instanceof HTMLOListElement) {
                 const start = toInt(datum);
                 if (Number.isNaN(start)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.start = start;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'step': {
             if (el instanceof HTMLInputElement) {
@@ -592,16 +590,16 @@ function setAttribute(el, attr, datum) {
                 }
                 const step = toNum(datum);
                 if (Number.isNaN(step)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.step = step.toString(10);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'target': {
             if (el instanceof HTMLAnchorElement ||
@@ -611,13 +609,13 @@ function setAttribute(el, attr, datum) {
                     el.target = `${datum}`;
                 }
                 else {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         // case 'accesskey':
         // case 'class':
@@ -669,10 +667,43 @@ function setAttribute(el, attr, datum) {
         // case 'wrap':
         // and Data-* attributes
         default: {
-            el.setAttribute(attr, `${datum}`);
+            el.setAttribute(name, `${datum}`);
+        }
+    }
+}
+/**
+ *
+ * @param el
+ * @param datum
+ * @param asHtml
+ */
+export function setContent(el, datum, asHtml = true) {
+    if (el instanceof HTMLInputElement ||
+        el instanceof HTMLSelectElement ||
+        el instanceof HTMLTextAreaElement ||
+        el instanceof HTMLOutputElement) {
+        if (el instanceof HTMLInputElement &&
+            (el.type === 'radio' || el.type === 'checkbox')) {
+            if (typeof datum === 'boolean') {
+                el.checked = datum;
+                return;
+            }
+            el.checked = el.value === `${datum}`;
+            return;
         }
+        el.value = `${datum}`;
+        return;
     }
+    if (asHtml) {
+        el.innerHTML = datum == null ? '' : `${datum}`;
+        return;
+    }
+    el.textContent = datum == null ? '' : `${datum}`;
 }
+/**
+ *
+ * @param datum
+ */
 function toNum(datum) {
     let i;
     if (typeof datum === 'boolean') {
@@ -686,6 +717,10 @@ function toNum(datum) {
     }
     return i;
 }
+/**
+ *
+ * @param datum
+ */
 function toInt(datum) {
     return Math.floor(toNum(datum));
 }