@optionfactory/ful 0.53.0 → 0.55.0

package/dist/ful.iife.js

@@ -644,14 +644,6 @@ var ful = (function (exports) {
         static uid(prefix) {
             return `${prefix}-${++Attributes.id}`;
         }
-        /**
-         * 
-         * @param {any} value 
-         * @returns 
-         */
-        static asBoolean(value) {
-            return value !== null && value !== undefined && value !== false;
-        }
         /**
          * 
          * @param {HTMLElement} el 
@@ -754,36 +746,36 @@ var ful = (function (exports) {
         #tagToclass;
         #configured;
         #id = 0;
-        constructor(){
+        constructor() {
             this.#templates = new TemplatesRegistry();
             this.#tagToclass = {};
         }
-        defineTemplate(html){
-            if(html === null || html === undefined){
+        defineTemplate(html) {
+            if (html === null || html === undefined) {
                 return undefined;
             }
             const name = `unnamed-${++this.#id}`;
             this.#templates.put(name, Fragments.fromHtml(html));
             return name;
         }
-        template(k){
-            if(k === null || k === undefined){
+        template(k) {
+            if (k === null || k === undefined) {
                 return undefined;
             }
             return this.#templates.get(k);
         }
-        define(tag, klass){
-            if(!this.#configured){
+        define(tag, klass) {
+            if (!this.#configured) {
                 this.#tagToclass[tag] = klass;
                 return this;
             }
-            customElements.define(tag, klass);        
+            customElements.define(tag, klass);
             return this;
         }
         configure(ec) {
             this.#templates.configure(ec);
-            for(const [tag, klass] of Object.entries(this.#tagToclass)) {
-                customElements.define(tag, klass);            
+            for (const [tag, klass] of Object.entries(this.#tagToclass)) {
+                customElements.define(tag, klass);
                 delete this.#tagToclass[tag];
             }
             this.#configured = true;
@@ -811,18 +803,34 @@ var ful = (function (exports) {
 
     const upgradeQueue = new UpgradeQueue();
 
+    const mappers = {
+        'string': attr => attr,
+        'number': attr => attr === null ? null : Number(attr),
+        'bool': attr => attr !== null,
+        'json': attr => JSON.parse(attr)
+    };
+
     const ParsedElement = (conf) => {
-        const {states, attributes, template, slots} = conf || {};
+        const { observed, template, slots } = conf || {};
+
+        const attrsAndTypes = (observed || []).map(a => {
+            const [attr, maybeType] = a.split(":");
+            const type = maybeType?.trim() || 'string';
+            if (!(type in mappers)) {
+                throw new Error(`unsupported attribute type: ${type}`);
+            }
+            return [attr.trim(), type];
+        });
+
+        const attrsAndMappers = attrsAndTypes.map(([attr, type]) => [attr, mappers[type]]);
 
-        const observed_states = states || [];
-        const observed_attributes = attributes || [];
-        const observed = [].concat(observed_states).concat(observed_attributes);
+        const attrToMapper = Object.fromEntries(attrsAndMappers);
 
         const templateId = elements.defineTemplate(template);
 
         const k = class extends HTMLElement {
             static get observedAttributes() {
-                return observed;
+                return Object.keys(attrToMapper);
             }
             #parsed;
             #initialized;
@@ -831,7 +839,7 @@ var ful = (function (exports) {
                 super(...args);
                 this.#internals = this.attachInternals();
             }
-            get initialized(){
+            get initialized() {
                 return this.#initialized;
             }
             get internals() {
@@ -858,11 +866,12 @@ var ful = (function (exports) {
                 });
                 observer.observe(this.parentNode, { childList: true, subtree: true });
             }
-            attributeChangedCallback(name, oldValue, newValue) {
+            attributeChangedCallback(attr, oldValue, newValue) {
                 if (!this.#parsed || oldValue === newValue) {
                     return;
                 }
-                this[name] = newValue;
+                const mapper = attrToMapper[attr];
+                this[attr] = mapper(newValue);
             }
             async upgrade() {
                 if (this.#parsed) {
@@ -870,34 +879,29 @@ var ful = (function (exports) {
                 }
                 this.#parsed = true;
                 await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
-                for (const flag of observed_states) {
-                    if (this.hasAttribute(flag)) {
-                        this[flag] = true;
-                    }
-                }
-                for (const other of observed_attributes) {
-                    if (this.hasAttribute(other)) {
-                        this[other] = this.getAttribute(other);
+
+                for (const [attr, mapper] of attrsAndMappers) {
+                    if (this.hasAttribute(attr)) {
+                        this[attr] = mapper(this.getAttribute(attr));
                     }
                 }
                 this.#initialized = true;
             }
         };
 
-        for (const state of observed_states) {
-            Object.defineProperty(k.prototype, state, {
+        for (const [attr, type] of attrsAndTypes.filter(([a, t]) => t === 'bool')) {
+            Object.defineProperty(k.prototype, attr, {
                 enumerable: true,
                 configurable: true,
                 get() {
-                    return this.internals.states.has(`--${state}`);
+                    return this.internals.states.has(`--${attr}`);
                 },
                 set(value) {
-                    const v = Attributes.asBoolean(value);
                     const et = this.initialized ? 'changed' : 'init';
-                    const event = new SyncEvent(`${state}:${et}`, {
-                        detail: { 
+                    const event = new SyncEvent(`${attr}:${et}`, {
+                        detail: {
                             target: this,
-                            value: v 
+                            value: value
                         }
                     });
                     (async () => {
@@ -906,7 +910,7 @@ var ful = (function (exports) {
                             return;
                         }
                         //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
-                        this.internals.states[v ? 'add' : 'delete'](`--${state}`);
+                        this.internals.states[value ? 'add' : 'delete'](`--${attr}`);
                     })();
                 }
             });
@@ -1094,8 +1098,7 @@ var ful = (function (exports) {
     };
 
     class Input extends ParsedElement({
-        states: [], 
-        attributes: ['value'],
+        observed: ['value'],
         slots: true,
         template: INPUT_TEMPLATE
     }){
@@ -1117,8 +1120,7 @@ var ful = (function (exports) {
      */
 
     class Select extends ParsedElement({
-        states: [], 
-        attributes: ["value"],
+        observed: ["value"],
         slots: true,
         template: `
         <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
@@ -1218,8 +1220,7 @@ var ful = (function (exports) {
     }
 
     class RadioGroup extends ParsedElement({
-        states: ['disabled'], 
-        attributes: ['value'],
+        observed: ['value', 'disabled:bool'],
         slots: true,
         template: `
         <fieldset>