sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/TableAdvanced/FilterInput/index.svelte.js

@@ -1,247 +0,0 @@
-import { create_popover_manager } from "../../Popover/index.svelte.js"
-import { create_button_manager } from "../../Button/index.svelte.js"
-import { create_checkbox_manager } from "../../Checkbox/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"
-import { set_closurable } from "../../../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/dist/Components/TableAdvanced/Pagination/index.svelte

@@ -1,43 +0,0 @@
-<script>
-  import Button from "../../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/dist/Components/TableAdvanced/Pagination/index.svelte.js

@@ -1,97 +0,0 @@
-import { create_button_manager } from "../../Button/index.svelte.js"
-import { set_closurable } from "../../../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/dist/Components/TableAdvanced/SortByInput/index.svelte

@@ -1,72 +0,0 @@
-<script>
-  import Popover from "../../Popover/index.svelte"
-  import Button from "../../Button/index.svelte"
-  import Checkbox from "../../Checkbox/index.svelte"
-  import VariablePathInput from "../../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 Variable Path</th>
-          <th>Is Ascending</th>
-          <th>Remove</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?.variable_path_input_manager} />
-              </td>
-              <td>
-                <Checkbox manager={sort_prepped?.is_ascending_checkbox_manager} />
-              </td>
-              <td><Button manager={sort_prepped?.delete_button_manager} /></td>
-            </tr>
-          {/each}
-        {:else}
-          <tr>
-            <td colspan="4">No Sorts added yet</td>
-          </tr>
-        {/if}
-      </tbody>
-    </table>
-  </div>
-  <div style="margin-top: 1rem;">
-    <Button manager={manager?.add_sort_button_manager} />
-  </div>
-{/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()}
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-        <Button manager={manager?.save_server_sort_button_manager} />
-        <Button manager={manager?.apply_sorting_button_manager} />
-      </div>
-    {/snippet}
-  </Popover>
-{:else}
-  {@render sort_content()}
-{/if}
-
-<style>
-  th {
-    font-size: 1.2rem;
-  }
-</style>

package/dist/Components/TableAdvanced/SortByInput/index.svelte.js

@@ -1,176 +0,0 @@
-import { create_popover_manager } from "../../Popover/index.svelte.js"
-import { create_button_manager } from "../../Button/index.svelte.js"
-import { create_checkbox_manager } from "../../Checkbox/index.svelte.js"
-import { create_variable_path_input_manager } from "../../VariablePathInput/index.svelte.js"
-import { set_closurable } from "../../../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 save_server_sort_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,
-          variable_path: sort_prepped?.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 delete_button_manager = create_button_manager({
-          type: "outlined",
-          is_uniform: true,
-          support_icon: "x",
-          color: "var(--error-t)",
-          on_click: () => {
-            if (Array.isArray(sorts_prepped) && i >= 0 && i < sorts_prepped.length) {
-              sorts_prepped.splice(i, 1)
-            }
-          },
-        })
-        let is_ascending_checkbox_manager = create_checkbox_manager({
-          type: "toggle",
-          val: sorts?.[i]?.is_ascending ?? null,
-          on_change: () => {
-            console.log("toggle is ascending")
-          },
-        })
-        let variable_path_input_manager = create_variable_path_input_manager({
-          is_popover: false,
-          defined_data_type: row_data_type,
-          get_defined_options: config?.get_defined_options,
-          val: sorts?.[i]?.variable_path ?? null,
-          on_finish: () => variable_path_input_manager.close_popover(),
-        })
-        sorts_prepped_loc.push({
-          ...sorts?.[i],
-          delete_button_manager: delete_button_manager,
-          is_ascending_checkbox_manager: is_ascending_checkbox_manager,
-          variable_path_input_manager: variable_path_input_manager,
-        })
-      }
-    }
-    sorts_prepped = sorts_prepped_loc
-  }
-
-  let save_server_sort_is_loading = $state(false)
-  function init(config) {
-    popover_manager = create_popover_manager({
-      header: "Sort By",
-      type: "dropdown",
-      target_height: 300,
-      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 Local Sort",
-      on_click: () => {
-        if (typeof config?.apply_sort == "function") {
-          config?.apply_sort(val)
-        }
-      },
-    })
-    save_server_sort_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Save Server Sort",
-      on_click: async () => {
-        save_server_sort_is_loading = true
-        if (typeof config?.save_server_sort == "function") {
-          const res = await config?.save_server_sort(val)
-          if (res?.is_success) {
-            save_server_sort_button_manager.success_trigger()
-          } else {
-            save_server_sort_button_manager.error_trigger()
-          }
-        }
-        save_server_sort_is_loading = false
-      },
-    })
-    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,
-              variable_path: sort_prepped?.variable_path_input_manager?.val,
-            })
-          }
-        }
-        sorts = [
-          ...sorts,
-          {
-            is_ascending: false,
-            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 save_server_sort_button_manager() {
-      return save_server_sort_button_manager
-    },
-    get sorts_prepped() {
-      return sorts_prepped
-    },
-    get add_sort_button_manager() {
-      return add_sort_button_manager
-    },
-    init,
-    set_sorts_prepped,
-  }
-}

package/dist/Components/Tag/index.svelte

@@ -1,45 +0,0 @@
-<script>
-  import Icon from "../Icon/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#if manager?.tag_val}
-  <div style="display: flex;">
-    <div
-      class="tag"
-      style="
---bg_color: oklch(var(--l6-t) var(--c{manager?.tag_val?.color?.c ?? 16}) var(--h{manager?.tag_val?.color
-        ?.h}) / var(--o4)); 
---border_color: oklch(var(--l6-t) var(--c{manager?.tag_val?.color?.c ?? 16}) var(--h{manager?.tag_val?.color
-        ?.h}) / var(--o8));"
-    >
-      {#if manager?.tag_val?.display_text}
-        <p
-          style="color: oklch(var(--l5-t) var(--c{manager?.tag_val?.color?.c ?? 4}) var(--h{manager?.tag_val?.color
-            ?.h}));"
-        >
-          {manager?.tag_val?.display_text ?? ""}
-        </p>
-      {/if}
-      {#if manager?.tag_val?.icon}
-        <Icon manager={manager?.icon_manager} />
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<style>
-  .tag {
-    display: flex;
-    flex: 0;
-    gap: 1rem;
-    align-items: center;
-    border-radius: 1rem;
-    border: 1px solid var(--border_color);
-    background-color: var(--bg_color);
-    font-size: 1.4rem;
-    min-height: 3rem;
-    padding: 0.1rem 0.8rem;
-  }
-</style>