fix: Self-closing HTML tags

Author: shinokada

.changeset/tough-readers-grin.md

@@ -0,0 +1,5 @@
+---
+'flowbite-svelte-blocks': patch
+---
+
+fix: Self-closing tag

src/lib/Section.svelte

@@ -120,5 +120,5 @@
 [Go to docs](https://flowbite-svelte-blocks.codewithshin.com/)
 ## Props
 @prop export let sectionClass: string = 'relative py-6 sm:py-10';
-@prop export let name: 'advancedTable'|'blog' | 'comment' |'cta' | 'ctawithimg' | 'contact' | 'content' | 'contentwithimg' | 'crudcreatedrawer' | 'crudcreateform' | 'crudreadsection' | 'default' | 'faq' | 'feature' | 'forgotpassword' | 'headingwithctabutton' | 'heroDefault' | 'heroVisual' | 'login' | 'logos' | 'maintenance' | 'newsletter' | 'none' | 'page500' | 'page404' | 'portfolio' | 'pricing' | 'register' | 'reset' | 'schedule' | 'social' | 'tableheader' | 'team' | 'testimonial' = 'default';
+@prop export let name: 'advancedTable' | 'blog' | 'comment' | 'cta' | 'ctawithimg' | 'contact' | 'content' | 'contentwithimg' | 'crudcreatedrawer' | 'crudcreateform' | 'crudreadsection' | 'default' | 'faq' | 'feature' | 'forgotpassword' | 'headingwithctabutton' | 'heroDefault' | 'heroVisual' | 'login' | 'logos' | 'maintenance' | 'newsletter' | 'none' | 'page500' | 'page404' | 'portfolio' | 'pricing' | 'register' | 'reset' | 'schedule' | 'social' | 'tableheader' | 'team' | 'testimonial' = 'default';
 -->

src/lib/types.ts

@@ -9,3 +9,10 @@ export type Comment = {
   content: string;
   replies?: Comment[];
 };
+
+export interface LinkType {
+  name: string;
+  href?: string;
+  rel?: string;
+  active?: boolean;
+}

src/routes/+layout.svelte

@@ -37,7 +37,7 @@
 <Runatics {analyticsId} />
 <div class="flex flex-col min-h-screen bg-white dark:bg-gray-900">
   <header class="sticky top-0 z-40 flex-none w-full mx-auto bg-white border-b border-gray-200 dark:border-gray-600 dark:bg-gray-800">
-    <Navbar color="default" fluid navClass="flex items-center justify-between w-full mx-auto py-1.5 px-4" let:hidden let:toggle>
+    <Navbar color="default" fluid class="flex items-center justify-between w-full mx-auto py-1.5 px-4" let:hidden let:toggle>
       <NavBrand href="/">
         <img src="/images/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
         <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"> Flowbite Svelte Blocks </span>

src/routes/utils/CompoAttributesViewer.svelte

@@ -1,21 +1,52 @@
 <script lang="ts">
+  import { Tabs, TabItem } from 'flowbite-svelte';
   import TableProp from './TableProp.svelte';
   import TableDefaultRow from './TableDefaultRow.svelte';
-
+  import { GridSolid, AdjustmentsVerticalSolid, ClipboardSolid } from 'flowbite-svelte-icons';
   import { onMount } from 'svelte';
+  import { getFilteredFileNames } from './helpers';
 
-  
-  export let components;
-  let compoData = [];
+  type TCompoData = {
+    data: {
+      default: {
+        name: string;
+        props: string[][];
+        events: string[][];
+        slots: string[][];
+      };
+    };
+  };
+
+  export let dirName: string = '';
+  export let components: string;
 
-  // Split the components into an array
-  const componentArray = components.split(', ');
+  let compoData: TCompoData[] = [];
+  // default is find fileName using dirName
+  const fileNames = getFilteredFileNames(dirName);
 
+  // if components are given (e.g. checkbox, etc in forms, typography, utils)
+  // use the components string
+  let componentArray = components ? components.split(', ') : [];
+
+  if (components) {
+    // Split the components into an array
+    const componentArray = components.split(', ');
+  }
+  
+  let importPromises: Promise<any>[] = [];
+  
   async function processComponents() {
-    const importPromises = componentArray.map(async (component) => {
-      const module = await import(`../component-data/${component}.json`);
-      return { data: module };
-    });
+    if (componentArray.length > 0) {
+      importPromises = componentArray.map(async (component) => {
+        const module = await import(`../component-data/${component}.json`);
+        return { data: module };
+      });
+    } else {
+      importPromises = fileNames.map(async (component) => {
+        const module = await import(`../component-data/${component}.json`);
+        return { data: module };
+      });
+    }
 
     try {
       compoData = await Promise.all(importPromises);
@@ -25,54 +56,62 @@
     }
   }
 
+
   onMount(() => {
     processComponents()
       .catch(error => {
         console.error('Error outside of processComponents:', error);
       });
   });
- 
 </script>
 
 {#if compoData}
-<h2>Component data</h2>
-{#each compoData as compo}
-
-<h3>{compo.data.default.name}</h3>
-
-{#if compo.data.default.props.length > 0}
-<h4>Props</h4>
-  <ul class="w-full">
-    <TableProp>
-    <TableDefaultRow items={compo.data.default.props} rowState='hover' />
-    </TableProp>
-  </ul>
-{/if}
+<div id="compoData">
+  {#each compoData as compo}
+  <h4 class="text-lg">{compo.data.default.name}</h4>
+    <Tabs style="underline" class="list-none">
+      {#if compo.data.default.props.length > 0}
+      <TabItem open>
+        <div slot="title" class="flex items-center gap-2">
+          <ClipboardSolid size="sm" />
+          Props
+        </div>
+        <ul class="w-full">
+          <TableProp>
+          <TableDefaultRow items={compo.data.default.props} rowState='hover' />
+          </TableProp>
+        </ul>
+      </TabItem>
+      {/if}
 
-<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-
-{#if compo.data.default.events.length > 0}
-<div>
-<h4 class="mt-8 mb-4 text-lg font-bold text-gray-900 dark:text-white">Events</h4>
-  <ul>
-    <TableProp category="slots">
-    <TableDefaultRow items={compo.data.default.events} rowState='hover' />
-    </TableProp>
-  </ul>
-</div>
-{/if}
-
-{#if compo.data.default.slots.length > 0}
-<div>
-<h4 class="mt-8 mb-4 text-lg font-bold text-gray-900 dark:text-white">Slots</h4>
-  <ul class="w-full">
-    <TableProp category="slots">
-    <TableDefaultRow items={compo.data.default.slots} rowState='hover' />
-    </TableProp>
-  </ul>
-</div>
-{/if}
+      {#if compo.data.default.events.length > 0}
+      <TabItem>
+        <div slot="title" class="flex items-center gap-2">
+          <AdjustmentsVerticalSolid size="sm" />
+          Events
+        </div>
+        <ul class="w-full list-none">
+          <TableProp category="slots">
+          <TableDefaultRow items={compo.data.default.events} rowState='hover' />
+          </TableProp>
+        </ul>
+      </TabItem>
+      {/if}
 
+      {#if compo.data.default.slots.length > 0}
+      <TabItem>
+        <div slot="title" class="flex items-center gap-2">
+          <GridSolid size="sm" />
+          Slots
+        </div>
+        <ul class="w-full list-none">
+          <TableProp category="slots">
+          <TableDefaultRow items={compo.data.default.slots} rowState='hover' />
+          </TableProp>
+        </ul>
+      </TabItem>
+      {/if}
+    </Tabs>
+  {/each}
 </div>
-{/each}
 {/if}

src/routes/utils/Paging.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { PaginationItem } from 'flowbite-svelte';
-  import { identity } from 'svelte/internal';
   import ArrowLeft from './icons/ArrowLeft.svelte';
   import ArrowRight from './icons/ArrowRight.svelte';
 
@@ -27,8 +26,8 @@
   // console.log('data.dir: ',data.dir)
   // console.log('data: ',data)
 
-  const components = Object.values(data.posts)
-    .flatMap(identity)
+  const components = Object.values(data.posts as Post[])
+    .flat()
     // .filter((x) => x.meta.dir === data.dir)
     .filter((x) => x.meta && x.meta.dir === data.dir)
     .map(({ path, meta }) => ({ path, name: meta.breadcrumb_title }));

src/routes/utils/Sectioncompo.svelte

@@ -22,7 +22,7 @@
   export let section;
 
   const sectionPosts = section !== undefined ? data.posts[section] : Object.values(data.posts).flat();
-  console.log('section.posts: ', sectionPosts);
+  // console.log('section.posts: ', sectionPosts);
   let searchTerm = '';
   // const flattened_posts = Object.values(data.posts).flat()
   let components: SvelteComponent;

src/routes/utils/Toc.svelte

@@ -3,9 +3,10 @@
     Inspired by 'svelte-toc'
     Simplified version of Table of Contents.
     */
+
   import type { LinkType } from '$lib/types';
 
-  const aClass = "inline-block border-l border-white duration-200 hover:text-gray-900 transition-none dark:hover:text-white hover:border-gray-300 after:content-['#'] after:text-primary-700 dark:after:text-primary-700 dark:border-gray-900 dark:hover:border-gray-700 after:ml-2 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-100";
+  const aClass = "inline-block border-s border-white duration-200 hover:text-gray-900 transition-none dark:hover:text-white hover:border-gray-300 after:content-['#'] after:text-primary-700 dark:after:text-primary-700 dark:border-gray-900 dark:hover:border-gray-700 after:ms-2 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-100";
 
   export let extract: (x: HTMLElement) => LinkType = (x: HTMLElement) => ({ name: x.textContent ?? '' });
 
@@ -25,7 +26,7 @@
   }
 
   function indent(name: string | undefined) {
-    return name === 'H2' ? 'pl-2.5' : 'pl-6';
+    return name === 'H2' ? 'ps-2.5' : 'ps-6';
   }
 
   function toc() {
@@ -35,11 +36,11 @@
   }
 </script>
 
-<div class="flex-none hidden w-64 pl-8 xl:text-sm xl:block right-0" use:init>
+<div class="flex-none hidden w-64 ps-8 xl:text-sm xl:block end-0" use:init>
   {#if headings.length}
     <div class="flex overflow-y-auto sticky top-20 flex-col justify-between pb-6 h-[calc(100vh-5rem)]">
       <div class="mb-8">
-        <h4 class="pl-2.5 my-4 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-white">On this page</h4>
+        <h4 class="ps-2.5 my-4 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-white">On this page</h4>
         <nav>
           <ul class="overflow-x-hidden font-medium text-gray-500 dark:text-gray-400 space-y-2.5">
             {#each headings as { rel, href, name }}

src/routes/utils/helpers.ts

@@ -0,0 +1,18 @@
+export function getFilteredFileNames(dirName: string) {
+  const modules = import.meta.glob('$lib/**/*.svelte');
+  const pathsArray = Object.keys(modules);
+  const filteredPaths = pathsArray.filter((path) => path.includes(dirName));
+  const fileNames = filteredPaths.map((path) => {
+    const parts = path.split('/');
+    const fileNameWithExtension = parts[parts.length - 1];
+    const fileNameWithoutExtension = fileNameWithExtension.substring(0, fileNameWithExtension.lastIndexOf('.'));
+
+    return fileNameWithoutExtension;
+  });
+
+  return fileNames;
+}
+
+export function toKebabCase(inputString: string) {
+  return inputString.toLowerCase().replace(/\s+/g, '-');
+}

src/routes/utils/mdsvex.d.ts

@@ -0,0 +1,9 @@
+declare module '*.md' {
+  import type { SvelteComponentDev } from 'svelte/internal';
+
+  export default class Comp extends SvelteComponentDev {
+    $$prop_def: {};
+    metadata: Record<string, any>;
+  }
+  export const metadata: Record<string, any>;
+}