@burger-editor/frozen-patty 0.10.0 → 4.0.0-alpha.1

package/{lib/setValue.js → dist/set-value.js}

@@ -1,64 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+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 el A target element
- * @param attr Field data attribute name
+ * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
  */
-function default_1(name, datum, el, attr, filter) {
-    var bindingFormats = el.getAttribute("data-".concat(attr)) || '';
-    for (var _i = 0, _a = bindingFormats.split(/\s*,\s*/); _i < _a.length; _i++) {
-        var bindingFormat = _a[_i];
-        bindingFormat = bindingFormat.trim();
-        /**
-         * 抽出した対象キー
-         */
-        var key = void 0;
-        /**
-         * 対象属性
-         *
-         * `null`の場合は`innerHTML`が対象となる
-         * ただし要素がinput要素の場合は`value`に設定
-         */
-        var targetAttr = void 0;
-        //
-        // 対象属性名の抽出
-        //
-        if (/^[a-z_-](?:[a-z0-9_-])*:[a-z_-](?:[a-z0-9_-])*(?:\([a-z-]+\))?/i.test(bindingFormat)) {
-            var splitKey = bindingFormat.split(':');
-            key = splitKey[0].trim();
-            targetAttr = splitKey[1].trim();
-        }
-        else {
-            key = bindingFormat.trim();
-            targetAttr = null;
-        }
-        //
-        // 対象キーが一致しなければスキップする
-        //
-        if (name !== key) {
+export function setValue(el, name, datum, attr = 'field', filter) {
+    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)) {
-                var cssPropertyName = targetAttr.replace(/^style\(([a-z-]+)\)$/i, '$1');
-                var cssValue = void 0;
+        // 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': {
                         //
@@ -69,74 +38,93 @@ function default_1(name, datum, el, attr, filter) {
                         // デモサーバーから本番サーバーへの移行ができなくなってしまうので避ける
                         // 単純な文字列を流し込む（setAttributeを利用）
                         // urlはマルチバイト文字や空白記号を含まないはずであるがエスケープする
-                        var url = encodeURI("".concat(datum));
-                        cssValue = "url(".concat(url, ")");
+                        const url = encodeURI(`${datum}`);
+                        cssValue = `url(${url})`;
                         break;
                     }
                     //
                     // TODO: 他にもvalueに単位が必要なケースなどに対応したい
                     //
                     default: {
-                        cssValue = "".concat(datum);
+                        cssValue = `${datum}`;
                     }
                 }
-                el.setAttribute('style', "".concat(cssPropertyName, ": ").concat(cssValue));
-                //
-                // 属性
-                //
+                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, "".concat(datum));
-            }
-            //
-            // 属性指定がない場合
-            //
-        }
-        else {
-            if (el instanceof HTMLInputElement ||
-                el instanceof HTMLSelectElement ||
-                el instanceof HTMLTextAreaElement) {
-                el.value = "".concat(datum);
-            }
-            else {
-                el.innerHTML = "".concat(datum);
+                el.setAttribute(propName, `${datum}`);
             }
+            return;
         }
+        setContent(el, datum);
     }
 }
-exports.default = default_1;
 /**
- * Set attribute
- *
- * @param el Target HTML element
- * @param attr Attribute name
- * @param datum Datum
  *
+ * @param el
+ * @param prefix
+ * @param name
+ * @param datum
  */
-// tslint:disable-next-line:cyclomatic-complexity
-function setAttribute(el, attr, datum) {
+function set(el, prefix, name, datum) {
     if (datum == null) {
-        el.removeAttribute(attr);
+        el.removeAttribute(name);
         return;
     }
-    switch (attr) {
-        // ⚠️ Dosen't test
-        case 'contentediable': {
+    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 (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) {
@@ -145,12 +133,12 @@ function setAttribute(el, attr, datum) {
                     el.dir = datum;
                     break;
                 }
-                case 'auto':
+                // case 'auto':
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'draggable': {
             if (typeof datum === 'boolean') {
@@ -166,52 +154,57 @@ function setAttribute(el, attr, datum) {
                     el.draggable = false;
                     break;
                 }
-                case 'auto':
+                // 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': {
-            var i = void 0;
+            let i;
             if (typeof datum === 'boolean') {
                 i = datum ? 0 : -1;
             }
             else if (typeof datum === 'string') {
-                i = parseInt(datum, 10);
+                i = Number.parseInt(datum, 10);
             }
             else {
                 i = datum;
             }
-            el.tabIndex = isNaN(i) ? -1 : Math.floor(i);
-            break;
+            el.tabIndex = Number.isNaN(i) ? -1 : Math.floor(i);
+            return;
         }
         case 'async': {
             if (el instanceof HTMLScriptElement) {
                 el.async = !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autocomplete': {
             if (el instanceof HTMLInputElement || el instanceof HTMLFormElement) {
-                el.autocomplete = datum ? "".concat(datum) : 'off';
+                // @ts-ignore
+                el.autocomplete = datum ? `${datum}` : 'off';
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autofocus': {
             if (el instanceof HTMLButtonElement ||
@@ -221,84 +214,84 @@ function setAttribute(el, attr, datum) {
                 el.autofocus = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(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, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'checked': {
             if (el instanceof HTMLInputElement) {
                 el.checked = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'cols': {
             if (el instanceof HTMLTextAreaElement) {
-                var cols = toInt(datum);
-                if (isNaN(cols)) {
-                    el.removeAttribute(attr);
+                const cols = toInt(datum);
+                if (Number.isNaN(cols)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.cols = cols;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'colspan': {
             if (el instanceof HTMLTableCellElement) {
-                var colSpan = toInt(datum);
-                if (isNaN(colSpan)) {
-                    el.removeAttribute(attr);
+                const colSpan = toInt(datum);
+                if (Number.isNaN(colSpan)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.colSpan = colSpan;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(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, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'default': {
             if (el instanceof HTMLTrackElement) {
                 el.default = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'defer': {
             if (el instanceof HTMLScriptElement) {
                 el.defer = !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'disabled': {
             if (el instanceof HTMLButtonElement ||
@@ -311,160 +304,160 @@ function setAttribute(el, attr, datum) {
                 el.disabled = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'download': {
             if (el instanceof HTMLAnchorElement) {
                 if (datum || datum === '') {
-                    el.download = "".concat(datum);
+                    el.download = `${datum}`;
                 }
                 else {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'high': {
             if (el instanceof HTMLMeterElement) {
-                var high = toInt(datum);
-                if (isNaN(high)) {
-                    el.removeAttribute(attr);
+                const high = toInt(datum);
+                if (Number.isNaN(high)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.high = high;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'ismap': {
             if (el instanceof HTMLImageElement) {
                 el.isMap = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(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, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'low': {
             if (el instanceof HTMLMeterElement) {
-                var low = toInt(datum);
-                if (isNaN(low)) {
-                    el.removeAttribute(attr);
+                const low = toInt(datum);
+                if (Number.isNaN(low)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.low = low;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'max': {
             if (el instanceof HTMLInputElement ||
                 el instanceof HTMLMeterElement ||
                 el instanceof HTMLProgressElement) {
-                var max = toInt(datum);
-                if (isNaN(max)) {
-                    el.removeAttribute(attr);
+                const max = toInt(datum);
+                if (Number.isNaN(max)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.max = max;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'maxlength': {
             if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-                var maxLength = toInt(datum);
-                if (isNaN(maxLength)) {
-                    el.removeAttribute(attr);
+                const maxLength = toInt(datum);
+                if (Number.isNaN(maxLength)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.maxLength = Math.floor(maxLength);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'min': {
             if (el instanceof HTMLInputElement || el instanceof HTMLMeterElement) {
-                var min = toInt(datum);
-                if (isNaN(min)) {
-                    el.removeAttribute(attr);
+                const min = toInt(datum);
+                if (Number.isNaN(min)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.min = min;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(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, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'novalidate': {
             if (el instanceof HTMLFormElement) {
                 el.noValidate = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(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 'oepn': {
-        // 	if (el instanceof HTMLDetailsElement) {
-        // 		el.oepn = datum === '' ? true : !!datum;
-        // 	} else {
-        // 		el.setAttribute(attr, `${datum}`);
-        // 	}
-        // 	break;
-        // }
         case 'optimum': {
             if (el instanceof HTMLMeterElement) {
-                var optimum = toInt(datum);
-                if (isNaN(optimum)) {
-                    el.removeAttribute(attr);
+                const optimum = toInt(datum);
+                if (Number.isNaN(optimum)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.optimum = Math.floor(optimum);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'preload': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
@@ -481,18 +474,18 @@ function setAttribute(el, attr, datum) {
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(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, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'required': {
             if (el instanceof HTMLInputElement ||
@@ -501,94 +494,93 @@ function setAttribute(el, attr, datum) {
                 el.required = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'reversed': {
             if (el instanceof HTMLOListElement) {
-                // tslint:disable-next-line:no-any
                 el.reversed = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'rows': {
             if (el instanceof HTMLTextAreaElement) {
-                var rows = toInt(datum);
-                if (isNaN(rows)) {
-                    el.removeAttribute(attr);
+                const rows = toInt(datum);
+                if (Number.isNaN(rows)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.rows = Math.floor(rows);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'rowspan': {
             if (el instanceof HTMLTableCellElement) {
-                var rowSpan = toInt(datum);
-                if (isNaN(rowSpan)) {
-                    el.removeAttribute(attr);
+                const rowSpan = toInt(datum);
+                if (Number.isNaN(rowSpan)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.rowSpan = Math.floor(rowSpan);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'size': {
             if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
-                var size = toInt(datum);
-                if (isNaN(size)) {
-                    el.removeAttribute(attr);
+                const size = toInt(datum);
+                if (Number.isNaN(size)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.size = size;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'span': {
             if (el instanceof HTMLTableColElement) {
-                var span = toInt(datum);
-                if (isNaN(span)) {
-                    el.removeAttribute(attr);
+                const span = toInt(datum);
+                if (Number.isNaN(span)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.span = span;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'start': {
             if (el instanceof HTMLOListElement) {
-                var start = toInt(datum);
-                if (isNaN(start)) {
-                    el.removeAttribute(attr);
+                const start = toInt(datum);
+                if (Number.isNaN(start)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.start = start;
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'step': {
             if (el instanceof HTMLInputElement) {
@@ -596,34 +588,34 @@ function setAttribute(el, attr, datum) {
                     el.step = datum;
                     break;
                 }
-                var step = toNum(datum);
-                if (isNaN(step)) {
-                    el.removeAttribute(attr);
+                const step = toNum(datum);
+                if (Number.isNaN(step)) {
+                    el.removeAttribute(name);
                 }
                 else {
                     el.step = step.toString(10);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'target': {
             if (el instanceof HTMLAnchorElement ||
                 el instanceof HTMLAreaElement ||
                 el instanceof HTMLFormElement) {
                 if (datum) {
-                    el.target = "".concat(datum);
+                    el.target = `${datum}`;
                 }
                 else {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
             else {
-                el.setAttribute(attr, "".concat(datum));
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         // case 'accesskey':
         // case 'class':
@@ -675,24 +667,60 @@ function setAttribute(el, attr, datum) {
         // case 'wrap':
         // and Data-* attributes
         default: {
-            el.setAttribute(attr, "".concat(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) {
-    var i;
+    let i;
     if (typeof datum === 'boolean') {
         i = +datum;
     }
     else if (typeof datum === 'string') {
-        i = parseFloat(datum);
+        i = Number.parseFloat(datum);
     }
     else {
         i = datum;
     }
     return i;
 }
+/**
+ *
+ * @param datum
+ */
 function toInt(datum) {
     return Math.floor(toNum(datum));
 }
-//# sourceMappingURL=setValue.js.map