poe-svelte-ui-lib 1.0.1 → 1.0.2

package/dist/Slider/SliderProps.svelte

@@ -1,161 +1,161 @@
-<!-- $lib/ElementsUI/SwitchProps.svelte -->
-<script lang="ts">
-  import { getContext } from 'svelte'
-  import { t } from '../locales/i18n'
-  import type { UIComponent, ISliderProps } from '../types'
-  import * as UI from '../index'
-  import { optionsStore } from '../options'
-
-  const { component, onPropertyChange } = $props<{
-    component: UIComponent & { properties: Partial<ISliderProps> }
-    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 initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
-    ),
-  )
-
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
-    ),
-  )
-
-  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 handleOptionColorChange = (color: string) => {
-    let wrapperClass = component.properties.wrapperClass || ''
-    wrapperClass = wrapperClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('bg-'))
-      .join(' ')
-    if (color) {
-      wrapperClass += ` ${color}`
-    }
-    updateProperty('wrapperClass', wrapperClass)
-  }
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: number | 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)
-  }
-</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)
-        }}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        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.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.type') }}
-        type="buttons"
-        value={$optionsStore.SLIDER_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'single'))}
-        options={$optionsStore.SLIDER_TYPE_OPTIONS}
-        onUpdate={(type) => {
-          updateProperty('value', type.value === 'single' ? 5 : [2, 7])
-          updateProperty('type', type.value as string)
-        }}
-      />
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.minnum') }}
-        value={component.properties.number.minNum as number}
-        type="number"
-        onUpdate={(value) => updateProperty('number.minNum', Number(value))}
-      />
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.maxnum') }}
-        value={component.properties.number.maxNum as number}
-        type="number"
-        onUpdate={(value) => updateProperty('number.maxNum', Number(value))}
-      />
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.step') }}
-        value={component.properties.number.step as number}
-        type="number"
-        onUpdate={(value) => updateProperty('number.step', Number(value))}
-      />
-    </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)}
-      />
-      <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}
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import type { UIComponent, ISliderProps } from '../types'
+  import * as UI from '../index'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ISliderProps> }
+    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 initialAlign = $derived(
+    $optionsStore.ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+
+  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 handleOptionColorChange = (color: string) => {
+    let wrapperClass = component.properties.wrapperClass || ''
+    wrapperClass = wrapperClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('bg-'))
+      .join(' ')
+    if (color) {
+      wrapperClass += ` ${color}`
+    }
+    updateProperty('wrapperClass', wrapperClass)
+  }
+
+  /* Обновление свойства */
+  const updateProperty = (path: string, value: number | 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)
+  }
+</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)
+        }}
+      />
+      <UI.Select
+        wrapperClass="w-full"
+        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.Select
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.type') }}
+        type="buttons"
+        value={$optionsStore.SLIDER_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'single'))}
+        options={$optionsStore.SLIDER_TYPE_OPTIONS}
+        onUpdate={(type) => {
+          updateProperty('value', type.value === 'single' ? 5 : [2, 7])
+          updateProperty('type', type.value as string)
+        }}
+      />
+      <UI.Input
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.minnum') }}
+        value={component.properties.number.minNum as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.minNum', Number(value))}
+      />
+      <UI.Input
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.maxnum') }}
+        value={component.properties.number.maxNum as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.maxNum', Number(value))}
+      />
+      <UI.Input
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.step') }}
+        value={component.properties.number.step as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.step', Number(value))}
+      />
+    </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)}
+      />
+      <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/Switch.svelte

@@ -1,83 +1,83 @@
-<!-- $lib/ElementsUI/Switch.svelte -->
-<script lang="ts">
-  import type { ISwitchProps } from '../types'
-
-  let {
-    id = { name: '', value: crypto.randomUUID() },
-    wrapperClass = '',
-    disabled = false,
-    label = { name: '', captionLeft: '', captionRight: '', class: '' },
-    height = '2rem',
-    value = $bindable(),
-    onChange = () => {},
-  }: ISwitchProps = $props()
-
-  const options = [1, 2]
-  let checked = $derived(value === options[1])
-
-  let knobTransform = $derived(checked ? `translateX(calc(${height} * 0.9))` : 'translateX(0)')
-
-  $effect(() => {
-    if (value === undefined || value === null) value = options[0]
-  })
-
-  const handleToggle = () => {
-    if (disabled) return
-    const newValue = checked ? options[1] : options[0]
-
-    value = newValue
-
-    onChange(newValue)
-  }
-
-  const handleCaptionClick = (newValue: number) => {
-    if (disabled || value === newValue) return
-    value = newValue
-    onChange(newValue)
-  }
-
-  const maxCaptionWidth = $derived(
-    Math.max(label.captionLeft?.length ?? 0, label.captionRight?.length ?? 0) > 0
-      ? `${Math.max(label.captionLeft?.length ?? 0, label.captionRight?.length ?? 0)}ch`
-      : 'auto',
-  )
-</script>
-
-<div class="bg-blue relative flex w-full flex-col items-center justify-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 justify-center !bg-transparent" id={id.value}>
-    <button class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: end;" onclick={() => handleCaptionClick(1)}
-      >{label.captionLeft}</button
-    >
-    <label
-      class="relative flex items-center justify-between rounded-full border-1
-      {checked ? '!border-[var(--bg-color)]' : '!border-[var(--gray-color)]'}
-      {disabled ? 'opacity-60' : ''}"
-    >
-      <input
-        type="checkbox"
-        class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
-        bind:checked
-        {disabled}
-        onchange={handleToggle}
-      />
-      <span
-        class="relative flex items-center rounded-full transition-all duration-250 {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'} {disabled
-          ? ''
-          : 'cursor-pointer'}"
-        style="width: {`calc(${height} * 2)`}; height: {height};"
-      >
-        <span
-          class="absolute rounded-full bg-[var(--back-color)] transition-all duration-250 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
-        ></span>
-      </span>
-    </label>
-    <button class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: start;" onclick={() => handleCaptionClick(2)}
-      >{label.captionRight}</button
-    >
-  </div>
-</div>
+<!-- $lib/ElementsUI/Switch.svelte -->
+<script lang="ts">
+  import type { ISwitchProps } from '../types'
+
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = '',
+    disabled = false,
+    label = { name: '', captionLeft: '', captionRight: '', class: '' },
+    height = '2rem',
+    value = $bindable(),
+    onChange = () => {},
+  }: ISwitchProps = $props()
+
+  const options = [1, 2]
+  let checked = $derived(value === options[1])
+
+  let knobTransform = $derived(checked ? `translateX(calc(${height} * 0.9))` : 'translateX(0)')
+
+  $effect(() => {
+    if (value === undefined || value === null) value = options[0]
+  })
+
+  const handleToggle = () => {
+    if (disabled) return
+    const newValue = checked ? options[1] : options[0]
+
+    value = newValue
+
+    onChange(newValue)
+  }
+
+  const handleCaptionClick = (newValue: number) => {
+    if (disabled || value === newValue) return
+    value = newValue
+    onChange(newValue)
+  }
+
+  const maxCaptionWidth = $derived(
+    Math.max(label.captionLeft?.length ?? 0, label.captionRight?.length ?? 0) > 0
+      ? `${Math.max(label.captionLeft?.length ?? 0, label.captionRight?.length ?? 0)}ch`
+      : 'auto',
+  )
+</script>
+
+<div class="bg-blue relative flex w-full flex-col items-center justify-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 justify-center !bg-transparent" id={id.value}>
+    <button class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: end;" onclick={() => handleCaptionClick(1)}
+      >{label.captionLeft}</button
+    >
+    <label
+      class="relative flex items-center justify-between rounded-full border-1
+      {checked ? '!border-[var(--bg-color)]' : '!border-[var(--gray-color)]'}
+      {disabled ? 'opacity-60' : ''}"
+    >
+      <input
+        type="checkbox"
+        class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
+        bind:checked
+        {disabled}
+        onchange={handleToggle}
+      />
+      <span
+        class="relative flex items-center rounded-full transition-all duration-250 {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'} {disabled
+          ? ''
+          : 'cursor-pointer'}"
+        style="width: {`calc(${height} * 2)`}; height: {height};"
+      >
+        <span
+          class="absolute rounded-full bg-[var(--back-color)] transition-all duration-250 {disabled ? 'opacity-60' : 'cursor-pointer'}"
+          style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
+        ></span>
+      </span>
+    </label>
+    <button class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: start;" onclick={() => handleCaptionClick(2)}
+      >{label.captionRight}</button
+    >
+  </div>
+</div>