@ulu/frontend 0.1.0-beta.53 → 0.1.0-beta.55

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.53",
+  "version": "0.1.0-beta.55",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_counter-list.scss

@@ -10,17 +10,17 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {List} margin [(2rem 0)] The top and bottom margin of the list.
-/// @prop {List} item-margin [(0, 0, 1rem, 0)] The margin applied to each list item.
+/// @prop {List|CssUnit} margin [(2rem 0)] The top and bottom margin of the list.
+/// @prop {List|CssUnit} item-margin [(0, 0, 1rem, 0)] The margin applied to each list item.
 /// @prop {Keyword} align-items [baseline] How to align the counter (flexbox align-items values)
-/// @prop {Length} counter-width [2.4em] The width and height (if height is falsy)
-/// @prop {Length} counter-height [null] The height (optional)
-/// @prop {Length} counter-gap [1em] The gap between the counter and the list item content.
+/// @prop {CssUnit} counter-width [2.4em] The width and height (if height is falsy)
+/// @prop {CssUnit} counter-height [null] The height (optional)
+/// @prop {CssUnit} counter-gap [1em] The gap between the counter and the list item content.
 /// @prop {String} counter-style [numeric] The list-style-type used for the counter.
 /// @prop {Keyword|Percentage} counter-border-radius [50%] The border-radius of the counter element.
-/// @prop {Length} counter-font-size [1.2em] The font-size of the counter text.
-/// @prop {String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
-/// @prop {String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
+/// @prop {CssUnit} counter-font-size [1.2em] The font-size of the counter text.
+/// @prop {Color|String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
+/// @prop {Color|String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
 
 $config: (
   "margin" : (2rem 0),
@@ -71,47 +71,47 @@ $config: (
   #{ $prefix } {
     margin: get("margin");
     counter-reset: ulu-counter-list;
+  }
 
-    & > li,
-    & > #{ $prefix }__item {
+  #{ $prefix } > li,
+  #{ $prefix }__item {
+    display: flex;
+    gap: get("counter-gap");
+    align-items: get("align-items");
+    margin: get("item-margin");
+    min-height: $height;
+    &::before {
       display: flex;
-      gap: get("counter-gap");
-      align-items: get("align-items");
-      margin: get("item-margin");
-      min-height: $height;
-      &::before {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $width;
-        height: $height;
-        flex: 0 0 $width;
-        counter-increment: ulu-counter-list;
-        content: counter(ulu-counter-list, get("counter-style"));
-        font-size: get("counter-font-size");
-        color: color.get(get("counter-color"));
-        background-color: color.get(get("counter-background-color"));
-        border-radius: get("counter-border-radius");
-      }
-
-      // Keeping this could be useful
-      // but we need to think about how its setup
-      // - Probably should be a modifier (choice)
-      // - May need either option for how align-items is set (flex-start vs center)
-      // - This could be useful when used in grid
-      // - May need to be pervasive and not linked to a breakpoint (alternate style)
-      // - It's also just useful to know you could override the layout like this 
-      //   to get useful variations (maybe we don't need to include it but users 
-      //   can do specific)
-      // @if ( get("counter-mobile-toggle") ) {
-      //   @include breakpoint.max("small") {
-      //     padding-left: 0;
-      //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
-      //     flex-direction: column;
-      //     align-items: center;
-      //   }
-      // }
+      align-items: center;
+      justify-content: center;
+      width: $width;
+      height: $height;
+      flex: 0 0 $width;
+      counter-increment: ulu-counter-list;
+      content: counter(ulu-counter-list, get("counter-style"));
+      font-size: get("counter-font-size");
+      color: color.get(get("counter-color"));
+      background-color: color.get(get("counter-background-color"));
+      border-radius: get("counter-border-radius");
     }
+
+    // Keeping this could be useful
+    // but we need to think about how its setup
+    // - Probably should be a modifier (choice)
+    // - May need either option for how align-items is set (flex-start vs center)
+    // - This could be useful when used in grid
+    // - May need to be pervasive and not linked to a breakpoint (alternate style)
+    // - It's also just useful to know you could override the layout like this 
+    //   to get useful variations (maybe we don't need to include it but users 
+    //   can do specific)
+    // @if ( get("counter-mobile-toggle") ) {
+    //   @include breakpoint.max("small") {
+    //     padding-left: 0;
+    //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
+    //     flex-direction: column;
+    //     align-items: center;
+    //   }
+    // }
   }
 
   // Modifiers

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

@@ -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"}

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