sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/Spacer/index.svelte

@@ -0,0 +1,41 @@
+<script>
+  let {
+    is_vert = false,
+    ml = 0,
+    mr = 0,
+    mt = 0,
+    mb = 0,
+    sw = 0.1,
+    color = "var(--shadow7-t)",
+    min_length = 2,
+  } = $props()
+</script>
+
+<div
+  style="--ml: {ml}rem; --mr: {mr}rem; --mt: {mt}rem; --mb: {mb}rem; --color: {color}; --sw: {sw}rem; --min_length: {min_length}rem;"
+  class="container"
+  class:vert={is_vert}
+  class:horiz={!is_vert}
+></div>
+
+<style>
+  .container {
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+  }
+  .vert {
+    display: flex;
+    flex-direction: column;
+    min-height: var(--min_length);
+    border-left: var(--sw) solid var(--color);
+  }
+  .horiz {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: var(--min_length);
+    border-bottom: var(--sw) solid var(--color);
+  }
+</style>

package/dist/Components/StoragePicker/DisplayFile/index.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Audio from "../../Audio/index.svelte"
+  import Image from "../../Image/index.svelte"
+  import Icon from "../../Icon/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if ["audio/mpeg"].includes(manager?.mime_type)}
+  <Audio manager={manager?.manager} />
+{:else if ["image/webp", "image/jpeg", "image/png", "image/gif", "image/svg+xml"].includes(manager?.mime_type)}
+  <Image manager={manager?.manager} />
+{:else if manager && Object.keys(manager || {}).length > 0}
+  <Icon manager={manager?.file_icon_manager} />
+{/if}

package/dist/Components/StoragePicker/index.svelte

@@ -0,0 +1,187 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import Spacer from "../Spacer/index.svelte"
+  import Breadcrumbs from "../Breadcrumbs/index.svelte"
+  import DisplayFile from "./DisplayFile/index.svelte"
+  import FileInput from "../FileInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<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} />
+  {/if}
+  {#if manager?.is_show_content}
+    <div style="margin-top: 1rem;">
+      {#if Array.isArray(manager?.display_file) && manager?.display_file.length > 0}
+        {#each manager?.display_file as input_item}
+          <div style="display: flex; gap: 1rem; align-items: center;">
+            <p>{input_item?.file_name}</p>
+            <p style="color: var(--g10-t); font-size: 1.2rem;">{input_item?.mime_type}</p>
+          </div>
+          <DisplayFile manager={input_item} />
+        {/each}
+      {:else}<DisplayFile manager={manager?.display_file} />
+      {/if}
+    </div>
+  {/if}
+  <Popover manager={manager?.popover_manager}>
+    {#snippet content()}
+      <div>
+        {#if manager?.storage_origins.includes("locally_uploaded_files")}
+          <h3>Locally Uploaded Files</h3>
+          <div>
+            <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">
+              {#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>
+              {/each}
+            </div>
+          {:else}
+            <p>No locally uploaded files found</p>
+          {/if}
+          <Spacer mt={1} mb={1} />
+        {/if}
+        {#if manager?.storage_origins.includes("storage")}
+          <div style="display: flex; gap: 1rem;">
+            <h3>Storage Files</h3>
+            <Breadcrumbs manager={manager?.breadcrumbs_manager} />
+          </div>
+          <div class="storage_container">
+            <div class="folders_container">
+              {#if Array.isArray(manager?.folders_prepped) && manager?.folders_prepped.length > 0}
+                {#each manager?.folders_prepped as folder_prepped}
+                  <Button manager={folder_prepped} />
+                {/each}
+              {:else}
+                <p>No folders found</p>
+              {/if}
+            </div>
+            <div class="storage_files_container">
+              <div 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>
+                  {/each}
+                {:else}
+                  <p>No files-to-upload found</p>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/snippet}
+    {#snippet footer()}
+      <div>
+        {#if manager?.is_multiselect}
+          <div style="display: flex; flex: 1; width: 100%; gap: 1rem;">
+            {#if Array.isArray(manager?.val) && manager?.val.length > 0}
+              <Button manager={manager?.clear_button_manager} />
+            {/if}
+            <div style="display: column; flex: 1; width: 100%;">
+              <Button manager={manager?.finish_multiselect_button_manager} />
+            </div>
+          </div>
+        {:else if manager?.val}
+          <Button manager={manager?.clear_button_manager} />
+        {/if}
+      </div>
+    {/snippet}
+  </Popover>
+</div>
+
+<style>
+  .storage_container {
+    display: flex;
+  }
+  .folders_container {
+    width: 25rem;
+    border-right: 1px solid var(--shadow3-t);
+    padding-right: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .storage_files_container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  .files_container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(clamp(20%, 20rem, 100%), 1fr));
+    grid-auto-rows: 1fr;
+  }
+  .file_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 10rem;
+    max-width: 30rem;
+    margin: 0;
+    padding: 0.5rem;
+    border-radius: 1.5rem;
+  }
+  .file_container:hover {
+    background-color: var(--shadow1-t);
+    box-shadow:
+      0 0.4rem 1.6rem var(--shadow2),
+      inset 0 0 0 1px var(--shadow2-t);
+    -webkit-box-shadow:
+      0 0.4rem 1.6rem var(--shadow2),
+      inset 0 0 0 1px var(--shadow2-t);
+  }
+  .file_container h4 {
+    margin: 0.5rem 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    line-height: 2rem;
+    font-size: 1.6rem;
+    font-weight: 500;
+    max-height: 6rem; /* line-height * number of lines */
+  }
+  .file_det {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .file_det p {
+    font-size: 1.6rem;
+    color: var(--g7-t);
+  }
+  .file_display {
+    display: grid;
+    place-items: center;
+    max-height: 20rem;
+    max-width: 100%;
+  }
+</style>