sveltekit-ui 1.0.0

package/dist/Components/CronInput/index.svelte

@@ -0,0 +1,78 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+
+  let { manager } = $props()
+
+</script>
+
+<div>
+  {#if manager?.label || manager?.error_message}
+    <div style="display: inline-flex;">
+      {#if manager?.label}
+        <p class="label">{manager?.label}:</p>
+      {/if}
+      {#if !manager?.is_valid}
+        <p class="error_text">Cron val invalid</p>
+      {/if}
+    </div>
+  {/if}
+
+  <Button manager={manager?.popover_toggle_button_manager} />
+  <Popover manager={manager?.popover_manager} >
+    {#snippet content()}
+      <div id={manager?.id}>
+        <TextInput manager={manager?.cron_text_input_manager} />
+        <p>{manager?.val ?? "Null"}</p>
+        <p>{manager?.description ?? ""}</p>
+        <details>
+          <summary>Cron Guide</summary>
+          <div class="cron_guide">
+            <p>Cron expressions run on UTC time</p>
+            <ul>
+              <li>Minute (0 - 59)</li>
+              <li>Hour (0 - 23)</li>
+              <li>Day of the month (1 - 31)</li>
+              <li>Month (1 - 12)</li>
+              <li>Day of the week (0 - 6)</li>
+            </ul>
+            <p>Special characters:</p>
+            <ul>
+              <li>Asterisk (*): Represents "every" value (e.g., every hour, every day).</li>
+              <li>Comma (,): Specifies a list of values (e.g., 1,3,5 in the day-of-week field means Monday, Wednesday, and Friday).</li>
+              <li>Dash (-): Specifies a range of values (e.g., 1-5 in the day-of-week field means Monday through Friday).</li>
+              <li>Slash (/): Specifies increments (e.g., */10 in the minute field means "every 10 minutes").</li>
+            </ul>
+          </div>
+        </details>
+      </div>
+    {/snippet}
+    {#snippet footer()} 
+      <Button manager={manager?.finish_button_manager} />
+    {/snippet}
+  </Popover>
+</div>
+
+<style>
+  p {
+    font-size: 1.4rem;
+  }
+  .cron_guide {
+    text-align: left;
+    font-size: 0.8rem;
+    line-height: 1.2;
+  }
+  .cron_guide ul {
+    padding-left: 1.2rem;
+    margin-bottom: 0.5rem;
+  }
+  .cron_guide ul li {
+    margin-bottom: 0.2rem;
+    font-size: 1.2rem;
+  }
+  .cron_guide p {
+    margin: 0.2rem;
+    font-size: 1.2rem;
+  }
+</style>

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

@@ -0,0 +1,199 @@
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { deep_copy, create_unique_id, set_closurable, cron_to_english } from "../../client/index.js"
+
+export function create_cron_input_manager(config) {
+  const id = create_unique_id(null, 20)
+  let label = $state(null)
+  let is_disabled = $state(null)
+  let is_nullable = $state(null)
+  let is_compressed = $state(null)
+  let is_popover = $state(null)
+  let ml = $state(null)
+  let mr = $state(null)
+  let mt = $state(null)
+  let mb = $state(null)
+
+  let popover_manager = $state(null)
+  let popover_toggle_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let cron_text_input_manager = $state(null)
+
+  let description = $derived(cron_to_english(cron_text_input_manager?.val))
+
+  let val = $derived(clean_val(cron_text_input_manager?.val))
+
+  let is_valid = $derived.by(() => {
+    if (cron_text_input_manager?.val == null) {
+      return true
+    }
+    const cron_parts = (cron_text_input_manager?.val || "* * * * *").split(" ")
+    const [minute, hour, day_of_month, month, day_of_week] = [
+      cron_parts[0] || "*",
+      cron_parts[1] || "*",
+      cron_parts[2] || "*",
+      cron_parts[3] || "*",
+      cron_parts[4] || "*",
+    ]
+    return (
+      cron_text_input_manager?.val == null ||
+      (is_valid_field(minute, 0, 59) &&
+        is_valid_field(hour, 0, 23) &&
+        is_valid_field(day_of_month, 1, 31) &&
+        is_valid_field(month, 1, 12) &&
+        is_valid_field(day_of_week, 0, 7))
+    )
+  })
+
+  function clean_val(input) {
+    console.log("input", input)
+    if (!input) {
+      return null
+    }
+    let [minute, hour, day_of_month, month, day_of_week] = (input || "* * * * *").split(" ")
+    minute = minute || "*"
+    hour = hour || "*"
+    day_of_month = day_of_month || "*"
+    month = month || "*"
+    day_of_week = day_of_week || "*"
+    const cron_loc = `${minute} ${hour} ${day_of_month} ${month} ${day_of_week}`
+    return cron_loc
+  }
+
+  function is_valid_field(field, min, max) {
+    if (field === "*") return true
+    const parts = field.split(",")
+    for (const part of parts) {
+      if (part.includes("/")) {
+        const [start, step] = part.split("/").map((val) => (val === "*" ? val : Number(val)))
+        const step_num = Number(step)
+        if (isNaN(step_num) || step_num < 1 || (start !== "*" && (isNaN(start) || start < min || start > max))) {
+          return false
+        }
+      } else if (part.includes("-")) {
+        const [start, end] = part.split("-").map(Number)
+        if (isNaN(start) || isNaN(end) || start < min || end > max || start > end) {
+          return false
+        }
+      } else {
+        const num = Number(part)
+        if (isNaN(num) || num < min || num > max) {
+          return false
+        }
+      }
+    }
+    return true
+  }
+
+  function finish_cron() {
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+    popover_manager.close()
+  }
+
+  function set_attributes(input) {
+    label = set_closurable(input?.label, label ?? null)
+    is_disabled = set_closurable(input?.is_disabled, is_disabled ?? false)
+    is_nullable = set_closurable(input?.is_disabled, is_nullable ?? true)
+    is_compressed = set_closurable(input?.is_compressed, is_compressed ?? true)
+    is_popover = set_closurable(input?.is_popover, is_popover ?? true)
+    ml = set_closurable(input?.ml, ml ?? 0)
+    mr = set_closurable(input?.mr, mr ?? 0)
+    mt = set_closurable(input?.mt, mt ?? 0)
+    mb = set_closurable(input?.mb, mb ?? 0)
+    cron_text_input_manager.set_val(set_closurable(input?.val))
+  }
+
+  function init(config) {
+    cron_text_input_manager = create_text_input_manager({
+      label: "Cron Expression",
+      placeholder: "* * * * *",
+      is_nullable: true,
+    })
+    set_attributes(config)
+    popover_manager = create_popover_manager({
+      target_width: 300,
+      target_height: 300,
+      is_show_x: true,
+      type: "dropdown",
+      is_disabled: () => is_disabled,
+      header: "Cron Expression",
+      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
+    })
+    popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      text: () => val ?? "Set Cron",
+      is_disabled: () => is_disabled,
+      is_compressed: () => is_compressed,
+      h: 10,
+      l: 3,
+      c: 1,
+      ml: () => ml,
+      mr: () => mr,
+      mt: () => mt,
+      mb: () => mb,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      mt: 0.5,
+      on_click: () => finish_cron(),
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get label() {
+      return label
+    },
+    get val() {
+      return val
+    },
+    get is_nullable() {
+      return is_nullable
+    },
+    get description() {
+      return description
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get is_compressed() {
+      return is_compressed
+    },
+    get is_valid() {
+      return is_valid
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get popover_toggle_button_manager() {
+      return popover_toggle_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get cron_text_input_manager() {
+      return cron_text_input_manager
+    },
+  }
+}

package/dist/Components/DataTypeInput/index.svelte

@@ -0,0 +1,174 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import Breadcrumbs from "../Breadcrumbs/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+  import Dropdown from "../Dropdown/index.svelte"
+
+  let { manager } = $props()
+
+</script>
+
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
+  <div>
+    {#if !manager?.val?.type}
+      <div style="display: flex; flex: 1; width: 100%; flex-wrap: wrap; padding: 0 .5rem; gap: 1rem;">
+        {#if manager?.type_options.length > 6 || manager?.search_text_input_manager?.val}
+        <div style="display: flex; flex: 1; flex-direction: column;">
+          <TextInput manager={manager?.search_text_input_manager} />
+        </div>
+        {/if}
+        {#if manager?.variables}
+          <Button manager={manager?.guess_from_variables_button_manager} />
+        {/if}
+      </div>
+      <div class="elements_container">
+        {#if Array.isArray(manager?.type_option_buttons) && manager?.type_option_buttons.length > 0}
+          {#each manager?.type_option_buttons as type_option_button}
+            {#if manager?.type_options.some(h => h?.key == type_option_button?.key)}
+              <Button manager={type_option_button?.button_manager}>
+                {#snippet content()}
+                  <div class="button_internal_container">
+                    <h5 class="button_header">{type_option_button?.name}</h5>
+                    <p class="button_sub_text">{type_option_button?.key}</p>
+                  </div>
+                {/snippet}
+              </Button>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <Breadcrumbs manager={manager?.breadcrumbs_manager} />
+      <p class="label">Data Type</p>
+      <div style="display: flex; align-items: center; gap: 1rem;">
+        <Button manager={manager?.clear_breadcrumbs_button_manager} />
+        <Dropdown manager={manager?.type_options_dropdown_manager} />
+      </div>
+      {#if manager?.val_at_path?.type == "array_literal"}
+        array_literal_tbd
+      {:else if manager?.val_at_path?.type == "array_uniform_literal"}
+        <p>Array of Uniform Type</p>
+        <div style="display: flex; gap: 1rem;">
+          <Dropdown manager={manager?.items_type_options_dropdown_manager} />
+          {#if ["array_literal","array_uniform_literal", "object_literal","object_uniform_literal"].includes(manager?.val_at_path?.items?.type)}
+            <Button manager={manager?.edit_items_type_button_manager} />
+          {/if}
+        </div>
+      {:else if manager?.val_at_path?.type == "object_uniform_literal"}
+        <p>Object Uniform Value Type</p>
+        <div style="display: flex; gap: 1rem;">
+          <Dropdown manager={manager?.items_type_options_dropdown_manager} />
+          {#if ["array_literal", "object_literal", "object_uniform_literal"].includes(manager?.val_at_path?.items?.type)}
+            <Button manager={manager?.edit_items_type_button_manager} />
+          {/if}
+        </div>
+        <div>
+          {#if Array.isArray(manager?.table_options) && manager?.table_options.length > 0}
+            <Dropdown manager={manager?.property_key_table_id_for_foreign_row_text_input_manager} />
+          {:else}
+            <p>No Table Options Found</p>
+          {/if}
+        </div>
+      {:else if manager?.val_at_path?.type == "object_literal"}
+        <h4>Properties</h4>
+        <div class="property_table_container">
+          <table class="property_table">
+            <thead>
+              <tr>
+                <th>Key</th>
+                <th>Type</th>
+                <th>Edit</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#if Object.keys(manager?.property_type_options || {})?.length > 0}
+                {#each Object.keys(manager?.property_type_options || {}).sort((a, b) => manager?.property_type_options?.[a]?.display_order - manager?.property_type_options?.[b]?.display_order) as property_key}
+                  <tr>
+                    <td>{property_key}</td>
+                    <td>
+                      <Dropdown manager={manager?.property_type_options?.[property_key]?.type_options_dropdown_manager} />
+                    </td>
+                    <td>
+                      <div id={`toggle_el_${manager?.property_type_options?.[property_key]?.edit_popover_trigger_button_manager?.id}`}>
+                        <Button manager={manager?.property_type_options?.[property_key]?.edit_popover_trigger_button_manager} />
+                      </div>
+                      <Popover manager={manager?.property_type_options?.[property_key]?.edit_popover_manager} >
+                        {#snippet content()}
+                        <div>
+                          {#if ["array_literal", "array_uniform_literal", "object_literal","object_uniform_literal", "table_id_for_foreign_row_literal"].includes(manager?.val_at_path?.properties?.[property_key]?.type)}
+                            <Button manager={manager?.property_type_options?.[property_key]?.to_breadcrumbs_button_manager} /> 
+                          {/if}
+                          {#if manager?.val_at_path?.properties.length > 0 && (manager?.val_at_path?.properties?.[property_key]?.display_order == null || manager?.val_at_path.properties?.[property_key]?.display_order > 0)}
+                            <Button manager={manager?.property_type_options?.[property_key]?.shift_up_button_manager} />
+                          {/if}
+                          {#if manager?.val_at_path?.properties?.[property_key]?.display_order != null && manager?.val_at_path?.properties?.[property_key]?.display_order < Object.keys(manager?.val_at_path?.properties || {}).length - 1}
+                          <Button manager={manager?.property_type_options?.[property_key]?.shift_down_button_manager} />
+                          {/if}
+                          <Button manager={manager?.property_type_options?.[property_key]?.delete_button_manager} />
+                        </div>
+                        {/snippet}
+                      </Popover>
+                    </td>
+                  </tr>
+                {/each}
+              {/if}
+            </tbody>
+          </table>
+        </div>
+        <div class="cardns" style="padding: 1rem; margin-top: 1rem;">
+          <h5>Add property</h5>
+          <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: end;">
+            <TextInput manager={manager?.property_key_to_add_text_manager} />
+            <Button manager={manager?.property_key_to_add_finish_button_manager} />
+          </div>
+        </div>
+      {:else if manager?.val_at_path?.type == "table_id_for_foreign_row_literal"}
+        <div style="margin-top: .5rem;">
+          <h3 class="label">Attributes</h3>
+          {#if Array.isArray(manager?.table_options) && manager?.table_options.length > 0}
+            <Dropdown manager={manager?.table_id_for_foreign_row_text_input_manager} />
+          {:else}
+            <p>No Table Options Found</p>
+          {/if}
+        </div>
+      {/if}
+    {/if}
+  </div>
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>
+
+<style>
+  .property_table_container {
+    display: flex;
+    flex-direction: column;
+    max-width: 100% !important;
+    overflow: scroll;
+  }
+  .property_table {
+    margin: 0;
+  }
+  .property_table th {
+    font-size: 1.2rem;
+  }
+  h4 {
+    margin: 0;
+  }
+  .elements_container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 14rem, 100%), 1fr));
+  }
+  .button_internal_container {
+    word-break: break-word;
+  }
+  .button_header {
+    font-size: 1.6rem;
+  }
+  .button_sub_text{
+    font-size: 1.2rem;
+  }
+</style>