sveltekit-ui 1.1.76 → 1.1.78

package/dist/Components/ImageEditor/{manager.svelte.js → index.svelte.js}

@@ -6,13 +6,13 @@ import {
   set_closurable,
   url_to_file,
 } from "../../client/index.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
-import { create_popover_manager } from "../Popover/manager.svelte.js"
-import { create_text_input_manager } from "../TextInput/manager.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
-import { create_slider_manager } from "../Slider/manager.svelte.js"
-import { create_file_input_manager } from "../FileInput/manager.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_slider_manager } from "../Slider/index.svelte.js"
+import { create_file_input_manager } from "../FileInput/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
 import "context-filter-polyfill" // ctx.filter doesnt work on safari and this should fix
 
 export function create_image_editor_manager(config) {

package/dist/Components/ImageSlider/{manager.svelte.js → index.svelte.js}

@@ -1,4 +1,4 @@
-import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
 import { create_unique_id, set_closurable } from "../../client/index.js"
 
 export function create_image_slider_manager(config) {

package/dist/Components/InfoBox/index.svelte

@@ -1,7 +1,7 @@
 <script>
   import { fade } from "svelte/transition"
   import Button from "../Button/index.svelte"
-  import { create_button_manager } from "../Button/manager.svelte.js"
+  import { create_button_manager } from "../Button/index.svelte.js"
   import { normalize_link_href } from "../../client/links.js"
 
   let {

package/dist/Components/Json/{manager.svelte.js → index.svelte.js}

@@ -1,10 +1,10 @@
 import { create_unique_id, copy_to_clipboard, csv_to_json, set_closurable } from "../../client/index.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
-import { create_file_input_manager } from "../FileInput/manager.svelte.js"
-import { create_popover_manager } from "../Popover/manager.svelte.js"
-import { create_text_input_manager } from "../TextInput/manager.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_file_input_manager } from "../FileInput/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
 
 export function create_json_manager(config) {
   const id = create_unique_id(null, 20)

package/dist/Components/Layout/{manager.svelte.js → index.svelte.js}

@@ -1,7 +1,7 @@
 import { get_user_interface, set_closurable } from "../../client/index.js"
-import { create_alert_manager } from "../Alert/manager.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
-import { create_confetti_manager } from "../Confetti/manager.svelte.js"
+import { create_alert_manager } from "../Alert/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
+import { create_confetti_manager } from "../Confetti/index.svelte.js"
 import { goto } from "$app/navigation"
 
 export function create_layout_manager(config) {

package/dist/Components/Link/{manager.svelte.js → index.svelte.js}

@@ -1,6 +1,6 @@
-import { create_popover_manager } from "../Popover/manager.svelte.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
-import { create_qr_manager } from "../Qr/manager.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_qr_manager } from "../Qr/index.svelte.js"
 import {
   copy_to_clipboard,
   create_unique_id,

package/dist/Components/Location/{manager.svelte.js → index.svelte.js}

@@ -1,6 +1,6 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_popover_manager } from "../Popover/manager.svelte.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
 import { browser } from "$app/environment"
 import { load_mapkit_script } from "../../client/mapkit.js"
 

package/dist/Components/LocationInput/{manager.svelte.js → index.svelte.js}

@@ -1,9 +1,9 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
-import { create_popover_manager } from "../Popover/manager.svelte.js"
-import { create_text_input_manager } from "../TextInput/manager.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
 import { browser } from "$app/environment"
 import { get_mapkit_api, load_mapkit_script } from "../../client/mapkit.js"
 

package/dist/Components/PhoneCountryCode/{manager.svelte.js → index.svelte.js}

@@ -1,4 +1,4 @@
-import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
 
 export function create_country_code_manager(config) {
   let dropdown_manager = $state(null)

package/dist/Components/PhoneNumber/{manager.svelte.js → index.svelte.js}

@@ -1,4 +1,4 @@
-import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
 import { normalize_link_href, set_closurable } from "../../client/index.js"
 
 export function create_phone_number_manager(config) {

package/dist/Components/Popover/{manager.svelte.js → index.svelte.js}

@@ -1,5 +1,5 @@
 import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
 
 export function create_popover_manager(config) {
   const id = create_unique_id(null, 20)

package/dist/Components/Qr/{manager.svelte.js → index.svelte.js}

@@ -1,5 +1,5 @@
-import { create_button_manager } from "../Button/manager.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
 import { copy_to_clipboard, create_unique_id, deep_copy, color_to_css } from "../../client/index.js"
 import QRCodeStyling from "qr-code-styling"
 

package/dist/Components/QrInput/{manager.svelte.js → index.svelte.js}

@@ -1,10 +1,10 @@
-import { create_color_input_manager } from "../ColorInput/manager.svelte.js"
-import { create_slider_manager } from "../Slider/manager.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
-import { create_text_input_manager } from "../TextInput/manager.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
-import { create_qr_manager } from "../Qr/manager.svelte.js"
+import { create_color_input_manager } from "../ColorInput/index.svelte.js"
+import { create_slider_manager } from "../Slider/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_qr_manager } from "../Qr/index.svelte.js"
 
 export function create_qr_input_manager(config) {
   let margin_slider_manager = $state(null)

package/dist/Components/Slider/{manager.svelte.js → index.svelte.js}

@@ -1,5 +1,5 @@
 import { create_unique_id, deep_copy, set_closurable, set_closurable_color, color_to_css } from "../../client/index.js"
-import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
 
 export function create_slider_manager(config) {
   const id = create_unique_id(null, 20)

package/dist/Components/StoragePicker/index.svelte

@@ -6,6 +6,8 @@
   import DisplayFile from "./DisplayFile/index.svelte"
   import FileInput from "../FileInput/index.svelte"
   import InfoBox from "../InfoBox/index.svelte"
+  import Checkbox from "../Checkbox/index.svelte"
+  import Icon from "../Icon/index.svelte"
   import { onDestroy } from "svelte"
 
   let { manager } = $props()
@@ -13,6 +15,41 @@
   onDestroy(() => manager?.on_destroy?.())
 </script>
 
+{#snippet file_item(file)}
+  {#if manager?.view_mode === "list"}
+    <div class="file_row" data-file-view="list">
+      {#if manager?.is_multiselect}
+        <Checkbox manager={file?.selection_checkbox_manager} />
+      {/if}
+      <div class="list_file_icon">
+        <Icon manager={manager?.list_file_icon_manager} />
+      </div>
+      <h4 title={file?.file_name}>{file?.file_name}</h4>
+      <p class="list_file_type">{file?.mime_type ?? file?.file?.type}</p>
+      <p class="list_file_size">{file?.size_kb != null ? `${file.size_kb}KB` : ""}</p>
+      {#if !manager?.is_multiselect}
+        <div class="list_file_action">
+          <Button manager={file?.select_button_manager} />
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div class="file_container" data-file-view="grid">
+      <div>
+        <div class="file_display" style="height: {manager?.display_height}rem;">
+          <DisplayFile manager={file} />
+        </div>
+        <div class="file_det">
+          <p>{file?.mime_type ?? file?.file?.type}</p>
+          <p>{file?.size_kb != null ? `${file.size_kb}KB` : ""}</p>
+        </div>
+        <h4>{file?.file_name}</h4>
+      </div>
+      <Button manager={file?.select_button_manager} />
+    </div>
+  {/if}
+{/snippet}
+
 <div style="margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;">
   {#if manager?.is_show_button}
     <Button manager={manager?.select_file_from_storage_button_manager} />
@@ -35,27 +72,28 @@
     {#snippet content()}
       <div>
         <InfoBox message={manager?.error_message} mb={1} />
+        {#if manager?.is_show_select_all_locally_uploaded_files || manager?.is_show_file_view_controls}
+          <div class="picker_toolbar">
+            {#if manager?.is_show_select_all_locally_uploaded_files}
+              <Button manager={manager?.select_all_locally_uploaded_files_button_manager} />
+            {/if}
+            {#if manager?.is_show_file_view_controls}
+              <div class="view_toggle" role="group" aria-label="File view">
+                <Button manager={manager?.grid_view_button_manager} />
+                <Button manager={manager?.list_view_button_manager} />
+              </div>
+            {/if}
+          </div>
+        {/if}
         {#if manager?.storage_origins.includes("locally_uploaded_files")}
           <h3>Locally Uploaded Files</h3>
-          <div>
+          <div style="margin-bottom: 0.5rem;">
             <FileInput manager={manager?.file_input_manager} />
           </div>
           {#if Array.isArray(manager?.locally_uploaded_files_prepped) && manager?.locally_uploaded_files_prepped.length > 0}
-            <div class="files_container">
+            <div class:list_view={manager?.view_mode === "list"} class="files_container">
               {#each manager?.locally_uploaded_files_prepped as locally_uploaded_file_prepped (locally_uploaded_file_prepped?.id)}
-                <div class="file_container">
-                  <div>
-                    <div class="file_display" style="height: {manager?.display_height}rem;">
-                      <DisplayFile manager={locally_uploaded_file_prepped} />
-                    </div>
-                    <div class="file_det">
-                      <p>{locally_uploaded_file_prepped?.file?.type}</p>
-                      <p>{Math.round(locally_uploaded_file_prepped?.file?.size * 0.001)}KB</p>
-                    </div>
-                    <h4>{locally_uploaded_file_prepped?.file_name}</h4>
-                  </div>
-                  <Button manager={locally_uploaded_file_prepped?.select_button_manager} />
-                </div>
+                {@render file_item(locally_uploaded_file_prepped)}
               {/each}
             </div>
           {:else}
@@ -79,22 +117,10 @@
               {/if}
             </div>
             <div class="storage_files_container">
-              <div class="files_container">
+              <div class:list_view={manager?.view_mode === "list"} class="files_container">
                 {#if Array.isArray(manager?.storage_files_prepped) && manager?.storage_files_prepped.length > 0}
                   {#each manager?.storage_files_prepped as storage_file_prepped (storage_file_prepped?.id)}
-                    <div class="file_container">
-                      <div>
-                        <div style="height: 20rem;">
-                          <DisplayFile manager={storage_file_prepped} />
-                        </div>
-                        <div class="file_det">
-                          <p>{storage_file_prepped?.mime_type}</p>
-                          <p>{storage_file_prepped?.size_kb}KB</p>
-                        </div>
-                        <h4>{storage_file_prepped?.file_name}</h4>
-                      </div>
-                      <Button manager={storage_file_prepped?.select_button_manager} />
-                    </div>
+                    {@render file_item(storage_file_prepped)}
                   {/each}
                 {:else}
                   <p>No files-to-upload found</p>
@@ -125,6 +151,18 @@
 </div>
 
 <style>
+  .picker_toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+  .view_toggle {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: auto;
+  }
   .storage_container {
     display: flex;
   }
@@ -144,6 +182,11 @@
     grid-template-columns: repeat(auto-fill, minmax(clamp(20%, 20rem, 100%), 1fr));
     grid-auto-rows: 1fr;
   }
+  .files_container.list_view {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
   .file_container {
     display: flex;
     flex-direction: column;
@@ -190,4 +233,50 @@
     max-height: 20rem;
     max-width: 100%;
   }
+  .file_row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+    padding: 0.75rem;
+    border: 1px solid var(--shadow3-t);
+    border-radius: 1rem;
+  }
+  .file_row h4,
+  .file_row p {
+    margin: 0;
+  }
+  .file_row h4 {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .list_file_icon {
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+  }
+  .list_file_type,
+  .list_file_size {
+    color: var(--g7-t);
+    white-space: nowrap;
+  }
+  .list_file_action {
+    flex: 0 0 auto;
+  }
+
+  @media (max-width: 600px) {
+    .picker_toolbar {
+      align-items: stretch;
+      flex-direction: column;
+    }
+    .view_toggle {
+      align-self: flex-end;
+    }
+    .list_file_type {
+      display: none;
+    }
+  }
 </style>