oo-loop 1.0.3 → 1.1.0

package/scss/{functions → oo}/_ooSet.scss

@@ -1,3 +1,8 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use '../fn';
+
 /// ooSet
 /// Set value in to map with the ooFormat (default $ooLoop)
 /// @param string $key  ooFormat key
@@ -12,53 +17,53 @@
 }
 
 @function ooSetSoft($key, $value, $map:null) {
-  $list: split('.', $key);
+  $list: fn.splitDeep('.', $key);
   $map:  if($map == null, $ooLoop, $map);
   
   @if isRef($value) {
     $value: getRefValue($value, $map);
   }
   
-  @if length($list) > 1 {
+  @if list.length($list) > 1 {
     $mapValue: $value;
-    @for $i from 1 through length($list) {
-      $mapValue: ( #{nth($list, length($list) - $i + 1)} : $mapValue );
+    @for $i from 1 through list.length($list) {
+      $mapValue: ( #{list.nth($list, list.length($list) - $i + 1)} : $mapValue );
     }
-    $map: mapMergeDeep($map, $mapValue);
+    $map: ooMergeDeep($map, $mapValue);
   } @else {
-    $map: mapMergeDeep($map, (#{$key}: $value));
+    $map: ooMergeDeep($map, (#{$key}: $value));
   }
   
   @return $map;
 }
 
 @function ooSetHard($key, $value, $map:null) {
-  $list: split('.', $key);
+  $list: fn.splitDeep('.', $key);
   $map:  if($map == null, $ooLoop, $map);
 
   @if isRef($value) {
     $value: getRefValue($value, $map);
   }
 
-  @if length($list) > 1 {
-    $key: replace("#{nth($list , 1)}.", '', $key);
-    $mapValue: getMapValue($map, nth($list , 1));
+  @if list.length($list) > 1 {
+    $key: fn.replace("#{list.nth($list , 1)}.", '', $key);
+    $mapValue: fn.getMapValue($map, list.nth($list , 1));
 
     @if ($mapValue == null) {
       $mapValue: ();
     }
 
-    $map: map-merge(
+    $map: map.merge(
       $map,
       (
-        nth($list, 1): map-merge(
+        list.nth($list, 1): map.merge(
           $mapValue, 
           ooSetHard($key, $value, $mapValue)
         ),
       )
     );
   } @else {
-    $map: map-merge($map, ($key: $value));
+    $map: map.merge($map, ($key: $value));
   }
 
   @return $map;

package/scss/utilities/_color.scss

@@ -1,8 +1,10 @@
+@use '../fn';
+
 // Color Utilities
 
 @mixin Color($param: null) {
   @include initElement('color', $param);
-  @if isNotEmpty(oo('color')) {
+  @if fn.isNotEmpty(oo('color')) {
     @include generateUtilities(oo('color'));
   }
 }

package/scss/utilities/_float.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../fn';
+
 // FLoat utilites
 
 @mixin Float($param: null) {
@@ -14,8 +17,8 @@
       }
     }
   }
-  @if isNotEmpty(oo('float.values')) {
-    $float: map-remove(oo('float'), 'clearfix');
+  @if fn.isNotEmpty(oo('float.values')) {
+    $float: map.remove(oo('float'), 'clearfix');
     @include generateUtilities((float: $float));
   }
 }

package/scss/utilities/_spacing.scss

@@ -1,8 +1,10 @@
+@use '../fn';
+
 // Spacing
 
 @mixin Spacing($param: null) {
   @include initElement('spacing', $param);
-  @if isNotEmpty(oo('spacing')) {
+  @if fn.isNotEmpty(oo('spacing')) {
     @include generateUtilities(oo('spacing'));
   }
 }

package/scss/utilities/_typography.scss

@@ -1,8 +1,10 @@
+@use '../fn';
+
 // Typography utilites
 
 @mixin Typography($param: null) {
   @include initElement('typo', $param);
-  @if oo('typo') {
+  @if fn.isNotEmpty(oo('typo')) {
     @include generateUtilities(oo('typo'));
   }
 }

package/scss/utilities/_wrapper.scss

@@ -1,8 +1,10 @@
+@use '../fn';
+
 // Wrapper
 
 @mixin Wrapper($param: null) {
   @include initElement('wrapper', $param);
-  @if isNotEmpty(oo('wrapper')) {
+  @if fn.isNotEmpty(oo('wrapper')) {
     @include generateUtilities((wrapper: oo('wrapper')));
   }
 }

package/CHANGELOG.md

@@ -1,236 +0,0 @@
-# Loop changelog
-
-## 1.0.3: 2022-04-05
-
-### Feature
-- Set up function to return the alias information
-### Fixes
-- Return the reference value and send a warning if the alias function cannot be performed
-
-## 1.0.2: 2022-04-04
-
-### Fixes
-- Fix `pointbreak()` on rem unit
-- Fix generating double properties when merging custom map with camelCase `props`
-- Fix the lost of references when merging custom config on `init`
-- Bump dependencies
-
-## 1.0.1 : 2020-07-30
-
-- Add missing `states` properties in variants
-- Fix rule to add any pseudo elements, states and pseudo-selectors from `props`
-- Bump lodash from 4.17.15 to 4.17.19
-
-## 1.0.0
-
-### Changes
-- Unify all `props` to use kebab-case css properties
-- `dataAttr` is set to *false* by default, back to `oo-component` from start
-- Form inputs components are not included by default except for `oo-input`
-
-### Features
-- Add `variants` property to column
-- Ability to generate variants component only from the config map
-
-## 1.0.0-beta.2
-
-- Reset properly the column to auto on breakpoint `auto@sm` `auto@md` `auto@lg` 
-
-## 1.0.0-beta.1
-
-- Fix spread operator chaining
-- Add option to set a size for a template area column
-
-## 1.0.0-beta
-
-New Version implementing the single config map approach for the framework settings
-
-- Initialize Loop from `ooInit()` and launch it from `ooCreate()`
-- Configuration from Functions `ooSet()` `ooAdd()` `ooPipe()`
-- New Column and Form syntax
-- New Template component
-- New Utilities structure
-
-## 0.4.17
-
-* Fix Radio button on IE 11
-
-## 0.4.16
-
-* Fix radio checkmark alignment on old browser
-
-## 0.4.15
-
-* Fix Toggle compatibility with older browser
-
-## 0.4.14
-
-* `loopBreakpoints()` correctly generates utilities from `$breakpoints` parameter (Was always reading from global `$breakpoints-classes`)
-
-## 0.4.13
-
-* Remove scaling on button active status to avoid adding conflict in a case where the button needs to be animated
-
-## 0.4.12
-
-* Fix grid when it contains elements with overflow content
-
-## 0.4.11
-
-### Features
-* Ability to have a set of vertical gutters for `oo-column` via the variable `$columns-v-gutter-sizes` 
-* Responsive v-gutter modifiers `v-gutter-${gutterName}@{breakpoint}` (assign the needed breakpoints to `$columns-v-gutter-sizes-breakpoints-classes`) see doc for more info.
-
-**Sample of use**
-
-```html
-<div oo-column="row v-gutter-less v-gutter-tiny@sm v-gutter-small@md v-gutter-large@lg">
-  <div oo-column="col"></div>
-  <div oo-column="col"></div>
-  <div oo-column="col"></div>
-</div>
-```
-
-### Changes
-* The variable `$anchor-color-hover` gets a darker version of  `$anchor-color` as default value. (No more `$color-secondary`)
-
-### Functions
-New functions available to facilitate the reuse of values coming from Map type variables
-* `getColors($keyName)` to get value from the `$colors` map
-* `getTextColors($keyName)` to get value from the `$text-colors` map
-* `getBgColors($keyName)` to get value from the `$bg-colors` map
-* `getBorderColors($keyName)` to get value from the `$border-colors` map
-* `getTextSizes($keyName)` to get value from the `$text-sizes` map
-* `getMapValue($map, $key)` get map value by passing the map to retrieve from and the name of the key . (Combination of sass functions  `map-get` and `map-has-key`)
-
-## 0.4.10
-* `normalize.css` has been removed from dependencies and moved to its own loop partial `loop/scss/base/_normalize.scss`
-* Allowing the use of loop without any javascript task runner building the css file.
-
-## 0.4.9
-
-* Fix `Textarea` height  and max-width when using `oo-form="input"`
-* Fix custom input paddings bug created by firefox fix from `v0.4.8`
-
-## 0.4.8
-
-* Fix Firefox form inputs and selects (get the same height)
-* Fix typo, correct class name => `.container-fluid` now working
-
-## 0.4.7
-
-### Features
-* `oo-grid="areas"` Add template areas to Grid
-* `order-{$number}@{$breakpoint}` Add order modifier to `oo-grid="col"`
-* `$font-size-root` Root font-size is now modifiable (default = 62.5%)
-* `$spacing-ratio` Ratio to translate px into rem. Spacing generated values are rem but className still use the pixel number for better representation
-* `$use-grid-layout` `$use-grid-areas` `$use-grid-order` `$use-grid-gap` `$use-v-grid-gap` Variables to turn on/off the options
-
-### Deprecated
-* `inArray()` function in favour of `inList()` and `InNotList()`
-
-## 0.4.6
-
-* Ability to have responsive gutter modifiers `gutter-${gutterName}@{breakpoint}` (assign the needed breakpoints to `$columns-gutter-sizes-breakpoints-classes`) see doc for more info.
-
-**Sample of use**
-
-```html
-<div oo-column="row gutter-less gutter-tiny@sm gutter-small@md gutter-large@lg">
-  <div oo-column="col"></div>
-  <div oo-column="col"></div>
-  <div oo-column="col"></div>
-</div>
-```
-
-## 0.4.5
-
-**The column system has been reverted to the old one to avoid overloading the css file with rules**.
-
-The v0.4.4 handling the hotfix for gutters on the new column was adding 48 rules per gutter.
-The default gutters tiny and less were then adding 96 extra rules instead of 4 on the previous one.
-
-The ability to have different gutters makes the use of the oo-column flexible to cover lots of purposes.
-In a project we're working on, we're already using 5 extra gutters generating 240 more rules instead of 10
-
-Those significant numbers made us revert the changes made on v0.4.3 and v0.4.4
-
-## 0.4.4
-
-* Recalculate the columns with the different gutters
-
-## 0.4.3
-
-* New approach to the column system, to be able to style and apply classes to  `oo-column="col-*"` without implicating the gutter.
-
-```html
-<div oo-column="row">
-  <div oo-column="col" class="bg-primary"></div>
-  <div oo-column="col" class="border-primary"></div>
-</div>
-```
-
-## 0.4.2
-
-* Add `$input-focus-border-color` variable to change the color of the border on focus state
-
-## 0.4.0
-
-### Features
-* Breakpoint option to wrapper `$wrapper-breakpoints-classes` (`.wrapper-tiny@sm`...)
-* Handle Float utility with variables
-* Spacing variables `$v-spacing-from` `$v-spacing-to` `$h-spacing-from` `$h-spacing-to`
-* `$btn-border-color` variable added
-* `$btn-colors` and `$btn-outline-colors` variables added (custom colors mapType)
-* Function `isString` `isList` `isMap` as well as `isNotString` `isNotList` `isNotMap`
-
-### Bug fixes
-* Mixin dependencies including in the mixin file
-* Toggle refactor
-* `isEmpty` correctly returning false
-* Grid responsive columns and rows
-
-### Changes
-* Single variables `$h*-font-size` and `$heading-font-sizes-breakpoints`  are not used anymore. All the sizes are set in `$heading-font-sizes` allowing map values for breakpoints.
-* `$heading-letter-spacing-list` replaced by `$heading-letter-spacing-tags`
-
-### Deprecated
-* `.wrapper` in favor of `.wrapper-medium`
-* `large` `tiny` as default gutter values
-* `danger` `warning` `success` as default color values (let the user decide to add them)
-* $text-transforms `capitalize` `lowercase` as default values (let the user decide to add them)
-* `.text-italic` in favor of `.font-italic` 
-
-### Removals
-* All utility addon variabes. `$text-sizes-addon` `$text-alignments-addon` `$text-transforms-addon` `$text-decorations-addon` `$font-styles-addon` `$font-weights-addon` `$font-families-addon` `$letter-spacings-addon` `$text-colors-addon` `$bg-colors-addon` `$border-colors-addon`
-* `code.scss` not needed for main loop (been moved to looper)
-* `.disabled` not having the characteristics to be on main loop (been moved to looper)
-* `form="group"` too specific, not loop philosophy (been moved to looper)
-
-## 0.3.9
-
-* Fix Radio resizing, and transition conflict (same bug as checkbox)
-
-## 0.3.8
-
-* Fix checkbox resizing, and transition conflict
-
-## 0.3.7
-
-* Add `normalize.css` dependency
-
-## 0.3.6
-
-* Add `form="group"` to create input group
-
-## 0.3.5
-
-* Added to npm as `oo-loop`
-
-## 0.3.4
-
-* Launch Loop beta
-
-## 0.2.0
-
-* Differentiates components from utilities  

package/scss/functions/_all.scss

@@ -1,21 +0,0 @@
-@import
-  'type',
-  'empty',
-  'split',
-  'extract',
-  'replace',
-  'strip',
-  'number',
-  'color',
-  'list',
-  'map',
-  'convert',
-  'oo',
-  'ooSet',
-  'ooAdd',
-  'ooPipe',
-  'ooUse',
-  'ooAlias',
-  'ooRef',
-  'ooParse'
-;

package/scss/functions/_oo.scss

@@ -1,38 +0,0 @@
-/// oo
-/// Get value from a map with the ooFormat (default $ooLoop)
-/// @param string  $key  ooFormat key
-/// @param map|null $map the map to update (default $ooLoop)
-/// @return mixed
-
-@function oo($key, $map:null) {
-  $map: if($map == null, $ooLoop, $map);
-
-  // double check if quotes exist (issue with some sass version and PostCSS Parser)
-  @if str-slice($key, 1, 1) == '"' and str-slice($key, str-length($key), - 1) == '"' {
-    $key: str-slice($key, 2, str-length($key) - 1);
-  }
-
-  @if str-index($key, '.') == null {
-    @return getMapValue($map, $key);
-  }
-
-  $list: split('.', $key);
-
-  @for $i from 1 through length($list) {
-    $value: getMapValue($map, nth($list, $i));
-    @if $i == length($list) and isEmpty($value) {
-      $value: getMapValue($map, toKebabCase(nth($list, $i)));
-    }
-    $map: $value;
-  }
- 
-  @return $map;
-}
-
-/// ooPrefix
-/// get loop prefix
-/// @return string
-
-@function ooPrefix() {
-  @return if(oo(dataAttr) == true, 'data-oo', 'oo');
-}

package/scss/functions/_ooAlias.scss

@@ -1,126 +0,0 @@
-$ooAlias: (
-  (
-    name: 'ooDarken',
-    function: 'darken',
-    paramType: ('color', 'number'),
-  ),
-  (
-    name: 'ooLighten',
-    function: 'lighten',
-    paramType: ('color', 'number'),
-  ),
-);
-
-
-// Aliases function used before init
-
-@function ooDarken($value, $percentage) {
-  @if isNotColor($value) {
-    @return $value;
-  }
-  @return darken($value, $percentage);
-}
-@function ooLighten($value, $percentage) {
-  @if isNotColor($value) {
-    @return $value;
-  }
-  @return lighten($value, $percentage);
-}
-
-/// isAlias
-/// check if a string is a sass alias function
-/// @param string $string the string to check
-/// @return bool
-
-@function isAlias($string) {
-  @if isNotString($string) {
-    @return false;
-  }
-
-  $isAlias: false;
-  @each $alias in $ooAlias {
-    $aliasName: getMapValue($alias, 'name');
-    $aliasLength: str-length($aliasName);
-    @if str-slice(#{$string}, 1, $aliasLength + 1) == '#{$aliasName}(' and str-slice(#{$string}, str-length(#{$string})) == ')' {
-      $isAlias: true;
-    }
-  }
-  @return $isAlias;
-}
-
-/// getAliasInfo
-/// retrieve the alias information
-/// @param string $aliasFunction The complete alias function
-/// @return map|null
-
-@function getAliasInfo($aliasFunction) {
-  @each $alias in $ooAlias {
-    $aliasName: getMapValue($alias, 'name');
-    $aliasLength: str-length($aliasName);
-    $aliasFunctionName: stripSpaces(str-slice($aliasFunction, 1, $aliasLength));
-
-    @if $aliasFunctionName == $aliasName {
-      $currentAlias: $alias;
-      $functionName: getMapValue($alias, 'function');
-
-      @return (
-        name: $aliasName,
-        nameLength: $aliasLength,
-        function: if(function-exists('get-function'), get-function($functionName), $functionName),
-        functionName: $functionName,
-        paramType: getMapValue($alias, 'paramType'),
-      );
-    }
-  }
-
-  @return null;
-}
-
-/// getAliasValue
-/// retrieve the value of an alias function
-/// @param string $aliasFunction The complete alias function
-/// @param string $value Value of the 1st parameter
-/// @return bool
-
-@function getAliasValue($aliasFunction, $value:null) {
-  $name: null;
-  $paramType: null;
-  $function: null;
-  $params: split(',', inspect($aliasFunction));
-  $param1: nth($params, 1);
-
-  $aliasInfo: getAliasInfo($aliasFunction);
-
-  @if $aliasInfo != null {
-    $name: getMapValue($aliasInfo, 'name');
-    $function: getMapValue($aliasInfo, 'function');
-    $paramType: getMapValue($aliasInfo, 'paramType');
-    $param1: stripSpaces(str-slice($param1, getMapValue($aliasInfo, 'nameLength') + 2, str-length($param1)));
-  }
-
-  $param1: if($value==null, $param1, $value);
-
-  @if length($params) > 1 {
-    $param2: stripSpaces(str-slice(#{nth($params, 2)}, 1, -2));
-
-    $param1Type: null;
-    $param2Type: null;
-
-    @if $paramType != null {
-      $param1Type: nth($paramType, 1);
-      $param2Type: nth($paramType, 2);
-    }
-
-    $param1: toType($param1Type, $param1);
-    $param2: toType($param2Type, $param2);
- 
-    @if type-of($param1) != $param1Type or type-of($param2) != $param2Type {
-      @warn('The alias `#{$aliasFunction}` is targetting `#{$value}` and therefore cannot be used with the sass function `#{getMapValue($aliasInfo, 'functionName')}`');
-      @return $value;
-    }
-
-    @return call($function, $param1, $param2);
-  }
-
-  @return call($function, $param1);
-}