sveltekit-ui 1.0.0

package/src/lib/Components/Qr/index.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+  import InfoBox from "$lib/Components/InfoBox/index.svelte"
+  import { onMount } from "svelte"
+
+  let { manager } = $props()
+
+  onMount(() => {
+    if (typeof manager?.on_mount == "function") {
+      manager?.on_mount()
+    }
+  })
+</script>
+
+<div style="display: flex; flex-direction: column; gap: .5rem;">
+  <div style="display: flex; flex: 0;">
+    <div
+      class="qr_container"
+      style="height: {manager?.size}px; background-color: {manager?.background_color}; border-radius: {manager?.border_radius}rem; border: {manager?.border_width}px solid {manager?.border_color};"
+    >
+      <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
+      {#if !manager?.is_loaded}
+        <div class="load">
+          <LoadingWheel color={"var(--g14-t)"} sw={0.4} />
+        </div>
+      {/if}
+    </div>
+  </div>
+  {#if manager?.is_show_copy}
+    <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
+      <TextInput manager={manager?.text_manager} />
+      <Button manager={manager?.copy_button_manager} />
+    </div>
+  {/if}
+  {#if manager?.is_show_download}
+    <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
+      <Dropdown manager={manager?.extention_dropdown_manager} />
+      <Button manager={manager?.download_button_manager} />
+    </div>
+  {/if}
+  <InfoBox message={manager?.error_message} />
+</div>
+
+<style>
+  .qr_container {
+    aspect-ratio: 1;
+    overflow: hidden;
+    display: grid;
+    grid-template-areas: "stack";
+  }
+  .load {
+    grid-area: stack;
+    width: 50%;
+    height: 50%;
+    margin: auto;
+  }
+</style>

package/src/lib/Components/Qr/index.svelte.js

@@ -0,0 +1,295 @@
+import { create_button_manager } from "$lib/Components/Button/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 { copy_to_clipboard, create_unique_id, deep_copy, set_closurable, color_to_css } from "$lib/client/index.js"
+import QRCodeStyling from "qr-code-styling"
+
+export function create_qr_manager(config) {
+  const id = create_unique_id(null, 20)
+  let margin = $state(null)
+  let size = $state(null)
+  let image_size = $state(null)
+  let type_number = $state(null)
+  let error_correction_level = $state(null)
+  let color = $state(null)
+  let corner_color = $state(null)
+  let background_color = $state(null)
+  let border_radius = $state(null)
+  let border_width = $state(null)
+  let border_color = $state(null)
+  let data = $state(null)
+  let image = $state(null)
+  let extension = $state(null)
+  let quality = $state(null)
+
+  let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
+  let is_show_download = $derived(set_closurable(config?.is_show_download, false))
+
+  let text_manager = $state(null)
+  let copy_button_manager = $state(null)
+  let download_button_manager = $state(null)
+  let extention_dropdown_input_manager = $state(null)
+  let qr__styling = $state(null)
+  let is_loaded = $state(false)
+  let error_message = $state(null)
+
+  function get_options() {
+    // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)
+    const color_css = get_css_variable_value(color)
+    const corner_color_css = get_css_variable_value(corner_color)
+    const background_color_css = get_css_variable_value(background_color)
+    return {
+      width: size || 500,
+      height: size || 500,
+      margin: margin || 0,
+      type: "svg", // svg,canvas
+      data: data ?? null,
+      image: image ?? null,
+      qrOptions: {
+        typeNumber: type_number, // 0-40
+        // mode: null, // 'Numeric' 'Alphanumeric' 'Byte' 'Kanji'
+        errorCorrectionLevel: error_correction_level || "Q", // 'L' 'M' 'Q' 'H'
+      },
+      dotsOptions: {
+        type: "rounded", // 'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'
+        color: color_css,
+        // gradient: {
+        //   type: "radial", // 'linear' 'radial'
+        //   rotation: 0,
+        //   colorStops: [
+        //     { offset: 0, color: "green" },
+        //     { offset: 1, color: "yellow" },
+        //   ],
+        // },
+      },
+      cornersSquareOptions: {
+        type: "extra-rounded", // 'dot' 'square' 'extra-rounded'
+        color: corner_color_css,
+        // gradient: {
+        //   type: "linear", // 'linear' 'radial'
+        //   rotation: 0.5,
+        //   colorStops: [
+        //     { offset: 0, color: corner_color_css },
+        //     { offset: 1, color: corner_color_css },
+        //   ],
+        // },
+      },
+      // cornersDotOptionsHelper: {
+      // type: "square", // 'dot' 'square'
+      // color: "green",
+      // gradient: {
+      //   type: "linear", // 'linear' 'radial'
+      //   rotation: 0,
+      //   colorStops: [
+      //     { offset: 0, color: "green" },
+      //     { offset: 1, color: "yellow" },
+      //   ],
+      // },
+      // },
+      backgroundOptions: {
+        color: background_color_css,
+        // gradient: {
+        //   type: "radial",
+        //   rotation: 0.5,
+        //   colorStops: [
+        //     { offset: 0, color: "white" },
+        //     { offset: 1, color: "red" },
+        //   ],
+        // },
+      },
+      imageOptions: {
+        // hideBackgroundDots: true,
+        imageSize: image_size,
+        crossOrigin: "anonymous",
+        margin: 5,
+      },
+    }
+  }
+
+  function get_css_variable_value(input) {
+    const element = document.createElement("div")
+    document.body.appendChild(element)
+    element.style.color = input
+    const style = getComputedStyle(element)
+    const value = style.color
+    document.body.removeChild(element)
+    return value
+  }
+
+  async function on_mount() {
+    try {
+      error_message = null
+      const options = get_options()
+      qr__styling = new QRCodeStyling(deep_copy(options))
+      let qr_el = document?.querySelector(`#qr_${id}`)
+      qr__styling.append(qr_el)
+      qr__styling.update()
+      is_loaded = true
+    } catch (error) {
+      console.error("QR Code generation error:", error)
+      error_message = "An error occurred."
+      if (error && error.startsWith("code length overflow")) {
+        error_message +=
+          " You may need to decrease the amount of data in the QR code, decrease the repetition of that data (error_correction_level), or decrease the detail of the data (type_number)."
+      }
+      is_loaded = true
+    }
+  }
+
+  function update() {
+    try {
+      error_message = null
+      const options = get_options()
+      qr__styling.update(deep_copy(options))
+    } catch (error) {
+      error_message = "QR Code update error:" + error
+    }
+  }
+
+  function download() {
+    const options = get_options()
+    qr__styling.download({ name: "Qr", extension, ...options }, quality) // Options with extension and name of file (not required),
+  }
+
+  // async function get_raw_data() {
+  //   const raw_data = await qr__styling.getRawData(extension)
+  //   console.log("raw_data", raw_data)
+  // }
+
+  // async function to_data_url() {
+  //   const data_url = await qr__styling.toDataUrl(extension, quality) // 'png' 'jpeg' 'webp'
+  //   console.log("data_url", data_url)
+  // }
+
+  function init(config) {
+    config = deep_copy(config)
+    margin = config?.margin ?? 10
+    size = config?.size ?? 200
+    image_size = config?.image_size ?? 0.5
+    type_number = config?.type_number ?? 0
+    error_correction_level = config?.error_correction_level ?? "Q"
+    color = color_to_css(config?.color ?? "var(--primary-t)")
+    corner_color = color_to_css(config?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
+    background_color = color_to_css(config?.background_color ?? "var(--shadow1-t)")
+    border_color = color_to_css(config?.border_color ?? "var(--shadow7-t)")
+    border_radius = config?.border_radius ?? (size + 2 * margin) / 100
+    border_width = config?.border_width ?? 1
+    data = config?.data ?? null
+    image = config?.image ?? null
+    extension = config?.extension ?? "svg"
+    quality = config?.quality ?? 0.8
+    text_manager = create_text_input_manager({
+      val: data,
+      on_change: (input) => (data = input),
+    })
+    copy_button_manager = create_button_manager({
+      type: "outlined",
+      is_uniform: true,
+      is_success_animation: true,
+      support_icon: "clipboard",
+      on_click: () => copy_to_clipboard(data),
+    })
+    download_button_manager = create_button_manager({
+      type: "outlined",
+      is_uniform: true,
+      is_success_animation: true,
+      support_icon: "download",
+      on_click: () => download(),
+    })
+    extention_dropdown_input_manager = create_dropdown_manager({
+      val: extension,
+      options: [
+        { key: "svg", name: "svg" },
+        { key: "png", name: "png" },
+        { key: "webp", name: "webp" },
+      ],
+      target_height: 130,
+      on_item_click: (input) => {
+        extension = input?.key
+        extention_dropdown_input_manager.set_val(input?.key)
+      },
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get margin() {
+      return margin
+    },
+    get size() {
+      return size
+    },
+    get image_size() {
+      return image_size
+    },
+    get type_number() {
+      return type_number
+    },
+    get error_correction_level() {
+      return error_correction_level
+    },
+    get color() {
+      return color
+    },
+    get corner_color() {
+      return corner_color
+    },
+    get background_color() {
+      return background_color
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get border_width() {
+      return border_width
+    },
+    get border_color() {
+      return border_color
+    },
+    get data() {
+      return data
+    },
+    get image() {
+      return image
+    },
+    get extension() {
+      return extension
+    },
+    get name() {
+      return name
+    },
+    get quality() {
+      return quality
+    },
+    get is_show_copy() {
+      return is_show_copy
+    },
+    get is_show_download() {
+      return is_show_download
+    },
+    get text_manager() {
+      return text_manager
+    },
+    get copy_button_manager() {
+      return copy_button_manager
+    },
+    get download_button_manager() {
+      return download_button_manager
+    },
+    get extention_dropdown_input_manager() {
+      return extention_dropdown_input_manager
+    },
+    get is_loaded() {
+      return is_loaded
+    },
+    get error_message() {
+      return error_message
+    },
+    init,
+    on_mount,
+    download,
+    update,
+  }
+}

package/src/lib/Components/Slider/index.svelte

@@ -0,0 +1,231 @@
+<script>
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+  import ErrorX from "$lib/Components/ErrorX/index.svelte"
+  import intersection_observer from "$lib/actions/intersection_observer.js"
+  import Button from "$lib/Components/Button/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<svelte:document
+  onpointerup={(e) => manager?.handle_pointer_up(manager?.id, e)}
+  onpointermove={(e) => manager?.handle_pointer_move(manager?.id, e)}
+/>
+
+<div use:intersection_observer onappeared={() => manager?.set_thumbs()}>
+  <div>
+    {#if manager?.label || manager?.error_message}
+      <div style="display: inline-flex;">
+        {#if manager?.label}
+          <label style="--label_font_size: {manager?.label_font_size}rem;" for={manager?.id}>{manager?.label}:</label>
+        {/if}
+        {#if manager?.error_message}
+          <p class="error_text">{manager?.error_message}</p>
+        {/if}
+      </div>
+    {/if}
+    <div
+      id={`container_${manager?.id}`}
+      class="container"
+      style="--ml: {manager?.ml}rem; --mr: {manager?.mr}rem; --mt: {manager?.mt}rem; --mb: {manager?.mb}rem;"
+    >
+      {#if manager?.is_nullable}
+        <div style="min-width: 9rem;">
+          <Button manager={manager?.toggle_null_button_manager} />
+        </div>
+      {/if}
+      <div
+        id={`slider_${manager?.id}`}
+        class="slider_box"
+        class:is_extra_padding={manager?.is_short}
+        style="--h: {manager?.base_height}rem; --thumb_height: {manager?.is_short
+          ? 1.8
+          : manager?.base_height - 0.4}rem; --thumb_mt: {manager?.is_short
+          ? -0.5
+          : 0.2}rem; --thumb_mx: {manager?.is_short ? 0.2 : 0}rem;"
+      >
+        {#if Array.isArray(manager?.working_val) && manager?.working_val.length > 0}
+          <div
+            id={`thumb_bg_${manager?.id}`}
+            class="slider_highlight_bg"
+            class:slider_highlight_bg_disabled={manager?.is_disabled}
+            style="margin-left: {manager?.slider_highlight_ml}; width: {manager?.slider_highlight_bg_width}; --color: {manager?.color}"
+          ></div>
+          <div style="display: flex; flex: 1; min-height: 100%; width: 100%; border-radius: .5rem; overflow: hidden;">
+            <div
+              style="min-height: 100%; background-color: var(--shadow1-t); margin-left: {manager?.highlight_range_start_percent}%; width: {manager?.highlight_range_width_percent}%;"
+            ></div>
+          </div>
+          {#each manager?.working_val as thumb, i}
+            <div
+              id={`thumb_${i}_${manager?.id}`}
+              role="button"
+              tabindex="0"
+              class="thumb"
+              class:thumb_hovered={manager?.hovered_i == i || manager?.selected_i == i}
+              class:thumb_dark_bg={manager?.is_short}
+              class:thumb_disabled={manager?.is_disabled || manager?.loading_i == i}
+              class:display_none={thumb == null}
+              style="--color: {manager?.color}"
+              onkeydown={(e) => manager?.handle_thumb_keydown(i, e?.key)}
+              onfocus={() => manager?.handle_focus(i)}
+              onblur={() => manager?.handle_blur(i)}
+            >
+              <div
+                id={`thumb_dot_${i}_${manager?.id}`}
+                class="thumb_dot"
+                class:thumb_dot_disabled={manager?.is_disabled || manager?.loading_i == i}
+                style="--font_size: {manager?.font_size}rem;"
+              ></div>
+              {#if manager?.loading_i == i}
+                <div class="thumb_float_icon">
+                  <LoadingWheel color={manager?.is_short ? "var(--g4)" : "var(--g3)"} sw={0.2} />
+                </div>
+              {:else if manager?.manager?.loading_i == i}
+                <div class="thumb_float_icon">
+                  <ErrorX color={manager?.is_short ? "var(--g4)" : "var(--g3)"} sw={42} />
+                </div>
+              {/if}
+            </div>
+          {/each}
+          <input
+            id={`input_${manager?.id}`}
+            type="range"
+            tabindex="-1"
+            name={manager?.name}
+            required={manager?.is_required}
+            readonly={manager?.is_read_only}
+            onpointerdown={(e) => manager?.handle_pointer_down(e)}
+            onpointerenter={(e) => manager?.handle_pointer_enter(e)}
+            onpointerleave={(e) => manager?.handle_pointer_leave(e)}
+            class="slider"
+            disabled={manager?.is_disabled || manager?.loading_id}
+            min={manager?.min}
+            max={manager?.max}
+            step={manager?.step}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    margin: var(--mt) var(--mr) var(--mb) var(--ml);
+    display: flex;
+    flex: 1;
+    padding: 0;
+  }
+  .slider_box {
+    margin: 0.1rem;
+    width: 100%;
+    height: var(--h);
+    position: relative;
+    display: flex;
+    border-radius: 2rem;
+    background: var(--bg2);
+    box-shadow: 0 0 0 1px var(--shadow7-t);
+    -webkit-box-shadow: 0 0 0 1px var(--shadow7-t);
+  }
+  .is_extra_padding {
+    margin: 0.5rem 0;
+  }
+  .slider_highlight_bg {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    border-radius: 2rem;
+    overflow: hidden;
+    background: var(--color);
+    box-shadow:
+      inset 0.1rem 0.1rem 0.2rem var(--tint2-t),
+      inset -0.1rem -0.1rem 0.2rem var(--shadow2-t);
+  }
+  .slider_highlight_bg_disabled {
+    background: var(--g12-t);
+  }
+  .slider {
+    -webkit-appearance: none;
+    position: absolute;
+    display: flex;
+    background: none;
+    outline: none;
+    width: 100%;
+    margin: 0;
+  }
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: none;
+    opacity: 0;
+    box-shadow: transparent;
+    outline: none;
+    height: var(--thumb_height);
+    width: var(--thumb_height);
+    margin-top: var(--thumb_mt);
+    cursor: pointer;
+  }
+  .slider::-webkit-slider-thumb:hover {
+    height: var(--thumb_height);
+    width: var(--thumb_height);
+    margin-top: var(--thumb_mt);
+  }
+  .thumb {
+    position: absolute;
+    height: var(--thumb_height);
+    width: var(--thumb_height);
+    margin-top: var(--thumb_mt);
+    margin-left: var(--thumb_mx);
+    margin-right: var(--thumb_mx);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    cursor: pointer;
+    user-select: none;
+    background: linear-gradient(-45deg, var(--g24), var(--g20));
+    box-shadow: 0 0 0.4rem 0.1rem var(--shadow8);
+    transition: box-shadow 0.3s;
+  }
+  .thumb_hovered {
+    box-shadow:
+      0 0 0.4rem 0.1rem var(--shadow8),
+      0 0 0 0.7rem var(--shadow8-t);
+  }
+  .thumb_dot {
+    font-size: var(--font_size);
+    color: var(--g2);
+  }
+  .thumb_dark_bg {
+    background: linear-gradient(-45deg, color-mix(in oklab, var(--primary-t), var(--g6) 20%), var(--primary-t));
+  }
+  .thumb_disabled {
+    background: linear-gradient(-45deg, var(--g20), var(--g18));
+  }
+  .thumb_dot_disabled {
+    color: var(--g13);
+  }
+  .thumb_float_icon {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 0.3rem;
+    display: grid;
+    place-items: center;
+  }
+  .display_none {
+    display: none;
+  }
+  label {
+    font-size: var(--label_font_size);
+    font-weight: 600;
+    color: var(--g12-t);
+    line-height: 1.6rem;
+    margin-right: 0.5rem;
+  }
+</style>