regor 1.5.6 → 1.5.8

package/dist/regor.es2019.esm.js

@@ -1635,7 +1635,9 @@ var ComponentBinder = class {
       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, () => {
@@ -1658,7 +1660,11 @@ var ComponentBinder = class {
           ]) {
             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);
@@ -1670,6 +1676,11 @@ var ComponentBinder = class {
             );
             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,
@@ -1685,7 +1696,7 @@ var ComponentBinder = class {
       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,
@@ -1845,25 +1856,47 @@ var ComponentBinder = class {
           );
         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 = () => {
@@ -3266,30 +3299,34 @@ var classDirective = {
   })
 };
 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);
     }
   }
@@ -3966,26 +4003,30 @@ var styleDirective = {
   })
 };
 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;
@@ -3995,24 +4036,25 @@ var patchStyle = (el, next, prev) => {
 };
 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;
       }
     }
   }