poe-svelte-ui-lib 1.1.17 → 1.1.18

package/dist/Button/Button.svelte

@@ -116,7 +116,7 @@
     {#if showInfo && content.info?.side === 'top'}
       <div
         transition:fly={{ y: -15, duration: 300 }}
-        class="absolute bottom-full left-1/2 z-50 mb-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
         style="transform: translateX(-50%);"
       >
         {content.info?.text}
@@ -125,7 +125,7 @@
     {:else if showInfo && content.info?.side === 'bottom'}
       <div
         transition:fly={{ y: 15, duration: 300 }}
-        class="absolute top-full left-1/2 z-50 mt-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        class="absolute top-full left-1/2 z-50 mt-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
         style="transform: translateX(-50%);"
       >
         {content.info?.text}
@@ -134,7 +134,7 @@
     {:else if showInfo && content.info?.side === 'left'}
       <div
         transition:fly={{ x: 15, duration: 300 }}
-        class="absolute top-1/2 right-full z-50 mr-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        class="absolute top-1/2 right-full z-50 mr-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
         style="transform: translateY(-50%);"
       >
         {content.info?.text}
@@ -143,7 +143,7 @@
     {:else if showInfo && content.info?.side === 'right'}
       <div
         transition:fly={{ x: -15, duration: 300 }}
-        class="absolute top-1/2 left-full z-50 ml-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        class="absolute top-1/2 left-full z-50 ml-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
         style="transform: translateY(-50%);"
       >
         {content.info?.text}

package/dist/Button/ButtonProps.svelte

@@ -156,6 +156,13 @@
         value={component.properties.content.info.text}
         onUpdate={(value) => updateProperty('content.info.text', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.info.side') }}
+        type="buttons"
+        options={$optionsStore.INFO_SIDE_OPTIONS}
+        value={$optionsStore.INFO_SIDE_OPTIONS.find((h) => h.value === component.properties.content.info.side)}
+        onUpdate={(option) => updateProperty('content.info.side', option.value as string, component, onPropertyChange)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.svgicon') }}
         type="text-area"

package/dist/locales/translations.js

@@ -80,6 +80,11 @@ const translations = {
         'constructor.props.rows': 'Количество строк',
         'constructor.props.placeholder': 'Заполнитель',
         'constructor.props.info': 'Подсказка',
+        'constructor.props.info.side': 'Положение подсказки',
+        'constructor.props.info.top': 'Вверху',
+        'constructor.props.info.bottom': 'Внизу',
+        'constructor.props.info.left': 'Слева',
+        'constructor.props.info.right': 'Справа',
         'constructor.props.disabled': 'Отключить',
         'constructor.props.readonly': 'Только для чтения',
         'constructor.props.istest': 'Тестовые данные',

package/dist/options.d.ts

@@ -85,6 +85,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    INFO_SIDE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     FORM_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -93,6 +93,12 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'cover', name: $t('constructor.props.type.cover') },
             { id: id(), value: 'contain', name: $t('constructor.props.type.contain') },
         ],
+        INFO_SIDE_OPTIONS: [
+            { id: id(), value: 'top', name: $t('constructor.props.info.top') },
+            { id: id(), value: 'bottom', name: $t('constructor.props.info.bottom') },
+            { id: id(), value: 'left', name: $t('constructor.props.info.left') },
+            { id: id(), value: 'right', name: $t('constructor.props.info.right') },
+        ],
         FORM_OPTIONS: [
             { id: id(), value: 'square', name: $t('constructor.props.type.square') },
             { id: id(), value: 'circle', name: $t('constructor.props.type.circle') },

package/package.json

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