unit.gl 0.0.40 → 0.1.1

package/scss/variables/_view.scss

@@ -3,10 +3,10 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// View Variables Module
 /// ===========================================================================
-/// 
+///
 /// This module defines the breakpoints for responsive design, categorized by
 /// device types. It leverages a base unit to calculate breakpoint values for
 /// consistency across various screen sizes.
@@ -24,55 +24,55 @@
 ///   calculating breakpoints.
 ///
 /// Example Usage:
-///   @media (min-width: map-get($breakpoints, md)) {
+///   @media (min-width: map.get($breakpoints, md)) {
 ///       // Styles for medium devices and up
 ///   }
-/// 
+///
 /// @group View
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
+@use "sass:map";
 
 // ============================================================================
 // Variables
 // ============================================================================
 
-
-/// 
+///
 /// Base unit size used for calculating breakpoints. Defaults to 16px.
-/// 
+///
 /// @name $base_screen_unit
 /// @type Length
-/// 
+///
 $base_screen_unit: 16px !default;
 
-
-
-/// 
+///
 /// A map defining the breakpoints for responsive design. Each key represents
 /// a different device category, with the value calculated using the base
 /// screen unit.
-/// 
+///
 /// - **xs**: 320px (Extra small devices like mobile phones)
 /// - **sm**: 480px (Small devices like tablets)
 /// - **md**: 768px (Medium devices like laptops)
 /// - **lg**: 1024px (Large devices like desktops)
 /// - **xl**: 1280px (Extra large devices like TVs)
 /// - **sl**: 1440px (Super large devices like large TVs)
-/// 
+///
 /// @name $breakpoints
 /// @type Map
-/// 
+///
+
+
+
 // $breakpoints: (
 //      xs: calc_breakpoint($base_screen_unit, 20),   //  320px - Extra small devices (Mobile)
 //      sm: calc_breakpoint($base_screen_unit, 30),   //  480px - Small devices (Tablets)
@@ -83,78 +83,75 @@ $base_screen_unit: 16px !default;
 // ) !default;
 
 $breakpoints: (
-     xs: 320px,   //  320px - Extra small devices (Mobile)
-     sm: 480px,   //  480px - Small devices (Tablets)
-     md: 768px,   //  768px - Medium devices (Laptops)
-     lg: 1024px,   // 1024px - Large devices (Desktops)
-     xl: 1280px,   // 1280px - Extra large devices (TV)
-     sl: 1440px,   // 1440px - Super large devices (Large TV)
+    xs: 320px,
+    //  320px - Extra small devices (Mobile)
+    sm: 480px,
+    //  480px - Small devices (Tablets)
+    md: 768px,
+    //  768px - Medium devices (Laptops)
+    lg: 1024px,
+    // 1024px - Large devices (Desktops)
+    xl: 1280px,
+    // 1280px - Extra large devices (TV)
+    sl: 1440px, // 1440px - Super large devices (Large TV)
 ) !default;
 
-
-/// 
+///
 /// Exposes the value of the `xs` breakpoint for direct access.
-/// 
+///
 /// @name $media_xs
 /// @type Length
-/// 
-$media_xs: map-get($breakpoints, xs) !default;
-
+///
+$media_xs: map.get($breakpoints, xs) !default;
 
-/// 
+///
 /// Exposes the value of the `sm` breakpoint for direct access.
-/// 
+///
 /// @name $media_sm
 /// @type Length
-/// 
-$media_sm: map-get($breakpoints, sm) !default;
-
+///
+$media_sm: map.get($breakpoints, sm) !default;
 
-/// 
+///
 /// Exposes the value of the `md` breakpoint for direct access.
-/// 
+///
 /// @name $media_md
 /// @type Length
-/// 
-$media_md: map-get($breakpoints, md) !default;
-
+///
+$media_md: map.get($breakpoints, md) !default;
 
-/// 
+///
 /// Exposes the value of the `lg` breakpoint for direct access.
-/// 
+///
 /// @name $media_lg
 /// @type Length
-/// 
-$media_lg: map-get($breakpoints, lg) !default;
-
+///
+$media_lg: map.get($breakpoints, lg) !default;
 
-/// 
+///
 /// Exposes the value of the `xl` breakpoint for direct access.
-/// 
+///
 /// @name $media_xl
 /// @type Length
-/// 
-$media_xl: map-get($breakpoints, xl) !default;
-
+///
+$media_xl: map.get($breakpoints, xl) !default;
 
-/// 
+///
 /// Exposes the value of the `sl` breakpoint for direct access.
-/// 
+///
 /// @name $media_sl
 /// @type Length
-/// 
-$media_sl: map-get($breakpoints, sl) !default;
-
+///
+$media_sl: map.get($breakpoints, sl) !default;
 
-/// 
+///
 /// Calculates the difference between the `sl` and `xs` breakpoints.
-/// 
+///
 /// @name $media_dif
 /// @type Length
-/// 
+///
 $media_dif: calc($media_sl - $media_xs);
 
-
 // Uncomment below if you want to use the following predefined breakpoints for various devices:
 
 // $media_min: 320px !default;  // Mobile

package/ts/AspectRatio.ts

@@ -1,29 +1,50 @@
-class AspectRatio {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class AspectRatio {
+
+    // Parameters
+    // ========================================================================
+
     width: Unit;
     height: Unit;
 
+    // Constructor
+    // ========================================================================
+
     constructor(width: Unit, height: Unit) {
         this.width = width;
         this.height = height;
     }
 
+    // Methods
+    // ========================================================================
+
     calculateRatio(): number {
         return this.width.value / this.height.value;
     }
 
     scaleToWidth(newWidth: Unit): Unit {
-        const ratio = this.calculateRatio();
-        const newHeightValue = newWidth.value / ratio;
+        const ratio: number = this.calculateRatio();
+        const newHeightValue: number = newWidth.value / ratio;
         return new Unit(newHeightValue, newWidth.unit);
     }
 
     scaleToHeight(newHeight: Unit): Unit {
-        const ratio = this.calculateRatio();
-        const newWidthValue = newHeight.value * ratio;
+        const ratio: number = this.calculateRatio();
+        const newWidthValue: number = newHeight.value * ratio;
         return new Unit(newWidthValue, newHeight.unit);
     }
 
     toString(): string {
         return `AspectRatio: width ${this.width.toString()}, height ${this.height.toString()}, ratio ${this.calculateRatio()}`;
     }
-}
+}

package/ts/Border.ts

@@ -1,16 +1,46 @@
-type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type BorderStyle = "solid" | "dashed" | "dotted" | "double" | "none";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Border {
+
+    // Parameters
+    // ========================================================================
 
-class Border {
     width: Unit;
     style: BorderStyle;
     color: string;
 
-    constructor(width: Unit, style: BorderStyle, color: string) {
+
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        width: Unit,
+        style: BorderStyle,
+        color: string
+    ) {
         this.width = width;
         this.style = style;
         this.color = color;
     }
 
+    // Methods
+    // ========================================================================
+
     setWidth(newWidth: Unit): void {
         this.width = newWidth;
     }
@@ -26,4 +56,5 @@ class Border {
     toString(): string {
         return `Border: ${this.width.toString()} ${this.style} ${this.color}`;
     }
-}
+
+}

package/ts/BoxModel.ts

@@ -1,16 +1,40 @@
-class BoxModel {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Border from "./Border";
+import Size from "./Size";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class BoxModel {
+
+    // Parameters
+    // ========================================================================
+
     margin: Margin;
     padding: Padding;
     border: Border;
     size: Size;
 
-    constructor(margin: Margin, padding: Padding, border: Border, size: Size) {
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        margin: Margin,
+        padding: Padding,
+        border: Border,
+        size: Size
+    ) {
         if (
             margin.top.unit !== size.width.unit ||
             padding.top.unit !== size.width.unit ||
             border.width.unit !== size.width.unit
         ) {
-            throw new Error('All units in BoxModel must match');
+            throw new Error("All units in BoxModel must match");
         }
         this.margin = margin;
         this.padding = padding;
@@ -18,6 +42,10 @@ class BoxModel {
         this.size = size;
     }
 
+
+    // Methods
+    // ========================================================================
+
     setMargin(margin: Margin): void {
         this.margin = margin;
     }
@@ -37,4 +65,4 @@ class BoxModel {
     toString(): string {
         return `BoxModel:\n  Size: ${this.size.toString()}\n  Margin: ${this.margin.toString()}\n  Padding: ${this.padding.toString()}\n  Border: ${this.border.toString()}`;
     }
-}
+}

package/ts/FlexContainer.ts

@@ -1,19 +1,42 @@
-type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+// ============================================================================
+// Import
+// ============================================================================
+
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+
+
+export default class FlexContainer {
+
+    // Parameters
+    // ========================================================================
 
-class FlexContainer {
     flexDirection: FlexDirection;
     flexWrap: FlexWrap;
     justifyContent: Justify;
     alignItems: Align;
     alignContent: Align;
 
+
+    // Constructor
+    // ========================================================================
+
     constructor(
-        flexDirection: FlexDirection = 'row',
-        flexWrap: FlexWrap = 'nowrap',
-        justifyContent: Justify = 'start',
-        alignItems: Align = 'stretch',
-        alignContent: Align = 'stretch'
+        flexDirection: FlexDirection = "row",
+        flexWrap: FlexWrap = "nowrap",
+        justifyContent: Justify = "start",
+        alignItems: Align = "stretch",
+        alignContent: Align = "stretch"
     ) {
         this.flexDirection = flexDirection;
         this.flexWrap = flexWrap;
@@ -22,6 +45,10 @@ class FlexContainer {
         this.alignContent = alignContent;
     }
 
+
+    // Methods
+    // ========================================================================
+
     setDirection(direction: FlexDirection): void {
         this.flexDirection = direction;
     }
@@ -45,4 +72,4 @@ class FlexContainer {
     toString(): string {
         return `FlexContainer: direction ${this.flexDirection}, wrap ${this.flexWrap}, justify ${this.justifyContent}, align-items ${this.alignItems}, align-content ${this.alignContent}`;
     }
-}
+}

package/ts/Grid.ts

@@ -1,14 +1,39 @@
-class Grid {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Grid {
+
+    // Parameters
+    // ========================================================================
+
     columns: number;
     gutter: Unit;
     rowHeight: Unit;
 
-    constructor(columns: number, gutter: Unit, rowHeight: Unit) {
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        columns: number,
+        gutter: Unit,
+        rowHeight: Unit
+    ) {
         this.columns = columns;
         this.gutter = gutter;
         this.rowHeight = rowHeight;
     }
 
+    // Methods
+    // ========================================================================
+
     getColumnWidth(containerWidth: Unit): Unit {
         const totalGutterWidth = this.gutter.value * (this.columns - 1);
         const columnWidth = (containerWidth.value - totalGutterWidth) / this.columns;
@@ -18,4 +43,4 @@ class Grid {
     toString(): string {
         return `Grid: ${this.columns} columns, gutter ${this.gutter.toString()}, row height ${this.rowHeight.toString()}`;
     }
-}
+}

package/ts/GridContainer.ts

@@ -1,16 +1,42 @@
-class GridContainer {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class GridContainer {
+
+    // Parameters
+    // ========================================================================
+
     rows: number;
     columns: number;
     rowGap: Unit;
     columnGap: Unit;
 
-    constructor(rows: number, columns: number, rowGap: Unit, columnGap: Unit) {
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        rows: number,
+        columns: number,
+        rowGap: Unit,
+        columnGap: Unit
+    ) {
         this.rows = rows;
         this.columns = columns;
         this.rowGap = rowGap;
         this.columnGap = columnGap;
     }
 
+    // Methods
+    // ========================================================================
+
     setRows(rows: number): void {
         this.rows = rows;
     }
@@ -30,4 +56,4 @@ class GridContainer {
     toString(): string {
         return `GridContainer: ${this.rows} rows, ${this.columns} columns, row-gap ${this.rowGap.toString()}, column-gap ${this.columnGap.toString()}`;
     }
-}
+}

package/ts/Layout.ts

@@ -1,14 +1,41 @@
-type Align = 'start' | 'center' | 'end' | 'stretch';
-type Justify = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type Align = "start" | "center" | "end" | "stretch";
+type Justify = "start" | "center" | "end" | "space-between" | "space-around";
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+
+
+export default class Layout {
+
+    // Parameters
+    // ========================================================================
 
-class Layout {
     width: Unit;
     height: Unit;
     align: Align;
     justify: Justify;
-    direction: 'row' | 'column';
+    direction: "row" | "column";
 
-    constructor(width: Unit, height: Unit, align: Align = 'stretch', justify: Justify = 'start', direction: 'row' | 'column' = 'row') {
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        width: Unit,
+        height: Unit,
+        align: Align = "stretch", justify: Justify = "start", direction: "row" | "column" = "row") {
         this.width = width;
         this.height = height;
         this.align = align;
@@ -16,6 +43,9 @@ class Layout {
         this.direction = direction;
     }
 
+    // Methods
+    // ========================================================================
+
     setAlign(align: Align): void {
         this.align = align;
     }
@@ -24,11 +54,11 @@ class Layout {
         this.justify = justify;
     }
 
-    setDirection(direction: 'row' | 'column'): void {
+    setDirection(direction: "row" | "column"): void {
         this.direction = direction;
     }
 
     toString(): string {
         return `Layout: ${this.direction}, width ${this.width.toString()}, height ${this.height.toString()}, align ${this.align}, justify ${this.justify}`;
     }
-}
+}

package/ts/Position.ts

@@ -1,15 +1,39 @@
-class Position {
+// ============================================================================
+// Import
+// ============================================================================
+
+import Unit from "./Unit";
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+export default class Position {
+
+    // Parameters
+    // ========================================================================
+
     x: Unit;
     y: Unit;
 
-    constructor(x: Unit, y: Unit) {
+    // Constructor
+    // ========================================================================
+
+    constructor(
+        x: Unit,
+        y: Unit
+    ) {
         if (x.unit !== y.unit) {
-            throw new Error('X and Y must have the same unit');
+            throw new Error("X and Y must have the same unit");
         }
         this.x = x;
         this.y = y;
     }
 
+    // Methods
+    // ========================================================================
+
     add(other: Position): Position {
         return new Position(this.x.add(other.x), this.y.add(other.y));
     }
@@ -25,4 +49,5 @@ class Position {
     toString(): string {
         return `Position: (${this.x.toString()}, ${this.y.toString()})`;
     }
-}
+
+}