sveltekit-ui 1.0.0

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

@@ -0,0 +1,593 @@
+import {
+  set_closurable,
+  create_unique_id,
+  deep_copy,
+  clean_custom_identifier,
+  mime_type_extensions,
+} from "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_audio_manager } from "../Audio/index.svelte.js"
+import { create_image_manager } from "../Image/index.svelte.js"
+import { create_breadcrumbs_manager } from "../Breadcrumbs/index.svelte.js"
+import { create_file_input_manager } from "../FileInput/index.svelte.js"
+import { create_icon_manager } from "../Icon/index.svelte.js"
+
+export function create_storage_picker_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let val = $state(null)
+  let storage = $state(null)
+  let storage_path = $state([])
+  let default_folder_path = $state(null)
+  let display_height = $state(20)
+  let locally_uploaded_files = $state(null)
+  let storage_origins = $state(null)
+  let mt = $state(0)
+  let mb = $state(0)
+  let breadcrumbs_manager = $state(null)
+  let locally_uploaded_files_prepped = $state([])
+  let storage_files_prepped = $state([])
+
+  let popover_manager = $state(null)
+  let file_input_manager = $state(null)
+  let folders_prepped = $state(null)
+  let select_file_from_storage_button_manager = $state(null)
+  let clear_button_manager = $state(null)
+  let finish_multiselect_button_manager = $state(null)
+  let display_file = $state(null)
+  let file_icon_manager = $state(null)
+
+  let is_show_content = $derived(set_closurable(config?.is_show_content, true))
+  let is_multiselect = $derived(set_closurable(config?.is_multiselect, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let storage_src = $derived(
+    set_closurable(config?.storage_src, "https://www.contibase.com/api/v1/storage/{storage_id}")
+  )
+  let select_file_loading_id = $state(null)
+
+  function get_src(src, storage_id) {
+    if (src) {
+      return src
+    } else if (storage_id && storage_src) {
+      return storage_src.replace("{storage_id}", storage_id)
+    } else {
+      return null
+    }
+  }
+
+  async function set_display_file() {
+    if (Array.isArray(val)) {
+      let display_files = []
+      for (let item of val) {
+        const display_file_res = await set_display_single_file(item)
+        display_files.push(display_file_res)
+      }
+      display_file = display_files
+      return
+    }
+    const display_file_res = await set_display_single_file(val)
+    display_file = display_file_res
+  }
+
+  async function set_display_single_file(input) {
+    let display_file_loc = null
+    if (input?.file) {
+      display_file_loc = {
+        mime_type: input?.file?.type,
+        src: URL.createObjectURL(input?.file),
+      }
+    } else if (input?.id) {
+      display_file_loc = {
+        ...input,
+        src: get_src(input?.src, input?.id),
+      }
+    }
+    if (display_file_loc?.mime_type == "audio/mpeg") {
+      display_file_loc.manager = create_audio_manager({
+        src: display_file_loc?.src,
+        type: display_file_loc?.mime_type,
+        image_src: display_file_loc?.image_src,
+        image_type: display_file_loc?.image_type,
+      })
+    } else if (["image/webp", "image/jpeg", "image/png", "image/gif"].includes(display_file_loc?.mime_type)) {
+      display_file_loc.manager = create_image_manager({
+        src: display_file_loc?.src,
+        display_max_height: 200,
+        display_max_width: 200,
+        bg_img_blur: 20,
+        bg_img_opacity: 0.01,
+      })
+    }
+    return display_file_loc
+  }
+
+  let acceptable_mime_types = $derived(Array.isArray(config?.accept) ? config?.accept : null)
+  let ordered_items = $derived(get_ordered_items(storage, locally_uploaded_files, storage_path, acceptable_mime_types))
+  let is_file_chosen = $derived((Array.isArray(val) && val.length > 0) || !!val?.file || !!val?.file_name)
+
+  function get_ordered_items(storage, locally_uploaded_files, storage_path, acceptable_mime_types) {
+    let folder_ids = []
+    let storage_ids = []
+    let locally_uploaded_files_ids = []
+    const is_acceptable_mime_type = (item) => {
+      return (
+        !(Array.isArray(acceptable_mime_types) && acceptable_mime_types.length > 0) ||
+        acceptable_mime_types.includes(item.mime_type)
+      )
+    }
+    if (
+      Array.isArray(storage_origins) &&
+      storage_origins.includes("storage") &&
+      typeof storage === "object" &&
+      !Array.isArray(storage) &&
+      Object.keys(storage || {}).length > 0
+    ) {
+      let folders_with_acceptable_files = new Set()
+      Object.entries(storage).forEach(([id, item]) => {
+        const item_path = item?.folder_path || []
+        const is_at_current_path = storage_path.every((part, index) => part === (item_path[index] || ""))
+        const is_next_folder = storage_path.length < item_path.length && is_at_current_path
+        if (is_at_current_path && item_path.length === storage_path.length && is_acceptable_mime_type(item)) {
+          storage_ids.push(id)
+        }
+        if (is_next_folder && is_acceptable_mime_type(item)) {
+          folders_with_acceptable_files.add(item_path[storage_path.length])
+        }
+      })
+      folder_ids = Array.from(folders_with_acceptable_files).sort()
+      storage_ids = storage_ids.sort()
+    }
+    if (
+      Array.isArray(storage_origins) &&
+      storage_origins.includes("locally_uploaded_files") &&
+      typeof locally_uploaded_files === "object" &&
+      !Array.isArray(locally_uploaded_files) &&
+      Object.keys(locally_uploaded_files || {}).length > 0
+    ) {
+      locally_uploaded_files_ids = Object.values(locally_uploaded_files)
+        .filter((locally_uploaded_file) => is_acceptable_mime_type(locally_uploaded_file))
+        .sort((a, b) => {
+          if (a?.db_epoch_updated == null && b?.db_epoch_updated == null) return 0
+          if (a?.db_epoch_updated == null) return 1
+          if (b?.db_epoch_updated == null) return -1
+          return b.db_epoch_updated - a.db_epoch_updated
+        })
+        .map((locally_uploaded_file) => locally_uploaded_file?.id)
+    }
+    return { folder_ids, storage_ids, locally_uploaded_files_ids }
+  }
+
+  function convert_file_to_base64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result.split(",")[1])
+      reader.onerror = (error) => reject(error)
+      reader.readAsDataURL(file)
+    })
+  }
+
+  async function fetch_and_convert_to_base64(storage_id, file_name, mime_type) {
+    try {
+      let storage_src_loc = storage_src.replace("{storage_id}", storage_id)
+      console.log("storage_src_loc", storage_src_loc)
+      const response = await fetch(storage_src_loc)
+      if (!response.ok) {
+        throw new Error(`Failed to fetch file from storage. Status: ${response.status}`)
+      }
+      const blob = await response.blob()
+      const file = new File([blob], file_name, { type: mime_type })
+      const base64_content = await convert_file_to_base64(file)
+      return base64_content
+    } catch (error) {
+      console.error("Error fetching or converting file to Base64:", error)
+      return null
+    }
+  }
+
+  async function select_file(storage_item, loading_id) {
+    if (!loading_id) {
+      loading_id = create_unique_id(null, 20)
+    }
+    select_file_loading_id = loading_id
+    if (is_multiselect) {
+      const existing_index = Array.isArray(val) ? val.findIndex((h) => h?.id == storage_item?.id) : -1
+      if (existing_index > -1) {
+        val = val.filter((h) => h?.id != storage_item?.id)
+      } else {
+        if (storage_item?.file) {
+          storage_item.base64_content = await convert_file_to_base64(storage_item?.file)
+        } else {
+          storage_item.base64_content = await fetch_and_convert_to_base64(
+            storage_item?.id,
+            storage_item?.file_name,
+            storage_item?.mime_type
+          )
+        }
+        val = [...(Array.isArray(val) ? val : []), storage_item]
+      }
+    } else {
+      if (storage_item?.file) {
+        storage_item.base64_content = await convert_file_to_base64(storage_item?.file)
+      } else {
+        storage_item.base64_content = await fetch_and_convert_to_base64(
+          storage_item?.id,
+          storage_item?.file_name,
+          storage_item?.mime_type
+        )
+      }
+      val = storage_item
+      if (typeof config?.on_finish == "function") {
+        config?.on_finish(val)
+      }
+      popover_manager?.close()
+    }
+    set_display_file()
+    select_file_loading_id = null
+  }
+
+  async function set_val(input) {
+    if (input && typeof input == "object" && !Array.isArray(input)) {
+      if (input?.file) {
+        input.base64_content = await convert_file_to_base64(input?.file)
+      } else {
+        input.base64_content = await fetch_and_convert_to_base64(input?.id, input?.file_name, input?.mime_type)
+      }
+    }
+    val = input
+    set_display_file()
+  }
+
+  function clear(is_call_finish = true) {
+    val = null
+    if (is_call_finish && typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+    set_display_file()
+  }
+
+  function set_locally_uploaded_files_prepped() {
+    let locally_uploaded_files_prepped_loc = []
+    if (
+      storage_origins.includes("locally_uploaded_files") &&
+      Array.isArray(ordered_items?.locally_uploaded_files_ids) &&
+      ordered_items?.locally_uploaded_files_ids.length > 0
+    ) {
+      for (let locally_uploaded_file_id of ordered_items?.locally_uploaded_files_ids) {
+        const locally_uploaded_file = locally_uploaded_files?.[locally_uploaded_file_id]
+        const loading_id = create_unique_id(null, 20)
+        let locally_uploaded_file_prepped = {
+          ...locally_uploaded_file,
+          select_button_manager: create_button_manager({
+            text: () =>
+              Array.isArray(val) && val.some((h) => h?.id == locally_uploaded_file?.id)
+                ? "Deselect File"
+                : "Select File",
+            selected_type: () =>
+              Array.isArray(val) && val.some((h) => h?.id == locally_uploaded_file?.id) ? "selected" : null,
+            is_loading: () => select_file_loading_id == loading_id,
+            is_disabled: () => select_file_loading_id && select_file_loading_id != loading_id,
+            mt: 1,
+            on_click: () => select_file(locally_uploaded_file, loading_id),
+          }),
+        }
+        if (["audio/mpeg"].includes(locally_uploaded_file_prepped?.mime_type)) {
+          locally_uploaded_file_prepped.manager = create_audio_manager({
+            ui_type: "short",
+            src: get_src(locally_uploaded_file?.src, locally_uploaded_file?.id),
+            type: "audio/mpeg",
+          })
+        } else if (
+          ["image/webp", "image/jpeg", "image/png", "image/gif"].includes(locally_uploaded_file_prepped?.mime_type)
+        ) {
+          locally_uploaded_file_prepped.manager = create_image_manager({
+            src: get_src(locally_uploaded_file?.src, locally_uploaded_file?.id),
+            display_max_height: 200,
+            display_max_width: 200,
+            bg_img_blur: 20,
+            bg_img_opacity: 0.01,
+          })
+        }
+        locally_uploaded_files_prepped_loc.push(locally_uploaded_file_prepped)
+      }
+    }
+    locally_uploaded_files_prepped = locally_uploaded_files_prepped_loc
+  }
+
+  function set_files_prepped() {
+    set_locally_uploaded_files_prepped()
+    let storage_files_prepped_loc = []
+    if (storage_origins.includes("storage")) {
+      breadcrumbs_manager = create_breadcrumbs_manager({
+        val: deep_copy(storage_path),
+        on_change: (input) => {
+          storage_path = input
+          set_files_prepped()
+        },
+      })
+      let folder_buttons_prepped = []
+      if (Array.isArray(ordered_items?.folder_ids) && ordered_items?.folder_ids.length > 0) {
+        for (let folder_id of ordered_items?.folder_ids) {
+          folder_buttons_prepped.push(
+            create_button_manager({
+              type: "soft",
+              support_icon: "folder",
+              icon_pos: "left",
+              text_align: "left",
+              text: folder_id,
+              on_click: () => {
+                storage_path = deep_copy([...storage_path, folder_id])
+                set_files_prepped()
+              },
+            })
+          )
+        }
+      }
+      folders_prepped = folder_buttons_prepped
+      if (Array.isArray(ordered_items?.storage_ids) && ordered_items?.storage_ids.length > 0) {
+        for (let storage_id of ordered_items?.storage_ids) {
+          const storage_item = storage?.[storage_id]
+          const loading_id = create_unique_id(null, 20)
+          const src = get_src(storage_item?.src, storage_item?.id)
+          let storage_file_prepped_loc = {
+            ...storage_item,
+            src: src,
+            select_button_manager: create_button_manager({
+              text: () =>
+                Array.isArray(val) && val.some((h) => h?.id == storage_id) ? "Deselect File" : "Select File",
+              selected_type: () => (Array.isArray(val) && val.some((h) => h?.id == storage_id) ? "selected" : null),
+              is_loading: () => select_file_loading_id == loading_id,
+              is_disabled: () => select_file_loading_id && select_file_loading_id != loading_id,
+              mt: 1,
+              on_click: () => select_file(storage?.[storage_id], loading_id),
+            }),
+          }
+          if (["audio/mpeg"].includes(storage_item?.mime_type)) {
+            storage_file_prepped_loc.manager = create_audio_manager({
+              ui_type: "short",
+              src: src,
+              type: "audio/mpeg",
+            })
+          } else if (["image/webp", "image/jpeg", "image/png", "image/gif"].includes(storage_item?.mime_type)) {
+            storage_file_prepped_loc.manager = create_image_manager({
+              src: src,
+              display_max_height: 200,
+              display_max_width: 200,
+              bg_img_blur: 20,
+              bg_img_opacity: 0.01,
+            })
+          }
+          storage_files_prepped_loc.push(storage_file_prepped_loc)
+        }
+      }
+    }
+    storage_files_prepped = storage_files_prepped_loc
+  }
+
+  function open_popover() {
+    popover_manager.open()
+  }
+
+  function init(config) {
+    storage =
+      config?.storage && Array.isArray(config?.storage)
+        ? config?.storage.reduce((acc, item) => {
+            acc[item.id] = item
+            return acc
+          }, {})
+        : config?.storage
+    locally_uploaded_files =
+      config?.locally_uploaded_files && Array.isArray(config?.locally_uploaded_files)
+        ? config?.locally_uploaded_files.reduce((acc, item) => {
+            acc[item?.id] = item
+            return acc
+          }, {})
+        : config?.locally_uploaded_files
+    storage_path = Array.isArray(config?.default_folder_path) ? config?.default_folder_path : []
+    storage_origins = config?.storage_origins ?? ["locally_uploaded_files", "storage"]
+    popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 900,
+      min_height: 320,
+      target_height: 700,
+      type: "center",
+      header: "Storage Picker",
+      anchor_id: () => `button_${select_file_from_storage_button_manager?.id}`,
+    })
+    select_file_from_storage_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: () => `Select File${is_multiselect ? "s" : ""}`,
+      is_loading: () => select_file_loading_id,
+      mb: 1,
+      is_disabled: () => is_disabled,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    file_input_manager = create_file_input_manager({
+      accept: acceptable_mime_types,
+      is_multiselect: true,
+      is_drop_zone: true,
+      is_disabled: () => is_disabled,
+      on_get_file: async (input) => {
+        console.log("on_get_file", input)
+        let locally_uploaded_files_to_add = {}
+        if (Array.isArray(input)) {
+          for (let file of input) {
+            console.log("item", file)
+            const id = create_unique_id(null, 20)
+            let file_obj = {
+              id: id,
+              file: file,
+              src: file ? URL.createObjectURL(file) : null,
+              file_name: clean_custom_identifier(file?.name.replace(/\..+$/, "")),
+              mime_type: file?.type,
+              file_extension: mime_type_extensions?.[file?.type],
+              size_kb: file?.size ? Math.round(file?.size * 0.001) : null,
+            }
+            console.log("file999", file)
+            const base64_content = await convert_file_to_base64(file)
+            file_obj.base64_content = base64_content
+            locally_uploaded_files_to_add[id] = file_obj
+          }
+        } else {
+          const id = create_unique_id(null, 20)
+          let file_obj = {
+            id: id,
+            file: input,
+            src: input ? URL.createObjectURL(input) : null,
+            file_name: clean_custom_identifier(input?.name.replace(/\..+$/, "")),
+            mime_type: input?.type,
+            file_extension: mime_type_extensions?.[input?.type],
+            size_kb: input?.size ? Math.round(input?.size * 0.001) : null,
+          }
+          const base64_content = await convert_file_to_base64(input)
+          file_obj.base64_content = base64_content
+          locally_uploaded_files_to_add[id] = file_obj
+        }
+        locally_uploaded_files = {
+          ...(locally_uploaded_files &&
+          typeof locally_uploaded_files == "object" &&
+          !Array.isArray(locally_uploaded_files)
+            ? locally_uploaded_files
+            : {}),
+          ...locally_uploaded_files_to_add,
+        }
+        set_locally_uploaded_files_prepped()
+        set_display_file()
+        file_input_manager.clear_files()
+      },
+    })
+    clear_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "x",
+      is_disabled: () => is_disabled,
+      text: () =>
+        val?.file_name ??
+        val?.file?.name ??
+        (Array.isArray(val) ? `${val.length} file${val.length > 1 ? "s" : ""} selected` : "Untitled"),
+      on_click: () => clear(),
+    })
+    finish_multiselect_button_manager = create_button_manager({
+      text: () =>
+        `Finish ${
+          Array.isArray(val)
+            ? val.length === 1
+              ? "(1 File Selected)"
+              : val.length > 1
+              ? "(" + val.length + " files selected)"
+              : ""
+            : ""
+        }`,
+      is_disabled: () => is_disabled || (Array.isArray(val) && val.length < 1),
+      on_click: () => {
+        console.log("val_fin", deep_copy(val))
+        set_display_file()
+        if (typeof config?.on_finish == "function") {
+          config?.on_finish(val)
+        }
+        popover_manager?.close()
+      },
+    })
+    file_icon_manager = create_icon_manager({
+      icon_id: "file",
+      size: 10,
+      sw: 10,
+      color: "var(--g6-t)",
+    })
+    set_files_prepped()
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get storage() {
+      return storage
+    },
+    get storage_path() {
+      return storage_path
+    },
+    get default_folder_path() {
+      return default_folder_path
+    },
+    get display_height() {
+      return display_height
+    },
+    get locally_uploaded_files() {
+      return locally_uploaded_files
+    },
+    get is_show_content() {
+      return is_show_content
+    },
+    get is_multiselect() {
+      return is_multiselect
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get storage_origins() {
+      return storage_origins
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get breadcrumbs_manager() {
+      return breadcrumbs_manager
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get file_input_manager() {
+      return file_input_manager
+    },
+    get select_file_from_storage_button_manager() {
+      return select_file_from_storage_button_manager
+    },
+    get folders_prepped() {
+      return folders_prepped
+    },
+    get clear_button_manager() {
+      return clear_button_manager
+    },
+    get finish_multiselect_button_manager() {
+      return finish_multiselect_button_manager
+    },
+    get acceptable_mime_types() {
+      return acceptable_mime_types
+    },
+    get ordered_items() {
+      return ordered_items
+    },
+    get is_file_chosen() {
+      return is_file_chosen
+    },
+    get locally_uploaded_files_prepped() {
+      return locally_uploaded_files_prepped
+    },
+    get storage_files_prepped() {
+      return storage_files_prepped
+    },
+    get is_show_button() {
+      return config?.is_show_button ?? true
+    },
+    get display_file() {
+      return display_file
+    },
+    get file_icon_manager() {
+      return file_icon_manager
+    },
+    init,
+    get_ordered_items,
+    select_file,
+    clear,
+    set_files_prepped,
+    open_popover,
+    set_val,
+  }
+}

package/dist/Components/SuccessCheck/index.svelte

@@ -0,0 +1,56 @@
+<script>
+  let { is_show = true, color = "var(--primary-t)", sw = 30 } = $props()
+</script>
+
+{#if is_show}
+  <svg
+    class="checkmark"
+    style="--color: {color}; --sw: {sw};"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle class="checkmark_circle" cx="256" cy="256" r="196.16" />
+    <path class="checkmark_check" d="m162.63 265.42 55.71 56.49 131-131.82" />
+  </svg>
+{/if}
+
+<style>
+  .checkmark {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    stroke-width: var(--sw);
+    stroke: var(--color);
+    stroke-miterlimit: 10;
+    animation:
+      ease-in-out 0.4s forwards,
+      scale 0.3s ease-in-out 0.9s both;
+  }
+  .checkmark_circle {
+    stroke-dasharray: 1250;
+    stroke-dashoffset: 1250;
+    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  }
+  .checkmark_check {
+    stroke-dasharray: 270;
+    stroke-dashoffset: 270;
+    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+  }
+  @keyframes stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+  @keyframes scale {
+    0%,
+    100% {
+      transform: none;
+    }
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+</style>