poe-svelte-ui-lib 1.0.5 → 1.0.7

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -0,0 +1,114 @@
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IProgressBarProps, updateProperty } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IProgressBarProps> }
+    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)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.min') }}
+        value={component.properties.number.minNum as number}
+        type="number"
+        onUpdate={(value) => {
+          // if ((value as number) >= component.properties.number.maxNum) {
+          //   value = component.properties.number.maxNum - 1
+          // }
+          updateProperty('number.minNum', Number(value), component, onPropertyChange)
+          updateProperty(
+            'value',
+            component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 3,
+            component,
+            onPropertyChange,
+          )
+        }}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.max') }}
+        value={component.properties.number.maxNum as number}
+        type="number"
+        onUpdate={(value) => {
+          // if ((value as number) <= component.properties.number.minNum) {
+          //   value = component.properties.number.minNum + 1
+          // }
+          updateProperty('number.maxNum', Number(value), component, onPropertyChange)
+          updateProperty(
+            'value',
+            component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 3,
+            component,
+            onPropertyChange,
+          )
+        }}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.units') }}
+        value={component.properties.number.units}
+        onUpdate={(value) => updateProperty('number.units', 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/ProgressBar/ProgressBarProps.svelte.d.ts

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

package/dist/Select/Select.svelte

@@ -3,6 +3,8 @@
   import { slide } from 'svelte/transition'
   import { onMount } from 'svelte'
   import type { ISelectOption, ISelectProps } from '../types'
+  import { twMerge } from 'tailwind-merge'
+  import { t } from '../locales/i18n'
 
   let isDropdownOpen = $state(false)
   let dropdownElement: HTMLDivElement
@@ -11,14 +13,13 @@
   let filteredOptions = $state<ISelectOption<T>[]>([])
 
   let {
-    id = { name: '', value: crypto.randomUUID() },
-    wrapperClass = 'bg-max',
+    id = crypto.randomUUID(),
+    wrapperClass = '',
     disabled = false,
     label = { name: '', class: '' },
     type = 'select',
     value = $bindable(),
     options = [],
-    placeholder= '---', 
     onUpdate,
   }: ISelectProps<T> = $props()
 
@@ -86,23 +87,26 @@
   }
 </script>
 
-<div class={`bg-max relative flex w-full flex-col items-center ${wrapperClass}`} bind:this={dropdownElement}>
+<div class={twMerge(`bg-max relative flex w-full flex-col items-center `, wrapperClass)} bind:this={dropdownElement}>
   {#if label.name}
-    <h5 class={`w-full px-4 ${label.class}`}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4`, label.class)}>{label.name}</h5>
   {/if}
   {#if type === 'select'}
     <button
-      id={id.value}
+      {id}
       value={value?.value ? String(value.value) : ''}
-      class="w-full rounded-2xl border border-[var(--border-color)] p-1 text-center duration-250
-      {value?.class} {disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}"
+      class={twMerge(
+        `w-full rounded-2xl border border-[var(--border-color)] p-1 text-center duration-250
+        ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}`,
+        value?.class,
+      )}
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
       onclick={toggleDropdown}
       aria-haspopup="true"
       aria-expanded={isDropdownOpen}
       {disabled}
     >
-      {value?.name || placeholder}
+      {value?.name || $t('common.select_tag')}
     </button>
 
     {#if isDropdownOpen}
@@ -115,8 +119,11 @@
           <button
             id={option.id}
             value={option?.value ? String(option.value) : ''}
-            class="flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:!bg-[var(--field-color)]
-            {option.class} {index === options.length - 1 ? 'rounded-b-2xl' : ''} "
+            class={twMerge(
+              `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:!bg-[var(--field-color)]
+              ${index === options.length - 1 ? 'rounded-b-2xl' : ''} `,
+              option.class,
+            )}
             onclick={(e) => selectOption(option, e)}
             {disabled}
             style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
@@ -127,22 +134,21 @@
       </div>
     {/if}
   {:else if type === 'buttons'}
-    <div id={id.value} class="flex h-full w-full flex-row justify-center">
+    <div {id} class="flex h-full w-full flex-row justify-center">
       {#each options as option, index (option.id)}
         <button
           id={option.id}
-           class="m-0 inline-block min-w-0 flex-1 items-center bg-[var(--bg-color)] px-2 py-1 font-semibold shadow-sm transition-all duration-200 select-none
-      {option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}
-      {option.value === value?.value && value !== null ? 'z-10 !border-[var(--blue-color)] text-cyan-500 ring-3 ring-[var(--blue-color)]' : ''}  
-      {option.class} {options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} {index === options.length - 1 ? 'rounded-r-2xl' : ''}"
+          class="{twMerge(
+            `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300 select-none
+            ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}
+            ${option.value === value?.value && value !== null ? 'z-10 py-0 text-[1.1rem] shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}  
+            ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
+            option.class,
+          )} bg-[var(--bg-color)]"
           onclick={(e) => selectOption(option, e)}
           disabled={option.disabled}
         >
           <span class="flex flex-row items-center justify-center gap-4">
-            {#if option.icon?.component}
-              {@const IconComponent = option.icon?.component}
-              <IconComponent {...option.icon?.properties} />
-            {/if}
             {#if option.name}
               <div class="flex-1">
                 {option.name}
@@ -160,9 +166,15 @@
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
           {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-[var(--border-color)]"
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-      id={id.value}
+      {id}
       {disabled}
       oninput={(e) => handleSearch((e.currentTarget as HTMLInputElement).value)}
+      onclick={(e) => {
+        if (searchValue == '') {
+          filteredOptions = options
+          isDropdownOpen = true
+        }
+      }}
     />
 
     {#if isDropdownOpen}
@@ -175,8 +187,11 @@
           <button
             id={option.id}
             value={option?.value ? String(option.value) : ''}
-            class="flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:!bg-[var(--field-color)]
-            {option.class} {index === filteredOptions.length - 1 ? 'rounded-b-2xl' : ''} "
+            class={twMerge(
+              `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:!bg-[var(--field-color)]
+              ${index === filteredOptions.length - 1 ? 'rounded-b-2xl' : ''} `,
+              option.class,
+            )}
             onclick={(e) => selectOption(option, e)}
             {disabled}
             style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"

package/dist/Select/SelectProps.svelte

@@ -0,0 +1,216 @@
+<!-- $lib/ElementsUI/SelectProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type ISelectProps, type ISelectOption, updateProperty } from '../types'
+  import * as UI from '..'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
+  import { optionsStore } from '../options.js'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ISelectProps> }
+    onPropertyChange: (path: string, 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}`,
+        }))
+      : [],
+  )
+
+  type ValueTypeOption = {
+    id: string
+    value: 'text' | 'number'
+    name: string
+    class: string
+  }
+  let currentValueType = $derived(
+    !component.properties.options[0]
+      ? ($optionsStore.SELECT_VALUE_TYPE_OPTIONS[0] as ValueTypeOption)
+      : typeof component.properties.options[0].value === 'number'
+        ? $optionsStore.SELECT_VALUE_TYPE_OPTIONS[1]
+        : ($optionsStore.SELECT_VALUE_TYPE_OPTIONS[0] as ValueTypeOption),
+  )
+
+  let Header: ISelectOption = $derived(
+    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.properties.eventHandler.Header) ?? {
+      id: '',
+      name: '',
+      value: '',
+      class: '!w-1/4',
+    },
+  )
+
+  let currentType = $derived($optionsStore.SELECT_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
+
+  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 mb-4 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.argument') }}
+        type="buttons"
+        value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
+        options={$optionsStore.FULL_ARGUMENT_OPTION}
+        onUpdate={(option) => {
+          updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
+        }}
+      />
+
+      <UI.Input
+        wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
+        value={component.properties.eventHandler.Argument}
+        maxlength={32}
+        disabled={component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave'}
+        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.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.type') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.SELECT_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('type', item.value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <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.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 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.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)}
+      />
+    </div>
+  </div>
+
+  <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-10"
+        content={{ icon: ButtonAdd }}
+        componentClass="bg-transparent h-10 border-none !shadow-none hover:shadow-none"
+        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={initialColor}
+          onUpdate={(option) => {
+            const options = [...(component.properties?.options || [])]
+            options[index]['class'] = option.value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+        <UI.Button
+          wrapperClass="!w-1/10"
+          content={{ icon: ButtonDelete }}
+          componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
+          onClick={() => {
+            const options = [...(component.properties?.options || [])]
+            options.splice(index, 1)
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/Select/SelectProps.svelte.d.ts

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