v5.0.3

CHANGELOG.md

@@ -1,3 +1,9 @@
+### 5.0.3
++ [x] Improved counter with `useEffect`
++ [x] Improved `v-menu`
++ [x] Update core libs
++ [x] Added `grid2`
+
 ### 5.0.2
 + [x] Improved `d-menu`, fix interacts with other components (`treeview`, `sidenav-m3`, `app-bar`)
 

package.json

@@ -1,7 +1,7 @@
 {
   "author": "Serhii Pimenov <[email protected]>",
   "name": "@olton/metroui",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style",
   "keywords": [
     "metro",
@@ -71,12 +71,12 @@
     "shx": "^0.3.4"
   },
   "dependencies": {
-    "@olton/animation": "^0.2.0",
-    "@olton/color": "^1.0.0",
-    "@olton/datetime": "^3.0.3",
-    "@olton/hooks": "^0.2.0",
-    "@olton/html": "^0.7.0",
-    "@olton/string": "^0.4.4",
+    "@olton/animation": "^0.3.0",
+    "@olton/color": "^1.0.2",
+    "@olton/datetime": "^3.0.4",
+    "@olton/hooks": "^0.3.0",
+    "@olton/html": "^0.8.0",
+    "@olton/string": "^0.5.0",
     "m4q": "^2.0.0-rc7"
   }
 }

rollup.dev.mjs

@@ -7,7 +7,7 @@ import fs from "fs";
 import pkg from "./package.json" assert {type: "json"}
 
 const production = process.env.NODE_ENV === "production",
-    sourcemap = !production
+    sourcemap = !production, dev = !production
 
 const banner = `
 /*!
@@ -37,7 +37,7 @@ export default [
             }),
             postcss({
                 extract: true,
-                minimize: true,
+                minimize: production && true,
                 use: ['less'],
                 sourceMap: sourcemap,
                 plugins: [

source/animation/index.js

@@ -1,3 +1,3 @@
 import {Animation} from "@olton/animation";
 
-globalThis.Animation = Animation
+globalThis.Animation = Animation

source/color/index.js

@@ -1,4 +1,4 @@
-import {Color, Routines, Palette, StandardColorPalette, MetroColorPalette, Primitives} from "@olton/color"
+import {Color, Routines, Palette, StandardColorPalette, MetroColorPalette, Primitives, info} from "@olton/color"
 
 globalThis.Color = Color
 globalThis.color = c => new Color(c)
@@ -7,4 +7,5 @@ globalThis.Color.Routines = Routines
 globalThis.Color.Palette = Palette
 globalThis.Color.StandardColors = StandardColorPalette
 globalThis.Color.MetroColors = MetroColorPalette
-globalThis.Color.Primitives = Primitives
+globalThis.Color.Primitives = Primitives
+globalThis.Color.info = info

source/components/badges/badges.less

@@ -26,16 +26,20 @@
 .app-bar-item,
 .app-bar-menu > li > a,
 .h-menu > li > a,
-.d-menu > li > a,
-.v-menu > li > a,
-.t-menu > li > a
+.v-menu > li > a
 {
     .badge {
         .translateY(0);
         .translateX(0);
     }
 }
 
+.d-menu > li > a {
+    .badge {
+        transform: translateX(10px);
+    }
+}
+
 .badge {
     &.inline {
         position: relative;

source/components/container/container.less

@@ -20,10 +20,6 @@
     padding-left: 12px;
 }
 
-section {
-
-}
-
 @media (min-width: 360px) and (max-width: 576px) {
     .container {
         max-width: 98%;
@@ -48,25 +44,18 @@ section {
     }
 }
 
-@media (min-width: 1201px) and(max-width: 1452px) {
+@media (min-width: 1201px) {
     .container {
         max-width: 80%;
     }
 }
 
-@media (min-width: 1453px) {
-    .container {
-        max-width: 1360px;
+each(@media-rules, {
+    .container-@{key} {
+        max-width: @value!important;
     }
-}
-
-.generate-container-media-options(@mediaBreakpointListMobileLength);
-.generate-container-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
-    @m: extract(@mediaBreakpointListMobile, @i);
+})
 
-        .container-@{m} {
-            max-width: @@m!important;
-        }
-
-    .generate-container-media-options(@name, @i + 1);
-}
+.container-max {
+    width: 100%!important;
+}

source/components/counter/counter.js

@@ -41,44 +41,20 @@
         _create: function(){
             this._createEvents();
             this._fireEvent("counter-create");
-            this._run();
         },
 
         _createEvents: function(){
             var that = this, element = this.element, o = this.options;
 
-            $.window().on("scroll", function(){
-                if (o.startOnViewport === true && Utils.inViewport(element[0]) && !that.started) {
-                    that.start();
-                }
-            }, {ns: this.id})
-        },
-
-        _run: function(){
-            var element = this.element, o = this.options;
-
-            this.started = false;
-
-            if (o.startOnViewport !== true) {
-                this.start();
-            } else {
-                if (Utils.inViewport(element[0])) {
-                    this.start();
-                }
-            }
-        },
-
-        startInViewport: function(val, from){
-            var o = this.options;
-
-            if (Utils.isValue(from)) {
-                o.from = +from;
-            }
-
-            if (Utils.isValue(val)) {
-                o.value = +val;
+            if (o.startOnViewport) {
+                Hooks.useEffect({
+                    effect: ()=>{
+                        that.start()
+                    },
+                    target: that.elem,
+                    event: Hooks.USE_EFFECT_EVENTS.VIEWPORT
+                })
             }
-            this._run();
         },
 
         start: function(val, from){
@@ -131,8 +107,7 @@
         },
 
         destroy: function(){
-            $.window().off("scroll", {ns: this.id});
-            return this.element;
+            this.element.remove();
         }
     });
 }(Metro, m4q));

source/components/d-menu/d-menu.less

@@ -29,7 +29,7 @@
     --d-menu-border-radius: 4px;
 }
 
-.d-menu {
+.d-menu, .d-menu ul {
     position: absolute;
     float: left;
     width: auto;
@@ -40,6 +40,8 @@
     border-radius: 6px;
     padding: 4px 0;
     border: 1px solid var(--d-menu-border-color);
+    z-index: @zindex-dropdown;
+    box-shadow: 2px 2px 10px var(--d-menu-shadow-color);
 
     &.open {
         display: block!important;
@@ -51,10 +53,6 @@
     }
 }
 
-.d-menu {
-    z-index: @zindex-dropdown;
-}
-
 .d-menu {
     li, a {
         position: relative;
@@ -139,16 +137,7 @@
 }
 
 .d-menu {
-    box-shadow: 2px 2px 10px var(--d-menu-shadow-color);
-}
-
-.d-menu {
-    &.context {
-    }
-}
-
-.d-menu {
-    ul {
+    .d-menu, ul {
         position: absolute;
         left: calc(100% + 4px);
         top: 0;
@@ -157,7 +146,7 @@
 
 each(@media-rules, {
     @media screen and (min-width: @value) {
-        .d-menu {
+        .d-menu, .d-menu ul {
             &.place-right-@{key} {
                 left: auto;
                 right: 0;

source/components/dropdown/dropdown.js

@@ -64,10 +64,6 @@
 
             this.displayOrigin = Utils.getStyleOne(element, "display");
 
-            if (element.hasClass("v-menu")) {
-                element.addClass("for-dropdown");
-            }
-
             element.css("display", "none");
 
             this._toggle = toggle;

source/components/grid/grid-new.less

@@ -0,0 +1,50 @@
+@import (once) "../../include/vars";
+
+:root {
+    --grid-gutter: 16px;
+    --grid-cell-base: 8.333333%;
+}
+
+.grid2 {
+    display: flex;
+    flex-flow: column;
+}
+
+.grid2 {
+    .row {
+        display: flex;
+        flex-flow: row wrap;
+        gap: var(--grid-gutter);
+        justify-content: space-between;
+        border: 1px dotted black;
+    }
+
+    .row + .row {
+        margin-top: var(--grid-gutter);
+    }
+
+    [class*=cell-], [class*=col-]{
+        position: relative;
+        display: block;
+        padding: 0;
+        min-height: 1px;
+        flex: 0 0 100% ;
+        max-width: 100% ;
+    }
+
+    .no-gap {
+        --grid-gutter: 0px;
+    }
+
+    each(@media-rules2, {
+        @media screen and (min-width: @value) {
+            each(range(1, 12), .(@k) {
+                .cell-@{key}-@{k}, .col-@{key}-@{k} {
+                    flex: 0 0 calc( var(--grid-cell-base) * @k - var(--grid-gutter) ) ;
+                    max-width: calc( var(--grid-cell-base) * @k - var(--grid-gutter) ) ;
+                }
+            })
+        }
+    })
+}
+

source/components/grid/index.js

@@ -1,2 +1,2 @@
 import "./grid.less"
-// import "./grid-flex.less"
+import "./grid-new.less"

source/components/index.js

@@ -127,7 +127,6 @@ import "./timepicker/index.js"
 import "./toast/index.js"
 import "./tokenizer/index.js"
 import "./toolbar/index.js"
-import "./top-bar/index.js"
 import "./touch/index.js"
 import "./treeview/index.js"
 import "./v-menu/index.js"

source/components/sidenav-m3/sidenav-m3.less

@@ -90,13 +90,16 @@
         background-color: inherit;
         width: 100%;
         float: none;
+        border-radius: 0!important;
+        padding: 0;
+        margin: 0;
 
-        li {
+        li:not(:first-child) {
             border-top: 1px solid @borderColor;
         }
 
         a {
-            border-radius: 0;
+            border-radius: 0!important;
         }
     }
 }