SERV-2286 - codemirror documentation WIP

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

@@ -3,19 +3,66 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("ICAgIEBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RhcnQoWyd0aXRsZScgPT4gIkNvZGVtaXJyb3IgVGVzdCIsICdpY29uJyA9PiAnaWNvbi1maWxlLWVtcHR5JyBdICkKICAgICAgICBATGltaXRsZXNzOjpDb2RlbWlycm9yKFsgJ2xhbmd1YWdlJyA9PiAnamF2YXNjcmlwdCcsICd0aGVtZScgPT4gJ3plbmJ1cm4nLCAndmFsdWUnID0+ICdIZWxsbyBXb3JsZCEnIF0pCiAgICBATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
-    @endphp
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Code Mirror", 'icon' => 'icon-circle-code'])
+        A themed writable container for codes.
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+    @Limitless::ElementCardStart(['title' => "Codemirror"])
+
+        <p>A themed writable container for codes.</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' => 'language'],
+                    ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                    ['value' => 'The header title of the card.']
+                ],
+                [
+                    ['value' => 'theme'],
+                    ['value' => '<i>String</i> [Default = <code>"icecoder"</code>]', 'secure' => false],
+                    ['value' => 'The header icon of the card.']
+                ],
+                [
+                    ['value' => 'value'],
+                    ['value' => '<i>String</i> [Default = <code>"... no value parameter set..."</code>]', 'secure' => false],
+                    ['value' => 'Option to make the card body to show or hide.']
+                ],
+                [
+                    ['value' => 'extra'],
+                    ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                    ['value' => 'Adds custom attributes for the codemirror element. existing attributes such as class will be overwritten.']
+                ]
+            ])
+
+        @Limitless::TableStop
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        hello world
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Codemirror Test", 'icon' => 'icon-file-empty' ] )
-        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!' ])
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!', 'extra' => ['id' => 'codemirror1', 'data-is-modified' => true] ])
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Codemirror Test", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6Q29kZW1pcnJvcihbICdsYW5ndWFnZScgPT4gJ2phdmFzY3JpcHQnLCAndGhlbWUnID0+ICd6ZW5idXJuJywgJ3ZhbHVlJyA9PiAnSGVsbG8gV29ybGQhJywgJ2V4dHJhJyA9PiBbJ2lkJyA9PiAnY29kZW1pcnJvcjEnLCAnZGF0YS1pcy1tb2RpZmllZCcgPT4gdHJ1ZV0gXSk=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop