sveltekit-ui 1.0.0

package/src/lib/Components/TableAdvanced/FilterInput/index.svelte.js

@@ -0,0 +1,247 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/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"
+import { set_closurable } from "$lib/client/index.js"
+
+// come back to this. might just use the function builder here instead of seperate components
+export function create_filter_input_manager(config) {
+  let row_data_type = $derived(set_closurable(config?.row_data_type, null))
+  let is_popover = $derived(set_closurable(config?.is_popover, false))
+  let popover_toggle_button_manager = $state(null)
+  let popover_manager = $state(null)
+  let finish_button_manager = $state(null)
+
+  let val_prepped = $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(
+    row_data_type?.type == "text_literal"
+      ? text_predicate_options
+      : ["int_literal", "float_literal", "bigint_literal"].includes(row_data_type?.type)
+      ? number_predicate_options
+      : row_data_type?.type == "time_literal"
+      ? time_predicate_options
+      : []
+  )
+
+  let val = $derived(get_val_from_prepped())
+
+  function get_val_from_prepped(input) {
+    if (input?.type_dropdown_manager) {
+      let conditions = []
+      if (Array.isArray(input?.conditions_prepped)) {
+        for (let child of input?.conditions_prepped) {
+          let condition = get_val_from_prepped(child)
+          if (condition) {
+            conditions.push(condition)
+          }
+        }
+      }
+      return {
+        type: "operator",
+        operator: input?.type_dropdown_manager?.val,
+        conditions: conditions,
+      }
+    }
+  }
+
+  function get_val_prepped(input) {
+    let val_prepped_loc = null
+    if (input?.type) {
+      let conditions_prepped = []
+      if (Array.isArray(input?.conditions)) {
+        for (let child of input?.conditions) {
+          let child_val_prepped = get_val_prepped()
+          if (child_val_prepped) {
+            conditions_prepped.push(child)
+          }
+        }
+      }
+      let type_dropdown_manager = create_dropdown_manager({
+        val: operator_options.includes(input?.operator) ? input?.operator : null,
+        options: operator_options,
+        label: "Operator Type",
+      })
+      val_prepped_loc = {
+        type_dropdown_manager: type_dropdown_manager,
+        conditions_prepped: conditions_prepped,
+      }
+    }
+  }
+
+  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) {
+    val_prepped = get_val_prepped(config?.val)
+    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 predicate_options() {
+      return predicate_options
+    },
+    get is_popover() {
+      return is_popover
+    },
+    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
+    },
+    init,
+    add_condition,
+    finish,
+  }
+}

package/src/lib/Components/TableAdvanced/Pagination/index.svelte

@@ -0,0 +1,43 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div class="container">
+  <div class="container_inner">
+    {#if manager?.cur_page !== 1}
+      <Button manager={manager?.left_button_manager} />
+      <Button manager={manager?.page_one_button_manager} />
+    {/if}
+    {#if manager?.cur_page > 3}
+      <p>...</p>
+    {/if}
+    {#if manager?.cur_page > 2}
+      <Button manager={manager?.before_page_button_manager} />
+    {/if}
+    <Button manager={manager?.cur_page_button_manager} />
+    {#if manager?.total_pages - manager?.cur_page > 1}
+      <Button manager={manager?.after_page_button_manager} />
+    {/if}
+    {#if manager?.total_pages - manager?.cur_page > 2}
+      <p>...</p>
+    {/if}
+    {#if manager?.total_pages > 1 && manager?.cur_page !== manager?.total_pages}
+      <Button manager={manager?.last_page_button_manager} />
+      <Button manager={manager?.right_button_manager} />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+  }
+  .container_inner {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--shadow5-t);
+    border-radius: 1rem;
+  }
+</style>

package/src/lib/Components/TableAdvanced/Pagination/index.svelte.js

@@ -0,0 +1,97 @@
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { set_closurable } from "$lib/client/index.js"
+
+export function create_pagination_manager(config) {
+  let cur_page = $derived(set_closurable(config?.cur_page, 1))
+  let total_pages = $derived(set_closurable(config?.total_pages, 1))
+  let left_button_manager = $state(null)
+  let page_one_button_manager = $state(null)
+  let before_page_button_manager = $state(null)
+  let cur_page_button_manager = $state(null)
+  let after_page_button_manager = $state(null)
+  let last_page_button_manager = $state(null)
+  let right_button_manager = $state(null)
+
+  function page_click(i) {
+    if (typeof config?.on_change == "function") {
+      config?.on_change(i)
+    }
+  }
+
+  function init(config) {
+    left_button_manager = create_button_manager({
+      type: "soft",
+      is_uniform: true,
+      support_icon: "arrow",
+      icon_deg: 270,
+      icon_size: 1.4,
+      on_click: () => page_click(cur_page - 1),
+    })
+    page_one_button_manager = create_button_manager({
+      type: "soft",
+      text: () => "1",
+      on_click: () => page_click(1),
+    })
+    before_page_button_manager = create_button_manager({
+      type: "soft",
+      text: () => cur_page - 1,
+      on_click: () => page_click(cur_page - 1),
+    })
+    cur_page_button_manager = create_button_manager({
+      type: "soft",
+      selected_type: "half_selected",
+      text: () => cur_page,
+    })
+    after_page_button_manager = create_button_manager({
+      type: "soft",
+      text: () => cur_page + 1,
+      on_click: () => page_click(cur_page + 1),
+    })
+    last_page_button_manager = create_button_manager({
+      type: "soft",
+      text: () => total_pages,
+      on_click: () => page_click(total_pages),
+    })
+    right_button_manager = create_button_manager({
+      type: "soft",
+      is_uniform: true,
+      support_icon: "arrow",
+      icon_deg: 90,
+      icon_size: 1.4,
+      on_click: () => page_click(cur_page + 1),
+    })
+  }
+
+  init(config)
+
+  return {
+    get cur_page() {
+      return cur_page
+    },
+    get total_pages() {
+      return total_pages
+    },
+    get left_button_manager() {
+      return left_button_manager
+    },
+    get page_one_button_manager() {
+      return page_one_button_manager
+    },
+    get before_page_button_manager() {
+      return before_page_button_manager
+    },
+    get cur_page_button_manager() {
+      return cur_page_button_manager
+    },
+    get after_page_button_manager() {
+      return after_page_button_manager
+    },
+    get last_page_button_manager() {
+      return last_page_button_manager
+    },
+    get right_button_manager() {
+      return right_button_manager
+    },
+    page_click,
+  }
+}

package/src/lib/Components/TableAdvanced/SortByInput/index.svelte

@@ -0,0 +1,79 @@
+<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 VariablePathInput from "$lib/Components/VariablePathInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#snippet sort_content()}
+  <div class="table_container">
+    <table style="margin: 0;">
+      <thead>
+        <tr>
+          <th>Sort Order</th>
+          <th>Data from Row Path</th>
+          <th>Is Ascending</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+      {#if Array.isArray(manager?.sorts_prepped) && manager?.sorts_prepped.length > 0}
+        {#each manager?.sorts_prepped as sort_prepped, i}
+          <tr>
+            <td>{i == 0 ? "Primary" : "Subsort"}</td>
+            <td>
+              <VariablePathInput manager={sort_prepped?.data_row_variable_path_input_manager} />
+            </td>
+            <td>
+              <Checkbox manager={sort_prepped?.is_ascending_checkbox_manager} />
+            </td>
+            <td>
+              <Button manager={sort_prepped?.extra_button_manager} />
+              <Popover manager={sort_prepped?.extra_popover_manager}>
+                {#snippet content()}
+                  {#if Array(manager?.sorts_prepped) && manager?.sorts_prepped.length > 0 && i > 1}
+                    <Button manager={sort_prepped?.shift_up_button_manager} />
+                  {/if}
+                  {#if Array(manager?.sorts_prepped) && manager?.sorts_prepped.length > 1 && i < manager?.sorts_prepped.length}
+                    <Button manager={sort_prepped?.shift_down_button_manager} />
+                  {/if}
+                  <Button manager={sort_prepped?.delete_button_manager} />
+                {/snippet}
+              </Popover>
+            </td>
+          </tr>
+        {/each}
+        {:else}
+          <tr>
+            <td colspan="4">No Sorts added yet</td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+  <Button manager={manager?.add_sort_button_manager} />
+{/snippet}
+
+{#if manager?.is_popover}
+  {#if manager?.is_show_popover_toggle_button}
+    <Button manager={manager?.popover_toggle_button_manager} />
+  {/if}
+  <Popover manager={manager?.popover_manager}>
+    {#snippet content()}
+      {@render sort_content()}
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.apply_sorting_button_manager} />
+    {/snippet}
+  </Popover>
+{:else}
+  {@render sort_content()}
+{/if}
+
+<style>
+  th{
+    font-size: 1.2rem;
+  }
+</style>

package/src/lib/Components/TableAdvanced/SortByInput/index.svelte.js

@@ -0,0 +1,191 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_variable_path_input_manager } from "$lib/Components/VariablePathInput/index.svelte.js"
+import { set_closurable } from "$lib/client/index.js"
+
+export function create_sort_by_input_manager(config) {
+  let row_data_type = $derived(set_closurable(config?.row_data_type, null))
+  let is_popover = $derived(set_closurable(config?.is_popover, false))
+  let popover_anchor_id = $derived(set_closurable(config?.popover_anchor_id, null))
+  let is_show_popover_toggle_button = $derived(set_closurable(config?.is_show_popover_toggle_button, true))
+  let popover_toggle_button_manager = $state(null)
+  let popover_manager = $state(null)
+  let apply_sorting_button_manager = $state(null)
+  let add_sort_button_manager = $state(null)
+  let sorts_prepped = $state(null)
+
+  let val = $derived(get_sorts_from_prepped())
+
+  function get_sorts_from_prepped() {
+    let sorts = []
+    if (Array.isArray(sorts_prepped)) {
+      for (let sort_prepped of sorts_prepped) {
+        sorts.push({
+          is_ascending: sort_prepped?.is_ascending_checkbox_manager?.val,
+          data_row_variable_path: sort_prepped?.data_row_variable_path_input_manager?.val,
+        })
+      }
+    }
+    return sorts
+  }
+
+  function set_sorts_prepped(sorts) {
+    let sorts_prepped_loc = []
+    if (Array.isArray(sorts)) {
+      for (let i = 0; i < sorts.length; i++) {
+        let extra_button_manager = $state(null)
+        let extra_popover_manager = $state(null)
+        extra_popover_manager = create_popover_manager({
+          target_width: 200,
+          target_height: 200,
+          type: "dropdown",
+          anchor_id: () => `button_${extra_button_manager?.id}`,
+        })
+        extra_button_manager = create_button_manager({
+          type: "soft",
+          support_icon: "three_dots",
+          icon_sw: 60,
+          is_uniform: true,
+          popover_target: () => `popover_${extra_popover_manager?.id}`,
+        })
+        let delete_button_manager = create_button_manager({
+          type: "soft",
+          text: "Delete",
+          support_icon: "x",
+          color: "var(--error-t)",
+          text_align: "left",
+          on_click: () => {
+            extra_popover_manager.close()
+            if (Array.isArray(sorts_prepped) && i >= 0 && i < sorts_prepped.length) {
+              sorts_prepped.splice(i, 1)
+            }
+          },
+        })
+        let shift_up_button_manager = create_button_manager({
+          type: "soft",
+          text: "Shift Up",
+          support_icon: "arrow_tailed",
+          icon_deg: 270,
+          text_align: "left",
+          on_click: () => {
+            console.log("shift sort up")
+          },
+        })
+        let shift_down_button_manager = create_button_manager({
+          type: "soft",
+          text: "Shift Down",
+          support_icon: "arrow_tailed",
+          text_align: "left",
+          icon_deg: 90,
+          on_click: () => {
+            console.log("shift sort down")
+          },
+        })
+        let is_ascending_checkbox_manager = create_checkbox_manager({
+          type: "toggle",
+          val: sorts?.[i]?.is_ascending ?? null,
+          on_change: () => {
+            console.log("toggle is ascending")
+          },
+        })
+        let data_row_variable_path_input_manager = create_variable_path_input_manager({
+          is_popover: false,
+          variables_data_type: () => row_data_type,
+          val: sorts?.[i]?.data_row_variable_path ?? null,
+        })
+        sorts_prepped_loc.push({
+          ...sorts?.[i],
+          extra_button_manager: extra_button_manager,
+          extra_popover_manager: extra_popover_manager,
+          delete_button_manager: delete_button_manager,
+          shift_up_button_manager: shift_up_button_manager,
+          shift_down_button_manager: shift_down_button_manager,
+          is_ascending_checkbox_manager: is_ascending_checkbox_manager,
+          data_row_variable_path_input_manager: data_row_variable_path_input_manager,
+        })
+      }
+    }
+    sorts_prepped = sorts_prepped_loc
+  }
+
+  function init(config) {
+    popover_manager = create_popover_manager({
+      header: "Sort By",
+      type: "dropdown",
+      anchor_id: () =>
+        is_show_popover_toggle_button ? `button_${popover_toggle_button_manager?.id}` : popover_anchor_id,
+    })
+    popover_toggle_button_manager = create_button_manager({
+      type: "soft",
+      text: "Sort by",
+      is_compressed: true,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    apply_sorting_button_manager = create_button_manager({
+      text: "Apply Sorting",
+      on_click: () => {
+        console.log("Apply Sorting")
+      },
+    })
+    add_sort_button_manager = create_button_manager({
+      text: "Add Sort Item",
+      support_icon: "plus",
+      is_compressed: true,
+      on_click: () => {
+        let sorts = []
+        if (Array.isArray(sorts_prepped)) {
+          for (let sort_prepped of sorts_prepped) {
+            sorts.push({
+              is_ascending: sort_prepped?.is_ascending_checkbox_manager?.val,
+              data_row_variable_path: sort_prepped?.data_row_variable_path_input_manager?.val,
+            })
+          }
+        }
+        sorts = [
+          ...sorts,
+          {
+            is_ascending: false,
+            data_row_variable_path: null,
+          },
+        ]
+        set_sorts_prepped(sorts)
+      },
+    })
+    set_sorts_prepped(config?.val)
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get row_data_type() {
+      return row_data_type
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get is_show_popover_toggle_button() {
+      return is_show_popover_toggle_button
+    },
+    get popover_toggle_button_manager() {
+      return popover_toggle_button_manager
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get apply_sorting_button_manager() {
+      return apply_sorting_button_manager
+    },
+    get sorts_prepped() {
+      return sorts_prepped
+    },
+    get add_sort_button_manager() {
+      return add_sort_button_manager
+    },
+    init,
+    set_sorts_prepped,
+  }
+}