sveltekit-ui 1.0.0

package/src/lib/Components/StoragePicker/index.svelte

@@ -0,0 +1,192 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import Spacer from "$lib/Components/Spacer/index.svelte"
+  import Breadcrumbs from "$lib/Components/Breadcrumbs/index.svelte"
+  import DisplayFile from "$lib/Components/StoragePicker/DisplayFile/index.svelte"
+  import FileInput from "$lib/Components/FileInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#snippet display_val(input)}
+  {#if Array.isArray(input) && input.length > 0}
+    {#each input 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 input={input_item} />
+    {/each}
+  {:else}
+    {@render display_file(input)}
+  {/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} />
+  {/if}
+  {#if manager?.is_show_content}
+    <div style="margin-top: 1rem;">
+      <DisplayFile input={manager?.display_file} />
+    </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 input={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 input={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>