sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/ContentInput/AttributesInput/index.svelte

@@ -0,0 +1,352 @@
+<script>
+  import SliderConfig from "./CustomConfig/Slider/index.svelte"
+  import TimeInputConfig from "./CustomConfig/TimeInput/index.svelte"
+  import DropdownConfig from "./CustomConfig/Dropdown/index.svelte"
+  import NumberConfig from "./CustomConfig/Number/index.svelte"
+  import TableAdvancedConfig from "./CustomConfig/TableAdvanced/index.svelte"
+  import QrConfig from "./CustomConfig/Qr/index.svelte"
+  import TextInputConfig from "./CustomConfig/TextInput/index.svelte"
+  import ImageConfig from "./CustomConfig/Image/index.svelte"
+  import AudioConfig from "./CustomConfig/Audio/index.svelte"
+  import Popover from "../../Popover/index.svelte"
+  import Button from "../../Button/index.svelte"
+  import Slider from "../../Slider/index.svelte"
+  import Checkbox from "../../Checkbox/index.svelte"
+  import IconInput from "../../IconInput/index.svelte"
+  import LocationInput from "../../LocationInput/index.svelte"
+  import TextInput from "../../TextInput/index.svelte"
+  import TimeInput from "../../TimeInput/index.svelte"
+  import ColorInput from "../../ColorInput/index.svelte"
+  import CronInput from "../../CronInput/index.svelte"
+  import Dropdown from "../../Dropdown/index.svelte"
+  import VariablePathInput from "../../VariablePathInput/index.svelte"
+  import DefinedTypeInput from "./DefinedTypeInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
+    <div
+      onpointerenter={() => manager?.set_focused_selector_id(manager?.selector_id, true)}
+      onpointercancel={() => manager?.set_focused_selector_id(null)}
+      onpointerleave={() => manager?.set_focused_selector_id(null)}
+    >
+      <p class="label">Element ID</p>
+      <p>{manager?.selector_id}</p>
+    </div>
+    {#if manager?.content_type == "number"}
+      <NumberConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "dropdown"}
+      <DropdownConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "color_input"}
+      color_input att tbd
+    {:else if manager?.content_type == "color"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.val_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_show_details_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_show_details_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.size_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.size_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.border_radius_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.border_radius_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "table_advanced"}
+      <TableAdvancedConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "image"}
+      <ImageConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "audio"}
+      <AudioConfig manager={manager?.attributes_manager} />
+    {:else if ["h1", "h2", "h3", "h4", "h5", "base_text", "em", "strong", "strong_em", "pre"].includes(manager?.content_type)}
+      <DefinedTypeInput manager={manager?.attributes_manager?.content_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.content_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.text_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.text_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "code_inline"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.content_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.content_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_show_copy_button_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_show_copy_button_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.text_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.text_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "section"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.background_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.background_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.border_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.border_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.border_radius_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.border_radius_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.padding_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.padding_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "figure"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.caption_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.caption_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "div"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.background_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.background_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.border_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.border_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.border_radius_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.border_radius_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.padding_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.padding_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.align_content_defined_type_input_manager}>
+        {#snippet content()}
+          <Dropdown manager={manager?.attributes_manager?.align_content_dropdown_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.justify_content_defined_type_input_manager}>
+        {#snippet content()}
+          <Dropdown manager={manager?.attributes_manager?.justify_content_dropdown_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.gap_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.gap_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "show_conditions"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_run_serverside_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_run_serverside_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "show_conditions_item"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_show_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_show_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "checkbox"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.val_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.type_defined_type_input_manager}>
+        {#snippet content()}
+          <Dropdown manager={manager?.attributes_manager?.type_dropdown_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.size_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.size_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "code"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.content_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.content_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.language_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.language_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "json"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.val_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <Checkbox manager={manager?.attributes_manager?.is_show_buttons_checkbox_manager} />
+      <Checkbox manager={manager?.attributes_manager?.is_edit_mode_buttons_checkbox_manager} />
+      <Checkbox manager={manager?.attributes_manager?.is_popover_checkbox_manager} />
+      <Checkbox manager={manager?.attributes_manager?.is_inline_checkbox_manager} />
+    {:else if manager?.content_type == "location"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <LocationInput manager={manager?.attributes_manager?.val_location_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <Checkbox manager={manager?.attributes_manager?.is_popover_checkbox_manager} />
+      <Checkbox manager={manager?.attributes_manager?.is_inline_checkbox_manager} />
+    {:else if manager?.content_type == "qr"}
+      <QrConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "text_input"}
+      <TextInputConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "slider"}
+      <SliderConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "time_input"}
+      <TimeInputConfig manager={manager?.attributes_manager} />
+    {:else if manager?.content_type == "time"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <TimeInput manager={manager?.attributes_manager?.val_time_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <Dropdown manager={manager?.attributes_manager?.val_format_dropdown_manager} />
+      <Dropdown manager={manager?.attributes_manager?.display_format_dropdown_manager} />
+      <ColorInput manager={manager?.attributes_manager?.text_color_color_input_manager} />
+    {:else if manager?.content_type == "x_post"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.post_id_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.post_id_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_dark_theme_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_dark_theme_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "youtube_video"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.video_id_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.video_id_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_dark_theme_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_dark_theme_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "link"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.href_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.href_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.display_text_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.display_text_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.text_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.text_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_show_preview_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_show_preview_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "icon_input"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.is_icon_only_defined_type_input_manager}>
+        {#snippet content()}
+          <Checkbox manager={manager?.attributes_manager?.is_icon_only_checkbox_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <IconInput manager={manager?.attributes_manager?.val_icon_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "icon"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.icon_id_defined_type_input_manager}>
+        {#snippet content()}
+          <IconInput manager={manager?.attributes_manager?.icon_id_icon_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.icon_size_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.icon_size_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.icon_sw_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.icon_sw_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.icon_deg_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.icon_deg_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.icon_color_defined_type_input_manager}>
+        {#snippet content()}
+          <ColorInput manager={manager?.attributes_manager?.icon_color_color_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "cron_input"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <CronInput manager={manager?.attributes_manager?.val_cron_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "cron"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <CronInput manager={manager?.attributes_manager?.val_cron_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "loop"}
+      <h3 class="label">Path with items to loop over</h3>
+      <VariablePathInput manager={manager?.attributes_manager?.val_input_manager} />
+      <TextInput manager={manager?.attributes_manager?.iter_identifier_text_input_manager} />
+      <DefinedTypeInput manager={manager?.attributes_manager?.join_text_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.join_text_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {:else if manager?.content_type == "slot"}
+      <DefinedTypeInput manager={manager?.attributes_manager?.val_defined_type_input_manager}>
+        {#snippet content()}
+          <TextInput manager={manager?.attributes_manager?.val_text_input_manager} />
+        {/snippet}
+      </DefinedTypeInput>
+    {/if}
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>