sveltekit-ui 1.0.0

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Number/index.svelte.js

@@ -0,0 +1,273 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
+import { set_closurable } from "$lib/client/index.js"
+
+export function create_number_config_manager(config) {
+  let data_type = $state("float_literal")
+  let popover_manager = $state(null)
+  let popover_toggle_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let val_text_input_manager = $state(null)
+  let val_defined_type_input_manager = $state(null)
+  let round_dropdown_manager = $state(null)
+  let shorthand_dropdown_manager = $state(null)
+  let separators_dropdown_manager = $state(null)
+  let base_color_manager = $state(null)
+  let start_color_manager = $state(null)
+  let end_color_manager = $state(null)
+  let is_percentage_checkbox_manager = $state(null)
+  let is_progress_bar_checkbox_manager = $state(null)
+  let is_hide_number_checkbox_manager = $state(null)
+  let is_tooltip_checkbox_manager = $state(null)
+  let is_dynamic_color_checkbox_manager = $state(null)
+  let round_text_input_manager = $state(null)
+  let progress_bar_start_text_input_manager = $state(null)
+  let progress_bar_end_text_input_manager = $state(null)
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+
+  const number_base = {
+    val_from_variable_path: null,
+    val: null,
+    round: null,
+    round_by: 1,
+    shorthand: null,
+    is_percentage: false,
+    is_dynamic_color: false,
+    is_progress_bar: false,
+    is_hide_number: false,
+    base_color: null,
+    start_color: null,
+    end_color: null,
+    start_value: null,
+    end_value: null,
+    separators: null,
+    is_tooltip: false,
+  }
+
+  let val = $derived({
+    ...val_defined_type_input_manager?.val,
+    round: round_dropdown_manager?.val,
+    round_by: round_text_input_manager?.val,
+    shorthand: shorthand_dropdown_manager?.val,
+    is_percentage: is_percentage_checkbox_manager?.val,
+    is_dynamic_color: is_dynamic_color_checkbox_manager?.val,
+    is_progress_bar: is_progress_bar_checkbox_manager?.val,
+    is_hide_number: is_hide_number_checkbox_manager?.val,
+    base_color: base_color_manager?.val,
+    start_color: start_color_manager?.val,
+    end_color: end_color_manager?.val,
+    start_value: progress_bar_start_text_input_manager?.val,
+    end_value: progress_bar_end_text_input_manager?.val,
+    separators: separators_dropdown_manager?.val,
+    is_tooltip: is_tooltip_checkbox_manager?.val,
+  })
+
+  const round_options = [
+    { key: null, name: "None" },
+    { key: "nearest", name: "Nearest" },
+    { key: "floor", name: "Floor" },
+    { key: "ceil", name: "Ceil" },
+    { key: "precision", name: "Precision" },
+  ]
+  const shorthand_options = [
+    { key: null, name: "None" },
+    { key: "thousands", name: "Thousands (K)" },
+    { key: "millions", name: "Millions (M)" },
+    { key: "billions", name: "Billions (B)" },
+    { key: "trillions", name: "Trillions (T)" },
+    { key: "quadrillions", name: "Quadrillions (Qd)" },
+  ]
+
+  const separators_options = [
+    { key: null, name: "None" },
+    { key: "thousands_commas_period", name: "Commas/Period" },
+    { key: "thousands_periods_comma", name: "Periods/Comma" },
+  ]
+
+  function init(config) {
+    let val_loc = {}
+    for (let [key, value] of Object.entries(number_base)) {
+      val_loc[key] = config?.val?.[key] ?? value
+    }
+    popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 400,
+      min_height: 320,
+      target_height: 400,
+      type: "center",
+      header: "Number Options Builder",
+      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
+    })
+    popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: "Edit Number Options",
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    val_text_input_manager = create_text_input_manager({
+      label: "Val",
+      type: "number",
+      val: val_loc?.val,
+    })
+    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,
+    })
+    round_dropdown_manager = create_dropdown_manager({
+      label: "Round",
+      is_button_compressed: true,
+      val: val_loc?.round,
+      options: round_options,
+    })
+    shorthand_dropdown_manager = create_dropdown_manager({
+      label: "Shorthand",
+      is_button_compressed: true,
+      val: val_loc?.shorthand,
+      options: shorthand_options,
+    })
+    separators_dropdown_manager = create_dropdown_manager({
+      label: "Separators",
+      is_button_compressed: true,
+      val: val_loc?.separators,
+      options: separators_options,
+    })
+    base_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: val_loc?.base_color,
+    })
+    start_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: val_loc?.start_color,
+    })
+    end_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: val_loc?.end_color,
+    })
+    is_percentage_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Percentage",
+      val: val_loc?.is_percentage,
+    })
+    is_progress_bar_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Progress Bar",
+      val: val_loc?.is_progress_bar,
+    })
+    is_hide_number_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Hide Number",
+      val: val_loc?.is_hide_number,
+    })
+    is_tooltip_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Tooltip",
+      val: val_loc?.is_tooltip,
+    })
+    is_dynamic_color_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Dynamic Color",
+      val: val_loc?.is_dynamic_color,
+    })
+    round_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: val_loc?.round == "precision" ? "Significant Figures" : "Round By",
+      placeholder: 5,
+      val: val_loc?.round_by,
+    })
+    progress_bar_start_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Start Value",
+      placeholder: 0,
+      val: val_loc?.start_value,
+    })
+    progress_bar_end_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "End Value",
+      placeholder: 0,
+      val: val_loc?.end_value,
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      on_click: () => finish(),
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get data_type() {
+      return data_type
+    },
+    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 val_text_input_manager() {
+      return val_text_input_manager
+    },
+    get val_defined_type_input_manager() {
+      return val_defined_type_input_manager
+    },
+    get round_dropdown_manager() {
+      return round_dropdown_manager
+    },
+    get shorthand_dropdown_manager() {
+      return shorthand_dropdown_manager
+    },
+    get separators_dropdown_manager() {
+      return separators_dropdown_manager
+    },
+    get base_color_manager() {
+      return base_color_manager
+    },
+    get start_color_manager() {
+      return start_color_manager
+    },
+    get end_color_manager() {
+      return end_color_manager
+    },
+    get is_percentage_checkbox_manager() {
+      return is_percentage_checkbox_manager
+    },
+    get is_progress_bar_checkbox_manager() {
+      return is_progress_bar_checkbox_manager
+    },
+    get is_hide_number_checkbox_manager() {
+      return is_hide_number_checkbox_manager
+    },
+    get is_tooltip_checkbox_manager() {
+      return is_tooltip_checkbox_manager
+    },
+    get is_dynamic_color_checkbox_manager() {
+      return is_dynamic_color_checkbox_manager
+    },
+    get round_text_input_manager() {
+      return round_text_input_manager
+    },
+    get progress_bar_start_text_input_manager() {
+      return progress_bar_start_text_input_manager
+    },
+    get progress_bar_end_text_input_manager() {
+      return progress_bar_end_text_input_manager
+    },
+  }
+}

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Qr/index.svelte

@@ -0,0 +1,41 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Slider from "$lib/Components/Slider/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import ColorInput from "$lib/Components/ColorInput/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import DefinedTypeInput from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<Slider manager={manager?.margin_slider_manager} />
+<Slider manager={manager?.size_slider_manager} />
+<Slider manager={manager?.image_size_slider_manager} />
+<h3 class="label" style="margin: 0;">Type Number</h3>
+<p style="font-size: 1.2rem;">The amount of squares used. 0 is auto.</p>
+<Slider manager={manager?.type_number_slider_manager} />
+<Slider manager={manager?.border_radius_slider_manager} />
+<Slider manager={manager?.border_width_slider_manager} />
+<h3 class="label" style="margin: 0;">Error Correction Level</h3>
+<p style="font-size: 1.2rem;">Amount of data repetition in case part of Qr is not visable.</p>
+<Dropdown manager={manager?.error_correction_level_dropdown_manager} />
+<h3 class="label" style="margin: 0;">Color</h3>
+<ColorInput manager={manager?.color_manager} />
+<h3 class="label" style="margin: 0;">Corner Color</h3>
+<ColorInput manager={manager?.corner_color_manager} />
+<h3 class="label" style="margin: 0;">Background Color</h3>
+<ColorInput manager={manager?.background_color_manager} />
+<h3 class="label" style="margin: 0;">Border Color</h3>
+<ColorInput manager={manager?.border_color_manager} />
+<Checkbox manager={manager?.is_show_copy_checkbox_manager} />
+<Checkbox manager={manager?.is_show_download_checkbox_manager} />
+<DefinedTypeInput manager={manager?.data_defined_type_input_manager} >
+  {#snippet content()}
+    <TextInput manager={manager?.data_text_input_manager} />
+  {/snippet}
+</DefinedTypeInput>
+<TextInput manager={manager?.image_text_input_manager} />
+

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Qr/index.svelte.js

@@ -0,0 +1,203 @@
+import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
+import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
+import { deep_copy, set_closurable } from "$lib/client/index.js"
+
+export function create_qr_config_manager(config) {
+  let margin_slider_manager = $state(null)
+  let size_slider_manager = $state(null)
+  let image_size_slider_manager = $state(null)
+  let type_number_slider_manager = $state(null)
+  let border_radius_slider_manager = $state(null)
+  let border_width_slider_manager = $state(null)
+  let error_correction_level_dropdown_manager = $state(null)
+  let color_manager = $state(null)
+  let corner_color_manager = $state(null)
+  let background_color_manager = $state(null)
+  let border_color_manager = $state(null)
+  let data_text_input_manager = $state(null)
+  let data_defined_type_input_manager = $state(null)
+  let image_text_input_manager = $state(null)
+  let is_show_copy_checkbox_manager = $state(null)
+  let is_show_download_checkbox_manager = $state(null)
+
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+
+  let val = $derived({
+    margin: margin_slider_manager?.val,
+    size: size_slider_manager?.val,
+    image_size: image_size_slider_manager?.val,
+    type_number: type_number_slider_manager?.val,
+    border_radius: border_radius_slider_manager?.val,
+    border_width: border_width_slider_manager?.val,
+    error_correction_level: error_correction_level_dropdown_manager?.val,
+    color: color_manager?.val,
+    corner_color: corner_color_manager?.val,
+    background_color: background_color_manager?.val,
+    border_color: border_color_manager?.val,
+    is_show_copy: is_show_copy_checkbox_manager?.val,
+    is_show_download: is_show_download_checkbox_manager?.val,
+    ...data_defined_type_input_manager?.val,
+    image: image_text_input_manager?.val,
+  })
+
+  function init(config) {
+    margin_slider_manager = create_slider_manager({
+      label: "Margin",
+      min: 0,
+      max: 20,
+      step: 1,
+      val: config?.val?.margin ?? 10,
+    })
+    size_slider_manager = create_slider_manager({
+      label: "Size",
+      min: 50,
+      max: 1000,
+      step: 1,
+      val: config?.val?.size ?? 200,
+    })
+    image_size_slider_manager = create_slider_manager({
+      label: "Image Size",
+      min: 0,
+      max: 1,
+      step: 0.05,
+      val: config?.val?.image_size ?? 0.5,
+    })
+    type_number_slider_manager = create_slider_manager({
+      min: 0,
+      max: 40,
+      step: 1,
+      val: config?.val?.type_number ?? 0,
+    })
+    border_radius_slider_manager = create_slider_manager({
+      label: "Border Radius",
+      min: 0,
+      max: 5,
+      step: 0.5,
+      val: config?.val?.border_radius ?? 2,
+    })
+    border_width_slider_manager = create_slider_manager({
+      label: "Border Width",
+      min: 0,
+      max: 5,
+      step: 1,
+      val: config?.val?.border_width ?? 1,
+    })
+    error_correction_level_dropdown_manager = create_dropdown_manager({
+      is_button_compressed: true,
+      options: [
+        { key: "L", name: "L" },
+        { key: "M", name: "M" },
+        { key: "Q", name: "Q" },
+        { key: "H", name: "H" },
+      ],
+      val: config?.val?.error_correction_level ?? "Q",
+    })
+    color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.color ?? null,
+    })
+    corner_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.corner_color ?? null,
+    })
+    background_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.background_color ?? null,
+    })
+    border_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.border_color ?? null,
+    })
+    is_show_copy_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Show Copy",
+      val: config?.val?.is_show_copy ?? true,
+    })
+    is_show_download_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Show Download",
+      val: config?.val?.is_show_download ?? true,
+    })
+    data_text_input_manager = create_text_input_manager({
+      val: config?.val?.data ?? "https://www.sveltekit-ui.com",
+    })
+    data_defined_type_input_manager = create_defined_type_input_manager({
+      variables_data_type: () => variables_data_type,
+      label: "Data",
+      attribute_root_key: "data",
+      attribute_const_val: () => data_text_input_manager?.val,
+      attributes: config?.val,
+    })
+    image_text_input_manager = create_text_input_manager({
+      type: "url",
+      label: "Image Url",
+      val:
+        config?.val?.image_url ??
+        "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/icon.png",
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get margin_slider_manager() {
+      return margin_slider_manager
+    },
+    get size_slider_manager() {
+      return size_slider_manager
+    },
+    get image_size_slider_manager() {
+      return image_size_slider_manager
+    },
+    get type_number_slider_manager() {
+      return type_number_slider_manager
+    },
+    get border_radius_slider_manager() {
+      return border_radius_slider_manager
+    },
+    get border_width_slider_manager() {
+      return border_width_slider_manager
+    },
+    get error_correction_level_dropdown_manager() {
+      return error_correction_level_dropdown_manager
+    },
+    get color_manager() {
+      return color_manager
+    },
+    get corner_color_manager() {
+      return corner_color_manager
+    },
+    get background_color_manager() {
+      return background_color_manager
+    },
+    get border_color_manager() {
+      return border_color_manager
+    },
+    get data_text_input_manager() {
+      return data_text_input_manager
+    },
+    get data_defined_type_input_manager() {
+      return data_defined_type_input_manager
+    },
+    get image_text_input_manager() {
+      return image_text_input_manager
+    },
+    get is_show_copy_checkbox_manager() {
+      return is_show_copy_checkbox_manager
+    },
+    get is_show_download_checkbox_manager() {
+      return is_show_download_checkbox_manager
+    },
+  }
+}

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Slider/index.svelte

@@ -0,0 +1,19 @@
+<script>
+  import ColorInput from "$lib/Components/ColorInput/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import Slider from "$lib/Components/Slider/index.svelte"
+  import DefinedTypeInput from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<TextInput manager={manager?.min_text_input_manager} />
+<TextInput manager={manager?.max_text_input_manager} />
+<TextInput manager={manager?.step_text_input_manager} />
+<ColorInput manager={manager?.color_input_manager} />
+<Slider manager={manager?.val_count_slider_manager} />
+<DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
+  {#snippet content()}
+    <Slider manager={manager?.val_slider_manager} />
+  {/snippet}
+</DefinedTypeInput>

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Slider/index.svelte.js

@@ -0,0 +1,119 @@
+import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
+import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
+import { deep_copy, set_closurable } from "$lib/client/index.js"
+
+export function create_slider_config_manager(config) {
+  let val_slider_manager = $state(null)
+  let min_text_input_manager = $state(null)
+  let max_text_input_manager = $state(null)
+  let step_text_input_manager = $state(null)
+  let color_input_manager = $state(null)
+  let val_count_slider_manager = $state(1)
+  let val_defined_type_input_manager = $state(null)
+
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+
+  let val = $derived({
+    ...val_defined_type_input_manager?.val,
+    min: min_text_input_manager?.val,
+    max: max_text_input_manager?.val,
+    step: step_text_input_manager?.val,
+    color: color_input_manager?.val,
+  })
+
+  function set_val_amount(input) {
+    let val_loc = null
+    if (input > 1) {
+      val_loc = []
+      for (let i = 0; i < input; i++) {
+        val_loc.push(
+          Array.isArray(val_slider_manager?.val) && val_slider_manager?.val.length > i
+            ? val_slider_manager?.val[i]
+            : min_text_input_manager?.val
+        )
+      }
+    }
+    val_slider_manager.set_val(deep_copy(val_loc))
+  }
+
+  function init(config) {
+    min_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Min",
+      placeholder: "minimum",
+      val: config?.val?.min ?? 0,
+      on_change: (input) => val_slider_manager?.set_min(input),
+    })
+    max_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Max",
+      placeholder: "maximum",
+      val: config?.val?.max ?? 10,
+      on_change: (input) => val_slider_manager?.set_max(input),
+    })
+    step_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Step",
+      placeholder: "step",
+      val: config?.val?.step ?? null,
+      on_change: (input) => val_slider_manager?.set_step(input),
+    })
+    val_count_slider_manager = create_slider_manager({
+      label: "Tab Count",
+      val: Array.isArray(config?.val?.val) ? config?.val?.val.length : 1,
+      min: 1,
+      max: 5,
+      step: 1,
+      on_change: (input) => set_val_amount(input),
+    })
+    color_input_manager = create_color_input_manager({
+      label: "Color",
+      val: config?.val?.color ?? null,
+    })
+    val_slider_manager = create_slider_manager({
+      val: config?.val?.val ?? min_text_input_manager?.val ?? null,
+      min: min_text_input_manager?.val ?? 0,
+      max: max_text_input_manager?.val ?? 10,
+      step: step_text_input_manager?.val ?? 1,
+      is_nullable: true,
+      color: () => color_input_manager?.val,
+    })
+    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_slider_manager?.val,
+      attributes: config?.val,
+    })
+  }
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get min_text_input_manager() {
+      return min_text_input_manager
+    },
+    get max_text_input_manager() {
+      return max_text_input_manager
+    },
+    get step_text_input_manager() {
+      return step_text_input_manager
+    },
+    get color_input_manager() {
+      return color_input_manager
+    },
+    get val_count_slider_manager() {
+      return val_count_slider_manager
+    },
+    get val_slider_manager() {
+      return val_slider_manager
+    },
+    get val_defined_type_input_manager() {
+      return val_defined_type_input_manager
+    },
+  }
+}