poe-svelte-ui-lib 0.2.0 → 1.0.0

package/dist/Select/Select.svelte

@@ -0,0 +1,187 @@
+<!-- $lib/ElementUI/Select.svelte -->
+<script lang="ts" generics="T = unknown">
+  import { slide } from 'svelte/transition'
+  import { onMount } from 'svelte'
+  import type { ISelectOption, ISelectProps } from '../types'
+  import { t } from '../locales/i18n'
+
+  let isDropdownOpen = $state(false)
+  let dropdownElement: HTMLDivElement
+
+  let searchValue = $state('')
+  let filteredOptions = $state<ISelectOption<T>[]>([])
+
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = 'bg-max',
+    disabled = false,
+    label = { name: '', class: '' },
+    type = 'select',
+    value = $bindable(),
+    options = [],
+    onUpdate,
+  }: ISelectProps<T> = $props()
+
+  /* Закрытие при клике вне компонента */
+  const handleClickOutside = (event: MouseEvent) => {
+    if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+      isDropdownOpen = false
+    }
+  }
+
+  onMount(() => {
+    if (type === 'select') document.addEventListener('click', handleClickOutside)
+    return () => {
+      if (type === 'select') document.removeEventListener('click', handleClickOutside)
+    }
+  })
+
+  const toggleDropdown = (event: MouseEvent) => {
+    event.stopPropagation()
+    if (!disabled) {
+      isDropdownOpen = !isDropdownOpen
+    }
+  }
+
+  const selectOption = (option: ISelectOption<T>, event: MouseEvent) => {
+    event.stopPropagation()
+    if (!disabled) {
+      value = option
+      isDropdownOpen = false
+      onUpdate?.(value)
+    }
+  }
+
+  const handleSearch = (inputValue: string) => {
+    searchValue = inputValue
+
+    if (inputValue.trim() === '') {
+      isDropdownOpen = false
+      filteredOptions = []
+    } else {
+      filteredOptions = options.filter((option) => {
+        const optionName = option.name?.toString() || ''
+        return optionName.toLowerCase().includes(inputValue.toLowerCase())
+      })
+      isDropdownOpen = filteredOptions.length > 0
+
+      const selectedFromList = options.some((option) => option.name?.toString() === searchValue)
+      console.log(selectedFromList)
+
+      if (!selectedFromList) {
+        const newOption: ISelectOption<T> = {
+          id: `input-${searchValue}`,
+          name: searchValue,
+          value: searchValue as T,
+        }
+
+        value = newOption
+        onUpdate?.(newOption)
+      }
+    }
+  }
+</script>
+
+<div class={`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>
+  {/if}
+  {#if type === 'select'}
+    <button
+      id={id.value}
+      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'}"
+      style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+      onclick={toggleDropdown}
+      aria-haspopup="true"
+      aria-expanded={isDropdownOpen}
+      {disabled}
+    >
+      {value?.name || $t('common.select_tag')}
+    </button>
+
+    {#if isDropdownOpen}
+      <div
+        class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-[var(--border-color)]"
+        style="width: calc(100% - 1.8rem);"
+        transition:slide={{ duration: 250 }}
+      >
+        {#each options as option, index (option.id)}
+          <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' : ''} "
+            onclick={(e) => selectOption(option, e)}
+            {disabled}
+            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+          >
+            {option.name}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {:else if type === 'buttons'}
+    <div id={id.value} 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 border
+      border-[var(--border-color)] bg-[var(--bg-color)] px-2 py-1 font-semibold transition-all duration-200 select-none
+      {option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}
+      {option.value === value?.value && value !== null ? 'z-10 text-blue-600 ring-2 ring-[var(--blue-color)]' : ''}   
+      {option.class} {options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} {index === options.length - 1 ? 'rounded-r-2xl' : ''}"
+          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}
+              </div>
+            {/if}
+          </span>
+        </button>
+      {/each}
+    </div>
+  {:else if type === 'input'}
+    <input
+      bind:value={searchValue}
+      class="w-full appearance-none rounded-2xl border px-4 py-1 text-center transition-shadow
+          outline-none hover:shadow-md focus:border-blue-400
+          [&::-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}
+      {disabled}
+      oninput={(e) => handleSearch((e.currentTarget as HTMLInputElement).value)}
+    />
+
+    {#if isDropdownOpen}
+      <div
+        class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-[var(--border-color)]"
+        style="width: calc(100% - 1.8rem);"
+        transition:slide={{ duration: 250 }}
+      >
+        {#each filteredOptions as option, index (option.id)}
+          <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' : ''} "
+            onclick={(e) => selectOption(option, e)}
+            {disabled}
+            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+          >
+            {option.name}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { ISelectProps } from '../types';
+declare class __sveltets_Render<T = unknown> {
+    props(): ISelectProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T = unknown> = InstanceType<typeof Select<T>>;
+export default Select;

package/dist/Select/SelectProps.svelte

@@ -0,0 +1,260 @@
+<!-- $lib/ElementsUI/SelectProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import type { UIComponent, ISelectProps, ISelectOption } from '../types.js'
+  import * as UI from '../index'
+  import ButtonDelete from '../appIcons/ButtonDelete.svelte'
+  import ButtonAdd from '../appIcons/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.map((variable: { value: string; name: string }) => ({
+      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-'))),
+    ),
+  )
+
+  const handleLabelAlign = (align: string) => {
+    let labelClass = component.properties.label.class || ''
+    labelClass = labelClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('text-'))
+      .join(' ')
+    if (align) {
+      labelClass += ` ${align}`
+    }
+    updateProperty('label.class', labelClass)
+  }
+
+  const handleOptionColorChange = (color: string) => {
+    let wrapperClass = component.properties.wrapperClass || ''
+    wrapperClass = wrapperClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('bg-'))
+      .join(' ')
+    if (color) {
+      wrapperClass += ` ${color}`
+    }
+    updateProperty('wrapperClass', wrapperClass)
+  }
+
+  /* Обновление свойства */
+  const updateProperty = (path: string, value: string | object) => {
+    const newProperties = JSON.parse(JSON.stringify(component.properties))
+    const parts = path.split('.')
+    let obj = newProperties
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+      if (!obj[part]) obj[part] = {}
+      obj = obj[part]
+    }
+
+    obj[parts[parts.length - 1]] = value
+    onPropertyChange(newProperties)
+  }
+</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
+        wrapperClass="w-full"
+        label={{ name: $t('service.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)
+        }}
+      />
+      {#if component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave'}
+        <UI.Input
+          wrapperClass="w-full {Header.value === 'SET' ? 'mt-1' : ''} "
+          label={{ name: $t('service.constructor.props.argument') }}
+          value={component.properties.eventHandler.Argument}
+          type="text"
+          autocomplete="on"
+          componentClass="w-full"
+          maxlength={32}
+          regExp={/^[a-zA-Z0-9\-_]{0,32}$/}
+          help={{ info: $t('service.constructor.props.argument.info') }}
+          onUpdate={(value) => updateProperty('eventHandler.Argument', value as string)}
+        />
+      {/if}
+      <UI.Select
+        label={{ name: $t('service.constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(value) => {
+          updateProperty('id.name', (value.name as string).split('|')[1].trim())
+          updateProperty('id.value', value.value as string)
+          updateProperty('eventHandler.Variables', value.value as string)
+        }}
+      />
+      <UI.Select
+        label={{ name: $t('service.constructor.props.type') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.SELECT_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('type', item.value as string)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        wrapperClass="w-full h-14"
+        label={{ name: $t('service.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)
+        }}
+      />
+      <UI.Select
+        wrapperClass="w-full h-14"
+        label={{ name: $t('service.constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => handleOptionColorChange(option.value as string)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('service.constructor.props.label') }}
+        value={component.properties.label.name}
+        type="text"
+        componentClass="w-full"
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+      />
+      <UI.Select
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => handleLabelAlign(option.value as string)}
+      />
+    </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('service.constructor.props.options.title')}</h4>
+      <UI.Button
+        wrapperClass="!w-10"
+        icon={{ component: ButtonAdd, properties: { height: '1.5rem', width: '1.5rem' } }}
+        componentClass="h-10 border-none hover:shadow-none"
+        onClick={() => {
+          const newOption: ISelectOption = {
+            id: crypto.randomUUID(),
+            name: 'New Button',
+            class: '',
+          }
+          const options = [...(component.properties?.options || []), newOption]
+          updateProperty('options', options)
+        }}
+      />
+    </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('service.constructor.props.optionname') }}
+          wrapperClass="!w-3/10"
+          value={option.name}
+          type="text"
+          onUpdate={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[index]['name'] = value
+            updateProperty('options', options)
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('service.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)
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('service.constructor.props.optionclass') }}
+          wrapperClass="!w-3/10"
+          value={option.class}
+          type="text"
+          onUpdate={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[index]['class'] = value
+            updateProperty('options', options)
+          }}
+        />
+        <UI.Button
+          wrapperClass="!w-1/10"
+          icon={{ component: ButtonDelete, properties: { height: '1.5rem', width: '1.5rem' } }}
+          componentClass="h-10 w-10 border-none hover:shadow-none"
+          onClick={() => {
+            const options = [...(component.properties?.options || [])]
+            options.splice(index, 1)
+            updateProperty('options', options)
+          }}
+        />
+      </div>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { UIComponent, ISelectProps } from '../types.js';
+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;