regor 1.5.6 → 1.5.8

package/dist/regor.es2019.iife.js

@@ -1703,7 +1703,9 @@ var Regor = (() => {
         const contextAliasName = binder.__config.__builtInNames.contextAlias;
         const bindName = binder.__config.__builtInNames.bind;
         const definedProps = (_b = (_a = registeredComponent.props) == null ? void 0 : _a.map(camelize)) != null ? _b : [];
-        const getProps = (component2, capturedContext2) => {
+        const inheritedPropAttrs = [];
+        const isInheritableSpecialProp = (propName) => propName === "class" || propName === "style";
+        const getProps = (component2, capturedContext2, collectInheritedPropAttrs = false) => {
           const props = {};
           const hasContext = component2.hasAttribute(contextName);
           parser.__scoped(capturedContext2, () => {
@@ -1726,7 +1728,11 @@ var Regor = (() => {
             ]) {
               const value = component2.getAttribute(name);
               if (value === null) continue;
-              props[camelize(name)] = value;
+              const propName = camelize(name);
+              props[propName] = value;
+              if (collectInheritedPropAttrs && registeredComponent.inheritAttrs === true && isInheritableSpecialProp(propName)) {
+                inheritedPropAttrs.push({ name, value });
+              }
               component2.removeAttribute(name);
             }
             const map = binder.__directiveCollector.__collect(component2, false);
@@ -1738,6 +1744,11 @@ var Regor = (() => {
               );
               if (!propName) continue;
               if (name !== "." && name !== ":" && name !== bindName) continue;
+              if (collectInheritedPropAttrs && name !== "." && registeredComponent.inheritAttrs === true && isInheritableSpecialProp(propName)) {
+                const value = component2.getAttribute(attrName);
+                if (value !== null)
+                  inheritedPropAttrs.push({ name: attrName, value });
+              }
               binder.__bind(
                 singlePropDirective,
                 component2,
@@ -1753,7 +1764,7 @@ var Regor = (() => {
         const capturedContext = [...parser.__capture()];
         const createComponentCtx = () => {
           var _a2;
-          const props = getProps(component, capturedContext);
+          const props = getProps(component, capturedContext, true);
           const head2 = new ComponentHead(
             props,
             component,
@@ -1913,25 +1924,47 @@ var Regor = (() => {
             );
           const inheritor = inheritorChildNodes[0];
           if (!inheritor) return;
-          for (const attrName of component.getAttributeNames()) {
-            if (attrName === contextName || attrName === contextAliasName)
-              continue;
-            const value = component.getAttribute(attrName);
+          const bindClassName = `${bindName}:class`;
+          const bindStyleName = `${bindName}:style`;
+          const mergeBinding = (shortName, longName, value) => {
+            const existingAttr = inheritor.hasAttribute(shortName) ? shortName : inheritor.hasAttribute(longName) ? longName : shortName;
+            const existingValue = inheritor.getAttribute(existingAttr);
+            inheritor.setAttribute(
+              existingAttr,
+              isNullOrWhitespace(existingValue) ? value : `${existingValue}, ${value}`
+            );
+          };
+          const transferAttribute = (attrName, value) => {
             if (attrName === "class") {
               const classTokens = toClassTokens(value);
               if (classTokens.length > 0) inheritor.classList.add(...classTokens);
+            } else if (attrName === ":class" || attrName === bindClassName) {
+              mergeBinding(":class", bindClassName, value);
             } else if (attrName === "style") {
               const inheritorStyle = inheritor.style;
               const componentStyle = component.style;
               for (const s of componentStyle) {
                 inheritorStyle.setProperty(s, componentStyle.getPropertyValue(s));
               }
+            } else if (attrName === ":style" || attrName === bindStyleName) {
+              mergeBinding(":style", bindStyleName, value);
             } else {
               inheritor.setAttribute(
                 normalizeAttributeName(attrName, binder.__config),
                 value
               );
             }
+          };
+          for (const { name, value } of inheritedPropAttrs) {
+            component.setAttribute(name, value);
+          }
+          for (const attrName of component.getAttributeNames()) {
+            if (attrName === contextName || attrName === contextAliasName)
+              continue;
+            transferAttribute(
+              attrName,
+              component.getAttribute(attrName)
+            );
           }
         };
         const clearUnusedAttributes = () => {
@@ -3334,30 +3367,34 @@ var Regor = (() => {
     })
   };
   var patchClass = (el, next, prev) => {
+    const nextValue = unref(next);
+    const prevValue = unref(prev);
     const classList = el.classList;
-    const isClassString = isString(next);
-    const isPrevClassString = isString(prev);
-    if (next && !isClassString) {
-      if (prev && !isPrevClassString) {
-        for (const key in prev) {
-          if (!(key in next) || !next[key]) {
+    const isClassString = isString(nextValue);
+    const isPrevClassString = isString(prevValue);
+    if (nextValue && !isClassString) {
+      const nextMap = nextValue;
+      if (prevValue && !isPrevClassString) {
+        const prevMap = prevValue;
+        for (const key in prevMap) {
+          if (!(key in nextMap) || !unref(nextMap[key])) {
             classList.remove(key);
           }
         }
       }
-      for (const key in next) {
-        if (next[key]) classList.add(key);
+      for (const key in nextMap) {
+        if (unref(nextMap[key])) classList.add(key);
       }
     } else {
       if (isClassString) {
-        if (prev !== next) {
-          const prevTokens = isPrevClassString ? toClassTokens(prev) : [];
-          const nextTokens = toClassTokens(next);
+        if (prevValue !== nextValue) {
+          const prevTokens = isPrevClassString ? toClassTokens(prevValue) : [];
+          const nextTokens = toClassTokens(nextValue);
           if (prevTokens.length > 0) classList.remove(...prevTokens);
           if (nextTokens.length > 0) classList.add(...nextTokens);
         }
-      } else if (prev) {
-        const prevTokens = isPrevClassString ? toClassTokens(prev) : [];
+      } else if (prevValue) {
+        const prevTokens = isPrevClassString ? toClassTokens(prevValue) : [];
         if (prevTokens.length > 0) classList.remove(...prevTokens);
       }
     }
@@ -4034,26 +4071,30 @@ var Regor = (() => {
     })
   };
   var patchStyle = (el, next, prev) => {
+    const nextValue = unref(next);
+    const prevValue = unref(prev);
     const style = el.style;
-    const isCssString = isString(next);
-    if (next && !isCssString) {
-      if (prev && !isString(prev)) {
-        for (const key in prev) {
-          if (next[key] == null) {
+    const isCssString = isString(nextValue);
+    if (nextValue && !isCssString) {
+      const nextMap = nextValue;
+      if (prevValue && !isString(prevValue)) {
+        const prevMap = prevValue;
+        for (const key in prevMap) {
+          if (unref(nextMap[key]) == null) {
             setStyle(style, key, "");
           }
         }
       }
-      for (const key in next) {
-        setStyle(style, key, next[key]);
+      for (const key in nextMap) {
+        setStyle(style, key, nextMap[key]);
       }
     } else {
       const currentDisplay = style.display;
       if (isCssString) {
-        if (prev !== next) {
-          style.cssText = next;
+        if (prevValue !== nextValue) {
+          style.cssText = nextValue;
         }
-      } else if (prev) {
+      } else if (prevValue) {
         el.removeAttribute("style");
       }
       const data = getBindData(el).data;
@@ -4063,24 +4104,25 @@ var Regor = (() => {
   };
   var importantRE = /\s*!important$/;
   function setStyle(style, name, val) {
-    if (isArray(val)) {
-      val.forEach((v) => {
+    const value = unref(val);
+    if (isArray(value)) {
+      value.forEach((v) => {
         setStyle(style, name, v);
       });
     } else {
-      if (val == null) val = "";
+      const cssValue = value == null ? "" : String(value);
       if (name.startsWith("--")) {
-        style.setProperty(name, val);
+        style.setProperty(name, cssValue);
       } else {
         const prefixed = autoPrefix(style, name);
-        if (importantRE.test(val)) {
+        if (importantRE.test(cssValue)) {
           style.setProperty(
             hyphenate(prefixed),
-            val.replace(importantRE, ""),
+            cssValue.replace(importantRE, ""),
             "important"
           );
         } else {
-          style[prefixed] = val;
+          style[prefixed] = cssValue;
         }
       }
     }