sveltekit-ui 1.1.15 → 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/InfoBox/index.svelte

@@ -1,89 +0,0 @@
-<script>
-  import { fade } from "svelte/transition"
-  import Button from "../Button/index.svelte"
-  import { create_button_manager } from "../Button/index.svelte.js"
-
-  let {
-    h = 1,
-    message = null,
-    link_name = null,
-    link = null,
-    is_cancelable = true,
-    br = 1,
-    ml = 0,
-    mr = 0,
-    mt = 0,
-    mb = 0,
-  } = $props()
-
-  let button_manager = create_button_manager({
-    type: "outlined",
-    support_icon: "x",
-    icon_size: 1.6,
-    icon_sw: 60,
-    is_uniform: true,
-    h: h,
-    c: 5,
-    l: 5,
-    min_height: 2.5,
-    ml: 0,
-    mr: 0,
-    mt: 0,
-    mb: 0,
-    on_click: () => (message = null),
-  })
-</script>
-
-{#if message}
-  <div
-    class="container"
-    style="--h: var(--h{h}); --br: {br}rem; --ml: {ml}rem; --mr: {mr}rem; --mt: {mt}rem; --mb: {mb}rem;"
-    transition:fade={{ duration: 100 }}
-  >
-    <p>
-      {message}
-      {#if link && link_name}
-        <a href={link} class="click_text">
-          {link_name}
-        </a>
-      {/if}
-    </p>
-    {#if is_cancelable}
-      <Button manager={button_manager} />
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .container {
-    background-color: oklch(var(--l16-t) var(--c10) var(--h));
-    border: 1px solid oklch(var(--l11-t) var(--c8) var(--h));
-    border-radius: var(--br);
-    margin-left: var(--ml);
-    margin-right: var(--mr);
-    margin-top: var(--mt);
-    margin-bottom: var(--mb);
-    padding: 0.6rem 0.6rem 0.6rem 1rem;
-    text-align: start;
-    display: flex;
-    flex: 1;
-    justify-content: space-between;
-    max-height: 20rem;
-    overflow-y: scroll;
-  }
-  .container p {
-    color: oklch(var(--l4-t) var(--c4) var(--h));
-    font-weight: 500;
-  }
-  .container a {
-    color: var(--g4-t);
-    font-weight: 500;
-  }
-  .click_text {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-  .click_text:hover {
-    color: var(--g3-t);
-  }
-</style>

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/Json/index.svelte

@@ -1,60 +0,0 @@
-<script>
-  import Popover from "../Popover/index.svelte"
-  import Button from "../Button/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import FileInput from "../FileInput/index.svelte"
-  import Nested from "./Nested/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#snippet main_content()}
-  {#if manager?.is_show_buttons}
-    <div style="display: flex; flex-wrap: wrap;">
-      <Button manager={manager?.collapse_all_button_manager} />
-      <Button manager={manager?.expand_all_button_manager} />
-      <Button manager={manager?.copy_json_button_manager} />
-      {#if manager?.is_edit_mode}
-        <div>
-          <FileInput manager={manager?.file_input_manager} />
-        </div>
-        <div>
-          <Button manager={manager?.edit_json_button_manager} />
-          <Popover manager={manager?.data_upload_popover_manager}>
-            {#snippet content()}
-              <div>
-                <TextInput manager={manager?.data_text_input_manager} />
-              </div>
-            {/snippet}
-            {#snippet footer()}
-              <Button manager={manager?.finish_data_upload_button_manager} />
-            {/snippet}
-          </Popover>
-        </div>
-      {/if}
-    </div>
-  {/if}
-  <Nested manager={manager?.json_prepped} is_edit_mode={manager?.is_edit_mode} />
-{/snippet}
-
-{#if manager?.label}
-  <div style="display: inline-flex;">
-    {#if manager?.label}
-      <p class="label">{manager?.label}:</p>
-    {/if}
-  </div>
-{/if}
-
-{#if !manager?.is_popover}
-  {@render main_content()}
-{:else}
-  <Button manager={manager?.popover_toggle_button_manager} />
-  <Popover manager={manager.popover_manager}>
-    {#snippet content()}
-      {@render main_content()}
-    {/snippet}
-    {#snippet footer()}
-      <Button manager={manager?.finish_button_manager} />
-    {/snippet}
-  </Popover>
-{/if}