Upgraded to zuix.js 1.1.26

docs/feed/rss.xml

@@ -7,8 +7,8 @@
     <description></description>
     <language>en</language>
     <copyright></copyright>
-    <lastBuildDate>Tue, 09 May 2023 08:38:39 +0200</lastBuildDate>
-    <pubDate>Tue, 09 May 2023 08:38:39 +0200</pubDate>
+    <lastBuildDate>Sun, 14 May 2023 18:08:06 +0200</lastBuildDate>
+    <pubDate>Sun, 14 May 2023 18:08:06 +0200</pubDate>
     <image>
         <title>Web Starter</title>
         <url>https://zuixjs.github.io/zuix-web-starter//images/icons/icon-152x152.png</url>
@@ -19,7 +19,7 @@
         <link>https://zuixjs.github.io/zuix-web-starter//</link>
         <guid isPermaLink="true">https://zuixjs.github.io/zuix-web-starter//</guid>
         <description>About this web starter and how to get started with it.</description>
-        <pubDate>Tue, 09 May 2023 08:38:39 +0200</pubDate>
+        <pubDate>Sun, 14 May 2023 18:08:06 +0200</pubDate>
         <atom:link href="https://zuixjs.github.io/zuix-web-starter//" rel="self" />
         <dc:creator></dc:creator>
     </item>
@@ -28,7 +28,7 @@
         <link>https://zuixjs.github.io/zuix-web-starter//search/</link>
         <guid isPermaLink="true">https://zuixjs.github.io/zuix-web-starter//search/</guid>
         <description>Search this website</description>
-        <pubDate>Tue, 09 May 2023 08:38:39 +0200</pubDate>
+        <pubDate>Sun, 14 May 2023 18:08:06 +0200</pubDate>
         <atom:link href="https://zuixjs.github.io/zuix-web-starter//search/" rel="self" />
         <dc:creator></dc:creator>
     </item>
@@ -63,7 +63,7 @@
         <link>https://zuixjs.github.io/zuix-web-starter//content/docs/</link>
         <guid isPermaLink="true">https://zuixjs.github.io/zuix-web-starter//content/docs/</guid>
         <description>No description provided.</description>
-        <pubDate>Tue, 09 May 2023 08:38:39 +0200</pubDate>
+        <pubDate>Sun, 14 May 2023 18:08:06 +0200</pubDate>
         <atom:link href="https://zuixjs.github.io/zuix-web-starter//content/docs/" rel="self" />
         <dc:creator></dc:creator>
     </item>

docs/js/zuix/zuix-bundler.js

@@ -1,4 +1,4 @@
-/* zuix.js v1.1.24 23.05.06 19:59:07 */
+/* zuix.js v1.1.26 23.05.13 23:23:08 */
 
 var zuix;
 /******/ (function() { // webpackBootstrap

docs/js/zuix/zuix-bundler.module.js

@@ -1,4 +1,4 @@
-/* zuix.js v1.1.24 23.05.06 19:59:07 */
+/* zuix.js v1.1.26 23.05.13 23:23:08 */
 
 /******/ var __webpack_modules__ = ({
 

docs/js/zuix/zuix.js

@@ -1,4 +1,4 @@
-/* zuix.js v1.1.24 23.05.06 19:59:07 */
+/* zuix.js v1.1.26 23.05.13 23:23:08 */
 
 var zuix;
 /******/ (function() { // webpackBootstrap
@@ -2860,7 +2860,7 @@ ComponentContext.prototype.dispose = function() {
   this._viewObserver.stop();
 
   // only remove style if component's view is a ShadowRoot
-  const shadowRoot = util.dom.getShadowRoot(this._view);
+  const shadowRoot = util.dom.getShadowRoot(this._container || this._view);
   if (shadowRoot) {
     this.style(null);
   }
@@ -3181,7 +3181,7 @@ ComponentContext.prototype.style = function(css) {
   if (typeof css === 'undefined') return this._style;
   const cssId = this.getCssId();
   _log.t(this.componentId, 'view:style', 'timer:view:start', cssId);
-  const shadowRoot = util.dom.getShadowRoot(this._view);
+  const shadowRoot = util.dom.getShadowRoot(this._container || this._view);
   if (css == null || css instanceof Element) {
     this._css = (css instanceof Element) ? css.innerText : css;
     this._style = z$.appendCss(css, this._style, this.componentId + '@' + cssId, shadowRoot);
@@ -3674,7 +3674,7 @@ ComponentContext.prototype.modelToView = function() {
 ComponentContext.prototype.getCssId = function() {
   let override = '';
   if (this.componentId === 'default' ||
-      (typeof this._options.css === 'string' && !util.dom.getShadowRoot(this._view))) {
+      (typeof this._options.css === 'string' && util.dom.getShadowRoot(this._container || this._view) === false)) {
     override = '_' + this.contextId;
   }
   return _optionAttributes.cssIdPrefix + getComponentIndex(this) + override;
@@ -4149,9 +4149,9 @@ function loadInline(element, opts) {
         // Seek parentContext if any
         let parentContext = null;
         if (v.parent().get() instanceof ShadowRoot) {
-          parentContext = options.__shadowRoot.parent(`[${_optionAttributes.zContext}]`);
+          parentContext = options.__shadowRoot.parent(`[${_optionAttributes.zReady}="true"]`);
         } else {
-          parentContext = v.parent(`[${_optionAttributes.zContext}]`);
+          parentContext = v.parent(`[${_optionAttributes.zReady}="true"]`);
         }
         parentContext = zuix.context(parentContext);
         try {
@@ -4680,7 +4680,7 @@ ContextController.prototype.addTransition = function(className, properties, opti
       className,
       properties,
       options,
-      util.dom.getShadowRoot(this.context.view())
+      util.dom.getShadowRoot(this.context.container() || this.context.view())
   );
   return this;
 };
@@ -4797,8 +4797,9 @@ ContextController.prototype.trigger = function(eventPath, eventData, isHook) {
     this.context
         .trigger(this.context, eventPath, eventData);
   } else {
-    this.view()
-        .trigger(eventPath, eventData);
+    const sv = this.options().__shadowRoot;
+    if (sv) sv.trigger(eventPath, eventData);
+    this.view().trigger(eventPath, eventData);
   }
   return this;
 };
@@ -5707,7 +5708,7 @@ function loadResources(ctx, options) {
       }
       if (options.css !== false && typeof options.css !== 'string') {
         options.css = false;
-        const shadowRoot = util.dom.getShadowRoot(ctx.view());
+        const shadowRoot = util.dom.getShadowRoot(ctx.container() || ctx.view());
         if (!cachedComponent.css_applied || shadowRoot) {
           cachedComponent.css_applied = true;
           ctx.style(cachedComponent.css);
@@ -6365,7 +6366,7 @@ function initController(ctrl) {
       let refreshHandler = ctx._refreshHandler;
       // allocate refresh handler on the first "paint" request
       if (!refreshHandler) {
-        const scriptHeader = 'return (function($this, context, args){const $ = context.$; const model = context.model(); ';
+        const scriptHeader = 'return (function($this, context, args){const $ = context.$; const model = context.model(); const trigger = (ep, ed) => context._c.trigger(ep, ed); ';
         let code = '"use strict"; expose = {}; ';
 
         // add local vars from fields
@@ -6375,7 +6376,7 @@ function initController(ctrl) {
             code += 'const $' + f + ' = context["#"].' + f + ';';
             code += 'const ' + f + ' = $' + f + '.get();';
             code += 'let _' + f + ' = null; zuix.context(' + f + ', function(c) { _' + f + ' = c; });';
-            code += 'new MutationObserver((a,b) => { zuix.context(' + f + ', function(c) { _' + f + ' = c; });}).observe(' + f + ',{attributes:true,attributeFilter: ["shadow"]});';
+            code += 'if (' + f + ') new MutationObserver((a,b) => { zuix.context(' + f + ', function(c) { _' + f + ' = c; });}).observe(' + f + ',{attributes:true,attributeFilter: ["shadow"]});';
           });
         }
         // add explicit local vars defined via {ContextController}.declare(...)
@@ -6904,8 +6905,9 @@ Zuix.prototype.using = function(resourceType, resourcePath, callback, ctx) {
       }
     } else {
       const isCss = (resourceType === 'style');
-      if (z$.find(resourceType + '[id="' + hashId + '"]').length() === 0) {
-        const container = isCss && ctx ? util.dom.getShadowRoot(ctx.view()) : null;
+      const shadowRoot = (isCss && ctx && util.dom.getShadowRoot(ctx.container() || ctx.view()));
+      const container = shadowRoot || undefined;
+      if (z$(container).find(resourceType + '[id="' + hashId + '"]').length() === 0) {
         const head = container || document.head || document.getElementsByTagName('head')[0];
         const resource = document.createElement(resourceType);
         if (isCss) {
@@ -6921,6 +6923,7 @@ Zuix.prototype.using = function(resourceType, resourcePath, callback, ctx) {
         const addResource = (text) => {
           // TODO: add logging
           if (isCss) {
+            if (shadowRoot) text = text.replace(/:root/g, ':host');
             if (resource.styleSheet) {
               resource.styleSheet.cssText = text;
             } else {