sveltekit-ui 1.1.16 → 1.1.18

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

@@ -0,0 +1,375 @@
+import { create_unique_id, set_closurable } from "../../client/index.js"
+import { create_icon_manager } from "../Icon/index.svelte.js"
+
+export function create_button_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let type = $derived(set_closurable(config?.type, "primary")) // primary, outlined, soft, plain
+  let support_icon = $derived(set_closurable(config?.support_icon, null))
+  let is_icon_bg_tint = $derived(set_closurable(config?.is_icon_bg_tint, false))
+  let icon_deg = $derived(set_closurable(config?.icon_deg, 0))
+  let icon_sw = $derived(set_closurable(config?.icon_sw, 0))
+  let icon_size = $derived(set_closurable(config?.icon_size, 1.8))
+  let icon_ml = $derived(set_closurable(config?.icon_ml, 0))
+  let icon_mr = $derived(set_closurable(config?.icon_mr, 0))
+  let icon_pos = $derived(set_closurable(config?.icon_pos, "right"))
+  let is_icon_shimmyable = $derived(set_closurable(config?.is_icon_shimmyable, false))
+  let icon_movement_stiffness = $derived(set_closurable(config?.icon_movement_stiffness, 0.1))
+  let icon_movement_damping = $derived(set_closurable(config?.icon_movement_damping, 0.1))
+  let aria_label = $derived(set_closurable(config?.aria_label, null))
+  let popover_target = $derived(set_closurable(config?.popover_target, null))
+  let is_no_wrap = $derived(set_closurable(config?.is_no_wrap, false))
+  let is_word_break_all = $derived(set_closurable(config?.is_word_break_all, false))
+  let is_success_animation = $derived(set_closurable(config?.is_success_animation, false))
+  let ml = $derived(set_closurable(config?.ml, 0))
+  let mr = $derived(set_closurable(config?.mr, 0))
+  let mt = $derived(set_closurable(config?.mt, 0))
+  let mb = $derived(set_closurable(config?.mb, 0))
+  let pl = $derived(set_closurable(config?.pl, 1.1))
+  let pr = $derived(set_closurable(config?.pr, 1.1))
+  let pt = $derived(set_closurable(config?.pt, 0.3))
+  let pb = $derived(set_closurable(config?.pb, 0.3))
+  let border_radius = $derived(set_closurable(config?.border_radius, 1))
+  let tabindex = $derived(set_closurable(config?.tabindex, 0))
+  let is_prevent_default = $derived(set_closurable(config?.is_prevent_default, false))
+  let is_stop_propagation = $derived(set_closurable(config?.is_stop_propagation, false))
+  let min_height = $derived(set_closurable(config?.min_height, 3.4))
+  let fixed_width = $derived(set_closurable(config?.fixed_width, null))
+  let min_width = $derived(set_closurable(config?.min_width, null))
+  let is_compressed = $derived(set_closurable(config?.is_compressed, false))
+  let is_pill = $derived(set_closurable(config?.is_pill, false))
+  let is_uniform = $derived(set_closurable(config?.is_uniform, false))
+  let cursor = $derived(set_closurable(config?.cursor, "pointer"))
+  let text_align = $derived(set_closurable(config?.text_align, "center"))
+  let font_size = $derived(set_closurable(config?.font_size, 1.6))
+  let line_height = $derived(set_closurable(config?.line_height, 1.2))
+  let font_weight = $derived(set_closurable(config?.font_weight, 400))
+  let h = $derived(set_closurable(config?.h, null))
+  let c = $derived(set_closurable(config?.c, null))
+  let l = $derived(set_closurable(config?.l, null))
+  let color = $derived(
+    set_closurable(config?.color, null) ??
+      `oklch(var(--l${Math.min(Math.max(l != null ? l : type == "primary" ? 8 : 2, 0), 24)}-t) ${
+        Number.isInteger(c)
+          ? `var(--c${Math.min(Math.max(c, 0), 24)})`
+          : type == "primary"
+          ? "var(--primary-c)"
+          : "var(--c3)"
+      } ${h != null ? `var(--h${Math.min(Math.max(h, 0), 24)})` : "var(--primary-h)"})`
+  )
+  let gradient_to_color = $derived(set_closurable(config?.gradient_to_color, color))
+  let gradient_turn = $derived(set_closurable(config?.gradient_turn, 0.3))
+  let contrast_color = $derived(
+    set_closurable(
+      config?.contrast_color,
+      `oklch(var(--l${Math.min(Math.max(l != null ? l : 4, 1), 24) > 12 ? 3 : 22}-t) var(--c${Math.min(
+        Math.max(c != null ? c : 2, 1),
+        3
+      )}) ${h ? `var(--h${Math.min(Math.max(h, 0), 24)})` : "var(--primary-h)"})`
+    )
+  )
+  let border_color = $derived(set_closurable(config?.border_color, null))
+  let hover_shadow_color = $derived(set_closurable(config?.hover_shadow_color, "transparent"))
+  let hover_shadow_size = $derived(set_closurable(config?.hover_shadow_size, 1))
+  let text = $derived(set_closurable(config?.text, null))
+  let is_loading = $derived(set_closurable(config?.is_loading, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let selected_type = $derived(set_closurable(config?.selected_type, null))
+
+  let is_error = $state(false)
+  let is_success = $state(false)
+  let icon_manager = $state(null)
+
+  let is_hovered = $state(false)
+  let is_pointer_down = $state(false)
+  let is_simulated_active = $state(config?.is_simulated_active || false)
+
+  function success_trigger() {
+    is_error = false
+    is_success = true
+    setTimeout(() => {
+      is_success = false
+    }, 1400)
+  }
+
+  function error_trigger() {
+    is_success = false
+    is_error = true
+    setTimeout(() => {
+      is_error = false
+    }, 1400)
+  }
+
+  function icon_shimmy_trigger() {
+    if (typeof icon_manager?.trigger_shimmy == "function") {
+      icon_manager.trigger_shimmy()
+    }
+  }
+
+  function handle_click(e) {
+    if (is_prevent_default) {
+      e.preventDefault()
+    }
+    if (is_stop_propagation) {
+      e.stopPropagation()
+    }
+    if (is_success_animation) {
+      success_trigger()
+    }
+    if (config?.on_click) {
+      config?.on_click()
+    }
+  }
+
+  function pointer_down() {
+    is_pointer_down = true
+  }
+
+  function pointer_up() {
+    is_pointer_down = false
+  }
+
+  function pointer_enter() {
+    is_hovered = true
+    if (config?.on_hover) {
+      config?.on_hover(true)
+    }
+    icon_shimmy_trigger()
+  }
+
+  function pointer_leave() {
+    is_hovered = false
+    if (config?.on_hover) {
+      config?.on_hover(false)
+    }
+  }
+
+  function simulate_click() {
+    is_simulated_active = true
+    setTimeout(() => {
+      is_simulated_active = false
+    }, 800)
+  }
+
+  function focus() {
+    let button_el = document?.querySelector(`#button_${id}`)
+    if (button_el) {
+      button_el.focus()
+    }
+  }
+
+  function init(config) {
+    if (support_icon) {
+      icon_manager = create_icon_manager({
+        icon_id: () => support_icon,
+        size: () => icon_size,
+        sw: () => (icon_sw ? icon_sw : min_height > 0 ? min_height * 12 : 40),
+        color: () =>
+          is_disabled
+            ? "var(--g6-t)"
+            : type == "primary" || (type == "outlined" && selected_type)
+            ? is_pointer_down
+              ? "oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c + 0.01) h)"
+              : is_hovered
+              ? "oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.01) h)"
+              : contrast_color
+            : is_pointer_down
+            ? "oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.01) h)"
+            : is_hovered
+            ? "oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h)"
+            : color,
+        deg: () => icon_deg,
+        is_shimmyable: () => is_icon_shimmyable && !is_loading && !is_disabled,
+        movement_stiffness: () => icon_movement_stiffness,
+        movement_damping: () => icon_movement_damping,
+      })
+    }
+  }
+
+  init(config)
+
+  return {
+    id,
+    get type() {
+      return type
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get pl() {
+      return pl
+    },
+    get pr() {
+      return pr
+    },
+    get pt() {
+      return pt
+    },
+    get pb() {
+      return pb
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get is_loading() {
+      return is_loading
+    },
+    get is_pointer_down() {
+      return is_pointer_down
+    },
+    get is_prevent_default() {
+      return is_prevent_default
+    },
+    get is_stop_propagation() {
+      return is_stop_propagation
+    },
+    get tabindex() {
+      return tabindex
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get selected_type() {
+      return selected_type
+    },
+    get is_hovered() {
+      return is_hovered
+    },
+    get min_height() {
+      return min_height
+    },
+    get fixed_width() {
+      return fixed_width
+    },
+    get min_width() {
+      return min_width
+    },
+    get is_compressed() {
+      return is_compressed
+    },
+    get is_pill() {
+      return is_pill
+    },
+    get is_uniform() {
+      return is_uniform
+    },
+    get cursor() {
+      return cursor
+    },
+    get text_align() {
+      return text_align
+    },
+    get text() {
+      return text
+    },
+    get is_success_animation() {
+      return is_success_animation
+    },
+    get font_size() {
+      return font_size
+    },
+    get line_height() {
+      return line_height
+    },
+    get font_weight() {
+      return font_weight
+    },
+    get color() {
+      return color
+    },
+    get gradient_to_color() {
+      return gradient_to_color
+    },
+    get gradient_turn() {
+      return gradient_turn
+    },
+    get contrast_color() {
+      return contrast_color
+    },
+    get border_color() {
+      return border_color
+    },
+    get hover_shadow_color() {
+      return hover_shadow_color
+    },
+    get hover_shadow_size() {
+      return hover_shadow_size
+    },
+    get support_icon() {
+      return support_icon
+    },
+    get is_icon_bg_tint() {
+      return is_icon_bg_tint
+    },
+    get icon_deg() {
+      return icon_deg
+    },
+    get icon_sw() {
+      return icon_sw
+    },
+    get icon_size() {
+      return icon_size
+    },
+    get icon_ml() {
+      return icon_ml
+    },
+    get icon_mr() {
+      return icon_mr
+    },
+    get icon_pos() {
+      return icon_pos
+    },
+    get is_icon_shimmyable() {
+      return is_icon_shimmyable
+    },
+    get icon_movement_stiffness() {
+      return icon_movement_stiffness
+    },
+    get icon_movement_damping() {
+      return icon_movement_damping
+    },
+    get aria_label() {
+      return aria_label
+    },
+    get popover_target() {
+      return popover_target
+    },
+    get is_no_wrap() {
+      return is_no_wrap
+    },
+    get is_word_break_all() {
+      return is_word_break_all
+    },
+    get is_simulated_active() {
+      return is_simulated_active
+    },
+    get is_success() {
+      return is_success
+    },
+    get is_error() {
+      return is_error
+    },
+    get icon_manager() {
+      return icon_manager
+    },
+    success_trigger,
+    error_trigger,
+    icon_shimmy_trigger,
+    handle_click,
+    pointer_down,
+    pointer_up,
+    pointer_enter,
+    pointer_leave,
+    simulate_click,
+    focus,
+  }
+}