poe-svelte-ui-lib 1.0.5 → 1.0.7

package/dist/Slider/Slider.svelte

@@ -1,9 +1,13 @@
 <!-- $lib/ElementsUI/Slider.svelte -->
 <script lang="ts">
   import type { ISliderProps } from '../types'
+  import IconGripVerticalLeft from '../libIcons/IconGripVerticalLeft.svelte'
+  import IconGripVerticalRight from '../libIcons/IconGripVerticalRight.svelte'
+  import IconGripVerticalDual from '../libIcons/IconGripVerticalDual.svelte'
+  import { twMerge } from 'tailwind-merge'
 
   let {
-    id = { name: '', value: crypto.randomUUID() },
+    id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
     type = 'single',
@@ -88,23 +92,23 @@
   }
 </script>
 
-<div class={`relative flex w-full flex-col items-center gap-2 ${wrapperClass}`}>
+<div class={twMerge(`relative flex w-full flex-col items-center gap-2`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <!-- Слайдер -->
-  <div class="relative flex h-2 w-full justify-center {disabled ? 'opacity-50 cursor-not-allowed' : ''}" id={id.value}>
+  <div {id} class="relative flex h-8 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}">
     {#if isRange}
       <!-- Трек и активная зона -->
       <div
-        class={`absolute h-full w-full rounded bg-gray-400 ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
         onclick={disabled ? undefined : handleTrackClick}
       >
-        <div class="absolute h-full rounded" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%; background-color: var(--bg-color)`}></div>
+        <div class="absolute h-full rounded-full bg-[var(--bg-color)]" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
       </div>
 
       <!-- Ползунки -->
@@ -125,6 +129,12 @@
         {disabled}
         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)]"
+        style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
+      >
+        <IconGripVerticalLeft />
+      </div>
 
       <input
         type="range"
@@ -143,16 +153,25 @@
         {disabled}
         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)]"
+        style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
+      >
+        <IconGripVerticalRight />
+      </div>
     {:else}
       <!-- Одиночный слайдер -->
       <div
-        class={`absolute h-full w-full rounded bg-gray-400 ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
         onclick={disabled ? undefined : handleTrackClick}
       >
-        <div class="absolute h-full rounded" style={`width: ${singlePosition}%; background-color: var(--bg-color)`}></div>
+        <div
+          class="absolute h-full {singlePosition === 100 ? 'z-10 rounded-full' : 'z-10 rounded-l-full'}"
+          style={`width: ${singlePosition}%; background-color: var(--bg-color)`}
+        ></div>
       </div>
 
       <input
@@ -168,8 +187,14 @@
             }}
         onmouseup={disabled ? undefined : () => onUpdate(singleValue)}
         {disabled}
-        class="absolute z-30 h-full w-full appearance-none bg-transparent"
+        class="absolute z-20 h-full w-full appearance-none bg-transparent"
       />
+      <div
+        class="pointer-events-none absolute z-30 rounded-full bg-[var(--field-color)]"
+        style={`left: clamp(1rem, ${singlePosition}%, calc(100% - 1rem)); top: 50%; transform: translate(-50%, -50%)`}
+      >
+        <IconGripVerticalDual />
+      </div>
     {/if}
   </div>
 
@@ -177,7 +202,10 @@
   <div class={`flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
     {#if isRange}
       {#each ['lower', 'upper'] as type (type)}
-        <div class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? 'opacity-70' : ''}`} style="background-color: var(--bg-color)">
+        <div
+          class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? 'opacity-70' : ''}`}
+          style="background-color: var(--bg-color)"
+        >
           <button
             class="h-full w-4 {disabled ? '' : 'cursor-pointer'}"
             onclick={disabled ? undefined : () => adjustValue(type as 'lower' | 'upper', 'decrement')}
@@ -194,7 +222,10 @@
         </div>
       {/each}
     {:else}
-      <div class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? 'opacity-70' : ''}`} style="background-color: var(--bg-color)">
+      <div
+        class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? 'opacity-70' : ''}`}
+        style="background-color: var(--bg-color)"
+      >
         <button
           class="h-full w-4 {disabled ? '' : 'cursor-pointer'}"
           onclick={disabled ? undefined : () => adjustValue('single', 'decrement')}
@@ -220,41 +251,56 @@
     margin: 0;
     padding: 0;
     pointer-events: none;
+    outline: none;
   }
 
-  input[type='range']:disabled::-webkit-slider-thumb {
-    cursor: auto;
-  }
-
+  /* Webkit thumb */
   input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 1rem;
-    height: 1rem;
+    width: 2rem;
+    height: 2rem;
     border-radius: 50%;
-    background: var(--border-color);
+    background: transparent;
     cursor: pointer;
     pointer-events: auto;
-    transition: all 0.2s ease;
-  }
-
-  input[type='range']:disabled::-webkit-slider-thumb {
-    background: var(--gray-color);
+    border: none;
   }
 
+  /* Firefox thumb */
   input[type='range']::-moz-range-thumb {
-    width: 1rem;
-    height: 1rem;
+    width: 2rem;
+    height: 2rem;
     border-radius: 50%;
-    background: var(--border-color);
+    background: transparent;
     cursor: pointer;
     pointer-events: auto;
     border: none;
-    transition: all 0.2s ease;
+  }
+
+  /* Webkit track */
+  input[type='range']::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+  }
+
+  /* Firefox track */
+  input[type='range']::-moz-range-track {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+  }
+
+  input[type='range']:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
   }
 
   input[type='range']:disabled::-moz-range-thumb {
-    background: var(--gray-color);
     cursor: not-allowed;
   }
 </style>

package/dist/Slider/SliderProps.svelte

@@ -0,0 +1,113 @@
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type ISliderProps, updateProperty } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ISliderProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
+    DeviceVariables && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          id: variable.name,
+          value: variable.value,
+          name: `${variable.value} | ${variable.name}`,
+        }))
+      : [],
+  )
+
+  const initialAlign = $derived(
+    $optionsStore.ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+</script>
+
+{#if component && component.properties}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        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.action') }}
+        type="buttons"
+        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
+        options={$optionsStore.SHORT_ARGUMENT_OPTION}
+        onUpdate={(option) => {
+          updateProperty('eventHandler.Argument', option.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 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.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('label.class', `${component.properties.label.class} ${option.value}`, 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', `${component.properties.wrapperClass} ${option.value}`, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+{/if}

package/dist/Slider/SliderProps.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type UIComponent, type ISliderProps } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<ISliderProps>;
+    };
+    onPropertyChange: (value: string | object) => void;
+};
+declare const SliderProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type SliderProps = ReturnType<typeof SliderProps>;
+export default SliderProps;

package/dist/Switch/Switch.svelte

@@ -1,12 +1,13 @@
 <!-- $lib/ElementsUI/Switch.svelte -->
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge'
   import type { ISwitchProps } from '../types'
 
   let {
-    id = { name: '', value: crypto.randomUUID() },
-    wrapperClass = '',
+    id = crypto.randomUUID(),
     disabled = false,
-    label = { name: '', captionLeft: '', captionRight: '', class: '' },
+    wrapperClass = '',
+    label = { name: '', captionLeft: '', captionRight: '' },
     height = '2rem',
     value = $bindable(),
     onChange = () => {},
@@ -15,7 +16,7 @@
   const options = [1, 2]
   let checked = $derived(value === options[1])
 
-  let knobTransform = $derived(checked ? `translateX(calc(${height} * 0.9))` : 'translateX(0)')
+  let knobTransform = $derived(checked ? `translateX(calc(${height}))` : 'translateX(0)')
 
   $effect(() => {
     if (value === undefined || value === null) value = options[0]
@@ -43,14 +44,16 @@
   )
 </script>
 
-<div class="relative flex w-full flex-col items-center justify-center {wrapperClass}">
+<div class={twMerge(`bg-blue relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+    <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">
-    <button class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: end;" onclick={() => handleCaptionClick(1)}
-      >{label.captionLeft}</button
+    <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
@@ -58,7 +61,7 @@
       {disabled ? 'opacity-60' : ''}"
     >
       <input
-        id={id.value}
+        {id}
         type="checkbox"
         class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
         bind:checked
@@ -66,19 +69,22 @@
         onchange={handleToggle}
       />
       <span
-        class="relative flex items-center rounded-full transition-all duration-250 {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'} {disabled
-          ? ''
-          : 'cursor-pointer'}"
+        class="relative flex items-center rounded-full transition-all duration-250
+        {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--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 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
+          class="absolute rounded-full bg-[var(--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>
       </span>
     </label>
-    <button class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: start;" onclick={() => handleCaptionClick(2)}
-      >{label.captionRight}</button
+    <button
+      class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
+      style="width: {maxCaptionWidth}; text-align: start;"
+      onclick={() => handleCaptionClick(2)}>{label.captionRight}</button
     >
   </div>
 </div>

package/dist/Switch/SwitchProps.svelte

@@ -0,0 +1,99 @@
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type ISwitchProps, updateProperty, type ISelectOption } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+  import { twMerge } from 'tailwind-merge'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ISwitchProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
+    DeviceVariables && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          id: variable.name,
+          value: variable.value,
+          name: `${variable.value} | ${variable.name}`,
+        }))
+      : [],
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+
+  const initialAlign = $derived(
+    $optionsStore.ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+</script>
+
+{#if component && component.properties}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        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.action') }}
+        type="buttons"
+        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
+        options={$optionsStore.SHORT_ARGUMENT_OPTION}
+        onUpdate={(option) => {
+          updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <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
+        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}
+        type="text"
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max')}
+        value={initialColor}
+        onUpdate={(option) => updateProperty('wrapperClass', `${component.properties.wrapperClass} ${option.value}`, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+{/if}

package/dist/Switch/SwitchProps.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type UIComponent, type ISwitchProps } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<ISwitchProps>;
+    };
+    onPropertyChange: (value: string | object) => void;
+};
+declare const SwitchProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwitchProps = ReturnType<typeof SwitchProps>;
+export default SwitchProps;