cx 25.4.1 → 25.5.1

package/src/widgets/nav/LinkButton.js

@@ -1,128 +1,128 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Button } from "../Button";
-import { History } from "../../ui/app/History";
-import { Url } from "../../ui/app/Url";
-import { routeAppend } from "../../util/routeAppend";
-import { parseStyle } from "../../util/parseStyle";
-
-export class LinkButton extends Button {
-   init() {
-      this.activeStyle = parseStyle(this.activeStyle);
-      this.inactiveStyle = parseStyle(this.inactiveStyle);
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            href: undefined,
-            url: undefined,
-            target: undefined,
-            active: undefined,
-            activeClass: undefined,
-            activeStyle: undefined,
-            inactiveClass: undefined,
-            inactiveStyle: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      data.unresolvedHref = data.href;
-
-      if (typeof data.href === "string") {
-         if (data.unresolvedHref[0] === "+")
-            data.unresolvedHref = routeAppend(context.lastRoute.reverse(), data.href.substring(1));
-
-         data.href = Url.resolve(data.unresolvedHref);
-      }
-
-      let active = this.isActive(data);
-
-      data.stateMods = {
-         disabled: data.disabled,
-         active,
-      };
-
-      super.prepareData(context, instance);
-
-      if (active) {
-         if (data.activeClass) data.classNames += " " + data.activeClass;
-         if (data.activeStyle)
-            data.style = {
-               ...data.style,
-               ...parseStyle(data.activeStyle),
-            };
-      } else {
-         if (data.inactiveClass) data.classNames += " " + data.inactiveClass;
-         if (data.inactiveStyle)
-            data.style = {
-               ...data.style,
-               ...parseStyle(data.inactiveStyle),
-            };
-      }
-   }
-
-   isActive(data) {
-      if (data.active != null) return data.active;
-
-      switch (this.match) {
-         default:
-         case "equal":
-            return data.url === data.unresolvedHref;
-
-         case "prefix":
-            return data.url && data.unresolvedHref && data.url.indexOf(data.unresolvedHref) === 0;
-
-         case "subroute":
-            return (
-               data.url &&
-               data.unresolvedHref &&
-               data.url.indexOf(data.unresolvedHref) === 0 &&
-               (data.url === data.unresolvedHref || data.url[data.unresolvedHref.length] === "/")
-            );
-      }
-   }
-
-   attachProps(context, instance, props) {
-      props.onClick = (ev) => {
-         this.handleClick(ev, instance);
-      };
-      super.attachProps(context, instance, props);
-      props.href = instance.data.href;
-      delete props.active;
-      delete props.activeClass;
-      delete props.activeStyle;
-      delete props.inactiveClass;
-      delete props.inactiveStyle;
-   }
-
-   isValidHtmlAttribute(attr) {
-      if (attr === "url" || attr === "match") return false;
-      return super.isValidHtmlAttribute(attr);
-   }
-
-   handleClick(e, instance) {
-      let { data } = instance;
-
-      if (data.disabled) {
-         e.preventDefault();
-         return;
-      }
-
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
-
-      if (data.href && Url.isLocal(data.href) && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
-         e.preventDefault();
-         History.pushState({}, null, data.href);
-      }
-   }
-}
-
-LinkButton.prototype.match = "equal";
-LinkButton.prototype.tag = "a";
-
-Widget.alias("link-button", LinkButton);
+import { Widget, VDOM } from "../../ui/Widget";
+import { Button } from "../Button";
+import { History } from "../../ui/app/History";
+import { Url } from "../../ui/app/Url";
+import { routeAppend } from "../../util/routeAppend";
+import { parseStyle } from "../../util/parseStyle";
+
+export class LinkButton extends Button {
+   init() {
+      this.activeStyle = parseStyle(this.activeStyle);
+      this.inactiveStyle = parseStyle(this.inactiveStyle);
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            href: undefined,
+            url: undefined,
+            target: undefined,
+            active: undefined,
+            activeClass: undefined,
+            activeStyle: undefined,
+            inactiveClass: undefined,
+            inactiveStyle: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+
+      data.unresolvedHref = data.href;
+
+      if (typeof data.href === "string") {
+         if (data.unresolvedHref[0] === "+")
+            data.unresolvedHref = routeAppend(context.lastRoute.reverse(), data.href.substring(1));
+
+         data.href = Url.resolve(data.unresolvedHref);
+      }
+
+      let active = this.isActive(data);
+
+      data.stateMods = {
+         disabled: data.disabled,
+         active,
+      };
+
+      super.prepareData(context, instance);
+
+      if (active) {
+         if (data.activeClass) data.classNames += " " + data.activeClass;
+         if (data.activeStyle)
+            data.style = {
+               ...data.style,
+               ...parseStyle(data.activeStyle),
+            };
+      } else {
+         if (data.inactiveClass) data.classNames += " " + data.inactiveClass;
+         if (data.inactiveStyle)
+            data.style = {
+               ...data.style,
+               ...parseStyle(data.inactiveStyle),
+            };
+      }
+   }
+
+   isActive(data) {
+      if (data.active != null) return data.active;
+
+      switch (this.match) {
+         default:
+         case "equal":
+            return data.url === data.unresolvedHref;
+
+         case "prefix":
+            return data.url && data.unresolvedHref && data.url.indexOf(data.unresolvedHref) === 0;
+
+         case "subroute":
+            return (
+               data.url &&
+               data.unresolvedHref &&
+               data.url.indexOf(data.unresolvedHref) === 0 &&
+               (data.url === data.unresolvedHref || data.url[data.unresolvedHref.length] === "/")
+            );
+      }
+   }
+
+   attachProps(context, instance, props) {
+      props.onClick = (ev) => {
+         this.handleClick(ev, instance);
+      };
+      super.attachProps(context, instance, props);
+      props.href = instance.data.href;
+      delete props.active;
+      delete props.activeClass;
+      delete props.activeStyle;
+      delete props.inactiveClass;
+      delete props.inactiveStyle;
+   }
+
+   isValidHtmlAttribute(attr) {
+      if (attr === "url" || attr === "match") return false;
+      return super.isValidHtmlAttribute(attr);
+   }
+
+   handleClick(e, instance) {
+      let { data } = instance;
+
+      if (data.disabled) {
+         e.preventDefault();
+         return;
+      }
+
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      if (data.href && Url.isLocal(data.href) && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
+         e.preventDefault();
+         History.pushState({}, null, data.href);
+      }
+   }
+}
+
+LinkButton.prototype.match = "equal";
+LinkButton.prototype.tag = "a";
+
+Widget.alias("link-button", LinkButton);

package/src/widgets/nav/Menu.scss

@@ -1,74 +1,74 @@
-@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      @include cx-add-state-rules($state-style-map, default);
-
-      &.#{$state}horizontal {
-         white-space: nowrap;
-
-         & > .#{$element}#{$name}-item {
-            display: inline-block;
-            user-select: none;
-
-            @each $size, $value in $cx-menu-padding-options {
-               &.#{$state}size-#{$size} > .#{$mod}#{$name} {
-                  margin: 0 cx-right($value) 0 cx-left($value);
-               }
-            }
-         }
-      }
-
-      @each $size, $value in $cx-menu-padding-options {
-         &.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
-            margin: $value;
-            display: block;
-         }
-      }
-
-      .#{$element}#{$name}-item {
-         & > hr {
-            border: none;
-            border-top: 1px solid $cx-default-menu-separator-color;
-            margin: map-get($cx-menu-padding-options, medium);
-         }
-
-         &.#{$state}hidden {
-            visibility: hidden;
-            position: absolute;
-         }
-      }
-
-      &.#{$state}overflow {
-         overflow: hidden;
-         display: flex;
-
-         & > .#{$element}#{$name}-item:last-child {
-            visibility: hidden;
-            position: absolute;
-            max-height: 100%;
-         }
-
-         &.#{$state}pack > .#{$element}#{$name}-item:last-child {
-            visibility: visible;
-            position: relative;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-spacer {
-      flex: 1 1 0%;
-   }
-}
-
-@if (cx-should-include("cx/widgets/Menu")) {
-   @include cx-menu();
-}
+@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $besm: $cx-besm) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+      &.#{$state}horizontal {
+         white-space: nowrap;
+
+         & > .#{$element}#{$name}-item {
+            display: inline-block;
+            user-select: none;
+
+            @each $size, $value in $cx-menu-padding-options {
+               &.#{$state}size-#{$size} > .#{$mod}#{$name} {
+                  margin: 0 cx-right($value) 0 cx-left($value);
+               }
+            }
+         }
+      }
+
+      @each $size, $value in $cx-menu-padding-options {
+         &.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
+            margin: $value;
+            display: block;
+         }
+      }
+
+      .#{$element}#{$name}-item {
+         & > hr {
+            border: none;
+            border-top: 1px solid $cx-default-menu-separator-color;
+            margin: map-get($cx-menu-padding-options, medium);
+         }
+
+         &.#{$state}hidden {
+            visibility: hidden;
+            position: absolute;
+         }
+      }
+
+      &.#{$state}overflow {
+         overflow: hidden;
+         display: flex;
+
+         & > .#{$element}#{$name}-item:last-child {
+            visibility: hidden;
+            position: absolute;
+            max-height: 100%;
+         }
+
+         &.#{$state}pack > .#{$element}#{$name}-item:last-child {
+            visibility: visible;
+            position: relative;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-spacer {
+      flex: 1 1 0%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Menu")) {
+   @include cx-menu();
+}

package/src/widgets/nav/Route.js

@@ -1,106 +1,102 @@
-import {Widget} from '../../ui/Widget';
-import {PureContainer} from '../../ui/PureContainer';
-import RouteMatcher from 'route-parser';
-import {ReadOnlyDataView} from '../../data/ReadOnlyDataView';
-import {routeAppend} from "../../util/routeAppend";
-
-export class Route extends PureContainer {
-   init() {
-      if (this.path)
-         this.route = this.path;
-
-      super.init();
-
-      if (this.route && this.route[0] !== '+')
-         this.matcher = new RouteMatcher(this.route + (this.prefix ? '(*remainder)' : ''));
-   }
-
-   initInstance(context, instance) {
-      super.initInstance(context, instance);
-      instance.store = new ReadOnlyDataView({
-         store: instance.store
-      });
-      instance.setStore = store => {
-         instance.store.setStore(store);
-      };
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         url: undefined
-      });
-   }
-
-   checkVisible(context, instance, data) {
-
-      if (!data.visible)
-         return false;
-
-      if (data.url !== instance.cached.url) {
-         instance.cached.url = data.url;
-         let matcher = this.matcher;
-         let route = this.route;
-         if (this.route[0] === '+') {
-            route = routeAppend(context.lastRoute.route, this.route.substring(1));
-            if (!instance.cached.matcher || instance.cached.route !== route)
-               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? '(*remainder)' : ''));
-            matcher = instance.cached.matcher;
-         }
-         instance.cached.result = matcher.match(data.url);
-         instance.cached.matcher = matcher;
-         instance.cached.route = data.route = route;
-      }
-      if (!instance.cached.result)
-         return false;
-
-      return super.checkVisible(context, instance, data);
-   }
-
-   prepareData(context, {data, store, cached}) {
-      super.prepareData(...arguments);
-
-      store.setData({
-         [this.recordName]: cached.result
-      });
-
-      //TODO: Replace comparison with deepEquals
-      if (this.params && this.params.bind) {
-         var params = store.get(this.params.bind);
-         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
-            store.set(this.params.bind, cached.result);
-         }
-      }
-
-      if (this.map) {
-         for (var key in result) {
-            var binding = this.map[key];
-            if (binding)
-               store.set(binding, result[key]);
-         }
-      }
-   }
-
-   explore(context, instance) {
-      context.push('lastRoute', {
-         route: instance.cached.route,
-         result: instance.cached.result,
-         reverse: function (data) {
-            return instance.cached.matcher.reverse({
-               ...instance.cached.result,
-               remainder: '',
-               ...data
-            })
-         }
-      });
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop('lastRoute');
-   }
-}
-
-Route.prototype.recordName = '$route';
-Route.prototype.prefix = false;
-
-Widget.alias('route', Route);
+import { Widget } from "../../ui/Widget";
+import { PureContainer } from "../../ui/PureContainer";
+import RouteMatcher from "route-parser";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { routeAppend } from "../../util/routeAppend";
+
+export class Route extends PureContainer {
+   init() {
+      if (this.path) this.route = this.path;
+
+      super.init();
+
+      if (this.route && this.route[0] !== "+")
+         this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
+   }
+
+   initInstance(context, instance) {
+      instance.store = new ReadOnlyDataView({
+         store: instance.parentStore,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance) {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         url: undefined,
+      });
+   }
+
+   checkVisible(context, instance, data) {
+      if (!data.visible) return false;
+
+      if (data.url !== instance.cached.url) {
+         instance.cached.url = data.url;
+         let matcher = this.matcher;
+         let route = this.route;
+         if (this.route[0] === "+") {
+            route = routeAppend(context.lastRoute.route, this.route.substring(1));
+            if (!instance.cached.matcher || instance.cached.route !== route)
+               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
+            matcher = instance.cached.matcher;
+         }
+         instance.cached.result = matcher.match(data.url);
+         instance.cached.matcher = matcher;
+         instance.cached.route = data.route = route;
+      }
+      if (!instance.cached.result) return false;
+
+      return super.checkVisible(context, instance, data);
+   }
+
+   prepareData(context, { data, store, cached }) {
+      super.prepareData(...arguments);
+
+      store.setData({
+         [this.recordName]: cached.result,
+      });
+
+      //TODO: Replace comparison with deepEquals
+      if (this.params && this.params.bind) {
+         var params = store.get(this.params.bind);
+         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
+            store.set(this.params.bind, cached.result);
+         }
+      }
+
+      if (this.map) {
+         for (var key in result) {
+            var binding = this.map[key];
+            if (binding) store.set(binding, result[key]);
+         }
+      }
+   }
+
+   explore(context, instance) {
+      context.push("lastRoute", {
+         route: instance.cached.route,
+         result: instance.cached.result,
+         reverse: function (data) {
+            return instance.cached.matcher.reverse({
+               ...instance.cached.result,
+               remainder: "",
+               ...data,
+            });
+         },
+      });
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("lastRoute");
+   }
+}
+
+Route.prototype.recordName = "$route";
+Route.prototype.prefix = false;
+
+Widget.alias("route", Route);