sveltekit-ui 1.1.15 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,14 +19,14 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.45.6"
+    "svelte": "^5.45.8"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^6.2.0",
-    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@vercel/analytics": "^1.6.1",

package/src/routes/+page.svelte

@@ -132,6 +132,30 @@
               attributes: { content: "For easier building, check out the ", text_color: null },
               selector_id: "upxajwlo",
             },
+            {
+              type_id: "link",
+              children: [
+                {
+                  type_id: "base_text",
+                  children: [],
+                  attributes: { content: "contibase quick-start guide", text_color: null },
+                  selector_id: "dwwoaka",
+                },
+              ],
+              attributes: {
+                href: "https://www.contibase.com/blog/quick-start-guide",
+                display_text: "contibase quick-start guide",
+                text_color: null,
+                is_show_preview: null,
+              },
+              selector_id: "cbmddeuw",
+            },
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: { content: "or the ", text_color: null },
+              selector_id: "upxaddo",
+            },
             {
               type_id: "link",
               children: [

package/dist/Components/Alert/index.svelte

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

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

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

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

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

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