sveltekit-ui 1.1.14 → 1.1.16

package/dist/Components/Qr/index.svelte.js

@@ -1,301 +0,0 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { copy_to_clipboard, create_unique_id, deep_copy, set_closurable, color_to_css } from "../../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 display_size = $state(200)
-  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 copy_button_manager = $state(null)
-  let download_button_manager = $state(null)
-  let extention_dropdown_manager = $state(null)
-  let qr__styling = $state(null)
-  let is_loaded = $state(false)
-  let error_message = $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 scale = $derived(display_size && size ? display_size / size : 0.25)
-
-  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 set_options(input) {
-    margin = input?.margin ?? 10
-    size = input?.size ?? 800
-    display_size = input?.display_size ?? 200
-    image_size = input?.image_size ?? 0.5
-    type_number = input?.type_number ?? 0
-    error_correction_level = input?.error_correction_level ?? "Q"
-    color = color_to_css(input?.color ?? "var(--primary-t)")
-    corner_color = color_to_css(input?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
-    background_color = color_to_css(input?.background_color ?? "#ffffff00")
-    border_color = color_to_css(input?.border_color ?? "var(--shadow7-t)")
-    border_radius = input?.border_radius ?? (size + 2 * margin) / 100
-    border_width = input?.border_width ?? 1
-    data = input?.data ?? null
-    image =
-      input?.image && input?.image.startsWith("<svg")
-        ? `data:image/svg+xml;utf8,${encodeURIComponent(input?.image)}`
-        : input?.image ?? null
-    extension = input?.extension ?? "svg"
-    quality = input?.quality ?? 0.8
-  }
-
-  function update(input = null) {
-    if (input) {
-      set_options(input)
-    }
-    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(input) {
-    set_options(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_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_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 copy_button_manager() {
-      return copy_button_manager
-    },
-    get download_button_manager() {
-      return download_button_manager
-    },
-    get extention_dropdown_manager() {
-      return extention_dropdown_manager
-    },
-    get is_loaded() {
-      return is_loaded
-    },
-    get error_message() {
-      return error_message
-    },
-    get scale() {
-      return scale
-    },
-    init,
-    on_mount,
-    download,
-    update,
-  }
-}

package/dist/Components/QrInput/index.svelte

@@ -1,47 +0,0 @@
-<script>
-  import Popover from "../Popover/index.svelte"
-  import Button from "../Button/index.svelte"
-  import Checkbox from "../Checkbox/index.svelte"
-  import Slider from "../Slider/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import ColorInput from "../ColorInput/index.svelte"
-  import Dropdown from "../Dropdown/index.svelte"
-  import Qr from "../Qr/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div style="display: grid;  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1rem;">
-  <div>
-    <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} />
-    <TextInput manager={manager?.data_text_input_manager} />
-    <TextInput manager={manager?.image_text_input_manager} />
-  </div>
-  <div style="border: 1px solid var(--shadow4-t); border-radius: 1rem; padding: 1rem;">
-    <h2>Result</h2>
-    <Button manager={manager?.set_changes_button_manager} />
-    <div>
-      <Qr manager={manager?.qr_manager} />
-    </div>
-  </div>
-</div>

package/dist/Components/QrInput/index.svelte.js

@@ -1,218 +0,0 @@
-import { create_color_input_manager } from "../ColorInput/index.svelte.js"
-import { create_slider_manager } from "../Slider/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_qr_manager } from "../Qr/index.svelte.js"
-
-export function create_qr_input_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 image_text_input_manager = $state(null)
-  let is_show_copy_checkbox_manager = $state(null)
-  let is_show_download_checkbox_manager = $state(null)
-  let set_changes_button_manager = $state(null)
-  let qr_manager = $state(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: data_text_input_manager?.val,
-    image: image_text_input_manager?.val,
-  })
-
-  function set_changes() {
-    qr_manager.update({ ...val, display_size: 280 })
-  }
-
-  function init(config) {
-    margin_slider_manager = create_slider_manager({
-      label: "Margin",
-      min: 0,
-      max: 100,
-      step: 1,
-      val: config?.val?.margin ?? 40,
-    })
-    size_slider_manager = create_slider_manager({
-      label: "Size",
-      min: 100,
-      max: 2000,
-      step: 1,
-      val: config?.val?.size ?? 1000,
-    })
-    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: 50,
-      step: 1,
-      val: config?.val?.border_radius ?? 10,
-    })
-    border_width_slider_manager = create_slider_manager({
-      label: "Border Width",
-      min: 0,
-      max: 10,
-      step: 1,
-      val: config?.val?.border_width ?? 5,
-    })
-    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,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.color ?? null,
-    })
-    corner_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.corner_color ?? null,
-    })
-    background_color_manager = create_color_input_manager({
-      is_show_opacity: true,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      val: config?.val?.background_color ?? null,
-    })
-    border_color_manager = create_color_input_manager({
-      is_show_opacity: false,
-      is_dark_theme_invert: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
-      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({
-      label: "Data",
-      val: config?.val?.data ?? "https://www.sveltekit-ui.com",
-    })
-    image_text_input_manager = create_text_input_manager({
-      type: "text",
-      label: "Image Url / SVG",
-      val:
-        config?.val?.image ??
-        `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 512 512">
-  <path id="part-2" fill="#1c82ff" fill-rule="nonzero" d="M400.3 328.6c0 22-5.6 41.7-17 59.2a113 113 0 0 1-49.6 41.2 186 186 0 0 1-77.6 14.8c-35.8 0-65.4-6.7-88.7-20.3-16.5-9.7-30-22.7-40.3-39a88.6 88.6 0 0 1-15.4-47.5c0-8.9 3-16.5 9.3-22.9 6.1-6.4 14-9.5 23.6-9.5a28 28 0 0 1 19.7 7.4c5.4 5 10 12.3 13.8 22 4.6 11.6 9.6 21.3 15 29 5.3 7.8 12.9 14.2 22.6 19.3q14.7 7.5 38.4 7.5c21.8 0 39.6-5 53.2-15.2a45.8 45.8 0 0 0 20.4-38c0-12.1-3.6-22-11-29.4a71 71 0 0 0-28.5-17.3 490 490 0 0 0-46.7-12.6c-26.1-6.1-48-13.2-65.5-21.4a106 106 0 0 1-42-33.5 86.8 86.8 0 0 1-15.4-52.6c0-20 5.4-37.8 16.4-53.3a103 103 0 0 1 47.3-35.8c20.6-8.4 45-12.5 72.8-12.5 22.3 0 41.6 2.7 57.9 8.3a122 122 0 0 1 40.5 22 92 92 0 0 1 23.5 28.9c5 10 7.5 19.9 7.5 29.5 0 8.7-3.1 16.6-9.3 23.6s-14 10.6-23.2 10.6q-12.6 0-19.2-6.3a85 85 0 0 1-14.2-20.7 94 94 0 0 0-23.8-32.1c-9.3-7.7-24.1-11.5-44.6-11.5-19 0-34.3 4.1-46 12.5-11.6 8.3-17.5 18.3-17.5 30 0 7.3 2 13.6 6 19a50 50 0 0 0 16.3 13.5c7 3.8 14 6.8 21.1 9 7.1 2.1 18.8 5.2 35.2 9.4 20.5 4.8 39 10 55.6 15.8a169 169 0 0 1 42.4 21.1 86.6 86.6 0 0 1 27.3 31.3c6.5 12.7 9.7 28.2 9.7 46.5"/>
-</svg>`,
-    })
-    qr_manager = create_qr_manager({ ...val, display_size: 280 })
-    set_changes_button_manager = create_button_manager({
-      c: 1,
-      l: 0,
-      mb: 2,
-      text: "Set Changes",
-      is_compressed: true,
-      on_click: () => set_changes(),
-    })
-  }
-
-  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 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
-    },
-    get set_changes_button_manager() {
-      return set_changes_button_manager
-    },
-    get qr_manager() {
-      return qr_manager
-    },
-  }
-}