npm - sveltekit-ui - Versions diffs - 1.0.0 - Mend

sveltekit-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (487) hide show

package/src/app.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="">
+  <head>
+    <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" sizes="any" />
+    <link rel="icon" type="image/png" href="%sveltekit.assets%/favicon-96x96.png" sizes="96x96" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Sveltekit-UI" />
+    <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="oklch(97% 0.01 203)" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="oklch(3% 0.01 203)" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/src/hooks.server.js ADDED Viewed

@@ -0,0 +1,7 @@
+export const handle = async ({ event, resolve }) => {
+  const theme = event.cookies.get("theme") ?? "dark"
+  const response = await resolve(event, {
+    transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`),
+  })
+  return response
+}

package/src/lib/Components/Alert/index.svelte ADDED Viewed

@@ -0,0 +1,88 @@
+<script>
+  import SuccessCheck from "$lib/Components/SuccessCheck/index.svelte"
+  import ErrorX from "$lib/Components/ErrorX/index.svelte"
+  import Icon from "$lib/Components/Icon/index.svelte"
+  import Button from "$lib/Components/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/src/lib/Components/Alert/index.svelte.js ADDED Viewed

@@ -0,0 +1,101 @@
+import { create_unique_id } from "$lib/client/index.js"
+import { create_button_manager } from "$lib/Components/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/src/lib/Components/ArrowToggle/index.svelte ADDED Viewed

@@ -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/src/lib/Components/Attachment/index.svelte ADDED Viewed

@@ -0,0 +1,69 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Image from "$lib/Components/Image/index.svelte"
+  import Audio from "$lib/Components/Audio/index.svelte"
+  import Json from "$lib/Components/Json/index.svelte"
+  import Icon from "$lib/Components/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;">
+      <Icon manager={manager?.val_prepped?.icon_manager} />
+      <div class="text_container" >
+        <p class="file_name">{manager?.val_prepped?.name}</p> sometimes this name is too long and that download button gets pushed outside div but we need max width reached to hold that download on right and this text gets the ellipsees or something
+        <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: .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;
+  }
+</style>

package/src/lib/Components/Attachment/index.svelte.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
+import { create_audio_manager } from "$lib/Components/Audio/index.svelte.js"
+import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+import { set_closurable } from "$lib/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/src/lib/Components/Audio/index.svelte ADDED Viewed

@@ -0,0 +1,193 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+  import Slider from "$lib/Components/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>