sveltekit-ui 1.0.0

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Dropdown/index.svelte.js

@@ -0,0 +1,210 @@
+import { create_button_manager } from "../../../../Button/index.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
+import { create_slider_manager } from "../../../../Slider/index.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
+import { create_variable_path_input_manager } from "../../../../VariablePathInput/index.svelte.js"
+import { create_defined_type_input_manager } from "../../DefinedTypeInput/index.svelte.js"
+import { deep_copy, set_closurable } from "../../../../../client/index.js"
+
+export function create_dropdown_config_manager(config) {
+  let header_text_input_manager = $state(null)
+  let placeholder_text_input_manager = $state(null)
+  let is_multiselect_checkbox_manager = $state(null)
+  let is_set_null_button_checkbox_manager = $state(null)
+  let is_show_arrow_checkbox_manager = $state(null)
+  let is_button_compressed_checkbox_manager = $state(null)
+  let is_searchable_checkbox_manager = $state(null)
+  let target_width_slider_manager = $state(null)
+  let target_height_slider_manager = $state(null)
+  let val_text_input_manager = $state(null)
+  let val_defined_type_input_manager = $state(null)
+
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, false))
+
+  let options = $state([])
+  let options_prepped = $state([])
+  let key_to_add_text_input_manager = $state(null)
+  let name_to_add_text_input_manager = $state(null)
+  let add_option_button_manager = $state(null)
+
+  function set_options_prepped() {
+    let options_prepped_loc = []
+    if (Array.isArray(options) && options.length > 0) {
+      for (let i = 0; i < options.length; i++) {
+        options_prepped_loc.push({
+          i: i,
+          option: options?.[i],
+          delete_button_manager: create_button_manager({
+            type: "soft",
+            color: "var(--error-t)",
+            is_uniform: true,
+            support_icon: "x",
+            on_click: () => {
+              options = (Array.isArray(options) ? options : []).filter((_, index) => index !== i)
+              set_options_prepped()
+            },
+          }),
+        })
+      }
+    }
+    options_prepped = options_prepped_loc
+  }
+
+  function init(config) {
+    val_text_input_manager = create_text_input_manager({
+      val: config?.val?.val ?? null,
+    })
+    val_defined_type_input_manager = create_defined_type_input_manager({
+      variables_data_type: () => variables_data_type,
+      label: "Val",
+      attribute_root_key: "val",
+      attribute_const_val: () => val_text_input_manager?.val,
+      attributes: config?.val,
+    })
+    options = config?.val?.options ?? []
+    set_options_prepped()
+    header_text_input_manager = create_text_input_manager({ label: "Header Text", placeholder: "Some Header" })
+    placeholder_text_input_manager = create_text_input_manager({
+      label: "Button Placeholder",
+      placeholder: "Select",
+      val: config?.val?.placeholder ?? "Select",
+    })
+    is_multiselect_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Multiselect",
+      val: config?.val?.is_multiselect ?? false,
+    })
+    is_set_null_button_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Clear Button",
+      val: config?.val?.is_set_null_button ?? true,
+    })
+    is_show_arrow_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Show Arrow",
+      val: config?.val?.is_show_arrow ?? true,
+    })
+    is_button_compressed_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Button Compressed",
+      val: config?.val?.is_button_compressed ?? true,
+    })
+    is_searchable_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Searchable",
+      val: config?.val?.is_searchable ?? false,
+    })
+    target_width_slider_manager = create_slider_manager({
+      label: "Target Width",
+      min: 20,
+      max: 1000,
+      step: 5,
+      val: config?.val?.target_width ?? 250,
+    })
+    target_height_slider_manager = create_slider_manager({
+      label: "Target Height",
+      min: 20,
+      max: 1000,
+      step: 5,
+      val: config?.val?.target_height ?? 250,
+    })
+    key_to_add_text_input_manager = create_text_input_manager({
+      label: "Key",
+      placeholder: "some_key",
+    })
+    name_to_add_text_input_manager = create_text_input_manager({
+      label: "Name",
+      placeholder: "Some Name",
+    })
+    add_option_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Add Option",
+      support_icon: "plus",
+      is_compressed: true,
+      is_disabled: () =>
+        key_to_add_text_input_manager?.val == null ||
+        key_to_add_text_input_manager?.val?.length < 1 ||
+        name_to_add_text_input_manager?.val == null ||
+        name_to_add_text_input_manager?.val?.length < 1,
+      mt: 1,
+      on_click: () => {
+        options = [
+          ...(Array.isArray(options) ? options : []),
+          { key: key_to_add_text_input_manager?.val, name: name_to_add_text_input_manager?.val },
+        ]
+        set_options_prepped()
+        key_to_add_text_input_manager.set_val(null)
+        name_to_add_text_input_manager.set_val(null)
+      },
+    })
+  }
+  init(config)
+
+  let val = $derived({
+    ...val_defined_type_input_manager?.val,
+    options: options,
+    is_multiselect: is_multiselect_checkbox_manager?.val,
+    is_set_null_button: is_set_null_button_checkbox_manager?.val,
+    is_show_arrow: is_show_arrow_checkbox_manager?.val,
+    is_button_compressed: is_button_compressed_checkbox_manager?.val,
+    is_searchable: is_searchable_checkbox_manager?.val,
+    header: header_text_input_manager?.val,
+    placeholder: placeholder_text_input_manager?.val,
+    target_width: target_width_slider_manager?.val,
+    target_height: target_height_slider_manager?.val,
+  })
+
+  return {
+    get val() {
+      return val
+    },
+    get val_text_input_manager() {
+      return val_text_input_manager
+    },
+    get val_defined_type_input_manager() {
+      return val_defined_type_input_manager
+    },
+    get options() {
+      return options
+    },
+    get header_text_input_manager() {
+      return header_text_input_manager
+    },
+    get placeholder_text_input_manager() {
+      return placeholder_text_input_manager
+    },
+    get is_multiselect_checkbox_manager() {
+      return is_multiselect_checkbox_manager
+    },
+    get is_set_null_button_checkbox_manager() {
+      return is_set_null_button_checkbox_manager
+    },
+    get is_show_arrow_checkbox_manager() {
+      return is_show_arrow_checkbox_manager
+    },
+    get is_button_compressed_checkbox_manager() {
+      return is_button_compressed_checkbox_manager
+    },
+    get is_searchable_checkbox_manager() {
+      return is_searchable_checkbox_manager
+    },
+    get target_width_slider_manager() {
+      return target_width_slider_manager
+    },
+    get target_height_slider_manager() {
+      return target_height_slider_manager
+    },
+    get key_to_add_text_input_manager() {
+      return key_to_add_text_input_manager
+    },
+    get name_to_add_text_input_manager() {
+      return name_to_add_text_input_manager
+    },
+    get add_option_button_manager() {
+      return add_option_button_manager
+    },
+    get options_prepped() {
+      return options_prepped
+    },
+  }
+}

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

@@ -0,0 +1,28 @@
+<script>
+  import StoragePicker from "../../../../StoragePicker/index.svelte"
+  import TextInput from "../../../../TextInput/index.svelte"
+  import Checkbox from "../../../../Checkbox/index.svelte"
+  import Slider from "../../../../Slider/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<StoragePicker manager={manager?.storage_picker_manager} />
+<TextInput manager={manager?.storage_id_text_input_manager} />
+<p style="font-size: 1.2rem;">
+  if only storage_id is provided the src values can be autogenerated at time of page load. Also, if the images are not
+  public urls a signed url can be generated and used for src values on page load
+</p>
+<TextInput manager={manager?.src_text_input_manager} />
+<TextInput manager={manager?.src_quick_text_input_manager} />
+<Checkbox manager={manager?.is_storage_id_public_checkbox_manager} />
+<TextInput manager={manager?.alt_text_input_manager} />
+<TextInput manager={manager?.image_width_text_input_manager} />
+<TextInput manager={manager?.image_height_text_input_manager} />
+<TextInput manager={manager?.image_aspect_ratio_text_input_manager} />
+<TextInput manager={manager?.mime_type_text_input_manager} />
+<Slider manager={manager?.display_max_height_slider_manager} />
+<Slider manager={manager?.display_max_width_slider_manager} />
+<Slider manager={manager?.border_radius_slider_manager} />
+<Slider manager={manager?.bg_img_blur_slider_manager} />
+<Slider manager={manager?.bg_img_opacity_slider_manager} />

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Image/index.svelte.js

@@ -0,0 +1,224 @@
+import { create_storage_picker_manager } from "../../../../StoragePicker/index.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
+import { create_slider_manager } from "../../../../Slider/index.svelte.js"
+import { set_closurable, get_image_dimensions_from_src } from "../../../../../client/index.js"
+
+export function create_image_config_manager(config) {
+  let storage_picker_manager = $state(null)
+  let storage_id_text_input_manager = $state(null)
+  let alt_text_input_manager = $state(null)
+  let image_width_text_input_manager = $state(null)
+  let image_height_text_input_manager = $state(null)
+  let image_aspect_ratio_text_input_manager = $state(null)
+  let mime_type_text_input_manager = $state(null)
+  let is_storage_id_public_checkbox_manager = $state(null)
+  let src_text_input_manager = $state(null)
+  let src_quick_text_input_manager = $state(null)
+  let display_max_height_slider_manager = $state(null)
+  let display_max_width_slider_manager = $state(null)
+  let border_radius_slider_manager = $state(null)
+  let bg_img_blur_slider_manager = $state(null)
+  let bg_img_opacity_slider_manager = $state(null)
+
+  let storage_src = $derived(
+    set_closurable(config?.storage_src, "https://www.contibase.com/api/v1/storage/{storage_id}")
+  )
+
+  let val = $derived({
+    storage_id: storage_id_text_input_manager?.val,
+    alt: alt_text_input_manager?.val,
+    image_width: image_width_text_input_manager?.val,
+    image_height: image_height_text_input_manager?.val,
+    image_aspect_ratio: image_aspect_ratio_text_input_manager?.val,
+    mime_type: mime_type_text_input_manager?.val,
+    is_storage_id_public: is_storage_id_public_checkbox_manager?.val,
+    src: src_text_input_manager?.val,
+    src_quick: src_quick_text_input_manager?.val,
+    display_max_height: display_max_height_slider_manager?.val,
+    display_max_width: display_max_width_slider_manager?.val,
+    border_radius: border_radius_slider_manager?.val,
+    bg_img_blur: bg_img_blur_slider_manager?.val,
+    bg_img_opacity: bg_img_opacity_slider_manager?.val,
+  })
+
+  function set_val(input) {
+    storage_id_text_input_manager.set_val(input?.storage_id ?? null)
+    alt_text_input_manager.set_val(input?.alt ?? null)
+    image_width_text_input_manager.set_val(input?.image_width ?? null)
+    image_height_text_input_manager.set_val(input?.image_height ?? null)
+    image_aspect_ratio_text_input_manager.set_val(input?.image_aspect_ratio ?? null)
+    mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+    is_storage_id_public_checkbox_manager.set_val(input?.is_storage_id_public ?? null)
+    src_text_input_manager.set_val(input?.src ?? null)
+    src_quick_text_input_manager.set_val(input?.src_quick ?? null)
+    display_max_height_slider_manager.set_val(input?.display_max_height ?? null)
+    display_max_width_slider_manager.set_val(input?.display_max_width ?? null)
+    border_radius_slider_manager.set_val(input?.border_radius ?? null)
+    bg_img_blur_slider_manager.set_val(input?.bg_img_blur ?? null)
+    bg_img_opacity_slider_manager.set_val(input?.bg_img_opacity ?? null)
+  }
+
+  function init(config) {
+    console.log("init_image_conf", config)
+    storage_picker_manager = create_storage_picker_manager({
+      storage: config?.storage,
+      default_folder_path: config?.storage_default_folder_path,
+      storage_path: config?.storage_path,
+      storage_origins: ["storage"],
+      is_drop_zone: false,
+      accept: ["image/png", "image/jpeg", "image/webp", "image/gif"],
+      is_multiselect: false,
+      on_finish: async (input) => {
+        const src = storage_src.replace("{storage_id}", input?.id)
+        const dimensions = await get_image_dimensions_from_src(src)
+        storage_id_text_input_manager.set_val(input?.id ?? null)
+        alt_text_input_manager.set_val(input?.alt ?? null)
+        mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+        is_storage_id_public_checkbox_manager.set_val(input?.is_public ?? null)
+        image_width_text_input_manager.set_val(dimensions?.width ?? null)
+        image_height_text_input_manager.set_val(dimensions?.height ?? null)
+        image_aspect_ratio_text_input_manager.set_val(dimensions?.aspect_ratio ?? null)
+      },
+    })
+    storage_id_text_input_manager = create_text_input_manager({
+      label: "Storage ID",
+      placeholder: "storage_id",
+      val: config?.val?.storage_id,
+    })
+    alt_text_input_manager = create_text_input_manager({
+      label: "Alt",
+      placeholder: "alt",
+      val: config?.val?.alt,
+    })
+    image_width_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Width",
+      placeholder: "width",
+      val: config?.val?.image_width,
+    })
+    image_height_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Height",
+      placeholder: "height",
+      val: config?.val?.image_height,
+    })
+    image_aspect_ratio_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Aspect Ratio",
+      placeholder: "aspect ratio",
+      val: config?.val?.image_aspect_ratio,
+    })
+    mime_type_text_input_manager = create_text_input_manager({
+      label: "Mime Type",
+      placeholder: "mime_type",
+      val: config?.val?.mime_type,
+    })
+    is_storage_id_public_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Storage ID Public",
+      val: config?.val?.is_storage_id_public,
+    })
+    src_text_input_manager = create_text_input_manager({
+      label: "src",
+      placeholder: "src",
+      val: config?.val?.src,
+    })
+    src_quick_text_input_manager = create_text_input_manager({
+      label: "src quick (low quality placeholder image)",
+      placeholder: "src_quick",
+      val: config?.val?.src_quick,
+    })
+    display_max_height_slider_manager = create_slider_manager({
+      label: "Display Max Height",
+      val: config?.val?.display_max_height,
+      is_nullable: true,
+      min: 0,
+      max: 2000,
+      step: 1,
+    })
+    display_max_width_slider_manager = create_slider_manager({
+      label: "Display Max Width",
+      val: config?.val?.display_max_width,
+      is_nullable: true,
+      min: 0,
+      max: 2000,
+      step: 1,
+    })
+    border_radius_slider_manager = create_slider_manager({
+      label: "Border Radius",
+      val: config?.val?.border_radius,
+      min: 0,
+      max: 5,
+      step: 0.1,
+    })
+    bg_img_blur_slider_manager = create_slider_manager({
+      label: "Bg Image Blur",
+      val: config?.val?.bg_img_blur,
+      min: 0,
+      max: 25,
+      step: 1,
+    })
+    bg_img_opacity_slider_manager = create_slider_manager({
+      label: "Bg Image Opacity",
+      val: config?.val?.bg_img_opacity,
+      min: 0,
+      max: 1,
+      step: 0.1,
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get storage_picker_manager() {
+      return storage_picker_manager
+    },
+    get storage_id_text_input_manager() {
+      return storage_id_text_input_manager
+    },
+    get alt_text_input_manager() {
+      return alt_text_input_manager
+    },
+    get image_width_text_input_manager() {
+      return image_width_text_input_manager
+    },
+    get image_height_text_input_manager() {
+      return image_height_text_input_manager
+    },
+    get image_aspect_ratio_text_input_manager() {
+      return image_aspect_ratio_text_input_manager
+    },
+    get mime_type_text_input_manager() {
+      return mime_type_text_input_manager
+    },
+    get is_storage_id_public_checkbox_manager() {
+      return is_storage_id_public_checkbox_manager
+    },
+    get src_text_input_manager() {
+      return src_text_input_manager
+    },
+    get src_quick_text_input_manager() {
+      return src_quick_text_input_manager
+    },
+    get display_max_height_slider_manager() {
+      return display_max_height_slider_manager
+    },
+    get display_max_width_slider_manager() {
+      return display_max_width_slider_manager
+    },
+    get border_radius_slider_manager() {
+      return border_radius_slider_manager
+    },
+    get bg_img_blur_slider_manager() {
+      return bg_img_blur_slider_manager
+    },
+    get bg_img_opacity_slider_manager() {
+      return bg_img_opacity_slider_manager
+    },
+    set_val,
+  }
+}

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

@@ -0,0 +1,44 @@
+<script>
+  import Button from "../../../../Button/index.svelte"
+  import Checkbox from "../../../../Checkbox/index.svelte"
+  import TextInput from "../../../../TextInput/index.svelte"
+  import ColorInput from "../../../../ColorInput/index.svelte"
+  import Dropdown from "../../../../Dropdown/index.svelte"
+  import VariablePathInput from "../../../../VariablePathInput/index.svelte"
+  import Color from "../../../../Color/index.svelte"
+  import DefinedTypeInput from "../../DefinedTypeInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<VariablePathInput manager={manager?.val_from_variable_path_input_manager} />
+<DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
+  {#snippet content()}
+    <TextInput manager={manager?.val_text_input_manager} />
+  {/snippet}
+</DefinedTypeInput>
+<Dropdown manager={manager?.round_dropdown_manager} />
+{#if manager?.val?.round}
+  <TextInput manager={manager?.round_text_input_manager} />
+{/if}
+<Dropdown manager={manager?.shorthand_dropdown_manager} />
+<p class="label">Base Color</p>
+<ColorInput manager={manager?.base_color_manager} />
+<Checkbox manager={manager?.is_percentage_checkbox_manager} />
+<Checkbox manager={manager?.is_progress_bar_checkbox_manager} />
+{#if manager?.val?.is_progress_bar}
+  <Checkbox manager={manager?.is_hide_number_checkbox_manager} />
+{/if}
+<Checkbox manager={manager?.is_dynamic_color_checkbox_manager} />
+{#if manager?.val?.is_dynamic_color}
+  <p class="label">Start Color</p>
+  <ColorInput manager={manager?.start_color_manager} />
+  <p class="label">End Color</p>
+  <ColorInput manager={manager?.end_color_manager} />
+{/if}
+{#if manager?.val?.is_progress_bar || manager?.val?.is_dynamic_color}
+  <TextInput manager={manager?.progress_bar_start_text_input_manager} />
+  <TextInput manager={manager?.progress_bar_end_text_input_manager} />
+{/if}
+<Dropdown manager={manager?.separators_dropdown_manager} />
+<Checkbox manager={manager?.is_tooltip_checkbox_manager} />