sveltekit-ui 1.1.16 → 1.1.18

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

@@ -0,0 +1,38 @@
+import { get_time_object_from_val } from "../TimeInput/index.js"
+import { set_closurable_color, set_closurable } from "../../client/index.js"
+
+export function create_time_manager(config) {
+  let datetime = $state(null)
+  let content = $state(null)
+  let text_color = $derived(set_closurable_color(config?.text_color, null))
+
+  function init(config) {
+    const time_full = get_time_object_from_val(
+      set_closurable(config?.val),
+      set_closurable(config?.format),
+      set_closurable(config?.granularity),
+      set_closurable(config?.timezone)
+    )
+    datetime = time_full?.datetime ?? time_full?.iso_8601 ?? null
+    content = time_full?.content ?? set_closurable(config?.val)
+    if (config?.display_format == "calendar_date" && time_full?.year) {
+      content = `${time_full?.year}-${String(time_full?.month).padStart(2, "0")}-${String(
+        time_full?.day_of_month
+      ).padStart(2, "0")}`
+    }
+  }
+
+  init(config)
+
+  return {
+    get text_color() {
+      return text_color
+    },
+    get datetime() {
+      return datetime
+    },
+    get content() {
+      return content
+    },
+  }
+}

package/dist/Components/VideoTBD/index.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { create_unique_id } from "../../client/index.js"
+  import { onMount } from "svelte"
+
+  function create_video_manager(config) {
+    const id = create_unique_id(null, 20)
+    let step = $state(null)
+
+    function draw() {
+      let video_el = document?.querySelector(`#video_${id}`)
+      let canvas_el = document?.querySelector(`#canvas_${id}`)
+      if (video_el && canvas_el) {
+        let ctx = canvas_el.getContext("2d")
+        ctx.filter = "blur(1px)"
+        ctx.drawImage(video_el, 0, 0, canvas_el.width, canvas_el.height)
+      }
+    }
+
+    function draw_loop() {
+      draw()
+      step = window.requestAnimationFrame(draw_loop)
+    }
+
+    function draw_pause() {
+      window.cancelAnimationFrame(step)
+      step = undefined
+    }
+
+    return {
+      id,
+      draw,
+      draw_loop,
+      draw_pause,
+    }
+  }
+
+  let manager = $state(null)
+  onMount(() => {
+    manager = create_video_manager()
+  })
+</script>
+
+<section class="wrapper">
+  <video
+    id={`video_${manager?.id}`}
+    controls
+    muted
+    class="video"
+    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+    onpause={(e) => manager?.draw_pause(e)}
+    onended={(e) => manager?.draw_pause(e)}
+    onplay={(e) => manager?.draw_loop(e)}
+    onseeked={(e) => manager?.draw(e)}
+    onloadeddata={(e) => manager?.draw(e)}
+  ></video>
+  <canvas width="10" height="6" aria-hidden="true" class="canvas" id={`canvas_${manager?.id}`}></canvas>
+</section>
+
+<style>
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .video,
+  .canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin: 0;
+  }
+
+  .wrapper {
+    position: relative;
+    box-shadow: inset 0 0 4rem 4.5rem var(--color-background);
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+
+  .canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+  }
+
+  .video {
+    padding: 7rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .canvas {
+      display: none !important;
+    }
+  }
+</style>

package/dist/Components/XPost/index.svelte

@@ -0,0 +1,52 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+
+  let { manager } = $props()
+
+  $effect(() => {
+    if (typeof manager?.load_script == "function") {
+      manager?.load_script()
+    }
+  })
+</script>
+
+<div id={manager?.selector_id}>
+  {#if manager?.is_loading}
+    <div
+      style="width: 100%; height: 30rem; display: grid; place-items: center; background-color: var(--shadow2-t);  border-radius: 1rem;"
+    >
+      <LoadingWheel size={8} />
+      <p>Loading post</p>
+    </div>
+  {/if}
+  {#if manager?.error_message}
+    <div class="failed_to_load_box">
+      <p>{manager?.error_message}</p>
+      <a href="https://x.com/status/{manager?.post_id}">https://x.com/status/{manager?.post_id}</a>
+    </div>
+  {/if}
+  <div class="x_post_container">
+    <div id={`x_post_${manager?.id}`} class:is_hidden={!!manager?.error_message}></div>
+  </div>
+</div>
+
+<style>
+  .failed_to_load_box {
+    margin: 1rem 0;
+    background-color: oklch(var(--l8-t) var(--c16) var(--h3) / var(--o3));
+    border-radius: 1rem;
+    padding: 1rem;
+  }
+  .failed_to_load_box p {
+    color: oklch(var(--l3-t) var(--c16) var(--h3));
+  }
+  .is_hidden {
+    max-width: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+  .x_post_container {
+    max-width: 100% !important;
+    overflow-x: scroll;
+  }
+</style>

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

@@ -0,0 +1,64 @@
+import { create_unique_id } from "../../client/index.js"
+
+export function create_x_post_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let is_loading = $state(false)
+  let is_script_loaded = $state(false)
+  let error_message = $state("")
+
+  let is_dark_theme = $derived(config?.is_dark_theme)
+  let theme = $derived(config?.is_dark_theme ? "dark" : "light")
+
+  function load_script() {
+    error_message = null
+    if (!is_script_loaded) {
+      const script = document.createElement("script")
+      script.src = "https://platform.twitter.com/widgets.js"
+      script.charset = "utf-8"
+      script.async = true
+      script.onload = () => {
+        is_script_loaded = true
+        render_x_post()
+      }
+      document.head.appendChild(script)
+    }
+  }
+
+  async function render_x_post() {
+    try {
+      error_message = ""
+      is_loading = true
+      let container_el = document?.querySelector(`#x_post_${id}`)
+      if (config?.post_id && is_script_loaded && window.twttr && container_el) {
+        const create_embed_res = await twttr.widgets.createTweet(config?.post_id, container_el, {
+          theme: theme,
+          dnt: true,
+        })
+        if (create_embed_res) {
+          error_message = ""
+        } else {
+          error_message = "Post not found or failed to load."
+        }
+      }
+    } catch {
+      error_message = "Post not found or failed to load."
+    } finally {
+      is_loading = false
+    }
+  }
+
+  return {
+    id,
+    get post_id() {
+      return config?.post_id
+    },
+    get is_dark_theme() {
+      return is_dark_theme
+    },
+    get theme() {
+      return theme
+    },
+    load_script,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",