@ulu/frontend 0.1.0-beta.52 → 0.1.0-beta.54

package/js/ui/modal-builder.js

@@ -21,12 +21,41 @@ export const initializer = new ComponentInitializer({
 /**
  * Default builder options (extends dialog defaults, watch name collisions)
  * - Decided to extend defaults so the interface in HTML is singular
- *   - This is sometimes easier to template (merging and serializing options 
- *     in twig for example)
+ * - This is sometimes easier to template (merging and serializing options
+ * in twig for example)
+ * @typedef {object} DefaultModalOptions
+ * @property {string|null} title - The title of the modal. Defaults to `null`.
+ * @property {string|null} titleIcon - The class name for an icon to display in the title. Defaults to `null`.
+ * @property {string} titleClass - Extra class/classes to add to title
+ * @property {boolean} nonModal - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
+ * @property {boolean} documentEnd - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
+ * @property {boolean} allowResize - If `true`, the modal will be resizable. Defaults to `false`.
+ * @property {"center"|"top-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"} position - The initial position of the modal. Defaults to `"center"`.
+ * @property {boolean} bodyFills - If `true`, the modal body will fill the available space. Defaults to `false`.
+ * @property {boolean} noBackdrop - If `true`, no backdrop will be displayed behind the modal. Defaults to `false`.
+ * @property {"default"|"small"|"large"|"fullscreen"} size - The size of the modal. Defaults to `"default"`.
+ * @property {boolean} print - If `true`, the modal content will be optimized for printing. Defaults to `false`.
+ * @property {boolean} noMinHeight - If `true`, the modal will not have a minimum height. Defaults to `false`.
+ * @property {string} class - Additional CSS class(es) to add to the modal. Defaults to `""`.
+ * @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 {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.
+ * @returns {string} The HTML string for the close icon.
+ * @property {function(object): string} templateResizerIcon - A function that returns the HTML for the resizer icon.
+ * @property {function(object): string} templateResizerIcon.config - The resolved modal configuration object.
+ * @returns {string} The HTML string for the resizer icon.
+ * @property {function(string, DefaultModalOptions): string} template - The default modal template function.
+ * @param {string} template.id - The ID for the new modal.
+ * @param {DefaultModalOptions} template.config - The resolved modal options.
+ * @returns {string} Markup for the modal.
  */
 export const defaults = {
   title: null,
   titleIcon: null,
+  titleClass: "",
   nonModal: false,
   documentEnd: true,
   allowResize: false,
@@ -72,7 +101,7 @@ export const defaults = {
       <dialog id="${ id }" class="${ classes.join(" ") }">
         ${ config.title ? `
           <header class="${ baseClass }__header">
-            <h2 class="${ baseClass }__title">
+            <h2 class="${ baseClass }__title ${ config.titleClass }">
               ${ config.titleIcon ? 
                 `<span class="${ baseClass }__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.52",
+  "version": "0.1.0-beta.54",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_slider.scss

@@ -14,8 +14,8 @@
 /// @prop {Color} background-color [transparent] Background color for the entire slider section.
 /// @prop {Dimension} margin [(1rem 0 3rem 0)] Margin for slider container
 /// @prop {Dimension} padding-top [0] Top padding for individual slides.
-/// @prop {Dimension} button-icon-offset-x [false] Offsets the control icons in from their respective sides.
-/// @prop {Dimension} button-icon-offset-y [false] Offsets the control options down by adding a margin. 
+/// @prop {Dimension} button-offset-x [null] Offsets the control button in from their respective sides.
+/// @prop {Dimension} button-offset-y [null] Offsets the control button y
 /// @prop {Dimension} button-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
 /// @prop {Color} nav-margin [(0.5rem 0)] Margin for nav (dots)
 /// @prop {Color} nav-background-color [transparent] The color of the dot when unselected.
@@ -27,8 +27,7 @@
 /// @prop {Color} nav-border-color-selected [color.get("link")] The border color of the dot when selected.
 /// @prop {Dimension} nav-border-width [2px] The border width of the dot.
 /// @prop {Dimension} nav-size  [1rem] The height and width of the dot.
-/// @prop {Dimension} nav-gap  [0.2rem] Gap between dots
-/// @prop {Dimension} button-height  [1rem] The height of the button.
+/// @prop {Dimension} nav-gap  [0.2rem] Gap between nav items
 /// @prop {Dimension} button-width  [1rem] The width of the button.
 
 $config: (
@@ -36,10 +35,9 @@ $config: (
   "margin" : (1rem 0 3rem 0),
   "padding-bottom" : 0,
   "padding-top" : 0,
-  "button-icon-offset-x" : 2rem,
-  "button-icon-offset-y" : null,
+  "button-offset-x" : null,
+  "button-offset-y" : null,
   "button-margin" : 2rem,
-  "button-height": 2.5rem,
   "button-width": 2.5rem,
   "nav-background-color" : transparent,
   "nav-background-color-hover" : "link",
@@ -97,7 +95,7 @@ $config: (
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-    margin-top: get("button-icon-offset-y");
+    margin-top: get("button-offset-y");
   }
   #{ $prefix-plugin }__nav {
     display: flex;
@@ -160,25 +158,25 @@ $config: (
   }
   #{ $prefix-plugin }__control-button--previous {
     left: 0;
-    margin-left: get("button-icon-offset-x");
+    margin-left: get("button-offset-x");
   }
   #{ $prefix-plugin }__control-button--next {
     right: 0;
-    margin-right: get("button-icon-offset-x");
+    margin-right: get("button-offset-x");
   }
   #{ $prefix }--inset-controls {
     #{ $prefix }__slide-gap-for-controls {
-      $padding: get("button-width") + get("button-margin") + get("button-icon-offset-x");
+      $padding: get("button-width") + get("button-margin") + get("button-offset-x");
       padding-left: $padding;
       padding-right: $padding;
     }
     #{ $prefix-plugin }__control-button--previous {
       left: 0;
-      margin-left: get("button-icon-offset-x");
+      margin-left: get("button-offset-x");
     }
     #{ $prefix-plugin }__control-button--next {
       right: 0;
-      margin-right: get("button-icon-offset-x");
+      margin-right: get("button-offset-x");
     }
   }
 }

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

@@ -22,6 +22,7 @@ export const initializer: ComponentInitializer;
 export namespace defaults {
     export let title: any;
     export let titleIcon: any;
+    export let titleClass: string;
     export let nonModal: boolean;
     export let documentEnd: boolean;
     export let allowResize: boolean;
@@ -47,5 +48,89 @@ export namespace defaults {
      */
     export function template(id: string, config: any): string;
 }
+/**
+ * Default builder options (extends dialog defaults, watch name collisions)
+ * - Decided to extend defaults so the interface in HTML is singular
+ * - This is sometimes easier to template (merging and serializing options
+ * in twig for example)
+ */
+export type DefaultModalOptions = {
+    /**
+     * - The title of the modal. Defaults to `null`.
+     */
+    title: string | null;
+    /**
+     * - The class name for an icon to display in the title. Defaults to `null`.
+     */
+    titleIcon: string | null;
+    /**
+     * - Extra class/classes to add to title
+     */
+    titleClass: string;
+    /**
+     * - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
+     */
+    nonModal: boolean;
+    /**
+     * - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
+     */
+    documentEnd: boolean;
+    /**
+     * - If `true`, the modal will be resizable. Defaults to `false`.
+     */
+    allowResize: boolean;
+    /**
+     * - The initial position of the modal. Defaults to `"center"`.
+     */
+    position: "center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    /**
+     * - If `true`, the modal body will fill the available space. Defaults to `false`.
+     */
+    bodyFills: boolean;
+    /**
+     * - If `true`, no backdrop will be displayed behind the modal. Defaults to `false`.
+     */
+    noBackdrop: boolean;
+    /**
+     * - The size of the modal. Defaults to `"default"`.
+     */
+    size: "default" | "small" | "large" | "fullscreen";
+    /**
+     * - If `true`, the modal content will be optimized for printing. Defaults to `false`.
+     */
+    print: boolean;
+    /**
+     * - If `true`, the modal will not have a minimum height. Defaults to `false`.
+     */
+    noMinHeight: boolean;
+    /**
+     * - Additional CSS class(es) to add to the modal. Defaults to `""`.
+     */
+    class: string;
+    /**
+     * - The base CSS class for the modal elements. Defaults to `"modal"`.
+     */
+    baseClass: string;
+    /**
+     * - The class name for the close icon. Uses the wrapped setting string.
+     */
+    classCloseIcon: string;
+    /**
+     * - The class name for the resizer icon. Uses the wrapped setting string.
+     */
+    classResizerIcon: string;
+    /**
+     * - Enables debug logging. Defaults to `false`.
+     */
+    debug: boolean;
+    /**
+     * - A function that returns the HTML for the close icon.
+     */
+    templateCloseIcon: (arg0: object) => string;
+    /**
+     * - The resolved modal configuration object.
+     */
+    config: (arg0: object) => string;
+};
 import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=modal-builder.d.ts.map

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":"AAmGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;AAjKD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;IAyBD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DAoCC;;qCAxFkC,oBAAoB"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgIA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;AA9LD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;IAsDD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DAoCC;;;;;;;;;;;;WAhGW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,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;;qCAvCD,oBAAoB"}