sveltekit-ui 1.1.15 → 1.1.17

package/dist/Components/Popover/index.svelte

@@ -1,396 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import LoadingSuccessDiv from "../LoadingSuccessDiv/index.svelte"
-  // import { onDestroy } from 'svelte';
-
-  let { manager, content, content_alt, header, footer } = $props()
-
-  let scroll_top = $state(null)
-  let scroll_bottom = $state(null)
-  function handle_content_scroll(e) {
-    scroll_top = e?.target?.scrollTop
-    scroll_bottom = e?.target?.scrollHeight - (e?.target.scrollTop + e?.target.clientHeight)
-  }
-
-  // onDestroy(() => { look into this later
-  //   console.log('onDestroyPopover')
-  //   manager?.close()
-  // })
-</script>
-
-<svelte:window onscroll={() => manager?.handle_screen_change()} onresize={() => manager?.handle_screen_change()} />
-
-<div
-  id={`popover_${manager?.id}`}
-  popover={manager?.popover_type}
-  onbeforetoggle={(e) => manager?.handle_before_toggle(e)}
-  class:type_dropdown={manager?.positioning?.type_to_use === "dropdown"}
-  class:type_full={manager?.positioning?.type_to_use === "full"}
-  class:type_right_panel={manager?.positioning?.type_to_use === "panel" && manager?.panel_side != "left"}
-  class:type_left_panel={manager?.positioning?.type_to_use === "panel" && manager?.panel_side == "left"}
-  class:type_center={manager?.positioning?.type_to_use === "center"}
-  class:type_center_lftb={manager?.positioning?.type_to_use === "center" && !manager?.corner}
-  class:panel_backdrop={["full", "panel"].includes(manager?.positioning?.type_to_use)}
-  class:corner_tl={manager?.positioning?.type_to_use === "center" && manager?.corner == "tl"}
-  class:corner_tr={manager?.positioning?.type_to_use === "center" && manager?.corner == "tr"}
-  class:corner_bl={manager?.positioning?.type_to_use === "center" && manager?.corner == "bl"}
-  class:corner_br={manager?.positioning?.type_to_use === "center" && manager?.corner == "br"}
-  style="
-    --popover_top_pos: {manager?.positioning?.popover_top_pos}px; 
-    --popover_left_pos: {manager?.positioning?.popover_left_pos}px;
-    --min_width: {manager?.positioning?.min_width}px;
-    --target_width: {manager?.positioning?.target_width}px;
-    --max_width: calc(100dvw - (2 * {manager?.positioning?.edge_forgiveness}px));
-    --min_height: {manager?.positioning?.min_height}px;
-    --target_height: {manager?.target_height ? `${manager?.positioning?.target_height}px` : 'fit-content'};
-    --max_height: {manager?.positioning?.max_height
-    ? `${manager?.positioning?.max_height ?? manager?.screen_height - 20}px`
-    : `calc(100% - (2 * ${manager?.edge_forgiveness ?? 20}px))`};
-    --pt: {manager?.pt}rem; 
-    --pl: {manager?.pl}rem; 
-    --pr: {manager?.pr}rem;
-    --pb: {manager?.pb}rem;
-    --br: {manager?.border_radius}rem; 
-    --background_color: {manager?.background_color}; 
-    --border_color: {manager?.border_color};
-    --drop_color: {manager?.drop_color};
-    --edge_forgiveness: {manager?.positioning?.edge_forgiveness ?? 20}px;
-  "
->
-  <div
-    onscroll={(e) => handle_content_scroll(e)}
-    class="content_container"
-    style="
-    --header_bg_color: oklch(from var(--background_color) l c h / {scroll_top ? 0.9 : 0});
-    --header_border_color: {scroll_top ? 'var(--border_color)' : 'transparent'};
-    --footer_bg_color:  oklch(from var(--background_color) l c h / {scroll_bottom ? 0.9 : 0});
-    --footer_border_color: {scroll_bottom ? 'var(--border_color)' : 'transparent'};
-    "
-  >
-    {#if manager?.temp_message}
-      <LoadingSuccessDiv show_screen={manager?.temp_message?.icon} message={manager?.temp_message?.message} />
-    {:else if manager?.is_show_alt_content && content_alt}
-      {@render content_alt()}
-    {:else}
-      <div class="header_and_content">
-        {#if manager?.header}
-          <div class="header">
-            <h3 style="font-size: {manager?.header_font_size}rem;">{manager?.header}</h3>
-          </div>
-        {:else if header}
-          <div class="header">
-            {@render header()}
-          </div>
-        {/if}
-        <div
-          class="content"
-          style="padding: {manager?.header || header
-            ? 0
-            : manager?.pt}rem {manager?.pr}rem {manager?.pb}rem {manager?.pl}rem;"
-        >
-          {#if content}
-            {@render content(manager?.toggle_modal)}
-          {/if}
-        </div>
-      </div>
-      {#if footer}
-        <div class="footer">
-          {@render footer(manager?.toggle_modal)}
-        </div>
-      {/if}
-    {/if}
-  </div>
-  {#if manager?.is_show_x && !manager?.is_non_closable}
-    <div class="x_box" style="--br_offset: .2rem;">
-      <Button manager={manager?.x_button_manager} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  [popover] {
-    margin: 0;
-    padding: 0;
-    width: fit-content;
-    height: fit-content;
-    background-color: var(--background_color);
-  }
-  [popover]:popover-open {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
-    opacity: 1;
-  }
-  .type_dropdown {
-    position: fixed;
-    top: var(--popover_top_pos);
-    left: var(--popover_left_pos);
-    bottom: auto;
-    right: auto;
-    min-width: var(--min_width);
-    width: var(--target_width);
-    max-width: var(--max_width);
-    min-height: var(--min_height);
-    height: var(--target_height);
-    max-height: var(--max_height);
-    box-shadow: 0 0 1rem var(--drop_color);
-    border-radius: var(--br);
-    border: 1px solid var(--border_color);
-    opacity: 0;
-    transition:
-      opacity 0.3s,
-      overlay 0.3s allow-discrete,
-      display 0.3s allow-discrete;
-  }
-  .type_dropdown:popover-open {
-    opacity: 1;
-  }
-  @starting-style {
-    .type_dropdown:popover-open {
-      opacity: 0;
-    }
-  }
-  .corner_bl {
-    left: var(--edge_forgiveness);
-    right: auto;
-    top: auto;
-    bottom: var(--edge_forgiveness);
-  }
-  .corner_br {
-    left: auto;
-    right: var(--edge_forgiveness);
-    top: auto;
-    bottom: var(--edge_forgiveness);
-  }
-  .corner_tl {
-    left: var(--edge_forgiveness);
-    right: auto;
-    top: var(--edge_forgiveness);
-    bottom: auto;
-  }
-  .corner_tr {
-    left: auto;
-    right: var(--edge_forgiveness);
-    top: var(--edge_forgiveness);
-    bottom: auto;
-  }
-  .type_center_lftb {
-    top: var(--popover_top_pos);
-    left: 50%;
-    bottom: auto;
-    right: auto;
-    transform: translateX(-50%);
-  }
-  .type_center {
-    position: fixed;
-    border-radius: var(--br);
-    border: 1px solid var(--border_color);
-    min-width: var(--min_width);
-    width: var(--target_width);
-    max-width: var(--max_width);
-    min-height: var(--min_height);
-    height: var(--target_height);
-    max-height: var(--max_height);
-    box-shadow: 0 1rem 5rem var(--drop_color);
-    opacity: 0;
-    transition:
-      opacity 0.5s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_center:popover-open {
-    opacity: 1;
-  }
-  .type_center::backdrop {
-    background-color: transparent;
-    transition:
-      display 0s allow-discrete,
-      overlay 0s allow-discrete,
-      background-color 0.5s;
-  }
-  .type_center:popover-open::backdrop {
-    background-color: var(--shadow3-t);
-  }
-  @starting-style {
-    .type_center:popover-open {
-      opacity: 0;
-    }
-    .type_center:popover-open::backdrop {
-      background-color: transparent;
-    }
-  }
-  .type_full {
-    position: fixed;
-    top: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 1px solid var(--border_color);
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-width: 0;
-    box-shadow: 0 1rem 5rem var(--drop_color);
-    width: 100vw;
-    min-height: var(--min_height) !important;
-    height: var(--target_height);
-    max-height: 90dvh;
-    transform: translateY(100%);
-    transition:
-      transform 0.7s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_full:popover-open {
-    transform: translateY(0);
-  }
-  @starting-style {
-    .type_full:popover-open {
-      transform: translateY(100%);
-    }
-  }
-
-  .type_right_panel {
-    position: fixed;
-    left: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    border-left: 1px solid var(--border_color);
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-right-width: 0;
-    border-radius: 0;
-    box-shadow: 0 0 5rem var(--drop_color);
-    height: 100dvh;
-    min-width: var(--min_width) !important;
-    width: var(--target_width);
-    max-width: 90dvw;
-    transform: translateX(100%);
-    transition:
-      transform 0.7s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_right_panel:popover-open {
-    transform: translateX(0);
-  }
-  @starting-style {
-    .type_right_panel:popover-open {
-      transform: translateX(100%);
-    }
-  }
-
-  .type_left_panel {
-    position: fixed;
-    right: auto;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    border-right: 1px solid var(--border_color);
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0;
-    border-radius: 0;
-    box-shadow: 0 0 5rem var(--drop_color);
-    height: 100dvh;
-    min-width: var(--min_width);
-    width: var(--target_width);
-    max-width: 90dvw;
-    transform: translateX(-100%);
-    transition:
-      transform 0.7s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_left_panel:popover-open {
-    transform: translateX(0);
-  }
-  @starting-style {
-    .type_left_panel:popover-open {
-      transform: translateX(-100%);
-    }
-  }
-
-  .panel_backdrop::backdrop {
-    background-color: transparent;
-    transition:
-      display 0s allow-discrete,
-      overlay 0s allow-discrete,
-      background-color 0.5s ease 0.3s;
-  }
-  .panel_backdrop:popover-open::backdrop {
-    background-color: var(--shadow3-t);
-    transition:
-      display 0s allow-discrete,
-      overlay 0s allow-discrete,
-      background-color 0.5s;
-  }
-  @starting-style {
-    .panel_backdrop:popover-open::backdrop {
-      background-color: transparent;
-    }
-  }
-
-  .content_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    flex: 1;
-    width: 100%;
-    overflow: scroll;
-  }
-  .header_and_content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-  .header {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    text-align: center;
-    margin: 0;
-    border-radius: 0;
-    padding: var(--pt) var(--pr) 0 var(--pl);
-    border: none;
-    transition:
-      background-color 0.7s,
-      border-bottom 0.7s;
-    background-color: var(--header_bg_color);
-    border-bottom: 1px solid var(--header_border_color);
-  }
-  .content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-  .footer {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    border: none;
-    border-radius: 0;
-    text-align: center;
-    margin-top: 0.5rem;
-    padding: 1rem var(--pr) var(--pb) var(--pl);
-    transition:
-      background-color 0.7s,
-      border-top 0.7s;
-    background-color: var(--footer_bg_color);
-    border-top: 1px solid var(--footer_border_color);
-  }
-  .x_box {
-    position: absolute;
-    top: var(--br_offset);
-    right: var(--br_offset);
-    z-index: 2;
-  }
-</style>

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

@@ -1,319 +0,0 @@
-import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-
-export function create_popover_manager(config) {
-  const id = create_unique_id(null, 20)
-  let type = $derived(set_closurable(config?.type, "center")) // dropdown, center, full
-  let anchor_id = $derived(set_closurable(config?.anchor_id, null))
-  let pt = $derived(set_closurable(config?.pt, 1))
-  let pb = $derived(set_closurable(config?.pb, 1))
-  let pl = $derived(set_closurable(config?.pl, 1))
-  let pr = $derived(set_closurable(config?.pr, 1))
-  let min_width = $derived(set_closurable(config?.min_width, 50))
-  let min_height = $derived(set_closurable(config?.min_height, 50))
-  let target_width = $derived(set_closurable(config?.target_width, 400))
-  let target_height = $derived(set_closurable(config?.target_height, type == "dropdown" ? null : 400))
-  let max_width = $derived(set_closurable(config?.max_width, null))
-  let max_height = $derived(set_closurable(config?.max_height, null))
-  let edge_forgiveness = $derived(set_closurable(config?.edge_forgiveness, 10))
-  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
-  let is_show_x = $derived(set_closurable(config?.is_show_x, true))
-  let border_radius = $derived(set_closurable(config?.border_radius, 2))
-  let background_color = $derived(set_closurable_color(config?.background_color, "var(--bg)"))
-  let border_color = $derived(set_closurable_color(config?.border_color, "var(--shadow5-t)"))
-  let contrast_color = $derived(set_closurable_color(config?.contrast_color, "var(--g14-t)"))
-  let drop_color = $derived(set_closurable_color(config?.drop_color, "var(--shadow8)"))
-  let header = $derived(set_closurable(config?.header, null))
-  let header_font_size = $derived(set_closurable(config?.header_font_size, 2))
-  let is_alt_content_shown = $derived(set_closurable(config?.is_alt_content_shown, false))
-  let corner = $derived(set_closurable(config?.corner, null))
-  let panel_side = $derived(set_closurable(config?.panel_side, "right"))
-  let can_swipe_close = $derived(set_closurable(config?.can_swipe_close, false))
-  let is_non_closable = $derived(set_closurable(config?.is_non_closable, false))
-
-  let popover_type = $derived(set_closurable(config?.popover_type, "auto")) // auto or manual
-  let positioning = $state(null)
-  let is_show = $state(false)
-
-  let x_button_manager = create_button_manager({
-    type: "plain",
-    support_icon: "x",
-    l: 8,
-    is_icon_bg_tint: false,
-    icon_size: 1.6,
-    icon_sw: 50,
-    is_uniform: true,
-    border_radius: () => border_radius * 0.6,
-    on_click: () => close(),
-  })
-
-  let temp_message = $state(null)
-  function show_temp_message(message, icon = "success", ms = 1800, is_close_on_end = true, on_finish) {
-    temp_message = {
-      message,
-      icon,
-    }
-    setTimeout(() => {
-      if (is_close_on_end) {
-        close()
-        setTimeout(() => {
-          temp_message = null
-        }, 300)
-      } else {
-        temp_message = null
-      }
-      if (typeof on_finish == "function") {
-        on_finish()
-      }
-    }, ms)
-  }
-
-  function handle_screen_change() {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      return
-    }
-    const popover_el = document?.querySelector(`#popover_${id}`)
-    const is_popover_open = popover_el?.matches(":popover-open")
-    if (is_popover_open) {
-      positioning = calc_positions()
-    }
-  }
-
-  function open() {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      return
-    }
-    const popover_el = document?.querySelector(`#popover_${id}`)
-    if (popover_el) {
-      popover_el.showPopover()
-      is_show = true
-    }
-  }
-
-  function close() {
-    if (typeof window === "undefined" || typeof document === "undefined" || is_non_closable) {
-      return
-    }
-    const popover_el = document?.querySelector(`#popover_${id}`)
-    if (popover_el) {
-      popover_el.hidePopover()
-      is_show = false
-    }
-  }
-
-  function toggle() {
-    if (typeof window === "undefined" || typeof document === "undefined" || (is_non_closable && is_show)) {
-      return
-    }
-    const popover_el = document?.querySelector(`#popover_${id}`)
-    if (popover_el) {
-      popover_el.togglePopover()
-    }
-  }
-
-  function handle_before_toggle(e) {
-    if (is_show && is_non_closable) {
-      e.preventDefault()
-    }
-    is_show = e?.newState === "open"
-    if (e?.newState === "open") {
-      positioning = calc_positions()
-      if (config?.on_open) {
-        config?.on_open()
-      }
-    } else {
-      if (config?.on_close) {
-        config?.on_close()
-      }
-    }
-  }
-
-  function calc_positions() {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      return null
-    }
-    const screen_width = window?.innerWidth
-    const screen_height = window?.innerHeight
-    let type_to_use =
-      min_width && screen_width && screen_width < min_width + 2 * edge_forgiveness && type != "panel" ? "full" : type
-    let popover_left_pos = "0"
-    let popover_top_pos = "0"
-    let popover_el = document?.querySelector(`#popover_${id}`)
-    if (popover_el && !isNaN(screen_width) && !isNaN(screen_height)) {
-      let anchor_el = document?.querySelector(anchor_id ? `#${anchor_id}` : `#anchor_el_${id}`) // if button toggle el diff than popover el use this is on toggle button
-      const base_rect =
-        type_to_use == "dropdown" && !!anchor_el
-          ? anchor_el.getBoundingClientRect()
-          : popover_el.getBoundingClientRect()
-      type_to_use =
-        ((target_width >= screen_width && screen_width <= target_width) ||
-          (target_height >= screen_height && screen_height <= target_height)) &&
-        type != "panel"
-          ? "full"
-          : type_to_use
-      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) {
-        popover_top_pos = base_rect.bottom - edge_forgiveness
-      } else if (space_remaining_above >= 0) {
-        popover_top_pos = base_rect.top - target_height + edge_forgiveness
-      } else {
-        popover_top_pos = (screen_height - target_height) / 2
-        is_popover_cross_base_vertically = true
-      }
-      popover_left_pos = base_rect.left
-      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) {
-        popover_left_pos = base_rect.right - edge_forgiveness
-      } else if (is_popover_cross_base_vertically && space_remaining_left > 0) {
-        popover_left_pos = base_rect.left - target_width + edge_forgiveness
-      } else if (!is_popover_cross_base_vertically && space_remaining_left_to_end < 0) {
-        popover_left_pos = screen_width - target_width - edge_forgiveness
-      } else if (space_remaining_left_to_end > 0) {
-        popover_left_pos = base_rect.left - edge_forgiveness
-      } else if (space_remaining_right_to_start > 0) {
-        popover_left_pos = base_rect.right - target_width
-      }
-      if (type_to_use == "center") {
-        popover_left_pos = (screen_width - target_width) / 2
-        popover_top_pos = (screen_height - target_height) / 2
-      } else if (type_to_use == "dropdown") {
-        popover_left_pos = parseInt(popover_left_pos) + edge_forgiveness
-        popover_top_pos = parseInt(popover_top_pos) + edge_forgiveness
-      }
-    }
-    if (parseInt(target_height) > screen_height) {
-      return {
-        type_to_use: "full",
-        popover_left_pos,
-        popover_top_pos: 0,
-        min_width,
-        max_width,
-        target_width,
-        target_height: screen_height - 2 * edge_forgiveness,
-        min_height: screen_height - 2 * edge_forgiveness,
-        max_height: screen_height - 2 * edge_forgiveness,
-        edge_forgiveness,
-      }
-    }
-    return {
-      type_to_use,
-      popover_left_pos,
-      popover_top_pos,
-      min_width,
-      max_width,
-      target_width,
-      target_height,
-      min_height,
-      max_height,
-      edge_forgiveness,
-    }
-  }
-
-  // function handledown_overflow_swipe() {
-  //   if (positioning?.type_to_use === "full" && can_swipe_close) {
-  //     toggle()
-  //   }
-  // }
-
-  function init(config) {
-    // tbd
-  }
-
-  init(config)
-
-  return {
-    id,
-    get type() {
-      return type
-    },
-    get popover_type() {
-      return popover_type
-    },
-    get anchor_id() {
-      return anchor_id
-    },
-    get pt() {
-      return pt
-    },
-    get pb() {
-      return pb
-    },
-    get pl() {
-      return pl
-    },
-    get pr() {
-      return pr
-    },
-    get positioning() {
-      return positioning
-    },
-    get is_disabled() {
-      return is_disabled
-    },
-    get is_show_x() {
-      return is_show_x
-    },
-    get border_radius() {
-      return border_radius
-    },
-    get background_color() {
-      return background_color
-    },
-    get border_color() {
-      return border_color
-    },
-    get contrast_color() {
-      return contrast_color
-    },
-    get drop_color() {
-      return drop_color
-    },
-    get header() {
-      return header
-    },
-    get header_font_size() {
-      return header_font_size
-    },
-    get is_alt_content_shown() {
-      return is_alt_content_shown
-    },
-    get corner() {
-      return corner
-    },
-    get panel_side() {
-      return panel_side
-    },
-    get can_swipe_close() {
-      return can_swipe_close
-    },
-    get is_non_closable() {
-      return is_non_closable
-    },
-    get target_width() {
-      return target_width
-    },
-    get target_height() {
-      return target_height
-    },
-    get x_button_manager() {
-      return x_button_manager
-    },
-    get temp_message() {
-      return temp_message
-    },
-    get is_show() {
-      return is_show
-    },
-    handle_screen_change,
-    open,
-    close,
-    toggle,
-    handle_before_toggle,
-    show_temp_message,
-  }
-}