SERV-2286 - table documentation

src/Views/Limitless/Table/Documentation/Index.blade.php

@@ -3,19 +3,163 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("");
-    @endphp
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Table", 'icon' => 'icon-table2'])
+        <p>A data container with rows and columns.</p>
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+        @Limitless::ElementCardStart(['title' => "TableStart"])
+
+            <p>The opening element for the table.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'extra'],
+                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'Adds custom attributes for the table element. existing attributes such as class will be overwritten.']
+                    ]
+                ])
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "TableStop"])
+
+            <p>The closing element for the table.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters : NONE</h6>
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "TableAutofillHeader"])
+
+            <p>Populates column headers. Parameters needs to be inside an array of column arrays.</p>
+
+            @php
+                $headerExample = base64_decode("Ly8gbWFpbiBhcnJheQpbCgkvLyBjb2x1bW5zIGFycmF5CglbJ25hbWUnID0+ICdDb2x1bW4xJywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJWyduYW1lJyA9PiAnQ29sdW1uMiddLAoJWyduYW1lJyA9PiAnQ29sdW1uMyddCl0=");
+            @endphp
+
+            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $headerExample ])
+
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'name'],
+                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                        ['value' => 'Column header name to display.']
+                    ],
+                    [
+                        ['value' => 'secure'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Sets the <code>name</code> value to secure or unsecure. If secure is <code>false</code>, value can have HTML tags.', 'secure' => false]
+                    ]
+                ])
+
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "TableAutofillBody"])
+
+            <p>Populates the table body data. Parameters needs to be inside an array of row array of column arrays.</p>
+
+            @php
+                $bodyExample = base64_decode("Ly8gbWFpbiBhcnJheQpbCgkvLyBwZXIgcm93IGFycmF5CglbCgkJLy8gcGVyIGNvbHVtbiBhcnJheQoJCVsndmFsdWUnID0+ICdyb3cgMSBkYXRhIDEnLCAnc2VjdXJlJyA9PiBmYWxzZV0sCgkJWyd2YWx1ZScgPT4gJ3JvdyAxIGRhdGEgMiddCgldLAoJWwoJCVsndmFsdWUnID0+ICdyb3cgMiBkYXRhIDEnXSwKCQlbJ3ZhbHVlJyA9PiAncm93IDIgZGF0YSAyJ10KCV0KXQ==");
+            @endphp
+
+            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $bodyExample ])
+
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'value'],
+                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                        ['value' => 'Cell value per column to display.']
+                    ],
+                    [
+                        ['value' => 'secure'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Sets the <code>name</code> value to secure or unsecure. If secure is <code>false</code>, value can have HTML tags.', 'secure' => false]
+                    ]
+                ])
+
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for table element here.
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Table Sample Output", 'icon' => 'icon-file-empty' ] )
-        Table sample output here
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+
+        @Limitless::TableStart([ 'extra' => ['class' => 'table table-striped table-docu'] ])
+
+            @Limitless::TableAutofillHeader([
+                ['name' => 'Column 1'],
+                ['name' => '<a href="#">Url Column 2</a>', 'secure' => false],
+                ['name' => 'Column 3'],
+                ['name' => 'Column 4']
+            ])
+
+            @Limitless::TableAutofillBody([
+                [
+                    ['value' => 'Data 1 Row 1'],
+                    ['value' => '<i>Data 2 Row 1</i>', 'secure' => false],
+                    ['value' => 'Data 3 Row 1'],
+                    ['value' => 'Data 4 Row 1']
+                ],
+                [
+                    ['value' => 'Data 1 Row 2'],
+                    ['value' => '<code>Data 2 Row 2</code>', 'secure' => false],
+                    ['value' => 'Data 3 Row 2'],
+                    ['value' => '<b>Data 4 Row 2</b>', 'secure' => false],
+                ]
+            ])
+
+        @Limitless::TableStop
+
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Table Syntax", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6VGFibGVTdGFydChbICdleHRyYScgPT4gWydjbGFzcycgPT4gJ3RhYmxlIHRhYmxlLXN0cmlwZWQgdGFibGUtZG9jdSddIF0pCgoJQExpbWl0bGVzczo6VGFibGVBdXRvZmlsbEhlYWRlcihbCgkJWyduYW1lJyA9PiAnQ29sdW1uIDEnXSwKCQlbJ25hbWUnID0+ICc8YSBocmVmPSIjIj5VcmwgQ29sdW1uIDI8L2E+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCVsnbmFtZScgPT4gJ0NvbHVtbiAzJ10sCgkJWyduYW1lJyA9PiAnQ29sdW1uIDQnXQoJXSkKCglATGltaXRsZXNzOjpUYWJsZUF1dG9maWxsQm9keShbCgkJWwoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAxIFJvdyAxJ10sCgkJCVsndmFsdWUnID0+ICc8aT5EYXRhIDIgUm93IDE8L2k+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAzIFJvdyAxJ10sCgkJCVsndmFsdWUnID0+ICdEYXRhIDQgUm93IDEnXQoJCV0sCgkJWwoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAxIFJvdyAyJ10sCgkJCVsndmFsdWUnID0+ICc8Y29kZT5EYXRhIDIgUm93IDI8L2NvZGU+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAzIFJvdyAyJ10sCgkJCVsndmFsdWUnID0+ICc8Yj5EYXRhIDQgUm93IDI8L2I+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCV0KCV0pCgpATGltaXRsZXNzOjpUYWJsZVN0b3A=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop