oo-loop 1.0.3 → 1.1.0

package/scss/functions/_empty.scss

@@ -1,15 +1,20 @@
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'type';
+
 /// Empty
 /// @param string|list $data
 /// @return bool
 
 @function isEmpty($data) {
-  @if type-of($data) == 'null' {
+  @if meta.type-of($data) == 'null' {
     @return true;
   }
-  @if isString($data) and str-length($data) == 0 {
+  @if type.isString($data) and string.length($data) == 0 {
     @return true;
   }
-  @if isList($data) and length($data) == 0 {
+  @if type.isList($data) and list.length($data) == 0 {
     @return true;
   }
   @return false;

package/scss/functions/_extract.scss

@@ -1,3 +1,7 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'type';
+
 /// Extract
 /// @param string $start The string to start width
 /// @param string $end The string to end width
@@ -5,11 +9,11 @@
 /// @return string
 
 @function extract($start, $end, $subject) {
-  @if isNotString($subject) {
-    $subject: inspect($subject)
+  @if type.isNotString($subject) {
+    $subject: meta.inspect($subject)
   }
-  $startIndex: str-index($subject, $start);
-  $endIndex: str-index($subject, $end) + str-length($end) - 1;
+  $startIndex: string.index($subject, $start);
+  $endIndex: string.index($subject, $end) + string.length($end) - 1;
 
-  @return str-slice($subject, $startIndex, $endIndex);
+  @return string.slice($subject, $startIndex, $endIndex);
 }

package/scss/functions/_list.scss

@@ -1,10 +1,13 @@
+@use 'sass:list';
+@use 'type';
+
 /// In List
 /// @param string $needle the searched value
 /// @param string|list $haystack the list to search in
 /// @return bool
 
 @function inList($needle, $haystack) {
-  @if index($haystack, $needle) == null {
+  @if list.index($haystack, $needle) == null {
     @return false;
   } @else {
     @return true;
@@ -21,21 +24,21 @@
 /// @return List
 
 @function removeInList($list, $index) {
-  @if isNotList($list)
-    or isNotNumber($index) {
+  @if type.isNotList($list)
+    or type.isNotNumber($index) {
     @return $list;
   }
   $newList: ();
-  @for $i from 1 through length($list) {
+  @for $i from 1 through list.length($list) {
     @if ($i != $index) {
-      $newList: append($newList, nth($list, $i), $separator: comma)
+      $newList: list.append($newList, list.nth($list, $i), $separator: comma)
     }
   }
   @return $newList;
 }
 
 @function toList($value) {
-  @if isList($value) {
+  @if type.isList($value) {
     @return $value;
   }
   @return ($value,);

package/scss/functions/_map.scss

@@ -1,54 +1,25 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use 'type';
+@use 'split';
+
 /// getMapValue
 /// @param map $map map of data
 /// @param string $key key to retrieve the value from
 /// @return string
 
 @function getMapValue($map, $key) {
-  @if isNotMap($map) {
+  @if type.isNotMap($map) {
     @return null;
   }
-  @if map-has-key($map, $key) == false {
+  @if map.has-key($map, $key) == false {
     // @warn 'key does not exist when using getMapValue() for' #{$key} 'on' $map;
     @return null;
   }
-  @return map-get($map, $key);
+  @return map.get($map, $key);
 }
 
-
-
-/// mapMergeDeep
-/// Non destructive map merge. 
-/// @credit-to  https://gist.github.com/pentzzsolt
-/// @param map $parentMap Map of data to be merged into
-/// @param map $childMap The set of data
-/// @param map $refMap The base map to refer too, usually equivalent to the $ooLoop before going into nested merge
-/// @param bool $forceKebab force the use of kebab-case property
-/// @return map
-
-@function mapMergeDeep($parentMap, $childMap, $refMap:null, $forceKebab: false) {
-  $map: $parentMap;
-  @if not isMap($map) {
-    @return $map;
-  }
-
-  $refMap: if($refMap == null, $ooLoop, $refMap);
-
-  @each $key, $value in $childMap {
-    $key: if($forceKebab, toKebabCase($key), $key);
-    @if isRef(map-get($map, $key)) {
-      $mapValue: getRefValue(map-get($map, $key), $refMap);
-      $map: map-merge($map, ($key: $mapValue));
-    }
-    @if (not map-has-key($map, $key)) or (type-of(map-get($map, $key) ) != type-of($value)) or (not (isMap(map-get($map, $key)) and isMap($value))) {
-      $map: map-merge($map, ($key: $value));
-    } @else {
-      $map: map-merge($map, ($key: mapMergeDeep(map-get($map, $key), $value, $refMap, inList($key, ('props', 'states')))));
-    }
-  }
-  @return $map;
-}
-
-
 /// setMapValue
 /// @param map $map  map of data
 /// @param string $key key to retrieve the value from
@@ -56,7 +27,7 @@
 
 @function setMapValue($map, $key, $value) {
   $newSet: ($key: $value);
-  @return map-merge($map, $newSet);
+  @return map.merge($map, $newSet);
 }
 
 /// toMap [w.i.p]
@@ -68,15 +39,15 @@
 /// @todo consider nested map
 
 @function toMap($string) {
-  @if isMap($string) {
+  @if type.isMap($string) {
     @return $string;
   }
   $map: ();
-  $stripParenthesis: str-slice($string, 2, str-length($string) - 1);
-  $list: split(',', $stripParenthesis);
+  $stripParenthesis: string.slice($string, 2, string.length($string) - 1);
+  $list: fn.splitDeep(',', $stripParenthesis);
   @each $item in $list {
-    $itemList: split(':', $item);
-    $map: setMapValue($map, nth($itemList, 1), nth($itemList, 2));
+    $itemList: fn.splitDeep(':', $item);
+    $map: setMapValue($map, list.nth($itemList, 1), list.nth($itemList, 2));
   }
   @return $map;
 }

package/scss/functions/_number.scss

@@ -1,3 +1,8 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
 /// toNumber
 /// convert a string to number
 /// @credit-to Hugo Giraudel https://www.sassmeister.com/gist/9fa19d254864f33d4a80
@@ -5,31 +10,31 @@
 /// @return number
 
 @function toNumber($value) {
-  @if type-of($value) == 'number' {
+  @if meta.type-of($value) == 'number' {
     @return $value;
-  } @else if type-of($value) != 'string' {
+  } @else if meta.type-of($value) != 'string' {
     @warn('Value for `to-number` should be a number or a string.');
   }
   
   $result: 0;
   $digits: 0;
-  $minus: str-slice($value, 1, 1) == '-';
+  $minus: string.slice($value, 1, 1) == '-';
   $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
   
-  @for $i from if($minus, 2, 1) through str-length($value) {
-    $character: str-slice($value, $i, $i);
+  @for $i from if($minus, 2, 1) through string.length($value) {
+    $character: string.slice($value, $i, $i);
     
-    @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return toLength(if($minus, -$result, $result), str-slice($value, $i));
+    @if not (list.index(map.keys($numbers), $character) or $character == '.') {
+      @return toLength(if($minus, -$result, $result), string.slice($value, $i));
     }
     
     @if $character == '.' {
       $digits: 1; 
     } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);  
+      $result: $result * 10 + map.get($numbers, $character);  
     } @else {
       $digits: $digits * 10;
-      $result: $result + map-get($numbers, $character) / $digits;
+      $result: $result + map.get($numbers, $character) / $digits;
     }
   }
   
@@ -47,8 +52,8 @@
 
 @function toLength($value, $unit) {
   $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
-  @if not index(map-keys($units), $unit) {
+  @if not list.index(map.keys($units), $unit) {
     @warn 'Invalid unit `#{$unit}`.';
   }
-  @return $value * map-get($units, $unit);
+  @return $value * map.get($units, $unit);
 }

package/scss/functions/_replace.scss

@@ -1,3 +1,6 @@
+@use 'sass:string';
+@use 'type';
+
 /// Replace
 /// @param string $search  The value being searched
 /// @param string $replace The replacement value
@@ -5,10 +8,10 @@
 /// @return String
 
 @function replace($search, $replace, $subject) {
-  $searchIndex: str-index($subject, $search);
-  @if isString($search) and isString($replace) and isString($subject) and $searchIndex {
-    $subjectStart: str-slice($subject, 1, $searchIndex - 1);
-    $subjectEnd: str-slice($subject, $searchIndex + str-length($search));
+  $searchIndex: string.index($subject, $search);
+  @if type.isString($search) and type.isString($replace) and type.isString($subject) and $searchIndex {
+    $subjectStart: string.slice($subject, 1, $searchIndex - 1);
+    $subjectEnd: string.slice($subject, $searchIndex + string.length($search));
     $newSubject: $subjectStart + $replace + $subjectEnd;
     @return replace($search, $replace, $newSubject);
   } @else {

package/scss/functions/_split.scss

@@ -1,18 +1,22 @@
+@use 'sass:list';
+@use 'sass:string';
+@use 'type';
+
 /// Split
 /// @param string $pattern The string character to split your string by
 /// @param string $subject The input string
 /// @param list   $list    The list being populated
 /// @return list
 
-@function split($pattern, $subject, $list:()) {
-  $searchIndex: str-index($subject, $pattern);
-  @if isString($pattern) and isString($subject) and $searchIndex {
-    $subjectStart: str-slice($subject, 1, $searchIndex - 1);
-    $subjectEnd: str-slice($subject, $searchIndex + str-length($pattern));
-    $newList: join($list, $subjectStart);
-    @return split($pattern, $subjectEnd, $newList);
+@function splitDeep($pattern, $subject, $list:()) {
+  $searchIndex: string.index($subject, $pattern);
+  @if type.isString($pattern) and type.isString($subject) and $searchIndex {
+    $subjectStart: string.slice($subject, 1, $searchIndex - 1);
+    $subjectEnd: string.slice($subject, $searchIndex + string.length($pattern));
+    $newList: list.join($list, $subjectStart);
+    @return splitDeep($pattern, $subjectEnd, $newList);
   } @else {
-    $newList: join($list, $subject);
+    $newList: list.join($list, $subject);
     @return $newList;
   }
 }

package/scss/functions/_strip.scss

@@ -1,7 +1,9 @@
+@use 'replace';
+
 /// Strip white spaces
 /// @param string
 /// @return string
 
 @function stripSpaces($string) {
-  @return replace(' ', '', #{$string}); 
+  @return replace.replace(' ', '', #{$string}); 
 }

package/scss/functions/_type.scss

@@ -1,9 +1,11 @@
+@use 'sass:meta';
+
 /// isString
 /// @param mixed $data
 /// @return bool
 
 @function isString($data) {
-  @if type-of($data) == 'string'{
+  @if meta.type-of($data) == 'string'{
     @return true;
   }
   @return false;
@@ -18,7 +20,7 @@
 /// @return bool
 
 @function isNumber($data) {
-  @if type-of($data) == 'number'{
+  @if meta.type-of($data) == 'number'{
     @return true;
   }
   @return false;
@@ -33,7 +35,7 @@
 /// @return bool
 
 @function isColor($data) {
-  @if type-of($data) == 'color'{
+  @if meta.type-of($data) == 'color'{
     @return true;
   }
   @return false;
@@ -48,7 +50,7 @@
 /// @return bool
 
 @function isList($data) {
-  @if type-of($data) == 'list'{
+  @if meta.type-of($data) == 'list'{
     @return true;
   }
   @return false;
@@ -63,7 +65,7 @@
 /// @return bool
 
 @function isMap($data) {
-  @if type-of($data) == 'map' {
+  @if meta.type-of($data) == 'map' {
     @return true;
   }
   @return false;

package/scss/helpers/_container.scss

@@ -1,3 +1,5 @@
+@use '../fn';
+
 // Container
 @mixin Container($param: null) {
   @include initElement('container', $param);
@@ -10,14 +12,14 @@
 
     $gutter: oo('container.gutter');
 
-    @if isMap($gutter) {
+    @if fn.isMap($gutter) {
       @each $key, $value in $gutter {
         @include breakpoint($key) {
           padding-right: $value;
           padding-left: $value;
         }
       }
-    } @else if isString($gutter) or isNumber($gutter) {
+    } @else if fn.isString($gutter) or fn.isNumber($gutter) {
       padding-right: $gutter;
       padding-left: $gutter;
     }

package/scss/helpers/_miscellaneous.scss

@@ -1,11 +1,13 @@
+@use '../fn';
+
 // Miscellaneous
 
 @mixin Misc($param: null) {
   @include initElement('misc', $param);
 
-  @if isNotEmpty(oo('misc')) {
+  @if fn.isNotEmpty(oo('misc')) {
     @each $name, $misc in oo('misc') {
-      .#{toKebabCase($name)} {
+      .#{fn.toKebabCase($name)} {
         @include generateStyles($misc);
       }
     }

package/scss/helpers/_visibility.scss

@@ -1,3 +1,5 @@
+@use '../fn';
+
 // Visibility Utilities
 
 @mixin Visibility($param: null) {
@@ -12,14 +14,14 @@
     @media screen { display: none !important; }
   }
   
-  @if isNotEmpty(oo('visibility.breakpoints')) {
+  @if fn.isNotEmpty(oo('visibility.breakpoints')) {
     @each $screen in oo('visibility.breakpoints') {
-        @include breakpoint($screen) {
-            .hidden\@#{$screen} { display: none !important; }
-        }
+      @include breakpoint($screen) {
+        .hidden\@#{$screen} { display: none !important; }
+      }
     }
   }
-  @if isNotEmpty(oo('visibility.pointbreaks')) {
+  @if fn.isNotEmpty(oo('visibility.pointbreaks')) {
     @each $screen in oo('visibility.pointbreaks') {
       @include pointbreak($screen) {
         .hidden\!\@#{$screen} { display: none !important; }

package/scss/mixins/_breakpoint.scss

@@ -1,36 +1,41 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use '../fn';
+
 @mixin breakpoint($key) {
   // make sure the key exist
-  @if map-has-key(oo('breakpoints'), $key) {
-    $width: map-get(oo('breakpoints'), $key);
+  @if map.has-key(oo('breakpoints'), $key) {
+    $width: map.get(oo('breakpoints'), $key);
     @media (min-width: $width) {
       @content;
     }
-  } @else if isEmpty($key) or $key == 'rt' {
+  } @else if fn.isEmpty($key) or $key == 'rt' {
     @content;
   }
 }
 
 @mixin pointbreak($key) {
   // make sure the key exist
-  @if map-has-key(oo('breakpoints'), $key) {
-    $minWidth: map-get(oo('breakpoints'), $key);
+  @if map.has-key(oo('breakpoints'), $key) {
+    $minWidth: map.get(oo('breakpoints'), $key);
     $maxWidth: $minWidth - 1;
-    @if inList(unit($minWidth), ('em', 'rem')) {
+    @if fn.inList(math.unit($minWidth), ('em', 'rem')) {
       $maxWidth: $minWidth - 0.001;
     }
     @media (max-width: $maxWidth) {
       @content;
     }
-  } @else if isEmpty($key) or $key == 'rt' {
+  } @else if fn.isEmpty($key) or $key == 'rt' {
     @content;
   }
 }
 
 @function areKeysBreakpoints($map){
-  $breakpointsKeys: join('rt', map-keys(oo('breakpoints')));
-  $mapKeys: map-keys($map);
+  $breakpointsKeys: list.join('rt', map.keys(oo('breakpoints')));
+  $mapKeys: map.keys($map);
   @each $key in $mapKeys {
-    @if inList($key, $breakpointsKeys) {
+    @if fn.inList($key, $breakpointsKeys) {
       @return true;
     }
   }

package/scss/mixins/_component.scss

@@ -1,10 +1,11 @@
-@import 'props';
+@use 'sass:map';
+@use '../fn';
 
 /// Create component
 /// @param string $name 
 
 @mixin ooComponent($name) {
-  @if isNotString($name) {
+  @if fn.isNotString($name) {
     @error 'Parameter $name on ooComponent must be a string';
   }
   [#{ooPrefix()}-#{$name}] {
@@ -17,10 +18,10 @@
 /// @param string $variantName
 
 @mixin ooComponentVariant($name, $variantName) {
-  @if isNotString($name) {
+  @if fn.isNotString($name) {
     @error 'Parameter $name on ooComponentVariant must be a string';
   }
-  @if isNotString($variantName) {
+  @if fn.isNotString($variantName) {
     @error 'Parameter $variantName on ooComponentVariant must be a string';
   }
   [#{ooPrefix()}-#{$name}~="#{$variantName}"] {
@@ -33,14 +34,14 @@
 /// @param $variantsMap
 
 @mixin generateComponentVariants($componentName, $variantsMap) {
-  @if isNotEmpty($variantsMap) {
+  @if fn.isNotEmpty($variantsMap) {
     @each $name, $props in $variantsMap {
-      @if isMap($props) {
-        $hasStates: if(map-has-key($props, 'states'), map-get($props, 'states'), null);
-        [#{ooPrefix()}-#{$componentName}~="#{toKebabCase($name)}"] {
-          @if map-has-key($props, 'states') {
-            $states: map-get($props, 'states');
-            $props: map-remove($props, 'states');
+      @if fn.isMap($props) {
+        $hasStates: if(map.has-key($props, 'states'), map.get($props, 'states'), null);
+        [#{ooPrefix()}-#{$componentName}~="#{fn.toKebabCase($name)}"] {
+          @if map.has-key($props, 'states') {
+            $states: map.get($props, 'states');
+            $props: map.remove($props, 'states');
             @include generateStatesProperties($states);
           }
           @include generateProperties($props);
@@ -55,24 +56,24 @@
 /// @param $componentMap
 
 @mixin generateComponent($componentMap) {
-  $name: if(map-has-key($componentMap, 'name'), toKebabCase(map-get($componentMap, 'name')), null);
-  $hasProps: if(map-has-key($componentMap, 'props') or map-has-key($componentMap, 'states'), true, false);
-  $variants: if(map-has-key($componentMap, 'variants'), map-get($componentMap, 'variants'), null);
+  $name: if(map.has-key($componentMap, 'name'), fn.toKebabCase(map.get($componentMap, 'name')), null);
+  $hasProps: if(map.has-key($componentMap, 'props') or map.has-key($componentMap, 'states'), true, false);
+  $variants: if(map.has-key($componentMap, 'variants'), map.get($componentMap, 'variants'), null);
 
-  @if isNotEmpty($name) and $hasProps {
+  @if fn.isNotEmpty($name) and $hasProps {
     [#{ooPrefix()}-#{$name}] {
       @include generateStyles($componentMap);
     }
   }
-  @if isNotEmpty($name) and isNotEmpty($variants) {
+  @if fn.isNotEmpty($name) and fn.isNotEmpty($variants) {
     @include generateComponentVariants($name, $variants);
   }
 }
 
 @mixin generateComponents($components) {
   @each $name, $componentMap in $components {
-    @if not map-has-key($componentMap, 'name') {
-      $componentMap: map-merge(('name': $name) , $componentMap);
+    @if not map.has-key($componentMap, 'name') {
+      $componentMap: map.merge(('name': $name) , $componentMap);
     }
     @include generateComponent($componentMap);
   }

package/scss/mixins/_loop.scss

@@ -1,10 +1,10 @@
-@import 'breakpoint';
-
+@use 'sass:string';
+@use '../fn';
 
 // Loop Properties
 @mixin loopProperties($properties, $value, $isImportant) {
   // multiple properties
-  @if isList($properties) {
+  @if fn.isList($properties) {
     @each $property in $properties {
       #{$property}: if($isImportant, #{$value} !important, #{$value});
     }
@@ -23,30 +23,30 @@
 
 @mixin loop($data, $properties, $prefix, $isImportant:false, $suffix:'') {
   // Make sure to have the correct format or do not generate rules
-  @if isNotEmpty($data) {
-    @if isString($data) {
+  @if fn.isNotEmpty($data) {
+    @if fn.isString($data) {
       #{$prefix}-#{$data}#{$suffix} {
         @include loopProperties($properties, $data, $isImportant);
       }
-    } @else if isList($data) {
+    } @else if fn.isList($data) {
       @each $value in $data {
         #{$prefix}-#{$value}#{$suffix} {
           @include loopProperties($properties, $value, $isImportant);
         }
       }
-    } @else if isMap($data) {
+    } @else if fn.isMap($data) {
       @each $key, $value in $data {
-        $affix: if(isEmpty($key), '', '-');
+        $affix: if(fn.isEmpty($key), '', '-');
 
         #{$prefix}#{$affix}#{$key}#{$suffix} {
           // responsive properties ?
-          @if isMap($value) and str-index($suffix, $substring: "\@") == null {
+          @if fn.isMap($value) and string.index($suffix, $substring: "\@") == null {
             @each $child-breakpoint, $child-value in $value {
               @include breakpoint($child-breakpoint) {
                 @include loopProperties($properties, $child-value, $isImportant);
               }
             }
-          } @else if isNotMap($value) {
+          } @else if fn.isNotMap($value) {
             @include loopProperties($properties, $value, $isImportant);
           }
         }
@@ -64,9 +64,9 @@
 /// @param string $suffix String to append to the selector
 
 @mixin loopBreakpoints($breakpoints, $data, $properties, $prefix, $isImportant:false, $suffix:'') {
-  @if isNotEmpty($breakpoints) and isNotEmpty($data) {
-    @if isString($breakpoints) {
-      $breakpoints: toList($breakpoints);
+  @if fn.isNotEmpty($breakpoints) and fn.isNotEmpty($data) {
+    @if fn.isString($breakpoints) {
+      $breakpoints: fn.toList($breakpoints);
     }
     @each $breakpoint in $breakpoints {
       @include breakpoint($breakpoint) {