@ulu/frontend 0.2.1 → 0.3.1

package/lib/scss/components/_modal.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "sass:meta";
+@use "sass:list";
 
 @use "../color";
 @use "../element";
@@ -11,9 +12,14 @@
 @use "../typography";
 @use "../selector";
 @use "../utils";
+@use "../breakpoint";
 
 // Used for function fallback
 $-fallbacks: (
+  "breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
+  ),
   "backdrop-color" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "backdrop-color"
@@ -43,6 +49,7 @@ $-fallbacks: (
 /// @prop {Dimension} height [340px] The min-height of the modal.
 /// @prop {Dimension} height-no-header [100px] The min-height of the modal.
 /// @prop {Dimension} width [60rem] The width of the Modal
+/// @prop {Dimension} min-width [300px] The min-width of the Modal (for resizing, etc)
 /// @prop {Time} animation-duration [300ms] Animation duration for the modal opening.
 /// @prop {Time} animation-duration-exit [150ms] Animation duration for the modal closing.
 /// @prop {CssValue} animation-timing-function [cubic-bezier(0, 0, .2, 1)] The animation timing menu of the modal.
@@ -75,6 +82,9 @@ $-fallbacks: (
 /// @prop {String} title-size [large] The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.
 /// @prop {CssValue} title-text-transform [null] Transform option for the title.
 /// @prop {Map} sizes [Map] Size options to enable unique stylings.
+/// @prop {String} breakpoint [true] Optional breakpoint for modals (used for adaptive things like fullscreen-mobile), if set to true will fallback to breakpoint default
+/// @prop {String} frame-aspect-ratio [list.slash(16, 9)] Default aspect ratio for single embedded items in frame-ratio layout
+/// @prop {String} frame-fill-min-height [65vh] Default minimum height for single embedded items in frame-fill layout
 
 $config: (
   "backdrop-color" :                true,
@@ -86,6 +96,7 @@ $config: (
   "height":                         340px,
   "height-no-header":               100px,
   "width":                          60rem,
+  "min-width":                      300px,
   "width-left-right" :              30rem,
   "animation-duration" :            300ms,
   "animation-duration-exit" :       150ms,
@@ -119,6 +130,9 @@ $config: (
   "title-icon-margin" :             0.5em,
   "title-size" :                    "large",
   "title-text-transform" :          null,
+  "breakpoint" :                    true,
+  "frame-aspect-ratio" :            list.slash(16, 9),
+  "frame-fill-min-height" :         65vh,
   "sizes" : (
     "small" : 30rem,
     "large" : 80rem
@@ -150,6 +164,7 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("modal");
+  $breakpoint: get("breakpoint");
 
   // // Before it's moved
   [data-ulu-modal-builder] {
@@ -171,9 +186,10 @@ $config: (
     padding: 0;
     border: 0;
     width: get("width");
-    min-width: 200px; // For resizing minimum width
+    min-width: get("min-width"); // For resizing minimum width
     min-height: get("height");
     max-height: 100vh;
+    max-height: 100dvh;
     max-width: 100%;
     overflow-y: hidden;
     box-sizing: border-box;
@@ -196,19 +212,20 @@ $config: (
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex: 0;
+    flex: 0 0 auto;
     padding: get("header-padding");
     border-bottom: get("header-border-bottom");
     background-color: color.get(get("header-background-color"));
     color: color.get(get("header-color"));
   }
   #{ $prefix }__body {
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0; // to ensure the flex grow container can get smaller than it's content (and scroll) when needed
     overflow: auto;
     padding: get("body-padding");
   }
   #{ $prefix }__footer {
-    flex: 0;
+    flex: 0 0 auto;
     padding: get("footer-padding");
     background-color: color.get(get("footer-background-color"));
     border-top: get("footer-border-top");
@@ -245,10 +262,6 @@ $config: (
     }
   }
 
-  #{ $prefix }__close-icon {
-  // transform: translatey(get("close-icon-vertical-offset"));
-  }
-
   #{ $prefix }__resizer {
     position: absolute;
     overflow: hidden;
@@ -293,15 +306,17 @@ $config: (
     }
   }
 
-  #{ $prefix }--fullscreen {
-    width: 100%;
-    height: 100%;
-    border-radius: 0;
+  // Fullscreen and left and right defaults (width overridden below)
+  #{ $prefix }--fullscreen,
+  #{ $prefix }--right,
+  #{ $prefix }--left {
+    @include -fullscreen-common-properties();
   }
+  // Left/Right specific
+  // - Note these properties are all important even though they seem redundant
+  //   they are tested and solve quirks with dialog positioning/animation
   #{ $prefix }--right,
   #{ $prefix }--left {
-    border-radius: 0;
-    height: 100vh;
     width: get("width-left-right");
     top: 0;
     bottom: 0;
@@ -358,11 +373,11 @@ $config: (
     &#{ $prefix }--left  {
       padding-right: get("resizer-width");  
     }
-    // &#{ $prefix }--center  {
-    //   resize: both;  
-    // }
   }
-  #{ $prefix }--body-fills {
+  // Share body flush layout
+  #{ $prefix }--body-fills,
+  #{ $prefix }--frame-ratio,
+  #{ $prefix }--frame-fill {
     #{ $prefix }__header {
       border-bottom: none;
     }
@@ -370,10 +385,65 @@ $config: (
       padding: 0;
     }
   }
-
   #{ $prefix }--no-min-height {
     min-height: 0;
   }
+
+  // Frame layouts for absolute positioned single content (e.g. iframes)
+  // Both modes use absolute positioning to escape wrappers (p, div, etc)
+  #{ $prefix }--frame-ratio,
+  #{ $prefix }--frame-fill {
+    #{ $prefix }__body {
+      position: relative;
+    }
+    #{ $prefix }__frame-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  // Ratio-specific: disable minimum heights and flex-grow so it perfectly wraps
+  #{ $prefix }--frame-ratio {
+    min-height: 0;
+    #{ $prefix }__body {
+      flex: none; 
+      // Default, can be overridden inline
+      aspect-ratio: utils.normalize-aspect-ratio(get("frame-aspect-ratio")); 
+    }
+  }
+
+  // Fill-specific: default height
+  #{ $prefix }--frame-fill {
+    #{ $prefix }__body {
+      // Default, can be overridden inline
+      min-height: get("frame-fill-min-height"); 
+    }
+  }
+
+  @if breakpoint.exists($breakpoint) {
+    #{ $prefix }--fullscreen-mobile {
+      @include breakpoint.max($breakpoint) {
+        @include -fullscreen-common-properties();
+        top: 50%;
+        left: 50%;
+        bottom: auto;
+        right: auto;
+        transform: translate(-50%, -50%);
+        animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
+        &[open] {
+          animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
+        }
+        #{ $prefix }__resizer {
+          display: none;
+        }
+      }
+    }
+  }
+
   // Will display as content when printing
   // NOTE: This will not work with native dialog
   // Printing works with modal printer by cloning mechanism
@@ -522,3 +592,11 @@ $config: (
   }
 }
 
+
+// Internal mixin to make sure this repeated CSS is identical for compression
+@mixin -fullscreen-common-properties() {
+  width: 100%;
+  height: 100%;
+  height: 100dvh;
+  border-radius: 0;
+}

package/lib/scss/components/_ratio-box.scss

@@ -1,23 +1,26 @@
 ////
 /// @group ratio-box
 ////
-/// Uses padding trick to keep ratio. Defaults to 4:3 (standard). Used for responsive iframe or images (object-fit), etc
+/// Uses aspect-ratio to keep ratio. Defaults to 4/3 (standard). Used for responsive iframe or images (object-fit), etc.
 
 @use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
 @use "../utils";
 @use "../layout";
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} size [75%] Default height ratio (of width 100%)
+/// @prop {String|Number} size ["4/3"] Default aspect ratio (can be string like "16/9" or legacy percentage value)
 /// @prop {Map} sizes [Map] Other ratios to add (apply with modifier class)
 
 $config: (
-  "size" : 75%,
+  "size" : list.slash(4, 3),
   "sizes" : (
-    "16x9" : 56.25%,
-    "9x16" : 177.77%,
-    "3x4" : 133.33%
+    "16x9" : list.slash(16, 9),
+    "9x16" : list.slash(9, 16),
+    "3x4" : list.slash(3, 4)
   )
 ) !default;
 
@@ -46,16 +49,14 @@ $config: (
 @mixin styles {
   .ratio-box {
     position: relative;
-    overflow: hidden;
-    padding: get("size") 0 0 0; 
+    aspect-ratio: utils.normalize-aspect-ratio(get("size"));
   }
   .ratio-box__content {
     @include layout.absolute-fill(true);
-    border: 0;
   }
   @each $name, $size in get("sizes") {
     .ratio-box--#{ $name } {
-      padding-top: $size; 
+      aspect-ratio: utils.normalize-aspect-ratio($size);
     }
   }
 }

package/lib/scss/components/_table-scroller.scss

@@ -0,0 +1,63 @@
+////
+/// @group table-scroller
+/// Simple wrapper for tables to make them overflow-x, not to be confused with 
+/// sticky table plugin, this is for simple html tables
+/// - Note in situations where you can't use a wrapper you can sometimes get by with display block / max-content hack
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {List|Number} margin  [(1em, 0)] Optional margin for this component
+
+$config: (
+  "margin" : (1em, 0),
+  // "example":            "background",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-table-scroller-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-table-scroller-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "table-scroller [config]");
+}
+
+/// Prints component styles
+/// @demo table-scroller
+/// @example scss
+///  @include ulu.component-table-scroller-styles();
+
+@mixin styles {
+  $prefix: selector.class("table-scroller");
+  
+  #{ $prefix } {
+    width: 100%;
+    overflow-x: auto;
+    margin: get("margin");
+    > table {
+      min-width: 100%;
+      max-width: none;
+    }
+  }
+  #{ $prefix }--nowrap {
+    > table > thead th {
+      white-space: nowrap;
+    }
+  }
+}

package/lib/scss/helpers/_utilities.scss

@@ -23,7 +23,8 @@
   $prefix-crop-margins: selector.class("crop-margins");
   $prefix-no-padding: selector.class("no-padding");
   $prefix-align-self: selector.class("align-self");
-
+  $prefix-align-items: selector.class("align-items");
+  $prefix-justify-content: selector.class("justify-content");
 
   @include utils.file-header('helpers', 'utilities');
   
@@ -129,6 +130,27 @@
   #{ $prefix-align-self }-baseline {
     align-self: baseline;
   }
+  #{ $prefix-align-items }-start {
+    align-items: flex-start;
+  }
+  #{ $prefix-align-items }-center {
+    align-items: center;
+  }
+  #{ $prefix-align-items }-end {
+    align-items: flex-end;
+  }
+  #{ $prefix-justify-content }-start {
+    justify-content: flex-start;
+  }
+  #{ $prefix-justify-content }-center {
+    justify-content: center;
+  }
+  #{ $prefix-justify-content }-end {
+    justify-content: flex-end;
+  }
+  #{ $prefix-justify-content }-space-between {
+    justify-content: space-between;
+  }
   #{ selector.class("overflow-hidden") } {
     overflow: hidden;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [
@@ -34,6 +34,8 @@
     "build:es": "BUILD_FORMAT=es vite build",
     "build:umd": "BUILD_FORMAT=umd vite build",
     "dev": "vite --config site/vite.config.js",
+    "dev:inspect": "node --inspect-brk node_modules/.bin/vite --config site/vite.config.js",
+    "dev:host": "vite --config site/vite.config.js --host",
     "dev:nogen": "NO_DOC_GEN=true vite --config site/vite.config.js",
     "docs:build": "vite build --config site/vite.config.js",
     "deploy": "npm run build && npm run docs:build"
@@ -101,6 +103,7 @@
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "fs-extra": "^11.2.0",
     "instantsearch.js": "^4.68.1",
+    "js-beautify": "^1.15.4",
     "jsdoc": "^4.0.2",
     "jsdoc-to-markdown": "^9.1.3",
     "markdown-it-anchor": "^8.6.7",