sveltekit-ui 1.0.0

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

@@ -0,0 +1,383 @@
+import { deep_copy, create_unique_id, set_closurable } from "$lib/client/index.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_popover_manager } from "$lib/Components/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]
+  const val_base = {
+    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_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 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 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 ?? true,
+      }
+    } else {
+      val = null
+    }
+    is_dark_theme_invert_checkbox_manager.set_val(val?.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) {
+    is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
+      val: val?.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,
+    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/src/lib/Components/ConditionsInput/index.svelte

@@ -0,0 +1,46 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  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 TimeInput from "$lib/Components/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/src/lib/Components/ConditionsInput/index.svelte.js

@@ -0,0 +1,201 @@
+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_time_input_manager } from "$lib/Components/TimeInput/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/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,
+  }
+}