poe-svelte-ui-lib 1.1.15 → 1.1.16

package/dist/Select/SelectProps.svelte

@@ -59,7 +59,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative mb-4 flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
@@ -67,10 +67,20 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.argument') }}
+        type="buttons"
+        value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument) ??
+          $optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === '')}
+        options={$optionsStore.FULL_ARGUMENT_OPTION}
+        onUpdate={(option) => {
+          updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
+        }}
+      />
 
       <UI.Input
         wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
@@ -80,15 +90,7 @@
         help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
         onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
       />
-      <UI.Select
-        label={{ name: $t('constructor.props.variable') }}
-        options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
-        onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
-          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
-        }}
-      />
+
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -149,6 +151,151 @@
 
   <hr class="border-gray-400" />
 
+  <!-- Настройки опций -->
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.options.title')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          const newOption: ISelectOption = {
+            id: crypto.randomUUID(),
+            name: 'New Button',
+            class: 'bg-max',
+          }
+          const options = [...(component.properties?.options || []), newOption]
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+    </div>
+
+    {#each component.properties.options || [] as option, index (option.id)}
+      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Input
+          label={{ name: $t('constructor.props.optionname') }}
+          wrapperClass="!w-3/10"
+          value={option.name}
+          onUpdate={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[index]['name'] = value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.optionvalue') }}
+          wrapperClass="!w-3/10"
+          value={option.value}
+          type={currentValueType.value}
+          onUpdate={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[index]['value'] = value
+            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) => {
+            const options = [...(component.properties?.options || [])]
+            options[index]['class'] = option.value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+        <UI.Button
+          wrapperClass="w-8"
+          content={{ icon: ButtonDelete }}
+          onClick={() => {
+            const options = [...(component.properties?.options || [])]
+            options.splice(index, 1)
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+    {/each}
+  </div>
+{:else}
+  <div class="relative mb-4 flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.SELECT_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('type', item.value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.valuetype') }}
+        type="buttons"
+        options={$optionsStore.SELECT_VALUE_TYPE_OPTIONS}
+        value={currentValueType}
+        onUpdate={(value) => {
+          currentValueType = value as ValueTypeOption
+          const options = [...(component.properties?.options || [])]
+          const newType = value.value
+          options.forEach((option) => {
+            if (newType === 'number') option.value = option.value !== undefined ? Number(option.value) : 0
+            else option.value = option.value !== undefined ? String(option.value) : ''
+          })
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+
+  <hr class="border-gray-400" />
+
   <!-- Настройки опций -->
   <div class="space-y-4">
     <div class="m-0 flex items-center justify-center gap-2">

package/dist/Slider/Slider.svelte

@@ -102,13 +102,13 @@
     {#if isRange}
       <!-- Трек и активная зона -->
       <div
-        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
         onclick={disabled ? undefined : handleTrackClick}
       >
-        <div class="absolute h-full rounded-full bg-[var(--bg-color)]" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
+        <div class="absolute h-full rounded-full bg-(--bg-color)" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
       </div>
 
       <!-- Ползунки -->
@@ -130,7 +130,7 @@
         class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'lower' ? 'z-30' : 'z-20'}`}
       />
       <div
-        class="pointer-events-none absolute z-40 rounded-full bg-[var(--field-color)]"
+        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
         style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
       >
         <IconGripVerticalLeft />
@@ -154,7 +154,7 @@
         class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'upper' ? 'z-30' : 'z-20'}`}
       />
       <div
-        class="pointer-events-none absolute z-40 rounded-full bg-[var(--field-color)]"
+        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
         style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
       >
         <IconGripVerticalRight />
@@ -162,7 +162,7 @@
     {:else}
       <!-- Одиночный слайдер -->
       <div
-        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
@@ -190,7 +190,7 @@
         class="absolute z-20 h-full w-full appearance-none"
       />
       <div
-        class="pointer-events-none absolute z-30 rounded-full bg-[var(--field-color)]"
+        class="pointer-events-none absolute z-30 rounded-full bg-(--field-color)"
         style={`left: clamp(1rem, ${singlePosition}%, calc(100% - 1rem)); top: 50%; transform: translate(-50%, -50%)`}
       >
         <IconGripVerticalDual />

package/dist/Slider/SliderProps.svelte

@@ -32,7 +32,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
@@ -107,4 +107,87 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.value') }}
+        value={component.properties.value}
+        onUpdate={(value) => updateProperty('value', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={$optionsStore.SLIDER_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'single'))}
+        options={$optionsStore.SLIDER_TYPE_OPTIONS}
+        onUpdate={(type) => {
+          updateProperty('value', type.value === 'single' ? 5 : [2, 7], component, onPropertyChange)
+          updateProperty('type', type.value as string, component, onPropertyChange)
+        }}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.minnum') }}
+        value={component.properties.number.minNum as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.minNum', Number(value), component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.maxnum') }}
+        value={component.properties.number.maxNum as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.maxNum', Number(value), component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.step') }}
+        value={component.properties.number.step as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.step', Number(value), component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/Switch/Switch.svelte

@@ -49,15 +49,15 @@
     <h5 class={`w-full px-4 text-center`}>{label.name}</h5>
   {/if}
 
-  <div class="relative flex w-full grow items-center justify-center !bg-transparent">
+  <div class="relative flex w-full grow items-center justify-center bg-transparent">
     <button
       class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
       style="width: {maxCaptionWidth}; text-align: end;"
       onclick={() => handleCaptionClick(1)}>{label.captionLeft}</button
     >
     <label
-      class="relative flex items-center justify-between rounded-full border-1
-      {checked ? '!border-[var(--bg-color)]' : '!border-[var(--gray-color)]'}
+      class="relative flex items-center justify-between rounded-full border
+      {checked ? 'border-(--bg-color)' : 'border-(--gray-color)'}
       {disabled ? 'opacity-60' : ''}"
     >
       <input
@@ -70,12 +70,12 @@
       />
       <span
         class="relative flex items-center rounded-full transition-all duration-250
-        {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'}
+        {checked ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
         {disabled ? '' : 'cursor-pointer'}"
         style="width: {`calc(${height} * 2)`}; height: {height};"
       >
         <span
-          class="absolute rounded-full bg-[var(--back-color)] transition-all duration-250
+          class="absolute rounded-full bg-(--back-color) transition-all duration-250
           {disabled ? 'opacity-60' : 'cursor-pointer'}"
           style="width: {`calc(${height} * 0.75)`}; height: {`calc(${height} * 0.75)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
         ></span>

package/dist/Switch/SwitchProps.svelte

@@ -25,7 +25,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -52,13 +52,11 @@
       <UI.Input
         label={{ name: $t('constructor.props.caption.left') }}
         value={component.properties.label.captionLeft}
-        type="text"
         onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
       />
       <UI.Input
         label={{ name: $t('constructor.props.caption.right') }}
         value={component.properties.label.captionRight}
-        type="text"
         onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
       />
       <UI.Switch
@@ -72,7 +70,6 @@
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}
-        type="text"
         onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
       />
       <UI.Select
@@ -85,4 +82,72 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.caption.left') }}
+        value={component.properties.label.captionLeft}
+        onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.caption.right') }}
+        value={component.properties.label.captionRight}
+        onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.height') }}
+        value={component.properties.height}
+        onUpdate={(value) => updateProperty('height', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.value') }}
+        value={component.properties.value}
+        type="number"
+        number={{ minNum: 1, maxNum: 2, step: 1 }}
+        onUpdate={(value) => updateProperty('value', value as number, component, onPropertyChange)}
+      />
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/Table/Table.svelte

@@ -126,11 +126,11 @@
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex h-full flex-col overflow-hidden rounded-xl border-[var(--border-color)]">
+  <div class="flex h-full flex-col overflow-hidden rounded-xl border-(--border-color)">
     <!-- Table Header -->
     <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={twMerge(`justify-center bg-[var(--bg-color)] p-2 text-left`, column.label?.class)}>
+        <div class={twMerge(`justify-center bg-(--bg-color) p-2 text-left`, column.label?.class)}>
           <span>{column.label?.name}</span>
           {#if column.sortable}
             <button
@@ -145,13 +145,13 @@
     </div>
 
     <!-- Table Body с прокруткой -->
-    <div class="flex-1 overflow-y-auto bg-[var(--container-color)]/50" bind:this={container} onscroll={handleScroll}>
+    <div class="flex-1 overflow-y-auto bg-(--container-color)/50" bind:this={container} onscroll={handleScroll}>
       <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' : ''}
+              class="relative flex w-full min-w-0 items-center px-2 py-1 wrap-break-word
+              {index % 2 ? 'bg-(--back-color)/40' : 'bg-[#edeef3] dark:bg-[#1f2a3a]'}
               {column.align === 'center'
                 ? 'flex justify-center text-center'
                 : column.align === 'right'
@@ -164,7 +164,7 @@
                     <button
                       class="{twMerge(`cursor-pointer rounded-full
                            px-4 py-1 font-medium transition-shadow outline-none select-none hover:shadow-md
-                          ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-[var(--bg-color)]"
+                          ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
                       onclick={() => buttonClick(row, button)}
                     >
                       {typeof button.name === 'function' ? button.name(row) : button.name}
@@ -189,7 +189,7 @@
                 </div>
               {:else}
                 <div
-                  class="w-full max-w-full break-words {column.overflow?.truncated
+                  class="w-full max-w-full wrap-break-word {column.overflow?.truncated
                     ? 'overflow-hidden text-ellipsis whitespace-nowrap'
                     : 'whitespace-normal'}"
                   onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
@@ -231,7 +231,7 @@
                   >
                     <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
                       {#if copiedCell.y === index && copiedCell.x === column.key}
-                        <div class="rounded-md bg-[var(--green-color)] shadow-lg">✓</div>
+                        <div class="rounded-md bg-(--green-color) shadow-lg">✓</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">
@@ -266,7 +266,7 @@
 
     <!-- Нижнее поле для сводной информации -->
     {#if footer}
-      <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
+      <div class="flex h-8 items-center justify-center bg-(--bg-color)">
         <h5>{footer}</h5>
       </div>
     {/if}