sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/CronInput/index.svelte

@@ -1,78 +0,0 @@
-<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"
-
-  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/src/lib/Components/CronInput/index.svelte.js

@@ -1,198 +0,0 @@
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_unique_id, set_closurable, cron_to_english } from "$lib/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) {
-    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_nullable, 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/src/lib/Components/DataTypeInput/index.svelte

@@ -1,174 +0,0 @@
-<script>
-  import Popover from "$lib/Components/Popover/index.svelte"
-  import Button from "$lib/Components/Button/index.svelte"
-  import Breadcrumbs from "$lib/Components/Breadcrumbs/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import Dropdown from "$lib/Components/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>