poe-svelte-ui-lib 0.2.0 → 0.3.0

package/dist/Switch/SwitchProps.svelte

@@ -0,0 +1,144 @@
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import type { UIComponent, ISwitchProps } from '../types'
+  import * as UI from '../index'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ISwitchProps> }
+    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 | boolean | number) => {
+    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
+        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
+        label={{ name: $t('service.constructor.props.caption.left') }}
+        value={component.properties.label.captionLeft}
+        type="text"
+        onUpdate={(value) => updateProperty('label.captionLeft', value as string)}
+      />
+      <UI.Input
+        label={{ name: $t('service.constructor.props.caption.right') }}
+        value={component.properties.label.captionRight}
+        type="text"
+        onUpdate={(value) => updateProperty('label.captionRight', value as string)}
+      />
+      <UI.Switch
+        label={{ name: $t('service.constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('service.constructor.props.label') }}
+        value={component.properties.label.name}
+        type="text"
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+      />
+      <UI.Select
+        label={{ name: $t('service.constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => handleLabelAlign(option.value as string)}
+      />
+      <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>
+{/if}

package/dist/Switch/SwitchProps.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 SwitchPropsProps = typeof __propDef.props;
+export type SwitchPropsEvents = typeof __propDef.events;
+export type SwitchPropsSlots = typeof __propDef.slots;
+export default class SwitchProps extends SvelteComponentTyped<SwitchPropsProps, SwitchPropsEvents, SwitchPropsSlots> {
+}
+export {};

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,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};