sveltekit-ui 1.0.0

package/src/lib/Components/ImageSlider/index.svelte

@@ -0,0 +1,124 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Icon from "$lib/Components/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/src/lib/Components/ImageSlider/index.svelte.js

@@ -0,0 +1,99 @@
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_unique_id, set_closurable } from "$lib/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/src/lib/Components/InfoBox/index.svelte

@@ -0,0 +1,89 @@
+<script>
+  import { fade } from "svelte/transition"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/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/src/lib/Components/Json/Nested/index.svelte

@@ -0,0 +1,157 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Self from "./index.svelte"
+  import { color_var } from "$lib/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/src/lib/Components/Json/index.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import FileInput from "$lib/Components/FileInput/index.svelte"
+  import Nested from "$lib/Components/Json/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}