feat: migrate to svelte initial

2026-04-29 11:10:12 +03:00
parent d7d5c2b1ef
commit 4ce78f277e
23 changed files with 19245 additions and 2941 deletions
@@ -0,0 +1,38 @@
+<script>
+  import { cn } from "../../utils.js";
+
+  export let type = "button";
+  export let variant = "default";
+  export let size = "default";
+  export let disabled = false;
+  export let href = "";
+  export let onclick = undefined;
+  let className = "";
+  export { className as class };
+
+  const variants = {
+    default: "btn btn-primary",
+    secondary: "btn btn-secondary",
+    outline: "btn btn-outline",
+    ghost: "btn btn-ghost",
+    telegram: "btn btn-telegram",
+    icon: "btn btn-icon",
+  };
+
+  const sizes = {
+    default: "",
+    sm: "btn-sm",
+    lg: "btn-lg",
+    icon: "btn-square",
+  };
+</script>
+
+{#if href}
+  <a class={cn(variants[variant], sizes[size], className)} {href} on:click={onclick} {...$$restProps}>
+    <slot />
+  </a>
+{:else}
+  <button class={cn(variants[variant], sizes[size], className)} {type} {disabled} on:click={onclick} {...$$restProps}>
+    <slot />
+  </button>
+{/if}
@@ -0,0 +1,12 @@
+<script>
+  import { cn } from "../../utils.js";
+
+  export let active = false;
+  export let compact = false;
+  let className = "";
+  export { className as class };
+</script>
+
+<section class={cn("card", active && "card-active", compact && "card-compact", className)}>
+  <slot />
+</section>
@@ -0,0 +1,30 @@
+<script>
+  import { X } from "lucide-svelte";
+  import { cn } from "../../utils.js";
+  import Button from "./button.svelte";
+
+  export let open = false;
+  export let title = "";
+  export let description = "";
+  export let onclose = () => {};
+  let className = "";
+  export { className as class };
+</script>
+
+{#if open}
+  <div class="dialog" role="dialog" aria-modal="true" aria-label={title}>
+    <button class="dialog-backdrop" type="button" aria-label="Закрыть" on:click={onclose}></button>
+    <section class={cn("dialog-card", className)}>
+      <div class="dialog-head">
+        <div>
+          {#if title}<h2>{title}</h2>{/if}
+          {#if description}<p>{description}</p>{/if}
+        </div>
+        <Button variant="icon" size="icon" onclick={onclose} aria-label="Закрыть">
+          <X size={18} />
+        </Button>
+      </div>
+      <slot />
+    </section>
+  </div>
+{/if}
@@ -0,0 +1,24 @@
+<script>
+  import { cn } from "../../utils.js";
+
+  export let value = "";
+  export let type = "text";
+  export let placeholder = "";
+  export let inputmode = undefined;
+  export let maxlength = undefined;
+  export let autocomplete = undefined;
+  export let disabled = false;
+  let className = "";
+  export { className as class };
+</script>
+
+<input
+  bind:value
+  class={cn("input", className)}
+  {type}
+  {placeholder}
+  {inputmode}
+  {maxlength}
+  {autocomplete}
+  {disabled}
+/>
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}