poe-svelte-ui-lib 0.2.0 → 1.0.0

package/dist/Table/Table.svelte

@@ -0,0 +1,276 @@
+<!-- $lib/ElementsUI/Table.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { get } from 'svelte/store'
+  import type { ITableHeader, ITableProps } from '../types'
+  import { fly } from 'svelte/transition'
+
+  let {
+    id = { value: crypto.randomUUID(), name: '' },
+    wrapperClass = 'bg-blue',
+    label = { name: '', class: '' },
+    tableBody = [],
+    tableHeader = [],
+    cursor = null,
+    loader,
+    getData = () => {},
+    showInfo = true,
+    modalData = $bindable({ isOpen: false, rawData: '', formattedData: '' }),
+    onClick,
+  }: ITableProps<any> = $props()
+
+  /* Сортировка */
+  let sortState: {
+    key: string | null
+    direction: 'asc' | 'desc' | null
+  } = {
+    key: null,
+    direction: null,
+  }
+
+  /* Сортировка столбцов */
+  const sortRows = (key: string) => {
+    if (sortState.key === key) {
+      sortState.direction = sortState.direction === 'asc' ? 'desc' : 'asc'
+    } else {
+      sortState.key = key
+      sortState.direction = 'asc'
+    }
+
+    tableBody = [...tableBody].sort((a, b) => {
+      const aValue = a[key]
+      const bValue = b[key]
+      if (typeof aValue === 'number' && typeof bValue === 'number') {
+        return sortState.direction === 'asc' ? aValue - bValue : bValue - aValue
+      }
+      if (aValue instanceof Date && bValue instanceof Date) {
+        return sortState.direction === 'asc' ? aValue.getTime() - bValue.getTime() : bValue.getTime() - aValue.getTime()
+      }
+      const strA = String(aValue).toLowerCase()
+      const strB = String(bValue).toLowerCase()
+      const numA = strA.match(/\d+/g)?.[0] || ''
+      const numB = strB.match(/\d+/g)?.[0] || ''
+      if (numA && numB) {
+        const numCompare = parseInt(numA, 10) - parseInt(numB, 10)
+        if (numCompare !== 0) {
+          return sortState.direction === 'asc' ? numCompare : -numCompare
+        }
+      }
+      const stringCompare = strA.localeCompare(strB)
+      return sortState.direction === 'asc' ? stringCompare : -stringCompare
+    })
+  }
+
+  /* Запрос данных, если в конце списка */
+  let container: HTMLElement | null = $state(null)
+  function handleScroll() {
+    if (!container) return
+    const { scrollTop, clientHeight, scrollHeight } = container
+    if (scrollTop + clientHeight >= scrollHeight - 50 && cursor !== null && loader && !get(loader)) {
+      getData()
+    }
+  }
+
+  function buttonClick(row: any, button: any) {
+    if (button.onClick) button.onClick(row)
+    else if (button.eventHandler && onClick) {
+      let value: Record<string, boolean | string | number | number[] | object | null> = {}
+      button.eventHandler.Variables.forEach((v: string) => {
+        value[v] = row[v]
+      })
+      button.eventHandler.Value = JSON.stringify(value)
+      onClick(button.eventHandler)
+    }
+  }
+
+  let copiedCell = $state({ x: '', y: -1 })
+  let tooltip = $state({
+    show: false,
+    text: '',
+    x: 0,
+    y: 0,
+  })
+
+  const showModal = async (text: string, formatting?: (text: string) => string) => {
+    modalData = {
+      isOpen: !modalData.isOpen,
+      rawData: text,
+      formattedData: formatting ? formatting(text) : (text ?? ''),
+    }
+  }
+
+  const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
+    tooltip = {
+      show: true,
+      text: formatting ? formatting(text) : (text ?? ''),
+      x: event.clientX,
+      y: event.clientY,
+    }
+  }
+
+  const hideTooltip = () => {
+    tooltip.show = false
+  }
+
+  /* Для работы этой проверки в описании столбцов таблицы нужно явно указать что строка будет пустая при отсутствии иконки в БД -
+     src: (row) => (row.icon ? `data:image/png;base64,${row.icon}` : '') */
+  const hasImage = (column: ITableHeader<any>, row: any): boolean => {
+    const src = typeof column.image?.src === 'function' ? column.image.src(row) : column.image?.src
+    return !!src
+  }
+</script>
+
+<div id={id.value} class={`flex h-full w-full flex-col overflow-hidden ${wrapperClass}`}>
+  {#if label.name}
+    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="flex h-full flex-col overflow-hidden rounded-xl border-[var(--border-color)]">
+    <!-- Table Header -->
+    <div class="grid font-semibold" style={`grid-template-columns: ${tableHeader.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
+      {#each tableHeader as column (column)}
+        <div class="justify-center bg-[var(--bg-color)] p-2 text-center">
+          <div class="flex items-center justify-start gap-2">
+            <span>{column.label}</span>
+            {#if column.sortable}
+              <button
+                class="cursor-pointer font-bold transition-transform duration-75 hover:scale-110 active:scale-95"
+                onclick={() => sortRows(column.key as string)}
+              >
+                ↑↓
+              </button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <!-- Table Body с прокруткой -->
+    <div class="flex-1 overflow-y-auto bg-[var(--conteiner-color)]/50" bind:this={container} onscroll={handleScroll}>
+      <div class="grid min-w-0" style={`grid-template-columns: ${tableHeader.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
+        {#each tableBody as row, index (row)}
+          {#each tableHeader as column (column)}
+            <div
+              class="relative flex w-full min-w-0 items-center px-2 py-1 break-words
+              {index % 2 ? '!bg-[var(--field-color)]' : ''}
+              {column.cellClass}
+              {column.align === 'center'
+                ? 'flex justify-center text-center'
+                : column.align === 'right'
+                  ? 'flex justify-end text-right'
+                  : 'flex justify-start text-left'}"
+            >
+              {#if column.buttons}
+                <div class="flex w-full flex-col gap-1">
+                  {#each column.buttons as button (button)}
+                    <button
+                      class="
+                          cursor-pointer rounded-full !bg-[var(--bg-color)] px-4 py-1 font-medium
+                          transition-shadow outline-none select-none hover:shadow-md
+                          {typeof button.class === 'function' ? button.class(row) : button.class}
+                          "
+                      onclick={() => buttonClick(row, button)}
+                    >
+                      {typeof button.name === 'function' ? button.name(row) : button.name}
+                    </button>
+                  {/each}
+                </div>
+              {:else if column.image}
+                <div class="flex items-center justify-center" style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}>
+                  {#if hasImage(column, row)}
+                    <img
+                      src={typeof column.image?.src === 'function' ? column.image.src(row) : column.image?.src || ''}
+                      alt={column.image.alt ?? 'Image'}
+                      class="h-full w-full object-cover {column.image.class || ''}"
+                      loading="lazy"
+                    />
+                  {:else if column.image.defaultIcon}
+                    <column.image.defaultIcon />
+                  {/if}
+                </div>
+              {:else}
+                <div
+                  class="w-full max-w-full break-words {column.overflow?.truncated ? 'overflow-hidden text-ellipsis whitespace-nowrap' : 'whitespace-normal'}"
+                  onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
+                  onmouseleave={column.overflow?.truncated ? hideTooltip : undefined}
+                  onmousemove={column.overflow?.truncated
+                    ? (e) => {
+                        tooltip.x = e.clientX
+                        tooltip.y = e.clientY
+                      }
+                    : undefined}
+                  role="columnheader"
+                  tabindex={null}
+                >
+                  {#if column.overflow?.modal}
+                    <button
+                      class="w-full cursor-pointer overflow-hidden text-left text-ellipsis whitespace-nowrap"
+                      onclick={(e) => {
+                        e.stopPropagation()
+                        showModal(row[column.key], column.overflow?.formatting)
+                      }}
+                    >
+                      {@html row[column.key]}
+                    </button>
+                  {:else}
+                    {@html row[column.key]}
+                  {/if}
+                </div>
+
+                {#if column.overflow?.copy}
+                  <button
+                    class="right-2 flex cursor-pointer border-none bg-transparent"
+                    onclick={(e) => {
+                      e.preventDefault()
+                      navigator.clipboard.writeText(row[column.key])
+                      copiedCell = { x: column.key as string, y: index }
+                      setTimeout(() => (copiedCell = { x: '', y: -1 }), 1000)
+                    }}
+                    aria-label="Копировать текст"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24">
+                      <g fill="none" stroke="currentColor" stroke-width="1.5">
+                        <path
+                          d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                        />
+                        <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                      </g>
+                    </svg>
+                  </button>
+
+                  {#if copiedCell.y === index && copiedCell.x === column.key}
+                    <div
+                      class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-[var(--green-color)] px-2 py-1 text-sm shadow-lg"
+                      transition:fly={{ x: 10, duration: 200 }}
+                    >
+                      {$t('component.input.copy')}
+                    </div>
+                  {/if}
+                {/if}
+              {/if}
+            </div>
+          {/each}
+        {/each}
+      </div>
+    </div>
+
+    {#if tooltip.show}
+      <div
+        class="fixed z-50 max-w-xs rounded-md px-2 py-1 text-sm whitespace-pre-wrap shadow-lg"
+        style="background: color-mix(in srgb, var(--yellow-color) 30%, var(--back-color)); transform: translateX(-50%); left: {tooltip.x +
+          10}px; top: {tooltip.y + 10}px;"
+        transition:fly={{ y: 10, duration: 200 }}
+        role="tooltip"
+      >
+        {@html tooltip.text}
+      </div>
+    {/if}
+
+    <!-- Нижнее поле для сводной информации -->
+    {#if showInfo}
+      <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
+        <h5>{$t('catalog.nums')} {tableBody.length}</h5>
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/Table/Table.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ITableProps } from '../types';
+declare const Table: import("svelte").Component<ITableProps<any>, {}, "modalData">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/Table/TableProps.svelte

@@ -0,0 +1,286 @@
+<!-- $lib/ElementsUI/TableProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import type { UIComponent, ITableProps, ITableHeader } from '../types'
+  import * as UI from '../index'
+  import ButtonDelete from '../appIcons/ButtonDelete.svelte'
+  import ButtonAdd from '../appIcons/ButtonAdd.svelte'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ITableProps<object>> }
+    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 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 handleOptionColorChange = (color: string) => {
+    let componentClass = component.properties.componentClass || ''
+    componentClass = componentClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('bg-'))
+      .join(' ')
+    if (color) {
+      componentClass += ` ${color}`
+    }
+    updateProperty('wrapperClass', 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 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 updateTableHeader = (index: number, field: keyof ITableHeader<any>, value: any) => {
+    const headers = [...component.properties.tableHeader]
+    headers[index] = { ...headers[index], [field]: value }
+    updateProperty('tableHeader', headers)
+  }
+
+  const updateButtonProperty = (columnIndex: number, buttonIndex: number, field: string, value: any) => {
+    const headers = [...component.properties.tableHeader]
+    const buttons = [...headers[columnIndex].buttons]
+    buttons[buttonIndex] = { ...buttons[buttonIndex], [field]: value }
+    headers[columnIndex].buttons = buttons
+    updateProperty('tableHeader', headers)
+  }
+
+  const removeButtonFromColumn = (columnIndex: number, buttonIndex: number) => {
+    const headers = [...component.properties.tableHeader]
+    const buttons = [...headers[columnIndex].buttons]
+    buttons.splice(buttonIndex, 1)
+    headers[columnIndex].buttons = buttons.length ? buttons : undefined
+    updateProperty('tableHeader', headers)
+  }
+</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('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)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        wrapperClass="!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>
+
+  <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.table.columns')}</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 newColumn: ITableHeader<any> = {
+            key: `column${(component.properties.tableHeader?.length || 0) + 1}`,
+            label: `Column ${(component.properties.tableHeader?.length || 0) + 1}`,
+            width: '100px',
+            sortable: false,
+          }
+          const headers = [...(component.properties.tableHeader || []), newColumn]
+          updateProperty('tableHeader', headers)
+        }}
+      />
+    </div>
+
+    {#each component.properties.tableHeader as column, columnIndex}
+      <div class="m-0 flex items-end justify-around gap-2">
+        <UI.Input
+          label={{ name: $t('service.constructor.props.table.columns.key') }}
+          wrapperClass="!w-2/10"
+          value={column.key}
+          type="text"
+          regExp={/^[0-9a-zA-Z_-]{0,16}$/}
+          onUpdate={(value) => updateTableHeader(columnIndex, 'key', value)}
+        />
+        <UI.Input
+          label={{ name: $t('service.constructor.props.table.columns.label') }}
+          wrapperClass="!w-2/10"
+          value={column.label}
+          type="text"
+          onUpdate={(value) => updateTableHeader(columnIndex, 'label', value)}
+        />
+        <UI.Input
+          label={{ name: $t('service.constructor.props.table.columns.width') }}
+          wrapperClass="!w-2/10"
+          value={column.width}
+          type="text"
+          onUpdate={(value) => updateTableHeader(columnIndex, 'width', value)}
+        />
+        <UI.Switch
+          wrapperClass="!w-1/10"
+          label={{ name: $t('service.constructor.props.table.columns.sortable') }}
+          value={column.sortable ? 2 : 1}
+          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+        />
+        <UI.Button
+          wrapperClass="!w-1/20"
+          icon={{ component: ButtonAdd, properties: { height: '1.5rem', width: '1.5rem' } }}
+          componentClass="h-10 w-10 border-none hover:shadow-none"
+          info={$t('service.constructor.props.table.addaction')}
+          onClick={() => {
+            const newButton = {
+              name: `button${(component.properties.tableHeader[columnIndex].buttons || 0) + 1}`,
+              class: 'bg-blue',
+              eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
+              onClick: () => {},
+            }
+            const buttons = [...(component.properties.tableHeader[columnIndex].buttons || []), newButton]
+            updateTableHeader(columnIndex, 'buttons', buttons)
+          }}
+        />
+        <UI.Button
+          wrapperClass="!w-1/20"
+          icon={{ component: ButtonDelete, properties: { height: '1.5rem', width: '1.5rem' } }}
+          componentClass="h-10 w-10 border-none hover:shadow-none"
+          info={$t('service.constructor.props.table.deletecolumn')}
+          onClick={() => {
+            const headers = [...(component.properties.tableHeader || [])]
+            headers.splice(columnIndex, 1)
+            updateProperty('tableHeader', headers)
+          }}
+        />
+      </div>
+      {#if column.buttons && column.buttons.length > 0}
+        <div class="m-2 rounded-lg bg-[var(--field-color)] p-2">
+          {#each column.buttons as button, buttonIndex}
+            <div class="flex items-end justify-around gap-2">
+              <UI.Input
+                label={{ name: $t('service.constructor.props.name') }}
+                wrapperClass="!w-2/10"
+                value={button.name}
+                type="text"
+                onUpdate={(value) => updateButtonProperty(columnIndex, buttonIndex, 'name', value)}
+              />
+              <UI.Select
+                wrapperClass="!w-3/10"
+                label={{ name: $t('service.constructor.props.header') }}
+                type="buttons"
+                value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
+                options={$optionsStore.HEADER_OPTIONS}
+                onUpdate={(option) => {
+                  const handler = button.eventHandler
+                  handler.Header = option.value as string
+                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                }}
+              />
+              <UI.Input
+                wrapperClass="!w-2/10"
+                label={{ name: $t('service.constructor.props.argument') }}
+                value={button.eventHandler?.Argument}
+                type="text"
+                onUpdate={(value) => {
+                  const handler = button.eventHandler
+                  handler.Argument = value as string
+                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                }}
+              />
+              <UI.Input
+                wrapperClass="!w-2/10"
+                label={{ name: $t('service.constructor.props.table.keys') }}
+                value={button.eventHandler?.Variables.join(' ')}
+                type="text"
+                maxlength={500}
+                regExp={/^[a-zA-Z0-9\-_ ]{0,500}$/}
+                help={{ info: $t('service.constructor.props.table.keys.info') }}
+                onUpdate={(value) => {
+                  const handler = { ...button.eventHandler }
+                  handler.Variables = (value as string).trim().split(/\s+/)
+                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                }}
+              />
+              <UI.Button
+                wrapperClass="!w-1/20"
+                icon={{ component: ButtonDelete, properties: { height: '1.5rem', width: '1.5rem' } }}
+                componentClass="h-10 w-10 border-none hover:shadow-none"
+                onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)}
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}

package/dist/Table/TableProps.svelte.d.ts

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

package/dist/TextField/TextField.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { ITextFieldProps } from '../types'
+
+  let {
+    id = { value: crypto.randomUUID(), name: '' },
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    type = 'small',
+    bold = false,
+    italic = false,
+  }: ITextFieldProps = $props()
+
+  const textSize = {
+    small: 'text-base',
+    medium: 'text-xl',
+    xlarge: 'text-2xl',
+  }
+</script>
+
+<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
+  <p class="w-full text-center {label.class} {textSize[type]} {bold ? 'font-bold' : ''} {italic ? 'italic' : ''}">{label.name}</p>
+</div>

package/dist/TextField/TextField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ITextFieldProps } from '../types';
+declare const TextField: import("svelte").Component<ITextFieldProps, {}, "">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;