sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/Alert/index.svelte

@@ -0,0 +1,88 @@
+<script>
+  import SuccessCheck from "../SuccessCheck/index.svelte"
+  import ErrorX from "../ErrorX/index.svelte"
+  import Icon from "../Icon/index.svelte"
+  import Button from "../Button/index.svelte"
+  import { fly } from "svelte/transition"
+
+  let { manager = null, options = null, on_alert_added } = $props()
+</script>
+
+<div class="alerts_container">
+  {#if Array.isArray(manager?.alerts) && manager?.alerts.length > 0}
+    {#each manager?.alerts as alert, i (alert)}
+      <div
+        class="card alert_box"
+        class:alert_container={!manager?.is_small_screen}
+        class:small_alert_container={manager?.is_small_screen}
+        style="--br: {manager?.border_radius}rem;"
+        transition:fly={{ x: 300, duration: 400 }}
+      >
+        <div class="icon">
+          {#if alert.icon === "check"}
+            <SuccessCheck color={manager?.success_icon_color} />
+          {:else if alert.icon === "x"}
+            <ErrorX color={manager?.error_icon_color} />
+          {/if}
+        </div>
+        <div class="text_container">
+          <h3>{alert.header}</h3>
+          <p>{alert.message}</p>
+        </div>
+        <div class="x">
+          <Button manager={alert?.x_button_manager} />
+        </div>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .alerts_container {
+    position: absolute;
+    right: 0;
+    overflow: scroll;
+    max-height: 100vh;
+    z-index: 10;
+  }
+  .alerts_container h3 {
+    font-size: clamp(2.2rem, 4.2vw, 2.4rem);
+    line-height: clamp(2.4rem, 4.5vw, 2.7rem);
+  }
+  .alert_container {
+    position: relative;
+    width: 30rem;
+    height: 7rem;
+    display: flex;
+    align-items: center;
+  }
+  .small_alert_container {
+    position: relative;
+    height: 8rem;
+    display: flex;
+    align-items: center;
+  }
+  .alert_box {
+    border-radius: var(--br);
+    border: 1px solid var(--g15-t);
+    box-shadow: 0 0.2rem 1rem var(--shadow3);
+  }
+  .icon {
+    min-height: 4rem;
+    min-width: 4rem;
+    margin: auto 0.5rem auto 0;
+    flex: 0;
+  }
+  .text_container {
+    flex: 1;
+    text-align: left;
+    max-height: 100%;
+    overflow: scroll;
+  }
+  .x {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.1rem;
+  }
+</style>

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

@@ -0,0 +1,101 @@
+import { create_unique_id } from "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+
+export function create_alert_manager(config) {
+  let alerts = $state([])
+  let is_small_screen = $state(false)
+  let x_color = $state("var(--g7-t)")
+  let border_radius = $state(1)
+  let success_icon_color = $state("var(--success-t)")
+  let error_icon_color = $state("var(--error-t)")
+  let interval = $state(null)
+
+  function run_auto_delete() {
+    if (interval) {
+      clearInterval(interval)
+      interval = null
+    }
+    if (Array.isArray(alerts) && alerts.length > 0) {
+      interval = setInterval(function () {
+        if (Array.isArray(alerts) && alerts.length > 0) {
+          alerts.sort((a, b) => a?.epoch - b?.epoch)
+          const id = alerts[0]?.id
+          if (id) {
+            delete_alert(id)
+          }
+        }
+      }, 3800)
+    }
+  }
+
+  function delete_alert(id) {
+    if (Array.isArray(alerts)) {
+      alerts = alerts.filter((h) => h?.id != id)
+      if (alerts.length < 1 && interval) {
+        clearInterval(interval)
+        interval = null
+      }
+    }
+  }
+
+  function add_alert(header, message, icon) {
+    const id = create_unique_id(null, 20)
+    const alert_to_add = {
+      id: id,
+      header: header,
+      message: message,
+      icon: icon,
+      epoch: Math.floor(Date.now() / 1000),
+      x_button_manager: create_button_manager({
+        type: "soft",
+        support_icon: "x",
+        is_uniform: true,
+        on_click: () => delete_alert(id),
+      }),
+    }
+    alerts.push(alert_to_add)
+    if (!interval) {
+      run_auto_delete()
+    }
+    if (config?.on_alert_added) {
+      config?.on_alert_added(alert_to_add)
+    }
+  }
+
+  function init(config) {
+    alerts = config?.alerts ?? []
+    is_small_screen = config?.is_small_screen ?? false
+    x_color = config?.x_color ?? "var(--g7-t)"
+    border_radius = config?.border_radius ?? 1
+    success_icon_color = config?.success_icon_color ?? "var(--success-t)"
+    error_icon_color = config?.alerts ?? "var(--error-t)"
+    run_auto_delete()
+  }
+  init(config)
+
+  return {
+    get interval() {
+      return interval
+    },
+    get alerts() {
+      return alerts
+    },
+    get is_small_screen() {
+      return is_small_screen
+    },
+    get x_color() {
+      return x_color
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get success_icon_color() {
+      return success_icon_color
+    },
+    get error_icon_color() {
+      return error_icon_color
+    },
+    add_alert,
+    delete_alert,
+  }
+}

package/dist/Components/ArrowToggle/index.svelte

@@ -0,0 +1,62 @@
+<script>
+  let { direction = "up", is_open = false, color_one = "var(--g6-t)" } = $props()
+
+  const map = { left: 270, right: 90, down: 180 }
+  let r_deg = $derived(map?.[direction] ? map?.[direction] : 0)
+</script>
+
+<div class="side_bar_toggle" style="--r_deg: {r_deg}deg; --color_one: {color_one};">
+  <div class="arrow_container">
+    <span class="bar_base" class:left_line={is_open} class:left_line_opp={!is_open}></span>
+    <span class="bar_base right_line" class:right_line={is_open} class:right_line_opp={!is_open}></span>
+  </div>
+</div>
+
+<style>
+  .side_bar_toggle {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    padding: 0;
+    pointer-events: initial;
+    width: 1.2rem;
+    transform: rotate(var(--r_deg));
+  }
+  .arrow_container {
+    position: relative;
+    height: 1rem;
+  }
+  .bar_base {
+    background: linear-gradient(to left, var(--color_one) 50%, var(--g6-t) 50%) right;
+    background-size: 200%;
+    background-position: left;
+    position: absolute;
+    width: 0.8rem;
+    border-radius: 0.1rem;
+    transition: 0.4s ease;
+    height: 0.2rem;
+    transform-origin: center right;
+    transform: rotate(0);
+    left: 0;
+  }
+  .left_line {
+    top: 0;
+    transform-origin: center right;
+    transform: translateX(0.05rem) rotate(-45deg);
+  }
+  .left_line_opp {
+    top: calc(100% - 0.1rem);
+    background-position: right;
+    transform: translateX(0.05rem) rotate(45deg);
+  }
+  .right_line {
+    top: 0;
+    transform: translateX(-0.05rem) rotate(225deg);
+  }
+  .right_line_opp {
+    top: calc(100% - 0.1rem);
+    background-position: right;
+    transform: translateX(-0.05rem) rotate(135deg);
+  }
+</style>

package/dist/Components/Attachment/index.svelte

@@ -0,0 +1,77 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Popover from "../Popover/index.svelte"
+  import Image from "../Image/index.svelte"
+  import Audio from "../Audio/index.svelte"
+  import Json from "../Json/index.svelte"
+  import Icon from "../Icon/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#snippet display_content()}
+  {#if ["image/webp", "image/jpeg", "image/png", "image/gif"].includes(manager?.val_prepped?.content_type)}
+    <Image manager={manager?.val_prepped?.image_manager} />
+  {:else if ["audio/mpeg", "audio/wav", "audio/ogg", "audio/aac"].includes(manager?.val_prepped?.content_type)}
+    <Audio manager={manager?.val_prepped?.audio_manager} />
+  {:else if ["application/json"].includes(manager?.val_prepped?.content_type)}
+    <Json manager={manager?.val_prepped?.json_manager} />
+  {/if}
+{/snippet}
+
+<div class="container">
+  <div style="display: flex; flex: 1; gap: 1rem; justify-content: space-between;">
+    <div style="display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0;">
+      <Icon manager={manager?.val_prepped?.icon_manager} />
+      <div class="text_container">
+        <p class="file_name">{manager?.val_prepped?.name}</p>
+        <p style="margin-top: 0; line-height: 1.4rem; color: var(--g10-t); font-size: 1.2rem;">
+          {manager?.val_prepped?.content_type}
+          <span style="color: var(--g6-t); font-size: 1.2rem; margin-left: 1rem;"
+            >{manager?.val_prepped?.content
+              ? `${Math.round(((manager?.val_prepped?.content.length * 3) / 4) * 0.001)}KB`
+              : ""}</span
+          >
+        </p>
+      </div>
+    </div>
+    <div style="display: flex; gap: .5rem; flex-shrink: 0;">
+      <Button manager={manager?.download_button_manager} />
+      {#if ["image/webp", "image/jpeg", "image/png", "image/gif", "audio/mpeg", "audio/wav", "audio/ogg", "audio/aac", "application/json"].includes(manager?.val_prepped?.content_type)}
+        <Button manager={manager?.show_content_button_manager} />
+      {/if}
+    </div>
+  </div>
+  {#if manager?.is_show_content}
+    {@render display_content()}
+  {/if}
+</div>
+
+<Popover manager={manager?.show_content_popover_manager}>
+  {#snippet content()}
+    {@render display_content()}
+  {/snippet}
+</Popover>
+
+<style>
+  .container {
+    border-radius: 1.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--shadow5-t);
+  }
+  .file_name {
+    margin: 0;
+    line-height: 1.4rem;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+  .text_container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,119 @@
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_image_manager } from "../Image/index.svelte.js"
+import { create_audio_manager } from "../Audio/index.svelte.js"
+import { create_json_manager } from "../Json/index.svelte.js"
+import { create_icon_manager } from "../Icon/index.svelte.js"
+import { set_closurable } from "../../client/index.js"
+
+export function create_attachment_manager(config) {
+  let val_prepped = $state(null)
+  let show_content_popover_manager = $state(null)
+  let show_content_button_manager = $state(null)
+  let download_button_manager = $state(null)
+  let is_show_content = $derived(set_closurable(config?.is_show_content, false))
+
+  function set_val_prepped(input) {
+    if (!input || typeof input != "object" || Array.isArray(input)) {
+      val_prepped = null
+      return
+    }
+    let val_prepped_loc = {
+      ...input,
+    }
+    if (["image/webp", "image/jpeg", "image/png", "image/gif"].includes(input?.content_type)) {
+      val_prepped_loc.image_manager = create_image_manager({
+        src: `data:${input.content_type};base64,${input.content}`,
+        mime_type: input?.content_type,
+        display_max_height: 280,
+        display_max_width: 380,
+        bg_img_blur: 20,
+        bg_img_opacity: 0.01,
+      })
+      val_prepped_loc.icon_manager = create_icon_manager({
+        icon_id: "photo",
+        sw: 30,
+      })
+    } else if (["audio/mpeg", "audio/wav", "audio/ogg", "audio/aac"].includes(input?.content_type)) {
+      val_prepped_loc.audio_manager = create_audio_manager({
+        // ui_type: "short",
+        src: `data:${input.content_type};base64,${input.content}`,
+        type: input?.content_type,
+      })
+      val_prepped_loc.icon_manager = create_icon_manager({
+        icon_id: "file", // tbd
+        sw: 30,
+      })
+    } else if (["application/json"].includes(input?.content_type)) {
+      const decoded_content = atob(input.content)
+      const extracted_json = JSON.parse(decoded_content)
+      val_prepped_loc.json_manager = create_json_manager({
+        is_edit_mode: false,
+        is_popover: false,
+        is_show_buttons: true,
+        val: extracted_json,
+      })
+      val_prepped_loc.icon_manager = create_icon_manager({
+        icon_id: "file", // tbd
+        sw: 30,
+      })
+    } else {
+      val_prepped_loc.icon_manager = create_icon_manager({
+        icon_id: "file",
+        sw: 30,
+      })
+    }
+    val_prepped = val_prepped_loc
+  }
+
+  function download_attachment(input) {
+    const data_url = `data:${input.content_type};base64,${input.content}`
+    const link = document.createElement("a")
+    link.href = data_url
+    link.download = input.name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+
+  function init(config) {
+    set_val_prepped(config?.attachment)
+    show_content_popover_manager = create_popover_manager({
+      header: "Attachment",
+      target_width: 400,
+      target_height: 340,
+    })
+    download_button_manager = create_button_manager({
+      type: "outlined",
+      is_uniform: true,
+      support_icon: "download",
+      on_click: () => download_attachment(config?.attachment),
+    })
+    show_content_button_manager = create_button_manager({
+      type: "outlined",
+      text: "View",
+      is_compressed: true,
+      popover_target: () => `popover_${show_content_popover_manager?.id}`,
+    })
+  }
+
+  init(config)
+
+  return {
+    get val_prepped() {
+      return val_prepped
+    },
+    get show_content_popover_manager() {
+      return show_content_popover_manager
+    },
+    get show_content_button_manager() {
+      return show_content_button_manager
+    },
+    get download_button_manager() {
+      return download_button_manager
+    },
+    get is_show_content() {
+      return is_show_content
+    },
+  }
+}

package/dist/Components/Audio/index.svelte

@@ -0,0 +1,193 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Popover from "../Popover/index.svelte"
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import Slider from "../Slider/index.svelte"
+  import { onMount } from "svelte"
+
+  let { manager } = $props()
+
+  onMount(() => {
+    if(typeof manager?.handle_mount == "function"){
+      manager?.handle_mount()
+    }
+  })
+
+
+</script>
+
+{#snippet settings()}
+  <Button manager={manager?.settings_button_manager} />
+  <Popover manager={manager?.settings_popover_manager}>
+    {#snippet content()}
+      <div>
+        <Slider manager={manager?.volume_slider_manager} />
+        <Slider manager={manager?.rate_slider_manager} />
+      </div>
+    {/snippet}
+  </Popover>
+{/snippet}
+
+<!-- onloadstart={() => console.log('Load start')}
+onwaiting={() => console.log('Waiting')}
+onstalled={() => console.log('Stalled')}
+onseeked={() => console.log('seeked')}
+onseeking={() => console.log('seeking')}
+ondurationchange={(e) => console.log('durationchange',e)}
+onloadeddata={(e) => console.log('onloadeddata',e)}
+oncanplaythrough={() => console.log('can_play_through')}
+onerror={(e) => console.log('error',e)}
+onabort={(e) => console.log('abort',e)} -->
+<div class="container">
+  <audio
+    id={`audio_${manager?.id}`}
+    onplaying={() => manager?.play_audio()}
+    onended={() => manager?.pause_audio()}
+    ontimeupdate={() => manager?.handle_time_update()}
+    oncanplay={() => manager?.handle_can_play()}
+    onloadedmetadata={(e) => manager?.handle_loaded_metadata(e)}
+    onprogress={() => manager?.handle_progress()}
+    preload="metadata"
+    style="display: none;"
+    controls
+    src={manager?.src}
+    type={manager?.type}
+  ></audio>
+  {#if manager?.ui_type == 'square'}
+    <div
+      class="container_square"
+      style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
+    >
+      {#if manager?.image_src && !manager?.is_hide_image}
+        <img
+          src={manager?.image_src}
+          type={manager?.image_type}
+          alt={manager?.title || "Audio"}
+          height="auto"
+          width="100%"
+          style="margin-right: 1rem;"
+        />
+      {/if}
+      {#if !manager?.src}
+        <p style="display: flex; flex: 1;">Missing Audio Source</p>
+      {:else if manager?.is_loading && !manager?.time_slider_manager?.max}
+        <div style="display: flex; flex: 1; gap: 1rem; margin: 2.5rem 0;">
+          <LoadingWheel size={2} />
+          <p>Loading...</p>
+        </div>
+      {:else}
+        <div style="width: 100%; margin: .5rem 0;">
+          <Slider manager={manager?.time_slider_manager} />
+        </div>
+        <div style="display: flex;">
+          <Button manager={manager?.play_pause_button_manager} />
+          <div class="slider_box" class:is_short={manager?.ui_type == 'short'} >
+            <span>{manager?.formatted_current_time}{manager?.time_slider_manager?.max && manager?.time_slider_manager?.max != Infinity ? ` / ${manager?.formatted_duration}` : ""}</span>
+          </div>
+          {@render settings()}
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div
+      class="container_line"
+      class:is_short={manager?.ui_type == 'short'}
+      style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
+    >
+      {#if manager?.image_src && !manager?.is_hide_image}
+        <img
+          src={manager?.image_src}
+          type={manager?.image_type}
+          alt={manager?.title || "Audio"}
+          height="40"
+          width="auto"
+          style="margin-right: 1rem;"
+        />
+      {/if}
+      {#if !manager?.src}
+        <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == 'short'}>Missing Audio Source</p>
+      {:else if manager?.is_loading && !manager?.time_slider_manager?.max}
+        <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>
+          <LoadingWheel size={2} />
+          {#if manager?.ui_type != 'standard'}
+            <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>Loading...</p>
+          {/if}
+        </div>
+      {:else}
+        <Button manager={manager?.play_pause_button_manager} />
+        <div class="slider_box" class:is_short={manager?.ui_type == 'short'}>
+          <span>{manager?.formatted_current_time}</span>
+          {#if manager?.ui_type == 'standard'}
+            <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == 'short'}>
+              <Slider manager={manager?.time_slider_manager} />
+            </div>
+          {:else}
+            <span>/</span>
+          {/if}
+          {#if manager?.time_slider_manager?.max && manager?.time_slider_manager?.max != Infinity}
+            <span>{manager?.formatted_duration}</span>
+          {/if}
+        </div>
+        {#if manager?.ui_type == 'standard'}
+          {@render settings()}
+        {/if}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex: 0;
+  }
+  .container_line {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 50rem;
+    margin: 0;
+    border-radius: 2rem;
+    padding: 1rem;
+    box-shadow:
+      0 0.2rem 1rem var(--shadow2),
+      inset 0 0 0 1px var(--shadow7-t);
+    -webkit-box-shadow:
+      0 0.2rem 1rem var(--shadow2),
+      inset 0 0 0 1px var(--shadow7-t);
+  }
+  .container_square{
+    display: flex;
+    flex-direction: column;
+    flex: 0;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 20rem;
+    width: 100%;
+    max-width: 50rem;
+    margin: 0;
+    border-radius: 2rem;
+    padding: 1rem;
+    box-shadow:
+      0 0.2rem 1rem var(--shadow2),
+      inset 0 0 0 1px var(--shadow7-t);
+    -webkit-box-shadow:
+      0 0.2rem 1rem var(--shadow2),
+      inset 0 0 0 1px var(--shadow7-t);
+  }
+  .slider_box {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  .slider_box span {
+    margin: 0;
+    line-height: 1;
+    font-size: 1.6rem;
+    margin: 0 0.5rem;
+  }
+  .is_short {
+    flex: 0;
+  }
+</style>