fix: Dropzone, update progress files

Author: shinokada

src/lib/forms/dropzone/Dropzone.svelte

@@ -34,6 +34,13 @@
 
   const onDrop: DragEventHandler<HTMLButtonElement> = function (this: Window, event) {
     event.preventDefault();
+    
+    // When files are dropped, update the files binding
+    if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+      files = event.dataTransfer.files;
+    }
+    
+    // Then call any custom ondrop handler
     if (ondrop) {
       ondrop.call(this, event);
     }
@@ -58,11 +65,4 @@
 </button>
 <label class="hidden">
   <input {...restProps} bind:files bind:this={input} onchange={onChange} type="file" />
-</label>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte-next.com/)
-## Props
-@props: 
--->
+</label>

src/lib/pagination/PaginationItem.svelte

@@ -8,7 +8,7 @@
 
   const group = getContext<boolean>("group");
   const table = getContext<boolean>("table");
-  const paginationClass = $derived(paginationItem({ size, active, group, table, class: clsx(className) }));
+  const paginationClass = $derived(paginationItem({ size: getContext("size") ?? size, active, group, table, class: clsx(className) }));
 </script>
 
 {#if href}

src/lib/types.ts

@@ -672,7 +672,7 @@ export interface DropzoneProps extends HTMLInputAttributes {
 
 // fileupload
 export interface FileuploadProps extends Omit<HTMLInputAttributes, "size"> {
-  files?: FileList;
+  files?: FileList | null;
   size?: FileuploadViariants["size"];
   color?: InputProps<never>["color"];
   clearable?: boolean;
@@ -760,6 +760,7 @@ export type SelectOptionType<T> = {
   name: string | number;
   value: T;
   disabled?: boolean;
+  [key: string]: any;
 };
 
 export interface SelectProps<T> extends SelectVariants, Omit<HTMLSelectAttributes, "size"> {

src/routes/docs/components/pagination.md

@@ -35,17 +35,17 @@ Use the following list of pagination items to indicate a series of content for y
 
   let activeUrl = $derived(page.url.searchParams.get("page"));
   let pages = $state([
-    { name: 1, href: "/docs/components/pagination?page=1" },
-    { name: 2, href: "/docs/components/pagination?page=2" },
-    { name: 3, href: "/docs/components/pagination?page=3" },
-    { name: 4, href: "/docs/components/pagination?page=4" },
-    { name: 5, href: "/docs/components/pagination?page=5" }
+    { name: "1", href: "/docs/components/pagination?page=1" },
+    { name: "2", href: "/docs/components/pagination?page=2" },
+    { name: "3", href: "/docs/components/pagination?page=3" },
+    { name: "4", href: "/docs/components/pagination?page=4" },
+    { name: "5", href: "/docs/components/pagination?page=5" }
   ]);
 
   $effect(() => {
     pages.forEach((page) => {
-      let splitUrl = page.href.split("?");
-      let queryString = splitUrl.slice(1).join("?");
+      let splitUrl = page.href?.split("?");
+      let queryString = splitUrl?.slice(1).join("?");
       const hrefParams = new URLSearchParams(queryString);
       let hrefValue = hrefParams.get("page");
       if (hrefValue === activeUrl) {
@@ -66,7 +66,7 @@ Use the following list of pagination items to indicate a series of content for y
 </script>
 
 <Pagination {pages} {previous} {next} />
-<Pagination {pages} large {previous} {next} />
+<Pagination {pages} size="large" {previous} {next} />
 ```
 
 ## Pagination with icons
@@ -126,8 +126,8 @@ Use the following markup to show simple previous and next elements.
   <PaginationItem onclick={next}>Next</PaginationItem>
 </div>
 <div class="flex space-x-3 rtl:space-x-reverse">
-  <PaginationItem large onclick={previous}>Previous</PaginationItem>
-  <PaginationItem large onclick={next}>Next</PaginationItem>
+  <PaginationItem size="large" onclick={previous}>Previous</PaginationItem>
+  <PaginationItem size="large" onclick={next}>Next</PaginationItem>
 </div>
 ```
 
@@ -148,21 +148,21 @@ Use the following code to show simple previous and next elements with icons.
 </script>
 
 <div class="flex space-x-3 rtl:space-x-reverse">
-  <PaginationItem class="flex items-center" {previous}>
+  <PaginationItem class="flex items-center" onclick={previous}>
     <ArrowLeftOutline class="me-2 h-3.5 w-3.5" />
     Previous
   </PaginationItem>
-  <PaginationItem class="flex items-center" {next}>
+  <PaginationItem class="flex items-center" onclick={next}>
     Next
     <ArrowRightOutline class="ms-2 h-3.5 w-3.5" />
   </PaginationItem>
 </div>
 <div class="flex space-x-3 rtl:space-x-reverse">
-  <PaginationItem large class="flex items-center" {previous}>
+  <PaginationItem size="large" class="flex items-center" onclick={previous}>
     <ArrowLeftOutline class="me-2 h-5 w-5" />
     Previous
   </PaginationItem>
-  <PaginationItem large class="flex items-center" {next}>
+  <PaginationItem size="large" class="flex items-center" onclick={next}>
     Next
     <ArrowRightOutline class="ms-2 h-5 w-5" />
   </PaginationItem>

src/routes/docs/components/skeleton.md

@@ -35,7 +35,7 @@ Use the skeleton component to indicate a loading status with placeholder element
 <Skeleton size="md" class="my-8" />
 <Skeleton size="lg" class="my-8" />
 <Skeleton size="xl" class="my-8" />
-<Skeleton size="xxl" class="mt-8 mb-2.5" />
+<Skeleton size="2xl" class="mt-8 mb-2.5" />
 ```
 
 ## Image placeholder
@@ -63,7 +63,7 @@ To display image placeholder without text, use `imgOnly` prop as seen in the fol
 <VideoPlaceholder size="md" class="mt-8" />
 <VideoPlaceholder size="lg" class="mt-8" />
 <VideoPlaceholder size="xl" class="mt-8" />
-<VideoPlaceholder size="xxl" class="mt-8" />
+<VideoPlaceholder size="2xl" class="mt-8" />
 ```
 
 ## Text placeholder
@@ -77,7 +77,7 @@ To display image placeholder without text, use `imgOnly` prop as seen in the fol
 <TextPlaceholder size="md" class="mt-8" />
 <TextPlaceholder size="lg" class="mt-8" />
 <TextPlaceholder size="xl" class="mt-8" />
-<TextPlaceholder size="xxl" class="mt-8" />
+<TextPlaceholder size="2xl" class="mt-8" />
 ```
 
 ## Card placeholder
@@ -91,7 +91,7 @@ To display image placeholder without text, use `imgOnly` prop as seen in the fol
 <CardPlaceholder size="md" class="mt-8" />
 <CardPlaceholder size="lg" class="mt-8" />
 <CardPlaceholder size="xl" class="mt-8" />
-<CardPlaceholder size="xxl" class="mt-8" />
+<CardPlaceholder size="2xl" class="mt-8" />
 ```
 
 ## Widget placeholder

src/routes/docs/components/spinner.md

@@ -63,9 +63,9 @@ Change the size of the spinner component using the `size` prop.
   import { Spinner } from "flowbite-svelte";
 </script>
 
-<Spinner size={4} />
+<Spinner size="4" />
 <Spinner size="6" />
-<Spinner size={8} />
+<Spinner size="8" />
 ```
 
 ## Alignment
@@ -91,10 +91,10 @@ The spinner component can also be used inside elements such as buttons when subm
 
 <div class="flex flex-wrap items-center gap-2">
   <Button>
-    <Spinner class="me-3" size="4" color="white" />
+    <Spinner class="me-3" size="4" color="blue" />
     Loading ...
   </Button>
-  <Button outline color="dark">
+  <Button outline color="gray">
     <Spinner class="me-3" size="4" />
     Loading ...
   </Button>

src/routes/docs/components/typography.md

@@ -102,19 +102,19 @@ Use the following code to create list items with ordered and unordered lists.
 </script>
 
 <Heading tag="h5">List disc</Heading>
-<List list="disc">
+<List class="list-disc">
   <Li>Design</Li>
   <Li>Develop</Li>
   <Li>Test</Li>
 </List>
 <Heading tag="h5">List decimal</Heading>
-<List list="decimal">
+<List class="list-decimal">
   <Li>Design</Li>
   <Li>Develop</Li>
   <Li>Test</Li>
 </List>
 <Heading tag="h5">List none</Heading>
-<List list="none">
+<List class="list-none">
   <Li>Design</Li>
   <Li>Develop</Li>
   <Li>Test</Li>
@@ -123,7 +123,7 @@ Use the following code to create list items with ordered and unordered lists.
 
 ## List position
 
-Use the list-inside and list-outside classes to set the list item position inside a list component.
+Use the `position="inside"` and `position="outside"` props to set the list item position inside or outside of a list component.
 
 ```svelte example hideResponsiveButtons
 <script>

src/routes/docs/forms/file-input.md

@@ -10,7 +10,6 @@ thumnailSize: w-48
 
 <script>
   import { CompoAttributesViewer,  GitHubCompoLinks, toKebabCase } from '../../utils'
-  import { Badge, A } from '$lib'
   const components = 'Fileupload'
 </script>
 
@@ -39,9 +38,9 @@ The file input component can be used to upload one or more files from the device
 ## Clearable and multiple files
 
 ```svelte example
-<script>
+<script lang="ts">
   import { Fileupload, Helper } from "flowbite-svelte";
-  let selectedFiles = $state();
+  let selectedFiles = $state<FileList | null>(null);
   let fileNames = $derived(
     selectedFiles
       ? Array.from(selectedFiles)
@@ -73,68 +72,59 @@ The file input component can be used to upload one or more files from the device
 ## Dropzone
 
 ```svelte example
-<script>
+<script lang="ts">
   import { Dropzone } from "flowbite-svelte";
 
-  let value = [];
-  const dropHandle = (event) => {
-    value = [];
-    event.preventDefault();
-    if (event.dataTransfer.items) {
-      [...event.dataTransfer.items].forEach((item, i) => {
-        if (item.kind === "file") {
-          const file = item.getAsFile();
-          value.push(file.name);
-          value = value;
-        }
-      });
-    } else {
-      [...event.dataTransfer.files].forEach((file, i) => {
-        value = file.name;
-      });
-    }
-  };
-
-  const handleChange = (event) => {
-    const files = event.target.files;
-    if (files.length > 0) {
-      value.push(files[0].name);
-      value = value;
-    }
-  };
-
-  const showFiles = (files) => {
-    if (files.length === 1) return files[0];
-    let concat = "";
-    files.map((file) => {
-      concat += file;
-      concat += ",";
-      concat += " ";
-    });
-
-    if (concat.length > 40) concat = concat.slice(0, 40);
-    concat += "...";
-    return concat;
-  };
+   let value: FileList | null = $state(null);
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  value = target.files;
+}
+
+function dropHandle(event: DragEvent) {
+  event.preventDefault();
+  value = event.dataTransfer?.files ?? null;
+}
+
+function showFiles(files: FileList | null): string {
+  if (!files || files.length === 0) return 'No files selected.';
+  return Array.from(files).map(file => file.name).join(', ');
+}
 </script>
 
 <Dropzone
   id="dropzone"
+  bind:files={value}
   ondrop={dropHandle}
-  ondragover={(event) => {
-    event.preventDefault();
-  }}
+  ondragover={(event) => event.preventDefault()}
   onchange={handleChange}
 >
-  <svg aria-hidden="true" class="mb-3 h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
-  {#if value.length === 0}
+  <svg 
+    aria-hidden="true" 
+    class="mb-3 h-10 w-10 text-gray-400" 
+    fill="none" 
+    stroke="currentColor" 
+    viewBox="0 0 24 24" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+      stroke-linecap="round" 
+      stroke-linejoin="round" 
+      stroke-width="2" 
+      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" 
+    />
+  </svg>
+  
+  {#if !value || value.length === 0}
     <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
-      <span class="font-semibold">Click to upload</span>
-      or drag and drop
+      <span class="font-semibold">Click to upload</span> or drag and drop
+    </p>
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+      SVG, PNG, JPG or GIF (MAX. 800x400px)
     </p>
-    <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
   {:else}
-    <p>{showFiles(value)}</p>
+    <p class="text-sm text-green-600">{showFiles(value)}</p>
   {/if}
 </Dropzone>
 ```

src/routes/docs/forms/floating-label.md

@@ -10,7 +10,6 @@ thumnailSize: w-40
 
 <script>
   import { CompoAttributesViewer,  GitHubCompoLinks, toKebabCase } from '../../utils'
-  import { Badge, A } from '$lib'
 
   const components = 'FloatingLabelInput, Helper'
 </script>
@@ -39,7 +38,7 @@ Get started with the following three styles for the floating label component and
 <div id="exampleWrapper" class="grid w-full items-end gap-6 md:grid-cols-3">
   <FloatingLabelInput variant="filled" id="floating_filled" name="floating_filled" type="text">Floating filled</FloatingLabelInput>
   <FloatingLabelInput variant="outlined" id="floating_outlined" name="floating_outlined" type="text">Floating outlined</FloatingLabelInput>
-  <FloatingLabelInput id="floating_standard" name="floating_standard" type="text" label="Floating standard">Floating standard</FloatingLabelInput>
+  <FloatingLabelInput id="floating_standard" name="floating_standard" type="text">Floating standard</FloatingLabelInput>
 </div>
 ```