Add component API to built docs + Add Checkbox, CheckboxList, & CheckboxVirtualList

src/routes/_internal/components/Example.svelte

@@ -3,7 +3,7 @@
     import IconMoon from 'virtual:icons/heroicons-outline/moon'
     import IconSun from 'virtual:icons/heroicons-outline/sun'
 
-    let theme = 'light'
+    let theme = 'dark'
     let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
 </script>
 
@@ -51,6 +51,7 @@
         &__code {
             margin: 0;
             border-radius: var(--rounded-sm-bottom) !important;
+            background: hsl(220, 13%, 22%);
         }
     }
 </style>

src/routes/_internal/layout/page.svelte

@@ -11,7 +11,11 @@
 
     let api
     if ($page.url.pathname.includes('components')) {
-        import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+        if (import.meta.env.DEV) {
+            import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+        } else {
+            fetch('/_app/COMPONENT_API.json').then(res => res.json()).then(output => api = output[`${title}.svelte`])
+        }
     }
 </script>
 
@@ -42,9 +46,9 @@
                     <tbody>
                     {#each api.props as prop}
                         <tr>
-                            <td>{prop.name}</td>
+                            <td><code>{prop.name}</code></td>
                             <td><code>{prop.type ?? ''}</code></td>
-                            <td>{prop.value ?? ''}</td>
+                            <td><code>{prop.value ?? ''}</code></td>
                             <td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
                         </tr>
                     {/each}
@@ -64,7 +68,7 @@
                     <tbody>
                     {#each api.events as event}
                         <tr>
-                            <td>{event.name}</td>
+                            <td><code>{event.name}</code></td>
                             <td>{!!event.parent}</td>
                             <td>{event.description?.replace('null', '') || ''}</td>
                         </tr>
@@ -84,8 +88,8 @@
                     <tbody>
                     {#each api.slots as slot}
                         <tr>
-                            <td>{slot.name}</td>
-                            <td>{slot.fallback}</td>
+                            <td><code>{slot.name}</code></td>
+                            <td>{slot.fallback ?? 'None'}</td>
                         </tr>
                     {/each}
                     </tbody>

src/routes/components/Checkbox.md

@@ -0,0 +1,20 @@
+### Text-only Example
+
+```svelte example
+<script lang="ts">
+    import Checkbox from "omorphia/components/Checkbox.svelte";
+</script>
+
+<Checkbox>Extra components</Checkbox>
+```
+
+### Text with Icon Example
+
+```svelte example
+<script lang="ts">
+    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import IconCarrot from 'virtual:icons/lucide/carrot'
+</script>
+
+<Checkbox><IconCarrot /> Food </Checkbox>
+```

src/routes/components/CheckboxList.md

@@ -0,0 +1,33 @@
+```svelte example
+<script lang="ts">
+    import CheckboxList from "omorphia/components/CheckboxList.svelte";
+    import IconSquare from 'virtual:icons/lucide/square'
+    import IconCircle from 'virtual:icons/lucide/circle'
+    import IconTriangle from 'virtual:icons/lucide/triangle'
+    
+    let selected = []
+</script>
+
+<CheckboxList 
+    bind:value={selected}
+    options={[
+        {
+            label: 'Circle',
+            icon: IconCircle,
+            value: 'CIR',
+        },
+        {
+            label: 'Triangle',
+            icon: IconTriangle,
+            value: 'TRI',
+        },
+        {
+            label: 'Square',
+            icon: IconSquare,
+            value: 'SQU',
+        },
+    ]} 
+/>
+
+Selected: {selected}
+```

src/routes/components/CheckboxVirtualList.md

@@ -0,0 +1,23 @@
+```svelte example
+<script lang="ts">
+    import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
+    import IconStar from 'virtual:icons/heroicons-outline/star'
+    import uniqueId from 'lodash.uniqueid'
+    
+    let options = Array(100).fill({})
+        .map(option => ({
+            label: 'Star-' + uniqueId(),
+            icon: IconStar,
+            value: uniqueId(),
+        }))
+    
+    let selected = ['2', '6']
+</script>
+
+<CheckboxVirtualList 
+    bind:value={selected}
+    {options}
+/>
+
+Selected: {selected}
+```

src/routes/components/NavRow.md

@@ -13,8 +13,8 @@
             label: 'Button'
         },
         {
-            href: '/Link',
-            label: 'Link'
+            href: '/Chips',
+            label: 'Chips'
         },
         {
             href: '/NavRow',