sveltekit-ui 1.1.74 → 1.1.75

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

@@ -1,30 +0,0 @@
-<script>
-  import CronInput from "$lib/Components/CronInput/index.svelte"
-  import { create_cron_input_manager } from "$lib/Components/CronInput/index.svelte.js"
-
-  let cron_manager = create_cron_input_manager({ val: "* */6 * * *" })
-  let cron_manager2 = create_cron_input_manager({ is_popover: false })
-</script>
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>Example</h4>
-      <div>
-        <CronInput manager={cron_manager} />
-      </div>
-      <h4>Example No Modal</h4>
-      <div>
-        <CronInput manager={cron_manager2} />
-      </div>
-    </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/DocsDefinition/index.svelte

@@ -1,155 +0,0 @@
-<script>
-  import Code from "$lib/Components/Code/index.svelte"
-  import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
-  import { docs_definition_to_sample_code } from "$lib/client/docs/index.js"
-
-  let { definition } = $props()
-
-  let use_like_code_manager = $state(null)
-
-  $effect(() => {
-    use_like_code_manager = create_code_manager({
-      language: "svelte",
-      content: docs_definition_to_sample_code(definition),
-    })
-  })
-</script>
-
-{#key definition?.component_name}
-  <div style="margin-top: 1rem;">
-    <h3>Component Documentation</h3>
-    <p class="label">Component Name</p>
-    <p>{definition?.component_name}</p>
-    {#if !definition?.is_not_builder}
-      <p class="label">Builder Function Name</p>
-      <p>{definition?.builder_function_name}</p>
-    {/if}
-    <p class="label">Description</p>
-    <p>{definition?.description}</p>
-    <p class="label">Use like example</p>
-    <Code manager={use_like_code_manager} />
-    {#if definition?.is_not_builder}
-      <p class="label">Properties</p>
-      <div class="table_container">
-        <table style="margin: 0;">
-          <thead>
-            <tr>
-              <th>Property</th>
-              <th>Type</th>
-              <th>Default</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#if Object.keys(definition?.properties || {}).length > 0}
-              {#each Object.keys(definition?.properties || {}) as key (key)}
-                <tr>
-                  <td>{key}</td>
-                  <td>{definition?.properties?.[key]?.type}</td>
-                  <td><p style="max-width: 30rem;">{definition?.properties?.[key]?.default}</p></td>
-                  <td><p style="max-width: 30rem;">{definition?.properties?.[key]?.description}</p></td>
-                </tr>
-              {/each}
-            {:else}
-              <tr><td colspan="4">No properties found</td></tr>
-            {/if}
-          </tbody>
-        </table>
-      </div>
-    {:else}
-      <p class="label">Config</p>
-      <div class="table_container">
-        <table style="margin: 0;">
-          <thead>
-            <tr>
-              <th>Property</th>
-              <th>Type</th>
-              <th>Default</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#if Object.keys(definition?.config || {}).length > 0}
-              {#each Object.keys(definition?.config || {}) as key (key)}
-                <tr>
-                  <td>{key}</td>
-                  <td>{definition?.config?.[key]?.type}</td>
-                  <td><p style="max-width: 30rem;">{definition?.config?.[key]?.default}</p></td>
-                  <td><p style="max-width: 30rem;">{definition?.config?.[key]?.description}</p></td>
-                </tr>
-              {/each}
-            {:else}
-              <tr><td colspan="4">No config options found</td></tr>
-            {/if}
-          </tbody>
-        </table>
-      </div>
-      <p class="label">Methods</p>
-      <div class="table_container">
-        <table style="margin: 0;">
-          <thead>
-            <tr>
-              <th>Method</th>
-              <th>Description</th>
-              <th>Parameters</th>
-              <th>Returns</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#if Object.keys(definition?.methods || {}).length > 0}
-              {#each Object.keys(definition?.methods || {}) as key (key)}
-                <tr>
-                  <td>{key}</td>
-                  <td><p style="max-width: 30rem;">{definition?.methods?.[key]?.description}</p></td>
-                  <td>
-                    {#if Object.keys(definition?.methods?.[key]?.parameters || {}).length > 0}
-                      {#each Object.keys(definition?.methods?.[key]?.parameters || {}) as param (param)}
-                        <p>{param}: {definition?.methods?.[key]?.parameters?.[param]}</p>
-                      {/each}
-                    {:else}
-                      <p>No Params</p>
-                    {/if}
-                  </td>
-                  <td>{definition?.methods?.[key]?.returns}</td>
-                </tr>
-              {/each}
-            {:else}
-              <tr><td colspan="4">No methods found</td></tr>
-            {/if}
-          </tbody>
-        </table>
-      </div>
-      <p class="label">Returned Properties</p>
-      <div class="table_container">
-        <table style="margin: 0;">
-          <thead>
-            <tr>
-              <th>Property</th>
-              <th>Type</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#if Object.keys(definition?.returned_properties || {}).length > 0}
-              {#each Object.keys(definition?.returned_properties || {}) as key (key)}
-                <tr>
-                  <td>{key}</td>
-                  <td>{definition?.returned_properties?.[key]?.type}</td>
-                  <td><p style="max-width: 30rem;">{definition?.returned_properties?.[key]?.description}</p></td>
-                </tr>
-              {/each}
-            {:else}
-              <tr><td colspan="4">No return properties found</td></tr>
-            {/if}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  </div>
-{/key}
-
-<style>
-  .label {
-    margin-top: 1rem;
-  }
-</style>

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

@@ -1,88 +0,0 @@
-<script>
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-  import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-  // import DropdownConfigInput from "$lib/Components/Dropdown/ConfigInput/index.svelte"
-  // import { create_dropdown_config_manager } from "$lib/Components/Dropdown/ConfigInput/index.svelte.js"
-  import Button from "$lib/Components/Button/index.svelte"
-
-  const options = Array.from({ length: 5 }, (_, i) => ({
-    key: (i + 1).toString(),
-    name: `Option ${i + 1}`,
-  }))
-
-  const options_test = [
-    { key: "speaks_english", name: "Speeks English", emoji: "🇺🇸" },
-    { key: "speaks_spanish", name: "Speeks Spanish", emoji: "🇪🇸" },
-    { key: "speaks_french", name: "Speeks French", emoji: "🇫🇷" },
-    { key: "speaks_mandarin", name: "Speeks Mandarin", emoji: "🇨🇳" },
-    { key: "speaks_russian", name: "Speeks Russian", emoji: "🇷🇺" },
-    { key: "speaks_portuguese", name: "Speeks Portuguese", emoji: "🇵🇹" },
-    { key: "speaks_korean", name: "Speeks Korean", emoji: "🇰🇷" },
-    { key: "speaks_japanese", name: "Speeks Japanese", emoji: "🇯🇵" },
-    { key: "speaks_german", name: "Speeks German", emoji: "🇩🇪" },
-  ]
-
-  let dropdown_manager = create_dropdown_manager({
-    options: options_test,
-    is_button_compressed: true,
-    row_display_keys: ["emoji", "name"],
-    button_display_keys: ["emoji", "name"],
-    on_item_click: (input) => console.log("handle_item_click", input),
-  })
-
-  // let dropdown_config_manager = create_dropdown_config_manager({
-  //   on_finish: (input) => dropdown_manager.init(input),
-  // })
-
-  let dropdown_manager2 = create_dropdown_manager({
-    label: "passed in label",
-    options: options_test,
-    is_button_compressed: true,
-    row_display_keys: ["emoji", "name"],
-    button_display_keys: ["emoji", "name"],
-    is_multiselect: true,
-    is_set_null_button: true,
-    on_change: (input) => console.log("handle_item_click", input),
-  })
-
-  let dropdown_manager3 = create_dropdown_manager({
-    type: "horiz_selector",
-    options: options_test,
-    is_button_compressed: true,
-    row_display_keys: ["emoji", "name"],
-    button_display_keys: ["emoji", "name"],
-    is_multiselect: true,
-    is_set_null_button: true,
-    header: "Width",
-    header_icon: "opposing_arrows",
-    header_icon_deg: 90,
-    min_header_width: 9,
-    on_change: (input) => console.log("handle_item_click", input),
-  })
-</script>
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>Example</h4>
-      <div style="display: flex;">
-        <Dropdown manager={dropdown_manager} />
-        <!-- <DropdownConfigInput manager={dropdown_config_manager} /> -->
-      </div>
-      <h4>Example is_multiselect</h4>
-      <Dropdown manager={dropdown_manager2} />
-      <pre>{JSON.stringify(dropdown_manager2?.val, null, 2)}</pre>
-      <h4>Example horiz_selector</h4>
-      <Dropdown manager={dropdown_manager3} />
-      <pre>{JSON.stringify(dropdown_manager3?.val, null, 2)}</pre>
-    </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/FileInput/index.svelte

@@ -1,40 +0,0 @@
-<script>
-  import FileInput from "$lib/Components/FileInput/index.svelte"
-  import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
-
-  let file_manager = create_file_input_manager({
-    is_multiselect: false,
-    height: "100%",
-    on_get_file: () => console.log("jdjdjd"),
-  })
-  let file_manager2 = create_file_input_manager({
-    accept: ["image/png", "image/jpeg"],
-    is_multiselect: false,
-  })
-  let file_manager3 = create_file_input_manager({
-    accept: ["image/png", "image/jpeg"],
-    is_multiselect: false,
-    is_drop_zone: false,
-  })
-</script>
-
-<div>
-  <div>
-    <h4>Example</h4>
-    <div style="height: 30rem; background-color: var(--shadow2-t); border-radius: 2rem; padding: .5rem;">
-      <FileInput manager={file_manager} />
-    </div>
-  </div>
-  <div>
-    <h4>Example 2</h4>
-    <div style="height: 30rem;">
-      <FileInput manager={file_manager2} />
-    </div>
-  </div>
-  <div>
-    <h4>Example 3</h4>
-    <div>
-      <FileInput manager={file_manager3} />
-    </div>
-  </div>
-</div>

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

@@ -1,120 +0,0 @@
-<script>
-  import Icon from "$lib/Components/Icon/index.svelte"
-  import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
-
-  let icons = [
-    "arrow",
-    "arrow_tailed",
-    "curved_arrow",
-    "calendar",
-    "chart",
-    "row_item",
-    "chart_group",
-    "check",
-    "copy",
-    "drag_grip",
-    "edit",
-    "link",
-    "link_internal",
-    "list",
-    "minus",
-    "plus",
-    "rotate",
-    "refresh",
-    "sort",
-    "table",
-    "trashcan",
-    "x",
-    "three_dots",
-    "clock",
-    "sun",
-    "moon",
-    "magnifying_glass",
-    "smile_face",
-    "nuetral_face",
-    "frown_face",
-    "pointer_hand",
-    "touch_circle",
-    "profile",
-    "share",
-    "invite",
-    "feedback",
-    "idea",
-    "ar_one_to_one",
-    "ar_four_to_three",
-    "ar_three_to_two",
-    "ar_sixteen_to_nine",
-    "resize",
-    "crop",
-    "folder",
-    "file",
-    "file_drop",
-    "linked",
-    "unlinked",
-    "sliders",
-    "brain",
-    "brush",
-    "redo_arrow",
-    "undo_arrow",
-    "opposing_arrows",
-    "warning",
-    "pinpoint",
-    "paperclip",
-    "reply",
-    "reply_all",
-    "forward",
-    "mail",
-    "mail_opened",
-    "mail_received",
-    "mail_sent",
-    "mail_sent_opened",
-  ]
-
-  let icons_prepped = $state(null)
-
-  function prep_icons() {
-    let icons_prepped_loc = []
-    if (Array.isArray(icons)) {
-      for (let icon of icons) {
-        let icon_prepped = create_icon_manager({
-          icon_id: icon,
-          sw: 40,
-        })
-        icons_prepped_loc.push(icon_prepped)
-      }
-    }
-    icons_prepped = icons_prepped_loc
-  }
-
-  prep_icons()
-</script>
-
-<div>
-  <div class="grid">
-    {#if Array.isArray(icons_prepped)}
-      {#each icons_prepped as icon_prepped}
-        <div class="box">
-          <Icon manager={icon_prepped} />
-          <p>{icon_prepped?.icon_id}</p>
-        </div>
-      {/each}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .grid {
-    width: 100%;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(5%, 8rem, 100%), 1fr));
-    margin: 0.5rem;
-  }
-  .box {
-    display: grid;
-    place-items: center;
-  }
-  .box p {
-    font-size: 1.2rem;
-  }
-</style>

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

@@ -1,15 +0,0 @@
-<script>
-  import IconInput from "$lib/Components/IconInput/index.svelte"
-  import { create_icon_input_manager } from "$lib/Components/IconInput/index.svelte.js"
-  import Icon from "$lib/Components/Icon/index.svelte"
-
-  let icon_input_manager = create_icon_input_manager()
-  let icon_input_manager2 = create_icon_input_manager({ is_icon_only: true })
-</script>
-
-<div>
-  <h4>Example</h4>
-  <IconInput manager={icon_input_manager} />
-  <h4>Icon is_icon_only</h4>
-  <IconInput manager={icon_input_manager2} />
-</div>

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

@@ -1,167 +0,0 @@
-<script>
-  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 image_manager2 = create_image_manager({
-    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/moon.webp",
-    alt: "Hello World",
-    display_max_height: 80,
-    display_max_width: 250,
-    image_aspect_ratio: 1,
-    bg_img_blur: 10,
-  })
-
-  let image_manager3 = create_image_manager({
-    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/moon.webp",
-    alt: "Hello World",
-    display_max_height: 50,
-    // display_max_width: 250,
-    // image_aspect_ratio: 1,
-    bg_img_blur: 10,
-  })
-
-  let image_manager4 = create_image_manager({
-    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/bagel_test.png",
-    // display_max_height: 200,
-    // display_max_width: 200,
-    bg_img_blur: 20,
-    bg_img_opacity: 0.01,
-  })
-  let image_manager5 = create_image_manager({
-    // display_max_height: 200,
-    // display_max_width: 200,
-    bg_img_blur: 20,
-    bg_img_opacity: 0.01,
-  })
-
-  let image_manager6 = create_image_manager({
-    src: "https://www.contibase.com/api/v1/storage/almlditgeqkckokjniso",
-    src_quick: "https://www.contibase.com/api/v1/storage/dxaarfdhwqtmrxfrgfwu",
-    alt: "Hello World",
-    image_width: 512,
-    image_height: 512,
-    display_max_height: 800,
-    display_max_width: 400,
-    bg_img_blur: 20,
-    bg_img_opacity: 0.5,
-  })
-
-  let image_manager7 = create_image_manager({
-    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/skyscraper_test.webp",
-    src_quick: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/skyscraper_test_quick.webp",
-    alt: "Hello World",
-    display_max_height: 800,
-    display_max_width: 400,
-    bg_img_blur: 20,
-    bg_img_opacity: 0.5,
-  })
-
-  // let cities_prepped = $state(null)
-  // let cities_prepped_loc = []
-  // for (let item of [{ key: "columbus_ohio" }]) {
-  //   let image_manager = create_image_manager({
-  //     src: `https://www.contibase.com/api/v1/storage/bzvetqlquljjjeqfsmjq__cities__${item?.key}__hero`,
-  //     src_quick: `https://www.contibase.com/api/v1/storage/bzvetqlquljjjeqfsmjq__cities__${item?.key}__hero_sm`,
-  //     alt: "Test",
-  //     // image_height: 300,
-  //     // image_width: 500,
-  //     // image_aspect_ratio: 1.78,
-  //     display_max_height: 300,
-  //     display_max_width: 500,
-  //     bg_img_blur: 50,
-  //     bg_img_opacity: 0.2,
-  //   })
-  //   cities_prepped_loc.push({
-  //     get image_manager() {
-  //       return image_manager
-  //     },
-  //     ...item,
-  //   })
-  // }
-
-  // cities_prepped = cities_prepped_loc
-</script>
-
-<!-- {#if Array.isArray(cities_prepped) && cities_prepped.length > 0}
-  <div style="margin: 0;">
-    <div
-      style="display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
-  gap: 1rem;
-  justify-items: center;
-  margin: 0 auto;
-  max-width: 1200px;"
-    >
-      {#each cities_prepped as city_prepped}
-        <div class="card" style="width: 300px;">
-          <Image manager={city_prepped?.image_manager} />
-          <h2>{city_prepped?.name}</h2>
-          button_tbd
-        </div>
-      {/each}
-    </div>
-  </div>
-{:else}
-  <p>No cities found</p>
-{/if} -->
-
-<div>
-  <div class="grid">
-    <div>
-      <h4>Example</h4>
-      <Image manager={image_manager1} />
-    </div>
-    <div>
-      <h4>Example 2</h4>
-      <Image manager={image_manager2} />
-    </div>
-    <div>
-      <h4>Example 3</h4>
-      <Image manager={image_manager3} />
-    </div>
-    <div>
-      <h4>Example 4</h4>
-      <div style="max-width: 200px; border: 1px solid red;">
-        <Image manager={image_manager4} />
-      </div>
-    </div>
-    <div>
-      <h4>Example 5 no src</h4>
-      <div style="max-width: 200px; border: 1px solid red;">
-        <Image manager={image_manager5} />
-      </div>
-    </div>
-    <div>
-      <h4>Example 6</h4>
-      <div style="max-width: 200px;">
-        <Image manager={image_manager6} />
-      </div>
-    </div>
-    <div>
-      <h4>Example 7</h4>
-      <div style="max-width: 200px;">
-        <Image manager={image_manager7} />
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
-    margin: 0.5rem;
-  }
-</style>