sveltekit-ui 1.1.15 → 1.1.17

package/dist/Components/Tooltip/index.svelte

@@ -1,143 +0,0 @@
-<script>
-  import { create_unique_id } from "../../client/index.js"
-
-  let { tooltip_content, target_content, is_disabled = false } = $props()
-
-  let id = create_unique_id(null, 20)
-  let screen_width = $state(null)
-  let screen_height = $state(null)
-  let positions = $state(null)
-
-  function handle_pointer_enter() {
-    positions = calc_positions()
-  }
-
-  function calc_positions() {
-    let edge_forgiveness = 10
-    let target_width = 400
-    let target_height = 400
-    let modal_left_pos = "0"
-    let modal_top_pos = "0"
-    let container_el = document?.querySelector(`#container_${id}`)
-    if (container_el && !isNaN(screen_width) && !isNaN(screen_height)) {
-      let toggle_el = document?.querySelector(`#toggle_${id}`)
-      const base_rect = toggle_el.getBoundingClientRect()
-      let is_popover_cross_base_vertically = false
-      const space_remaining_below = screen_height - base_rect.bottom - edge_forgiveness - target_height
-      const space_remaining_above = base_rect.top - edge_forgiveness - target_height
-      if (space_remaining_below >= 0) {
-        modal_top_pos = base_rect.bottom - edge_forgiveness + "px"
-      } else if (space_remaining_above >= 0) {
-        modal_top_pos = base_rect.top - target_height + edge_forgiveness + "px"
-      } else {
-        modal_top_pos = (screen_height - target_height) / 2 + "px"
-        is_popover_cross_base_vertically = true
-      }
-      modal_left_pos = base_rect.left + "px"
-      let space_remaining_left = base_rect.left - target_width - edge_forgiveness
-      const space_remaining_right = screen_width - base_rect.right - target_width - edge_forgiveness
-      const space_remaining_left_to_end = screen_width - base_rect.left - target_width - edge_forgiveness
-      const space_remaining_right_to_start = base_rect.right - target_width - edge_forgiveness
-      if (is_popover_cross_base_vertically && space_remaining_right > 0) {
-        modal_left_pos = base_rect.right - edge_forgiveness + "px"
-      } else if (is_popover_cross_base_vertically && space_remaining_left > 0) {
-        modal_left_pos = base_rect.left - target_width + edge_forgiveness + "px"
-      } else if (!is_popover_cross_base_vertically && space_remaining_left_to_end < 0) {
-        modal_left_pos = screen_width - target_width - edge_forgiveness + "px"
-      } else if (space_remaining_left_to_end > 0) {
-        modal_left_pos = base_rect.left - edge_forgiveness + "px"
-      } else if (space_remaining_right_to_start > 0) {
-        modal_left_pos = base_rect.right - target_width + "px"
-      }
-      modal_left_pos = parseInt(modal_left_pos) + edge_forgiveness + "px"
-      modal_top_pos = parseInt(modal_top_pos) + edge_forgiveness + "px"
-    }
-    if (parseInt(modal_left_pos) < edge_forgiveness) {
-      modal_left_pos = edge_forgiveness + "px"
-    }
-    if (parseInt(modal_top_pos) < edge_forgiveness) {
-      modal_top_pos = edge_forgiveness + "px"
-    }
-    let max_height = screen_height - 2 * edge_forgiveness + "px"
-    if (parseInt(max_height) > target_height) {
-      max_height = target_height - 2 * edge_forgiveness + "px"
-    }
-    let max_width = target_width - 2 * edge_forgiveness + "px"
-    if (parseInt(max_width) > screen_width) {
-      max_width = screen_width - 2 * edge_forgiveness + "px"
-    }
-    return {
-      modal_left_pos,
-      modal_top_pos,
-      target_width,
-      target_height,
-      max_height: max_height,
-      max_width: max_width,
-      edge_forgiveness,
-    }
-  }
-</script>
-
-<svelte:window bind:innerWidth={screen_width} bind:innerHeight={screen_height} />
-
-<div id={`container_${id}`} class="container" class:is_disabled onpointerenter={() => handle_pointer_enter()}>
-  <div id={`toggle_${id}`}>
-    {#if target_content}
-      {@render target_content()}
-    {/if}
-  </div>
-  <div
-    id={`tooltip_${id}`}
-    class="tooltip"
-    style="
-      --modal_top_pos: {positions?.modal_top_pos}; 
-      --modal_left_pos: {positions?.modal_left_pos};
-      --target_width: {positions?.target_width}px;
-      --max_width: calc(100dvh - (2 * {positions?.edge_forgiveness}px));
-      --target_height: {positions?.target_height}px;
-      --max_width: {positions?.max_width};
-      --max_height: {positions?.max_height};"
-  >
-    {#if tooltip_content}
-      {@render tooltip_content()}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    position: relative;
-    display: inline-block;
-    cursor: help;
-  }
-  .tooltip {
-    position: fixed;
-    top: var(--modal_top_pos);
-    left: var(--modal_left_pos);
-    max-height: var(--max_height);
-    max-width: var(--max_width);
-    visibility: hidden;
-    opacity: 0;
-    transition:
-      visibility 0.2s,
-      opacity 0.2s,
-      transform 0.2s;
-    margin: 0;
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    background-color: oklch(var(--l23-t) var(--c1) var(--primary-h) / var(--o22));
-    border: 3px solid oklch(var(--l3-t) var(--c2) var(--primary-h) / var(--o24));
-    box-shadow: 0 0.2rem 2rem 0.5rem var(--shadow4-t);
-    overflow: scroll;
-    z-index: 11;
-  }
-  .container:hover .tooltip,
-  .container:focus .tooltip,
-  .container:active .tooltip {
-    visibility: visible;
-    opacity: 1;
-  }
-  .is_disabled .tooltip {
-    display: none;
-  }
-</style>

package/dist/Components/TransparentBackground/index.svelte

@@ -1,153 +0,0 @@
-<script>
-  import { intersection_observer } from "../../actions/index.js"
-
-  let { min_square_width = 10, max_square_width = 25, min_squares_per_row = 2, content } = $props()
-
-  let el = $state(null)
-
-  let child_width = $state(0)
-  let child_height = $state(0)
-  let border_radius = $state(0)
-  let square_count = $state(0)
-  let squares_per_row = $state(0)
-  let squares_per_col = $state(0)
-  let square_width = $state(0)
-
-  function resize_observer(node, callback) {
-    const observer = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        callback(entry.contentRect)
-      }
-    })
-    observer.observe(node)
-    return {
-      destroy() {
-        observer.unobserve(node)
-      },
-    }
-  }
-
-  function set_vals() {
-    const vals = calc_nums()
-    if (vals) {
-      child_width = vals.child_width
-      child_height = vals.child_height
-      squares_per_row = vals.squares_per_row
-      squares_per_col = vals.squares_per_col
-      square_width = vals.square_width
-      square_count = vals.square_count
-      border_radius = vals.border_radius
-    }
-  }
-
-  function calc_nums() {
-    let child_width = 0
-    let child_height = 0
-    let squares_per_row = min_squares_per_row
-    let squares_per_col = min_squares_per_row
-    let square_width = min_square_width
-    let square_count = 0
-    let border_radius = 0
-    if (!el || !el?.firstElementChild || !content) {
-      return
-    }
-    const rect = el?.firstElementChild.getBoundingClientRect()
-    const computed_style = window.getComputedStyle(el.firstElementChild)
-    border_radius = computed_style.borderRadius
-    child_width = rect?.width
-    child_height = rect?.height
-    const shorter_len = child_width < child_height ? child_width : child_height
-    square_width = Math.max(Math.min(shorter_len * 0.3, max_square_width), min_square_width)
-    let squares_per_shorter_len = Math.floor(shorter_len / square_width) + 1
-    if (squares_per_shorter_len < min_squares_per_row) {
-      squares_per_shorter_len = min_squares_per_row
-    }
-    square_width = shorter_len / squares_per_shorter_len
-    if (child_width < child_height) {
-      squares_per_row = squares_per_shorter_len
-      squares_per_col = Math.floor(child_height / square_width) + 1
-    } else {
-      squares_per_col = squares_per_shorter_len
-      squares_per_row = Math.floor(child_width / square_width) + 1
-    }
-    square_count = squares_per_row * squares_per_col
-    return {
-      squares_per_shorter_len,
-      child_width,
-      child_height,
-      squares_per_row,
-      squares_per_col,
-      square_width,
-      square_count,
-      border_radius,
-    }
-  }
-
-  function is_dark_square(n, x) {
-    let is_dark = n % 2
-    let is_offset_row = Math.floor(n / x) % 2 == 1
-    if (is_offset_row && x % 2 === 0) {
-      is_dark = !is_dark
-    }
-    return is_dark
-  }
-
-  function handle_resize() {
-    square_count = 0
-    setTimeout(() => {
-      set_vals()
-    }, 10)
-  }
-</script>
-
-<div
-  class="container"
-  bind:this={el}
-  use:intersection_observer
-  onappeared={() => set_vals()}
-  use:resize_observer={() => handle_resize()}
->
-  {#if child_width > 0 && child_height > 0 && square_count > 0}
-    <div
-      class="area_container"
-      style="
-        display: grid;
-        grid-template-columns: repeat({squares_per_row}, {square_width}px);
-        grid-template-rows: repeat({squares_per_col}, {square_width}px);
-        min-width: {child_width}px;
-        max-width: {child_width}px;
-        min-height: {child_height}px;
-        max-height: {child_height}px;
-        border-radius: {border_radius};"
-    >
-      {#each { length: square_count } as _, n}
-        <div
-          style="display: flex; background-color: {is_dark_square(n, squares_per_row) ? 'var(--g15)' : 'var(--g20)'};"
-        ></div>
-      {/each}
-    </div>
-  {/if}
-  {#if content}
-    {@render content()}
-  {/if}
-</div>
-
-<style>
-  .container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    z-index: 0;
-    overflow: hidden;
-  }
-  .area_container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: -1;
-    overflow: hidden;
-  }
-</style>

package/dist/Components/TypingDots/index.svelte

@@ -1,84 +0,0 @@
-<script>
-  let { color = "var(--g8-t)" } = $props()
-</script>
-
-<div class="container" style="--color: {color};">
-  <span></span>
-  <span></span>
-  <span></span>
-</div>
-
-<style>
-  .container {
-    display: inline-block;
-  }
-  .container span {
-    display: inline-block;
-    width: 0.3rem;
-    height: 0.3rem;
-    background-color: var(--color);
-    border-radius: 0.3rem;
-  }
-  .container span:nth-child(1) {
-    animation: typing_one 3s infinite;
-  }
-  .container span:nth-child(2) {
-    animation: typing_two 3s infinite;
-  }
-  .container span:nth-child(3) {
-    animation: typing_three 3s infinite;
-  }
-  @keyframes typing_one {
-    0% {
-      opacity: 0;
-    }
-    10% {
-      opacity: 0;
-    }
-    30% {
-      opacity: 1;
-    }
-    85% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @keyframes typing_two {
-    0% {
-      opacity: 0;
-    }
-    30% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    85% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @keyframes typing_three {
-    0% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 0;
-    }
-    70% {
-      opacity: 1;
-    }
-    85% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-</style>

package/dist/Components/VariablePathInput/index.svelte

@@ -1,63 +0,0 @@
-<script>
-  import Popover from "../Popover/index.svelte"
-  import Button from "../Button/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import Dropdown from "../Dropdown/index.svelte"
-  import Spacer from "../Spacer/index.svelte"
-  import Self from "./index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<Button manager={manager?.open_edit_button_manager} />
-<Popover manager={manager?.popover_manager}>
-  {#snippet content()}
-    <div>
-      {#if manager?.levels_nested}
-        <p>{manager?.levels_nested} levels nested</p>
-      {/if}
-      <p>{manager?.val_text}</p>
-      <Dropdown manager={manager?.def_dropdown_manager} />
-      {#if manager?.def_dropdown_manager?.val}
-        <p class="label">Path Items (optional)</p>
-        {#if Array.isArray(manager?.path_prepped) && manager?.path_prepped.length > 0}
-          {#each manager?.path_prepped as path_item}
-            <div>
-              <div style="display: flex; gap: 1rem">
-                <Button manager={path_item?.remove_path_item_button_manager} />
-                <Button manager={path_item?.insert_path_item_before_button_manager} />
-                <Dropdown manager={path_item?.type_dropdown_manager} />
-              </div>
-              {#if path_item?.type_dropdown_manager?.val == "variable"}
-                <div style="margin-top: 1rem;">
-                  <Self manager={path_item?.variable_path_input_manager} />
-                </div>
-              {:else if path_item?.type_dropdown_manager?.val == "string"}
-                <TextInput manager={path_item?.const_string_value_text_input_manager} />
-              {:else if path_item?.type_dropdown_manager?.val == "number"}
-                <TextInput manager={path_item?.const_number_value_text_input_manager} />
-              {/if}
-              {#if Array.isArray(path_item?.key_options)}
-                <div style="margin-top: 1rem;">
-                  <p class="label">Next Path Options</p>
-                  <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
-                    {#each path_item?.key_options as key_option}
-                      <Button manager={key_option?.select_button_manager} />
-                    {/each}
-                  </div>
-                </div>
-              {/if}
-            </div>
-            <Spacer mt={1} mb={1} />
-          {/each}
-        {:else}
-          <p>No Path Items</p>
-        {/if}
-        <Button manager={manager?.add_path_item_button_manager} />
-      {/if}
-    </div>
-  {/snippet}
-  {#snippet footer()}
-    <Button manager={manager?.finish_button_manager} />
-  {/snippet}
-</Popover>