@ulu/frontend 0.1.0-beta.75 → 0.1.0-beta.77

package/js/utils/system.js

@@ -4,7 +4,8 @@
  */
 
 import { hasRequiredProps } from "@ulu/utils/object.js";
-import { getDatasetOptionalJson, dataAttributeToDatasetKey } from "./dom.js";
+import { getDatasetOptionalJson } from "@ulu/utils/browser/dom.js";
+import { dataAttributeToDatasetKey } from "./dom.js";
 import { getName } from "../events/index.js";
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.75",
+  "version": "0.1.0-beta.77",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
-    "@ulu/utils": "^0.0.24",
+    "@ulu/utils": "^0.0.26",
     "ally.js": "^1.4.1",
     "aria-tablist": "^1.2.2",
     "swipe-listener" : "^1.3.0"

package/scss/components/_modal.scss

@@ -53,6 +53,10 @@ $-fallbacks: (
 /// @prop {CssValue} header-border-bottom [none] Bottom-border on the modal header.
 /// @prop {Color} header-color [white] Type color of the header.
 /// @prop {Dimension} header-padding [1rem] The padding of the modal header.
+/// @prop {Dimension} footer-padding [(0.5rem 1rem)] The padding of the modal footer.
+/// @prop {Color} footer-background-color [(0.5rem 1rem)] The background color of the footer
+/// @prop {Color} footer-border-top [(0.5rem 1rem)] The border between body and footer
+/// @prop {CssValue} footer-text-align [right] Text alignment for footer
 /// @prop {Color} resizer-background-color [rgb(221, 221, 221)] The background color of the resizer.
 /// @prop {Color} resizer-background-color-hover [rgb(192, 192, 192)] The background color of the resizer when hovered or focused.
 /// @prop {Color} resizer-color [rgb(99, 99, 99)] The type color of the resizer.
@@ -69,8 +73,8 @@ $-fallbacks: (
 $config: (
   "backdrop-color" :                true,
   "backdrop-blur" :                 4px,
-  "background-color":              white,
-  "body-padding":                   1rem,
+  "background-color" :             white,
+  "body-padding" :                  1rem,
   "border-radius" :                 true,
   "box-shadow" :                    true,         
   "height":                         340px,
@@ -91,6 +95,10 @@ $config: (
   "header-border-bottom":           none,
   "header-color":                   white,
   "header-padding":                 1rem,
+  "footer-padding" :                (0.5rem 1rem),
+  "footer-background-color" :       #f6f6f6,
+  "footer-border-top" :             none,
+  "footer-text-align" :             right,
   "resizer-background-color":       rgb(221, 221, 221),
   "resizer-background-color-hover": rgb(192, 192, 192),
   "resizer-color":                  rgb(99, 99, 99),
@@ -142,6 +150,7 @@ $config: (
   #{ $prefix } {
     // Required for click outside
     position: fixed;
+    flex-direction: column;
     // Important: If you use the margin layout system (ie. auto) on dialogs they 
     // can't animate out correctly (thinking it jumps from dialog display system 
     // to normal block and doesn't work. This ALSO affects the z-index (seems to move from top-layer to normal layer). Z-index is for close
@@ -165,9 +174,8 @@ $config: (
     box-sizing: border-box;
     animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
     &[open] {
-      animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
       display: flex;
-      flex-direction: column;
+      animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
     }
     &::backdrop {
       background: color.get(get("backdrop-color"));
@@ -190,6 +198,13 @@ $config: (
     overflow: auto;
     padding: get("body-padding");
   }
+  #{ $prefix }__footer {
+    flex: 0;
+    padding: get("footer-padding");
+    background-color: color.get(get("footer-background-color"));
+    border-top: get("footer-border-top");
+    text-align: get("footer-text-align");
+  }
   #{ $prefix }__title {
     display: flex;
     align-items: baseline;
@@ -371,13 +386,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, -50%);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalCenterOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, -50%);
     }
     to { 
@@ -395,13 +410,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, 0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalTopOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, 0);
     }
     to { 
@@ -419,13 +434,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, 0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalBottomOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, 0);
     }
     to { 
@@ -443,13 +458,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translateX(0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalLeftOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translateX(0);
     }
     to { 
@@ -467,13 +482,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translateX(0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalRightOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translateX(0);
     }
     to { 

package/types/ui/index.d.ts

@@ -20,5 +20,5 @@ export * as printDetails from "./print-details.js";
 export * as scrollSlider from "./scroll-slider.js";
 export * as themeToggle from "./theme-toggle.js";
 export * as detailsGroup from "./details-group.js";
-declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_ui_index_ { }
 //# sourceMappingURL=index.d.ts.map

package/types/ui/modal-builder.d.ts

@@ -37,6 +37,8 @@ export namespace defaults {
     let _class: string;
     export { _class as class };
     export let baseClass: string;
+    export let footerElement: any;
+    export let footerHtml: any;
     export let classCloseIcon: any;
     export let classResizerIcon: any;
     export let debug: boolean;
@@ -125,6 +127,14 @@ export type DefaultModalOptions = {
      * - The class name for the resizer icon. Uses the wrapped setting string.
      */
     classResizerIcon: string;
+    /**
+     * - Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)
+     */
+    footerElement: string | Node;
+    /**
+     * - Markup to use in the footer
+     */
+    footerHtml: string | Node;
     /**
      * - Enables debug logging. Defaults to `false`.
      */

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA0IA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;AAvMD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;IAyDD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA0CC;;;;;;;;;;;;WAzGW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;aACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;WACN,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCAzCD,oBAAoB"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+IA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA+Dd;AAxND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA6DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA9GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;aACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA3CD,oBAAoB"}

package/types/ui/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AAkGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BASC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;EA+FrB;AAhND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;IAmDD;;OAEG;IACH,mCAAiB;;;;;;;qCAjEkB,oBAAoB"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AAmGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BASC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;EA+FrB;AAhND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;IAmDD;;OAEG;IACH,mCAAiB;;;;;;;qCAlEkB,oBAAoB"}

package/types/utils/dom.d.ts

@@ -4,25 +4,6 @@
  * @returns {string} - The dataset property name (e.g., "uluDialog").
  */
 export function dataAttributeToDatasetKey(attribute: any): string;
-/**
- * Get an elements JSON dataset value
- * @param {Node} element
- * @param {String} key key in dataset object for element
- * @returns {Object} Empty object or JSON object from dataset
- */
-export function getDatasetJson(element: Node, key: string): any;
-/**
- * Get an elements JSON dataset value that could potentially just be a single string
- * - If JSON it will return the object else it will return the value directly
- * @param {Node} element
- * @param {String} key key in dataset object for element
- * @returns {Object|String} JSON object or current dataset value (string or empty string if no value)
- */
-export function getDatasetOptionalJson(element: Node, key: string): any | string;
-/**
- * Check if a pointer event x/y was outside an elements bounding box
- */
-export function wasClickOutside(element: any, event: any): boolean;
 /**
  *   Sets up the positional classes that would come from the equal
  *   height module. Needs to be rerun by user when layout changes
@@ -34,20 +15,6 @@ export function wasClickOutside(element: any, event: any): boolean;
  *   @param {Object} classes Override the default equal heights classes
  */
 export function setPositionClasses(parent: Node, classes?: any): void;
-/**
- * Resolve a target to Element
- * @param {String|Node} target The selector or node/element
- * @param {Object} context [document] The context to query possible selectors from
- * @return {HTMLElement} The element or null if not found
- */
-export function getElement(target: string | Node, context?: any): HTMLElement;
-/**
- * Resolve a target to Elements
- * @param {String|Node} target The selector or node/element
- * @param {Object} context [document] The context to query possible selectors from
- * @return {Array} The elements or null if not found
- */
-export function getElements(target: string | Node, context?: any): any[];
 /**
  * Resolves a class input (string or array) into a consistent array of class names.
  * @param {string|string[]} input - The class input, which can be a string, an array of strings, or any other value.
@@ -58,30 +25,4 @@ export function getElements(target: string | Node, context?: any): any[];
  * resolveClassArray("single-class"); // Returns ["single-class"]
  */
 export function resolveClasses(classes: any): string[];
-/**
- * Sets a CSS custom property equal to the scrollbar width.
- * @param {object} options - Configuration options.
- * @param {HTMLElement} [options.scrollableChild=document.body] - An element that is a child of a scrollable container (used for width calculation).
- * @param {Window|HTMLElement} [options.container=window] - The container that can be scrolled (used for width calculation).
- * @param {HTMLElement} [options.propertyElement=document.documentElement] - The element to which the custom property will be added. Defaults to document.documentElement for :root access.
- * @param {string} [options.propName="--ulu-scrollbar-width"] - The name of the custom property to set.
- */
-export function addScrollbarProperty(options: {
-    scrollableChild?: HTMLElement;
-    container?: Window | HTMLElement;
-    propertyElement?: HTMLElement;
-    propName?: string;
-}): void;
-/**
- * Calculates the width of the scrollbar.
- *
- * @param {HTMLElement} [element=document.body] -The element that is the child of a scrollable container
- * @param {Window|HTMLElement} [container=window] - The container that can be scrolled
- * @returns {number} The width of the scrollbar in pixels.
- */
-export function getScrollbarWidth(element?: HTMLElement, container?: Window | HTMLElement): number;
-/**
- * @module utils/dom
- */
-export const regexJsonString: RegExp;
 //# sourceMappingURL=dom.d.ts.map

package/types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,2DAFa,MAAM,CAOlB;AAED;;;;;GAKG;AACH,wCAJW,IAAI,oBAYd;AAED;;;;;;GAMG;AACH,gDAJW,IAAI,gBAEF,YAAa,CASzB;AAED;;GAEG;AACH,mEAMC;AAGD;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;GAKG;AACH,mCAJW,SAAO,IAAI,kBAEV,WAAW,CAWtB;AAED;;;;;GAKG;AACH,oCAJW,SAAO,IAAI,wBAerB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB;AAED;;;;;;;GAOG;AACH;IALiC,eAAe,GAArC,WAAW;IACkB,SAAS,GAAtC,MAAM,GAAC,WAAW;IACI,eAAe,GAArC,WAAW;IACM,QAAQ,GAAzB,MAAM;SAehB;AAED;;;;;;GAMG;AACH,4CAJW,WAAW,cACX,MAAM,GAAC,WAAW,GAChB,MAAM,CAIlB;AAtMD;;GAEG;AAGH,qCAAqD"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,2DAFa,MAAM,CAIlB;AAED;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB"}

package/types/utils/index.d.ts

@@ -6,5 +6,5 @@ export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
 export * as fontAwesome from "./font-awesome.js";
-declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map

package/types/utils/system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../js/utils/system.js"],"names":[],"mappings":"AASA;;GAEG;AACH;IACE;;;MAGE;IACF,iCAGE;IACF,oCAEE;IAEF;;;;;OAKG;IACH;QAH2B,IAAI;QACJ,aAAa;OAUvC;IAFC,aAAwE;IACxE,iBAAgD;IAElD;;;;;;;;;OASG;IACH;QAP4B,KAAK;QACP,GAAG;QACF,QAAQ;QACV,MAAM;QACJ,aAAa;QACT,OAAO,EAA3B,WAAW;aAYrB;IACD;;;;;;;;OAQG;IACH;QAN4B,KAAK;QACP,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACS,cAAc,EAA9B,OAAO;QACa,OAAO,EAA3B,WAAW;aAMrB;IACD;;;;OAIG;IACH,kCAGC;IACD;;;OAGG;IACH,uCAEC;IACD;;;OAGG;IACH,2CAEC;IACD;;;;;;OAMG;IACH,uDALW,WAAW,GAGT,MAAM;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,WAAU;KAAC,CAAC,CAS7E;IACD;;;OAGG;IACH,2BAFW,WAAW,QAIrB;IACD;;;OAGG;IACH,qCAGC;IACD;;OAEG;IACH,0BAEC;IACD;;OAEG;IACH,2BAEC;IACD;;OAEG;IACH,+BAEC;CACF;AAED;;GAEG;AACH;CAEC"}
+{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../js/utils/system.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;;MAGE;IACF,iCAGE;IACF,oCAEE;IAEF;;;;;OAKG;IACH;QAH2B,IAAI;QACJ,aAAa;OAUvC;IAFC,aAAwE;IACxE,iBAAgD;IAElD;;;;;;;;;OASG;IACH;QAP4B,KAAK;QACP,GAAG;QACF,QAAQ;QACV,MAAM;QACJ,aAAa;QACT,OAAO,EAA3B,WAAW;aAYrB;IACD;;;;;;;;OAQG;IACH;QAN4B,KAAK;QACP,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACS,cAAc,EAA9B,OAAO;QACa,OAAO,EAA3B,WAAW;aAMrB;IACD;;;;OAIG;IACH,kCAGC;IACD;;;OAGG;IACH,uCAEC;IACD;;;OAGG;IACH,2CAEC;IACD;;;;;;OAMG;IACH,uDALW,WAAW,GAGT,MAAM;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,WAAU;KAAC,CAAC,CAS7E;IACD;;;OAGG;IACH,2BAFW,WAAW,QAIrB;IACD;;;OAGG;IACH,qCAGC;IACD;;OAEG;IACH,0BAEC;IACD;;OAEG;IACH,2BAEC;IACD;;OAEG;IACH,+BAEC;CACF;AAED;;GAEG;AACH;CAEC"}