sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,592 +0,0 @@
-import {
-  set_closurable,
-  create_unique_id,
-  deep_copy,
-  clean_custom_identifier,
-  mime_type_extensions,
-} from "$lib/client/index.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_audio_manager } from "$lib/Components/Audio/index.svelte.js"
-import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
-import { create_breadcrumbs_manager } from "$lib/Components/Breadcrumbs/index.svelte.js"
-import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
-import { create_icon_manager } from "$lib/Components/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,
-            }
-            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/src/lib/Components/SuccessCheck/index.svelte

@@ -1,56 +0,0 @@
-<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>