poe-svelte-ui-lib 0.1.0 → 0.3.0

package/dist/Accordion/Accordion.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition'
+  import type { IAccordionProps } from '../types'
+
+  const props: IAccordionProps = $props()
+  let isOpen = $state(props.isOpen)
+
+  const toggle = () => (isOpen = !isOpen)
+</script>
+
+<div
+  id={props.id?.value}
+  class="border-[var(--border-color)] p-0 transition-shadow duration-250 {props.type === 'sub'
+    ? 'border-none'
+    : 'rounded-xl border bg-[var(--conteiner-color)] hover:shadow-md'}
+    {props.componentClass}"
+  transition:slide={{ duration: 250 }}
+>
+  <button
+    class="flex w-full cursor-pointer items-center justify-between transition-shadow duration-250 sm:p-4 sm:px-6
+    {props.type === 'sub' ? 'border-b border-[var(--border-color)]' : ''}"
+    onclick={toggle}
+  >
+    <span class="toggle m-0 cursor-pointer text-lg font-semibold {props.label?.class}">
+      {props.label?.name}
+    </span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="arrow h-[1.1rem] w-[1.1rem] transition-transform duration-250"
+      style="transform: rotate({isOpen ? 180 : 0}deg)"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+        d="M18 12.5s-4.419 6-6 6s-6-6-6-6m12-7s-4.419 6-6 6s-6-6-6-6"
+        color="currentColor"
+      />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div
+      class="flex w-full flex-wrap items-start justify-around p-4 sm:p-3 {props.type === 'sub' ? '' : 'border-t border-[var(--border-color)]'}"
+      transition:slide={{ duration: 250 }}
+    >
+      {@render props.children?.()}
+    </div>
+  {/if}
+</div>

package/dist/Accordion/Accordion.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 AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/Accordion/AccordionProps.svelte

@@ -0,0 +1,70 @@
+<!-- $lib/ElementsUI/AccordionProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { IAccordionProps, UIComponent } from '../types'
+  import * as UI from '../index'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IAccordionProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  let currentType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
+
+  /* Обновление свойства */
+  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)
+  }
+
+  const handleImageUpload = (event: Event) => {
+    const input = event.target as HTMLInputElement
+    if (!input.files || input.files.length === 0) return
+
+    const file = input.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const base64String = e.target?.result as string
+      updateProperty('image', base64String)
+    }
+    reader.readAsDataURL(file)
+  }
+</script>
+
+{#if component && component.properties}
+  <div class="flex items-center justify-center gap-8">
+    <UI.Input
+      label={{ name: $t('service.constructor.props.label') }}
+      wrapperClass="!w-1/3"
+      value={component.properties.label.name}
+      onUpdate={(value) => updateProperty('label.name', value as string)}
+      type="text"
+    />
+    <UI.Select
+      wrapperClass="!w-1/3"
+      label={{ name: $t('service.constructor.props.type') }}
+      type="buttons"
+      value={currentType}
+      options={$optionsStore.ACCORDION_TYPE_OPTIONS}
+      onUpdate={(item) => updateProperty('type', item.value as string)}
+    />
+    <UI.FileAttach
+      type="image"
+      label={{ name: $t('service.constructor.props.image') }}
+      accept="image/png, image/jpeg, image/webp"
+      onChange={handleImageUpload}
+    />
+    <UI.Button name={$t('service.constructor.props.removeimage')} wrapperClass="!w-auto" componentClass="px-4" onClick={() => updateProperty('image', '')} />
+  </div>
+{/if}

package/dist/Accordion/AccordionProps.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 AccordionPropsProps = typeof __propDef.props;
+export type AccordionPropsEvents = typeof __propDef.events;
+export type AccordionPropsSlots = typeof __propDef.slots;
+export default class AccordionProps extends SvelteComponentTyped<AccordionPropsProps, AccordionPropsEvents, AccordionPropsSlots> {
+}
+export {};

package/{src/lib → dist/Button}/Button.svelte

@@ -1,62 +1,33 @@
 <!-- $lib/ElementsUI/Button.svelte -->
 <script lang="ts">
   import { onMount } from 'svelte'
- 
-  /* Интерфейс обработчика для UI компонента */
-  export interface IUIComponentHandler {
-    Action: string // Действие (имя функции, как правило отправка в WebSocket)
-    Header?: string // Заголовок пакета
-    Argument?: string // Аргумент
-    Variables?: string[] // Массив переменных
-  }
-
-  /* Интерфейс кнопки */
-  export interface IButtonProps {
-    id?: { value?: string; name?: string }
-    wrapperClass?: string
-    label?: { name?: string; class?: string }
-    componentClass?: string
-    name?: string
-    icon?: {
-      component?: ConstructorOfATypedSvelteComponent | null
-      properties?: Record<string, unknown>
-    }
-    keyBind?: {
-      key?: string
-      ctrlKey?: boolean
-      shiftKey?: boolean
-      altKey?: boolean
-      metaKey?: boolean /* Поддержка Meta (Cmd на Mac) */
-    }
-    disabled?: boolean
-    eventHandler?: IUIComponentHandler
-    onClick?: (id: string, eventHandler: IUIComponentHandler) => void
-    onKeyBind?: (id: string, eventHandler: IUIComponentHandler) => void
-  }
+  import { type IButtonProps } from '../types'
+  import { fly } from 'svelte/transition'
 
   let {
     id = { value: crypto.randomUUID(), name: '' },
-    wrapperClass = '',
+    wrapperClass = 'bg-blue',
     label = { name: '', class: '' },
     name = '',
     componentClass = '',
     icon = { component: null, properties: {} },
+    info = '',
     disabled = false,
     keyBind,
-    eventHandler = { Action: 'none' },
     onClick,
-    onKeyBind,
   }: IButtonProps = $props()
 
+  let showInfo = $state(false)
+
   /* Обработчик клика */
   const handleClick = () => {
     if (disabled || !onClick) return
-    onClick(id.value ?? '', eventHandler)
+    onClick()
   }
 
   /* Обработчик горячих клавиш */
   const handleKeyDown = (event: KeyboardEvent) => {
-    if (disabled || !keyBind || !onKeyBind) return
+    if (disabled || !keyBind || !onClick) return
 
     const isKeyMatch = event.key === keyBind.key
     const isCtrlMatch = keyBind.ctrlKey === undefined || event.ctrlKey === keyBind.ctrlKey
@@ -66,7 +37,7 @@
 
     if (isKeyMatch && isCtrlMatch && isShiftMatch && isAltMatch && isMetaMatch) {
       event.preventDefault()
-      onKeyBind(id.value ?? '', eventHandler)
+      onClick()
     }
   }
 
@@ -92,16 +63,22 @@
     <button
       id={id.value}
       class={`
-        relative m-0 inline-block w-full items-center rounded-2xl border border-[var(--border-color)] bg-[var(--bg-color)]
+        relative m-0 inline-block w-full items-center rounded-2xl border border-[var(--bg-color)] bg-[var(--bg-color)]
         px-2 py-1 font-semibold transition duration-200 select-none
-        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-95'}
+        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-97'}
         ${componentClass}
       `}
       onclick={handleClick}
       {disabled}
       aria-label={name || label.name}
+      onmouseenter={() => {
+        if (info) showInfo = true
+      }}
+      onmouseleave={() => {
+        if (info) showInfo = false
+      }}
     >
-      <span class="flex flex-row items-center justify-center gap-4">
+      <span class="flex flex-row items-center justify-center gap-2">
         {#if icon?.component}
           {@const IconComponent = icon?.component}
           <IconComponent {...icon?.properties} />
@@ -111,15 +88,27 @@
             {name}
             {#if keyBind}
               <div class="text-xs opacity-70">
-                ({keyBind.ctrlKey ? 'Ctrl+' : ''}
-                {keyBind.shiftKey ? 'Shift+' : ''}
-                {keyBind.altKey ? 'Alt+' : ''}
-                {keyBind.key})
+                ({keyBind.ctrlKey ? 'Ctrl+' : ''}{keyBind.shiftKey ? 'Shift+' : ''}{keyBind.altKey ? 'Alt+' : ''}{keyBind.key})
               </div>
             {/if}
           </div>
         {/if}
       </span>
     </button>
+
+    {#if showInfo}
+      <div
+        transition:fly={{ y: -15, duration: 300 }}
+        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md px-3 py-1 text-sm shadow-lg"
+        style="background: color-mix(in srgb, var(--yellow-color) 30%, var(--back-color)); transform: translateX(-50%);"
+      >
+        {info}
+        <!-- Треугольная стрелка -->
+        <div
+          class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform"
+          style="background: color-mix(in srgb, var(--yellow-color) 30%, var(--back-color));"
+        ></div>
+      </div>
+    {/if}
   </div>
 </div>

package/dist/Button/Button.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 ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/Button/ButtonProps.svelte

@@ -0,0 +1,200 @@
+<!-- $lib/ElementsUI/ButtonProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { UIComponent, IButtonProps, ISelectOption } from '../types'
+  import * as UI from '../index'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IButtonProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  let Header: ISelectOption = $derived(
+    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.properties.eventHandler.Header) ?? { id: '', name: '', value: '', class: '!w-1/4' },
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.componentClass?.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 initialHeight = $derived(
+    $optionsStore.HEIGHT_OPTIONS.find((h) =>
+      (h.value as string).includes(component.properties.componentClass?.split(' ').find((cls: string) => cls.startsWith('py-'))),
+    ),
+  )
+
+  /* Добавление цветов через селект */
+  const handleOptionColorChange = (color: string) => {
+    let componentClass = component.properties.componentClass || ''
+    componentClass = componentClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('bg-'))
+      .join(' ')
+    if (color) {
+      componentClass += ` ${color}`
+    }
+    updateProperty('componentClass', componentClass)
+  }
+
+  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 handleButtonHeight = (height: string) => {
+    let buttonClass = component.properties.componentClass || ''
+    buttonClass = buttonClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('py-'))
+      .join(' ')
+    if (height) {
+      buttonClass += ` ${height}`
+    }
+    updateProperty('componentClass', buttonClass)
+  }
+
+  /* Обновление свойства */
+  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
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.header') }}
+        type="buttons"
+        value={Header}
+        options={$optionsStore.HEADER_OPTIONS}
+        onUpdate={(option) => {
+          Header = option
+          updateProperty('eventHandler.Header', Header.value as string)
+        }}
+      />
+      {#if Header.value === 'SET'}
+        <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}
+      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
+        <UI.Input
+          wrapperClass="w-full {Header.value === 'SET' ? 'mt-1' : ''} "
+          label={{ name: Header.value === 'SET' ? '' : $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)}
+        />
+        <UI.Input
+          wrapperClass="w-full"
+          label={{ name: $t('service.constructor.props.value') }}
+          value={component.properties.eventHandler.Value}
+          type="text"
+          autocomplete="on"
+          componentClass="w-full"
+          maxlength={500}
+          regExp={/^[a-zA-Z0-9\-_ ":{}]{0,500}$/}
+          help={{ info: $t('service.constructor.props.value.info') }}
+          onUpdate={(value) => updateProperty('eventHandler.Value', value as string)}
+        />
+      {/if}
+      <UI.Input
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.variables') }}
+        value={component.properties.eventHandler.Variables.join(' ')}
+        type="text"
+        autocomplete="on"
+        componentClass="w-full"
+        maxlength={500}
+        regExp={/^[a-zA-Z0-9\-_ ]{0,500}$/}
+        help={{ info: $t('service.constructor.props.variables.info') }}
+        onUpdate={(value) => {
+          const parts = (value as string).trim().split(/\s+/)
+          updateProperty('eventHandler.Variables', parts)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.name') }}
+        value={component.properties.name}
+        type="text"
+        onUpdate={(value) => updateProperty('name', value as string)}
+      />
+      <UI.Select
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.height') }}
+        type="buttons"
+        options={$optionsStore.HEIGHT_OPTIONS}
+        value={initialHeight}
+        onUpdate={(option) => handleButtonHeight(option.value as string)}
+      />
+      <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 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/Button/ButtonProps.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 ButtonPropsProps = typeof __propDef.props;
+export type ButtonPropsEvents = typeof __propDef.events;
+export type ButtonPropsSlots = typeof __propDef.slots;
+export default class ButtonProps extends SvelteComponentTyped<ButtonPropsProps, ButtonPropsEvents, ButtonPropsSlots> {
+}
+export {};