sveltekit-ui 1.1.15 → 1.1.17

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

@@ -1,386 +0,0 @@
-import { deep_copy, create_unique_id, set_closurable } from "../../client/index.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-
-export function create_color_input_manager(config) {
-  const base_range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
-  let val_base = $state({
-    l: 19,
-    c: 10,
-    h: 15,
-    o: 24,
-    is_dark_theme_invert: true,
-  })
-
-  let id = create_unique_id(null, 20)
-  let val = $state(null)
-  let is_dark_theme_invert_checkbox_manager = $state(null)
-  let popover_manager = $state(null)
-  let toggle_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let lightness_up_button_manager = $state(null)
-  let lightness_down_button_manager = $state(null)
-  let chroma_up_button_manager = $state(null)
-  let chroma_down_button_manager = $state(null)
-  let hue_up_button_manager = $state(null)
-  let hue_down_button_manager = $state(null)
-  let opacity_up_button_manager = $state(null)
-  let opacity_down_button_manager = $state(null)
-  let set_null_button_manager = $state(null)
-
-  let is_show_opacity = $derived(set_closurable(config?.is_show_opacity, true))
-  let l_options = $derived(order_num_options(set_closurable(config?.l_options, base_range)))
-  let c_options = $derived(order_num_options(set_closurable(config?.c_options, base_range)))
-  let h_options = $derived(order_num_options(set_closurable(config?.h_options, base_range)))
-  let o_options = $derived(order_num_options(set_closurable(config?.o_options, base_range)))
-  let label = $derived(set_closurable(config?.label, null))
-
-  function order_num_options(input) {
-    let res = deep_copy(input)
-    if (Array.isArray(res)) {
-      return res.sort((a, b) => a - b)
-    }
-    return null
-  }
-
-  let css_val = $derived(
-    typeof val?.l === "number" && typeof val?.c === "number" && typeof val?.h === "number" && typeof val?.o === "number"
-      ? `oklch(var(--l${val.l}) var(--c${val.c}) var(--h${val.h}) / var(--o${val.o}))`
-      : "transparent"
-  )
-
-  function set_is_dark_theme_invert(input) {
-    if (val && typeof val == "object" && val.hasOwnProperty("is_dark_theme_invert")) {
-      val.is_dark_theme_invert = !!input
-    } else {
-      val = {
-        ...(val ?? val_base),
-        is_dark_theme_invert: !!input,
-      }
-    }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-  }
-
-  function set_val(input) {
-    const val_static = set_closurable(input, null)
-    if (val_static) {
-      val = {
-        l: val_static?.l ?? val_base?.l,
-        c: val_static?.c ?? val_base?.c,
-        h: val_static?.h ?? val_base?.h,
-        o: val_static?.o ?? val_base?.o,
-        is_dark_theme_invert: val_static?.is_dark_theme_invert ?? is_dark_theme_invert_checkbox_manager?.val,
-      }
-    } else {
-      val = null
-    }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert ?? val_base?.is_dark_theme_invert)
-    if (config?.on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function get_value_in_range(value, custom_range, index_change = 1) {
-    const index = custom_range.findIndex((h) => h === value)
-    const new_index = index + index_change
-    if (new_index > -1 && new_index < custom_range.length) {
-      return custom_range[new_index]
-    } else {
-      return new_index >= custom_range.length ? custom_range[0] : custom_range[custom_range.length - 1]
-    }
-  }
-
-  function set_lightness(l, change = 0, is_ignore_on_change = false) {
-    let l_to_use = get_value_in_range(l, l_options, change)
-    if (val && typeof val == "object" && val.hasOwnProperty("l")) {
-      val.l = l_to_use
-    } else {
-      val = {
-        ...(val ?? val_base),
-        l: l_to_use,
-      }
-    }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    if (config?.on_change && !is_ignore_on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function set_chroma(c, change = 0) {
-    let c_to_use = get_value_in_range(c, c_options, change)
-    if (val && typeof val == "object" && val.hasOwnProperty("c")) {
-      val.c = c_to_use
-    } else {
-      val = {
-        ...(val ?? val_base),
-        c: c_to_use,
-      }
-    }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    let chroma_square_el = document?.querySelector(`#chroma_square_${id}_${c_to_use}`)
-    if (chroma_square_el) {
-      chroma_square_el.focus()
-    }
-    if (config?.on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function set_hue(h, change = 0, is_ignore_on_change = false) {
-    let h_to_use = get_value_in_range(h, h_options, change)
-    if (val && typeof val == "object" && val.hasOwnProperty("h")) {
-      val.h = h_to_use
-    } else {
-      val = {
-        ...(val ?? val_base),
-        h: h_to_use,
-      }
-    }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    if (config?.on_change && is_ignore_on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function set_opacity(o, change = 0) {
-    let o_to_use = get_value_in_range(o, o_options, change)
-    if (val && typeof val == "object" && val.hasOwnProperty("o")) {
-      val.o = o_to_use
-    } else {
-      val = {
-        ...(val ?? val_base),
-        o: o_to_use,
-      }
-    }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    let opacity_square_el = document?.querySelector(`#opacity_square_${id}_${o_to_use}`)
-    if (opacity_square_el) {
-      opacity_square_el.focus()
-    }
-    if (config?.on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function set_lightness_and_hue(l_input, h_input) {
-    set_lightness(l_input, 0, true)
-    set_hue(h_input, 0, true)
-    let color_square_el = document?.querySelector(`#lightness_hue_square_${id}_${val?.l}_${val?.h}`)
-    if (color_square_el) {
-      color_square_el.focus()
-    }
-    if (config?.on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function finish() {
-    popover_manager.close()
-    if (typeof config?.on_finish == "function") {
-      config?.on_finish(val)
-    }
-  }
-
-  function init(config) {
-    val_base.is_dark_theme_invert = config?.is_dark_theme_invert
-    is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
-      val: config?.is_dark_theme_invert,
-      type: "toggle",
-      on_change: (input) => set_is_dark_theme_invert(input),
-    })
-    popover_manager = create_popover_manager({
-      type: "dropdown",
-      min_width: 280,
-      min_height: 400,
-      target_width: 450,
-      target_height: Array.isArray(l_options) ? Math.min(80 + l_options.length * 25, 650) : 650,
-      anchor_id: () => `button_${toggle_button_manager?.id}`,
-    })
-    toggle_button_manager = create_button_manager({
-      type: "soft",
-      is_compressed: true,
-      pl: 0.3,
-      pr: 0.3,
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    finish_button_manager = create_button_manager({
-      text: "Finish",
-      h: 10,
-      l: 1,
-      c: 1,
-      on_click: () => finish(),
-    })
-    lightness_up_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_lightness(val?.l ?? val_base?.l, 1),
-    })
-    lightness_down_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_deg: 180,
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_lightness(val?.l ?? val_base?.l, -1),
-    })
-    chroma_up_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_chroma(val?.c ?? val_base?.c, 1),
-    })
-    chroma_down_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_deg: 180,
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_chroma(val?.c ?? val_base?.c, -1),
-    })
-    hue_up_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_hue(val?.h ?? val_base?.h, 1),
-    })
-    hue_down_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_deg: 180,
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_hue(val?.h ?? val_base?.h, -1),
-    })
-    opacity_up_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_opacity(val?.o ?? val_base?.o, 1),
-    })
-    opacity_down_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      icon_deg: 180,
-      icon_pos: "center",
-      min_height: 2.4,
-      pt: 0,
-      g_base: 8,
-      icon_sw: 40,
-      on_click: () => set_opacity(val?.o ?? val_base?.o, -1),
-    })
-    set_null_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Set null",
-      font_size: 1.2,
-      on_click: () => (val = null),
-    })
-    set_val(config?.val)
-  }
-  init(config)
-
-  return {
-    id,
-    get val_base() {
-      return val_base
-    },
-    get val() {
-      return val
-    },
-    get label() {
-      return label
-    },
-    get css_val() {
-      return css_val
-    },
-    get is_show_opacity() {
-      return is_show_opacity
-    },
-    get l_options() {
-      return l_options
-    },
-    get c_options() {
-      return c_options
-    },
-    get h_options() {
-      return h_options
-    },
-    get o_options() {
-      return o_options
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get is_dark_theme_invert_checkbox_manager() {
-      return is_dark_theme_invert_checkbox_manager
-    },
-    get toggle_button_manager() {
-      return toggle_button_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    get lightness_up_button_manager() {
-      return lightness_up_button_manager
-    },
-    get lightness_down_button_manager() {
-      return lightness_down_button_manager
-    },
-    get chroma_up_button_manager() {
-      return chroma_up_button_manager
-    },
-    get chroma_down_button_manager() {
-      return chroma_down_button_manager
-    },
-    get hue_up_button_manager() {
-      return hue_up_button_manager
-    },
-    get hue_down_button_manager() {
-      return hue_down_button_manager
-    },
-    get opacity_up_button_manager() {
-      return opacity_up_button_manager
-    },
-    get opacity_down_button_manager() {
-      return opacity_down_button_manager
-    },
-    get set_null_button_manager() {
-      return set_null_button_manager
-    },
-    init,
-    set_val,
-    set_chroma,
-    set_hue,
-    set_lightness,
-    set_opacity,
-    set_lightness_and_hue,
-    set_is_dark_theme_invert,
-    finish,
-  }
-}

package/dist/Components/ConditionsInput/index.svelte

@@ -1,46 +0,0 @@
-<script>
-  import Popover from "../Popover/index.svelte"
-  import Button from "../Button/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import Dropdown from "../Dropdown/index.svelte"
-  import TimeInput from "../TimeInput/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<Button manager={manager?.popover_toggle_button_manager} />
-<Popover manager={manager?.popover_manager}>
-  {#snippet content()}
-    <div class="popover_content_container">
-      <div style="display: flex; flex-direction: column; flex: 1; gap: 1rem;">
-        <Dropdown manager={manager?.operator_dropdown_manager} />
-        oo
-        {#if Array.isArray(manager?.conditions) && manager?.conditions.length > 0}
-          {#each manager?.conditions as condition, i}
-            qqq:{condition?.input_type}
-            {#if condition?.type == "operator"}
-              condition is operator (tbd)
-              <!-- if want to nest i can extend functionality later -->
-            {:else}
-              <div style="display: flex; gap: 1rem;">
-                <Button manager={condition?.x_button_manager} />
-                <Dropdown manager={condition?.predicate_dropdown_manager} />
-                {#if condition?.input_type == "time"}
-                  <TimeInput manager={condition?.input_manager} />
-                {:else if ["number", "text"].includes(condition?.input_type)}
-                  <TextInput manager={condition?.input_manager} />
-                {/if}
-              </div>
-            {/if}
-          {/each}
-        {:else}
-          <p>No Conditions</p>
-        {/if}
-        <Button manager={manager?.add_condition_button_manager} />
-      </div>
-    </div>  
-  {/snippet}
-  {#snippet footer()}
-    <Button manager={manager?.finish_button_manager} />
-  {/snippet}
-</Popover>

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

@@ -1,201 +0,0 @@
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-// import { create_time_input_manager } from "../TimeInput/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-
-export function create_conditions_input_manager(config) {
-  let val = $state(null)
-  let data_type = $state(null)
-  let conditions = $state(null)
-  let popover_manager = $state(null)
-  let popover_toggle_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let add_condition_button_manager = $state(null)
-  let operator_dropdown_manager = $state(null)
-
-  const operator_options = [
-    { key: "all_of", name: "All Of" },
-    { key: "any_of", name: "Any Of" },
-  ]
-
-  const number_predicate_options = [
-    { key: "equal_to", name: "equals (==)", input: "number" },
-    { key: "not_equal_to", name: "not equal to (!=)", input: "number" },
-    { key: "less_than", name: "less than (<)", input: "number" },
-    { key: "less_than_or_equal", name: "less than or equal to (<=)", input: "number" },
-    { key: "greater_than", name: "greater than (>)", input: "number" },
-    { key: "greater_than_or_equal", name: "greater than or equal to (>=)", input: "number" },
-  ]
-
-  const text_predicate_options = [
-    { key: "equal_to", name: "equals (==)", input: "text" },
-    { key: "not_equal_to", name: "not equal to (!=)", input: "text" },
-    { key: "contains", name: "contains", input: "text" },
-    { key: "does_not_contain", name: "does not contain", input: "text" },
-    { key: "starts_with", name: "starts with", input: "text" },
-    { key: "ends_with", name: "ends with", input: "text" },
-  ]
-
-  const time_predicate_options = [
-    { key: "past_x_hours", name: "Past _ Hours", input: "none" },
-    { key: "past_x_days", name: "Past _ Days", input: "none" },
-    { key: "on_day_of_week", name: "On _ Day Of Week", input: "none" },
-    { key: "today", name: "Today", input: "none" },
-    { key: "yesterday", name: "Yesterday", input: "none" },
-    { key: "tomorrow", name: "Tomorrow", input: "none" },
-    { key: "this_calendar_month", name: "This Calendar Month", input: "none" },
-    { key: "this_calendar_year", name: "This Calendar Year", input: "none" },
-    { key: "last_calendar_month", name: "Last Calendar Month", input: "none" },
-    { key: "last_calendar_year", name: "Last Calendar Year", input: "none" },
-    { key: "next_calendar_month", name: "Next Calendar Month", input: "none" },
-    { key: "next_calendar_year", name: "Next Calendar Year", input: "none" },
-    { key: "before_epoch", name: "Before _", input: "time" },
-    { key: "after_epoch", name: "After _", input: "time" },
-    { key: "on_specific_date", name: "On _ Date", input: "time" },
-  ]
-
-  let predicate_options = $derived(
-    data_type?.type == "text_literal"
-      ? text_predicate_options
-      : ["int_literal", "float_literal", "bigint_literal"].includes(data_type?.type)
-      ? number_predicate_options
-      : data_type?.type == "time_literal"
-      ? time_predicate_options
-      : []
-  )
-
-  function set_conditions() {
-    let conditions_loc = []
-    if (val?.type == "operator" && Array.isArray(val?.conditions) && val?.conditions.length > 0) {
-      for (let i = 0; i < val?.conditions.length; i++) {
-        const input_type = predicate_options.find((h) => h?.key == val?.conditions?.[i]?.predicate)?.input
-        console.log("predicate_options", predicate_options, input_type)
-        conditions_loc.push({
-          input_type: input_type,
-          x_button_manager: create_button_manager({
-            type: "outlined",
-            support_icon: "x",
-            is_uniform: true,
-            on_click: () => (val.conditions = [...val?.conditions].filter((_, index) => index !== i)),
-          }),
-          predicate_dropdown_manager: create_dropdown_manager({
-            options: predicate_options,
-            val: val?.conditions?.[i]?.predicate,
-            is_compressed: true,
-            on_item_click: (input) => (val.conditions[i].predicate = input?.key),
-          }),
-          // input_manager:
-          //   input_type == "time"
-          //     ? create_time_input_manager({
-          //         val: val?.conditions?.[i]?.value,
-          //         is_finish_button: true,
-          //         is_input_button: true,
-          //         on_finish: (input) => (val.conditions[i].value = input),
-          //       })
-          //     : ["number", "text"].includes(input_type)
-          //     ? create_text_input_manager({
-          //         type: input_type,
-          //         val: val?.conditions?.[i]?.value,
-          //         placeholder: "value",
-          //         on_input: (input) => (val.conditions[i].value = input),
-          //       })
-          //     : null,
-        })
-      }
-    }
-    conditions = conditions_loc
-  }
-
-  function finish() {
-    popover_manager.close()
-    if (typeof config?.on_finish == "function") {
-      config?.on_finish()
-    }
-  }
-
-  function add_condition() {
-    console.log("add_condition", val)
-    val.conditions = [
-      ...val?.conditions,
-      {
-        type: "predicate",
-        predicate: null,
-        value: null,
-      },
-    ]
-    set_conditions()
-    console.log("add_condition2", val)
-  }
-
-  function init(config) {
-    data_type = config?.data_type
-    val = config?.val ?? {
-      type: "operator",
-      operator: "all_of",
-      conditions: [],
-    }
-    popover_manager = create_popover_manager({
-      min_width: 320,
-      target_width: 400,
-      min_height: 320,
-      target_height: 400,
-      type: "center",
-      header: "Condition Builder",
-      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
-    })
-    popover_toggle_button_manager = create_button_manager({
-      type: "outlined",
-      is_compressed: true,
-      text: "Edit Conditions",
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    operator_dropdown_manager = create_dropdown_manager({
-      options: operator_options,
-      val: val?.operator,
-      is_button_compressed: true,
-      on_item_click: (input) => (val.operator = input?.key),
-    })
-    add_condition_button_manager = create_button_manager({
-      type: "outlined",
-      is_compressed: true,
-      text: "Add Condition",
-      support_icon: "plus",
-      on_click: () => add_condition(),
-    })
-    finish_button_manager = create_button_manager({
-      text: "Finish",
-      on_click: () => finish(),
-    })
-  }
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-    get conditions() {
-      return conditions
-    },
-    get predicate_options() {
-      return predicate_options
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get popover_toggle_button_manager() {
-      return popover_toggle_button_manager
-    },
-    get operator_dropdown_manager() {
-      return operator_dropdown_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    get add_condition_button_manager() {
-      return add_condition_button_manager
-    },
-    add_condition,
-    finish,
-  }
-}