sveltekit-ui 1.0.0

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

@@ -0,0 +1,143 @@
+<script>
+  import { create_unique_id } from "$lib/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/src/lib/Components/TransparentBackground/index.svelte

@@ -0,0 +1,153 @@
+<script>
+  import intersection_observer from "$lib/actions/intersection_observer.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/src/lib/Components/TypingDots/index.svelte

@@ -0,0 +1,84 @@
+<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/src/lib/Components/VariablePathInput/index.svelte

@@ -0,0 +1,109 @@
+<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 Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Icon from "$lib/Components/Icon/index.svelte"
+  import Spacer from "$lib/Components/Spacer/index.svelte"
+  import Self from './index.svelte'
+
+  let { manager } = $props()
+</script>
+
+{#snippet val_display()}
+  {#if Array.isArray(manager?.val)}
+    <div>
+      <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
+        [
+        {#if manager?.val.length < 1}
+          /
+        {:else}
+          {#each manager?.val as path_item, i}
+            {#if Array.isArray(path_item)}
+              [{path_item}]
+            {:else}
+              {path_item}
+            {/if}
+            {#if i < manager?.val.length - 1}
+              <div style="display: flex; align-items: center;">
+                <Icon manager={manager?.arrow_icon_manager} />
+              </div>
+            {/if}
+          {/each}
+        {/if}
+        ]
+      </div>
+    </div>
+  {:else}
+    <p style="color: var(--warning-t);">null</p>
+  {/if}
+{/snippet}
+
+{#snippet variable_path_input()}
+  <div>
+    <h4 class="label" style="margin: 0;">Data Type at Path</h4>
+    <p>{manager?.data_type_at_path?.type}</p>
+    {#if Array.isArray(manager?.val_prepped)}
+      <h4 class="label" style="margin: 0;">Val</h4>
+      {@render val_display()}
+      <Spacer mt={.5} mb={.5} />
+      <div style="display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;">
+        {#if manager?.val != null}
+          <Button manager={manager?.set_null_button_manager} />
+        {:else}
+          <Button manager={manager?.set_root_path_button_manager} />
+        {/if}
+        {#each manager?.val_prepped as path_item_prepped}
+          <Button manager={path_item_prepped?.remove_path_button_manager} />
+        {/each}
+      </div>
+    {/if}
+    <Spacer mt={.5} mb={.5} />
+    <h4 class="label" style="margin: 0;">Next Path Item Options</h4>
+    {#if manager?.is_allow_dynamic_path_item}
+      <Checkbox manager={manager?.is_dynamic_path_item_checkbox_manager} />
+      {#if manager?.is_dynamic_path_item_checkbox_manager?.val && manager?.next_path_variable_path_input_manager}
+        <Self manager={manager?.next_path_variable_path_input_manager} />
+      {/if}
+    {/if}
+    {#if !manager?.is_allow_dynamic_path_item || !manager?.is_dynamic_path_item_checkbox_manager?.val}
+      {#if manager?.next_path_options?.type == "loop"}
+        <TextInput manager={manager?.next_path_options?.number_input_manager} />
+        <Button manager={manager?.next_path_options?.add_path_item_button_manager} />
+      {:else if manager?.next_path_options?.type == "object_literal"}
+        {#if Array.isArray(manager?.next_path_options?.options) && manager?.next_path_options.options?.length > 0}
+          <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
+            {#each manager?.next_path_options?.options as option}
+              <Button manager={option?.option_button_manager} />
+            {/each}
+          </div>
+        {:else}
+          <p>No options found</p>
+        {/if}
+      {:else}
+        <p>No additional path item options found</p>
+      {/if}
+    {/if}
+  </div>
+{/snippet}
+
+{#if !manager?.is_popover}
+  {@render variable_path_input()}
+{:else}
+  {#if Array.isArray(manager?.val)}
+    <div style="display: flex; gap: .5rem;">
+      {@render val_display()}
+      <Button manager={manager?.small_popover_toggle_button_manager} />
+    </div>
+  {:else}
+    <Button manager={manager?.popover_toggle_button_manager} />
+  {/if}
+  <Popover manager={manager.popover_manager}>
+    {#snippet content()}
+      {@render variable_path_input()}
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.finish_button_manager} />
+    {/snippet}
+  </Popover>
+{/if}