sveltekit-ui 1.0.0

package/dist/Components/Popover/index.svelte

@@ -0,0 +1,396 @@
+<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

@@ -0,0 +1,319 @@
+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,
+  }
+}