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

package/docs-dev/sass/components/modal/index.html

@@ -5250,8 +5250,8 @@
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
   <span class="pjs-token pjs-string">"backdrop-color"</span> <span class="pjs-token pjs-punctuation">:</span>                <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"backdrop-blur"</span> <span class="pjs-token pjs-punctuation">:</span>                 4px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"background-color"</span><span class="pjs-token pjs-punctuation">:</span>              white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"body-padding"</span><span class="pjs-token pjs-punctuation">:</span>                   1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span>             white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"body-padding"</span> <span class="pjs-token pjs-punctuation">:</span>                  1rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span>                 <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow"</span> <span class="pjs-token pjs-punctuation">:</span>                    <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>         
   <span class="pjs-token pjs-string">"height"</span><span class="pjs-token pjs-punctuation">:</span>                         340px<span class="pjs-token pjs-punctuation">,</span>
@@ -5272,6 +5272,10 @@
   <span class="pjs-token pjs-string">"header-border-bottom"</span><span class="pjs-token pjs-punctuation">:</span>           none<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-color"</span><span class="pjs-token pjs-punctuation">:</span>                   white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-padding"</span><span class="pjs-token pjs-punctuation">:</span>                 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-padding"</span> <span class="pjs-token pjs-punctuation">:</span>                <span class="pjs-token pjs-punctuation">(</span>0.5rem 1rem<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-background-color"</span> <span class="pjs-token pjs-punctuation">:</span>       #f6f6f6<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-border-top"</span> <span class="pjs-token pjs-punctuation">:</span>             none<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-text-align"</span> <span class="pjs-token pjs-punctuation">:</span>             right<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-background-color"</span><span class="pjs-token pjs-punctuation">:</span>       <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>221<span class="pjs-token pjs-punctuation">,</span> 221<span class="pjs-token pjs-punctuation">,</span> 221<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-background-color-hover"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>192<span class="pjs-token pjs-punctuation">,</span> 192<span class="pjs-token pjs-punctuation">,</span> 192<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-color"</span><span class="pjs-token pjs-punctuation">:</span>                  <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>99<span class="pjs-token pjs-punctuation">,</span> 99<span class="pjs-token pjs-punctuation">,</span> 99<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5294,8 +5298,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 31-67</li>
-<li><strong>Lines (code):</strong> 69-109</li>
+<li><strong>Lines (comments):</strong> 31-71</li>
+<li><strong>Lines (code):</strong> 73-117</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5448,6 +5452,30 @@
 <td style="text-align:left">The padding of the modal header.</td>
 </tr>
 <tr>
+<td style="text-align:left">footer-padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">(0.5rem 1rem)</td>
+<td style="text-align:left">The padding of the modal footer.</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">(0.5rem 1rem)</td>
+<td style="text-align:left">The background color of the footer</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-border-top</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">(0.5rem 1rem)</td>
+<td style="text-align:left">The border between body and footer</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">right</td>
+<td style="text-align:left">Text alignment for footer</td>
+</tr>
+<tr>
 <td style="text-align:left">resizer-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">rgb(221, 221, 221)</td>
@@ -5535,8 +5563,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 111-114</li>
-<li><strong>Lines (code):</strong> 116-118</li>
+<li><strong>Lines (comments):</strong> 119-122</li>
+<li><strong>Lines (code):</strong> 124-126</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5575,8 +5603,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 130-132</li>
-<li><strong>Lines (code):</strong> 134-485</li>
+<li><strong>Lines (comments):</strong> 138-140</li>
+<li><strong>Lines (code):</strong> 142-500</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5599,8 +5627,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 120-123</li>
-<li><strong>Lines (code):</strong> 125-128</li>
+<li><strong>Lines (comments):</strong> 128-131</li>
+<li><strong>Lines (code):</strong> 133-136</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/js/ui/modal-builder.js

@@ -4,13 +4,13 @@
  */
 
 import { ComponentInitializer } from "../utils/system.js";
+import { getElement } from "../utils/dom.js";
 import { wrapSettingString } from "../settings.js";
 import { getName } from "../events/index.js";
 import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
 import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
 
-
 /**
  * Modal Builder Component Initializer
  */
@@ -42,6 +42,8 @@ export const initializer = new ComponentInitializer({
  * @property {string} baseClass - The base CSS class for the modal elements. Defaults to `"modal"`.
  * @property {string} classCloseIcon - The class name for the close icon. Uses the wrapped setting string.
  * @property {string} classResizerIcon - The class name for the resizer icon. Uses the wrapped setting string.
+ * @property {string|Node} footerElement - Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)
+ * @property {string|Node} footerHtml - Markup to use in the footer
  * @property {boolean} debug - Enables debug logging. Defaults to `false`.
  * @property {function(object): string} templateCloseIcon - A function that returns the HTML for the close icon.
  * @property {function(object): string} templateCloseIcon.config - The resolved modal configuration object.
@@ -71,6 +73,8 @@ export const defaults = {
   noMinHeight: false,
   class: "",
   baseClass: "modal",
+  footerElement: null,
+  footerHtml: null,
   classCloseIcon: wrapSettingString("iconClassClose"),
   classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
@@ -89,7 +93,7 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
-    const { baseClass, describedby } = config;
+    const { baseClass, describedby, footerElement, footerHtml } = config;
     const classes = [
       baseClass,
       `${ baseClass }--${ config.position }`,
@@ -102,6 +106,7 @@ export const defaults = {
       ...(config.class ? [config.class] : []), 
     ];
     const labelledby = config.title ? `${ id }--title` : config.labelledby;
+    const hasFooter = footerElement || footerHtml;
     return `
       <dialog 
         id="${ id }" 
@@ -123,6 +128,7 @@ export const defaults = {
           </header>
         ` : "" }
         <div class="${ baseClass }__body" ${ initializer.getAttribute("body") }></div>
+        ${ footerHtml ? `<div class="${ baseClass }__footer">${ footerHtml }</div>`: "" }
         ${ config.hasResizer ? 
           `<div class="${ baseClass }__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
@@ -175,6 +181,8 @@ export function buildModal(content, options) {
   if (!content.id) {
     throw new Error("Missing ID on modal");
   }
+
+  const { footerHtml, footerElement } = config;
   
   const markup = config.template(content.id, config);
   const modal = createElementFromHtml(markup.trim());
@@ -193,6 +201,16 @@ export function buildModal(content, options) {
   // Add dialog options for other scripts
   modal.setAttribute(baseAttribute, JSON.stringify(dialogOptions));
 
+  // If they passed a footer element we need to move it in and
+  // make sure it has the class
+  if (config.footerElement) {
+    const footerElement = getElement(config.footerElement);
+    if (footerElement) {
+      footerElement.classList.add(`${ config.baseClass }__footer`);
+      body.after(footerElement);
+    }
+  }
+
   if (config.hasResizer) {
     new Resizer(modal, resizer, {
       fromLeft: config.position === "right"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.75",
+  "version": "0.1.0-beta.76",
   "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",

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":"AAgJA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA+Dd;AAzND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA6DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA4CC;;;;;;;;;;;;WA/GW,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/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