poe-svelte-ui-lib 0.2.0 → 1.0.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,4 @@
+import type { IAccordionProps } from '../types';
+declare const Accordion: import("svelte").Component<IAccordionProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

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

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

@@ -1,17 +1,17 @@
 <!-- $lib/ElementsUI/Button.svelte -->
 <script lang="ts">
   import { onMount } from 'svelte'
- 
-  /* Интерфейс обработчика для UI компонента */
-  export interface IUIComponentHandler {
-    Action: string // Действие (имя функции, как правило отправка в WebSocket)
-    Header?: string // Заголовок пакета
-    Argument?: string // Аргумент
-    Variables?: string[] // Массив переменных
+  // import { type IButtonProps } from '../types'
+  import { fly } from 'svelte/transition'
+
+  interface IUIComponentHandler {
+    Header?: string
+    Argument?: string
+    Value?: string
+    Variables?: string[]
   }
 
-  /* Интерфейс кнопки */
-  export interface IButtonProps {
+  interface IButtonProps {
     id?: { value?: string; name?: string }
     wrapperClass?: string
     label?: { name?: string; class?: string }
@@ -21,6 +21,7 @@
       component?: ConstructorOfATypedSvelteComponent | null
       properties?: Record<string, unknown>
     }
+    info?: string
     keyBind?: {
       key?: string
       ctrlKey?: boolean
@@ -30,33 +31,33 @@
     }
     disabled?: boolean
     eventHandler?: IUIComponentHandler
-    onClick?: (id: string, eventHandler: IUIComponentHandler) => void
-    onKeyBind?: (id: string, eventHandler: IUIComponentHandler) => void
+    onClick?: () => void
   }
 
   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 +67,7 @@
 
     if (isKeyMatch && isCtrlMatch && isShiftMatch && isAltMatch && isMetaMatch) {
       event.preventDefault()
-      onKeyBind(id.value ?? '', eventHandler)
+      onClick()
     }
   }
 
@@ -92,16 +93,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 +118,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.svelte.d.ts → Button/Button.svelte.d.ts}

@@ -1,10 +1,10 @@
-export interface IUIComponentHandler {
-    Action: string;
+interface IUIComponentHandler {
     Header?: string;
     Argument?: string;
+    Value?: string;
     Variables?: string[];
 }
-export interface IButtonProps {
+interface IButtonProps {
     id?: {
         value?: string;
         name?: string;
@@ -20,6 +20,7 @@ export interface IButtonProps {
         component?: ConstructorOfATypedSvelteComponent | null;
         properties?: Record<string, unknown>;
     };
+    info?: string;
     keyBind?: {
         key?: string;
         ctrlKey?: boolean;
@@ -29,8 +30,7 @@ export interface IButtonProps {
     };
     disabled?: boolean;
     eventHandler?: IUIComponentHandler;
-    onClick?: (id: string, eventHandler: IUIComponentHandler) => void;
-    onKeyBind?: (id: string, eventHandler: IUIComponentHandler) => void;
+    onClick?: () => void;
 }
 declare const Button: import("svelte").Component<IButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;

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