poe-svelte-ui-lib 1.0.4 → 1.0.5

package/dist/Accordion/Accordion.svelte

@@ -21,7 +21,11 @@
     {props.type === 'sub' ? 'border-b border-[var(--border-color)]' : ''}"
     onclick={toggle}
   >
-    <span class="toggle m-0 cursor-pointer text-lg font-semibold {props.label?.class}">
+    <span class="toggle m-0 cursor-pointer text-lg flex items-center gap-2 font-semibold {props.label?.class}">
+      {#if props.icon?.component}
+        {@const IconComponent = props.icon?.component}
+        <IconComponent {...props.icon?.properties} />
+      {/if}
       {props.label?.name}
     </span>
     <svg

package/dist/Input/Input.svelte

@@ -173,7 +173,7 @@
           class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-[var(--green-color)] px-2 py-1 text-sm shadow-lg"
           transition:fly={{ x: 10, duration: 200 }}
         >
-          ✔
+          ✓
         </div>
       {/if}
     {/if}

package/dist/Select/Select.svelte

@@ -18,6 +18,7 @@
     type = 'select',
     value = $bindable(),
     options = [],
+    placeholder= '---', 
     onUpdate,
   }: ISelectProps<T> = $props()
 
@@ -101,7 +102,7 @@
       aria-expanded={isDropdownOpen}
       {disabled}
     >
-      {value?.name || ''}
+      {value?.name || placeholder}
     </button>
 
     {#if isDropdownOpen}

package/dist/Slider/Slider.svelte

@@ -94,7 +94,7 @@
   {/if}
 
   <!-- Слайдер -->
-  <div class="relative flex h-2 w-full justify-center {disabled ? 'opacity-50' : ''}" id={id.value}>
+  <div class="relative flex h-2 w-full justify-center {disabled ? 'opacity-50 cursor-not-allowed' : ''}" id={id.value}>
     {#if isRange}
       <!-- Трек и активная зона -->
       <div

package/dist/Table/Table.svelte

@@ -8,12 +8,12 @@
     id = { value: crypto.randomUUID(), name: '' },
     wrapperClass = 'bg-blue',
     label = { name: '', class: '' },
-    tableBody = [],
-    tableHeader = [],
+    body = [],
+    header = [],
+    footer = '',
     cursor = null,
     loader,
     getData = () => {},
-    info = '',
     modalData = $bindable({ isOpen: false, rawData: '', formattedData: '' }),
     onClick,
   }: ITableProps<any> = $props()
@@ -36,7 +36,7 @@
       sortState.direction = 'asc'
     }
 
-    tableBody = [...tableBody].sort((a, b) => {
+    body = [...body].sort((a, b) => {
       const aValue = a[key]
       const bValue = b[key]
       if (typeof aValue === 'number' && typeof bValue === 'number') {
@@ -126,8 +126,8 @@
 
   <div class="flex h-full flex-col overflow-hidden rounded-xl border-[var(--border-color)]">
     <!-- Table Header -->
-    <div class="grid font-semibold" style={`grid-template-columns: ${tableHeader.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-      {#each tableHeader as column (column)}
+    <div class="grid font-semibold" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
+      {#each header as column (column)}
         <div class="justify-center bg-[var(--bg-color)] p-2 text-center">
           <div class="flex items-center justify-start gap-2">
             <span>{column.label}</span>
@@ -146,9 +146,9 @@
 
     <!-- Table Body с прокруткой -->
     <div class="flex-1 overflow-y-auto bg-[var(--conteiner-color)]/50" bind:this={container} onscroll={handleScroll}>
-      <div class="grid min-w-0" style={`grid-template-columns: ${tableHeader.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-        {#each tableBody as row, index (row)}
-          {#each tableHeader as column (column)}
+      <div class="grid min-w-0" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
+        {#each body as row, index (row)}
+          {#each header as column (column)}
             <div
               class="relative flex w-full min-w-0 items-center px-2 py-1 break-words
               {index % 2 ? '!bg-[var(--back-color)]/40' : ''}
@@ -242,7 +242,7 @@
                       class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-[var(--green-color)] px-2 py-1 text-sm shadow-lg"
                       transition:fly={{ x: 10, duration: 200 }}
                     >
-                      ✔
+                      ✓
                     </div>
                   {/if}
                 {/if}
@@ -266,9 +266,9 @@
     {/if}
 
     <!-- Нижнее поле для сводной информации -->
-    {#if info != ''}
+    {#if footer != ''}
       <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
-        <h5>{info}</h5>
+        <h5>{footer}</h5>
       </div>
     {/if}
   </div>

package/dist/types.d.ts

@@ -57,6 +57,10 @@ export interface IAccordionProps {
         name?: string;
         class?: string;
     };
+    icon?: {
+        component?: ConstructorOfATypedSvelteComponent | null;
+        properties?: Record<string, unknown>;
+    };
     isOpen: boolean;
     componentClass?: string;
     type?: 'main' | 'sub';
@@ -110,6 +114,7 @@ export interface ISelectProps<T = unknown> {
     type?: 'select' | 'buttons' | 'input';
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
+    placeholder?: string;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
@@ -269,9 +274,9 @@ export interface ITableProps<T extends object> {
         name?: string;
         class?: string;
     };
-    tableHeader: ITableHeader<T>[];
-    tableBody: T[];
-    info?: string;
+    header: ITableHeader<T>[];
+    body: T[];
+    footer?: string;
     cursor?: string | null;
     loader?: Writable<boolean>;
     getData?: () => void;

package/package.json

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