@@ -18,9 +18,9 @@ use Loki\Components\Factory\ViewModelFactory;
1818$ idConvertor = $ viewModelFactory ->create (IdConvertor::class);
1919$ htmlId = $ idConvertor ->toElementId ($ block ->getNameInLayout ());
2020?>
21- <div class="<?= $ css ('hidden md:block w-full border-t border-gray-400 ' , '@todo ' ) ?> ">
22- <div class="<?= $ css ('flex items-stretch overflow-x-auto ' , '@todo ' ) ?> " role="tablist">
23- <div class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">
21+ <div class="<?= $ css ('hidden md:block w-full border-t border-gray-400 ' , 'td ' ) ?> ">
22+ <div class="<?= $ css ('flex items-stretch overflow-x-auto ' , 'td ' ) ?> " role="tablist">
23+ <div class="<?= $ css ('border-b border-gray-300 p-2 ' , 'td ' ) ?> ">
2424 <span role="tab">Loki Debugger</span>
2525 </div>
2626 <div>
@@ -30,8 +30,8 @@ $htmlId = $idConvertor->toElementId($block->getNameInLayout());
3030 data-tab-name="server"
3131 type="button"
3232 @click="switchTab"
33- :class="<?= $ css ( ' buttonCssClass ' , ' @todo ' ) ?> "
34- class="<?= $ css ('inline-flex rounded-t-lg border-t border-l border-r p-4 border-gray-300 ' , '@todo ' ) ?> ">
33+ :class="buttonCssClass"
34+ class="<?= $ css ('inline-flex rounded-t-lg border-t border-l border-r p-4 border-gray-300 ' , 'button-server ' ) ?> ">
3535 Server Dump
3636 </button>
3737 </div>
@@ -42,47 +42,59 @@ $htmlId = $idConvertor->toElementId($block->getNameInLayout());
4242 data-tab-name="components"
4343 type="button"
4444 @click="switchTab"
45- :class="<?= $ css ( ' buttonCssClass ' , ' @todo ' ) ?> "
46- class="<?= $ css ('inline-flex rounded-t-lg border-t border-l border-r p-4 border-gray-300 ' , '@todo ' ) ?> ">
45+ :class="buttonCssClass"
46+ class="<?= $ css ('inline-flex rounded-t-lg border-t border-l border-r p-4 border-gray-300 ' , 'button-components ' ) ?> ">
4747 Registered Components
4848 </button>
4949 </div>
5050 </div>
5151
5252 <div>
53- <div :class="<?= $ css ('tabCssClass ' , '@todo ' ) ?> " class="<?= $ css ('p-4 ' , '@todo ' ) ?> " data-tab-name="server" id="tab-server">
54- <h3 class="<?= $ css ('text-xl my-4 ' , '@todo ' ) ?> ">Server Dump</h3>
53+ <div :class="tabCssClass" class="<?= $ css ('p-4 ' , 'tab-server ' ) ?> " data-tab-name="server" id="tab-server">
54+ <h3 class="<?= $ css ('text-xl my-4 ' , 'tab-heading ' ) ?> ">
55+ Server Dump
56+ </h3>
5557 <pre><?php var_dump ($ viewModel ->getData ()) ?> </pre>
5658 </div>
5759
58- <div :class="<?= $ css ( ' tabCssClass ' , ' @todo ' ) ?> " class="<?= $ css ('p-4 ' , '@todo ' ) ?> " data-tab-name="components" id="tab-components">
59- <table class="<?= $ css ('table-auto w-full text-xs ' , '@todo ' ) ?> ">
60+ <div :class="tabCssClass" class="<?= $ css ('p-4 ' , 'tab-components ' ) ?> " data-tab-name="components" id="tab-components">
61+ <table class="<?= $ css ('table-auto w-full text-xs ' , 'table ' ) ?> ">
6062 <thead>
6163 <tr>
62- <th class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">Alpine Instance / Component</th>
63- <th class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">Element ID</th>
64- <th class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">Loki Component Name</th>
65- <th class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">Value</th>
66- <th class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">Details</th>
64+ <th class="<?= $ css ('border-b border-gray-300 p-2 ' , 'th ' ) ?> ">
65+ Alpine Instance / Component
66+ </th>
67+ <th class="<?= $ css ('border-b border-gray-300 p-2 ' , 'th ' ) ?> ">
68+ Element ID
69+ </th>
70+ <th class="<?= $ css ('border-b border-gray-300 p-2 ' , 'th ' ) ?> ">
71+ Loki Component Name
72+ </th>
73+ <th class="<?= $ css ('border-b border-gray-300 p-2 ' , 'th ' ) ?> ">
74+ Value
75+ </th>
76+ <th class="<?= $ css ('border-b border-gray-300 p-2 ' , 'th ' ) ?> ">
77+ Details
78+ </th>
6779 </tr>
6880 </thead>
6981 <tbody>
7082 <template x-for="component in components" :key="component.id">
7183 <tr>
72- <td class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">
84+ <td class="<?= $ css ('border-b border-gray-300 p-2 ' , 'td ' ) ?> ">
7385 <strong><code x-text="component.id"></code></strong><br/>
7486 <code x-text="component.name"></code>
7587 </td>
76- <td class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">
88+ <td class="<?= $ css ('border-b border-gray-300 p-2 ' , 'td ' ) ?> ">
7789 <code x-text="component.elementId"></code>
7890 </td>
79- <td class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">
91+ <td class="<?= $ css ('border-b border-gray-300 p-2 ' , 'td ' ) ?> ">
8092 <code x-text="component.blockId"></code>
8193 </td>
82- <td class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">
94+ <td class="<?= $ css ('border-b border-gray-300 p-2 ' , 'td ' ) ?> ">
8395 <code x-text="component.value"></code>
8496 </td>
85- <td class="<?= $ css ('border-b border-gray-300 p-2 ' , '@todo ' ) ?> ">
97+ <td class="<?= $ css ('border-b border-gray-300 p-2 ' , 'td ' ) ?> ">
8698 <code x-json="component.getDetails"></code>
8799 </td>
88100 </tr>
0 commit comments