flowbite-svelte 0.44.7 → 0.44.9

package/src/routes/component-data/Textarea.json

@@ -0,0 +1,11 @@
+{
+  "name": "Textarea",
+  "slots": ["header", "footer"],
+  "events": ["on:blur", "on:change", "on:click", "on:contextmenu", "on:focus", "on:input", "on:keydown", "on:keypress", "on:keyup", "on:mouseenter", "on:mouseleave", "on:mouseover", "on:paste"],
+  "props": [
+    ["value", "any", "undefined"],
+    ["wrappedClass", "string", "'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0'"],
+    ["unWrappedClass", "string", "'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500'"],
+    ["innerWrappedClass", "string", "'py-2 px-4 bg-white dark:bg-gray-800'"]
+  ]
+}

package/src/routes/component-data/Thumbnail.json

@@ -0,0 +1,10 @@
+{
+  "name": "Thumbnail",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["selected", "boolean", "false"],
+    ["activeClass", "string", "'opacity-100'"],
+    ["inactiveClass", "string", "'opacity-60'"]
+  ]
+}

package/src/routes/component-data/Thumbnails.json

@@ -0,0 +1,9 @@
+{
+  "name": "Thumbnails",
+  "slots": [],
+  "events": ["on:click"],
+  "props": [
+    ["images", "HTMLImgAttributes[]", "[]"],
+    ["index", "number", "0"]
+  ]
+}

package/src/routes/component-data/Thumbup.json

@@ -0,0 +1,14 @@
+{
+  "name": "Thumbup",
+  "slots": [],
+  "events": ["on:click"],
+  "props": [
+    ["fillPercent", "number", "100"],
+    ["fillColor", "string", "'#00b500'"],
+    ["strokeColor", "string", "'#00b500'"],
+    ["size", "number", "24"],
+    ["ariaLabel", "string", "'thumbup'"],
+    ["id", "string", "'thumbup'"],
+    ["role", "string", "'img'"]
+  ]
+}

package/src/routes/component-data/Timeline.json

@@ -0,0 +1 @@
+{ "name": "Timeline", "slots": [], "events": [], "props": [["order", "'default' | 'vertical' | 'horizontal' | 'activity' | 'group'", "'default'"]] }

package/src/routes/component-data/TimelineHorizontal.json

@@ -0,0 +1 @@
+{ "name": "TimelineHorizontal", "slots": [], "events": [], "props": [["olClass", "string", "'sm:flex'"]] }

package/src/routes/component-data/TimelineItem.json

@@ -0,0 +1,10 @@
+{
+  "name": "TimelineItem",
+  "slots": ["icon", "icon", "icon"],
+  "events": [],
+  "props": [
+    ["title", "string", "''"],
+    ["date", "string", "''"],
+    ["svgClass", "string", "'w-3 h-3 text-primary-600 dark:text-primary-400'"]
+  ]
+}

package/src/routes/component-data/TimelineItemHorizontal.json

@@ -0,0 +1,19 @@
+{
+  "name": "TimelineItemHorizontal",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["title", "string", ""],
+    ["date", "string", ""],
+    ["href", "string", ""],
+    ["text", "string", ""],
+    ["liClass", "string", "'relative mb-6 sm:mb-0'"],
+    ["divClass", "string", "'flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0'"],
+    ["h3Class", "string", "'text-lg font-semibold text-gray-900 dark:text-white'"],
+    ["timeClass", "string", "'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500'"],
+    ["pClass", "string", "'text-base font-normal text-gray-500 dark:text-gray-400'"],
+    ["aClass", "string", "'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700'"],
+    ["linkname", "string", ""],
+    ["icon", "string", "@prop export let timelineItems: TimelineItemHorizontalType[]"]
+  ]
+}

package/src/routes/component-data/TimelineItemVertical.json

@@ -0,0 +1,13 @@
+{
+  "name": "TimelineItemVertical",
+  "slots": ["icon"],
+  "events": [],
+  "props": [
+    ["title", "string", ""],
+    ["date", "string", ""],
+    ["liClass", "string", "'mb-10 ml-6'"],
+    ["spanClass", "string", "'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900'"],
+    ["h3Class", "string", "'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'"],
+    ["timeClass", "string", "'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500'"]
+  ]
+}

package/src/routes/component-data/Toast.json

@@ -0,0 +1,15 @@
+{
+  "name": "Toast",
+  "slots": ["icon", "close-button"],
+  "events": ["on:click"],
+  "props": [
+    ["dismissable", "boolean", "true"],
+    ["color", "'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none'", "'primary'"],
+    ["position", "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none'", "'none'"],
+    ["open", "boolean", "true"],
+    ["divClass", "string", "'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3'"],
+    ["defaultIconClass", "string", "'w-8 h-8'"],
+    ["contentClass", "string", "'w-full text-sm font-normal'"],
+    ["align", "boolean", "true"]
+  ]
+}

package/src/routes/component-data/Toggle.json

@@ -0,0 +1,12 @@
+{
+  "name": "Toggle",
+  "slots": [],
+  "events": ["on:click", "on:change"],
+  "props": [
+    ["size", "'small' | 'default' | 'large' | 'custom'", "'default'"],
+    ["group", "(string | number)[]", "[]"],
+    ["value", "string | number", "''"],
+    ["checked", "boolean | undefined", "undefined"],
+    ["customSize", "string", "''"]
+  ]
+}

package/src/routes/component-data/Toolbar.json

@@ -0,0 +1,9 @@
+{
+  "name": "Toolbar",
+  "slots": ["end"],
+  "events": [],
+  "props": [
+    ["color", "ToolbarColorType", "'dark'"],
+    ["embedded", "boolean", "false"]
+  ]
+}

package/src/routes/component-data/ToolbarButton.json

@@ -0,0 +1,12 @@
+{
+  "name": "ToolbarButton",
+  "slots": [],
+  "events": ["on:click"],
+  "props": [
+    ["color", "ToolbarButtonType", "'default'"],
+    ["name", "string | undefined", "undefined"],
+    ["ariaLabel", "string | undefined", "undefined"],
+    ["size", "'xs' | 'sm' | 'md' | 'lg'", "'md'"],
+    ["href", "string | undefined", "undefined"]
+  ]
+}

package/src/routes/component-data/ToolbarGroup.json

@@ -0,0 +1 @@
+{ "name": "ToolbarGroup", "slots": [], "events": [], "props": [["divClass", "string", "'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0'"]] }

package/src/routes/component-data/Tooltip.json

@@ -0,0 +1,9 @@
+{
+  "name": "Tooltip",
+  "slots": [],
+  "events": ["on:show"],
+  "props": [
+    ["type", "'dark' | 'light' | 'auto' | 'custom'", "'dark'"],
+    ["defaultClass", "string", "'py-2 px-3 text-sm font-medium'"]
+  ]
+}

package/src/routes/component-data/Video.json

@@ -0,0 +1,12 @@
+{
+  "name": "Video",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["src", "string", ""],
+    ["type", "string", "'video/mp4'"],
+    ["trackSrc", "string", "''"],
+    ["srclang", "string", "'en'"],
+    ["label", "string", "'english_captions'"]
+  ]
+}

package/src/routes/component-data/VideoPlaceholder.json

@@ -0,0 +1,9 @@
+{
+  "name": "VideoPlaceholder",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["divClass", "string", "'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700'"],
+    ["size", "keyof Sizes", "'sm'"]
+  ]
+}

package/src/routes/component-data/VoiceSearch.json

@@ -0,0 +1,16 @@
+{
+  "name": "VoiceSearch",
+  "slots": [],
+  "events": ["on:submit", "on:click"],
+  "props": [
+    ["id", "string", "''"],
+    ["labelClass", "string", "'sr-only'"],
+    ["iconClass", "string", "'w-5 h-5 text-gray-500 dark:text-gray-400'"],
+    ["iconDivClass", "string", "'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none'"],
+    ["inputClass", "string", "'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'"],
+    ["btnClass", "string", "'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'"],
+    ["voiceBtnClass", "string", "'flex absolute inset-y-0 right-0 items-center pr-3'"],
+    ["voiceIconClass", "string", "'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"],
+    ["placeholder", "string", "'Search Mockups, Logos, Design Templates...'"]
+  ]
+}

package/src/routes/component-data/WidgetPlaceholder.json

@@ -0,0 +1 @@
+{ "name": "WidgetPlaceholder", "slots": [], "events": [], "props": [["divClass", "string", "'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700'"]] }

package/src/routes/component-data/Wrapper.json

@@ -0,0 +1,10 @@
+{
+  "name": "Wrapper",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["tag", "string", "'div'"],
+    ["show", "boolean", ""],
+    ["use", "Action<HTMLElement, any> = () => {};", "@prop export let tag: string = 'div'"]
+  ]
+}

package/src/routes/component-data/backdrop.json

@@ -0,0 +1,9 @@
+{
+  "name": "backdrop",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["open", "string", "false"],
+    ["placement", "string", ""]
+  ]
+}

package/src/routes/component-data/clickOutside.json

@@ -0,0 +1 @@
+{ "name": "clickOutside", "slots": [], "events": [], "props": [] }

package/src/routes/component-data/createEventDispatcher.json

@@ -0,0 +1 @@
+{ "name": "createEventDispatcher", "slots": [], "events": [], "props": [] }

package/src/routes/component-data/focusTrap.json

@@ -0,0 +1 @@
+{ "name": "focusTrap", "slots": [], "events": ["on:not"], "props": [] }

package/src/routes/component-data/generateId.json

@@ -0,0 +1 @@
+{ "name": "generateId", "slots": [], "events": [], "props": [] }

package/src/routes/component-data/index.json

@@ -0,0 +1 @@
+{ "name": "index", "slots": [], "events": [], "props": [] }

package/src/routes/component-data/types.json

@@ -0,0 +1 @@
+{ "name": "types", "slots": [], "events": [], "props": [] }

package/src/routes/docs/+layout.js

@@ -0,0 +1,10 @@
+/** @type {import('./$types').LayoutLoad} */
+export const load = async ({ fetch }) => {
+  try {
+    const response = await fetch('/api/posts');
+
+    return { posts: await response.json() };
+  } catch (error) {
+    console.error(`Error in load function for /: ${error}`);
+  }
+};

package/src/routes/docs/+layout.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { afterNavigate } from '$app/navigation';
+  import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from '$lib';
+  import SidebarDropdownWrapper from '$lib/sidebars/SidebarDropdownWrapper.svelte';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import type { PageData } from '../$types';
+  import { ChevronDownSolid, ChevronUpSolid } from 'flowbite-svelte-icons';
+
+  export let data: PageData;
+
+  const posts: Record<string, any[]> = data.posts;
+  const drawerHidden: Writable<boolean> = getContext('drawer');
+
+  const closeDrawer = () => {
+    drawerHidden.set(true);
+  };
+
+  const names_mapping: Record<string, string> = {
+    pages: 'Getting Started'
+  };
+
+  const fileDir = (path: string) => path.split('/').slice(0, -1).pop() ?? '';
+
+  $: mainSidebarUrl = $page.url.pathname;
+  let activeMainSidebar: string;
+
+  afterNavigate((navigation) => {
+    // this fixes https://github.com/themesberg/flowbite-svelte/issues/364
+    document.getElementById('svelte')?.scrollTo({ top: 0 });
+    closeDrawer();
+
+    activeMainSidebar = navigation.to?.url.pathname ?? '';
+
+    const key = fileDir(activeMainSidebar);
+    for (const k in dropdowns) dropdowns[k] = false;
+    dropdowns[key] = true;
+  });
+
+  let spanClass = '';
+  let nonActiveClass = 'transition-colors duration-200 relative flex items-center flex-wrap font-medium hover:text-gray-900 hover:cursor-pointer text-gray-500 dark:text-gray-400 dark:hover:text-white';
+  let activeClass = 'relative flex items-center flex-wrap font-medium cursor-default text-primary-700 dark:text-primary-700';
+
+  let dropdowns = Object.fromEntries(Object.keys(posts).map((x) => [x, false]));
+</script>
+
+<Sidebar class={$drawerHidden && 'hidden'} {nonActiveClass} activeUrl={mainSidebarUrl} asideClass="fixed inset-0 z-30 flex-none h-full w-64 lg:static lg:h-auto border-r border-gray-200 dark:border-gray-600 lg:overflow-y-visible lg:pt-0 lg:block">
+  <h4 id="sidebar-label" class="sr-only">Browse docs</h4>
+  <SidebarWrapper divClass="overflow-y-auto px-4 pt-20 lg:pt-0 h-full bg-white scrolling-touch max-w-2xs lg:h-[calc(100vh-8rem)] lg:block dark:bg-gray-900 lg:mr-0 lg:sticky top-20">
+    <nav class="font-normal text-base lg:text-sm">
+      <SidebarGroup ulClass="list-unstyled fw-normal small mb-4">
+        {#each Object.entries(posts) as [key, values] (key)}
+          <SidebarDropdownWrapper bind:isOpen={dropdowns[key]} label={names_mapping[key] ?? key} ulClass="space-y-2.5" btnClass="flex items-center justify-between w-full my-4 text-sm font-semibold tracking-wide uppercase hover:text-primary-700 dark:hover:text-primary-600" spanClass="" class={dropdowns[key] ? 'text-primary-700 dark:text-primary-700' : 'text-gray-900 dark:text-white'}>
+            <ChevronDownSolid slot="arrowdown" class="w-3 h-3 text-gray-800 dark:text-white" />
+            <ChevronUpSolid slot="arrowup" class="w-3 h-3 text-gray-800 dark:text-white" />
+            {#each values as { meta, path }}
+              {@const href = `/docs/${key}${path}`}
+              {#if meta}
+                <SidebarItem label={meta.component_title} {href} {spanClass} {activeClass} active={activeMainSidebar === href} />
+              {/if}
+            {/each}
+          </SidebarDropdownWrapper>
+        {/each}
+      </SidebarGroup>
+    </nav>
+  </SidebarWrapper>
+</Sidebar>
+
+<div hidden={$drawerHidden} class="fixed inset-0 z-20 bg-gray-900/50 dark:bg-gray-900/60" on:click={closeDrawer} on:keydown={closeDrawer} role="presentation" />
+
+<main class="flex-auto w-full min-w-0 lg:static lg:max-h-full lg:overflow-visible">
+  <slot />
+</main>

package/src/routes/docs/components/[slug]/+page.js

@@ -0,0 +1,13 @@
+// src/routes/components/[slug]/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+  const post = await import(`../${params.slug}.md`);
+  const { title, dir } = post.metadata;
+  const content = post.default;
+
+  return {
+    content,
+    title,
+    dir
+  };
+}

package/src/routes/docs/components/[slug]/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  export let data: PageData;
+</script>
+
+<svelte:component this={data.content} />