@appartmint/mint 0.14.0 → 0.14.2

package/src/scss/imports/global/_structure.scss

@@ -82,45 +82,137 @@ section {
 	}
 }
 
-#{class(grid)} {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: $grid-gap;
-	margin-top: $grid-gap;
-	margin-bottom: $grid-gap;
-
-	&>* {
-		margin: 0;
+@mixin grid-2 {
+	@include break(sm) {
+		grid-template-columns: repeat(2, 1fr);
+		
+		& > :last-child:nth-child(odd) {
+			#{class(card)} {
+				grid-column: span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
 	}
+}
 
-	&#{class('2')} {
-		@include break(sm) {
-			grid-template-columns: repeat(2, 1fr);
+@mixin grid-3 {
+	@include break(lg) {
+		grid-template-columns: repeat(3, 1fr);
+
+		& > :last-child:nth-child(odd) {
+			#{class(card)} {
+				grid-column: span 1;
+				width: 100%;
+			}
 		}
-	}
 
-	&#{class('3')} {
-		@include break(sm) {
-			grid-template-columns: repeat(2, 1fr);
+		& > :last-child:nth-child(#{'3n+1'}) {
+			#{class(card)} {
+				grid-column: 2;
+			}
+		}
+
+		& > :last-child:nth-child(#{'3n+2'}) {
+			#{class(card)} {
+				grid-column: 3;
+			}
 		}
 
-		@include break(lg) {
-			grid-template-columns: repeat(3, 1fr);
+		& > :nth-last-child(2):nth-child(#{'3n+1'}) {
+			#{class(card)} {
+				grid-column: 1;
+			}
 		}
 	}
+}
 
-	&#{class('4')} {
-		@include break(sm) {
-			grid-template-columns: repeat(2, 1fr);
+@mixin grid-4 {
+	@include break(xl) {
+		grid-template-columns: repeat(4, 1fr);
+
+		& > :last-child:nth-child(odd),
+		& > :last-child:nth-child(#{'3n+1'}),
+		& > :last-child:nth-child(#{'3n+2'}),
+		& > :nth-last-child(2):nth-child(#{'3n+1'}) {
+			#{class(card)} {
+				grid-column: span 1;
+				width: 100%;
+			}
 		}
 
-		@include break(lg) {
-			grid-template-columns: repeat(3, 1fr);
+		& > :last-child:nth-child(#{'4n+1'}) {
+			#{class(card)} {
+				grid-column: 2 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
 		}
 
-		@include break(xl) {
-			grid-template-columns: repeat(4, 1fr);
+		& > :last-child:nth-child(#{'4n+2'}) {
+			#{class(card)} {
+				grid-column: 3 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
 		}
+
+		& > :nth-last-child(2):nth-child(#{'4n+1'}) {
+			#{class(card)} {
+				grid-column: 1 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		& > :last-child:nth-child(#{'4n+3'}) {
+			#{class(card)} {
+				grid-column: 4;
+			}
+		}
+
+		& > :nth-last-child(2):nth-child(#{'4n+2'}) {
+			#{class(card)} {
+				grid-column: 2 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		& > :nth-last-child(3):nth-child(#{'4n+1'}) {
+			#{class(card)} {
+				grid-column: 1;
+			}
+		}
+	}
+
+}
+
+#{class(grid)} {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: $grid-gap;
+	margin-top: $grid-gap;
+	margin-bottom: $grid-gap;
+
+	&#{class('2')} {
+		@include grid-2;
+	}
+
+	&#{class('3')} {
+		@include grid-2;
+		@include grid-3;
+	}
+
+	&#{class('4')} {
+		@include grid-2;
+		@include grid-3;
+		@include grid-4;
 	}
 
 	#{class(portrait)} {

package/src/scss/imports/util/_index.scss

@@ -1,8 +1,8 @@
-/// _index.scss - SCSS Utilities
-/// @author App Art Mint LLC
-/// 
-/// @group Mint
-
-/// Forwards
-@forward './util';
-@forward './vars';
+/// _index.scss - SCSS Utilities
+/// @author App Art Mint LLC
+/// 
+/// @group Mint
+
+/// Forwards
+@forward './util';
+@forward './vars';

package/src/ts/imports/enum.ts

@@ -1,9 +1,9 @@
-/**
- * Side Enum
- */
- export enum mintSide {
-    Top,
-    Right,
-    Bottom,
-    Left
-};
+/**
+ * Side Enum
+ */
+ export enum mintSide {
+    Top,
+    Right,
+    Bottom,
+    Left
+};

package/src/ts/imports/models/color.ts

@@ -1,96 +1,96 @@
-/**
- * Color
- */
-export class mintColor {
-    protected static hexBase: number = 16;
-    protected static hexMax: string = 'FF';
-    public r: number;
-    public g: number;
-    public b: number;
-    public a: number;
-
-    constructor (args: {[key: string]: number | string}) {
-        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
-        if (typeof args.color === 'string') {
-            this.stringConstructor(args.color);
-        }
-    }
-
-    /**
-     * Constructor from a string argument
-     */
-    protected stringConstructor (str: string) : void {
-        if (str.startsWith('#')) {
-            this.hexConstructor(str);
-        } else {
-            if (~str.indexOf('linear-gradient')) {
-                str = str.substring(str.indexOf('linear-gradient'), str.length);
-            }
-            this.rgbConstructor(str);
-        }
-    }
-
-    /**
-     * Constructor from a hex argument
-     */
-    protected hexConstructor (hex: string) : void {
-        switch (hex.length) {
-            case 1:
-            case 5:
-            case 6:
-                return;
-            case 2:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
-                break;
-            case 3:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
-                break;
-            case 4:
-                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
-                break;
-            case 7:
-                hex += mintColor.hexMax;
-                break;
-            case 8:
-                hex += hex[hex.length - 1];
-                break;
-            default:
-                hex = hex.substring(0, 9);
-        }
-
-        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
-        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
-        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
-        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
-    }
-
-    /**
-     * Constructor from an rgba argument
-     */
-    protected rgbConstructor (rgb: string) : void {
-        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
-        if (match) {
-            this.r = parseInt(match[1]);
-            this.g = parseInt(match[2]);
-            this.b = parseInt(match[3]);
-            this.a = parseFloat(match[4]);
-        }
-    }
-
-    /**
-     * Returns the perceived brightness of the color
-     */
-    getBrightness () : number {
-        if (this.a === 0) {
-            return 262;
-        }
-        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
-            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
-        }
-        return -1;
-    }
-}
-export default mintColor;
+/**
+ * Color
+ */
+export class mintColor {
+    protected static hexBase: number = 16;
+    protected static hexMax: string = 'FF';
+    public r: number;
+    public g: number;
+    public b: number;
+    public a: number;
+
+    constructor (args: {[key: string]: number | string}) {
+        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
+        if (typeof args.color === 'string') {
+            this.stringConstructor(args.color);
+        }
+    }
+
+    /**
+     * Constructor from a string argument
+     */
+    protected stringConstructor (str: string) : void {
+        if (str.startsWith('#')) {
+            this.hexConstructor(str);
+        } else {
+            if (~str.indexOf('linear-gradient')) {
+                str = str.substring(str.indexOf('linear-gradient'), str.length);
+            }
+            this.rgbConstructor(str);
+        }
+    }
+
+    /**
+     * Constructor from a hex argument
+     */
+    protected hexConstructor (hex: string) : void {
+        switch (hex.length) {
+            case 1:
+            case 5:
+            case 6:
+                return;
+            case 2:
+                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
+                break;
+            case 3:
+                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
+                break;
+            case 4:
+                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
+                break;
+            case 7:
+                hex += mintColor.hexMax;
+                break;
+            case 8:
+                hex += hex[hex.length - 1];
+                break;
+            default:
+                hex = hex.substring(0, 9);
+        }
+
+        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
+        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
+        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
+        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
+    }
+
+    /**
+     * Constructor from an rgba argument
+     */
+    protected rgbConstructor (rgb: string) : void {
+        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
+        if (match) {
+            this.r = parseInt(match[1]);
+            this.g = parseInt(match[2]);
+            this.b = parseInt(match[3]);
+            this.a = parseFloat(match[4]);
+        }
+    }
+
+    /**
+     * Returns the perceived brightness of the color
+     */
+    getBrightness () : number {
+        if (this.a === 0) {
+            return 262;
+        }
+        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
+            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
+        }
+        return -1;
+    }
+}
+export default mintColor;

package/src/ts/imports/util/display.ts

@@ -1,7 +1,7 @@
-/**
- * Handles the display of elements
- */
-export abstract class mintDisplay {
-
-};
+/**
+ * Handles the display of elements
+ */
+export abstract class mintDisplay {
+
+};
 export default mintDisplay;

package/src/ts/imports/util/event.ts

@@ -1,7 +1,7 @@
-/**
- * Event helper functions
- */
-export abstract class mintEvent {
-
-};
-export default mintEvent;
+/**
+ * Event helper functions
+ */
+export abstract class mintEvent {
+
+};
+export default mintEvent;

package/src/ts/imports/util/list.ts

@@ -1,19 +1,19 @@
-/**
- * List functions for the util library
- */
-export abstract class mintList {
-	/**
-	 * Returns a copy of the provided list with the items in random order
-	 * @param list - the list to shuffle
-	 * @returns - the shuffled list
-	 */
-	static shuffle (list: any[]): any[] {
-		let copy = [...list];
-		for (let i = copy.length - 1; i > 0; i--) {
-			const j = Math.floor(Math.random() * (i + 1));
-			[copy[i], copy[j]] = [copy[j], copy[i]];
-		}
-		return copy;
-	}
-};
-export default mintList;
+/**
+ * List functions for the util library
+ */
+export abstract class mintList {
+	/**
+	 * Returns a copy of the provided list with the items in random order
+	 * @param list - the list to shuffle
+	 * @returns - the shuffled list
+	 */
+	static shuffle (list: any[]): any[] {
+		let copy = [...list];
+		for (let i = copy.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[copy[i], copy[j]] = [copy[j], copy[i]];
+		}
+		return copy;
+	}
+};
+export default mintList;

package/src/ts/imports/util/math.ts

@@ -1,17 +1,17 @@
-/**
- * Math functions for the util library
- */
-export abstract class mintMath {
-    /**
-     * Get a random integer between min and max
-     * @param max Maximum value to return
-     * @param min Minimum value to return (default is 0)
-     * @returns a random integer between min and max
-     */
-    static randomInt (max: number, min: number = 0): number {
-        min = Math.ceil(min);
-        max = Math.floor(max);
-        return Math.floor(Math.random() * (max - min) + min);
-    }
-};
-export default mintMath;
+/**
+ * Math functions for the util library
+ */
+export abstract class mintMath {
+    /**
+     * Get a random integer between min and max
+     * @param max Maximum value to return
+     * @param min Minimum value to return (default is 0)
+     * @returns a random integer between min and max
+     */
+    static randomInt (max: number, min: number = 0): number {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+};
+export default mintMath;

package/src/ts/imports/util/object.ts

@@ -137,5 +137,48 @@ export abstract class mintObject {
             return obj;
         }, {});
     };
+
+    /**
+     * Update two sets of objects
+     * @param original - the original object
+     * @param update - the object to update the original with
+     * @returns - the original objects with updated data from the update
+     */
+    static updateArray (original: any[], update?: any[], key = 'id') : any {
+        
+        // If there are no originals, push the updates
+        if (!update?.length) {
+            update?.forEach((object) => original.push(object));
+        
+        // If there are existing objects
+        } else {
+
+            // Create a dictionary of the updated objects
+            const updateObjects = update.reduce<{ [key: string]: Object }>((objects, object) => ({
+                ...objects,
+                [object?.[key] ?? '']: object
+            }), {});
+
+            // Remove any objects that aren't in the updated objects
+            const missingObjects = original.filter((object) => !updateObjects[object?.[key] ?? '']);
+            missingObjects?.forEach((object) => {
+                const index = original.indexOf(object);
+                if (typeof index == 'number' && index !== -1) {
+                    original.splice(index, 1);
+                }
+            });
+
+            // Update the existing objects with updates
+            original.forEach((object) => {
+                if (updateObjects[object?.[key] ?? '']) {
+                    Object.assign(object, updateObjects[object?.[key] ?? '']);
+                }
+            });
+        }
+
+        // Push any new objects
+        const newObjects = update?.filter((object) => !original.some((existingObject) => existingObject?.[key] === object?.[key]));
+        newObjects?.forEach(newObject => original.push(newObject));
+    }
 };
 export default mintObject;

package/src/ts/imports/util/window.ts

@@ -1,7 +1,7 @@
-/**
- * Functions related to the browser window.
- */
-export abstract class mintWindow {
-
-};
+/**
+ * Functions related to the browser window.
+ */
+export abstract class mintWindow {
+
+};
 export default mintWindow;

package/src/ts/index.ts

@@ -1,33 +1,33 @@
-/**
- * A library for building responsive web applications.
- *
- * @packageDocumentation
- */
-
-/**
- * Exports
- */
-// Enums
-export { mintSide } from './imports/enum';
-
-// Components
-export { mintHeader } from './imports/components/header';
-
-// Models
-export { mintColor } from './imports/models/color';
-export { mintItem } from './imports/models/item';
-
-// Utilities
-export { mintDisplay } from './imports/util/display';
-export { mintEvent } from './imports/util/event';
-export { mintIcon } from './imports/util/icon';
-export { mintList } from './imports/util/list';
-export { mintMath } from './imports/util/math';
-export { mintObject } from './imports/util/object';
-export { mintText } from './imports/util/text';
-export { mintWindow } from './imports/util/window';
-
-// Objects
-export { mintSelectors } from './imports/util/selectors';
-export { mintSettings } from './imports/util/settings';
-export { mintUtil, default } from './util';
+/**
+ * A library for building responsive web applications.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Exports
+ */
+// Enums
+export { mintSide } from './imports/enum';
+
+// Components
+export { mintHeader } from './imports/components/header';
+
+// Models
+export { mintColor } from './imports/models/color';
+export { mintItem } from './imports/models/item';
+
+// Utilities
+export { mintDisplay } from './imports/util/display';
+export { mintEvent } from './imports/util/event';
+export { mintIcon } from './imports/util/icon';
+export { mintList } from './imports/util/list';
+export { mintMath } from './imports/util/math';
+export { mintObject } from './imports/util/object';
+export { mintText } from './imports/util/text';
+export { mintWindow } from './imports/util/window';
+
+// Objects
+export { mintSelectors } from './imports/util/selectors';
+export { mintSettings } from './imports/util/settings';
+export { mintUtil, default } from './util';