sveltekit-ui 1.0.0

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

@@ -0,0 +1,44 @@
+<script>
+  import Breadcrumbs from "$lib/Components/Breadcrumbs/index.svelte"
+  import { create_breadcrumbs_manager } from "$lib/Components/Breadcrumbs/index.svelte.js"
+
+  function on_change_breadcrumbs(input) {
+    console.log("on_change_breadcrumbs", input)
+  }
+
+  let breadcrumbs_manager = create_breadcrumbs_manager({
+    val: ["test", "yooo"],
+    on_change: (input) => console.log("on_change_breadcrumbs", input),
+  })
+
+  let breadcrumbs_manager2 = create_breadcrumbs_manager({
+    val: [
+      { key: "test", name: "Test" },
+      { key: "yooo", name: "Yooo" },
+    ],
+    on_change: (input) => console.log("breadcrumbs2", input),
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <div>
+        <Breadcrumbs manager={breadcrumbs_manager} />
+      </div>
+      <h4>Example named</h4>
+      <div>
+        <Breadcrumbs manager={breadcrumbs_manager2} />
+      </div>
+    </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/Button/index.svelte

@@ -0,0 +1,350 @@
+<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>