@ulu/frontend 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## Version 0.0.10
+
+### JS
+
+- Update css-breakpoints helper to get breakpoint value with custom property, and make the psuedo element a legacy option that can be enabled
+
 ## Version 0.0.6
 
 ### SCSS

package/README.md

@@ -4,6 +4,8 @@ Front end development library (SCSS, JS, Vue)
 
 [Documentation](https://jscherbe.github.io/frontend/)
 
+[Change Log](CHANGELOG.md)
+
 ## SCSS Library
 
 This is the sass library. Set up for packaged use (under on namespace) and individual module use (importing modules directly

package/js/events/index.js

@@ -1,7 +1,7 @@
 /**
  * @module events
  */
-import { debounce } from "@ulu/utils/performance";
+import { debounce } from "@ulu/utils/performance.js";
 
 /**
  * Event object - called on dispatch

package/js/helpers/css-breakpoint.js

@@ -3,7 +3,7 @@
  */
 
 // Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
-import { removeArrayElement } from "@ulu/utils/array";
+import { removeArrayElement } from "@ulu/utils/array.js";
 import { getName } from "../events/index.js";
 import { log, logError } from "../utils/logger.js";
 
@@ -25,20 +25,18 @@ export class CssBreakpoints {
     valueFromPsuedo: false,
     customProperty: "--breakpoint",
     psuedoSelector: ':before',
+    order: ["small", "medium", "large"],
     debug: false
   }
   /**
    * @param {Object} config Configruation object
-   * @param {Array} config.order Required, Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest
+   * @param {Array} config.order Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
    * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
    * @param {Array} config.valueFromPsuedo Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property
    * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body
    * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
    */
   constructor(config) {
-    if (!config.order) {
-      logError(this, 'Missing order (required)!');
-    }
     Object.assign(this, CssBreakpoints.defaults, config);
     this.active = null;
     this.previous = null;
@@ -119,6 +117,7 @@ export class CssBreakpoints {
   /**
    * Get a breakpoint by key
    * @param {String} name The name of the breakpoint to get
+   * @return {Breakpoint} Breakpoint to act on (see BreakpointDirection)
    */
   at(name) {
     const bp = this.breakpoints[name];

package/js/ui/modals.js

@@ -17,7 +17,7 @@
 // interface in the future we don't need to change/update markup.
 import MicroModal from 'micromodal';
 import Resizer from './resizer.js';
-import { createElementFromHtml } from '@ulu/utils/dom.js';
+import { createElementFromHtml } from '@ulu/utils/browser/dom.js';
 import { pauseVideos, prepVideos } from '../helpers/pause-youtube-video.js';
 const classes = {
   open: 'site-modal--open',

package/js/ui/slider.js

@@ -28,7 +28,7 @@
 //                              * Will Change use
 
 import maintain from 'ally.js/maintain/_maintain';
-import { log, logError, logWarning } from "@ulu/utils/logger.js";
+import { log, logError, logWarning } from "../utils/logger.js";
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { debounce } from "@ulu/utils/performance.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Theming library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -13,8 +13,10 @@
     "./scss": "./scss/index.scss"
   },
   "typesVersions": {
-    "*" : {
-      "js/*" : ["./types/*"]
+    "*": {
+      "js/*": [
+        "./types/*"
+      ]
     }
   },
   "type": "module",
@@ -25,7 +27,7 @@
     "docs:update:scss": "node ./docs-src/.vitepress/sassdoc.js",
     "docs:update:scss:debug": "node --inspect-brk ./docs-src/.vitepress/sassdoc.js",
     "docs:build:js": "node ./docs-src/.vitepress/jsdoc.js",
-    "types" : "npx tsc"
+    "types": "npx tsc"
   },
   "repository": {
     "type": "git",
@@ -47,7 +49,6 @@
   },
   "homepage": "https://github.com/Jscherbe/frontend#readme",
   "devDependencies": {
-    "@ulu/utils": "^0.0.4",
     "@ulu/vitepress-auto-menus": "^0.0.3",
     "@ulu/vitepress-sassdoc": "^0.0.6",
     "clean-jsdoc-theme": "^4.2.17",
@@ -57,5 +58,8 @@
     "sass": "^1.51.0",
     "typescript": "^5.3.3",
     "vitepress": "^1.0.0-rc.27"
+  },
+  "dependencies": {
+    "@ulu/utils": "^0.0.6"
   }
 }