sveltekit-ui 1.0.0

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

@@ -0,0 +1,185 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+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_icon_input_manager } from "$lib/Components/IconInput/index.svelte.js"
+import { create_conditions_input_manager } from "$lib/Components/ConditionsInput/index.svelte.js"
+import { create_tag_manager } from "$lib/Components/Tag/index.svelte.js"
+import { deep_copy } from "$lib/client/index.js"
+
+export function create_tag_config_input_manager(config) {
+  let val_loc = $state(null)
+  let data_type = $state(null)
+  let tag_option_to_add_popover_manager = $state(null)
+  let tag_option_to_add_popover_toggle_button_manager = $state(null)
+  let tag_option_to_add_color_input_manager = $state(null)
+  let tag_option_to_add_text_text_input_manager = $state(null)
+  let tag_option_to_add_match_for = $state(null) // tbd
+  let tag_option_to_add_icon_input_manager = $state(null)
+  let tag_option_to_add_conditions_input_manager = $state(null)
+  let tag_option_to_add_finish_button_manager = $state(null)
+
+  let edit_tag_i = $state(-1)
+  let derived_tag_option_to_add = $derived(get_derived_tag_option_to_add())
+  let tag_option_to_add_manager = $state(null)
+
+  let val = $derived(val_loc) // tbd
+
+  function get_derived_tag_option_to_add() {
+    return {
+      display_text: tag_option_to_add_text_text_input_manager?.val,
+      color: tag_option_to_add_color_input_manager?.val,
+      icon: tag_option_to_add_icon_input_manager?.val,
+      match_for: {}, // tbd
+      // match_for: {
+      //   type: "operator",
+      //   operator: "all_of",
+      //   conditions: [{ type: "predicate", predicate: "equal_to", value: "" }],
+      // },
+    }
+  }
+
+  function preempt_add_tag_option() {
+    tag_option_to_add_popover_manager.open()
+    edit_tag_i = -1
+    tag_option_to_add_text_text_input_manager?.set_val(null)
+    tag_option_to_add_color_input_manager?.set_val(null)
+    tag_option_to_add_icon_input_manager?.set_icon(null)
+    tag_option_to_add_manager.set_val(derived_tag_option_to_add)
+  }
+
+  function add_tag_option() {
+    console.log("add_tag_option444", { edit_tag_i, derived_tag_option_to_add })
+    if (edit_tag_i > -1) {
+      val[edit_tag_i] = derived_tag_option_to_add
+      edit_tag_i = -1
+    } else {
+      val_loc = [...(Array.isArray(val) ? val : []), derived_tag_option_to_add]
+    }
+    tag_option_to_add_popover_manager.close()
+  }
+
+  function edit_tag(i) {
+    edit_tag_i = i
+    tag_option_to_add_text_text_input_manager?.set_val(val[i]?.display_text)
+    tag_option_to_add_color_input_manager?.set_val(val[i]?.color)
+    tag_option_to_add_icon_input_manager?.set_icon(val[i]?.icon)
+    tag_option_to_add_manager.set_val(derived_tag_option_to_add)
+    tag_option_to_add_popover_manager.open()
+  }
+
+  let derived_tag_options = $derived(get_derived_tag_options())
+  function get_derived_tag_options() {
+    let derived_tag_options_loc = []
+    if (Array.isArray(val) && val.length > 0) {
+      for (let i = 0; i < val.length; i++) {
+        derived_tag_options_loc.push({
+          tag_manager: create_tag_manager({ val: val?.[i] }),
+          remove_button_manager: create_button_manager({
+            type: "outlined",
+            support_icon: "x",
+            is_uniform: true,
+            on_click: () => (val = [...val].filter((_, index) => index !== i)),
+          }),
+          edit_button_manager: create_button_manager({
+            type: "outlined",
+            support_icon: "edit",
+            is_uniform: true,
+            on_click: () => edit_tag(i),
+          }),
+        })
+      }
+    }
+    return derived_tag_options_loc
+  }
+
+  function init(config) {
+    val_loc = config?.val
+    data_type = config?.data_type
+    tag_option_to_add_popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 400,
+      min_height: 320,
+      target_height: 400,
+      type: "center",
+      header: "Tag Option Builder",
+      anchor_id: () => `button_${tag_option_to_add_popover_toggle_button_manager?.id}`,
+    })
+    tag_option_to_add_popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Add Tag Option",
+      is_compressed: true,
+      h: 11,
+      l: 3,
+      c: 1,
+      support_icon: "plus",
+      on_click: () => preempt_add_tag_option(),
+    })
+    tag_option_to_add_color_input_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: derived_tag_option_to_add?.color,
+    })
+    tag_option_to_add_text_text_input_manager = create_text_input_manager({
+      label: "Display Text",
+      val: derived_tag_option_to_add?.display_text,
+      placeholder: "Some Tag",
+    })
+    tag_option_to_add_icon_input_manager = create_icon_input_manager({
+      is_icon_only: true,
+      val: derived_tag_option_to_add?.icon,
+    })
+    tag_option_to_add_conditions_input_manager = create_conditions_input_manager({
+      data_type: data_type,
+      val: derived_tag_option_to_add?.match_for,
+      on_finish: (input) => (tag_option_to_add_match_for = input),
+    })
+    tag_option_to_add_finish_button_manager = create_button_manager({
+      text: "Set Tab Option",
+      on_click: () => add_tag_option(),
+    })
+    tag_option_to_add_manager = create_tag_manager({ val: derived_tag_option_to_add })
+  }
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get tag_option_to_add_popover_toggle_button_manager() {
+      return tag_option_to_add_popover_toggle_button_manager
+    },
+    get derived_tag_option_to_add() {
+      return derived_tag_option_to_add
+    },
+    get tag_option_to_add_popover_manager() {
+      return tag_option_to_add_popover_manager
+    },
+    get tag_option_to_add_manager() {
+      return tag_option_to_add_manager
+    },
+    get tag_option_to_add_color_input_manager() {
+      return tag_option_to_add_color_input_manager
+    },
+    get tag_option_to_add_match_for() {
+      return tag_option_to_add_match_for
+    },
+    get tag_option_to_add_text_text_input_manager() {
+      return tag_option_to_add_text_text_input_manager
+    },
+    get tag_option_to_add_icon_input_manager() {
+      return tag_option_to_add_icon_input_manager
+    },
+    get tag_option_to_add_finish_button_manager() {
+      return tag_option_to_add_finish_button_manager
+    },
+    get tag_option_to_add_conditions_input_manager() {
+      return tag_option_to_add_conditions_input_manager
+    },
+    get derived_tag_options() {
+      return derived_tag_options
+    },
+    init,
+    edit_tag,
+  }
+}

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

@@ -0,0 +1,35 @@
+<script>
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/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>
+
+<Dropdown manager={manager?.type_dropdown_manager} />
+<TextInput manager={manager?.name_text_input_manager} />
+<TextInput manager={manager?.placeholder_text_input_manager} />
+<TextInput manager={manager?.replace_spaces_with_text_input_manager} />
+<Checkbox manager={manager?.is_numbers_only_checkbox_manager} />
+<Checkbox manager={manager?.is_text_hidable_checkbox_manager} />
+{#if manager?.is_text_hidable_checkbox_manager?.val}
+  <Checkbox manager={manager?.is_text_hidden_checkbox_manager} />
+{/if}
+<TextInput manager={manager?.max_length_text_input_manager} />
+<Checkbox manager={manager?.is_resizable_checkbox_manager} />
+{#if manager?.type_dropdown_manager?.val == "number"}
+  <TextInput manager={manager?.min_text_input_manager} />
+  <TextInput manager={manager?.max_text_input_manager} />
+{/if}
+{#if manager?.type_dropdown_manager?.val == "text_area"}
+  <Checkbox manager={manager?.is_show_limit_checkbox_manager} />
+  <Slider manager={manager?.rows_slider_manager} />
+  <Slider manager={manager?.max_height_slider_manager} />
+{/if}
+<DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
+  {#snippet content()}
+    <TextInput manager={manager?.val_text_input_manager} />
+  {/snippet}
+</DefinedTypeInput>

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

@@ -0,0 +1,224 @@
+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_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 { create_unique_id, deep_copy, set_closurable } from "$lib/client/index.js"
+
+export function create_text_input_config_manager(config) {
+  let val_text_input_manager = $state(null)
+  let val_defined_type_input_manager = $state(null)
+  let type_dropdown_manager = $state(null)
+  let name_text_input_manager = $state(null)
+  let placeholder_text_input_manager = $state(null)
+  let replace_spaces_with_text_input_manager = $state(null)
+  let is_numbers_only_checkbox_manager = $state(null)
+  let is_text_hidable_checkbox_manager = $state(null)
+  let is_text_hidden_checkbox_manager = $state(null)
+  let max_length_text_input_manager = $state(null)
+  let min_text_input_manager = $state(null)
+  let max_text_input_manager = $state(null)
+  let is_resizable_checkbox_manager = $state(null)
+  let is_show_limit_checkbox_manager = $state(null)
+  let rows_slider_manager = $state(null)
+  let max_height_slider_manager = $state(null)
+
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+
+  let val = $derived({
+    ...val_defined_type_input_manager?.val,
+    type: type_dropdown_manager?.val,
+    name: name_text_input_manager?.val,
+    placeholder: placeholder_text_input_manager?.val,
+    replace_spaces_with: replace_spaces_with_text_input_manager?.val,
+    is_numbers_only: is_numbers_only_checkbox_manager?.val,
+    is_text_hidable: is_text_hidable_checkbox_manager?.val,
+    is_text_hidden: is_text_hidden_checkbox_manager?.val,
+    max_length: max_length_text_input_manager?.val,
+    min: min_text_input_manager?.val,
+    max: max_text_input_manager?.val,
+    is_resizable: is_resizable_checkbox_manager?.val,
+    is_show_limit: is_show_limit_checkbox_manager?.val,
+    rows: rows_slider_manager?.val,
+    max_height: max_height_slider_manager?.val,
+  })
+
+  function init(config) {
+    type_dropdown_manager = create_dropdown_manager({
+      val: config?.val?.type ?? "text",
+      is_button_compressed: true,
+      options: [
+        { key: "text", name: "Text" },
+        { key: "text_area", name: "Text Area" },
+        { key: "email", name: "Email" },
+        { key: "password", name: "Password" },
+        { key: "number", name: "Number" },
+        { key: "tel", name: "Telephone" },
+        { key: "url", name: "URL" },
+        { key: "search", name: "Search" },
+      ],
+      on_item_click: (input) => val_text_input_manager.set_type(input?.key),
+    })
+    name_text_input_manager = create_text_input_manager({
+      label: "Name",
+      placeholder: "Name",
+      val: config?.val?.name,
+      on_change: (input) => val_text_input_manager.set_name(input),
+    })
+    placeholder_text_input_manager = create_text_input_manager({
+      label: "Placeholder",
+      placeholder: "placeholder",
+      val: config?.val?.placeholder,
+    })
+    replace_spaces_with_text_input_manager = create_text_input_manager({
+      label: "Replace Spaces With",
+      placeholder: "Replace Spaces With",
+      val: config?.val?.replace_spaces_with,
+    })
+    is_numbers_only_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Numbers Only",
+      val: config?.val?.is_numbers_only,
+      on_change: (input) => val_text_input_manager.set_is_numbers_only(input),
+    })
+    is_text_hidable_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Text Hidable",
+      val: config?.val?.is_text_hidable,
+      on_change: (input) => val_text_input_manager.set_is_text_hidable(input),
+    })
+    is_text_hidden_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Text Hidden",
+      val: config?.val?.is_text_hidden,
+      on_change: (input) => val_text_input_manager.set_is_text_hidden(input),
+    })
+    max_length_text_input_manager = create_text_input_manager({
+      label: "Max Length",
+      placeholder: "max length",
+      val: config?.val?.max_length,
+      on_change: (input) => val_text_input_manager.set_max_length(input),
+    })
+    min_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Min",
+      placeholder: "minimum",
+      val: config?.val?.min ?? 0,
+      on_change: (input) => val_text_input_manager.set_min(input),
+    })
+    max_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Max",
+      placeholder: "maximum",
+      val: config?.val?.max ?? 1000000,
+      on_change: (input) => val_text_input_manager.set_max(input),
+    })
+    is_resizable_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Resizable",
+      val: config?.val?.is_resizable,
+      on_change: (input) => val_text_input_manager.set_is_resizable(input),
+    })
+    is_show_limit_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Show Limit",
+      val: config?.val?.is_show_limit,
+      on_change: (input) => val_text_input_manager.set_is_show_limit(input),
+    })
+    rows_slider_manager = create_slider_manager({
+      label: "Rows",
+      min: 2,
+      max: 50,
+      step: 1,
+      val: config?.val?.rows ?? 5,
+      on_change: (input) => val_text_input_manager.set_rows(input),
+    })
+    max_height_slider_manager = create_slider_manager({
+      label: "Max Height",
+      val: config?.val?.max_height ?? null,
+      min: 10,
+      max: 500,
+      step: 1,
+      on_change: (input) => val_text_input_manager.set_max_height(input),
+    })
+    val_text_input_manager = create_text_input_manager({
+      placeholder: () => placeholder_text_input_manager?.val ?? "val",
+      replace_spaces_with: () => replace_spaces_with_text_input_manager?.val ?? null,
+      val: config?.val?.val,
+      type: type_dropdown_manager?.val,
+      name: name_text_input_manager?.val,
+      is_numbers_only: is_numbers_only_checkbox_manager?.val,
+      is_text_hidable: is_text_hidable_checkbox_manager?.val,
+      is_text_hidden: is_text_hidden_checkbox_manager?.val,
+      max_length: max_length_text_input_manager?.val,
+      min: min_text_input_manager?.val,
+      max: max_text_input_manager?.val,
+      is_resizable: is_resizable_checkbox_manager?.val,
+      is_show_limit: is_show_limit_checkbox_manager?.val,
+      rows: rows_slider_manager?.val,
+      max_height: max_height_slider_manager?.val,
+    })
+    val_defined_type_input_manager = create_defined_type_input_manager({
+      variables_data_type: () => variables_data_type,
+      label: "Val",
+      attribute_root_key: "val",
+      attribute_const_val: () => val_text_input_manager?.val,
+      attributes: config?.val,
+    })
+  }
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get val_text_input_manager() {
+      return val_text_input_manager
+    },
+    get val_defined_type_input_manager() {
+      return val_defined_type_input_manager
+    },
+    get type_dropdown_manager() {
+      return type_dropdown_manager
+    },
+    get name_text_input_manager() {
+      return name_text_input_manager
+    },
+    get placeholder_text_input_manager() {
+      return placeholder_text_input_manager
+    },
+    get replace_spaces_with_text_input_manager() {
+      return replace_spaces_with_text_input_manager
+    },
+    get is_numbers_only_checkbox_manager() {
+      return is_numbers_only_checkbox_manager
+    },
+    get is_text_hidable_checkbox_manager() {
+      return is_text_hidable_checkbox_manager
+    },
+    get is_text_hidden_checkbox_manager() {
+      return is_text_hidden_checkbox_manager
+    },
+    get max_length_text_input_manager() {
+      return max_length_text_input_manager
+    },
+    get min_text_input_manager() {
+      return min_text_input_manager
+    },
+    get max_text_input_manager() {
+      return max_text_input_manager
+    },
+    get is_resizable_checkbox_manager() {
+      return is_resizable_checkbox_manager
+    },
+    get is_show_limit_checkbox_manager() {
+      return is_show_limit_checkbox_manager
+    },
+    get rows_slider_manager() {
+      return rows_slider_manager
+    },
+    get max_height_slider_manager() {
+      return max_height_slider_manager
+    },
+  }
+}

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

@@ -0,0 +1,20 @@
+<script>
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import TimeInput from "$lib/Components/TimeInput/index.svelte"
+  import DefinedTypeInput from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte"
+
+  let { manager } = $props()
+  
+</script>
+
+<DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
+  {#snippet content()}
+    <TimeInput manager={manager?.val_time_input_manager} />
+  {/snippet}
+</DefinedTypeInput>
+<Dropdown manager={manager?.format_dropdown_manager} />
+{#if ["full","epoch","datetime","datetime_utc","datetime_zoned"].includes(manager?.format_dropdown_manager?.val)}
+  <Dropdown manager={manager?.granularity_dropdown_manager} />
+{/if}
+<Checkbox manager={manager?.is_popover_checkbox_manager} />

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

@@ -0,0 +1,87 @@
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_time_input_manager } from "$lib/Components/TimeInput/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"
+import { set_closurable } from "$lib/client/index.js"
+import { time_formats } from "$lib/Components/TimeInput/index.js"
+
+export function create_time_input_config_manager(config) {
+  let val_time_input_manager = $state(null)
+  let val_defined_type_input_manager = $state(null)
+  let is_popover_checkbox_manager = $state(null)
+  let granularity_dropdown_manager = $state(null)
+  let format_dropdown_manager = $state(null)
+
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+
+  let val = $derived({
+    ...val_defined_type_input_manager?.val,
+    format: format_dropdown_manager?.val,
+    granularity: granularity_dropdown_manager?.val,
+    is_popover: is_popover_checkbox_manager?.val,
+  })
+
+  function init(config) {
+    is_popover_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Popover",
+      val: config?.val?.is_popover ?? true,
+    })
+    format_dropdown_manager = create_dropdown_manager({
+      label: "Format",
+      val: "calendar_date",
+      is_button_compressed: true,
+      options: Object.entries(time_formats).map(([key, val]) => ({ key: key, name: val?.name })),
+    })
+    granularity_dropdown_manager = create_dropdown_manager({
+      label: "Granularity",
+      val: config?.val?.granularity ?? "day",
+      is_button_compressed: true,
+      options: [
+        { key: "year", name: "Year" },
+        { key: "month", name: "Month" },
+        { key: "week", name: "Week" },
+        { key: "day", name: "Day" },
+        { key: "hour", name: "Hour" },
+        { key: "minute", name: "Minute" },
+        { key: "second", name: "Second" },
+      ],
+      on_item_click: (input) => val_time_input_manager?.set_granularity(input?.key),
+    })
+    val_time_input_manager = create_time_input_manager({
+      is_popover: true,
+      val: config?.val?.val,
+      format: () => format_dropdown_manager?.val,
+      granularity: granularity_dropdown_manager?.val,
+    })
+    val_defined_type_input_manager = create_defined_type_input_manager({
+      variables_data_type: () => variables_data_type,
+      label: "Val",
+      attribute_root_key: "val",
+      attribute_const_val: () => val_time_input_manager?.val,
+      attributes: config?.val,
+    })
+  }
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get val_time_input_manager() {
+      return val_time_input_manager
+    },
+    get val_defined_type_input_manager() {
+      return val_defined_type_input_manager
+    },
+    get format_dropdown_manager() {
+      return format_dropdown_manager
+    },
+    get is_popover_checkbox_manager() {
+      return is_popover_checkbox_manager
+    },
+    get granularity_dropdown_manager() {
+      return granularity_dropdown_manager
+    },
+  }
+}

package/src/lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import VariablePathInput from "$lib/Components/VariablePathInput/index.svelte"
+
+  let { manager, content } = $props()
+</script>
+
+<div>
+  <div style="display: flex; gap: .5rem; margin-bottom: .3rem; align-items: center;">
+    <h4 class="label">{manager?.label}</h4>
+    <div>
+      <Button manager={manager?.item_defined_by_button_input_manager} />
+      <Dropdown manager={manager?.item_defined_by_dropdown_manager} />
+    </div>
+  </div>
+  {#if manager?.item_defined_by_dropdown_manager?.val == 'function'}
+    function_tbd
+    <!-- item_function_input_manager -->
+  {:else if manager?.item_defined_by_dropdown_manager?.val == 'variable'}
+    <VariablePathInput manager={manager?.item_variable_path_input_manager} />
+  {:else if content}
+    {@render content()}
+  {/if}
+</div>

package/src/lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js

@@ -0,0 +1,101 @@
+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_variable_path_input_manager } from "$lib/Components/VariablePathInput/index.svelte.js"
+import { create_unique_id, deep_copy, set_closurable } from "$lib/client/index.js"
+
+export function create_defined_type_input_manager(config) {
+  let item_defined_by_button_input_manager = $state(null)
+  let item_defined_by_dropdown_manager = $state(null)
+  let item_variable_path_input_manager = $state(null)
+  // let item_function_input_manager = $state(null)
+
+  let label = $derived(set_closurable(config?.label, null))
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+  let attribute_root_key = $derived(set_closurable(config?.attribute_root_key, null))
+  let attribute_const_val = $derived(set_closurable(config?.attribute_const_val, null))
+
+  let item_defined_by = $derived(item_defined_by_dropdown_manager?.val)
+  let variable_path = $derived(item_variable_path_input_manager?.val)
+
+  let val = $derived(
+    item_defined_by == "variable"
+      ? { [`${attribute_root_key}_from_variable_path`]: variable_path }
+      : item_defined_by == "function"
+      ? { [`${attribute_root_key}_from_function`]: "tbd" }
+      : { [attribute_root_key]: attribute_const_val }
+  )
+
+  function init(config) {
+    item_defined_by_button_input_manager = create_button_manager({
+      type: "soft",
+      support_icon: "three_dots",
+      is_uniform: true,
+      min_height: 1.8,
+      icon_size: 1.4,
+      icon_sw: 70,
+      border_radius: 0.5,
+      popover_target: () => `popover_${item_defined_by_dropdown_manager?.popover_manager?.id}`,
+    })
+    item_defined_by_dropdown_manager = create_dropdown_manager({
+      header: "Define From",
+      is_hide_button: true,
+      target_width: 180,
+      target_height: 200,
+      is_nullable: true,
+      val:
+        typeof config?.attributes == "object" && !Array.isArray(config?.attributes)
+          ? config?.attributes?.hasOwnProperty(config?.attribute_root_key)
+            ? "constant"
+            : config?.attributes?.hasOwnProperty(`${config?.attribute_root_key}_from_variable_path`)
+            ? "variable"
+            : config?.attributes?.hasOwnProperty(`${config?.attribute_root_key}_from_function`)
+          : "constant",
+      options: [
+        { key: "constant", name: "Constant" },
+        { key: "variable", name: "Variable" },
+        { key: "function", name: "Function" },
+      ],
+      anchor_id: `button_${item_defined_by_button_input_manager?.id}`,
+    })
+    item_variable_path_input_manager = create_variable_path_input_manager({
+      is_popover: false,
+      val: config?.attributes?.[`${config?.attribute_root_key}_from_variable_path`],
+      variables_data_type: () => variables_data_type,
+    })
+    // item_function_input_manager = create_variable_path_input_manager({
+    //   is_popover: false,
+    //   val: config?.attributes?.[`${config?.attribute_root_key}_from_variable_path`],
+    //   variables_data_type: () => variables_data_type,
+    // })
+  }
+
+  init(config)
+
+  return {
+    get label() {
+      return label
+    },
+    get item_defined_by_button_input_manager() {
+      return item_defined_by_button_input_manager
+    },
+    get item_defined_by_dropdown_manager() {
+      return item_defined_by_dropdown_manager
+    },
+    get item_variable_path_input_manager() {
+      return item_variable_path_input_manager
+    },
+    // get item_function_input_manager(){
+    //   return item_function_input_manager
+    // },
+    get item_defined_by() {
+      return item_defined_by
+    },
+    get variable_path() {
+      return variable_path
+    },
+    get val() {
+      return val
+    },
+  }
+}