sveltekit-ui 1.0.0

package/src/routes/[component]/Showcase/Checkbox/index.svelte

@@ -0,0 +1,52 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+
+  let val = true
+
+  let is_loading = false
+  let success_trigger = 0
+  function checkbox_test() {
+    console.log("checkbox click")
+    is_loading = true
+  }
+
+  let checkbox_manager = create_checkbox_manager()
+
+  function test_from_parent() {
+    console.log("test_from_parent")
+    checkbox_manager2.set_is_loading(true)
+    setTimeout(() => {
+      checkbox_manager2.set_is_loading(false)
+    }, 1000)
+  }
+
+  let checkbox_manager2 = create_checkbox_manager({ type: "toggle" })
+  let checkbox_manager3 = create_checkbox_manager({ type: "dark_theme" })
+  let checkbox_manager4 = create_checkbox_manager({ color: "orange" })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h3>Primary</h3>
+      <h4>Example</h4>
+      <Checkbox manager={checkbox_manager} />
+      <h4>Toggle Example</h4>
+      <Checkbox manager={checkbox_manager2} />
+      <h4>Toggle Example</h4>
+      <Checkbox manager={checkbox_manager3} />
+      <h4>Toggle orange</h4>
+      <Checkbox manager={checkbox_manager4} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/Code/index.svelte

@@ -0,0 +1,13 @@
+<script>
+  import Code from "$lib/Components/Code/index.svelte"
+  import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
+
+  let code_manager = create_code_manager({
+    content: { test: 44 },
+    language: "json",
+  })
+</script>
+
+<div>
+  <Code manager={code_manager} />
+</div>

package/src/routes/[component]/Showcase/Color/index.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Color from "$lib/Components/Color/index.svelte"
+  import { create_color_manager } from "$lib/Components/Color/index.svelte.js"
+
+  let color_manager = create_color_manager({
+    val: {
+      h: 19,
+      c: 18,
+      l: 15,
+      o: 19,
+      is_dark_theme_invert: true,
+    },
+    size: 8,
+    border_radius: 2,
+  })
+
+  let color_manager2 = create_color_manager({
+    val: null,
+    size: 3,
+  })
+</script>
+
+<div>
+  <h4>Color</h4>
+  <Color manager={color_manager} />
+  <h4>Color Null</h4>
+  <Color manager={color_manager2} />
+</div>

package/src/routes/[component]/Showcase/ColorInput/index.svelte

@@ -0,0 +1,35 @@
+<script>
+  import ColorInput from "$lib/Components/ColorInput/index.svelte"
+  import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
+
+  let color_manager = create_color_input_manager({
+    is_show_opacity: true,
+  })
+  let color_manager2 = create_color_input_manager({
+    is_show_opacity: true,
+    l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+  })
+</script>
+
+<div class="grid">
+  <div>
+    <h4>Example</h4>
+    <div>
+      <ColorInput manager={color_manager} />
+    </div>
+    <pre>{JSON.stringify(color_manager?.val, null, 2)}</pre>
+    <h4>Example 2</h4>
+    <div>
+      <ColorInput manager={color_manager2} />
+    </div>
+    <pre>{JSON.stringify(color_manager2?.val, null, 2)}</pre>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/ConditionsInput/index.svelte

@@ -0,0 +1,18 @@
+<script>
+  import ConditionsInput from "$lib/Components/ConditionsInput/index.svelte"
+  import { create_conditions_input_manager } from "$lib/Components/ConditionsInput/index.svelte.js"
+
+  let conditions_input_manager = create_conditions_input_manager({ data_type: { type: "text_literal" } })
+</script>
+
+<div class="container">
+  <h2>Conditions Showcase</h2>
+  <ConditionsInput manager={conditions_input_manager} />
+</div>
+
+<style>
+  .container {
+    text-align: left;
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/Confetti/index.svelte

@@ -0,0 +1,22 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import Confetti from "$lib/Components/Confetti/index.svelte"
+  import { create_confetti_manager } from "$lib/Components/Confetti/index.svelte.js"
+
+  let confetti_manager = create_confetti_manager({ time_range: 1000 })
+
+  let button_manager = create_button_manager({
+    text: "Show Confetti",
+    is_compressed: true,
+    on_click: () => {
+      console.log("show confetti")
+      confetti_manager.show_confetti()
+    },
+  })
+</script>
+
+<div>
+  <Button manager={button_manager} />
+  <div style="display: flex;">confetti comes from here<Confetti manager={confetti_manager} /></div>
+</div>

package/src/routes/[component]/Showcase/Content/index.svelte

@@ -0,0 +1,144 @@
+<script>
+  import ContentDisplay from "$lib/Components/Content/index.svelte"
+  import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
+  import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+
+  const val = {
+    type_id: "div",
+    selector_id: "div_opmbc",
+    children: [
+      {
+        type_id: "h3",
+        selector_id: "h3_wgxib",
+        children: [
+          {
+            type_id: "base_text",
+            selector_id: "base_text_nznpx",
+            children: [],
+            attributes: { content: "Sveltekit-UI is a wonderful library!" },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "p",
+        selector_id: "p_ionld",
+        children: [
+          {
+            type_id: "base_text",
+            selector_id: "base_text_gqmgr",
+            children: [],
+            attributes: {
+              content:
+                "There are so many great components including this content display, which encapsulates many components but we will need to create better documentation in the future when we get a chance and have a larger user base.",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "table",
+        selector_id: "table_qktny",
+        children: [
+          {
+            type_id: "thead",
+            selector_id: "thead_zcdil",
+            children: [
+              {
+                type_id: "tr",
+                selector_id: "tr_rzjyi",
+                children: [
+                  {
+                    type_id: "th",
+                    selector_id: "th_pcocw",
+                    children: [
+                      {
+                        type_id: "base_text",
+                        selector_id: "base_text_jbdbr",
+                        children: [],
+                        attributes: { content: "You can make tables" },
+                      },
+                    ],
+                    attributes: {},
+                  },
+                  {
+                    type_id: "td",
+                    selector_id: "td_kcizj",
+                    children: [
+                      {
+                        type_id: "base_text",
+                        selector_id: "base_text_wyfea",
+                        children: [],
+                        attributes: { content: "yes indeed" },
+                      },
+                    ],
+                    attributes: {},
+                  },
+                ],
+                attributes: {},
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "tbody",
+            selector_id: "tbody_yoiis",
+            children: [
+              {
+                type_id: "tr",
+                selector_id: "tr_vazwy",
+                children: [
+                  {
+                    type_id: "th",
+                    selector_id: "th_hegat",
+                    children: [
+                      {
+                        type_id: "base_text",
+                        selector_id: "base_text_jbxot",
+                        children: [],
+                        attributes: { content: "and other stuff" },
+                      },
+                    ],
+                    attributes: {},
+                  },
+                  {
+                    type_id: "td",
+                    selector_id: "td_egqxj",
+                    children: [
+                      {
+                        type_id: "base_text",
+                        selector_id: "base_text_urtfy",
+                        children: [],
+                        attributes: { content: "certainly" },
+                      },
+                    ],
+                    attributes: {},
+                  },
+                ],
+                attributes: {},
+              },
+            ],
+            attributes: {},
+          },
+        ],
+        attributes: { caption: null },
+      },
+      {
+        type_id: "code",
+        selector_id: "code_mhlkk",
+        children: [],
+        attributes: { content: "Code blocks and more222", language: null },
+      },
+    ],
+    attributes: {},
+  }
+
+  let content_manager = create_content_manager({ val })
+</script>
+
+<div>
+  <div style="max-width: 65rem; margin: auto;">
+    <h4>Example</h4>
+    <ContentDisplay manager={content_manager} />
+  </div>
+</div>

package/src/routes/[component]/Showcase/ContentInput/index.svelte

@@ -0,0 +1,358 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import ContentInput from "$lib/Components/ContentInput/index.svelte"
+  import { create_content_input_manager } from "$lib/Components/ContentInput/index.svelte.js"
+  import Json from "$lib/Components/Json/index.svelte"
+  import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
+  import DataTypeInput from "$lib/Components/DataTypeInput/index.svelte"
+  // import { create_data_type_input_manager } from "$lib/Components/DataTypeInput/index.svelte.js"
+  import { deep_copy, set_content_variables } from "$lib/client/index.js"
+  import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+
+  const content_variables_initial = {
+    aaaa: 5,
+    bbbb: "Hello",
+    cccc: false,
+    dddd: [false, false, false, true],
+    eeee: [
+      { team: "Albuquerque", points: 2378 },
+      { team: "Atlanta", points: 2134 },
+      { team: "Austin", points: 1539 },
+      { team: "Baltimore", points: 423 },
+      { team: "Baton Rouge", points: 453 },
+      { team: "Boise", points: 2700 },
+      { team: "Boston", points: 4105 },
+      { team: "Buffalo", points: 3645 },
+      { team: "Calgary", points: 1619 },
+      { team: "Charleston", points: 1779 },
+      { team: "Charlotte", points: 973 },
+      { team: "Chicago", points: 4003 },
+      { team: "Cincinnati", points: 1347 },
+      { team: "Cleveland", points: 4512 },
+      { team: "Columbus", points: 3895 },
+      { team: "Dallas", points: 2683 },
+      { team: "Denver", points: 4989 },
+      { team: "Detroit", points: 1523 },
+      { team: "El Paso", points: 1634 },
+      { team: "Fargo", points: 4409 },
+      { team: "Fresno", points: 4058 },
+      { team: "Houston", points: 1285 },
+      { team: "Indianapolis", points: 2169 },
+      { team: "Jacksonville", points: 2999 },
+      { team: "Kansas City", points: 435 },
+      { team: "Las Vegas", points: 3943 },
+      { team: "Los Angeles", points: 4822 },
+      { team: "Louisville", points: 2118 },
+      { team: "Memphis", points: 1596 },
+      { team: "Miami", points: 1863 },
+      { team: "Milwaukee", points: 1680 },
+      { team: "Minneapolis", points: 2228 },
+      { team: "Nashville", points: 2135 },
+      { team: "New Orleans", points: 307 },
+      { team: "New York", points: 3106 },
+      { team: "Oakland", points: 1094 },
+      { team: "Oklahoma City", points: 3275 },
+      { team: "Omaha", points: 4650 },
+      { team: "Orlando", points: 2098 },
+      { team: "Philadelphia", points: 1914 },
+      { team: "Phoenix", points: 4224 },
+      { team: "Pittsburgh", points: 4511 },
+      { team: "Portland", points: 4970 },
+      { team: "Raleigh", points: 1271 },
+      { team: "Reno", points: 3504 },
+      { team: "Richmond", points: 4317 },
+      { team: "Sacramento", points: 3603 },
+      { team: "Salt Lake City", points: 1178 },
+      { team: "San Antonio", points: 1477 },
+      { team: "San Diego", points: 2691 },
+      { team: "San Francisco", points: 2836 },
+      { team: "San Jose", points: 2728 },
+      { team: "Santa Fe", points: 3931 },
+      { team: "Seattle", points: 1781 },
+      { team: "St. Louis", points: 3088 },
+      { team: "Tampa", points: 179 },
+      { team: "Toledo", points: 4084 },
+      { team: "Toronto", points: 0 },
+    ],
+  }
+
+  let variables_json_manager = create_json_manager({
+    val: content_variables_initial,
+    is_edit_mode: true,
+    is_show_buttons: true,
+    is_popover: true,
+    on_finish: (input) => console.log("finish_var_change", input),
+  })
+
+  // let data_type_input_manager = create_data_type_input_manager({
+  //   val: {
+  //     type: "object_literal",
+  //     properties: {
+  //       aaaa: {
+  //         type: "float_literal",
+  //         options: {
+  //           min: null,
+  //           max: null,
+  //         },
+  //       },
+  //       bbbb: {
+  //         type: "text_literal",
+  //         options: {},
+  //       },
+  //       cccc: {
+  //         type: "boolean_literal",
+  //         options: {},
+  //       },
+  //       dddd: {
+  //         type: "loop",
+  //         options: {},
+  //         items: {
+  //           type: "boolean_literal",
+  //           options: {},
+  //         },
+  //       },
+  //       eeee: {
+  //         type: "loop",
+  //         options: {},
+  //         items: {
+  //           type: "object_literal",
+  //           properties: {
+  //             team: { type: "text_literal" },
+  //             points: { type: "int_literal" },
+  //           },
+  //         },
+  //       },
+  //     },
+  //   },
+  // })
+
+  // let set_content_input_type = create_button_manager({
+  //   type: "outlined",
+  //   text: "Set Input Data Type",
+  //   is_compressed: true,
+  //   on_click: () => content_input_manager.set_input_data_type(data_type_input_manager?.val),
+  // })
+
+  const initial_val = {
+    type_id: "div",
+    selector_id: "opmbc",
+    children: [
+      {
+        type_id: "h3",
+        selector_id: "wgxib",
+        children: [
+          {
+            type_id: "base_text",
+            selector_id: "nznpx",
+            children: [],
+            attributes: { content_from_variable_path: null, content: "Let's test this stuff out!" },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "ul",
+        selector_id: "thawp",
+        children: [
+          {
+            type_id: "li",
+            selector_id: "ynxnv",
+            children: [
+              {
+                type_id: "base_text",
+                selector_id: "xaahu",
+                children: [],
+                attributes: { content: "The checkbox, ", text_color: null },
+              },
+              {
+                type_id: "checkbox",
+                selector_id: "iynnb",
+                children: [],
+                attributes: {
+                  val_from_variable_path: ["variables", "cccc"],
+                  type: "checkbox",
+                  size: 5,
+                  color: { l: 12, c: 21, h: 24, o: 24, is_dark_theme_invert: true },
+                },
+              },
+              {
+                type_id: "base_text",
+                selector_id: "loupp",
+                children: [],
+                attributes: { content: ", is connected to the same var here: ", text_color: null },
+              },
+              {
+                type_id: "base_text",
+                selector_id: "ofjlf",
+                children: [],
+                attributes: {
+                  content_from_variable_path: ["variables", "cccc"],
+                  text_color: { l: 9, c: 10, h: 11, o: 24, is_dark_theme_invert: true },
+                },
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "li",
+            selector_id: "qlqgujep",
+            children: [
+              {
+                type_id: "base_text",
+                selector_id: "ftpoicjq",
+                children: [],
+                attributes: { content_from_variable_path: ["variables", "cccc"], text_color: null },
+              },
+              {
+                type_id: "checkbox",
+                selector_id: "kdotcril",
+                children: [],
+                attributes: {
+                  val_from_variable_path: ["variables", "cccc"],
+                  type: "checkbox",
+                  size: null,
+                  color: null,
+                },
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "li",
+            selector_id: "istoi",
+            children: [
+              {
+                type_id: "checkbox",
+                selector_id: "jfsgb",
+                children: [],
+                attributes: {
+                  val_from_variable_path: ["variables", "dddd", 3],
+                  type: "toggle",
+                  size: null,
+                  color: { l: 8, c: 21, h: 7, o: 24, is_dark_theme_invert: true },
+                },
+              },
+              {
+                type_id: "base_text",
+                selector_id: "allfb",
+                children: [],
+                attributes: { content: "this one does the show test", text_color: null },
+              },
+            ],
+            attributes: {},
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "loop",
+        selector_id: "bwrgl",
+        children: [
+          {
+            type_id: "h5",
+            selector_id: "clrzp",
+            children: [
+              {
+                type_id: "base_text",
+                selector_id: "zsaou",
+                children: [],
+                attributes: {
+                  content_from_variable_path: ["variables", "dddd", ["loops", 0]],
+                  text_color: { l: 15, c: 13, h: 6, o: 24, is_dark_theme_invert: true },
+                },
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "checkbox",
+            selector_id: "lqvon",
+            children: [],
+            attributes: {
+              val_from_variable_path: ["variables", "dddd", ["loops", 0]],
+              size: 2.4,
+              type: "checkbox",
+              label: null,
+              name: null,
+            },
+          },
+        ],
+        attributes: { val_from_variable_path: ["variables", "dddd"] },
+      },
+      {
+        type_id: "show_conditions",
+        selector_id: "gbhifesv",
+        children: [
+          {
+            type_id: "show_conditions_item",
+            selector_id: "pkwuokqz",
+            children: [
+              {
+                type_id: "base_text",
+                selector_id: "arshiwlr",
+                children: [],
+                attributes: {
+                  content: "Show this if the condition passes!",
+                  text_color: { l: 7, c: 10, h: 20, o: 24, is_dark_theme_invert: true },
+                },
+              },
+            ],
+            attributes: { is_show_from_variable_path: ["variables", "dddd", 3] },
+          },
+          {
+            type_id: "show_conditions_item_else",
+            selector_id: "jtrkkmtb",
+            children: [
+              {
+                type_id: "base_text",
+                selector_id: "hlbbxafx",
+                children: [],
+                attributes: {
+                  content: "Show this if the condition fails!",
+                  text_color: { l: 8, c: 10, h: 6, o: 24, is_dark_theme_invert: true },
+                },
+              },
+            ],
+            attributes: {},
+          },
+        ],
+        attributes: {},
+      },
+    ],
+    attributes: {},
+  }
+
+  let content_input_manager = $state(null)
+  content_input_manager = create_content_input_manager({
+    val: initial_val,
+    // storage_path: "https://www.contibase.com/api/v1/storage/{storage_id}",
+    // storage: account_storage,
+    storage_default_folder_path: ["pages"],
+    mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
+    // variables_data_type: () => data_type_input_manager?.val,
+    variables: () => variables_json_manager?.val,
+    on_event: (input) => {
+      console.log("on_event00", input)
+      const res = set_content_variables(
+        input,
+        { variables: variables_json_manager?.val },
+        content_input_manager.pass_event_down
+      )
+      variables_json_manager.set_val(res?.variables)
+      console.log("on_event01", res?.variables)
+      return res
+    },
+  })
+</script>
+
+<div>
+  <!-- <h4>variables data type</h4> -->
+  <!-- <DataTypeInput manager={data_type_input_manager} /> -->
+  <div style="display: flex; gap: 1rem;">
+    <h4>Variables</h4>
+    <Json manager={variables_json_manager} />
+  </div>
+  <h4>Example</h4>
+  <ContentInput manager={content_input_manager} />
+</div>