@astuteo/breakout-grid 5.1.2 → 5.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/breakout-grid-visualizer-lite.js +1 -1
  2. package/breakout-grid-visualizer.js +19 -17
  3. package/dist/_objects.breakout-grid.css +1 -1
  4. package/package.json +1 -1
package/breakout-grid-visualizer-lite.js CHANGED
@@ -1,6 +1,6 @@
1
1
  (function() {
2
2
  "use strict";
3
- const VERSION = `v${"5.1.2"} lite`;
3
+ const VERSION = `v${"5.1.3"} lite`;
4
4
  const LOREM_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
5
5
 
6
6
  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.`;
package/breakout-grid-visualizer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  (function() {
2
2
  "use strict";
3
- const VERSION = `v${"5.1.2"}`;
3
+ const VERSION = `v${"5.1.3"}`;
4
4
  const LOREM_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
5
5
 
6
6
  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.`;
@@ -17,21 +17,21 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
17
17
  contentMin: { value: "50rem", desc: "Min width for content column (~848px). Use rem.", cssVar: "--config-content-min", liveVar: "--content-min" },
18
18
  contentMax: { value: "55rem", desc: "Max width for content column (~976px). Use rem.", cssVar: "--config-content-max", liveVar: "--content-max" },
19
19
  contentBase: { value: "75vw", desc: "Preferred width for content (fluid). Use vw.", cssVar: "--config-content-base", liveVar: "--content-base" },
20
- popoutWidth: { value: "5rem", desc: "Popout extends beyond content. Use rem.", cssVar: "--config-popout", liveVar: null },
21
- featureMin: { value: "0rem", desc: "Minimum feature track width (floor)", cssVar: "--config-feature-min", liveVar: null },
22
- featureScale: { value: "12vw", desc: "Fluid feature track scaling", cssVar: "--config-feature-scale", liveVar: null },
23
- featureMax: { value: "12rem", desc: "Maximum feature track width (ceiling)", cssVar: "--config-feature-max", liveVar: null },
20
+ popoutWidth: { value: "5rem", desc: "Popout extends beyond content. Use rem.", cssVar: "--config-popout", liveVar: "--popout-width" },
21
+ featureMin: { value: "0rem", desc: "Minimum feature track width (floor)", cssVar: "--config-feature-min", liveVar: "--feature-min" },
22
+ featureScale: { value: "12vw", desc: "Fluid feature track scaling", cssVar: "--config-feature-scale", liveVar: "--feature-scale" },
23
+ featureMax: { value: "12rem", desc: "Maximum feature track width (ceiling)", cssVar: "--config-feature-max", liveVar: "--feature-max" },
24
24
  fullLimit: { value: "115rem", desc: "Max width for col-full-limit. Use rem.", cssVar: "--config-full-limit", liveVar: "--full-limit" },
25
- defaultCol: { value: "content", desc: "Default column when no col-* class", type: "select", options: ["content", "popout", "feature", "full"], cssVar: "--config-default-col" }
25
+ defaultCol: { value: "content", desc: "Default column when no col-* class", type: "select", options: ["content", "popout", "feature", "full"], cssVar: "--config-default-col", liveVar: "--default-col" }
26
26
  };
27
27
  const GAP_SCALE_OPTIONS = {
28
- default: { value: "4vw", desc: "Mobile/default gap scaling. Use vw.", cssVar: "--config-gap-scale-default" },
29
- lg: { value: "5vw", desc: "Large screens (1024px+). Use vw.", cssVar: "--config-gap-scale-lg" },
30
- xl: { value: "6vw", desc: "Extra large (1280px+). Use vw.", cssVar: "--config-gap-scale-xl" }
28
+ default: { value: "4vw", desc: "Mobile/default gap scaling. Use vw.", cssVar: "--config-gap-scale-default", liveVar: "--gap-scale-default" },
29
+ lg: { value: "5vw", desc: "Large screens (1024px+). Use vw.", cssVar: "--config-gap-scale-lg", liveVar: "--gap-scale-lg" },
30
+ xl: { value: "6vw", desc: "Extra large (1280px+). Use vw.", cssVar: "--config-gap-scale-xl", liveVar: "--gap-scale-xl" }
31
31
  };
32
32
  const BREAKOUT_OPTIONS = {
33
- min: { value: "1rem", desc: "Minimum breakout padding (floor)", cssVar: "--config-breakout-min" },
34
- scale: { value: "5vw", desc: "Fluid breakout scaling", cssVar: "--config-breakout-scale" }
33
+ min: { value: "1rem", desc: "Minimum breakout padding (floor)", cssVar: "--config-breakout-min", liveVar: "--breakout-min" },
34
+ scale: { value: "5vw", desc: "Fluid breakout scaling", cssVar: "--config-breakout-scale", liveVar: "--breakout-scale" }
35
35
  // max is popoutWidth
36
36
  };
37
37
  const BREAKPOINT_OPTIONS = {
@@ -82,7 +82,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
82
82
  backdropOpacity: 0.85
83
83
  };
84
84
  }
85
- const BUILD_VERSION = "5.1.2";
85
+ const BUILD_VERSION = "5.1.3";
86
86
  function generateCSSExport(c, version = BUILD_VERSION) {
87
87
  var _a, _b, _c, _d, _e;
88
88
  const VERSION2 = version;
@@ -862,12 +862,14 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
862
862
  Object.keys(options).forEach((key) => {
863
863
  const opt = options[key];
864
864
  const editKey = prefix ? `${prefix}_${key}` : key;
865
- if (opt.cssVar) {
866
- const computed = this.getCSSVariable(opt.cssVar);
867
- this.editValues[editKey] = computed && computed !== "Not set" && computed !== "" ? computed : opt.value;
868
- } else {
869
- this.editValues[editKey] = opt.value;
865
+ let computed = null;
866
+ if (opt.liveVar) {
867
+ computed = this.getCSSVariable(opt.liveVar);
868
+ }
869
+ if ((!computed || computed === "Not set" || computed === "") && opt.cssVar) {
870
+ computed = this.getCSSVariable(opt.cssVar);
870
871
  }
872
+ this.editValues[editKey] = computed && computed !== "Not set" && computed !== "" ? computed : opt.value;
871
873
  });
872
874
  },
873
875
  loadCurrentValues() {
package/dist/_objects.breakout-grid.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Breakout Grid - Objects Layer (ITCSS)
3
- * Version: 5.1.2
3
+ * Version: 5.1.3
4
4
  *
5
5
  * Documentation: https://github.com/astuteo-llc/breakout-grid
6
6
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astuteo/breakout-grid",
3
- "version": "5.1.2",
3
+ "version": "5.1.3",
4
4
  "type": "module",
5
5
  "description": "CSS Grid breakout layout system with visual configurator",
6
6
  "main": "dist/_objects.breakout-grid.css",