@andreyshpigunov/x 0.4.0 → 0.4.1

package/index.html

@@ -19,7 +19,7 @@
   "functionName": "headerAnimation"
 }'>
   <header class="header flex aic sticky t0 px5 m:px6 l:px8 unselectable">
-    <div class="header-version nowrap">0.4.0</div>
+    <div class="header-version nowrap">0.4.1</div>
     <div class="header-logo mxa">
       <a role="button" x-scrollto="#top">
         <img src="assets/img/logo.png" alt="x" />
@@ -234,27 +234,27 @@
               });
 
               x.form.onUpdate('[name=exampleSelect]', (el) => {
-                qs('[name=exampleSelectValue]').value = el.value;
-                qs('#radio' + el.value).checked = true;
+                x.qs('[name=exampleSelectValue]').value = el.value;
+                x.qs('#radio' + el.value).checked = true;
               });
 
               x.form.onUpdate('[name=exampleSelectValue]', (el) => {
                 var val = ['', '1', '2', '3'].includes(el.value) ? el.value : 1;
                 el.value = val;
-                qs('[name=exampleSelect]').value = val;
+                x.qs('[name=exampleSelect]').value = val;
                 // Reset radio buttons
-                let radio = qsa('[name=exampleSelectRadio]');
+                let radio = x.qsa('[name=exampleSelectRadio]');
                 for (let rad of radio) rad.checked = false;
                 // Select radio button
-                if (el.value != '') qs('#radio' + el.value).checked = true;
+                if (el.value != '') x.qs('#radio' + el.value).checked = true;
               });
 
-              let radio = qsa('[name=exampleSelectRadio]');
+              let radio = x.qsa('[name=exampleSelectRadio]');
               for (let rad of radio) {
                 x.form.onUpdate(rad, (el) => {
-                  let val = qs('[name=exampleSelectRadio]:checked').value;
-                  qs('[name=exampleSelect]').value = el.value;
-                  qs('[name=exampleSelectValue]').value = el.value;
+                  let val = x.qs('[name=exampleSelectRadio]:checked').value;
+                  x.qs('[name=exampleSelect]').value = el.value;
+                  x.qs('[name=exampleSelectValue]').value = el.value;
                 });
               }
 
@@ -265,8 +265,8 @@
               x.form.onUpdate(fields, calc);
 
               function calc() {
-                let val1 = qs('[name=exampleVal1]').value || 0;
-                let val2 = qs('[name=exampleVal2]').value || 0;
+                let val1 = x.qs('[name=exampleVal1]').value || 0;
+                let val2 = x.qs('[name=exampleVal2]').value || 0;
                 let sum = parseInt(val1) + parseInt(val2);
                 x.form.setValue('[name=exampleSum]', sum);
               }
@@ -370,7 +370,7 @@
               }
 
               libExample();
-              qs('.jsLibExampleUpdate').addEventListener('click', libExample);
+              x.qs('.jsLibExampleUpdate').addEventListener('click', libExample);
             })
           </script>
         </div>
@@ -830,7 +830,7 @@
       <h3>Project on GitHub</h3>
       <p><a href="https://github.com/andreyshpigunov/x">https://github.com/andreyshpigunov/x</a></p>
       <hr class="my7" />
-      
+
       <p><a href="https://andreyshpigunov.github.io/x/cheatsheet.html">CSS cheatsheet</a></p>
     </div>
   </section>
@@ -2040,8 +2040,8 @@ a.link--wavy</pre>
     <h3>Шорткаты</h3>
 
     <div class="codeBlock">
-      <code>qs: (s, o = document) => o.querySelector(s)</code>
-      <code>qsa: (s, o = document) => o.querySelectorAll(s)</code>
+      <code>x.qs: (s, o = document) => o.querySelector(s)</code>
+      <code>x.qsa: (s, o = document) => o.querySelectorAll(s)</code>
     </div>
 
     <p>Пример использования:</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andreyshpigunov/x",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "x-js": "dist/x.js",
   "app-js": "assets/js/app.js",
   "targets": {

package/src/components/x/buttons.css

@@ -233,10 +233,8 @@ All right reserved.
 /* Dropdown button */
 
 .button--dropdown {
-  padding-right: calc(var(
-    --button-side-padding,
-    calc(var(--button-font-size) * var(--button-side-padding-coeff)
-  )) * 1.8);
+  --var: calc(var(--button-font-size) * var(--button-side-padding-coeff));
+  padding-right: calc(var(--button-side-padding, --var) * 1.8);
 
   &::after {
     content: '';

package/src/css/app.css

@@ -78,130 +78,130 @@ All right reserved.
 
 
 .header {
-    z-index: 100;
-    height: 100px;
-    will-change: height;
-    
-    @media (min-width: 768px) {
-        height: 120px;
-    }
+  z-index: 100;
+  height: 100px;
+  will-change: height;
+  
+  @media (min-width: 768px) {
+      height: 120px;
+  }
 }
 .header_compact {
     
 }
 .header-version {
-    width: 40px;
-    font-weight: 700;
+  width: 40px;
+  font-weight: 700;
 }
 .header-logo {
-    transform-origin: top;
+  transform-origin: top;
+  
+  & a {
+    display: block;
+  }
+  & img {
+    max-width: 100px;
+    will-change: transform;
     
-    & a {
-        display: block;
-    }
-    & img {
-        max-width: 100px;
-        will-change: transform;
-        
-        @media (min-width: 768px) {
-            max-width: 120px;
-        }
+    @media (min-width: 768px) {
+      max-width: 120px;
     }
+  }
 }
 .header-github {
-    & a {
-        display: block;
-        width: 40px;
-        height: 40px;
-        background-position: center;
-        background-size: cover;
-        background-image: url(/assets/img/github-mark.png);
-
-        @media (prefers-color-scheme: dark) {
-            background-image: url(/assets/img/github-mark-white.png);
-        }
+  & a {
+    display: block;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../img/github-mark.png);
+
+    @media (prefers-color-scheme: dark) {
+      background-image: url(../img/github-mark-white.png);
     }
+  }
 }
 
 .modalNavigation {
-    z-index: 10;
+  z-index: 10;
 }
 .modalNavigation-inner {
-    display: flex;
-    gap: 10px;
-    padding: 10px 0;
+  display: flex;
+  gap: 10px;
+  padding: 10px 0;
 }
 .modalNavigation a {
-    cursor: pointer;
-    padding: 4px 14px;
-    color: #000;
-    background: #fff;
-    border: solid 1px #000;
-    border-radius: 100px;
+  cursor: pointer;
+  padding: 4px 14px;
+  color: #000;
+  background: #fff;
+  border: solid 1px #000;
+  border-radius: 100px;
+  
+  &.active {
+    color: #fff;
+    background: #000;
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    color: #eee;
+    background: #222;
+    border: solid 1px #222;
     
     &.active {
-        color: #fff;
-        background: #000;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-        color: #eee;
-        background: #222;
-        border: solid 1px #222;
-        
-        &.active {
-            color: #000;
-            background: #fff;
-        }
+      color: #000;
+      background: #fff;
     }
+  }
 }
 
 
 code {
-    padding: 2px;
-    font-size: var(--code-font-size);
-    color: var(--code-font-color);
-    background: var(--code-background-color);
+  padding: 2px;
+  font-size: var(--code-font-size);
+  color: var(--code-font-color);
+  background: var(--code-background-color);
 }
 .codeBlock {
-    position: relative;
-    padding: 16px 20px 16px 10px;
-    background: var(--code-background-color);
-    counter-reset: row 0;
-    border-radius: 8px;
+  position: relative;
+  padding: 16px 20px 16px 10px;
+  background: var(--code-background-color);
+  counter-reset: row 0;
+  border-radius: 8px;
+  
+  &:before {
+    content: '</>';
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    letter-spacing: 1px;
+    line-height: 1;
+    font-weight: 500;
+    font-size: 18px;
+    font-family: var(--font-family-mono);
+    color: #ccc;
+  }
+  
+  & code {
+    display: flex;
+    counter-increment: row 1;
+    line-height: 1.4;
     
     &:before {
-        content: '</>';
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        letter-spacing: 1px;
-        line-height: 1;
-        font-weight: 500;
-        font-size: 18px;
-        font-family: var(--font-family-mono);
-        color: #ccc;
-    }
-    
-    & code {
-        display: flex;
-        counter-increment: row 1;
-        line-height: 1.4;
-        
-        &:before {
-            content: counter(row);
-            user-select: none;
-            width: 30px;
-            margin-right: 20px;
-            color: #ccc;
-            text-align: right;
-        }
+      content: counter(row);
+      user-select: none;
+      width: 30px;
+      margin-right: 20px;
+      color: #ccc;
+      text-align: right;
     }
+  }
 }
 
 .button code {
-    color: inherit;
-    background: inherit;
+  color: inherit;
+  background: inherit;
 }
 
 

package/src/js/app.js

@@ -33,8 +33,8 @@ window.headerAnimation = (params) => {
   // console.log(x.device.size.s);
   let _height = 100;
   // console.log(_height);
-  let header = qs('.header');
-  let headerLogo = qs('.header-logo img');
+  let header = x.qs('.header');
+  let headerLogo = x.qs('.header-logo img');
   let height = _height - params.progress * _height / 2;
   let scale = 1 - params.progress * 0.5;
   header.style.height = height + 'px';
@@ -44,4 +44,4 @@ window.headerAnimation = (params) => {
 
 window.onload = () => {
   x.lib.transitionsOn()
-}
+}