poe-svelte-ui-lib 1.19.0 → 1.20.1

package/dist/Button/Button.svelte

@@ -97,7 +97,7 @@
   })
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
+<div class={twMerge(`relative flex w-full flex-col items-center gap-1`, wrapperClass)}>
   <button
     {id}
     class={`${twMerge(
@@ -145,4 +145,9 @@
   </button>
 
   <Tooltip show={showInfo} text={content.info?.text ?? ""} side={content.info?.side ?? "top"} />
+
+  <!-- Такая же зарезервированная строка, как у Input/Select (h-4, всегда пустая — у кнопки
+       нет валидации), чтобы высота совпадала при совместном размещении в одной строке
+       (items-end) с полем ввода или селектом. -->
+  <span class="block h-4" aria-hidden="true"></span>
 </div>

package/dist/FileAttach/FileAttach.svelte

@@ -6,6 +6,7 @@
   let {
     id = crypto.randomUUID(),
     wrapperClass = "",
+    componentClass = "",
     label = { name: "", class: "" },
     type = "file",
     accept = "*/*",
@@ -93,8 +94,8 @@
         <div class="flex shrink-0 items-center justify-center bg-(--accent-color) px-3 font-semibold whitespace-nowrap text-(--on-accent)">
           {$T("constructor.props.file.select")}
         </div>
-        <div class="flex min-w-0 flex-1 items-center justify-start truncate bg-(--field-color) px-3 text-(--font-color)">
-          <p class="truncate">{fileName || $T("constructor.props.file.notselected")}</p>
+        <div class={twMerge("flex min-w-0 flex-1 items-center justify-start truncate bg-(--field-color) px-3 text-(--font-color)", componentClass)}>
+          <p class="w-full truncate">{fileName || $T("constructor.props.file.notselected")}</p>
         </div>
       </div>
     </label>

package/dist/Input/Input.svelte

@@ -239,10 +239,9 @@
     {/if}
   </div>
 
-  {#if help.regExp}
-    <!-- Место под ошибку зарезервировано всегда (высота фиксирована), чтобы её появление
-         не двигало соседние элементы — кнопку в одной строке с полем (как в восстановлении
-         пароля) или соседние поля формы. -->
-    <span class="block h-4 text-[12px] text-(--red-color)">{!isValid ? "Неверный формат" : ""}</span>
-  {/if}
+  <!-- Место под ошибку зарезервировано всегда (высота фиксирована, не только когда задан
+       help.regExp), чтобы Input сохранял одну и ту же высоту во всех случаях — иначе он не
+       совпадает по высоте с Select в одной строке (items-end), когда у одного поля есть
+       валидация, а у другого нет. -->
+  <span class="block h-4 text-[12px] text-(--red-color)">{help.regExp && !isValid ? "Неверный формат" : ""}</span>
 </div>

package/dist/Select/Select.svelte

@@ -46,6 +46,7 @@
   let {
     id = crypto.randomUUID(),
     wrapperClass = "",
+    componentClass = "",
     disabled = false,
     label = { name: "", class: "" },
     multiSelect = false,
@@ -156,7 +157,7 @@
         aria-expanded={isDropdownOpen}
         {disabled}
       >
-        <span class="min-w-0 truncate {value?.name ? '' : 'text-(--faint-color)'}">{value?.name || $T("common.select_tag")}</span>
+        <span class="min-w-0 flex-1 truncate {value?.name ? '' : 'text-(--faint-color)'} {componentClass}">{value?.name || $T("common.select_tag")}</span>
         <svg
           class="size-3.5 shrink-0 text-(--faint-color) transition-transform duration-150"
           style="transform: rotate({isDropdownOpen ? 180 : 0}deg)"
@@ -245,9 +246,11 @@
     {:else if type === "input"}
       <input
         bind:value={searchValue}
-        class="{fieldBase} {disabled
-          ? 'cursor-not-allowed border-(--hairline-color) bg-(--container-color) text-(--faint-color)'
-          : 'cursor-text hover:border-(--faint-color)'}"
+        class={twMerge(
+          fieldBase,
+          disabled ? "cursor-not-allowed border-(--hairline-color) bg-(--container-color) text-(--faint-color)" : "cursor-text hover:border-(--faint-color)",
+          componentClass,
+        )}
         id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {disabled}
         oninput={handleSearch}
@@ -284,4 +287,8 @@
       {/if}
     {/if}
   </div>
+
+  <!-- Такая же зарезервированная строка, как у Input (h-4, всегда пустая — у Select нет
+       валидации), чтобы высота совпадала при совместном размещении в одной строке (items-end). -->
+  <span class="block h-4 text-[12px]"></span>
 </div>

package/dist/types.d.ts

@@ -121,6 +121,7 @@ export interface IDividerProps {
 export interface IFileAttachProps {
     id?: string;
     wrapperClass?: string;
+    componentClass?: string;
     label?: {
         name?: string;
         class?: string;
@@ -269,6 +270,7 @@ export interface IProgressBarProps {
 export interface ISelectProps<T = unknown> {
     id?: string;
     wrapperClass?: string;
+    componentClass?: string;
     disabled?: boolean;
     label?: {
         name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.19.0",
+  "version": "1.20.1",
   "license": "MIT",
   "type": "module",
   "scripts": {