Add Pairs, List, Hash methods

Author: dwarring

Changes

@@ -1,4 +1,5 @@
 {{$NEXT}}
+    - Handle Pairs, List, Hash methods
 
 0.9.7  2024-09-04T10:56:52+12:00
     - Fix setting of 'em' in cloning and copying #23

docs/CSS/Properties.md

@@ -138,14 +138,17 @@ Options:
 ### measure
 
 ```raku
-# Converts a value to a numeric quantity;
+# Converts values to a normalized numeric quantities;
 my Numeric $font-size = $css.measure: :font-size; # get current font size
 $font-size = $css.measure: :font-size<smaller>;   # compute a smaller font
 $font-size = $css.measure: :font-size(120%);      # compute a larger font
 my $weight = $css.measure: :font-weight;          # get current font weight 100..900
+my $height = $css.measure: :height<10px>;         # get height in base units
 $weight = $css.measure: :font-weight<bold>;       # compute bold font weight
 ```
 
+All length values are converted to the current base units (default `pt`).
+
 This function is implemented for `font-size`, `font-weight`, `letter-spacing`, `line-height`, and `word-spacing`.
 
 It also works for box related properties: `width`, `height`, `{min|max}-{width|height}`, `border-{top|right|bottom|left}-width`, and `{padding|margin}-{top|right|bottom|left}`. The `reference-width` attribute represents the width of a containing element; which needs to set for correct calculation of percentage box related quantities:
@@ -235,7 +238,7 @@ method clone
 ------------
 
 ```raku
-    method clone(@decls, *%opts) returns CSS::Properties
+method clone(@decls, *%opts) returns CSS::Properties
 ```
 
 Creates a deep copy of a CSS declarations object
@@ -307,6 +310,16 @@ method delete(
 
 delete property values from the list of populated properties
 
+### Pairs, List, Array, Hash, Slip
+
+Pairs, Lists and Hashes are all supported as pairs of leaf properties and measured values.
+
+```raku
+use CSS::Properties;
+my CSS::Properties() $css = "color:red; padding: 1pt";
+dd $css.Pairs;
+```
+
 ### method property
 
 ```raku

docs/index.md

@@ -12,16 +12,21 @@ use CSS::Units :pt;
 use CSS::Properties;
 
 my CSS::Properties() $css = "color:red !important; padding: 1pt";
+
+say $css.color.hex; # (FF 00 00)
 say $css.important("color"); # True
-$css.border-color = 'red';
 
+$css.border-color = 'blue';
+
+# set all four margins individually (top, left, bottom, right)
 $css.margin = [5pt, 2pt, 5pt, 2pt];
-$css.margin = 5pt;  # set margin on all 4 sides
+# set a common margin on all four sides
+$css.margin = 5pt;
 
 # set text alignment
 $css.text-align = 'right';
 
-say ~$css; # border-color:red; color:red!important; margin:5pt; padding:1pt; text-align:right;
+say ~$css; # border-color:blue; color:red!important; margin:5pt; padding:1pt; text-align:right;
 ```
 
 Classes in this module

lib/CSS/Properties.rakumod

@@ -190,14 +190,17 @@ Options:
 =begin pod
 =head3 measure
 =begin code :lang<raku>
-# Converts a value to a numeric quantity;
+# Converts values to a normalized numeric quantities;
 my Numeric $font-size = $css.measure: :font-size; # get current font size
 $font-size = $css.measure: :font-size<smaller>;   # compute a smaller font
 $font-size = $css.measure: :font-size(120%);      # compute a larger font
 my $weight = $css.measure: :font-weight;          # get current font weight 100..900
+my $height = $css.measure: :height<10px>;         # get height in base units
 $weight = $css.measure: :font-weight<bold>;       # compute bold font weight
 =end code
 
+All length values are converted to the current base units (default C<pt>).
+
 This function is implemented for `font-size`, `font-weight`, `letter-spacing`, `line-height`, and `word-spacing`.
 
 It also works for box related properties: `width`, `height`, `{min|max}-{width|height}`, `border-{top|right|bottom|left}-width`, and `{padding|margin}-{top|right|bottom|left}`.
@@ -803,6 +806,20 @@ method delete(*@props) {
     self;
 }
 
+method Pairs is also<Seq> handles<List Array Hash> {
+    %!values.pairs.sort.map: { .key => $!calc.measure: |$_ }
+}
+=head3 Pairs, List, Array, Hash, Slip
+
+=para Pairs, Lists and Hashes are all supported as pairs of
+leaf properties and measured values.
+
+=begin code :lang<raku>
+use CSS::Properties;
+my CSS::Properties() $css = "color:red; padding: 1pt";
+dd $css.Pairs;
+=end code
+
 method dispatch:<.?>(\name, |c) is raw {
     self.can(name)
         ?? self."{name}"(|c)

t/01-property-basic.t

@@ -1,10 +1,11 @@
 use v6;
 use Test;
-plan 16;
+plan 18;
 
 use CSS::Properties::PropertyInfo;
 use CSS::Properties;
 use CSS::Units :pt, :px;
+use CSS::Grammar::Test :&json-eqv;
 
 my CSS::Properties::PropertyInfo $sample-prop .= new( :name<background-image> );
 
@@ -36,4 +37,22 @@ is $css2.write, 'height:5px; margin:7pt;', 'write';
 $css2.copy($css);
 is $css2.write, 'height:5px; margin:5pt; width:4px;', 'copy/write';
 
+cmp-ok $css2.List, &json-eqv, (
+    :height(15/4),
+    :margin-bottom(5.0),
+    :margin-left(5.0),
+    :margin-right(5.0),
+    :margin-top(5.0),
+    :width(3.0)
+);
+
+cmp-ok $css2.Hash, &json-eqv, {
+    :height(15/4),
+    :margin-bottom(5.0),
+    :margin-left(5.0),
+    :margin-right(5.0),
+    :margin-top(5.0),
+    :width(3.0)
+};
+
 done-testing;

t/measure.t

@@ -1,6 +1,6 @@
 use v6;
 use Test;
-plan 28;
+plan 30;
 
 use CSS::Units :pt, :px, :pc, :in, :vw, :vh, :em, :ex, :percent;
 use CSS::Properties;
@@ -30,6 +30,10 @@ is '%0.2f'.sprintf($css.measure: :font-size<smaller>), '10.00', '$css.measure("s
 $css .= new: :style("border-spacing: 3pt .75em");
 is $css.measure(:border-spacing), [3.0, 9.0];
 
+$css .= new: :style("height:5px");
+is $css.measure(:height), 15/4;
+is $css.measure(:height($css.height)), 15/4;
+
 # change base units
 $css .= new: :units<pc>;
 is $css.units, 'pc', 'changed units';