poe-svelte-ui-lib 0.1.0 → 0.3.0

package/dist/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,207 @@
+<!-- $lib/ElementsUI/ColorPicker.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { IColorPickerProps } from '../types'
+
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    value = [0, 0, 0],
+    onChange = () => {},
+  }: IColorPickerProps = $props()
+
+  const hsv = $state({ h: 0, s: 100, v: 100 })
+  let huePointer = $state(0)
+  let brightnessPointer = $state(100)
+  let mode = $state<'hsv' | 'white'>('hsv')
+  let whiteValue = $state(100)
+
+  $effect(() => {
+    if (value.length !== 3) return
+
+    const [r, g, b] = value
+    const isWhite = r === g && g === b
+    mode = isWhite ? 'white' : 'hsv'
+    if (isWhite) {
+      whiteValue = Math.round((r / 255) * 100)
+      return
+    }
+
+    const normalized = value.map((v) => v / 255)
+    const max = Math.max(...normalized)
+    const min = Math.min(...normalized)
+    const delta = max - min
+    let h = 0
+    if (delta !== 0) {
+      const [rN, gN, bN] = normalized
+      if (max === rN) h = ((gN - bN) / delta) % 6
+      else if (max === gN) h = (bN - rN) / delta + 2
+      else h = (rN - gN) / delta + 4
+      h *= 60
+      if (h < 0) h += 360
+    }
+    const s = max ? (delta / max) * 100 : 0
+    const v = max * 100
+    hsv.h = Math.round(h)
+    hsv.s = Math.round(s)
+    hsv.v = Math.round(v)
+    huePointer = (h / 360) * 100
+    brightnessPointer = v
+  })
+
+  const hsvToRgb = (h: number, s: number, v: number): [number, number, number] => {
+    s /= 100
+    v /= 100
+    const c = v * s
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+    const m = v - c
+    let r = 0,
+      g = 0,
+      b = 0
+    if (h < 60) [r, g, b] = [c, x, 0]
+    else if (h < 120) [r, g, b] = [x, c, 0]
+    else if (h < 180) [r, g, b] = [0, c, x]
+    else if (h < 240) [r, g, b] = [0, x, c]
+    else if (h < 300) [r, g, b] = [x, 0, c]
+    else [r, g, b] = [c, 0, x]
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]
+  }
+
+  const handleDrag = (e: MouseEvent, target: 'hue' | 'brightness' | 'white') => {
+    const slider = document.querySelector(`.${target}-slider`) as HTMLElement
+    const rect = slider.getBoundingClientRect()
+    let currentHSV = { ...hsv }
+    let currentWhite = whiteValue
+    if (target === 'hue' || target === 'brightness') {
+      if (mode === 'white') hsv.s = 100
+      mode = 'hsv'
+    } else mode = 'white'
+    const onMove = (event: MouseEvent) => {
+      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+      const percent = (x / rect.width) * 100
+      if (target === 'hue') {
+        huePointer = percent
+        currentHSV.h = (x / rect.width) * 360
+        hsv.h = currentHSV.h
+      } else if (target === 'brightness') {
+        brightnessPointer = percent
+        currentHSV.v = percent
+        hsv.v = currentHSV.v
+      } else if (target === 'white') {
+        currentWhite = percent
+        whiteValue = currentWhite
+      }
+    }
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+
+      if (mode === 'hsv') {
+        onChange(hsvToRgb(currentHSV.h, hsv.s, currentHSV.v))
+      } else {
+        const val = Math.round((currentWhite / 100) * 255)
+        onChange([val, val, val])
+      }
+    }
+    onMove(e)
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+  }
+
+  const rgb = $derived(() => (mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v)))
+  const hex = $derived(() =>
+    rgb()
+      .map((v) => v.toString(16).padStart(2, '0'))
+      .join(' ')
+      .toUpperCase(),
+  )
+  const previewBaseColor = $derived(() => (mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100)))
+
+  const textColor = $derived(() => {
+    const [r, g, b] = rgb()
+    const luminance = (r * 299 + g * 587 + b * 114) / 1000
+    return luminance > 128 ? 'text-black' : 'text-white'
+  })
+</script>
+
+<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
+  {#if label.name}
+    <h5 class={`mb-2 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="flex w-full flex-row items-center gap-2">
+    <!-- Слайдеры цвета -->
+    <div class="flex w-full flex-col gap-2">
+      <!-- Выбор цвета -->
+      <div
+        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'hue')}
+      >
+        <div
+          class="absolute inset-0"
+          style={`background: linear-gradient(to right, ${Array.from({ length: 7 }, (_, i) => {
+            const [r, g, b] = hsvToRgb(i * 60, 100, 100)
+            return `rgb(${r},${g},${b})`
+          }).join(', ')})`}
+        ></div>
+        {#if mode === 'hsv'}
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${huePointer}%; background: rgb(${hsvToRgb(hsv.h, 100, 100).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Яркость цвета -->
+      <div
+        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'brightness')}
+      >
+        {#if mode === 'hsv'}
+          <div class="absolute inset-0" style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}></div>
+
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${brightnessPointer}%; background: rgb(${hsvToRgb(hsv.h, hsv.s, hsv.v).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Яркость белого цвета -->
+      <p class="h-4 px-4 text-start font-bold">{$t('component.colorpicker.whitehue')}</p>
+      <div
+        class="white-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'white')}
+      >
+        <div class="absolute inset-0 bg-gradient-to-r from-black to-white"></div>
+        {#if mode === 'white'}
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${whiteValue}%; background: rgb(${[255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Превью цвета -->
+    <div
+      class={`flex h-26 w-28 flex-col justify-center gap-1 rounded-2xl border border-gray-400 px-2 font-mono text-sm select-none ${textColor()}`}
+      style={`background: rgb(${previewBaseColor().join(',')})`}
+    >
+      <div class="flex flex-col items-center">
+        <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
+        <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/ColorPicker/ColorPicker.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorPickerProps = typeof __propDef.props;
+export type ColorPickerEvents = typeof __propDef.events;
+export type ColorPickerSlots = typeof __propDef.slots;
+export default class ColorPicker extends SvelteComponentTyped<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+}
+export {};

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -0,0 +1,100 @@
+<!-- $lib/ElementsUI/ButtonProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { UIComponent, IColorPickerProps } from '../types'
+  import * as UI from '../index'
+  import { getContext } from 'svelte'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IColorPickerProps> }
+    onPropertyChange: (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}`,
+    })),
+  )
+
+  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 updateProperty = (path: string, value: string | object | string[]) => {
+    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 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('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
+        wrapperClass="w-full"
+        label={{ name: $t('service.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)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        wrapperClass="w-full"
+        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>
+{/if}

package/dist/ColorPicker/ColorPickerProps.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorPickerPropsProps = typeof __propDef.props;
+export type ColorPickerPropsEvents = typeof __propDef.events;
+export type ColorPickerPropsSlots = typeof __propDef.slots;
+export default class ColorPickerProps extends SvelteComponentTyped<ColorPickerPropsProps, ColorPickerPropsEvents, ColorPickerPropsSlots> {
+}
+export {};

package/dist/FileAttach/FileAttach.svelte

@@ -0,0 +1,103 @@
+<!-- $lib/ElementsUI/FileAttach.svelte -->
+<script lang="ts">
+  interface FileInputProps {
+    id?: string
+    wrapperClass?: string
+    label?: { name?: string; class?: string }
+    type?: 'file' | 'image'
+    accept?: string
+    imageSize?: { height?: string; width?: string; fitMode?: 'cover' | 'contain'; form?: 'square' | 'circle' }
+    disabled?: boolean
+    currentImage?: string | null
+    onChange?: (event: Event, file: File | null) => void
+  }
+
+  let {
+    id = crypto.randomUUID(),
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    type = 'file',
+    accept = '*/*',
+    imageSize = { height: '10rem', width: '10rem', fitMode: 'cover', form: 'square' },
+    disabled = false,
+    currentImage = null,
+    onChange = () => {},
+  }: FileInputProps = $props()
+
+  let selectedFile = $state<File | null>(null)
+  let previewUrl = $state<string | null>(null)
+
+  $effect(() => {
+    if (currentImage && !selectedFile) {
+      previewUrl = currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`
+    }
+  })
+
+  const handleFileChange = (event: Event) => {
+    const input = event.target as HTMLInputElement
+    if (!input.files || input.files.length === 0) {
+      onChange(event, null)
+      return
+    }
+
+    const file = input.files[0]
+    selectedFile = file
+
+    if (file.type.startsWith('image/')) {
+      previewUrl = URL.createObjectURL(file)
+    }
+
+    onChange(event, file)
+  }
+
+  const triggerFileInput = () => {
+    const input = document.getElementById(id)
+    input?.click()
+  }
+</script>
+
+<div class={`flex flex-col items-center ${wrapperClass}`}>
+  {#if label.name}
+    <h5 class={`${label.class}`}>{label.name}</h5>
+  {/if}
+
+  {#if type === 'image'}
+    <div class="relative">
+      <button
+        class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
+        border border-[var(--border-color)] bg-[var(--back-color)] transition duration-250 hover:shadow-lg
+        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
+        style={`height: ${imageSize.height}; width: ${imageSize.width}`}
+        onclick={triggerFileInput}
+        {disabled}
+      >
+        {#if previewUrl || currentImage}
+          <img
+            src={previewUrl ?? (currentImage?.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`)}
+            alt="Preview"
+            class={`
+              h-full w-full
+              ${imageSize.fitMode === 'cover' ? 'object-cover' : 'object-contain'}
+            `}
+          />
+        {:else}
+          <span class="text-sm text-gray-500">Image</span>
+        {/if}
+      </button>
+      <input {id} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
+    </div>
+  {:else}
+    <label class="relative inline-block w-full font-normal">
+      <input
+        {id}
+        type="file"
+        class={`h-9 w-full rounded-2xl border border-[var(--border-color)] bg-[var(--back-color)] transition duration-250 hover:shadow-lg
+          ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} file:h-full file:w-1/3 file:cursor-pointer 
+          file:border-none file:bg-[var(--blue-color)] invalid:border-red-400 invalid:shadow-[0_0_6px_var(--red-color)]`}
+        {accept}
+        {disabled}
+        onchange={handleFileChange}
+      />
+    </label>
+  {/if}
+</div>

package/dist/FileAttach/FileAttach.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileAttachProps = typeof __propDef.props;
+export type FileAttachEvents = typeof __propDef.events;
+export type FileAttachSlots = typeof __propDef.slots;
+export default class FileAttach extends SvelteComponentTyped<FileAttachProps, FileAttachEvents, FileAttachSlots> {
+}
+export {};