1.0.20

- fix `zuix` build file caching error
- fix search page
- deprecated local *lib*, now using zKit *lib*

config/default.json

@@ -25,7 +25,7 @@
       ],
       "dataFolder": "_data",
       "includesFolder": "_inc",
-      "componentsFolders": [ "app", "lib" ],
+      "componentsFolders": [ "app" ],
       "contentFolder": "content",
       "dependencies": [{
         "zuix-dist/js": "js/zuix",
@@ -76,11 +76,10 @@
       "baseUrl": "/",
       "resourcePath": "{{ app.baseUrl }}app/",
       "libraryPath": {
-        "@lib": "{{ app.baseUrl }}lib/1.1/",
+        "@lib": "https://zuixjs.github.io/zkit/lib/1.2/",
         "@hgui": "https://genielabs.github.io/homegenie-web-ui/app/",
         "@cdnjs": "https://cdnjs.cloudflare.com/ajax/libs/"
-      },
-      "googleSiteId": "UA-123-456"
+      }
     }
   }
 }

config/production.json

@@ -25,7 +25,7 @@
       ],
       "dataFolder": "_data",
       "includesFolder": "_inc",
-      "componentsFolders": [ "app", "lib" ],
+      "componentsFolders": [ "app" ],
       "contentFolder": "content",
       "dependencies": [{
         "zuix-dist/js": "js/zuix",
@@ -62,12 +62,12 @@
       "baseUrl": "/web-app/",
       "resourcePath": "{{ app.baseUrl }}app/",
       "libraryPath": {
-        "@lib": "{{ app.baseUrl }}lib/1.1/",
+        "@lib": "https://zuixjs.github.io/zkit/lib/1.2/",
         "@hgui": "https://genielabs.github.io/homegenie-web-ui/app/",
         "@cdnjs": "https://cdnjs.cloudflare.com/ajax/libs/"
       },
       "siteMapUrl": "https://zuixjs.github.io{{ app.baseUrl }}",
-      "googleSiteId": "UA-123-456"
+      "googleSiteId": null
     }
   }
 }

docs/app/cms/zuix-editor/dialogs/create-component.html

@@ -16,15 +16,24 @@ <h2>Add component</h2>
             </label>
         </div>
 
-        <label class="primary" for="componentName">Component ID (path/name)</label>
-        <input #component-name type="text" placeholder="enter name" id="componentName" required>
+        <label class="primary" for="componentName">Component ID</label>
+        <input #component-name type="text" spellcheck="false"
+               (input)="normalizeName(this)"
+               placeholder="enter id" id="componentName" required>
+        <small style="max-width: 330px">
+            The <code>componentId</code> must be at least 3 characters long and
+            can contain only lower case letters, <code>-</code> and <code>/</code>.
+            <br>
+            &nbsp;&nbsp;<strong>e.g.:</strong>&nbsp;&nbsp; <em>layout/my-card</em>
+        </small>
+
         <div #error-message></div>
 
     </div>
 
     <div layout="row center-spread" class="footer">
         <button #cancel-btn class="button primary">Cancel</button>
-        <button @disable-if="componentName.value === '' || (!typeView.checked && !typeCtrl.checked)"
+        <button @disable-if="componentName.value.length < 3 || (!typeView.checked && !typeCtrl.checked)"
                 self="center" #add-btn class="button primary">Confirm</button>
     </div>
 
@@ -53,3 +62,11 @@ <h3>Load with:</h3>
     </div>
 
 </div>
+<script type="jscript">
+    function normalizeName(input) {
+      input.value = input.value
+        .toLowerCase()
+        .replace(/\s\s+/g, ' ')
+        .replace(/[^a-z0-9\-\/]/gi, '');
+    }
+</script>

docs/app/cms/zuix-editor/dialogs/create-component.js

@@ -65,7 +65,7 @@ function createComponentDialog(cp) {
   function createComponent() {
     const view = cp.field('type-view').checked();
     const ctrl = cp.field('type-ctrl').checked();
-    const name = zuix.utils.camelCaseToHyphens(cp.field('component-name').value().replace(/[^a-z0-9/\s]/gi, '_'));
+    const name = cp.field('component-name').value();
     let result;
     if (_browserSync) {
       result = _browserSync.socket.emit('zuix:addComponent', {

docs/config.js

@@ -7,12 +7,12 @@
     "baseUrl": "/web-app/",
     "resourcePath": "/web-app/app/",
     "libraryPath": {
-      "@lib": "/web-app/lib/1.1/",
+      "@lib": "https://zuixjs.github.io/zkit/lib/1.2/",
       "@hgui": "https://genielabs.github.io/homegenie-web-ui/app/",
       "@cdnjs": "https://cdnjs.cloudflare.com/ajax/libs/"
     },
-    "googleSiteId": "UA-123-456",
-    "siteMapUrl": "https://zuixjs.github.io/web-app/"
+    "siteMapUrl": "https://zuixjs.github.io/web-app/",
+    "googleSiteId": null
   });
   // Check that service workers are registered
   if ('serviceWorker' in navigator) {

docs/content/docs/index.html

@@ -731,7 +731,7 @@
 }
 .theme-dark [z-load*="/components/menu-overlay"] div[z-field="menu_overlay"] {
     background: radial-gradient(circle at bottom, black, #000000dd, #00000077, transparent)!important;
-}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" z-lazy="scroll" data-o-header="header" data-o-show-end="false" data-theme="indigo-pink" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><h1 self="size-x1" class="title">Documentation</h1></div></nav><main layout="column top-center"><h1 #alt_header="" class="title">Documentation</h1><div self="size-x1" class="content"><div layout="rows top-spread"><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Page options</h1><img #image="" src="https://picsum.photos/seed/docs=03/256/256" alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Front matter data, layout and other page options.</p><a #link.url="" href="/web-app/content/docs/page-options/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Components short codes</h1><img #image="" src="https://picsum.photos/seed/docs!zx-tags/256/256" alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Rendering zKit and custom components using zx short code</p><a #link.url="" href="/web-app/content/docs/zkit-components-tags/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Material Design components</h1><img #image="" src="https://picsum.photos/seed/docs=74/256/256" alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Rendering Material Design components using zx short code</p><a #link.url="" href="/web-app/content/docs/material-design-tags/"><span #link.title=""></span></a></div></div></div><div layout="rows center-spread" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><div>&nbsp;</div><div>&nbsp;</div></div><style>.navigation-image {
+}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" z-lazy="scroll" :header="'header'" :show-end="false" data-theme="indigo-pink" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><h1 self="size-x1" class="title">Documentation</h1></div></nav><main layout="column top-center"><h1 #alt_header="" class="title">Documentation</h1><div self="size-x1" class="content"><div layout="rows top-spread"><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Page options</h1><img #image="" src="https://picsum.photos/seed/docs=03/256/256" alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Front matter data, layout and other page options.</p><a #link.url="" href="/web-app/content/docs/page-options/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Components short codes</h1><img #image="" src="https://picsum.photos/seed/docs!zx-tags/256/256" alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Rendering zKit and custom components using zx short code</p><a #link.url="" href="/web-app/content/docs/zkit-components-tags/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Material Design components</h1><img #image="" src="https://picsum.photos/seed/docs=74/256/256" alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Rendering Material Design components using zx short code</p><a #link.url="" href="/web-app/content/docs/material-design-tags/"><span #link.title=""></span></a></div></div></div><div layout="rows center-spread" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><div>&nbsp;</div><div>&nbsp;</div></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }

docs/content/docs/material-design-tags/index.html

@@ -733,7 +733,7 @@
 }
 .theme-dark [z-load*="/components/menu-overlay"] div[z-field="menu_overlay"] {
     background: radial-gradient(circle at bottom, black, #000000dd, #00000077, transparent)!important;
-}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" z-lazy="scroll" data-o-header="header" data-o-show-end="false" data-theme="indigo-deep_purple" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><h1 self="size-x1" class="title">Material Design components</h1></div></nav><main layout="column top-center"><h1 #alt_header="" class="title">Material Design components</h1><div self="size-x1" class="content"><p>This web starter template includes <a href="https://getmdl.io/components/">Material Design Lite</a> components, implemented using <em>zuix.js</em>, and that can be also rendered using <code>zx</code> short code tags.<h2>Material Design tags</h2><p><a name="buttons"></a><h3><code>button</code></h3><p>Usage:<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> zx <span class="token string">'button'</span> <span class="token string">'&lt;link&gt;'</span> <span class="token punctuation">[</span><span class="token string">'&lt;type&gt;'</span> <span class="token punctuation">[</span><span class="token string">'&lt;classes&gt;'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span>
+}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" z-lazy="scroll" :header="'header'" :show-end="false" data-theme="indigo-deep_purple" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><h1 self="size-x1" class="title">Material Design components</h1></div></nav><main layout="column top-center"><h1 #alt_header="" class="title">Material Design components</h1><div self="size-x1" class="content"><p>This web starter template includes <a href="https://getmdl.io/components/">Material Design Lite</a> components, implemented using <em>zuix.js</em>, and that can be also rendered using <code>zx</code> short code tags.<h2>Material Design tags</h2><p><a name="buttons"></a><h3><code>button</code></h3><p>Usage:<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> zx <span class="token string">'button'</span> <span class="token string">'&lt;link&gt;'</span> <span class="token punctuation">[</span><span class="token string">'&lt;type&gt;'</span> <span class="token punctuation">[</span><span class="token string">'&lt;classes&gt;'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>content</span><span class="token punctuation">&gt;</span></span>
 <span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endzx <span class="token delimiter punctuation">%}</span></span></code></pre><p>Where <code>'&lt;type&gt;'</code> can be one of the following:<ul><li><code>flat</code><li><code>raised</code><li><code>fab</code></ul><p>and <code>'&lt;classes&gt;'</code> can be one of the following values:<ul><li><code>colored</code><li><code>accent</code><li><code>primary</code><li><code>mini-fab</code> (can be added only if <em>type</em> is <code>fab</code>)</ul><h4>Examples</h4><p>Basic button<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> zx <span class="token string">'button'</span> <span class="token string">'#test-link-1'</span> <span class="token delimiter punctuation">%}</span></span>
 Basic