sveltekit-ui 1.1.17 → 1.1.19

package/dist/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte

@@ -0,0 +1,64 @@
+<script>
+  import Popover from "../../../Popover/index.svelte"
+  import Button from "../../../Button/index.svelte"
+  import TextInput from "../../../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/dist/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte.js

@@ -0,0 +1,97 @@
+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 { node_types, set_closurable, deep_copy } from "../../../../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/dist/Components/ContentInput/ContentPanelBuilder/ElementList/index.svelte

@@ -0,0 +1,184 @@
+<script>
+  import Button from "../../../Button/index.svelte"
+  import Popover from "../../../Popover/index.svelte"
+  import TextInput from "../../../TextInput/index.svelte"
+  import AddElement from "../AddElement/index.svelte"
+  import Self from "./index.svelte"
+  import { node_types } from "../../../../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/dist/Components/ContentInput/ContentPanelBuilder/index.svelte

@@ -0,0 +1,41 @@
+<script>
+  import Button from "../../Button/index.svelte"
+  import ElementsList from "./ElementList/index.svelte"
+  import AddElement from "./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/dist/Components/ContentInput/index.svelte

@@ -0,0 +1,78 @@
+<script>
+  import ContentPanelBuilder from "./ContentPanelBuilder/index.svelte"
+  import Content from "../Content/index.svelte"
+  import AttributesInput from "./AttributesInput/index.svelte"
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+  import Dropdown from "../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>