poe-svelte-ui-lib 1.0.0 → 1.0.2

package/LICENSE

@@ -1,3 +1,3 @@
-Looks like there's already a license file for this project.
-[?25l? Do you want to replace it? ┬╗ (y/N)тИЪ Do you want to replace it? ... no
-[?25hExiting...
+Looks like there's already a license file for this project.
+[?25l? Do you want to replace it? ┬╗ (y/N)тИЪ Do you want to replace it? ... no
+[?25hExiting...

package/dist/Accordion/Accordion.svelte

@@ -1,53 +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>
+<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/AccordionProps.svelte

@@ -1,70 +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}
+<!-- $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/Button/Button.svelte

@@ -1,144 +1,144 @@
-<!-- $lib/ElementsUI/Button.svelte -->
-<script lang="ts">
-  import { onMount } from 'svelte'
-  // import { type IButtonProps } from '../types'
-  import { fly } from 'svelte/transition'
-
-  interface IUIComponentHandler {
-    Header?: string
-    Argument?: string
-    Value?: string
-    Variables?: string[]
-  }
-
-  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>
-    }
-    info?: string
-    keyBind?: {
-      key?: string
-      ctrlKey?: boolean
-      shiftKey?: boolean
-      altKey?: boolean
-      metaKey?: boolean /* Поддержка Meta (Cmd на Mac) */
-    }
-    disabled?: boolean
-    eventHandler?: IUIComponentHandler
-    onClick?: () => void
-  }
-
-  let {
-    id = { value: crypto.randomUUID(), name: '' },
-    wrapperClass = 'bg-blue',
-    label = { name: '', class: '' },
-    name = '',
-    componentClass = '',
-    icon = { component: null, properties: {} },
-    info = '',
-    disabled = false,
-    keyBind,
-    onClick,
-  }: IButtonProps = $props()
-
-  let showInfo = $state(false)
-
-  /* Обработчик клика */
-  const handleClick = () => {
-    if (disabled || !onClick) return
-    onClick()
-  }
-
-  /* Обработчик горячих клавиш */
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (disabled || !keyBind || !onClick) return
-
-    const isKeyMatch = event.key === keyBind.key
-    const isCtrlMatch = keyBind.ctrlKey === undefined || event.ctrlKey === keyBind.ctrlKey
-    const isShiftMatch = keyBind.shiftKey === undefined || event.shiftKey === keyBind.shiftKey
-    const isAltMatch = keyBind.altKey === undefined || event.altKey === keyBind.altKey
-    const isMetaMatch = keyBind.metaKey === undefined || event.metaKey === keyBind.metaKey
-
-    if (isKeyMatch && isCtrlMatch && isShiftMatch && isAltMatch && isMetaMatch) {
-      event.preventDefault()
-      onClick()
-    }
-  }
-
-  /* Подписка на события клавиатуры */
-  onMount(() => {
-    if (keyBind) {
-      window.addEventListener('keydown', handleKeyDown)
-    }
-    return () => {
-      if (keyBind) {
-        window.removeEventListener('keydown', handleKeyDown)
-      }
-    }
-  })
-</script>
-
-<div class={`relative flex w-full flex-col items-center ${wrapperClass}`}>
-  {#if label.name}
-    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
-  {/if}
-
-  <div class="relative flex w-full grow items-center">
-    <button
-      id={id.value}
-      class={`
-        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-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-2">
-        {#if icon?.component}
-          {@const IconComponent = icon?.component}
-          <IconComponent {...icon?.properties} />
-        {/if}
-        {#if name}
-          <div class="flex-1">
-            {name}
-            {#if keyBind}
-              <div class="text-xs opacity-70">
-                ({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>
+<!-- $lib/ElementsUI/Button.svelte -->
+<script lang="ts">
+  import { onMount } from 'svelte'
+  // import { type IButtonProps } from '../types'
+  import { fly } from 'svelte/transition'
+
+  interface IUIComponentHandler {
+    Header?: string
+    Argument?: string
+    Value?: string
+    Variables?: string[]
+  }
+
+  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>
+    }
+    info?: string
+    keyBind?: {
+      key?: string
+      ctrlKey?: boolean
+      shiftKey?: boolean
+      altKey?: boolean
+      metaKey?: boolean /* Поддержка Meta (Cmd на Mac) */
+    }
+    disabled?: boolean
+    eventHandler?: IUIComponentHandler
+    onClick?: () => void
+  }
+
+  let {
+    id = { value: crypto.randomUUID(), name: '' },
+    wrapperClass = 'bg-blue',
+    label = { name: '', class: '' },
+    name = '',
+    componentClass = '',
+    icon = { component: null, properties: {} },
+    info = '',
+    disabled = false,
+    keyBind,
+    onClick,
+  }: IButtonProps = $props()
+
+  let showInfo = $state(false)
+
+  /* Обработчик клика */
+  const handleClick = () => {
+    if (disabled || !onClick) return
+    onClick()
+  }
+
+  /* Обработчик горячих клавиш */
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (disabled || !keyBind || !onClick) return
+
+    const isKeyMatch = event.key === keyBind.key
+    const isCtrlMatch = keyBind.ctrlKey === undefined || event.ctrlKey === keyBind.ctrlKey
+    const isShiftMatch = keyBind.shiftKey === undefined || event.shiftKey === keyBind.shiftKey
+    const isAltMatch = keyBind.altKey === undefined || event.altKey === keyBind.altKey
+    const isMetaMatch = keyBind.metaKey === undefined || event.metaKey === keyBind.metaKey
+
+    if (isKeyMatch && isCtrlMatch && isShiftMatch && isAltMatch && isMetaMatch) {
+      event.preventDefault()
+      onClick()
+    }
+  }
+
+  /* Подписка на события клавиатуры */
+  onMount(() => {
+    if (keyBind) {
+      window.addEventListener('keydown', handleKeyDown)
+    }
+    return () => {
+      if (keyBind) {
+        window.removeEventListener('keydown', handleKeyDown)
+      }
+    }
+  })
+</script>
+
+<div class={`relative flex w-full flex-col items-center ${wrapperClass}`}>
+  {#if label.name}
+    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="relative flex w-full grow items-center">
+    <button
+      id={id.value}
+      class={`
+        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-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-2">
+        {#if icon?.component}
+          {@const IconComponent = icon?.component}
+          <IconComponent {...icon?.properties} />
+        {/if}
+        {#if name}
+          <div class="flex-1">
+            {name}
+            {#if keyBind}
+              <div class="text-xs opacity-70">
+                ({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>