poe-svelte-ui-lib 1.4.1 → 1.4.3

package/dist/Select/Select.svelte

@@ -103,7 +103,14 @@
         ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}`,
         value?.class,
       )}
-      style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+      style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); 
+            {value?.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
+        ? `border-width: 1px;
+            border-color: var(--${value.class
+              ?.split(' ')
+              .find((cls: string) => cls.startsWith('border-'))
+              ?.replace('border-', '')}-color)`
+        : ''}"
       onclick={toggleDropdown}
       aria-haspopup="true"
       aria-expanded={isDropdownOpen}
@@ -129,7 +136,14 @@
             )}
             onclick={(e) => selectOption(option, e)}
             {disabled}
-            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); 
+            {option.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
+              ? `border-width: 1px;
+            border-color: var(--${option.class
+              ?.split(' ')
+              .find((cls: string) => cls.startsWith('border-'))
+              ?.replace('border-', '')}-color)`
+              : ''}"
           >
             {option.name}
           </button>
@@ -148,6 +162,14 @@
             ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
             option.class,
           )} bg-(--bg-color)"
+          style="
+            {option.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
+            ? `border-width: 1px;
+            border-color: var(--${option.class
+              ?.split(' ')
+              .find((cls: string) => cls.startsWith('border-'))
+              ?.replace('border-', '')}-color)`
+            : ''}"
           onclick={(e) => selectOption(option, e)}
           disabled={option.disabled}
         >
@@ -197,7 +219,14 @@
             )}
             onclick={(e) => selectOption(option, e)}
             {disabled}
-            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); 
+            {option.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
+              ? `border-width: 1px;
+            border-color: var(--${option.class
+              ?.split(' ')
+              .find((cls: string) => cls.startsWith('border-'))
+              ?.replace('border-', '')}-color)`
+              : ''}"
           >
             {option.name}
           </button>

package/dist/Select/SelectProps.svelte

@@ -412,17 +412,14 @@
             updateProperty('options', options, component, onPropertyChange)
           }}
         />
-        <UI.Select
-          wrapperClass="w-80 h-14.5"
-          label={{ name: $t('constructor.props.colors') }}
-          type="buttons"
-          options={$optionsStore.COLOR_OPTIONS}
-          value={$optionsStore.COLOR_OPTIONS.find((c) =>
-            (c.value as string).includes(option.class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
-          )}
-          onUpdate={(option) => {
+        <UI.Input
+          label={{ name: $t('constructor.props.optionclass') }}
+          wrapperClass="!w-3/10"
+          value={option.class}
+          type={currentValueType.value}
+          onUpdate={(value) => {
             const options = [...(component.properties?.options || [])]
-            options[index]['class'] = option.value
+            options[index]['class'] = value as string
             updateProperty('options', options, component, onPropertyChange)
           }}
         />

package/dist/Tabs/TabsProps.svelte

@@ -267,6 +267,7 @@
         }}
       />
     </div>
+
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
         wrapperClass="h-14"
@@ -282,6 +283,7 @@
           })
         }}
       />
+
       <UI.Switch
         label={{
           name: $t('constructor.props.widthMode'),
@@ -291,20 +293,11 @@
         value={initialWidth()}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
-          if (value === 2) {
-            component.properties.items.forEach((_item: any, index: number) => {
-              let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
-              const items = [...(component.properties?.items || [])]
-              items[index]['class'] = twMerge(items[index].class, `w-[${tabWidth}px]`)
-              updateProperty('items', items, component, onPropertyChange)
-            })
-          } else {
-            component.properties.items.forEach((_item: any, index: number) => {
-              const items = [...(component.properties?.items || [])]
-              items[index]['class'] = twMerge(items[index].class, 'w-auto')
-              updateProperty('items', items, component, onPropertyChange)
-            })
-          }
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, value ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+            updateProperty('items', items, component, onPropertyChange)
+          })
         }}
       />
     </div>

package/dist/locales/translations.js

@@ -115,7 +115,7 @@ const translations = {
         'constructor.props.min': 'Минимальное значение',
         'constructor.props.max': 'Максимальное значение',
         'constructor.props.units': 'Единица измерения',
-        'constructor.props.optionclass': 'Стили кнопки',
+        'constructor.props.optionclass': 'Стили опции',
         'constructor.props.optionvalue': 'Значение',
         'constructor.props.optionposition': 'Позиция',
         'constructor.props.optionname': 'Текст',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,13 +33,13 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.17",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.3",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "svelte-maplibre-gl": "^1.0.2",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
-    "tsx": "^4.20.6",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   },
   "devDependencies": {