sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte

@@ -1,64 +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>
-
-<Popover manager={manager?.popover_manager}>
-  {#snippet header()}
-    <h3>{manager?.header}</h3>
-    {#if Array.isArray(manager?.avail_element_ids) && manager?.avail_element_ids.length > 6}
-      <TextInput manager={manager?.search_text_input_manager} />
-      <div style="height: 1rem;"></div>
-    {/if}
-  {/snippet}
-  {#snippet content()}
-    {#key manager?.avail_element_ids_filtered}
-      <div class="elements_container">
-        {#if Array.isArray(manager?.avail_element_ids_filtered) && manager?.avail_element_ids_filtered?.length > 0}
-          {#each manager?.avail_element_ids_filtered as avail_element_id_filtered (avail_element_id_filtered)}
-            <Button manager={manager?.all_element_options_prepped?.[avail_element_id_filtered]?.button_manager}>
-              {#snippet content()}
-                <div class="button_internal_container">
-                  <h5>{manager?.all_element_options_prepped?.[avail_element_id_filtered]?.name}</h5>
-                  <p>{avail_element_id_filtered}</p>
-                </div>
-              {/snippet}
-            </Button>
-          {/each}
-          <Button manager={manager?.preempt_set_el_from_paste_button_manager}>
-            {#snippet content()}
-              <div class="button_internal_container">
-                <h5>Paste astc/markdown</h5>
-                <p>paste</p>
-              </div>
-            {/snippet}
-          </Button>
-        {:else}
-          <p>No available elements found</p>
-        {/if}
-      </div>
-    {/key}
-  {/snippet}
-</Popover>
-
-
-<style>
-.elements_container {
-  display: grid;
-  gap: .5rem;
-  grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 14rem, 100%), 1fr));
-}
-.button_internal_container {
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-}
-.button_internal_container h5 {
-  line-height: 1.1 !important;
-}
-</style>

package/src/lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte.js

@@ -1,97 +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 { node_types, set_closurable, deep_copy } from "$lib/client/index.js"
-
-export function create_add_element_manager(config) {
-  let header = $derived(set_closurable(config?.header, "Add Element"))
-  let avail_element_ids = $derived(set_closurable(config?.avail_element_ids, null))
-
-  let popover_manager = $state(null)
-  let all_element_options_prepped = $state(null)
-  let preempt_set_el_from_paste_button_manager = $state(null)
-  let search_text_input_manager = $state(null)
-
-  const avail_element_ids_filtered = $derived(
-    search_text_input_manager?.val === null || search_text_input_manager?.val === ""
-      ? avail_element_ids.sort()
-      : avail_element_ids
-          .filter(
-            (h) =>
-              h.includes(search_text_input_manager?.val) || node_types[h]?.name.includes(search_text_input_manager?.val)
-          )
-          .sort()
-  )
-
-  function init(config) {
-    popover_manager = create_popover_manager({
-      min_width: 320,
-      target_width: 600,
-      min_height: 320,
-      target_height: 600,
-      type: "center",
-    })
-    search_text_input_manager = create_text_input_manager({
-      type: "search",
-      autocomplete: "off",
-      placeholder: "search",
-    })
-    let all_element_options_prepped_loc = {}
-    if (node_types && Object.keys(node_types || {}).length > 0) {
-      for (let [node_key, node_value] of Object.entries(node_types)) {
-        all_element_options_prepped_loc[node_key] = {
-          id: node_key,
-          name: node_value?.name,
-          button_manager: create_button_manager({
-            type: "outlined",
-            min_height: 14,
-            on_click: () => {
-              popover_manager.close()
-              search_text_input_manager.set_val(null)
-              if (typeof config?.on_item_click == "function") {
-                config?.on_item_click(node_key)
-              }
-            },
-          }),
-        }
-      }
-    }
-    all_element_options_prepped = all_element_options_prepped_loc
-    preempt_set_el_from_paste_button_manager = create_button_manager({
-      type: "outlined",
-      min_height: 14,
-      on_click: () => {
-        popover_manager.close()
-        search_text_input_manager.set_val(null)
-        if (typeof config?.on_item_click == "function") {
-          config?.on_item_click("paste")
-        }
-      },
-    })
-  }
-  init(config)
-
-  return {
-    get header() {
-      return header
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get all_element_options_prepped() {
-      return all_element_options_prepped
-    },
-    get preempt_set_el_from_paste_button_manager() {
-      return preempt_set_el_from_paste_button_manager
-    },
-    get search_text_input_manager() {
-      return search_text_input_manager
-    },
-    get avail_element_ids() {
-      return avail_element_ids
-    },
-    get avail_element_ids_filtered() {
-      return avail_element_ids_filtered
-    },
-  }
-}

package/src/lib/Components/ContentInput/ContentPanelBuilder/ElementList/index.svelte

@@ -1,184 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import Popover from "$lib/Components/Popover/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import AddElement from "$lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte"
-  import Self from "./index.svelte"
-  import { node_types } from "$lib/client/index.js"
-
-  let { manager, element_manager } = $props()
-</script>
-
-<div
-  class="container"
-  class:is_highlight={element_manager?.element?.selector_id &&
-    element_manager?.element?.selector_id == manager?.focused_selector_id}
-  class:is_drop_dragover={manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id}
-  role="listitem"
-  draggable="true"
-  aria-grabbed="false"
-  ondragover={(e) => manager?.handle_element_child_drag_over(e, element_manager?.element?.selector_id)}
-  ondrop={(e) => manager?.handle_element_child_drag_drop(e, element_manager?.element?.selector_id)}
-  ondragstart={(e) => manager?.handle_element_child_drag_start(e, element_manager?.element?.selector_id)}
-  ondragend={(e) => manager?.handle_element_child_drag_end(e, element_manager?.element?.selector_id)}
->
-  <div
-    class="event_handler"
-    onpointerenter={() => manager?.set_focused_selector_id(element_manager?.element?.selector_id)}
-    onpointercancel={() => manager?.set_focused_selector_id(null)}
-    onpointerleave={() => manager?.set_focused_selector_id(null)}
-  >
-    <div class="el_row" id={`selector_id_${element_manager?.element?.selector_id}`}>
-      {#if element_manager?.element}
-        {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && element_manager?.element?.selector_id != manager?.dragging_selector_id && !manager?.dragged_over_element_child?.is_children}
-          <div class="drop_area" style="left: 0; top: 0;">Move Before Element</div>
-        {/if}
-        <div class="el_name">
-          <h4 class="el_title">
-            {element_manager?.element?.type_id}
-          </h4>
-          <p class="el_id">{element_manager?.element?.selector_id}</p>
-          {#if Object.keys(node_types?.[element_manager?.element?.type_id]?.attributes || {})?.length > 0 || node_types?.[element_manager?.element?.type_id]?.custom_attributes_input}
-            <Button manager={element_manager?.edit_attributes_popover_button_manager} />
-          {/if}
-          {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && Object.keys(node_types?.[element_manager?.element?.type_id]?.child_elements || {}).length > 0}
-            <div
-              class="child_drop"
-              role="listitem"
-              ondragover={(e) =>
-                manager?.handle_element_child_drag_over(e, element_manager?.element?.selector_id, true)}
-              ondrop={(e) => manager?.handle_element_child_drag_drop(e, element_manager?.element?.selector_id, true)}
-              class:is_child_drop_dragover={manager?.dragged_over_element_child?.selector_id ==
-                element_manager?.element?.selector_id && manager?.dragged_over_element_child?.is_children}
-            >
-              Child Drop Zone
-            </div>
-          {/if}
-        </div>
-      {/if}
-      <div style="display: flex; flex: 0;">
-        <div style="display: flex;">
-          {#if !element_manager?.element}
-            <Button manager={element_manager?.add_child_button_manager} />
-          {:else if Array.isArray(element_manager?.avail_child_element_ids) && element_manager?.avail_child_element_ids?.length > 0}
-            <Button manager={element_manager?.small_preempt_add_child_element_button_manager} />
-          {/if}
-          {#if element_manager?.element}
-            <Button manager={element_manager?.extra_popover_button_manager} />
-          {/if}
-          <Popover manager={element_manager?.extra_popover_manager}>
-            {#snippet content()}
-              <Button manager={element_manager?.reset_ids_button_manager} />
-              <Button manager={element_manager?.copy_markdown_button_manager} />
-              <Button manager={element_manager?.copy_astc_button_manager} />
-              {#if Array.isArray(element_manager?.avail_child_element_ids) && element_manager?.avail_child_element_ids?.length > 0}
-                <Button manager={element_manager?.preempt_add_child_element_button_manager} />
-              {/if}
-              {#if Array.isArray(element_manager?.avail_sibling_element_ids) && element_manager?.avail_sibling_element_ids?.length > 0}
-                <Button manager={element_manager?.preempt_add_sibling_element_below_button_manager} />
-              {/if}
-              {#if element_manager?.total_siblings > 0}
-                {#if element_manager?.element_index_of_siblings > 5}
-                  <Button manager={element_manager?.shift_element_up_5_button_manager} />
-                {/if}
-                {#if element_manager?.element_index_of_siblings > 0}
-                  <Button manager={element_manager?.shift_element_up_button_manager} />
-                {/if}
-                {#if element_manager?.element_index_of_siblings < element_manager?.total_siblings - 1}
-                  <Button manager={element_manager?.shift_element_down_button_manager} />
-                {/if}
-                {#if element_manager?.element_index_of_siblings < element_manager?.total_siblings - 6}
-                  <Button manager={element_manager?.shift_element_down_5_button_manager} />
-                {/if}
-              {/if}
-              <Button manager={element_manager?.delete_button_manager} />
-            {/snippet}
-          </Popover>
-        </div>
-        <AddElement manager={element_manager?.add_element_manager} />
-      </div>
-    </div>
-  </div>
-  {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && element_manager?.element?.selector_id != manager?.dragging_selector_id && manager?.dragged_over_element_child?.is_children}
-    <div style="position: relative;">
-      <div class="drop_area" style="left: 1rem; top: 50%; ">Move to Element Children</div>
-    </div>
-  {/if}
-  {#if Array.isArray(element_manager?.children) && element_manager?.children.length > 0}
-    {#each element_manager.children as child, i}
-      <Self {manager} element_manager={child} />
-    {/each}
-  {/if}
-</div>
-
-<style>
-  * {
-    font-size: 1.4rem !important;
-    line-height: 1rem !important;
-  }
-  .container {
-    text-align: start;
-    padding-left: 0.8rem;
-  }
-  .is_highlight {
-    background-color: var(--shadow2-t);
-    border-radius: 0.5rem;
-    transition: 0.2s;
-  }
-  .el_row {
-    position: relative;
-    display: flex;
-    /* align-items: center; */
-    justify-content: space-between;
-    cursor: pointer;
-  }
-  .el_name {
-    display: flex;
-    align-items: center;
-    flex: 0;
-    margin-bottom: 0.8rem;
-  }
-  .el_title {
-    color: var(--g6-t);
-    font-weight: 600 !important;
-    margin-left: 0.5rem;
-  }
-  .is_drop_dragover {
-    background-color: oklch(var(--l12-t) var(--c10) var(--h16) / var(--o15));
-    border-radius: 0.5rem;
-  }
-  .drop_area {
-    position: absolute;
-    width: fit-content;
-    transform: translateY(-50%);
-    font-size: 1rem !important;
-    pointer-events: none;
-    border-radius: 0.5rem;
-    padding: 0.2rem 0.5rem;
-    border: 1px solid oklch(var(--l2-t) var(--c5) var(--h3) / var(--o22));
-    background-color: oklch(var(--l5-t) var(--c10) var(--h3) / var(--o20));
-    color: oklch(var(--l16-t) var(--c10) var(--h3));
-  }
-  .child_drop {
-    margin-left: 2rem;
-    border: 1px dotted var(--g3-t);
-    border-radius: 0.5rem;
-    display: grid;
-    place-content: center;
-    min-width: fit-content;
-    padding: 0.2rem 0.5rem;
-    white-space: nowrap;
-  }
-  .is_child_drop_dragover {
-    background-color: oklch(var(--l2-t) var(--c1) var(--h3) / var(--o15));
-    color: var(--g24-t);
-  }
-  .el_id {
-    color: var(--g8-t);
-    font-size: 1.2rem;
-    margin-left: 0.5rem;
-  }
-  .event_handler {
-    pointer-events: auto;
-  }
-</style>

package/src/lib/Components/ContentInput/ContentPanelBuilder/index.svelte

@@ -1,41 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import ElementsList from "./ElementList/index.svelte"
-  import AddElement from "$lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#if !manager?.selected_version_prepped?.element}
-  <Button manager={manager?.preempt_add_first_element_button_manager} />
-  <AddElement manager={manager?.first_el_add_element_manager} />
-{:else}
-  <div class="container" onpointerleave={() => manager?.set_focused_selector_id(null)}>
-    <ElementsList {manager} element_manager={manager?.selected_version_prepped} />
-    <div class="fade_overlay"></div>
-  </div>
-{/if}
-
-<style>
-  .container {
-    position: relative;
-    max-height: 80vh;
-    max-width: 100%;
-    overflow: scroll;
-  }
-  @media (max-width: 600px) {
-    .container {
-      max-height: 30vh;
-    }
-  }
-  .fade_overlay {
-    content: "";
-    position: sticky;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1rem;
-    background-image: linear-gradient(rgba(255, 255, 255, 0), var(--shadow2-t));
-    pointer-events: none;
-  }
-</style>

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

@@ -1,78 +0,0 @@
-<script>
-  import ContentPanelBuilder from "./ContentPanelBuilder/index.svelte"
-  import Content from "$lib/Components/Content/index.svelte"
-  import AttributesInput from "$lib/Components/ContentInput/AttributesInput/index.svelte"
-  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"
-
-  let { manager, panel_header } = $props()
-</script>
-
-<div class="container">
-  <div class="panel_builder">
-    {#if panel_header}
-      <div class="panel_header">
-        {@render panel_header()}
-      </div>
-    {/if}
-    <div class="panel_scroll" id={`panel_scroll_${manager?.id}`}>
-      <ContentPanelBuilder {manager} />
-    </div>
-  </div>
-  <div class="rich_editor">
-    <Content manager={manager?.content_manager} overall_manager={manager?.content_overall_manager} />
-  </div>
-</div>
-<AttributesInput manager={manager?.attributes_input} />
-<Popover manager={manager?.paste_astc_markdown_popover_manager}>
-  {#snippet content()}
-    <div>
-      <p>Note: for valid json make sure all keys and strings are in double quotes, and no trailing commas. example:</p>
-      <pre>
-{`{
-  "type_id": "div",
-  "children": []
-}`}
-  </pre>
-      <Dropdown manager={manager?.paste_astc_markdown_dropdown_manager} />
-      <TextInput manager={manager?.paste_astc_markdown_text_input_manager} />
-    </div>
-  {/snippet}
-  {#snippet footer()}
-    <Button manager={manager?.paste_astc_markdown_finish_button_manager} />
-  {/snippet}
-</Popover>
-
-<style>
-  .container {
-    display: flex;
-    max-height: 100dvh;
-    min-height: 0;
-  }
-  .panel_builder {
-    width: 35rem;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    border-right: 1px solid var(--shadow7-t);
-  }
-  .panel_header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-  .panel_scroll {
-    overflow: auto;
-    min-height: 0;
-    -webkit-overflow-scrolling: touch;
-  }
-  .rich_editor {
-    flex: 1;
-    padding: 0 0.5rem;
-    overflow: auto;
-    min-height: 0;
-    -webkit-overflow-scrolling: touch;
-  }
-</style>