sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Number/index.svelte.js

@@ -1,272 +0,0 @@
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
-import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
-import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
-import { set_closurable } from "$lib/client/index.js"
-
-export function create_number_config_manager(config) {
-  let data_type = $state("float_literal")
-  let popover_manager = $state(null)
-  let popover_toggle_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let val_text_input_manager = $state(null)
-  let val_defined_type_input_manager = $state(null)
-  let round_dropdown_manager = $state(null)
-  let shorthand_dropdown_manager = $state(null)
-  let separators_dropdown_manager = $state(null)
-  let base_color_manager = $state(null)
-  let start_color_manager = $state(null)
-  let end_color_manager = $state(null)
-  let is_percentage_checkbox_manager = $state(null)
-  let is_progress_bar_checkbox_manager = $state(null)
-  let is_hide_number_checkbox_manager = $state(null)
-  let is_tooltip_checkbox_manager = $state(null)
-  let is_dynamic_color_checkbox_manager = $state(null)
-  let round_text_input_manager = $state(null)
-  let progress_bar_start_text_input_manager = $state(null)
-  let progress_bar_end_text_input_manager = $state(null)
-
-  const number_base = {
-    val_from_variable_path: null,
-    val: null,
-    round: null,
-    round_by: 1,
-    shorthand: null,
-    is_percentage: false,
-    is_dynamic_color: false,
-    is_progress_bar: false,
-    is_hide_number: false,
-    base_color: null,
-    start_color: null,
-    end_color: null,
-    start_value: null,
-    end_value: null,
-    separators: null,
-    is_tooltip: false,
-  }
-
-  let val = $derived({
-    ...val_defined_type_input_manager?.val,
-    round: round_dropdown_manager?.val,
-    round_by: round_text_input_manager?.val,
-    shorthand: shorthand_dropdown_manager?.val,
-    is_percentage: is_percentage_checkbox_manager?.val,
-    is_dynamic_color: is_dynamic_color_checkbox_manager?.val,
-    is_progress_bar: is_progress_bar_checkbox_manager?.val,
-    is_hide_number: is_hide_number_checkbox_manager?.val,
-    base_color: base_color_manager?.val,
-    start_color: start_color_manager?.val,
-    end_color: end_color_manager?.val,
-    start_value: progress_bar_start_text_input_manager?.val,
-    end_value: progress_bar_end_text_input_manager?.val,
-    separators: separators_dropdown_manager?.val,
-    is_tooltip: is_tooltip_checkbox_manager?.val,
-  })
-
-  const round_options = [
-    { key: null, name: "None" },
-    { key: "nearest", name: "Nearest" },
-    { key: "floor", name: "Floor" },
-    { key: "ceil", name: "Ceil" },
-    { key: "precision", name: "Precision" },
-  ]
-  const shorthand_options = [
-    { key: null, name: "None" },
-    { key: "thousands", name: "Thousands (K)" },
-    { key: "millions", name: "Millions (M)" },
-    { key: "billions", name: "Billions (B)" },
-    { key: "trillions", name: "Trillions (T)" },
-    { key: "quadrillions", name: "Quadrillions (Qd)" },
-  ]
-
-  const separators_options = [
-    { key: null, name: "None" },
-    { key: "thousands_commas_period", name: "Commas/Period" },
-    { key: "thousands_periods_comma", name: "Periods/Comma" },
-  ]
-
-  function init(config) {
-    let val_loc = {}
-    for (let [key, value] of Object.entries(number_base)) {
-      val_loc[key] = config?.val?.[key] ?? value
-    }
-    popover_manager = create_popover_manager({
-      min_width: 320,
-      target_width: 400,
-      min_height: 320,
-      target_height: 400,
-      type: "center",
-      header: "Number Options Builder",
-      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
-    })
-    popover_toggle_button_manager = create_button_manager({
-      type: "outlined",
-      is_compressed: true,
-      text: "Edit Number Options",
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    val_text_input_manager = create_text_input_manager({
-      label: "Val",
-      type: "number",
-      val: val_loc?.val,
-    })
-    val_defined_type_input_manager = create_defined_type_input_manager({
-      label: "Val",
-      attribute_root_key: "val",
-      get_defined_options: config?.get_defined_options,
-      attribute_const_val: () => val_text_input_manager?.val,
-      attributes: config?.val,
-    })
-    round_dropdown_manager = create_dropdown_manager({
-      label: "Round",
-      is_button_compressed: true,
-      val: val_loc?.round,
-      options: round_options,
-    })
-    shorthand_dropdown_manager = create_dropdown_manager({
-      label: "Shorthand",
-      is_button_compressed: true,
-      val: val_loc?.shorthand,
-      options: shorthand_options,
-    })
-    separators_dropdown_manager = create_dropdown_manager({
-      label: "Separators",
-      is_button_compressed: true,
-      val: val_loc?.separators,
-      options: separators_options,
-    })
-    base_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      val: val_loc?.base_color,
-    })
-    start_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      val: val_loc?.start_color,
-    })
-    end_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      val: val_loc?.end_color,
-    })
-    is_percentage_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Percentage",
-      val: val_loc?.is_percentage,
-    })
-    is_progress_bar_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Progress Bar",
-      val: val_loc?.is_progress_bar,
-    })
-    is_hide_number_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Hide Number",
-      val: val_loc?.is_hide_number,
-    })
-    is_tooltip_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Tooltip",
-      val: val_loc?.is_tooltip,
-    })
-    is_dynamic_color_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Dynamic Color",
-      val: val_loc?.is_dynamic_color,
-    })
-    round_text_input_manager = create_text_input_manager({
-      type: "number",
-      label: val_loc?.round == "precision" ? "Significant Figures" : "Round By",
-      placeholder: 5,
-      val: val_loc?.round_by,
-    })
-    progress_bar_start_text_input_manager = create_text_input_manager({
-      type: "number",
-      label: "Start Value",
-      placeholder: 0,
-      val: val_loc?.start_value,
-    })
-    progress_bar_end_text_input_manager = create_text_input_manager({
-      type: "number",
-      label: "End Value",
-      placeholder: 0,
-      val: val_loc?.end_value,
-    })
-    finish_button_manager = create_button_manager({
-      text: "Finish",
-      on_click: () => finish(),
-    })
-  }
-
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-    get data_type() {
-      return data_type
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get popover_toggle_button_manager() {
-      return popover_toggle_button_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    get val_text_input_manager() {
-      return val_text_input_manager
-    },
-    get val_defined_type_input_manager() {
-      return val_defined_type_input_manager
-    },
-    get round_dropdown_manager() {
-      return round_dropdown_manager
-    },
-    get shorthand_dropdown_manager() {
-      return shorthand_dropdown_manager
-    },
-    get separators_dropdown_manager() {
-      return separators_dropdown_manager
-    },
-    get base_color_manager() {
-      return base_color_manager
-    },
-    get start_color_manager() {
-      return start_color_manager
-    },
-    get end_color_manager() {
-      return end_color_manager
-    },
-    get is_percentage_checkbox_manager() {
-      return is_percentage_checkbox_manager
-    },
-    get is_progress_bar_checkbox_manager() {
-      return is_progress_bar_checkbox_manager
-    },
-    get is_hide_number_checkbox_manager() {
-      return is_hide_number_checkbox_manager
-    },
-    get is_tooltip_checkbox_manager() {
-      return is_tooltip_checkbox_manager
-    },
-    get is_dynamic_color_checkbox_manager() {
-      return is_dynamic_color_checkbox_manager
-    },
-    get round_text_input_manager() {
-      return round_text_input_manager
-    },
-    get progress_bar_start_text_input_manager() {
-      return progress_bar_start_text_input_manager
-    },
-    get progress_bar_end_text_input_manager() {
-      return progress_bar_end_text_input_manager
-    },
-  }
-}

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Qr/index.svelte

@@ -1,41 +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 DefinedTypeInput from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<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} />
-<DefinedTypeInput manager={manager?.data_defined_type_input_manager} >
-  {#snippet content()}
-    <TextInput manager={manager?.data_text_input_manager} />
-  {/snippet}
-</DefinedTypeInput>
-<TextInput manager={manager?.image_text_input_manager} />
-

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Qr/index.svelte.js

@@ -1,202 +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_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
-
-export function create_qr_config_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 data_defined_type_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 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_defined_type_input_manager?.val,
-    image: image_text_input_manager?.val,
-  })
-
-  function init(config) {
-    margin_slider_manager = create_slider_manager({
-      label: "Margin",
-      min: 0,
-      max: 20,
-      step: 1,
-      val: config?.val?.margin ?? 10,
-    })
-    size_slider_manager = create_slider_manager({
-      label: "Size",
-      min: 50,
-      max: 1000,
-      step: 1,
-      val: config?.val?.size ?? 200,
-    })
-    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: 5,
-      step: 0.5,
-      val: config?.val?.border_radius ?? 2,
-    })
-    border_width_slider_manager = create_slider_manager({
-      label: "Border Width",
-      min: 0,
-      max: 5,
-      step: 1,
-      val: config?.val?.border_width ?? 1,
-    })
-    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,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      val: config?.val?.color ?? null,
-    })
-    corner_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      val: config?.val?.corner_color ?? null,
-    })
-    background_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      val: config?.val?.background_color ?? null,
-    })
-    border_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      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({
-      val: config?.val?.data ?? "https://www.sveltekit-ui.com",
-    })
-    data_defined_type_input_manager = create_defined_type_input_manager({
-      label: "Data",
-      attribute_root_key: "data",
-      attribute_const_val: () => data_text_input_manager?.val,
-      get_defined_options: config?.get_defined_options,
-      attributes: config?.val,
-    })
-    image_text_input_manager = create_text_input_manager({
-      type: "url",
-      label: "Image Url",
-      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>`,
-    })
-  }
-
-  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 data_defined_type_input_manager() {
-      return data_defined_type_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
-    },
-  }
-}

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Slider/index.svelte

@@ -1,19 +0,0 @@
-<script>
-  import ColorInput from "$lib/Components/ColorInput/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import Slider from "$lib/Components/Slider/index.svelte"
-  import DefinedTypeInput from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<TextInput manager={manager?.min_text_input_manager} />
-<TextInput manager={manager?.max_text_input_manager} />
-<TextInput manager={manager?.step_text_input_manager} />
-<ColorInput manager={manager?.color_input_manager} />
-<Slider manager={manager?.val_count_slider_manager} />
-<DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
-  {#snippet content()}
-    <Slider manager={manager?.val_slider_manager} />
-  {/snippet}
-</DefinedTypeInput>

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Slider/index.svelte.js

@@ -1,117 +0,0 @@
-import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
-import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
-import { deep_copy, set_closurable } from "$lib/client/index.js"
-
-export function create_slider_config_manager(config) {
-  let val_slider_manager = $state(null)
-  let min_text_input_manager = $state(null)
-  let max_text_input_manager = $state(null)
-  let step_text_input_manager = $state(null)
-  let color_input_manager = $state(null)
-  let val_count_slider_manager = $state(1)
-  let val_defined_type_input_manager = $state(null)
-
-  let val = $derived({
-    ...val_defined_type_input_manager?.val,
-    min: min_text_input_manager?.val,
-    max: max_text_input_manager?.val,
-    step: step_text_input_manager?.val,
-    color: color_input_manager?.val,
-  })
-
-  function set_val_amount(input) {
-    let val_loc = null
-    if (input > 1) {
-      val_loc = []
-      for (let i = 0; i < input; i++) {
-        val_loc.push(
-          Array.isArray(val_slider_manager?.val) && val_slider_manager?.val.length > i
-            ? val_slider_manager?.val[i]
-            : min_text_input_manager?.val
-        )
-      }
-    }
-    val_slider_manager.set_val(deep_copy(val_loc))
-  }
-
-  function init(config) {
-    min_text_input_manager = create_text_input_manager({
-      type: "number",
-      label: "Min",
-      placeholder: "minimum",
-      val: config?.val?.min ?? 0,
-      on_change: (input) => val_slider_manager?.set_min(input),
-    })
-    max_text_input_manager = create_text_input_manager({
-      type: "number",
-      label: "Max",
-      placeholder: "maximum",
-      val: config?.val?.max ?? 10,
-      on_change: (input) => val_slider_manager?.set_max(input),
-    })
-    step_text_input_manager = create_text_input_manager({
-      type: "number",
-      label: "Step",
-      placeholder: "step",
-      val: config?.val?.step ?? null,
-      on_change: (input) => val_slider_manager?.set_step(input),
-    })
-    val_count_slider_manager = create_slider_manager({
-      label: "Tab Count",
-      val: Array.isArray(config?.val?.val) ? config?.val?.val.length : 1,
-      min: 1,
-      max: 5,
-      step: 1,
-      on_change: (input) => set_val_amount(input),
-    })
-    color_input_manager = create_color_input_manager({
-      label: "Color",
-      val: config?.val?.color ?? null,
-    })
-    val_slider_manager = create_slider_manager({
-      val: config?.val?.val ?? min_text_input_manager?.val ?? null,
-      min: min_text_input_manager?.val ?? 0,
-      max: max_text_input_manager?.val ?? 10,
-      step: step_text_input_manager?.val ?? 1,
-      is_nullable: true,
-      color: () => color_input_manager?.val,
-    })
-    val_defined_type_input_manager = create_defined_type_input_manager({
-      label: "Val",
-      attribute_root_key: "val",
-      attributes: config?.val,
-      get_defined_options: config?.get_defined_options,
-      attribute_const_val: () => val_slider_manager?.val,
-    })
-  }
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-    get min_text_input_manager() {
-      return min_text_input_manager
-    },
-    get max_text_input_manager() {
-      return max_text_input_manager
-    },
-    get step_text_input_manager() {
-      return step_text_input_manager
-    },
-    get color_input_manager() {
-      return color_input_manager
-    },
-    get val_count_slider_manager() {
-      return val_count_slider_manager
-    },
-    get val_slider_manager() {
-      return val_slider_manager
-    },
-    get val_defined_type_input_manager() {
-      return val_defined_type_input_manager
-    },
-  }
-}