sveltekit-ui 1.1.74 → 1.1.76

package/src/routes/components/[component]/Showcase/Tag/index.svelte

@@ -1,27 +0,0 @@
-<script>
-  // import Tag from "$lib/Components/Tag/index.svelte"
-  // import { create_tag_manager } from "$lib/Components/Tag/index.svelte.js"
-
-  // let tag_manager = create_tag_manager({ data_type: "text_literal", val: "test" })
-</script>
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>revisit in future</h4>
-      <!-- <Tag manager={tag_manager} /> -->
-    </div>
-  </div>
-</div>
-
-<!-- <Tag val={{ color: { h: 6 }, display_text: "Test", icon: "send" }} /> -->
-<!-- <Tag val={{ color: { h: 6 }, display_text: "Test", icon: "send" }} /> -->
-<!-- <Tag val={{ color: { h: 6, c: 12 }, display_text: "Test", icon: "send" }} /> -->
-
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
-    margin: 0.5rem;
-  }
-</style>

package/src/routes/components/[component]/Showcase/TextArrayInput/index.svelte

@@ -1,23 +0,0 @@
-<script>
-  import TextArrayInput from "$lib/Components/TextArrayInput/index.svelte"
-  import { create_text_array_input_manager } from "$lib/Components/TextArrayInput/index.svelte.js"
-
-  let text_array_manager = create_text_array_input_manager()
-</script>
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>Example</h4>
-      <TextArrayInput manager={text_array_manager} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
-    margin: 0.5rem;
-  }
-</style>

package/src/routes/components/[component]/Showcase/TextInput/index.svelte

@@ -1,95 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-
-  let text_manager = create_text_input_manager({ val: "some val" })
-  let text_clear_button_manager = create_button_manager({
-    text: "clear",
-    support_icon: "x",
-    is_compressed: true,
-    on_click: () => text_manager.set_val(null),
-  })
-  let text_manager2 = create_text_input_manager({
-    val: "some hidable val",
-    is_text_hidable: true,
-    is_text_hidden: true,
-  })
-  let text_manager3 = create_text_input_manager({ type: "email" })
-  let text_manager4 = create_text_input_manager({ type: "tel" })
-  let text_manager5 = create_text_input_manager({ type: "password", is_password_tooltip_used: true })
-  let text_manager6 = create_text_input_manager({ type: "text_area", val: "some longer val meant for a text area" })
-  let text_manager7 = create_text_input_manager({
-    val: null,
-    type: "number",
-    max: 2100,
-    placeholder: "some num",
-    is_disabled: () => false,
-  })
-  let text_manager8 = create_text_input_manager({
-    val: null,
-    type: "number",
-    max: 2100,
-    placeholder: "some num",
-    is_popover: true,
-    on_finish: (input) => console.log("finish_text_edit", input),
-  })
-  let text_manager8_button_manager = create_button_manager({
-    text: "test_edit",
-    support_icon: "edit",
-    is_compressed: true,
-    popover_target: `popover_${text_manager8?.popover_manager?.id}`,
-  })
-</script>
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>Example</h4>
-      <div style="display: flex;">
-        <TextInput manager={text_manager} />
-        <Button manager={text_clear_button_manager} />
-      </div>
-    </div>
-    <div>
-      <h4>Hidable Example</h4>
-      <TextInput manager={text_manager2} />
-    </div>
-    <div>
-      <h4>Limit Width Email</h4>
-      <div style="max-width: 8rem">
-        <TextInput manager={text_manager3} />
-      </div>
-    </div>
-    <div>
-      <h4>Phone Example</h4>
-      <TextInput manager={text_manager4} />
-    </div>
-    <div>
-      <h4>Password Hidden</h4>
-      <TextInput manager={text_manager5} />
-    </div>
-    <div>
-      <h4>Number</h4>
-      <TextInput manager={text_manager7} />
-    </div>
-    <div>
-      <h4>Text Area</h4>
-      <TextInput manager={text_manager6} />
-    </div>
-    <div>
-      <h4>Popover Edit</h4>
-      <Button manager={text_manager8_button_manager} />
-      <TextInput manager={text_manager8} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
-    margin: 0.5rem;
-  }
-</style>

package/src/routes/components/[component]/Showcase/Time/index.svelte

@@ -1,43 +0,0 @@
-<script>
-  import Time from "$lib/Components/Time/index.svelte"
-  import { create_time_manager } from "$lib/Components/Time/index.svelte.js"
-
-  let time_manager1 = create_time_manager({
-    val: {
-      hour: null,
-      year: 1996,
-      epoch: 842720061,
-      month: 9,
-      minute: null,
-      second: null,
-      content: "Saturday, September 14, 1996",
-      datetime: "1996-09-14",
-      timezone: "America/New_York",
-      day_of_week: 6,
-      day_of_year: 258,
-      granularity: "day",
-      day_of_month: 14,
-      week_of_year: 38,
-    },
-    format: "time_full",
-  })
-
-  let time_manager2 = create_time_manager({
-    val: null,
-    format: "epoch",
-  })
-  let time_manager3 = create_time_manager({
-    val: 842720061,
-    // granularity: "day",
-    format: "epoch",
-  })
-</script>
-
-<div>
-  <h4 class="label">time_full</h4>
-  <Time manager={time_manager1} /><br />
-  <h4 class="label">epoch null</h4>
-  <Time manager={time_manager2} /> <br />
-  <h4 class="label">epoch</h4>
-  <Time manager={time_manager3} />
-</div>

package/src/routes/components/[component]/Showcase/TimeInput/index.svelte

@@ -1,100 +0,0 @@
-<script>
-  import TimeInput from "$lib/Components/TimeInput/index.svelte"
-  import { create_time_input_manager } from "$lib/Components/TimeInput/index.svelte.js"
-
-  let time_manager1 = create_time_input_manager({
-    is_popover: true,
-    format: "time_full",
-    granularity: "second",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager2 = create_time_input_manager({
-    is_popover: true,
-    format: "epoch",
-    val: 1723158000,
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager3 = create_time_input_manager({
-    is_popover: true,
-    format: "calendar_date",
-    val: "2024-08-07",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager4 = create_time_input_manager({
-    is_popover: true,
-    format: "datetime",
-    granularity: "minute",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager5 = create_time_input_manager({
-    is_popover: true,
-    format: "datetime_utc",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager6 = create_time_input_manager({
-    is_popover: true,
-    format: "datetime_zoned",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager7 = create_time_input_manager({
-    is_popover: true,
-    format: "year",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager8 = create_time_input_manager({
-    is_popover: true,
-    format: "year_month",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager9 = create_time_input_manager({
-    is_popover: true,
-    format: "hour_minute",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager10 = create_time_input_manager({
-    is_popover: true,
-    format: "hour_minute_second",
-    on_finish: (input) => console.log("finish", input),
-  })
-  let time_manager11 = create_time_input_manager({
-    is_popover: true,
-    format: "year_week",
-    on_finish: (input) => console.log("finish", input),
-  })
-</script>
-
-<div>
-  <h4>time_full</h4>
-  <TimeInput manager={time_manager1} />
-  <pre>{JSON.stringify(time_manager1?.val, null, 2)}</pre>
-  <h4>epoch</h4>
-  <TimeInput manager={time_manager2} />
-  <pre>{JSON.stringify(time_manager2?.val, null, 2)}</pre>
-  <h4>calendar_date</h4>
-  <TimeInput manager={time_manager3} />
-  <pre>{JSON.stringify(time_manager3?.val, null, 2)}</pre>
-  <h4>datetime</h4>
-  <TimeInput manager={time_manager4} />
-  <pre>{JSON.stringify(time_manager4?.val, null, 2)}</pre>
-  <h4>datetime_utc</h4>
-  <TimeInput manager={time_manager5} />
-  <pre>{JSON.stringify(time_manager5?.val, null, 2)}</pre>
-  <h4>datetime_zoned</h4>
-  <TimeInput manager={time_manager6} />
-  <pre>{JSON.stringify(time_manager6?.val, null, 2)}</pre>
-  <h4>year</h4>
-  <TimeInput manager={time_manager7} />
-  <pre>{JSON.stringify(time_manager7?.val, null, 2)}</pre>
-  <h4>year_month</h4>
-  <TimeInput manager={time_manager8} />
-  <pre>{JSON.stringify(time_manager8?.val, null, 2)}</pre>
-  <h4>hour_minute</h4>
-  <TimeInput manager={time_manager9} />
-  <pre>{JSON.stringify(time_manager9?.val, null, 2)}</pre>
-  <h4>hour_minute_second</h4>
-  <TimeInput manager={time_manager10} />
-  <pre>{JSON.stringify(time_manager10?.val, null, 2)}</pre>
-  <h4>year_week</h4>
-  <TimeInput manager={time_manager11} />
-  <pre>{JSON.stringify(time_manager11?.val, null, 2)}</pre>
-</div>

package/src/routes/components/[component]/Showcase/Tooltip/index.svelte

@@ -1,37 +0,0 @@
-<script>
-  import Tooltip from "$lib/Components/Tooltip/index.svelte"
-
-  let val = "This is a test. Stay Gold, Ponyboy"
-</script>
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>Example</h4>
-      <div>
-        <Tooltip>
-          {#snippet tooltip_content()}
-            <p>{val}</p>
-          {/snippet}
-          {#snippet target_content()}
-            <p>Test Hover Me</p>
-          {/snippet}
-        </Tooltip>
-      </div>
-    </div>
-  </div>
-  <div class="grid">
-    <div>
-      <h3>tag</h3>
-      <p>Tooltip</p>
-    </div>
-  </div>
-</div>
-
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
-    margin: 0.5rem;
-  }
-</style>

package/src/routes/components/[component]/Showcase/TransparentBackground/index.svelte

@@ -1,26 +0,0 @@
-<script>
-  import TransparentBackground from "$lib/Components/TransparentBackground/index.svelte"
-</script>
-
-<div>
-  <div>
-    <h4>Example</h4>
-    <TransparentBackground>
-      {#snippet content()}
-        <p style="color: navy; font-weight: 800;">Hello World</p>
-      {/snippet}
-    </TransparentBackground>
-    <h4>Example2</h4>
-    <TransparentBackground>
-      {#snippet content()}
-        <div style="min-width: 20rem; max-width: 20rem; min-height: 20rem; border: 2px solid red;"></div>
-      {/snippet}
-    </TransparentBackground>
-    <h4>Example 3 odd size</h4>
-    <TransparentBackground>
-      {#snippet content()}
-        <div style="min-width: 20.6rem; max-width: 24.2rem; min-height: 20rem; border: 2px solid green;"></div>
-      {/snippet}
-    </TransparentBackground>
-  </div>
-</div>

package/src/routes/components/[component]/Showcase/XFollow/index.svelte

@@ -1,7 +0,0 @@
-<script>
-  import XFollow from "$lib/Components/XFollow/index.svelte"
-</script>
-
-<div>
-  <XFollow x_handle={"contibase"} />
-</div>

package/src/routes/components/[component]/Showcase/XPost/index.svelte

@@ -1,24 +0,0 @@
-<script>
-  import XPost from "$lib/Components/XPost/index.svelte"
-  import { create_x_post_manager } from "$lib/Components/XPost/index.svelte.js"
-
-  let x_post_manager = create_x_post_manager({
-    post_id: "1751623669518930420",
-    is_dark_theme: false,
-  })
-  let x_post_manager2 = create_x_post_manager({
-    post_id: "1751623669518930420",
-    is_dark_theme: true,
-  })
-</script>
-
-<div>
-  <div>
-    <h4>Example</h4>
-    <XPost manager={x_post_manager} />
-  </div>
-  <div>
-    <h4>Dark Mode</h4>
-    <XPost manager={x_post_manager2} />
-  </div>
-</div>

package/src/routes/components/[component]/Showcase/YoutubeChannelButton/index.svelte

@@ -1,7 +0,0 @@
-<script>
-  import YoutubeChannelButton from "$lib/Components/YoutubeChannelButton/index.svelte"
-</script>
-
-<div>
-  <YoutubeChannelButton url="https://www.youtube.com/@contibase" />
-</div>

package/src/routes/components/[component]/Showcase/YoutubeVideo/index.svelte

@@ -1,15 +0,0 @@
-<script>
-  import YoutubeVideo from "$lib/Components/YoutubeVideo/index.svelte"
-  import { create_youtube_video_manager } from "$lib/Components/YoutubeVideo/index.svelte.js"
-
-  let youtube_video_manager = create_youtube_video_manager({
-    video_id: "L8YefjVWWTo",
-  })
-</script>
-
-<div>
-  <div style="max-width: 400px;">
-    <h4>Example</h4>
-    <YoutubeVideo manager={youtube_video_manager} />
-  </div>
-</div>

package/src/routes/sitemap.xml/+server.js

@@ -1,80 +0,0 @@
-const site = "https://www.sveltekit-ui.com"
-
-const components = [
-  { name: "Alert", key: "alert" },
-  { name: "Audio", key: "audio" },
-  { name: "Audio Editor", key: "audio_editor" },
-  { name: "Auth Code Input", key: "auth_code_input" },
-  { name: "Breadcrumbs", key: "breadcrumbs" },
-  { name: "Button", key: "button" },
-  { name: "Chart", key: "chart" },
-  { name: "Checkbox", key: "checkbox" },
-  { name: "Code", key: "code" },
-  { name: "Color", key: "color" },
-  { name: "Color Input", key: "color_input" },
-  { name: "Confetti", key: "confetti" },
-  { name: "Content", key: "content" },
-  { name: "Content Input", key: "content_input" },
-  { name: "Cron Input", key: "cron_input" },
-  { name: "Dropdown", key: "dropdown" },
-  { name: "File Input", key: "file_input" },
-  { name: "Icon", key: "icon" },
-  { name: "Icon Input", key: "icon_input" },
-  { name: "Image", key: "image" },
-  { name: "Image Editor", key: "image_editor" },
-  { name: "ImageSlider", key: "image_slider" },
-  { name: "InfoBox", key: "info_box" },
-  { name: "Json", key: "json" },
-  { name: "LabeledItem", key: "labeled_item" },
-  { name: "Layout", key: "layout" },
-  { name: "Link", key: "link" },
-  { name: "LoadingWheel", key: "loading_wheel" },
-  { name: "Location", key: "location" },
-  { name: "Location Input", key: "location_input" },
-  { name: "Number", key: "number" },
-  { name: "Popover", key: "popover" },
-  { name: "Qr", key: "qr" },
-  { name: "QrInput", key: "qr_input" },
-  { name: "Slider", key: "slider" },
-  { name: "Spacer", key: "spacer" },
-  { name: "StoragePicker", key: "storage_picker" },
-  { name: "Table Advanced", key: "table_advanced" },
-  { name: "Tag", key: "tag" },
-  { name: "Text Array Input", key: "text_array_input" },
-  { name: "Text Input", key: "text_input" },
-  { name: "Time", key: "time" },
-  { name: "Time Input", key: "time_input" },
-  { name: "Tooltip", key: "tooltip" },
-  { name: "TransparentBackground", key: "transparent_background" },
-  { name: "XPost", key: "x_post" },
-  { name: "XFollow", key: "x_follow" },
-  { name: "Youtube Follow Button", key: "youtube_channel_button" },
-  { name: "Youtube Video", key: "youtube_video" },
-]
-
-export async function GET() {
-  const components_urls = components
-    .map(
-      ({ key }) => `
-  <url>
-    <loc>${site}/components/${key}</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>`
-    )
-    .join("")
-  const xml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url>
-    <loc>${site}</loc>
-    <changefreq>daily</changefreq>
-    <priority>1.0</priority>
-  </url>
-  <url>
-    <loc>${site}/components</loc>
-    <changefreq>daily</changefreq>
-    <priority>0.9</priority>
-  </url>${components_urls}
-</urlset>`.trim()
-  return new Response(xml, { headers: { "content-type": "application/xml" } })
-}

package/src/routes/test/+page.svelte

@@ -1,53 +0,0 @@
-<script>
-  import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-
-  function v(config) {
-    let val = $state(null)
-
-    function on_change(from_id = null) {
-      if (typeof config?.on_change == "function") {
-        config?.on_change({ val, from_id: from_id })
-      }
-    }
-
-    function init(config) {
-      val = config?.val
-    }
-
-    init(config)
-
-    return {
-      get val() {
-        return val
-      },
-      set_val(input) {
-        if (typeof input == "object" && input?.from_id) {
-          val = input?.val
-          on_change(input?.from_id)
-        } else {
-          val = input
-          on_change()
-        }
-      },
-    }
-  }
-
-  let test = v({ val: 5, on_change: (input) => console.log("on_ch", input) })
-
-  let number_text_input_manager = create_text_input_manager({
-    type: "number",
-    val: 5,
-    on_change: (input) => {
-      console.log("search_table", input)
-      // test.val = input
-      test.set_val(input)
-    },
-  })
-</script>
-
-<TextInput manager={number_text_input_manager} />
-
-<p>test?.val</p>
-{test?.val}