sveltekit-ui 1.0.0

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

@@ -0,0 +1,225 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import Image from "$lib/Components/Image/index.svelte"
+  import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
+
+  let image_manager1 = create_image_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/godzilla-released.png",
+    src_quick: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/godzilla-released.webp",
+    alt: "Hello World",
+    image_width: 1344,
+    image_height: 896,
+    display_max_height: 800,
+    display_max_width: 400,
+    bg_img_blur: 20,
+    bg_img_opacity: 0.5,
+  })
+
+  let button_manager1 = $state(null)
+  let popover_manager1 = $state(null)
+  button_manager1 = create_button_manager({
+    text: "Popover Dropdown Test",
+    is_compressed: true,
+    popover_target: () => `popover_${popover_manager1?.id}`,
+  })
+  popover_manager1 = create_popover_manager({
+    type: "dropdown",
+    anchor_id: () => `button_${button_manager1?.id}`,
+  })
+
+  let button_manager2 = $state(null)
+  let popover_manager2 = $state(null)
+  button_manager2 = create_button_manager({
+    text: "Popover Center Test",
+    is_compressed: true,
+    popover_target: () => `popover_${popover_manager2?.id}`,
+  })
+  popover_manager2 = create_popover_manager({
+    type: "center",
+    popover_type: "manual",
+  })
+  let cancel_button_manager2 = create_button_manager({
+    type: "outlined",
+    text: "Close",
+    on_click: () => popover_manager2.close(),
+  })
+
+  let button_manager3 = $state(null)
+  let popover_manager3 = $state(null)
+  button_manager3 = create_button_manager({
+    text: "Popover Nested Test",
+    is_compressed: true,
+    popover_target: () => `popover_${popover_manager3?.id}`,
+  })
+  popover_manager3 = create_popover_manager({
+    type: "center",
+    popover_type: "manual",
+  })
+  let cancel_button_manager3 = create_button_manager({
+    type: "outlined",
+    text: "Close Nested Test",
+    on_click: () => popover_manager3.close(),
+  })
+
+  let fail_button_manager2 = create_button_manager({
+    type: "outlined",
+    text: "Finish with Fail",
+    color: "var(--error-t)",
+    on_click: () => popover_manager2.show_temp_message("Something Failed", "error"),
+  })
+  let finish_button_manager2 = create_button_manager({
+    text: "Finish Wish Success",
+    on_click: () => popover_manager2.show_temp_message("Something Successful"),
+  })
+
+  let button_manager4 = $state(null)
+  let popover_manager4 = $state(null)
+  button_manager4 = create_button_manager({
+    text: "Popover Full Test",
+    is_compressed: true,
+    popover_target: () => `popover_${popover_manager4?.id}`,
+  })
+  popover_manager4 = create_popover_manager({
+    type: "full",
+    header: "Full Popover",
+    // is_non_closable: true,
+    // popover_type: "manual",
+  })
+
+  setTimeout(() => {
+    popover_manager4.open()
+  }, 2000)
+  let button_manager5 = $state(null)
+  let popover_manager5 = $state(null)
+  button_manager5 = create_button_manager({
+    text: "Popover Cornered Test",
+    is_compressed: true,
+    popover_target: () => `popover_${popover_manager5?.id}`,
+  })
+  popover_manager5 = create_popover_manager({
+    type: "center",
+    corner: "br",
+    header: "Corner Popover",
+  })
+
+  let button_manager6 = $state(null)
+  let button_manager6b = $state(null)
+  let popover_manager6 = $state(null)
+  button_manager6 = create_button_manager({
+    text: "Popover Side Panel Test",
+    is_compressed: true,
+    popover_target: () => `popover_${popover_manager6?.id}`,
+  })
+  button_manager6b = create_button_manager({
+    text: "Popover Side Panel Open Test",
+    is_compressed: true,
+    mt: 1,
+    on_click: () => popover_manager6.open(),
+  })
+  popover_manager6 = create_popover_manager({
+    type: "panel",
+    panel_side: "right",
+    header: "Side Panel Popover",
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example Dropdown</h4>
+      <Button manager={button_manager1} />
+      <Popover manager={popover_manager1}>
+        {#snippet content()}
+          <p>one item</p>
+          <p>another item</p>
+          <p>another item</p>
+          <p>another item</p>
+        {/snippet}
+      </Popover>
+    </div>
+    <div>
+      <h4>Example Center</h4>
+      <Button manager={button_manager2} />
+      <Popover manager={popover_manager2}>
+        {#snippet header()}
+          <h3>My Header</h3>
+        {/snippet}
+        {#snippet content()}
+          <p>one modal_content item</p>
+          <p>another modal_content item</p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur enim alias sit vitae earum exercitationem
+            atque dolores. Magni veritatis reprehenderit, sequi ad error tempore necessitatibus incidunt perferendis
+            dolorum aliquid voluptatem ut eveniet! Quibusdam, ipsum assumenda. Excepturi voluptas quam vel veniam autem
+            nesciunt itaque repudiandae quisquam, fuga quasi odio ipsa in.
+          </p>
+          <Button manager={button_manager3} />
+          <Popover manager={popover_manager3}>
+            {#snippet header()}
+              <h3>My Header</h3>
+            {/snippet}
+            {#snippet content()}
+              <Image manager={image_manager1} />
+              <p>nested item</p>
+              <p>another nested item</p>
+              <p>
+                Lorem ipsum etur adipisicing e vncidunt perferendis dolorum aliquid voluptatem ut eveniet! Quibusdam,
+                ipsum assumenda. Excepturi voluptas quam vel veniam autem nesciunt itaque r.
+              </p>
+            {/snippet}
+            {#snippet footer()}
+              <Button manager={cancel_button_manager3} />
+            {/snippet}
+          </Popover>
+        {/snippet}
+        {#snippet footer()}
+          <Button manager={fail_button_manager2} />
+          <Button manager={finish_button_manager2} />
+          <Button manager={cancel_button_manager2} />
+        {/snippet}
+      </Popover>
+    </div>
+    <div>
+      <h4>Example Full</h4>
+      <Button manager={button_manager4} />
+      <Popover manager={popover_manager4}>
+        {#snippet content()}
+          <p>one modal_content item</p>
+          <p>another modal_content item</p>
+        {/snippet}
+      </Popover>
+    </div>
+    <div>
+      <h4>Example Corner</h4>
+      <Button manager={button_manager5} />
+      <Popover manager={popover_manager5}>
+        {#snippet content()}
+          <p>This will be in the corner</p>
+          <p>Maybe for a chatbox or something</p>
+        {/snippet}
+      </Popover>
+    </div>
+    <div>
+      <h4>Example Side Panel</h4>
+      <Button manager={button_manager6} />
+      <Button manager={button_manager6b} />
+      <Popover manager={popover_manager6}>
+        {#snippet content()}
+          <p>This will be a side panel</p>
+          <p>Maybe for a edit or something</p>
+        {/snippet}
+      </Popover>
+    </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/Qr/index.svelte

@@ -0,0 +1,77 @@
+<script>
+  import Qr from "$lib/Components/Qr/index.svelte"
+  import { create_qr_manager } from "$lib/Components/Qr/index.svelte.js"
+
+  let qr_manager = create_qr_manager({
+    margin: 10,
+    size: 200,
+    image_size: 0.5,
+    type_number: 0,
+    color: "var(--primary-t)",
+    corner_color: "color-mix(in oklab, var(--primary-t), var(--bg) 20%)",
+    background_color: "var(--g21-t)",
+    border_radius: null,
+    data: "https://www.sveltekit-ui.com",
+    image: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/icon.png",
+    is_show_copy: true,
+    is_show_download: true,
+  })
+
+  let qr_manager2 = create_qr_manager({
+    margin: 5,
+    size: 100,
+    image_size: 0.5,
+    type_number: 0,
+    color: "green",
+    corner_color: "aqua",
+    background_color: "var(--g21-t)",
+    border_radius: 1,
+    data: "https://www.google.com",
+    image: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/icon.png",
+    is_show_copy: false,
+    is_show_download: false,
+  })
+
+  let qr_manager3 = create_qr_manager({
+    margin: 0,
+    size: 200,
+    image_size: 1,
+    type_number: 0,
+    color: "oklch(var(--l8-t) var(--c4) var(--primary-h))",
+    corner_color: "oklch(var(--l12-t) var(--c2) var(--primary-h))",
+    background_color: "var(--bg)",
+    border_color: "transparent",
+    border_radius: null,
+    border_r: null,
+    border_radius: null,
+    error_correction_level: "M",
+    data: `https://www.sharktankupdate.com/seasons/1/episodes/1/pitches/mr-tods-pie-factory`,
+    image: "/favicon.png",
+    // image: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/icon.png",
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <Qr manager={qr_manager} />
+    </div>
+    <div>
+      <h4>Example2</h4>
+      <Qr manager={qr_manager2} />
+    </div>
+    <div>
+      <h4>Example3</h4>
+      <Qr manager={qr_manager3} />
+    </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/Slider/index.svelte

@@ -0,0 +1,92 @@
+<script>
+  import Slider from "$lib/Components/Slider/index.svelte"
+  import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+
+  let slider_manager1 = create_slider_manager({
+    label: "label test",
+    val: 0.5,
+    on_change: (input) => console.log("slider_change", input),
+  })
+
+  let slider_manager2 = create_slider_manager({
+    min: -5,
+    max: 5,
+    step: 1,
+    val: 3,
+    is_short: true,
+  })
+  let slider_manager3 = create_slider_manager({
+    min: 0,
+    max: 10,
+    val: [3, 6],
+    on_up: (input) => handle_slider_change3(input),
+  })
+  let slider_manager4 = create_slider_manager({
+    min: -10,
+    max: 10,
+    val: [-4, 3, 6],
+    on_up: (input) => console.log("slider4", input),
+  })
+
+  let slider_manager5 = create_slider_manager({
+    min: -5,
+    max: 5,
+    step: 1,
+    val: null,
+    is_nullable: true,
+  })
+
+  function handle_slider_change3(input) {
+    console.log("handle_slider_change3", input)
+    slider_manager3.set_loading_i(input?.index)
+    setTimeout(() => {
+      slider_manager3.set_loading_i(null)
+    }, 2000)
+  }
+
+  let wid = 20
+
+  let button_manager = create_button_manager({
+    text: "Toggle Width",
+    is_compressed: true,
+    on_click: () => (wid = wid == 20 ? 50 : 20),
+  })
+</script>
+
+<div>
+  <div style="width: 30rem;">
+    <h3>Example</h3>
+    <div style="display: flex; flex: 1;">
+      <div style="display: flex; flex: 1; flex-direction: column;">
+        <Slider manager={slider_manager1} />
+      </div>
+    </div>
+  </div>
+  <h3>Example width (width: {wid}, val: {slider_manager2?.val})</h3>
+  <Button manager={button_manager} />
+  <div style="width: {wid}rem;">
+    <Slider manager={slider_manager2} />
+  </div>
+  <div style="display: flex;">
+    <div>
+      <h3>Example 3</h3>
+      <div style="width: 30rem;">
+        <Slider manager={slider_manager3} />
+      </div>
+    </div>
+    <div>
+      <h3>Example 4</h3>
+      <div style="width: 30rem;">
+        <Slider manager={slider_manager4} />
+      </div>
+    </div>
+    <div>
+      <h3>Example Nullable</h3>
+      <div style="width: 30rem;">
+        <Slider manager={slider_manager5} />
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+<script>
+  import Spacer from "$lib/Components/Spacer/index.svelte"
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Horiz</h4>
+      <Spacer />
+      <h4>Vert</h4>
+      <div style="display: flex; gap: .5rem;">
+        <p>test</p>
+        <Spacer is_vert={true} color="green" />
+      </div>
+      <h4>color="orange</h4>
+      <Spacer color="orange" />
+    </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/StoragePicker/index.svelte

@@ -0,0 +1,139 @@
+<script>
+  import StoragePicker from "$lib/Components/StoragePicker/index.svelte"
+  import { create_storage_picker_manager } from "$lib/Components/StoragePicker/index.svelte.js"
+
+  let account_storage = [
+    {
+      id: "jvcbugonkudgeufghkup",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "efvhgvebjwkdjslcxmcj"],
+      file_name: "mount_etna_eruption",
+      file_extension: "webp",
+      mime_type: "image/webp",
+      size_kb: 102,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608695,
+      db_epoch_created: 1709608695,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "iszqtqzmcpkjggrdbeaw",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "efvhgvebjwkdjslcxmcj"],
+      file_name: "mount_etna_eruption_album",
+      file_extension: "webp",
+      mime_type: "image/webp",
+      size_kb: 69,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608712,
+      db_epoch_created: 1709608712,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "qlstfmjhyhfyjzuceeyd",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["temp", "audio"],
+      file_name: "newaudio",
+      file_extension: "mp3",
+      mime_type: "audio/mpeg",
+      size_kb: 2041,
+      metadata: null,
+      is_temporary: true,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608750,
+      db_epoch_created: 1709608750,
+      is_public: false,
+      transcription:
+        "The Day the Earth Roared: Mount Etna's 1669 Eruption When Etna Woke Up: The 1669 Eruption. Mount Etna, Europe's largest and most active volcano, has a history of lighting up the sky and shaking the ground. But on March 8, 1669, it threw quite the fiery tantrum, beginning one of its most historic eruptions. The Prelude to Pyrotechnics. Just like a grumpy old giant waking up on the wrong side of the bed, Mount Etna started rumbling, warning the Sicilians that something big was coming. Then, boom! Lava began oozing out, and things got a little too hot to handle. A River of Fire. Imagine a river, but instead of water, it's red-hot lava. That's what the people of Catania saw as Etna's lava flowed for miles, eventually knocking on the city's door like an unwanted guest. Catania's Creative Defense. The citizens of Catania didn't just sit back and roast marshmallows. They got creative, attempting to divert the lava flow. Spoiler alert: Lava's not the best listener, and it didn't really go as planned. The Aftermath. After months of fiery spectacle, Etna finally calmed down, but not before reshaping the landscape. New valleys were created, and Catania got a makeover it never asked for. Fun Fact Time! Did you know that this eruption lasted until July 15, 1669? That's one long, hot summer. Etna's Legacy. Mount Etna's 1669 eruption is a reminder of the raw power of nature. It's been throwing lava parties for thousands of years, and it's not about to stop. So, if you're visiting Sicily and Etna starts to grumble, maybe don't wear your flip-flops. Mount Etna's 1669 eruption was truly a historic event, showing us that nature is always the boss. And while Etna might not erupt with such drama every day, it's still puffing away, reminding us that our planet is an ever-changing canvas. ",
+    },
+    {
+      id: "pvyrluumkllptftrehjv",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "efvhgvebjwkdjslcxmcj"],
+      file_name: "the_day_the_earth_roared_mount_etnas_1669_eruption",
+      file_extension: "mp3",
+      mime_type: "audio/mpeg",
+      size_kb: 2041,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608763,
+      db_epoch_created: 1709608763,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "nfuamrwfaipvjcpghncj",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "ptwqfpuzvfyozewopier"],
+      file_name: "cleveland_fans_nickname_team_indians",
+      file_extension: "webp",
+      mime_type: "image/webp",
+      size_kb: 135,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709609121,
+      db_epoch_created: 1709609121,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "irmtrstjynyqdbvuoulk",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "ptwqfpuzvfyozewopier"],
+      file_name: "cleveland_fans_nickname_team_indians_album",
+      file_extension: "webp",
+      mime_type: "image/webp",
+      size_kb: 89,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709609143,
+      db_epoch_created: 1709609143,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "dlbdppgiyxicjvsxfrbp",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["temp", "audio"],
+      file_name: "newaudio",
+      file_extension: "mp3",
+      mime_type: "audio/mpeg",
+      size_kb: 2994,
+      metadata: null,
+      is_temporary: true,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709609191,
+      db_epoch_created: 1709609191,
+      is_public: false,
+      transcription:
+        "The Legacy of the Cleveland Indians: From Origins to Evolution A Swing and a Hit for Cleveland Baseball! Baseball fans, have you ever wondered how your beloved teams got their names? Let's rewind to March 9, 1897, a pivotal date for Cleveland baseball enthusiasts. Gather 'round as I pitch you the tale of how the 'Indians' moniker came to be and why it stuck till 1915 before taking a swing into the annals of history. Batter up for a quick inning of facts and fun! A Name from the Stands. Long before social media polls and branding agencies, sports teams often got their names from the very voices of the fans. For Cleveland, it was no different. Back in the late 1800s, the city's baseball team was searching for an identity that would resonate with the local crowd. March 9, 1897 : the day the fans reportedly nicknamed their team the 'Indians'. It was a shout-out, a tip of the cap, to a former player named Louis Sockalexis, a Native American who wowed the fans with his skills. This homage, though controversial in today's context, was a hat-tip to talent and diversity, at least in the spirit of the age. Official Stamp of Approval. Fast forward to 1915, the name 'Indians' was made official. By this time, the fans had rallied, the press had caught on, and the 'Indians' were ready to take the field with their new, official title. Little did they know, the name would stick around for over a century! A Century Innings and Counting. The Cleveland Indians name rode through the highs and lows of baseball seasons, witnessed legendary plays, and celebrated World Series wins. It became a staple, a heritage tag for the city's baseball narrative. But as we all know, names can carry weight beyond the diamond, and eventually, the call for change struck. Change-Up in the 21st Century. In the spirit of sensitivity and progress, the Cleveland Indians embarked on a rebranding journey. The team acknowledged the need to adapt and respect the cultural implications of their historic name. And so, the legacy of the 'Indians' name has evolved, making room for a new chapter in Cleveland baseball history. The Final Score. From a fan's shout to a century-spanning identity, the Cleveland 'Indians' name is a slice of baseball lore. It's a reminder of the game's ability to reflect society's values and the never-ending cycle of change. So next time you're rooting for your favorite team, remember the stories behind those stitched letters on the jerseys. It's more than a game; it's history in the making! So there you have it, folks! A legendary name, a legacy of talent, and a curveball twist in modern times. Let's tip our caps to the past and play ball for the future! ",
+    },
+  ]
+
+  let storage_picker_manager = create_storage_picker_manager({
+    storage: account_storage,
+    // files_to_upload: () => files_to_upload,
+    // storage_src: () => storage_src,
+    // accept: ["audio/mpeg"],
+    // is_show_button: true,
+    is_multiselect: true,
+    // is_show_content: false,
+    // is_disabled: () => is_loading_generate_audio || is_disabled,
+  })
+</script>
+
+<div>
+  <StoragePicker manager={storage_picker_manager} />
+</div>
+
+<h4>StoragePicker val:</h4>
+<pre>{JSON.stringify(storage_picker_manager?.val, null, 2)}</pre>