sveltekit-ui 1.1.74 → 1.1.76

package/src/routes/components/[component]/Showcase/Button/index.svelte

@@ -1,350 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-  import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-
-  let type = $state("primary") // primary, outlined, soft, plain
-  let border_radius = $state(1)
-  let min_height = $state(3.4)
-  let fixed_width = $state(null)
-  let min_width = $state(null)
-  let is_compressed = $state(false)
-  let is_pill = $state(false)
-  let is_uniform = $state(false)
-  let text_align = $state("center")
-  let font_size = $state(1.6)
-  let font_weight = $state(400)
-  let h = $state(null)
-  let c = $state(null)
-  let l = $state(null)
-  let color = $state(null)
-  let gradient_to_color = $state(null)
-  let hover_shadow_color = $state("transparent")
-  let hover_shadow_size = $state(1)
-  let gradient_turn = $state(0.3)
-  let support_icon = $state(null)
-  let is_icon_bg_tint = $state(false)
-  let icon_deg = $state(0)
-  let icon_sw = $state(0)
-  let icon_size = $state(1.8)
-  let icon_ml = $state(0)
-  let icon_mr = $state(0)
-  let icon_pos = $state("right")
-  let is_icon_shimmyable = $state(true)
-  let icon_movement_stiffness = $state(0.1)
-  let icon_movement_damping = $state(0.1)
-  let is_no_wrap = $state(false)
-  let is_word_break_all = $state(false)
-  let is_success_animation = $state(false)
-  let is_disabled = $state(false)
-  let is_loading = $state(false)
-  let selected_type = $state(null)
-
-  let is_text = $state(true)
-  let text_input_manager = create_text_input_manager()
-
-  let click_count = $state(0)
-  function handle_click() {
-    console.log("handle_click")
-    if (showcase_button_manager && !showcase_button_manager?.is_loading) {
-      click_count++
-      is_loading = true
-      setTimeout(() => {
-        is_loading = false
-        showcase_button_manager.success_trigger()
-      }, 2000)
-    }
-  }
-
-  let showcase_button_manager = create_button_manager({
-    type: () => type,
-    border_radius: () => border_radius,
-    min_height: () => min_height,
-    fixed_width: () => fixed_width,
-    min_width: () => min_width,
-    is_compressed: () => is_compressed,
-    is_pill: () => is_pill,
-    is_uniform: () => is_uniform,
-    text_align: () => text_align,
-    font_size: () => font_size,
-    font_weight: () => font_weight,
-    h: () => h,
-    c: () => c,
-    l: () => l,
-    color: () => color,
-    gradient_to_color: () => gradient_to_color,
-    gradient_turn: () => gradient_turn,
-    hover_shadow_color: () => hover_shadow_color,
-    hover_shadow_size: () => hover_shadow_size,
-    support_icon: () => support_icon,
-    is_icon_bg_tint: () => is_icon_bg_tint,
-    icon_deg: () => icon_deg,
-    icon_sw: () => icon_sw,
-    icon_size: () => icon_size,
-    icon_ml: () => icon_ml,
-    icon_mr: () => icon_mr,
-    icon_pos: () => icon_pos,
-    is_icon_shimmyable: () => is_icon_shimmyable,
-    icon_movement_stiffness: () => icon_movement_stiffness,
-    icon_movement_damping: () => icon_movement_damping,
-    is_no_wrap: () => is_no_wrap,
-    is_word_break_all: () => is_word_break_all,
-    is_success_animation: () => is_success_animation,
-    text: () =>
-      !is_text
-        ? null
-        : text_input_manager?.val && text_input_manager?.val.length > 0
-          ? text_input_manager?.val
-          : `Clicked ${click_count} time${click_count != 1 ? "s" : ""}`,
-    is_disabled: () => is_disabled,
-    is_loading: () => is_loading,
-    selected_type: () => selected_type,
-    on_click: () => handle_click(),
-  })
-
-  let button_manager_type_primary = create_button_manager({
-    type: "outlined",
-    text: "Primary",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.type == "primary" ? "selected" : null),
-    on_click: () => (type = "primary"),
-  })
-  let button_manager_type_outlined = create_button_manager({
-    type: "outlined",
-    text: "outlined",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.type == "outlined" ? "selected" : null),
-    on_click: () => (type = "outlined"),
-  })
-  let button_manager_type_soft = create_button_manager({
-    type: "outlined",
-    text: "Soft",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.type == "soft" ? "selected" : null),
-    on_click: () => (type = "soft"),
-  })
-  let button_manager_type_plain = create_button_manager({
-    type: "outlined",
-    text: "Plain",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.type == "plain" ? "selected" : null),
-    on_click: () => (type = "plain"),
-  })
-  let button_manager_text_align_left = create_button_manager({
-    type: "outlined",
-    text: "Left",
-    is_compressed: true,
-    selected_type: () => (text_align == "left" ? "selected" : null),
-    on_click: () => (text_align = "left"),
-  })
-  let button_manager_text_align_center = create_button_manager({
-    type: "outlined",
-    text: "Center",
-    is_compressed: true,
-    selected_type: () => (text_align == "center" ? "selected" : null),
-    on_click: () => (text_align = "center"),
-  })
-  let button_manager_text_align_right = create_button_manager({
-    type: "outlined",
-    text: "Right",
-    is_compressed: true,
-    selected_type: () => (text_align == "right" ? "selected" : null),
-    on_click: () => (text_align = "right"),
-  })
-  let button_manager_support_icon_none = create_button_manager({
-    type: "outlined",
-    text: "None",
-    is_compressed: true,
-    selected_type: () => (support_icon == null ? "selected" : null),
-    on_click: () => (support_icon = null),
-  })
-  let button_manager_support_icon_send = create_button_manager({
-    type: "outlined",
-    text: "Send Icon",
-    support_icon: "send",
-    is_compressed: true,
-    selected_type: () => (support_icon == "send" ? "selected" : null),
-    on_click: () => (support_icon = "send"),
-  })
-  let button_manager_icon_pos_left = create_button_manager({
-    type: "outlined",
-    text: "Left",
-    is_compressed: true,
-    selected_type: () => (icon_pos == "left" ? "selected" : null),
-    on_click: () => (icon_pos = "left"),
-  })
-  let button_manager_icon_pos_center = create_button_manager({
-    type: "outlined",
-    text: "Center",
-    is_compressed: true,
-    selected_type: () => (icon_pos == "center" ? "selected" : null),
-    on_click: () => (icon_pos = "center"),
-  })
-  let button_manager_icon_pos_right = create_button_manager({
-    type: "outlined",
-    text: "Right",
-    is_compressed: true,
-    selected_type: () => (icon_pos == "right" ? "selected" : null),
-    on_click: () => (icon_pos = "right"),
-  })
-  let checkbox_manager_is_text = create_checkbox_manager({
-    val: true,
-    type: "toggle",
-    on_change: (input) => (is_text = input),
-  })
-  let checkbox_manager_is_compressed = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_compressed = input),
-  })
-  let checkbox_manager_is_pill = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_pill = input),
-  })
-  let checkbox_manager_is_uniform = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_uniform = input),
-  })
-  let checkbox_manager_is_icon_bg_tint = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_icon_bg_tint = input),
-  })
-  let checkbox_manager_is_icon_shimmyable = create_checkbox_manager({
-    val: true,
-    type: "toggle",
-    on_change: (input) => (is_icon_shimmyable = input),
-  })
-  let checkbox_manager_is_no_wrap = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_no_wrap = input),
-  })
-  let checkbox_manager_is_word_break_all = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_word_break_all = input),
-  })
-  let checkbox_manager_is_success_animation = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_success_animation = input),
-  })
-  let checkbox_manager_is_disabled = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_disabled = input),
-  })
-  let checkbox_manager_is_loading = create_checkbox_manager({
-    val: false,
-    type: "toggle",
-    on_change: (input) => (is_loading = input),
-  })
-
-  let button_manager_selected_type_null = create_button_manager({
-    type: "outlined",
-    text: "Null",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.selected_type == null ? "selected" : null),
-    on_click: () => (selected_type = null),
-  })
-
-  let button_manager_selected_type_selected = create_button_manager({
-    type: "outlined",
-    text: "Selected",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.selected_type == "selected" ? "selected" : null),
-    on_click: () => (selected_type = "selected"),
-  })
-  let button_manager_selected_type_half_selected = create_button_manager({
-    type: "outlined",
-    text: "Half Selected",
-    is_compressed: true,
-    selected_type: () => (showcase_button_manager?.selected_type == "half_selected" ? "selected" : null),
-    on_click: () => (selected_type = "half_selected"),
-  })
-</script>
-
-<div class="container">
-  <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-    <div
-      style="width: 40rem; height: 30rem; display: grid; place-items: center; border: 1px solid var(--g8-t); border-radius: 1rem;"
-    >
-      <div style="width: 30rem;">
-        <Button manager={showcase_button_manager} />
-      </div>
-    </div>
-    <div>
-      <h3 class="label">Type</h3>
-      <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-        <Button manager={button_manager_type_primary} />
-        <Button manager={button_manager_type_outlined} />
-        <Button manager={button_manager_type_soft} />
-        <Button manager={button_manager_type_plain} />
-      </div>
-      <h3 class="label">Is Text</h3>
-      <Checkbox manager={checkbox_manager_is_text} />
-      {#if checkbox_manager_is_text?.val}
-        <h3 class="label">Text</h3>
-        <TextInput manager={text_input_manager} />
-        <h3 class="label">Text Align</h3>
-        <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-          <Button manager={button_manager_text_align_left} />
-          <Button manager={button_manager_text_align_center} />
-          <Button manager={button_manager_text_align_right} />
-        </div>
-        <h3 class="label">Icon Position</h3>
-        <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-          <Button manager={button_manager_icon_pos_left} />
-          <Button manager={button_manager_icon_pos_center} />
-          <Button manager={button_manager_icon_pos_right} />
-        </div>
-      {/if}
-      <h3 class="label">Icon</h3>
-      <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-        <Button manager={button_manager_support_icon_none} />
-        <Button manager={button_manager_support_icon_send} />
-      </div>
-      <h3 class="label">Selected Type</h3>
-      <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-        <Button manager={button_manager_selected_type_null} />
-        <Button manager={button_manager_selected_type_selected} />
-        <Button manager={button_manager_selected_type_half_selected} />
-      </div>
-      <h3 class="label">Is Compressed</h3>
-      <Checkbox manager={checkbox_manager_is_compressed} />
-      <h3 class="label">Is Pill</h3>
-      <Checkbox manager={checkbox_manager_is_pill} />
-      <h3 class="label">Is Uniform</h3>
-      <Checkbox manager={checkbox_manager_is_uniform} />
-      <h3 class="label">Is Icon Background Tint</h3>
-      <Checkbox manager={checkbox_manager_is_icon_bg_tint} />
-      <h3 class="label">Is Icon Shimmyable</h3>
-      <Checkbox manager={checkbox_manager_is_icon_shimmyable} />
-      <h3 class="label">Is No Wrap</h3>
-      <Checkbox manager={checkbox_manager_is_no_wrap} />
-      <h3 class="label">Is Word Break All</h3>
-      <Checkbox manager={checkbox_manager_is_word_break_all} />
-      <h3 class="label">Is Success Animation</h3>
-      <Checkbox manager={checkbox_manager_is_success_animation} />
-      <h3 class="label">Is Disabled</h3>
-      <Checkbox manager={checkbox_manager_is_disabled} />
-      <h3 class="label">Is Loading</h3>
-      <Checkbox manager={checkbox_manager_is_loading} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding: 1rem;
-  }
-</style>