poe-svelte-ui-lib 1.6.2 → 1.6.4

package/dist/Carousel/Carousel.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge"
+  import ArrowIcon from "../libIcons/ArrowIcon.svelte"
+  import { slide } from "svelte/transition"
+  import type { ICarouselProps } from "../types"
+
+  let { id = crypto.randomUUID(), wrapperClass = "", label = { name: "", class: "text-left" }, scrollValue = 200, children }: ICarouselProps = $props()
+
+  let carouselRef: HTMLDivElement | null = $state(null)
+  let isAtStart = $state(true)
+  let isAtEnd = $state(true)
+
+  function scrollCarousel(delta: number) {
+    if (carouselRef) carouselRef.scrollBy({ left: delta, behavior: "smooth" })
+  }
+
+  function updateScrollState() {
+    if (!carouselRef) return
+    isAtStart = carouselRef.scrollLeft === 0
+    isAtEnd = carouselRef.scrollLeft + carouselRef.clientWidth >= carouselRef.scrollWidth - 1
+  }
+
+  $effect(() => {
+    if (!carouselRef) return
+    updateScrollState()
+
+    const onScroll = () => updateScrollState()
+    carouselRef.addEventListener("scroll", onScroll)
+
+    const resizeObserver = new ResizeObserver(() => updateScrollState())
+    resizeObserver.observe(carouselRef)
+
+    return () => {
+      carouselRef?.removeEventListener("scroll", onScroll)
+      resizeObserver.disconnect()
+    }
+  })
+</script>
+
+<div class={twMerge(`flex flex-col items-center`, wrapperClass)}>
+  {#if label.name}
+    <h5 class={`${label.class}`}>{label.name}</h5>
+  {/if}
+  <!-- Карусель -->
+  <div class="relative w-full overflow-hidden rounded-2xl bg-(--back-color)/50">
+    <!-- Кнопки навигации -->
+    {#if !isAtStart}
+      <button
+        transition:slide={{ axis: "x" }}
+        class="absolute z-10 size-10 translate-y-1/2 cursor-pointer left-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)] rotate-180"
+        onclick={() => scrollCarousel(-scrollValue)}>
+        <ArrowIcon />
+      </button>
+    {/if}
+    {#if !isAtEnd}
+      <button
+        transition:slide={{ axis: "x" }}
+        class="absolute z-10 size-10 translate-y-1/2 cursor-pointer right-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)]"
+        onclick={() => scrollCarousel(scrollValue)}>
+        <ArrowIcon />
+      </button>
+    {/if}
+
+    <div {id} bind:this={carouselRef} class="flex overflow-y-hidden gap-2 p-2 h-24">
+      {@render children?.()}
+    </div>
+  </div>
+</div>

package/dist/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICarouselProps } from "../types";
+declare const Carousel: import("svelte").Component<ICarouselProps, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/Input/Input.svelte

@@ -1,24 +1,24 @@
 <!-- $lib/ElementsUI/Input.svelte -->
 <script lang="ts">
-  import { fade, fly } from 'svelte/transition'
-  import type { IInputProps } from '../types'
-  import { twMerge } from 'tailwind-merge'
+  import { fade, fly } from "svelte/transition"
+  import type { IInputProps } from "../types"
+  import { twMerge } from "tailwind-merge"
 
   let {
     id = crypto.randomUUID(),
-    wrapperClass = '',
-    label = { name: '', class: '' },
+    wrapperClass = "",
+    label = { name: "", class: "" },
     disabled = false,
     readonly = false,
     value = $bindable(),
-    type = 'text',
-    placeholder = '',
-    componentClass = '',
+    type = "text",
+    placeholder = "",
+    componentClass = "",
     maxlength = 100,
     textareaRows = 3,
     isValid = $bindable(true),
     number = { minNum: -1000000, maxNum: 1000000, step: 1 },
-    help = { info: '', autocomplete: 'off', copyButton: false, regExp: '^[\\s\\S]*$' },
+    help = { info: "", autocomplete: "off", copyButton: false, regExp: "^[\\s\\S]*$" },
     onUpdate = () => {},
   }: IInputProps = $props()
 
@@ -26,11 +26,11 @@
   let showInfo = $state(false)
   let isCopied = $state(false)
 
-  $effect(() => {
-    if (type === 'number') {
-      if (value === undefined || value === null || value === '') value = number.minNum
-    }
-  })
+  // $effect(() => {
+  //   if (type === "number") {
+  //     if (value === undefined || value === null || value === "") value = number.minNum
+  //   }
+  // })
 
   /* Обработка регулярного выражения */
   const parseRegExp = (pattern: string | RegExp): RegExp => {
@@ -38,14 +38,15 @@
     const match = pattern.match(/^\/(.*)\/([gimsuy]*)$/)
     return match ? new RegExp(match[1], match[2]) : new RegExp(pattern)
   }
-  let RegExpObj = $derived(() => parseRegExp(help.regExp ?? ''))
+  let RegExpObj = $derived(() => parseRegExp(help.regExp ?? ""))
+
   $effect(() => {
-    isValid = RegExpObj().test(typeof value === 'string' ? value : String(value))
+    isValid = RegExpObj().test(typeof value === "string" ? value : String(value))
   })
 
   const handleInputChange = (value: string | number) => {
-    if (type === 'number') {
-      const numValue = typeof value === 'string' ? parseFloat(value.replace(',', '.')) : Number(value)
+    if (type === "number") {
+      const numValue = typeof value === "string" ? parseFloat(value.replace(",", ".")) : Number(value)
       if (!isNaN(numValue)) onUpdate?.(numValue)
       else onUpdate?.(value as string)
     } else {
@@ -53,8 +54,16 @@
     }
   }
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (type === "number") {
+      if (e.key === ".") {
+        e.preventDefault()
+      }
+    }
+  }
+
   $effect(() => {
-    if (type === 'number' && typeof value == 'number') {
+    if (type === "number" && typeof value == "number") {
       value = roundToClean(value)
     }
   })
@@ -72,23 +81,23 @@
   }
 </script>
 
-<div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col px-1 items-center`, wrapperClass)}>
+<div class={twMerge(`bg-max ${type === "text-area" ? "h-full" : ""} relative flex w-full flex-col px-1 items-center`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class="relative flex w-full items-center {type === 'text-area' ? 'h-full' : ''}">
-    {#if type === 'text' || type === 'password' || type === 'number'}
+    {#if type === "text" || type === "password" || type === "number"}
       <input
         bind:value
         class={twMerge(
           `w-full rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
               outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-              ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
-              ${disabled ? 'opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'} 
-              ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
-              ${help?.info ? 'pl-8' : ''} 
-              ${help.copyButton || type === 'password' || (type === 'number' && !readonly) ? 'pr-8' : ''}`,
+              ${isValid ? "border-(--bg-color)" : "border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400"}
+              ${disabled ? "opacity-50" : "hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"} 
+              ${readonly ? "" : "hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"}
+              ${help?.info ? "pl-8" : ""} 
+              ${help.copyButton || type === "password" || (type === "number" && !readonly) ? "pr-8" : ""}`,
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
@@ -96,25 +105,25 @@
         {placeholder}
         {disabled}
         autocomplete={help?.autocomplete}
-        oninput={(e) => handleInputChange((e.currentTarget as HTMLInputElement).value)}
-        type={type === 'password' ? (showPassword ? 'text' : 'password') : type === 'number' ? 'number' : 'text'}
+        oninput={e => handleInputChange((e.currentTarget as HTMLInputElement).value)}
+        onkeydown={handleKeyDown}
+        type={type === "password" ? (showPassword ? "text" : "password") : type === "number" ? "number" : "text"}
         {maxlength}
         min={number?.minNum}
         max={number?.maxNum}
         step={number?.step}
-        {readonly}
-      />
-    {:else if type === 'text-area'}
+        {readonly} />
+    {:else if type === "text-area"}
       <textarea
         bind:value
         class={twMerge(
           `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition
           duration-200 outline-none focus:border-blue-400
-            ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
-            ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'} 
-            ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
-            ${help?.info ? 'pl-8' : ''}
-            ${help.copyButton ? 'pr-8' : ''}`,
+            ${isValid ? "border-(--bg-color)" : "border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400"}
+            ${disabled ? "cursor-not-allowed opacity-50" : "hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"} 
+            ${readonly ? "" : "hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"}
+            ${help?.info ? "pl-8" : ""}
+            ${help.copyButton ? "pr-8" : ""}`,
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
@@ -124,63 +133,55 @@
         rows={textareaRows}
         {placeholder}
         {readonly}
-        oninput={(e) => handleInputChange((e.currentTarget as HTMLTextAreaElement).value)}
-      ></textarea>
+        oninput={e => handleInputChange((e.currentTarget as HTMLTextAreaElement).value)}></textarea>
     {/if}
 
-    {#if type === 'password' && !disabled}
+    {#if type === "password" && !disabled}
       <button
         type="button"
         class="absolute right-2 flex cursor-pointer border-none bg-transparent"
         onclick={() => (showPassword = !showPassword)}
-        aria-label={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
-      >
+        aria-label={showPassword ? "Скрыть пароль" : "Показать пароль"}>
         {#if showPassword}
           <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
             ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
               ><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" /><path
-                d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7"
-              /></g
-            ></svg
-          >
+                d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7" /></g
+            ></svg>
         {:else}
           <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
             ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
               ><path
                 stroke-linejoin="round"
-                d="M10.73 5.073A11 11 0 0 1 12 5c4.664 0 8.4 2.903 10 7a11.6 11.6 0 0 1-1.555 2.788M6.52 6.519C4.48 7.764 2.9 9.693 2 12c1.6 4.097 5.336 7 10 7a10.44 10.44 0 0 0 5.48-1.52m-7.6-7.6a3 3 0 1 0 4.243 4.243"
-              /><path d="m4 4l16 16" /></g
-            ></svg
-          >
+                d="M10.73 5.073A11 11 0 0 1 12 5c4.664 0 8.4 2.903 10 7a11.6 11.6 0 0 1-1.555 2.788M6.52 6.519C4.48 7.764 2.9 9.693 2 12c1.6 4.097 5.336 7 10 7a10.44 10.44 0 0 0 5.48-1.52m-7.6-7.6a3 3 0 1 0 4.243 4.243" /><path
+                d="m4 4l16 16" /></g
+            ></svg>
         {/if}
       </button>
     {/if}
 
-    {#if help.copyButton && (type === 'text' || type === 'text-area') && !disabled}
+    {#if help.copyButton && (type === "text" || type === "text-area") && !disabled}
       <button
         class="absolute right-3 flex border-none bg-transparent {type === 'text-area' ? 'top-2' : ''} cursor-pointer"
-        onclick={(e) => {
+        onclick={e => {
           e.preventDefault()
           navigator.clipboard.writeText(value as string)
           isCopied = true
           setTimeout(() => (isCopied = false), 1000)
         }}
-        aria-label="Копировать текст"
-      >
+        aria-label="Копировать текст">
         <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
           {#if isCopied}
             <div
               class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
-              transition:fade={{ duration: 200 }}
-            >
+              transition:fade={{ duration: 200 }}>
               ✓
             </div>
           {:else}
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
               <g fill="none" stroke="currentColor" stroke-width="1.5">
                 <path
-                  d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
-                />
+                  d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z" />
                 <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
               </g>
             </svg>
@@ -189,12 +190,12 @@
       </button>
     {/if}
 
-    {#if type === 'number' && !readonly && !disabled}
+    {#if type === "number" && !readonly && !disabled}
       <div class="absolute right-0 flex h-full w-8 flex-col items-center justify-center rounded-r-2xl border-l border-(--border-color)">
         <button
           class="flex h-1/2 w-full items-center rounded-tr-2xl border-b border-(--border-color) pl-2 transition-colors duration-150 hover:bg-(--gray-color)/30 active:bg-(--gray-color)/10"
           onclick={() => {
-            if (!number.maxNum || !number.step) return
+            if (!number.maxNum || !number.step || !value) return
             if (Number(value) + number.step >= number.maxNum) {
               value = number.maxNum
               onUpdate(value as number)
@@ -203,13 +204,12 @@
             value = Number(value) + (number.step ?? 1)
             onUpdate(value as number)
           }}
-          aria-label="Увеличить">+</button
-        >
+          aria-label="Увеличить">+</button>
 
         <button
           class="flex h-1/2 w-full items-center rounded-br-2xl pl-2 transition-colors duration-150 hover:bg-(--gray-color)/30 active:bg-(--gray-color)/10"
           onclick={() => {
-            if (number.minNum === null || number.minNum === undefined || !number.step) return
+            if (!number.minNum || !number.step || !value) return
             if (Number(value) - number.step <= number.minNum) {
               value = number.minNum
               onUpdate(value as number)
@@ -218,36 +218,27 @@
             value = Number(value) - (number.step ?? 1)
             onUpdate(value as number)
           }}
-          aria-label="Уменьшить">−</button
-        >
+          aria-label="Уменьшить">−</button>
       </div>
     {/if}
 
     {#if help.info}
       <button
         type="button"
-        class="button-info absolute left-2 flex border-none bg-transparent {type === 'text-area' ? 'top-2' : ''} {disabled
-          ? 'opacity-50'
-          : 'cursor-pointer'}"
+        class="button-info absolute left-2 flex border-none bg-transparent {type === 'text-area' ? 'top-2' : ''} {disabled ? 'opacity-50' : 'cursor-pointer'}"
         onmouseenter={() => (showInfo = true)}
         onmouseleave={() => (showInfo = false)}
-        aria-label={showInfo ? 'Скрыть инфо' : 'Показать инфо'}
-      >
+        aria-label={showInfo ? "Скрыть инфо" : "Показать инфо"}>
         <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
           ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-            ><circle cx="12" cy="12" r="10" stroke-width="1.3" /><path stroke-width="1.5" d="M12 16v-4.5" /><path
-              stroke-width="1.8"
-              d="M12 8.012v-.01"
-            /></g
-          ></svg
-        >
+            ><circle cx="12" cy="12" r="10" stroke-width="1.3" /><path stroke-width="1.5" d="M12 16v-4.5" /><path stroke-width="1.8" d="M12 8.012v-.01" /></g
+          ></svg>
       </button>
 
       {#if showInfo}
         <div
           transition:fly={{ x: -15, duration: 250 }}
-          class="absolute top-5 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
-        >
+          class="absolute top-5 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg">
           {help?.info}
         </div>
       {/if}

package/dist/Input/Input.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IInputProps } from '../types';
+import type { IInputProps } from "../types";
 declare const Input: import("svelte").Component<IInputProps, {}, "value" | "isValid">;
 type Input = ReturnType<typeof Input>;
 export default Input;