sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/Popover/index.svelte.js

@@ -1,319 +0,0 @@
-import { create_unique_id, set_closurable, set_closurable_color } from "$lib/client/index.js"
-import { create_button_manager } from "$lib/Components/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,
-  }
-}

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

@@ -1,85 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import InfoBox from "$lib/Components/InfoBox/index.svelte"
-  import { onMount } from "svelte"
-
-  let { manager } = $props()
-
-  onMount(() => {
-    if (typeof manager?.on_mount == "function") {
-      manager?.on_mount()
-    }
-  })
-</script>
-
-<div style="display: flex; flex-direction: column; gap: .5rem;">
-  <div
-    class="qr_wrap"
-    style="--base: {manager?.size}px; --scale: {manager?.scale}; --target: calc(var(--base) * var(--scale));"
-  >
-    <div class="qr_fit">
-      <div
-        class="qr_container"
-        style="
-        width: var(--base);
-        height: var(--base);
-        background-color: {manager?.background_color};
-        border-radius: {manager?.border_radius}rem;
-        box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};
-      "
-      >
-        <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
-        {#if !manager?.is_loaded}
-          <div class="load"><LoadingWheel color={"var(--g14-t)"} sw={0.4} /></div>
-        {/if}
-      </div>
-    </div>
-  </div>
-  {#if manager?.is_show_copy}
-    <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
-      <span
-        style="margin: 0; padding: 0 1rem; display: grid; place-content: center; border-radius: 1rem; border: 1px solid var(--shadow4-t);"
-        >{manager?.data}</span
-      >
-      <Button manager={manager?.copy_button_manager} />
-    </div>
-  {/if}
-  {#if manager?.is_show_download}
-    <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
-      <Dropdown manager={manager?.extention_dropdown_manager} />
-      <Button manager={manager?.download_button_manager} />
-    </div>
-  {/if}
-  <InfoBox message={manager?.error_message} />
-</div>
-
-<style>
-  .qr_container {
-    aspect-ratio: 1;
-    overflow: hidden;
-    display: grid;
-    grid-template-areas: "stack";
-  }
-  .qr_wrap {
-    width: var(--target);
-    height: var(--target);
-    position: relative;
-  }
-  .qr_fit {
-    position: absolute;
-    inset: 0;
-    width: var(--base);
-    height: var(--base);
-    transform: scale(var(--scale));
-    transform-origin: top left;
-  }
-  .load {
-    grid-area: stack;
-    width: 50%;
-    height: 50%;
-    margin: auto;
-  }
-</style>

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

@@ -1,47 +0,0 @@
-<script>
-  import Popover from "$lib/Components/Popover/index.svelte"
-  import Button from "$lib/Components/Button/index.svelte"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-  import Slider from "$lib/Components/Slider/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import ColorInput from "$lib/Components/ColorInput/index.svelte"
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-  import Qr from "$lib/Components/Qr/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div style="display: grid;  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1rem;">
-  <div>
-    <Slider manager={manager?.margin_slider_manager} />
-    <Slider manager={manager?.size_slider_manager} />
-    <Slider manager={manager?.image_size_slider_manager} />
-    <h3 class="label" style="margin: 0;">Type Number</h3>
-    <p style="font-size: 1.2rem;">The amount of squares used. 0 is auto.</p>
-    <Slider manager={manager?.type_number_slider_manager} />
-    <Slider manager={manager?.border_radius_slider_manager} />
-    <Slider manager={manager?.border_width_slider_manager} />
-    <h3 class="label" style="margin: 0;">Error Correction Level</h3>
-    <p style="font-size: 1.2rem;">Amount of data repetition in case part of Qr is not visable.</p>
-    <Dropdown manager={manager?.error_correction_level_dropdown_manager} />
-    <h3 class="label" style="margin: 0;">Color</h3>
-    <ColorInput manager={manager?.color_manager} />
-    <h3 class="label" style="margin: 0;">Corner Color</h3>
-    <ColorInput manager={manager?.corner_color_manager} />
-    <h3 class="label" style="margin: 0;">Background Color</h3>
-    <ColorInput manager={manager?.background_color_manager} />
-    <h3 class="label" style="margin: 0;">Border Color</h3>
-    <ColorInput manager={manager?.border_color_manager} />
-    <Checkbox manager={manager?.is_show_copy_checkbox_manager} />
-    <Checkbox manager={manager?.is_show_download_checkbox_manager} />
-    <TextInput manager={manager?.data_text_input_manager} />
-    <TextInput manager={manager?.image_text_input_manager} />
-  </div>
-  <div style="border: 1px solid var(--shadow4-t); border-radius: 1rem; padding: 1rem;">
-    <h2>Result</h2>
-    <Button manager={manager?.set_changes_button_manager} />
-    <div>
-      <Qr manager={manager?.qr_manager} />
-    </div>
-  </div>
-</div>

package/src/lib/Components/QrInput/index.svelte.js

@@ -1,218 +0,0 @@
-import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
-import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
-import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_qr_manager } from "$lib/Components/Qr/index.svelte.js"
-
-export function create_qr_input_manager(config) {
-  let margin_slider_manager = $state(null)
-  let size_slider_manager = $state(null)
-  let image_size_slider_manager = $state(null)
-  let type_number_slider_manager = $state(null)
-  let border_radius_slider_manager = $state(null)
-  let border_width_slider_manager = $state(null)
-  let error_correction_level_dropdown_manager = $state(null)
-  let color_manager = $state(null)
-  let corner_color_manager = $state(null)
-  let background_color_manager = $state(null)
-  let border_color_manager = $state(null)
-  let data_text_input_manager = $state(null)
-  let image_text_input_manager = $state(null)
-  let is_show_copy_checkbox_manager = $state(null)
-  let is_show_download_checkbox_manager = $state(null)
-  let set_changes_button_manager = $state(null)
-  let qr_manager = $state(null)
-
-  let val = $derived({
-    margin: margin_slider_manager?.val,
-    size: size_slider_manager?.val,
-    image_size: image_size_slider_manager?.val,
-    type_number: type_number_slider_manager?.val,
-    border_radius: border_radius_slider_manager?.val,
-    border_width: border_width_slider_manager?.val,
-    error_correction_level: error_correction_level_dropdown_manager?.val,
-    color: color_manager?.val,
-    corner_color: corner_color_manager?.val,
-    background_color: background_color_manager?.val,
-    border_color: border_color_manager?.val,
-    is_show_copy: is_show_copy_checkbox_manager?.val,
-    is_show_download: is_show_download_checkbox_manager?.val,
-    data: data_text_input_manager?.val,
-    image: image_text_input_manager?.val,
-  })
-
-  function set_changes() {
-    qr_manager.update({ ...val, display_size: 280 })
-  }
-
-  function init(config) {
-    margin_slider_manager = create_slider_manager({
-      label: "Margin",
-      min: 0,
-      max: 100,
-      step: 1,
-      val: config?.val?.margin ?? 40,
-    })
-    size_slider_manager = create_slider_manager({
-      label: "Size",
-      min: 100,
-      max: 2000,
-      step: 1,
-      val: config?.val?.size ?? 1000,
-    })
-    image_size_slider_manager = create_slider_manager({
-      label: "Image Size",
-      min: 0,
-      max: 1,
-      step: 0.05,
-      val: config?.val?.image_size ?? 0.5,
-    })
-    type_number_slider_manager = create_slider_manager({
-      min: 0,
-      max: 40,
-      step: 1,
-      val: config?.val?.type_number ?? 0,
-    })
-    border_radius_slider_manager = create_slider_manager({
-      label: "Border Radius",
-      min: 0,
-      max: 50,
-      step: 1,
-      val: config?.val?.border_radius ?? 10,
-    })
-    border_width_slider_manager = create_slider_manager({
-      label: "Border Width",
-      min: 0,
-      max: 10,
-      step: 1,
-      val: config?.val?.border_width ?? 5,
-    })
-    error_correction_level_dropdown_manager = create_dropdown_manager({
-      is_button_compressed: true,
-      options: [
-        { key: "L", name: "L" },
-        { key: "M", name: "M" },
-        { key: "Q", name: "Q" },
-        { key: "H", name: "H" },
-      ],
-      val: config?.val?.error_correction_level ?? "Q",
-    })
-    color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.color ?? null,
-    })
-    corner_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.corner_color ?? null,
-    })
-    background_color_manager = create_color_input_manager({
-      is_show_opacity: true,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.background_color ?? null,
-    })
-    border_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.border_color ?? null,
-    })
-    is_show_copy_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Is Show Copy",
-      val: config?.val?.is_show_copy ?? true,
-    })
-    is_show_download_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Is Show Download",
-      val: config?.val?.is_show_download ?? true,
-    })
-    data_text_input_manager = create_text_input_manager({
-      label: "Data",
-      val: config?.val?.data ?? "https://www.sveltekit-ui.com",
-    })
-    image_text_input_manager = create_text_input_manager({
-      type: "text",
-      label: "Image Url / SVG",
-      val:
-        config?.val?.image ??
-        `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 512 512">
-  <path id="part-2" fill="#1c82ff" fill-rule="nonzero" d="M400.3 328.6c0 22-5.6 41.7-17 59.2a113 113 0 0 1-49.6 41.2 186 186 0 0 1-77.6 14.8c-35.8 0-65.4-6.7-88.7-20.3-16.5-9.7-30-22.7-40.3-39a88.6 88.6 0 0 1-15.4-47.5c0-8.9 3-16.5 9.3-22.9 6.1-6.4 14-9.5 23.6-9.5a28 28 0 0 1 19.7 7.4c5.4 5 10 12.3 13.8 22 4.6 11.6 9.6 21.3 15 29 5.3 7.8 12.9 14.2 22.6 19.3q14.7 7.5 38.4 7.5c21.8 0 39.6-5 53.2-15.2a45.8 45.8 0 0 0 20.4-38c0-12.1-3.6-22-11-29.4a71 71 0 0 0-28.5-17.3 490 490 0 0 0-46.7-12.6c-26.1-6.1-48-13.2-65.5-21.4a106 106 0 0 1-42-33.5 86.8 86.8 0 0 1-15.4-52.6c0-20 5.4-37.8 16.4-53.3a103 103 0 0 1 47.3-35.8c20.6-8.4 45-12.5 72.8-12.5 22.3 0 41.6 2.7 57.9 8.3a122 122 0 0 1 40.5 22 92 92 0 0 1 23.5 28.9c5 10 7.5 19.9 7.5 29.5 0 8.7-3.1 16.6-9.3 23.6s-14 10.6-23.2 10.6q-12.6 0-19.2-6.3a85 85 0 0 1-14.2-20.7 94 94 0 0 0-23.8-32.1c-9.3-7.7-24.1-11.5-44.6-11.5-19 0-34.3 4.1-46 12.5-11.6 8.3-17.5 18.3-17.5 30 0 7.3 2 13.6 6 19a50 50 0 0 0 16.3 13.5c7 3.8 14 6.8 21.1 9 7.1 2.1 18.8 5.2 35.2 9.4 20.5 4.8 39 10 55.6 15.8a169 169 0 0 1 42.4 21.1 86.6 86.6 0 0 1 27.3 31.3c6.5 12.7 9.7 28.2 9.7 46.5"/>
-</svg>`,
-    })
-    qr_manager = create_qr_manager({ ...val, display_size: 280 })
-    set_changes_button_manager = create_button_manager({
-      c: 1,
-      l: 0,
-      mb: 2,
-      text: "Set Changes",
-      is_compressed: true,
-      on_click: () => set_changes(),
-    })
-  }
-
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-    get margin_slider_manager() {
-      return margin_slider_manager
-    },
-    get size_slider_manager() {
-      return size_slider_manager
-    },
-    get image_size_slider_manager() {
-      return image_size_slider_manager
-    },
-    get type_number_slider_manager() {
-      return type_number_slider_manager
-    },
-    get border_radius_slider_manager() {
-      return border_radius_slider_manager
-    },
-    get border_width_slider_manager() {
-      return border_width_slider_manager
-    },
-    get error_correction_level_dropdown_manager() {
-      return error_correction_level_dropdown_manager
-    },
-    get color_manager() {
-      return color_manager
-    },
-    get corner_color_manager() {
-      return corner_color_manager
-    },
-    get background_color_manager() {
-      return background_color_manager
-    },
-    get border_color_manager() {
-      return border_color_manager
-    },
-    get data_text_input_manager() {
-      return data_text_input_manager
-    },
-    get image_text_input_manager() {
-      return image_text_input_manager
-    },
-    get is_show_copy_checkbox_manager() {
-      return is_show_copy_checkbox_manager
-    },
-    get is_show_download_checkbox_manager() {
-      return is_show_download_checkbox_manager
-    },
-    get set_changes_button_manager() {
-      return set_changes_button_manager
-    },
-    get qr_manager() {
-      return qr_manager
-    },
-  }
-}