* zin: add flex widget.

zin/func.php

@@ -20,3 +20,7 @@ function page()      {return createWg('page',    func_get_args());}
 function btngroup()  {return createWg('btngroup', func_get_args());}
 function checkbox()  {return createWg('checkbox', func_get_args());}
 function pagemain()  {return createWg('pagemain', func_get_args());}
+function row()       {return createWg('row', func_get_args());}
+function column()    {return createWg('column', func_get_args());}
+function center()    {return createWg('center', func_get_args());}
+function cell()      {return createWg('cell', func_get_args());}

zin/wg/cell/v1.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace zin;
+
+class cell extends wg
+{
+    static $defineProps = 'order,grow,shrink,width,align,flex';
+
+    public function onAddChild($child)
+    {
+        if($child instanceof wg) {
+            $this->addToBlock('inner', $child);
+            return false;
+        }
+        return null;
+    }
+
+    protected function build()
+    {
+        $order  = empty($this->prop('order')) ? '0' : $this->prop('order');
+        $grow   = empty($this->prop('grow')) ? '0' : $this->prop('grow');
+        $shrink = empty($this->prop('shrink')) ? '1' : $this->prop('shrink');
+        $basis  = empty($this->prop('width')) ? 'auto' : $this->prop('width');
+        $align  = empty($this->prop('align')) ? 'auto' : $this->prop('align');
+        $flex   = empty($this->prop('flex')) ? '0 1 auto' : $this->prop('flex');
+
+        if(is_numeric($basis)) $basis .= 'px';
+        elseif(preg_match('/^(\d+)\/(\d+)$/', $basis, $matches) !== 0) {
+            $basis = ((int)$matches[1] / (int)$matches[2] * 100) . '%';
+        }
+        return div(
+            setStyle(array(
+                'order'       => $order,
+                'flex-grow'   => $grow,
+                'flex-shrink' => $shrink,
+                'basis'       => $basis,
+                'align-self'  => $align,
+                'flex'        => $flex
+            )),
+            $this->block('inner'),
+        );
+    }
+}

zin/wg/center/v1.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace zin;
+
+class center extends wg
+{
+    public function onAddChild($child)
+    {
+        if($child instanceof wg) {
+            $this->addToBlock('inner', $child);
+            return false;
+        }
+        return null;
+    }
+
+    protected function build()
+    {
+        return div(
+            setClass("flex justify-center items-center"),
+            $this->block('inner'),
+        );
+    }
+}

zin/wg/column/v1.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace zin;
+
+class column extends wg
+{
+    static $defineProps = 'justify,align';
+
+    public function onAddChild($child)
+    {
+        if($child instanceof wg) {
+            $this->addToBlock('inner', $child);
+            return false;
+        }
+        return null;
+    }
+
+    protected function build()
+    {
+        $justify = empty($this->prop('justify')) ? 'start' : $this->prop('justify');
+        $align = empty($this->prop('align')) ? 'start' : $this->prop('align');
+        return div(
+            setClass("col justify-$justify items-$align"),
+            $this->block('inner'),
+        );
+    }
+}

zin/wg/row/v1.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace zin;
+
+class row extends wg
+{
+    static $defineProps = 'justify,align';
+
+    public function onAddChild($child)
+    {
+        if($child instanceof wg) {
+            $this->addToBlock('inner', $child);
+            return false;
+        }
+        return null;
+    }
+
+    protected function build()
+    {
+        $justify = empty($this->prop('justify')) ? 'start' : $this->prop('justify');
+        $align = empty($this->prop('align')) ? 'start' : $this->prop('align');
+        return div(
+            setClass("row justify-$justify items-$align"),
+            $this->block('inner'),
+        );
+    }
+}