sveltekit-ui 1.0.0

package/src/routes/[component]/Showcase/ImageEditor/index.svelte

@@ -0,0 +1,89 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import ImageEditor from "$lib/Components/ImageEditor/index.svelte"
+  import { create_image_editor_manager } from "$lib/Components/ImageEditor/index.svelte.js"
+
+  // async function ai_text_to_image(input) {
+  //   try {
+  //     const response = await fetch("/api/images/generate", {
+  //       method: "POST",
+  //       body: JSON.stringify({ prompt: input }),
+  //     })
+  //     const resbody = await response.json()
+  //     if (!response.ok) {
+  //       return {
+  //         is_success: false,
+  //         error_message: resbody?.message ?? "Error generating image.",
+  //       }
+  //     }
+  //     return {
+  //       is_success: true,
+  //       data: {
+  //         b64_json: resbody?.b64_json,
+  //       },
+  //     }
+  //   } catch (err) {
+  //     return {
+  //       is_success: false,
+  //       error_message: err?.message ?? "Error generating image.",
+  //     }
+  //   }
+  // }
+
+  // async function ai_remove_image_background(input) {
+  //   try {
+  //     let form_data = new FormData()
+  //     let rand_name = Math.random().toString(26).slice(2)
+  //     let res = await fetch(input)
+  //     let blob = await res.blob()
+  //     form_data.append("file", blob, rand_name)
+  //     let response = await fetch("/api/images/remove_background", {
+  //       method: "POST",
+  //       body: form_data,
+  //     })
+  //     let resbody = await response.json()
+  //     if (!response.ok) {
+  //       throw new Error(resbody?.message || "Unknown error")
+  //     }
+  //     console.log("resbody33q", resbody)
+  //     if (!response.ok) {
+  //       return {
+  //         is_success: false,
+  //         error_message: resbody?.message ?? "Error removing image background.",
+  //       }
+  //     }
+  //     return {
+  //       is_success: true,
+  //       data: resbody,
+  //     }
+  //   } catch (err) {
+  //     return {
+  //       is_success: false,
+  //       error_message: err?.message ?? "Error removing image background.",
+  //     }
+  //   }
+  // }
+
+  let image_editor_manager = create_image_editor_manager({
+    // ai_text_to_image: ai_text_to_image,
+    // ai_remove_image_background: ai_remove_image_background,
+    // ai_restore_resolution: ai_restore_resolution,
+    // ai_restore_face: ai_restore_face,
+  })
+
+  let generate_image_button_manager = create_button_manager({
+    type: "outlined",
+    is_compressed: true,
+    text: "Generate Image",
+    popover_target: () => `popover_${image_editor_manager?.popover_manager?.id}`,
+    on_click: () => {
+      image_editor_manager.init_file()
+    },
+  })
+</script>
+
+<div>
+  <Button manager={generate_image_button_manager} />
+  <ImageEditor manager={image_editor_manager} />
+</div>

package/src/routes/[component]/Showcase/ImageSlider/index.svelte

@@ -0,0 +1,26 @@
+<script>
+  import ImageSlider from "$lib/Components/ImageSlider/index.svelte"
+  import { create_image_slider_manager } from "$lib/Components/ImageSlider/index.svelte.js"
+
+  let image_slider_manager = create_image_slider_manager({
+    src1: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/moon.webp",
+    src2: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/moon2.webp",
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div style="max-width: 400px;">
+      <h4>Example</h4>
+      <ImageSlider manager={image_slider_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/[component]/Showcase/InfoBox/index.svelte

@@ -0,0 +1,44 @@
+<script>
+  import InfoBox from "$lib/Components/InfoBox/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+
+  let val = $state(null)
+  let message = $state("You messed up.")
+  let message_long = $state(
+    "You messed up. You messed up. You messed up. You messed up. You messed up. You messed up. You messed up. You messed up. 8888 You messed up."
+  )
+
+  let button_manager = create_button_manager({
+    text: "reset",
+    is_compressed: true,
+    support_icon: "undo_arrow",
+    on_click: () => (message = "I said You messed up."),
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <InfoBox {message} />
+    </div>
+    <div>
+      <h4>Example</h4>
+      <InfoBox {message} link="/" link_name="click me bro" h={6} />
+    </div>
+    <div>
+      <h4>Long Example</h4>
+      <InfoBox message={message_long} link="/" link_name="click me bro" h={15} />
+    </div>
+  </div>
+  <Button manager={button_manager} />
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/Json/index.svelte

@@ -0,0 +1,80 @@
+<script>
+  import Json from "$lib/Components/Json/index.svelte"
+  import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
+
+  let sample_json = {
+    id: 1,
+    name: "test_object",
+    is_active: true,
+    details: {
+      count: 42,
+      description: "a nested object with various types",
+      tags: ["sample", "test", "json"],
+      meta: {
+        created_at: "2024-08-29T12:34:56Z",
+        updated_at: "2024-08-29T15:20:30Z",
+        stats: {
+          views: 1234,
+          likes: 567,
+          shares: 89,
+        },
+      },
+    },
+    items: [
+      {
+        id: 101,
+        type: "fruit",
+        name: "apple",
+        quantity: 10,
+        price: 1.25,
+        in_stock: true,
+      },
+      {
+        id: 102,
+        type: "vegetable",
+        name: "carrot",
+        quantity: 25,
+        price: 0.75,
+        in_stock: false,
+      },
+    ],
+    numbers: [10, 20, 30, 40, 50],
+    test_null: null,
+    config: {
+      max_limit: 100,
+      min_limit: 10,
+      settings: {
+        theme: "dark",
+        notifications: {
+          email: true,
+          sms: false,
+        },
+      },
+    },
+  }
+
+  let json_manager = create_json_manager({
+    is_show_buttons: true,
+    val: sample_json,
+  })
+
+  let json_manager2 = create_json_manager({
+    is_edit_mode: true,
+    val: sample_json,
+  })
+  let json_manager3 = create_json_manager({
+    is_edit_mode: true,
+    is_popover: true,
+    is_show_buttons: true,
+    val: sample_json,
+  })
+</script>
+
+<div>
+  <h4>Example</h4>
+  <Json manager={json_manager} />
+  <h4>Json Edit Mode</h4>
+  <Json manager={json_manager2} />
+  <h4>Json Edit Mode Popover</h4>
+  <Json manager={json_manager3} />
+</div>

package/src/routes/[component]/Showcase/LabeledItem/index.svelte

@@ -0,0 +1,18 @@
+<script>
+  import LabeledItem from "$lib/Components/LabeledItem/index.svelte"
+  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: "Test" })
+  let text_manager2 = create_text_input_manager({ val: "Test more stuff" })
+</script>
+
+<div>
+  <h4>Example</h4>
+  <LabeledItem label="My Label" tooltip="This is a tooltip">
+    <TextInput manager={text_manager} />
+  </LabeledItem>
+  <LabeledItem label="My Required Label">
+    <TextInput manager={text_manager2} />
+  </LabeledItem>
+</div>

package/src/routes/[component]/Showcase/Link/index.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Link from "$lib/Components/Link/index.svelte"
+  import { create_link_manager } from "$lib/Components/Link/index.svelte.js"
+
+  let link_manager = create_link_manager({
+    href: "https://www.sveltekit-ui.com",
+    display_text: "Sveltekit-UI",
+    text_color: null,
+    is_show_preview: null,
+  })
+</script>
+
+<div>
+  <Link manager={link_manager} />
+</div>

package/src/routes/[component]/Showcase/LoadingWheel/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+</script>
+
+<div>
+  <h4>Example</h4>
+  <div style="width: 5rem; height: 5rem;">
+    <LoadingWheel />
+  </div>
+</div>