sveltekit-ui 1.1.14 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,19 +19,19 @@
   "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",
     "typescript": "^5.9.3",
-    "vite": "^7.2.6"
+    "vite": "^7.2.7"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

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/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>