sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/ImageSlider/index.svelte

@@ -1,124 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import Icon from "../Icon/index.svelte"
-  import { onMount } from "svelte"
-
-  let { manager } = $props()
-
-  onMount(() => {
-    if (typeof manager?.handle_mount == "function") {
-      manager?.handle_mount()
-    }
-  })
-</script>
-
-<svelte:document
-  onpointerup={(e) => manager?.handle_pointer_event(e, "up", manager?.id)}
-  onpointermove={(e) => manager?.handle_pointer_event(e, "move", manager?.id)}
-/>
-
-<div
-  id={`container_${manager?.id}`}
-  class="container"
-  style="aspect-ratio: {manager?.aspect_ratio}; --color1: {manager?.color1}; --color2: {manager?.color2};"
->
-  {#if manager?.src1}
-    <img class="base_img" src={manager?.src1} alt="Base" style="width: calc(100% - {manager?.percent_shown}% + 2px);" />
-  {/if}
-  {#if manager?.src2}
-    <img class="top_img" src={manager?.src2} alt="New" style="width: calc({manager?.percent_shown}% - 2px);" />
-    <input
-      type="range"
-      min="1"
-      max="100"
-      value={manager?.percent_shown}
-      class="slider"
-      name="slider"
-      id="slider"
-      onpointerdown={(e) => manager?.handle_pointer_event(e, "down", manager?.id)}
-    />
-    {#if manager?.aspect_ratio}
-      <div class="line" style="left: calc({manager?.percent_shown}% - 6px);"></div>
-      <div class="slider_button" style="left: calc({manager?.percent_shown}% - 18px);">
-        <Button manager={manager?.button_manager} />
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>
-  .container {
-    position: relative;
-    max-width: 100%;
-    max-height: 100%;
-    border-radius: 1rem;
-    margin: auto;
-    z-index: 1;
-  }
-  .base_img {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    object-fit: cover;
-    object-position: right;
-    border-radius: 0;
-    z-index: -3;
-  }
-  .top_img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    object-fit: cover;
-    object-position: left;
-    border-radius: 0;
-    z-index: -3;
-  }
-  .slider {
-    position: absolute;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    height: 100%;
-    background: rgba(242, 242, 242, 0);
-    outline: none;
-    margin: 0;
-    transition: all 0.2s;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 6px;
-    height: var(--sliderheight);
-    background-color: var(--g19);
-    cursor: pointer;
-  }
-  .slider_button {
-    pointer-events: none;
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background-color: var(--g19);
-    top: calc(50% - 20px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: -1;
-  }
-  .line {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    min-width: 6px;
-    min-height: 100%;
-    background-color: var(--color1);
-    border-left: 1px solid var(--color2);
-    border-right: 1px solid var(--color2);
-    z-index: -2;
-  }
-</style>

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

@@ -1,99 +0,0 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_unique_id, set_closurable } from "../../client/index.js"
-
-export function create_image_slider_manager(config) {
-  let id = create_unique_id(null, 20)
-  let src1 = $derived(set_closurable(config?.src1, null))
-  let src2 = $derived(set_closurable(config?.src2, null))
-  let color1 = $derived(set_closurable(config?.color1, "var(--primary-t)"))
-  let color2 = $derived(set_closurable(config?.color2, "color-mix(in oklab, var(--primary-t), var(--bg) 80%)"))
-  let percent_shown = $state(50)
-
-  function init(config) {
-    percent_shown = config?.percent_shown ?? 50
-  }
-  init(config)
-
-  let touch_start_x = $state(0)
-  let aspect_ratio = $state(null)
-
-  function handle_mount() {
-    set_image_aspect_ratio(src1)
-  }
-
-  function set_image_aspect_ratio(src) {
-    return new Promise((resolve, reject) => {
-      const img = new Image()
-      img.onload = function () {
-        const width = this.naturalWidth
-        const height = this.naturalHeight
-        aspect_ratio = width / height
-      }
-      img.onerror = function () {
-        aspect_ratio = null
-      }
-      img.src = src
-    })
-  }
-
-  let button_manager = create_button_manager({
-    support_icon: "opposing_arrows",
-    color: color1,
-    border_color: color2,
-    icon_deg: 90,
-    icon_size: 2,
-    icon_sw: 30,
-    min_height: 3,
-    is_icon_bg_tint: false,
-    is_uniform: true,
-  })
-
-  function handle_pointer_event(event, type, id_input) {
-    if (id != id_input) {
-      return
-    }
-    if (event) {
-      event.preventDefault()
-    }
-    if (type == "move" && !touch_start_x) {
-      return
-    } else if (type == "up") {
-      touch_start_x = null
-      return
-    }
-    touch_start_x = event.clientX
-    let container_el = document?.querySelector(`#container_${id}`)
-    const container_rect = container_el.getBoundingClientRect()
-    percent_shown = Math.max(0, Math.min(100, ((touch_start_x - container_rect.left) / container_rect.width) * 100))
-  }
-
-  return {
-    id,
-    get src1() {
-      return src1
-    },
-    get src2() {
-      return src2
-    },
-    get color1() {
-      return color1
-    },
-    get color2() {
-      return color2
-    },
-    get percent_shown() {
-      return percent_shown
-    },
-    get touch_start_x() {
-      return touch_start_x
-    },
-    get aspect_ratio() {
-      return aspect_ratio
-    },
-    get button_manager() {
-      return button_manager
-    },
-    handle_mount,
-    handle_pointer_event,
-  }
-}

package/dist/Components/Json/Nested/index.svelte

@@ -1,157 +0,0 @@
-<script>
-  import Button from "../../Button/index.svelte"
-  import TextInput from "../../TextInput/index.svelte"
-  import Checkbox from "../../Checkbox/index.svelte"
-  import Dropdown from "../../Dropdown/index.svelte"
-  import Popover from "../../Popover/index.svelte"
-  import Self from "./index.svelte"
-  import { color_var } from "../../../client/index.js"
-
-  let { manager, is_edit_mode } = $props()
-
-  const bracket_color = color_var(8, 11, 23, 24, true)
-  const key_color = color_var(8, 8, 17, 24, true)
-  const string_color = color_var(8, 10, 3, 24, true)
-  const boolean_color = color_var(8, 10, 15, 24, true)
-  const number_color = color_var(8, 10, 11, 24, true)
-  const null_color = color_var(8, 3, 1, 24, true)
-</script>
-
-{#snippet edit_content()}
-  {#if is_edit_mode}
-    <div style="display: inline-flex;">
-      <Popover manager={manager?.edit_item_popover_manager}>
-        {#snippet content()}
-          <Dropdown manager={manager?.edit_item_type_dropdown_manager} />
-          {#if manager?.edit_item_type_dropdown_manager?.val == "number"}
-            <TextInput manager={manager?.edit_item_number_text_input_manager} />
-          {:else if manager?.edit_item_type_dropdown_manager?.val == "string"}
-            <TextInput manager={manager?.edit_item_string_text_input_manager} />
-          {:else if manager?.edit_item_type_dropdown_manager?.val == "boolean"}
-            <Checkbox manager={manager?.edit_item_boolean_checkbox_manager} />
-          {/if}
-          {#if manager?.is_array_item}
-            <Button manager={manager?.delete_item_button_manager} />
-          {/if}
-        {/snippet}
-        {#snippet footer()}
-          <Button manager={manager?.finish_edit_item_button_manager} />
-        {/snippet}
-      </Popover>
-      <Button manager={manager?.edit_item_button_manager} />
-    </div>
-  {/if}
-{/snippet}
-
-{#if manager?.type == "object"}
-  <span>
-    <span style="vertical-align: middle; color: {bracket_color};">{"{"}</span>
-    <div style="display: inline-block; vertical-align: middle;">
-      <button
-        style="width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; padding:0; border-radius:.5rem; background:var(--shadow2-t); border:1px solid var(--shadow8-t); cursor:pointer; line-height:1; "
-        onclick={manager?.toggle_is_collapsed}>{manager?.is_collapsed ? "+" : "-"}</button
-      >
-    </div>
-    <span style="vertical-align: middle; color: {bracket_color};">
-      {manager?.is_collapsed ? "}" : ""}
-    </span>
-  </span>
-  {#if !manager?.is_collapsed}
-    <div style="padding-left: {manager?.indentation}rem; border-left: var(--shadow8-t) solid 1px;">
-      {#if Object.keys(manager?.val || {}).length > 0}
-        {#each Object.keys(manager?.val || {}) as key}
-          <div style="display: inline;">
-            <span style="margin-right: .5rem; color: {key_color};">
-              {key}
-              <div style="display: inline-flex;">
-                {#if is_edit_mode}
-                  <Button manager={manager?.val?.[key]?.edit_key_button_manager} />
-                {/if}
-              </div>
-              :</span
-            >
-            {#if is_edit_mode}
-              <Popover manager={manager?.val?.[key]?.edit_key_popover_manager}>
-                {#snippet content()}
-                  <TextInput manager={manager?.val?.[key]?.edit_key_text_input_manager} />
-                  <Button manager={manager?.val?.[key]?.edit_key_delete_button_manager} />
-                {/snippet}
-                {#snippet footer()}
-                  <Button manager={manager?.val?.[key]?.edit_key_finish_button_manager} />
-                {/snippet}
-              </Popover>
-            {/if}
-            <Self manager={manager?.val?.[key]?.json_prepped} {is_edit_mode} />
-            <br />
-          </div>
-        {/each}
-      {/if}
-      {#if is_edit_mode}
-        <div style="display: inline;">
-          <Button manager={manager?.add_item_button_manager} />
-        </div>
-      {/if}
-    </div>
-    <span style="color: {bracket_color}; ">{"}"} </span>
-  {/if}
-{:else if manager?.type == "array"}
-  <span>
-    <span style="vertical-align: middle; color: {bracket_color};">{"["}</span>
-    <div style="display: inline-block; vertical-align: middle;">
-      <button
-        style="width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; padding:0; border-radius:.5rem; background:var(--shadow2-t); border:1px solid var(--shadow8-t); cursor:pointer; line-height:1; "
-        onclick={manager?.toggle_is_collapsed}>{manager?.is_collapsed ? "+" : "-"}</button
-      >
-    </div>
-    <span style="vertical-align: middle; color: {bracket_color};">
-      {manager?.is_collapsed ? "]" : ""}
-    </span>
-  </span>
-  {#if !manager?.is_collapsed}
-    <div style="padding-left: {manager?.indentation}rem; border-left: var(--shadow8-t) solid 1px;">
-      {#if manager?.val && Array.isArray(manager?.val)}
-        {#each manager?.val as child}
-          <div>
-            <Self manager={child?.json_prepped} {is_edit_mode} />
-          </div>
-        {/each}
-      {/if}
-      {#if is_edit_mode}
-        <div style="display: inline;">
-          <Button manager={manager?.add_item_button_manager} />
-        </div>
-      {/if}
-    </div>
-    <span style="color: {bracket_color}; "
-      >{"]"}
-      {@render edit_content()}</span
-    >
-  {/if}
-{:else if manager?.type == "boolean"}
-  <span style="color: {boolean_color}; "
-    >{manager?.val}
-    {@render edit_content()}</span
-  >
-{:else if manager?.type == "number"}
-  <span style="color: {number_color}; "
-    >{manager?.val}
-    {@render edit_content()}</span
-  >
-{:else if manager?.type == "string"}
-  <span style="color: {string_color};"
-    >"{manager?.val}"
-    {@render edit_content()}</span
-  >
-{:else if manager?.type == "null"}
-  <span style="color: {null_color}; font-style: italic; "
-    >null
-    {@render edit_content()}</span
-  >
-{/if}
-
-<style>
-  * {
-    line-height: 1.2;
-    font-size: 1.4rem;
-  }
-</style>

package/dist/Components/LabeledItem/index.svelte

@@ -1,102 +0,0 @@
-<script>
-  import Tooltip from "../Tooltip/index.svelte"
-
-  let {
-    label = "label",
-    tooltip = null,
-    is_required = false,
-    is_disabled = false,
-    font_weight = 500,
-    font_size = 1.6,
-    color = "var(--g4-t)",
-    disabled_color = "var(--g8-t)",
-    ml = 0,
-    mr = 0,
-    mt = 0,
-    mb = 0,
-    heading_min_width = 20,
-    content_min_width = 30,
-    content_max_width = 50,
-    children,
-  } = $props()
-</script>
-
-<div
-  class="container"
-  style="margin-left: {ml}rem; margin-right: {mr}rem; margin-top: {mt}rem; margin-bottom: {mb}rem;"
->
-  <div class="attr_label">
-    <h4
-      class:required={is_required}
-      class:is_disabled
-      style="color: {color}; font-weight: {font_weight}; font-size: {font_size}rem; --disabled_color: {disabled_color};--heading_min_width: {heading_min_width}rem;"
-    >
-      {label}:
-    </h4>
-    {#if tooltip}
-      <Tooltip>
-        {#snippet tooltip_content()}
-          <p>{tooltip}</p>
-        {/snippet}
-        {#snippet target_content()}
-          <div class="info_tooltip_icon">i</div>
-        {/snippet}
-      </Tooltip>
-    {/if}
-  </div>
-  <div class="item" style="--content_min_width: {content_min_width}rem; --content_max_width: {content_max_width}rem;">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-  .attr_label {
-    text-align: left;
-    margin-left: 0;
-    margin-right: 1rem;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    font-weight: 600;
-    color: var(--g12-t);
-    min-width: var(--heading_min_width);
-    display: flex;
-    gap: 0.5rem;
-  }
-  .info_tooltip_icon {
-    box-shadow: 0 0 0 1px var(--g6-t);
-    color: var(--g6-t);
-    border-radius: 2rem;
-    width: 1.6rem;
-    height: 1.6rem;
-    display: grid;
-    place-content: center;
-    font-size: 1.2rem;
-  }
-  .is_disabled {
-    color: var(--disabled_color, var(--g12-t, "gray"));
-  }
-  .required::after {
-    content: "*";
-    color: var(--g12-t);
-    margin-left: 2px;
-  }
-  .item {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    justify-content: end;
-    min-width: var(--content_min_width);
-    max-width: var(--content_max_width);
-    margin-right: 0;
-    margin-left: auto;
-  }
-</style>

package/dist/Components/Layout/NavBar/FullNav/index.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { fly } from "svelte/transition"
-
-  let { manager, full_nav } = $props()
-</script>
-
-{#if manager?.is_full_nav_shown}
-  <div
-    role="button"
-    tabindex="0"
-    class="underlay"
-    onwheel={(e) => e.stopPropagation()}
-    ontouchmove={(e) => e.stopPropagation()}
-    onclick={() => manager.set_is_full_nav_toggled_on(false)}
-    onkeydown={(event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        manager.set_is_full_nav_toggled_on(false)
-      }
-    }}
-  ></div>
-  <div
-    class="container"
-    style="height: {manager?.available_content_height + 1}px; top: {manager?.shown_nav_bar_height - 1}px;"
-    in:fly={{ duration: 300, x: -255, opacity: "100%" }}
-    out:fly={{ duration: 300, x: -255, opacity: "100%" }}
-  >
-    {#if full_nav}
-      {@render full_nav()}
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .underlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--shadow8);
-  }
-  .container {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 25rem;
-    z-index: 9;
-    border-right: 1px solid var(--shadow7-t);
-    background-color: var(--bg);
-    overflow: scroll;
-  }
-</style>

package/dist/Components/Layout/NavBar/NavGuts/index.svelte

@@ -1,87 +0,0 @@
-<script>
-  import Hamburger from "../../../Hamburger/index.svelte"
-
-  let { manager, logo, nav_bar_extra } = $props()
-
-  let nav_bar_width = $state(null)
-  let logo_width = $state(null)
-  let nav_links_width = $state(null)
-  let nav_hamburger_width = $state(null)
-
-  // let is_room_for_links = $derived(
-  //   nav_bar_width && logo_width && nav_links_width && nav_hamburger_width
-  //     ? nav_bar_width - logo_width - nav_links_width - nav_hamburger_width > 0
-  //     : true
-  // )
-  // class:hide_but_maintain_width={!is_room_for_links}
-</script>
-
-<div class="container" bind:offsetWidth={nav_bar_width}>
-  <div style="display: flex; align-items: center; gap: 1rem;">
-    {#if manager?.is_show_hamburger}
-      <div class="nav_hamburger" bind:offsetWidth={nav_hamburger_width}>
-        <Hamburger
-          val={manager.is_full_nav_toggled_on}
-          on_change={(input) => manager.set_is_full_nav_toggled_on(input)}
-        />
-      </div>
-    {/if}
-    <div
-      class="logo_container"
-      role="button"
-      tabindex="0"
-      onclick={() => manager.to_home()}
-      onkeydown={(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          manager.to_home()
-        }
-      }}
-      bind:offsetWidth={logo_width}
-    >
-      {#if logo}
-        {@render logo()}
-      {/if}
-    </div>
-  </div>
-  <div class="nav_links" bind:offsetWidth={nav_links_width}>
-    {#if nav_bar_extra}
-      {@render nav_bar_extra()}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex: 1;
-    overflow: scroll;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .logo_container {
-    display: flex;
-    align-self: center;
-    flex: 0;
-    padding: 0.1rem;
-    margin-right: 0.5rem;
-    min-height: 3rem;
-    min-width: fit-content;
-  }
-  .nav_links {
-    display: flex;
-    align-items: center;
-  }
-  /* .hide_but_maintain_width {
-    position: fixed;
-    top: 0;
-    left: 0;
-    visibility: hidden;
-    z-index: -1;
-  } */
-  .nav_hamburger {
-    display: flex;
-    align-items: center;
-    height: 3rem;
-    margin-left: 0.1rem;
-  }
-</style>

package/dist/Components/Layout/NavBar/index.svelte

@@ -1,72 +0,0 @@
-<script>
-  import NavGuts from "./NavGuts/index.svelte"
-  import FullNav from "./FullNav/index.svelte"
-
-  let { manager, logo, sub_bar, nav_bar_extra, full_nav } = $props()
-
-  let nav_bar_height_loc = $state(null)
-  $effect(() => {
-    manager.set_nav_bar_height(nav_bar_height_loc)
-  })
-</script>
-
-<div class="container">
-  <div class="navbar" bind:offsetHeight={nav_bar_height_loc}>
-    <div
-      class="navbar_body"
-      class:floated_nav={!manager?.is_at_top}
-      class:below_top={!manager?.is_at_top || manager?.is_full_nav_toggled_on}
-      class:flat_card={manager?.is_at_top}
-      style="--br: {manager?.border_radius}rem; --nav_margin_x: {manager?.nav_margin_x}rem; --nav_margin_top: {manager?.nav_margin_top}rem; --nav_margin_bottom: {manager?.nav_margin_bottom}rem;"
-    >
-      <div
-        class="mainbar"
-        style="--nav_main_padding_x: {manager?.nav_main_padding_x}rem; --nav_main_padding_y: {manager?.nav_main_padding_y}rem;"
-      >
-        <NavGuts {manager} {logo} {nav_bar_extra} />
-      </div>
-      {#if sub_bar}
-        {@render sub_bar()}
-      {/if}
-    </div>
-  </div>
-  <div class="full_nav">
-    <FullNav {manager} {full_nav} />
-  </div>
-</div>
-
-<style>
-  .container {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    flex: 0;
-  }
-  .navbar_body {
-    border-radius: var(--br);
-    margin: var(--nav_margin_top) var(--nav_margin_x) var(--nav_margin_bottom) var(--nav_margin_x);
-    min-height: 5rem;
-    padding: 0;
-    background-color: var(--bg);
-    border-bottom: 1px solid transparent;
-  }
-  .mainbar {
-    display: flex;
-    flex: 1;
-    padding: var(--nav_main_padding_y) var(--nav_main_padding_x);
-  }
-  .below_top {
-    border-bottom: 1px solid var(--shadow7-t);
-  }
-  /* .floated_nav {
-		box-shadow: 0 0.1rem 1rem var(--g2);
-	} */
-  .full_nav {
-    position: relative;
-    z-index: -1;
-  }
-</style>