poe-svelte-ui-lib 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/Accordion.svelte +1 -2
- package/dist/Accordion/AccordionProps.svelte +25 -1
- package/dist/Accordion/IconsLib/ButtonEdit.svg +10 -0
- package/dist/Accordion/IconsLib/ButtonSave.svg +6 -0
- package/dist/Accordion/IconsLib/CrossIcon.svg +7 -0
- package/dist/Accordion/IconsLib/DebugIcon.svg +8 -0
- package/dist/Accordion/IconsLib/MenuCatalog.svg +6 -0
- package/dist/Accordion/IconsLib/MenuCompany.svg +8 -0
- package/dist/Accordion/IconsLib/Notifications.svg +10 -0
- package/dist/Accordion/IconsLib/PhEye.svg +7 -0
- package/dist/Accordion/IconsLib/iconsLib.d.ts +1 -0
- package/dist/Accordion/IconsLib/iconsLib.js +18 -0
- package/dist/Accordion/icons.d.ts +1 -0
- package/dist/Accordion/icons.js +10 -0
- package/dist/Button/ButtonProps.svelte +11 -6
- package/dist/FileAttach.svelte +5 -4
- package/dist/FileAttach.svelte.d.ts +2 -2
- package/dist/Input/InputProps.svelte +2 -7
- package/dist/ProgressBar/ProgressBarProps.svelte +3 -2
- package/dist/Select/SelectProps.svelte +7 -7
- package/dist/Slider/Slider.svelte +2 -2
- package/dist/Slider/SliderProps.svelte +3 -2
- package/dist/Switch/SwitchProps.svelte +3 -2
- package/dist/Table/TableProps.svelte +28 -26
- package/dist/TextField/TextFieldProps.svelte +4 -3
- package/dist/locales/translations.js +4 -2
- package/dist/options.js +3 -2
- package/dist/types.d.ts +1 -1
- package/package.json +5 -2
|
@@ -36,8 +36,7 @@
|
|
|
36
36
|
class={`flex h-8 w-8 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
|
|
37
37
|
>
|
|
38
38
|
{#if label?.icon}
|
|
39
|
-
{@
|
|
40
|
-
<IconComponent />
|
|
39
|
+
{@html label.icon}
|
|
41
40
|
{/if}
|
|
42
41
|
</span>
|
|
43
42
|
<span class="{twMerge('m-0 w-full cursor-pointer text-left font-semibold', label.class)} text-lg">
|
|
@@ -4,12 +4,16 @@
|
|
|
4
4
|
import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
|
|
5
5
|
import * as UI from '..'
|
|
6
6
|
import { optionsStore } from '../options'
|
|
7
|
+
import { fly } from 'svelte/transition'
|
|
8
|
+
import { ICONS } from './icons'
|
|
7
9
|
|
|
8
10
|
const { component, onPropertyChange } = $props<{
|
|
9
11
|
component: UIComponent & { properties: Partial<IAccordionProps> }
|
|
10
12
|
onPropertyChange: (value: string | object) => void
|
|
11
13
|
}>()
|
|
12
14
|
|
|
15
|
+
let showIconLib = $state(true)
|
|
16
|
+
|
|
13
17
|
const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
|
|
14
18
|
|
|
15
19
|
const initialAlign = $derived(
|
|
@@ -51,7 +55,7 @@
|
|
|
51
55
|
onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
|
|
52
56
|
/>
|
|
53
57
|
</div>
|
|
54
|
-
<div class="flex w-1/3 flex-col items-center px-2">
|
|
58
|
+
<div class="flex w-1/3 flex-col items-center gap-6 px-2">
|
|
55
59
|
<UI.Select
|
|
56
60
|
label={{ name: $t('constructor.props.type') }}
|
|
57
61
|
type="buttons"
|
|
@@ -59,6 +63,26 @@
|
|
|
59
63
|
options={$optionsStore.ACCORDION_TYPE_OPTIONS}
|
|
60
64
|
onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
|
|
61
65
|
/>
|
|
66
|
+
<div class="relative w-full">
|
|
67
|
+
<UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = !showIconLib)} />
|
|
68
|
+
{#if showIconLib}
|
|
69
|
+
<div
|
|
70
|
+
transition:fly={{ duration: 350 }}
|
|
71
|
+
class="emoji-container absolute right-6 bottom-full z-10 m-2 flex max-h-60 max-w-md flex-wrap gap-1 overflow-auto rounded-2xl bg-[var(--field-color)] p-2 shadow-lg"
|
|
72
|
+
>
|
|
73
|
+
{#each ICONS as icon}
|
|
74
|
+
<button
|
|
75
|
+
class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
|
|
76
|
+
onclick={() => {
|
|
77
|
+
updateProperty('label.icon', icon as string, component, onPropertyChange)
|
|
78
|
+
}}
|
|
79
|
+
>
|
|
80
|
+
{@html icon}
|
|
81
|
+
</button>
|
|
82
|
+
{/each}
|
|
83
|
+
</div>
|
|
84
|
+
{/if}
|
|
85
|
+
</div>
|
|
62
86
|
</div>
|
|
63
87
|
<div class="flex w-1/3 flex-col items-center gap-2 px-2">
|
|
64
88
|
<UI.FileAttach
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
|
|
2
|
+
><path
|
|
3
|
+
fill="none"
|
|
4
|
+
stroke="currentColor"
|
|
5
|
+
stroke-linecap="round"
|
|
6
|
+
stroke-linejoin="round"
|
|
7
|
+
stroke-width="1.5"
|
|
8
|
+
d="M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78"
|
|
9
|
+
/></svg
|
|
10
|
+
>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
|
|
2
|
+
><path
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
d="M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z"
|
|
5
|
+
/></svg
|
|
6
|
+
>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
|
|
2
|
+
><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
|
|
3
|
+
><path d="M5.47 5.47a.75.75 0 0 1 1.06 0l12 12a.75.75 0 1 1-1.06 1.06l-12-12a.75.75 0 0 1 0-1.06" /><path
|
|
4
|
+
d="M18.53 5.47a.75.75 0 0 1 0 1.06l-12 12a.75.75 0 0 1-1.06-1.06l12-12a.75.75 0 0 1 1.06 0"
|
|
5
|
+
/></g
|
|
6
|
+
></svg
|
|
7
|
+
>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...$$props}
|
|
2
|
+
><path
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
fill-rule="evenodd"
|
|
5
|
+
d="M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572"
|
|
6
|
+
clip-rule="evenodd"
|
|
7
|
+
/></svg
|
|
8
|
+
>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...$$props}
|
|
2
|
+
><path fill="currentColor" d="m23 27.2l-2.6-2.6L19 26l4 4l7-7l-1.4-1.4zM12 18h8v2h-8zm0-5h8v2h-8zm0-5h8v2h-8z" /><path
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
d="M16 28H6v-4h2v-2H6v-5h2v-2H6v-5h2V8H6V4h18v16h2V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v4H2v2h2v5H2v2h2v5H2v2h2v4c0 1.1.9 2 2 2h10z"
|
|
5
|
+
/></svg
|
|
6
|
+
>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
|
|
2
|
+
><path
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
fill-rule="evenodd"
|
|
5
|
+
d="M10.948 1.25h2.104c.899 0 1.648 0 2.242.08c.628.084 1.195.27 1.65.725c.456.456.642 1.023.726 1.65q.035.255.05.545c.59 0 1.088.004 1.499.046c.473.048.913.153 1.309.417c.3.201.558.459.759.76c.264.395.369.835.417 1.308c.046.452.046 1.011.046 1.68V21.25H22a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1 0-1.5h.25V8.462c0-.67 0-1.229.046-1.681c.048-.473.153-.913.417-1.309c.201-.3.459-.558.76-.759c.395-.264.835-.369 1.308-.417c.41-.042.909-.046 1.498-.046q.017-.29.05-.544c.085-.628.271-1.195.726-1.65c.456-.456 1.023-.642 1.65-.726c.595-.08 1.345-.08 2.243-.08M6.25 5.75c-.583 0-.994.005-1.317.038c-.355.036-.519.1-.627.173a1.3 1.3 0 0 0-.345.345c-.073.108-.137.272-.173.627c-.037.367-.038.85-.038 1.567v12.75h2.5v-6.5H5.5a.75.75 0 0 1 0-1.5h.75v-1.5H5.5a.75.75 0 0 1 0-1.5h.75v-1.5H5.5a.75.75 0 1 1 0-1.5h.75zm1.5 15.5h3.5V19a.75.75 0 0 1 1.5 0v2.25h3.5V6c0-.964-.002-1.612-.067-2.095c-.062-.461-.169-.659-.3-.789s-.327-.237-.788-.3c-.483-.064-1.131-.066-2.095-.066h-2c-.964 0-1.612.002-2.095.067c-.461.062-.659.169-.789.3s-.237.327-.3.788C7.753 4.388 7.75 5.036 7.75 6zm10-12.5h.75a.75.75 0 0 0 0-1.5h-.75v-1.5c.583 0 .994.005 1.317.038c.355.036.519.1.628.173c.136.09.253.208.344.345c.073.108.137.272.173.627c.037.367.038.85.038 1.567v12.75h-2.5v-6.5h.75a.75.75 0 0 0 0-1.5h-.75v-1.5h.75a.75.75 0 0 0 0-1.5h-.75zm-5.75-3a1.25 1.25 0 1 0 0 2.5a1.25 1.25 0 0 0 0-2.5M9.25 7a2.75 2.75 0 1 1 5.5 0a2.75 2.75 0 0 1-5.5 0m0 5a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75"
|
|
6
|
+
clip-rule="evenodd"
|
|
7
|
+
/></svg
|
|
8
|
+
>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}
|
|
2
|
+
><path
|
|
3
|
+
fill="none"
|
|
4
|
+
stroke="currentColor"
|
|
5
|
+
stroke-linecap="round"
|
|
6
|
+
stroke-linejoin="round"
|
|
7
|
+
stroke-width="1.5"
|
|
8
|
+
d="M12 11v-.5m4 .5v-.5M8 11v-.5m-4.536 6.328C2 15.657 2 14.771 2 11s0-5.657 1.464-6.828C4.93 3 7.286 3 12 3s7.071 0 8.535 1.172S22 7.229 22 11s0 4.657-1.465 5.828C19.072 18 16.714 18 12 18c-2.51 0-3.8 1.738-6 3v-3.212c-1.094-.163-1.899-.45-2.536-.96"
|
|
9
|
+
/></svg
|
|
10
|
+
>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
|
|
2
|
+
><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
3
|
+
><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" /><path
|
|
4
|
+
d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7"
|
|
5
|
+
/></g
|
|
6
|
+
></svg
|
|
7
|
+
>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import fs from 'fs';
|
|
2
|
+
import { join } from 'path';
|
|
3
|
+
const scanAllIcons = async () => {
|
|
4
|
+
const dirPath = 'src/lib/Accordion/IconsLib';
|
|
5
|
+
const files = fs.readdirSync(dirPath);
|
|
6
|
+
const icons = files.filter((file) => !file.endsWith('.ts'));
|
|
7
|
+
const contents = icons.map((file) => {
|
|
8
|
+
const fullPath = join(dirPath, file);
|
|
9
|
+
return fs.readFileSync(fullPath, 'utf8');
|
|
10
|
+
});
|
|
11
|
+
const entries = contents.map((content) => JSON.stringify(content)).join(',\n ');
|
|
12
|
+
const content = `export const ICONS: string[] = [
|
|
13
|
+
${entries}
|
|
14
|
+
]`;
|
|
15
|
+
fs.writeFileSync('src/lib/Accordion/icons.ts', content);
|
|
16
|
+
console.log('icons.ts создан:', icons);
|
|
17
|
+
};
|
|
18
|
+
scanAllIcons();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ICONS: string[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export const ICONS = [
|
|
2
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n ><path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78\"\r\n /></svg\r\n>\r\n",
|
|
3
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n ><path\r\n fill=\"currentColor\"\r\n d=\"M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z\"\r\n /></svg\r\n>\r\n",
|
|
4
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n ><g fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n ><path d=\"M5.47 5.47a.75.75 0 0 1 1.06 0l12 12a.75.75 0 1 1-1.06 1.06l-12-12a.75.75 0 0 1 0-1.06\" /><path\r\n d=\"M18.53 5.47a.75.75 0 0 1 0 1.06l-12 12a.75.75 0 0 1-1.06-1.06l12-12a.75.75 0 0 1 1.06 0\"\r\n /></g\r\n ></svg\r\n>\r\n",
|
|
5
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" {...$$props}\r\n ><path\r\n fill=\"currentColor\"\r\n fill-rule=\"evenodd\"\r\n d=\"M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572\"\r\n clip-rule=\"evenodd\"\r\n /></svg\r\n>\r\n",
|
|
6
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 32 32\" {...$$props}\r\n ><path fill=\"currentColor\" d=\"m23 27.2l-2.6-2.6L19 26l4 4l7-7l-1.4-1.4zM12 18h8v2h-8zm0-5h8v2h-8zm0-5h8v2h-8z\" /><path\r\n fill=\"currentColor\"\r\n d=\"M16 28H6v-4h2v-2H6v-5h2v-2H6v-5h2V8H6V4h18v16h2V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v4H2v2h2v5H2v2h2v5H2v2h2v4c0 1.1.9 2 2 2h10z\"\r\n /></svg\r\n>\r\n",
|
|
7
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n ><path\r\n fill=\"currentColor\"\r\n fill-rule=\"evenodd\"\r\n d=\"M10.948 1.25h2.104c.899 0 1.648 0 2.242.08c.628.084 1.195.27 1.65.725c.456.456.642 1.023.726 1.65q.035.255.05.545c.59 0 1.088.004 1.499.046c.473.048.913.153 1.309.417c.3.201.558.459.759.76c.264.395.369.835.417 1.308c.046.452.046 1.011.046 1.68V21.25H22a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1 0-1.5h.25V8.462c0-.67 0-1.229.046-1.681c.048-.473.153-.913.417-1.309c.201-.3.459-.558.76-.759c.395-.264.835-.369 1.308-.417c.41-.042.909-.046 1.498-.046q.017-.29.05-.544c.085-.628.271-1.195.726-1.65c.456-.456 1.023-.642 1.65-.726c.595-.08 1.345-.08 2.243-.08M6.25 5.75c-.583 0-.994.005-1.317.038c-.355.036-.519.1-.627.173a1.3 1.3 0 0 0-.345.345c-.073.108-.137.272-.173.627c-.037.367-.038.85-.038 1.567v12.75h2.5v-6.5H5.5a.75.75 0 0 1 0-1.5h.75v-1.5H5.5a.75.75 0 0 1 0-1.5h.75v-1.5H5.5a.75.75 0 1 1 0-1.5h.75zm1.5 15.5h3.5V19a.75.75 0 0 1 1.5 0v2.25h3.5V6c0-.964-.002-1.612-.067-2.095c-.062-.461-.169-.659-.3-.789s-.327-.237-.788-.3c-.483-.064-1.131-.066-2.095-.066h-2c-.964 0-1.612.002-2.095.067c-.461.062-.659.169-.789.3s-.237.327-.3.788C7.753 4.388 7.75 5.036 7.75 6zm10-12.5h.75a.75.75 0 0 0 0-1.5h-.75v-1.5c.583 0 .994.005 1.317.038c.355.036.519.1.628.173c.136.09.253.208.344.345c.073.108.137.272.173.627c.037.367.038.85.038 1.567v12.75h-2.5v-6.5h.75a.75.75 0 0 0 0-1.5h-.75v-1.5h.75a.75.75 0 0 0 0-1.5h-.75zm-5.75-3a1.25 1.25 0 1 0 0 2.5a1.25 1.25 0 0 0 0-2.5M9.25 7a2.75 2.75 0 1 1 5.5 0a2.75 2.75 0 0 1-5.5 0m0 5a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75\"\r\n clip-rule=\"evenodd\"\r\n /></svg\r\n>\r\n",
|
|
8
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...$$props}\r\n ><path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 11v-.5m4 .5v-.5M8 11v-.5m-4.536 6.328C2 15.657 2 14.771 2 11s0-5.657 1.464-6.828C4.93 3 7.286 3 12 3s7.071 0 8.535 1.172S22 7.229 22 11s0 4.657-1.465 5.828C19.072 18 16.714 18 12 18c-2.51 0-3.8 1.738-6 3v-3.212c-1.094-.163-1.899-.45-2.536-.96\"\r\n /></svg\r\n>\r\n",
|
|
9
|
+
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n ><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n ><path d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" /><path\r\n d=\"M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7\"\r\n /></g\r\n ></svg\r\n>\r\n"
|
|
10
|
+
];
|
|
@@ -4,12 +4,15 @@
|
|
|
4
4
|
import { type UIComponent, type IButtonProps, type ISelectOption, updateProperty } from '../types'
|
|
5
5
|
import * as UI from '..'
|
|
6
6
|
import { optionsStore } from '../options'
|
|
7
|
+
import { twMerge } from 'tailwind-merge'
|
|
7
8
|
|
|
8
9
|
const { component, onPropertyChange } = $props<{
|
|
9
10
|
component: UIComponent & { properties: Partial<IButtonProps> }
|
|
10
11
|
onPropertyChange: (value: string | object) => void
|
|
11
12
|
}>()
|
|
12
13
|
|
|
14
|
+
let hasValue: boolean = $derived(component.properties.eventHandler.Value)
|
|
15
|
+
|
|
13
16
|
let Header: ISelectOption = $derived(
|
|
14
17
|
$optionsStore.HEADER_OPTIONS.find((h) => h.value === component.properties.eventHandler.Header) ?? {
|
|
15
18
|
id: '',
|
|
@@ -37,7 +40,6 @@
|
|
|
37
40
|
<!-- Сообщение для отправки в ws по нажатию кнопки -->
|
|
38
41
|
<div class="flex w-1/3 flex-col items-center px-2">
|
|
39
42
|
<UI.Select
|
|
40
|
-
wrapperClass="w-full"
|
|
41
43
|
label={{ name: $t('constructor.props.header') }}
|
|
42
44
|
type="buttons"
|
|
43
45
|
value={Header}
|
|
@@ -49,10 +51,10 @@
|
|
|
49
51
|
/>
|
|
50
52
|
{#if Header.value === 'SET'}
|
|
51
53
|
<UI.Select
|
|
52
|
-
wrapperClass="w-full"
|
|
53
54
|
label={{ name: $t('constructor.props.argument') }}
|
|
54
55
|
type="buttons"
|
|
55
|
-
value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)
|
|
56
|
+
value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument) ??
|
|
57
|
+
$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === '')}
|
|
56
58
|
options={$optionsStore.FULL_ARGUMENT_OPTION}
|
|
57
59
|
onUpdate={(option) => {
|
|
58
60
|
updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
|
|
@@ -71,13 +73,14 @@
|
|
|
71
73
|
<UI.Input
|
|
72
74
|
label={{ name: $t('constructor.props.value') }}
|
|
73
75
|
value={component.properties.eventHandler.Value}
|
|
74
|
-
|
|
76
|
+
help={{ info: $t('constructor.props.value.info') }}
|
|
75
77
|
maxlength={500}
|
|
76
78
|
onUpdate={(value) => updateProperty('eventHandler.Value', value as string, component, onPropertyChange)}
|
|
77
79
|
/>
|
|
78
80
|
{/if}
|
|
79
81
|
<UI.Input
|
|
80
82
|
label={{ name: $t('constructor.props.variables') }}
|
|
83
|
+
disabled={hasValue}
|
|
81
84
|
value={component.properties.eventHandler.Variables.join(' ')}
|
|
82
85
|
help={{ info: $t('constructor.props.variables.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_ ":{}]{0,500}$/ }}
|
|
83
86
|
maxlength={500}
|
|
@@ -98,7 +101,8 @@
|
|
|
98
101
|
type="buttons"
|
|
99
102
|
options={$optionsStore.HEIGHT_OPTIONS}
|
|
100
103
|
value={initialHeight}
|
|
101
|
-
onUpdate={(option) =>
|
|
104
|
+
onUpdate={(option) =>
|
|
105
|
+
updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
|
|
102
106
|
/>
|
|
103
107
|
<UI.Select
|
|
104
108
|
wrapperClass="h-14"
|
|
@@ -106,7 +110,8 @@
|
|
|
106
110
|
type="buttons"
|
|
107
111
|
options={$optionsStore.COLOR_OPTIONS}
|
|
108
112
|
value={initialColor}
|
|
109
|
-
onUpdate={(option) =>
|
|
113
|
+
onUpdate={(option) =>
|
|
114
|
+
updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
|
|
110
115
|
/>
|
|
111
116
|
</div>
|
|
112
117
|
</div>
|
package/dist/FileAttach.svelte
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
<!-- $lib/ElementsUI/FileAttach.svelte -->
|
|
2
1
|
<script lang="ts">
|
|
3
|
-
|
|
2
|
+
import { twMerge } from 'tailwind-merge'
|
|
3
|
+
|
|
4
|
+
export interface IFileInputProps {
|
|
4
5
|
id?: string
|
|
5
6
|
wrapperClass?: string
|
|
6
7
|
label?: { name?: string; class?: string }
|
|
@@ -22,7 +23,7 @@
|
|
|
22
23
|
disabled = false,
|
|
23
24
|
currentImage = $bindable(null),
|
|
24
25
|
onChange = () => {},
|
|
25
|
-
}:
|
|
26
|
+
}: IFileInputProps = $props()
|
|
26
27
|
|
|
27
28
|
let selectedFile = $state<File | null>(null)
|
|
28
29
|
let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
}
|
|
49
50
|
</script>
|
|
50
51
|
|
|
51
|
-
<div class={`flex flex-col items-center
|
|
52
|
+
<div class={twMerge(`flex flex-col items-center`, wrapperClass)}>
|
|
52
53
|
{#if label.name}
|
|
53
54
|
<h5 class={`${label.class}`}>{label.name}</h5>
|
|
54
55
|
{/if}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface
|
|
1
|
+
export interface IFileInputProps {
|
|
2
2
|
id?: string;
|
|
3
3
|
wrapperClass?: string;
|
|
4
4
|
label?: {
|
|
@@ -17,6 +17,6 @@ interface FileInputProps {
|
|
|
17
17
|
currentImage?: string | null;
|
|
18
18
|
onChange?: (event: Event, file: File | null) => void;
|
|
19
19
|
}
|
|
20
|
-
declare const FileAttach: import("svelte").Component<
|
|
20
|
+
declare const FileAttach: import("svelte").Component<IFileInputProps, {}, "currentImage">;
|
|
21
21
|
type FileAttach = ReturnType<typeof FileAttach>;
|
|
22
22
|
export default FileAttach;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import type { IInputProps, UIComponent, ISelectOption } from '../types'
|
|
6
6
|
import * as UI from '..'
|
|
7
7
|
import { optionsStore } from '../options'
|
|
8
|
+
import { twMerge } from 'tailwind-merge'
|
|
8
9
|
|
|
9
10
|
const { component, onPropertyChange } = $props<{
|
|
10
11
|
component: UIComponent & { properties: Partial<IInputProps> }
|
|
@@ -132,9 +133,6 @@
|
|
|
132
133
|
value={component.properties.number.minNum as number}
|
|
133
134
|
type="number"
|
|
134
135
|
onUpdate={(value) => {
|
|
135
|
-
// if ((value as number) >= component.properties.number.maxNum) {
|
|
136
|
-
// value = component.properties.number.maxNum - component.properties.number.step
|
|
137
|
-
// }
|
|
138
136
|
updateProperty('number.minNum', Number(value))
|
|
139
137
|
}}
|
|
140
138
|
/>
|
|
@@ -143,9 +141,6 @@
|
|
|
143
141
|
value={component.properties.number.maxNum as number}
|
|
144
142
|
type="number"
|
|
145
143
|
onUpdate={(value) => {
|
|
146
|
-
// if ((value as number) <= component.properties.number.minNum) {
|
|
147
|
-
// value = component.properties.number.minNum + component.properties.number.step
|
|
148
|
-
// }
|
|
149
144
|
updateProperty('number.maxNum', Number(value))
|
|
150
145
|
}}
|
|
151
146
|
/>
|
|
@@ -190,7 +185,7 @@
|
|
|
190
185
|
type="buttons"
|
|
191
186
|
value={initialAlign}
|
|
192
187
|
options={$optionsStore.ALIGN_OPTIONS}
|
|
193
|
-
onUpdate={(option) => updateProperty('label.class',
|
|
188
|
+
onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value))}
|
|
194
189
|
/>
|
|
195
190
|
<UI.Select
|
|
196
191
|
wrapperClass="h-14"
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import { type UIComponent, type IProgressBarProps, updateProperty } from '../types'
|
|
6
6
|
import * as UI from '..'
|
|
7
7
|
import { optionsStore } from '../options'
|
|
8
|
+
import { twMerge } from 'tailwind-merge'
|
|
8
9
|
|
|
9
10
|
const { component, onPropertyChange } = $props<{
|
|
10
11
|
component: UIComponent & { properties: Partial<IProgressBarProps> }
|
|
@@ -99,7 +100,7 @@
|
|
|
99
100
|
type="buttons"
|
|
100
101
|
value={initialAlign}
|
|
101
102
|
options={$optionsStore.ALIGN_OPTIONS}
|
|
102
|
-
onUpdate={(option) => updateProperty('label.class',
|
|
103
|
+
onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
|
|
103
104
|
/>
|
|
104
105
|
<UI.Select
|
|
105
106
|
wrapperClass="!h-14"
|
|
@@ -107,7 +108,7 @@
|
|
|
107
108
|
type="buttons"
|
|
108
109
|
options={$optionsStore.COLOR_OPTIONS}
|
|
109
110
|
value={initialColor}
|
|
110
|
-
onUpdate={(option) => updateProperty('wrapperClass',
|
|
111
|
+
onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
|
|
111
112
|
/>
|
|
112
113
|
</div>
|
|
113
114
|
</div>
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
import ButtonDelete from '../libIcons/ButtonDelete.svelte'
|
|
8
8
|
import ButtonAdd from '../libIcons/ButtonAdd.svelte'
|
|
9
9
|
import { optionsStore } from '../options.js'
|
|
10
|
+
import { twMerge } from 'tailwind-merge'
|
|
10
11
|
|
|
11
12
|
const { component, onPropertyChange } = $props<{
|
|
12
13
|
component: UIComponent & { properties: Partial<ISelectProps> }
|
|
@@ -68,7 +69,8 @@
|
|
|
68
69
|
<UI.Select
|
|
69
70
|
label={{ name: $t('constructor.props.argument') }}
|
|
70
71
|
type="buttons"
|
|
71
|
-
value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)
|
|
72
|
+
value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument) ??
|
|
73
|
+
$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === '')}
|
|
72
74
|
options={$optionsStore.FULL_ARGUMENT_OPTION}
|
|
73
75
|
onUpdate={(option) => {
|
|
74
76
|
updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
|
|
@@ -124,7 +126,7 @@
|
|
|
124
126
|
type="buttons"
|
|
125
127
|
options={$optionsStore.COLOR_OPTIONS}
|
|
126
128
|
value={initialColor}
|
|
127
|
-
onUpdate={(option) => updateProperty('wrapperClass',
|
|
129
|
+
onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
|
|
128
130
|
/>
|
|
129
131
|
</div>
|
|
130
132
|
<div class="flex w-1/3 flex-col items-center px-2">
|
|
@@ -138,7 +140,7 @@
|
|
|
138
140
|
type="buttons"
|
|
139
141
|
value={initialAlign}
|
|
140
142
|
options={$optionsStore.ALIGN_OPTIONS}
|
|
141
|
-
onUpdate={(option) => updateProperty('label.class',
|
|
143
|
+
onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
|
|
142
144
|
/>
|
|
143
145
|
</div>
|
|
144
146
|
</div>
|
|
@@ -150,9 +152,8 @@
|
|
|
150
152
|
<div class="m-0 flex items-center justify-center gap-2">
|
|
151
153
|
<h4>{$t('constructor.props.options.title')}</h4>
|
|
152
154
|
<UI.Button
|
|
153
|
-
wrapperClass="
|
|
155
|
+
wrapperClass="w-8"
|
|
154
156
|
content={{ icon: ButtonAdd }}
|
|
155
|
-
componentClass="bg-transparent h-10 border-none !shadow-none hover:shadow-none"
|
|
156
157
|
onClick={() => {
|
|
157
158
|
const newOption: ISelectOption = {
|
|
158
159
|
id: crypto.randomUUID(),
|
|
@@ -201,9 +202,8 @@
|
|
|
201
202
|
}}
|
|
202
203
|
/>
|
|
203
204
|
<UI.Button
|
|
204
|
-
wrapperClass="
|
|
205
|
+
wrapperClass="w-8"
|
|
205
206
|
content={{ icon: ButtonDelete }}
|
|
206
|
-
componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
|
|
207
207
|
onClick={() => {
|
|
208
208
|
const options = [...(component.properties?.options || [])]
|
|
209
209
|
options.splice(index, 1)
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
onclick={disabled ? undefined : handleTrackClick}
|
|
170
170
|
>
|
|
171
171
|
<div
|
|
172
|
-
class="absolute h-full {singlePosition === 100 ? '
|
|
172
|
+
class="absolute z-10 h-full {singlePosition === 100 ? ' rounded-full' : 'rounded-l-full'}"
|
|
173
173
|
style={`width: ${singlePosition}%; background-color: var(--bg-color)`}
|
|
174
174
|
></div>
|
|
175
175
|
</div>
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
}}
|
|
188
188
|
onmouseup={disabled ? undefined : () => onUpdate(singleValue)}
|
|
189
189
|
{disabled}
|
|
190
|
-
class="absolute z-20 h-full w-full appearance-none
|
|
190
|
+
class="absolute z-20 h-full w-full appearance-none"
|
|
191
191
|
/>
|
|
192
192
|
<div
|
|
193
193
|
class="pointer-events-none absolute z-30 rounded-full bg-[var(--field-color)]"
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import { type UIComponent, type ISliderProps, updateProperty } from '../types'
|
|
6
6
|
import * as UI from '..'
|
|
7
7
|
import { optionsStore } from '../options'
|
|
8
|
+
import { twMerge } from 'tailwind-merge'
|
|
8
9
|
|
|
9
10
|
const { component, onPropertyChange } = $props<{
|
|
10
11
|
component: UIComponent & { properties: Partial<ISliderProps> }
|
|
@@ -98,7 +99,7 @@
|
|
|
98
99
|
type="buttons"
|
|
99
100
|
value={initialAlign}
|
|
100
101
|
options={$optionsStore.ALIGN_OPTIONS}
|
|
101
|
-
onUpdate={(option) => updateProperty('label.class',
|
|
102
|
+
onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
|
|
102
103
|
/>
|
|
103
104
|
<UI.Select
|
|
104
105
|
wrapperClass="!h-14"
|
|
@@ -106,7 +107,7 @@
|
|
|
106
107
|
type="buttons"
|
|
107
108
|
options={$optionsStore.COLOR_OPTIONS}
|
|
108
109
|
value={initialColor}
|
|
109
|
-
onUpdate={(option) => updateProperty('wrapperClass',
|
|
110
|
+
onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
|
|
110
111
|
/>
|
|
111
112
|
</div>
|
|
112
113
|
</div>
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import { type UIComponent, type ISwitchProps, updateProperty, type ISelectOption } from '../types'
|
|
6
6
|
import * as UI from '..'
|
|
7
7
|
import { optionsStore } from '../options'
|
|
8
|
+
import { twMerge } from 'tailwind-merge'
|
|
8
9
|
|
|
9
10
|
const { component, onPropertyChange } = $props<{
|
|
10
11
|
component: UIComponent & { properties: Partial<ISwitchProps> }
|
|
@@ -82,9 +83,9 @@
|
|
|
82
83
|
wrapperClass="!h-14"
|
|
83
84
|
label={{ name: $t('constructor.props.colors') }}
|
|
84
85
|
type="buttons"
|
|
85
|
-
options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max')}
|
|
86
|
+
options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
|
|
86
87
|
value={initialColor}
|
|
87
|
-
onUpdate={(option) => updateProperty('wrapperClass',
|
|
88
|
+
onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
|
|
88
89
|
/>
|
|
89
90
|
</div>
|
|
90
91
|
</div>
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
import ButtonDelete from '../libIcons/ButtonDelete.svelte'
|
|
8
8
|
import ButtonAdd from '../libIcons/ButtonAdd.svelte'
|
|
9
9
|
import { optionsStore } from '../options'
|
|
10
|
+
import { twMerge } from 'tailwind-merge'
|
|
10
11
|
|
|
11
12
|
const { component, onPropertyChange } = $props<{
|
|
12
13
|
component: UIComponent & { properties: Partial<ITableProps<object>> }
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
type="buttons"
|
|
80
81
|
options={$optionsStore.COLOR_OPTIONS}
|
|
81
82
|
value={initialColor}
|
|
82
|
-
onUpdate={(option) => updateProperty('wrapperClass',
|
|
83
|
+
onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
|
|
83
84
|
/>
|
|
84
85
|
</div>
|
|
85
86
|
<div class="flex w-1/3 flex-col px-2">
|
|
@@ -93,7 +94,7 @@
|
|
|
93
94
|
type="buttons"
|
|
94
95
|
value={initialAlign}
|
|
95
96
|
options={$optionsStore.ALIGN_OPTIONS}
|
|
96
|
-
onUpdate={(option) => updateProperty('label.class',
|
|
97
|
+
onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
|
|
97
98
|
/>
|
|
98
99
|
</div>
|
|
99
100
|
</div>
|
|
@@ -101,18 +102,17 @@
|
|
|
101
102
|
<hr class="border-[var(--border-color)]" />
|
|
102
103
|
|
|
103
104
|
<!-- Настройки столбцов таблицы -->
|
|
104
|
-
<div
|
|
105
|
-
<div class="
|
|
105
|
+
<div>
|
|
106
|
+
<div class=" flex items-center justify-center gap-2">
|
|
106
107
|
<h4>{$t('constructor.props.table.columns')}</h4>
|
|
107
108
|
<UI.Button
|
|
108
|
-
wrapperClass="
|
|
109
|
+
wrapperClass="w-8"
|
|
109
110
|
content={{ icon: ButtonAdd }}
|
|
110
|
-
componentClass="bg-transparent h-10 border-none !shadow-none hover:shadow-none"
|
|
111
111
|
onClick={() => {
|
|
112
112
|
const newColumn: ITableHeader<any> = {
|
|
113
113
|
key: `column${(component.properties.header?.length || 0) + 1}`,
|
|
114
114
|
label: { name: `Column ${(component.properties.header?.length || 0) + 1}`, class: '' },
|
|
115
|
-
width: '
|
|
115
|
+
width: '10%',
|
|
116
116
|
sortable: false,
|
|
117
117
|
}
|
|
118
118
|
const headers = [...(component.properties.header || []), newColumn]
|
|
@@ -122,36 +122,44 @@
|
|
|
122
122
|
</div>
|
|
123
123
|
|
|
124
124
|
{#each component.properties.header as column, columnIndex (columnIndex)}
|
|
125
|
-
<div class="
|
|
125
|
+
<div class="mr-2 flex items-end justify-around gap-6">
|
|
126
126
|
<UI.Input
|
|
127
127
|
label={{ name: $t('constructor.props.table.columns.key') }}
|
|
128
|
-
wrapperClass="!w-2/10"
|
|
129
128
|
value={column.key}
|
|
130
129
|
help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
|
|
131
|
-
onUpdate={(value) =>
|
|
130
|
+
onUpdate={(value) => {
|
|
131
|
+
updateTableHeader(columnIndex, 'key', value)
|
|
132
|
+
let newBody = component.properties.body.map((row: object) => {
|
|
133
|
+
const newRow: Partial<object> = {}
|
|
134
|
+
component.properties.header.forEach((col: ITableHeader<any>) => {
|
|
135
|
+
const key = col.key as keyof object
|
|
136
|
+
newRow[key] = row[key] ?? `Value of ${key}`
|
|
137
|
+
})
|
|
138
|
+
return newRow
|
|
139
|
+
})
|
|
140
|
+
updateProperty('body', newBody, component, onPropertyChange)
|
|
141
|
+
}}
|
|
132
142
|
/>
|
|
133
143
|
<UI.Input
|
|
134
144
|
label={{ name: $t('constructor.props.table.columns.label') }}
|
|
135
|
-
wrapperClass="!w-2/10"
|
|
136
145
|
value={column.label.name}
|
|
137
146
|
onUpdate={(value) => updateTableHeader(columnIndex, 'label.name', value)}
|
|
138
147
|
/>
|
|
139
148
|
<UI.Input
|
|
140
149
|
label={{ name: $t('constructor.props.table.columns.width') }}
|
|
141
|
-
|
|
142
|
-
value={column.width}
|
|
143
|
-
onUpdate={(value) => updateTableHeader(columnIndex, 'width', value)}
|
|
150
|
+
type="number"
|
|
151
|
+
value={Number(column.width.replace('%', ''))}
|
|
152
|
+
onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
|
|
144
153
|
/>
|
|
145
154
|
<UI.Switch
|
|
146
|
-
wrapperClass="
|
|
155
|
+
wrapperClass="w-2/10"
|
|
147
156
|
label={{ name: $t('constructor.props.table.columns.sortable') }}
|
|
148
157
|
value={column.sortable ? 2 : 1}
|
|
149
158
|
onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
|
|
150
159
|
/>
|
|
151
160
|
<UI.Button
|
|
152
|
-
wrapperClass="w-
|
|
161
|
+
wrapperClass="w-8"
|
|
153
162
|
content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
|
|
154
|
-
componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
|
|
155
163
|
onClick={() => {
|
|
156
164
|
const newButton = {
|
|
157
165
|
name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
|
|
@@ -164,9 +172,8 @@
|
|
|
164
172
|
}}
|
|
165
173
|
/>
|
|
166
174
|
<UI.Button
|
|
167
|
-
wrapperClass="w-
|
|
168
|
-
content={{ icon: ButtonDelete
|
|
169
|
-
componentClass=" bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
|
|
175
|
+
wrapperClass="w-8"
|
|
176
|
+
content={{ icon: ButtonDelete }}
|
|
170
177
|
onClick={() => {
|
|
171
178
|
const headers = [...(component.properties.header || [])]
|
|
172
179
|
headers.splice(columnIndex, 1)
|
|
@@ -218,12 +225,7 @@
|
|
|
218
225
|
updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
|
|
219
226
|
}}
|
|
220
227
|
/>
|
|
221
|
-
<UI.Button
|
|
222
|
-
wrapperClass="w-10 m"
|
|
223
|
-
content={{ icon: ButtonDelete }}
|
|
224
|
-
componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
|
|
225
|
-
onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)}
|
|
226
|
-
/>
|
|
228
|
+
<UI.Button wrapperClass="w-8" content={{ icon: ButtonDelete }} onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)} />
|
|
227
229
|
</div>
|
|
228
230
|
{/each}
|
|
229
231
|
</div>
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import * as UI from '../index'
|
|
6
6
|
import { optionsStore } from '../options'
|
|
7
7
|
import { getContext } from 'svelte'
|
|
8
|
+
import { twMerge } from 'tailwind-merge'
|
|
8
9
|
|
|
9
10
|
const { component, onPropertyChange } = $props<{
|
|
10
11
|
component: UIComponent & { properties: Partial<ITextFieldProps> }
|
|
@@ -68,15 +69,15 @@
|
|
|
68
69
|
type="buttons"
|
|
69
70
|
value={initialAlign}
|
|
70
71
|
options={$optionsStore.ALIGN_OPTIONS}
|
|
71
|
-
onUpdate={(option) => updateProperty('content.class',
|
|
72
|
+
onUpdate={(option) => updateProperty('content.class', twMerge(component.properties.content.class, option.value), component, onPropertyChange)}
|
|
72
73
|
/>
|
|
73
74
|
<UI.Select
|
|
74
75
|
wrapperClass="!h-14"
|
|
75
|
-
label={{ name: $t('constructor.props.
|
|
76
|
+
label={{ name: $t('constructor.props.textcolors') }}
|
|
76
77
|
type="buttons"
|
|
77
78
|
options={$optionsStore.TEXT_COLOR_OPTIONS}
|
|
78
79
|
value={initialColor}
|
|
79
|
-
onUpdate={(option) => updateProperty('wrapperClass',
|
|
80
|
+
onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
|
|
80
81
|
/>
|
|
81
82
|
</div>
|
|
82
83
|
<div class="flex w-1/3 flex-col px-2">
|
|
@@ -37,17 +37,19 @@ const translations = {
|
|
|
37
37
|
'constructor.props.size': 'Размер',
|
|
38
38
|
'constructor.props.header': 'Заголовок пакета',
|
|
39
39
|
'constructor.props.argument': 'Аргумент',
|
|
40
|
-
'constructor.props.argument.info': '
|
|
40
|
+
'constructor.props.argument.info': 'Пользовательский аргумент (a-z, A-Z, 0-9, -_!)',
|
|
41
41
|
'constructor.props.variables': 'Перечень переменных',
|
|
42
42
|
'constructor.props.variables.info': 'Поле для ввода имён переменных, разделенных пробелами',
|
|
43
43
|
'constructor.props.value': 'Значение',
|
|
44
|
-
'constructor.props.value.info': 'Поле для ввода Value пакета',
|
|
44
|
+
'constructor.props.value.info': 'Поле для ввода Value пакета в формате JSON',
|
|
45
45
|
'constructor.props.align': 'Выравнивание',
|
|
46
46
|
'constructor.props.image': 'Фоновое изображение',
|
|
47
|
+
'constructor.props.labelicon': 'Иконка заголовка',
|
|
47
48
|
'constructor.props.removeimage': 'Удалить изображение',
|
|
48
49
|
'constructor.props.name': 'Текст',
|
|
49
50
|
'constructor.props.height': 'Высота',
|
|
50
51
|
'constructor.props.colors': 'Цвет фона',
|
|
52
|
+
'constructor.props.textcolors': 'Цвет текста',
|
|
51
53
|
'constructor.props.maxlenght': 'Максимальная длина',
|
|
52
54
|
'constructor.props.regexp': 'Выражение валидации',
|
|
53
55
|
'constructor.props.regexp.info': 'Введите RegExp без /.../ (например: ^\\d+$)',
|
package/dist/options.js
CHANGED
|
@@ -49,13 +49,13 @@ export const optionsStore = derived(t, ($t) => {
|
|
|
49
49
|
{ id: id(), value: 'massive', name: $t('constructor.props.type.massive') },
|
|
50
50
|
],
|
|
51
51
|
COLOR_OPTIONS: [
|
|
52
|
-
{ id: id(), name: '', value: 'bg-gray', class: 'bg-gray' },
|
|
53
52
|
{ id: id(), name: '', value: 'bg-max', class: 'bg-max' },
|
|
54
53
|
{ id: id(), name: '', value: 'bg-red', class: 'bg-red' },
|
|
55
54
|
{ id: id(), name: '', value: 'bg-yellow', class: 'bg-yellow' },
|
|
56
55
|
{ id: id(), name: '', value: 'bg-green', class: 'bg-green' },
|
|
57
|
-
{ id: id(), name: '', value: 'bg-
|
|
56
|
+
{ id: id(), name: '', value: 'bg-blue', class: 'bg-blue' },
|
|
58
57
|
{ id: id(), name: '', value: 'bg-purple', class: 'bg-purple' },
|
|
58
|
+
{ id: id(), name: '', value: 'bg-gray', class: 'bg-gray' },
|
|
59
59
|
],
|
|
60
60
|
TEXT_COLOR_OPTIONS: [
|
|
61
61
|
{ id: id(), name: '', value: 'text-[#333] dark:text-[#e2e3e7]', class: 'bg-[var(--shadow-color)] dark:bg-[#e2e3e7] ' },
|
|
@@ -63,6 +63,7 @@ export const optionsStore = derived(t, ($t) => {
|
|
|
63
63
|
{ id: id(), name: '', value: 'text-yellow-500 dark:text-yellow-400', class: 'bg-yellow-500 dark:bg-yellow-400' },
|
|
64
64
|
{ id: id(), name: '', value: 'text-green-500 dark:text-green-400', class: 'bg-green-500 dark:bg-green-400' },
|
|
65
65
|
{ id: id(), name: '', value: 'text-blue-500 dark:text-blue-400', class: 'bg-blue-500 dark:bg-blue-400' },
|
|
66
|
+
{ id: id(), name: '', value: 'text-purple-500 dark:text-purple-400', class: 'bg-purple-500 dark:bg-purple-400' },
|
|
66
67
|
{ id: id(), name: '', value: 'text-gray-500 dark:text-gray-400', class: 'bg-gray-500 dark:bg-gray-400' },
|
|
67
68
|
],
|
|
68
69
|
ALIGN_OPTIONS: [
|
package/dist/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "poe-svelte-ui-lib",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
"build": "vite build",
|
|
9
9
|
"preview": "vite preview",
|
|
10
10
|
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
11
|
-
"CheckUpdate": "npx npm-check-updates -u && npm install"
|
|
11
|
+
"CheckUpdate": "npx npm-check-updates -u && npm install",
|
|
12
|
+
"FiLeS": "tsx src/lib/Accordion/IconsLib/iconsLib.ts"
|
|
12
13
|
},
|
|
13
14
|
"svelte": "./dist/index.js",
|
|
14
15
|
"types": "./dist/index.d.ts",
|
|
@@ -38,12 +39,14 @@
|
|
|
38
39
|
"prettier-plugin-tailwindcss": "^0.6.14",
|
|
39
40
|
"tailwind-merge": "^3.3.1",
|
|
40
41
|
"tailwindcss": "^4.1.14",
|
|
42
|
+
"tsx": "^4.20.6",
|
|
41
43
|
"typescript": "^5.9.3"
|
|
42
44
|
},
|
|
43
45
|
"devDependencies": {
|
|
44
46
|
"@sveltejs/kit": "^2.46.4",
|
|
45
47
|
"@sveltejs/package": "^2.5.4",
|
|
46
48
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
49
|
+
"@types/node": "^24.7.2",
|
|
47
50
|
"publint": "^0.3.14",
|
|
48
51
|
"svelte": "^5.39.11",
|
|
49
52
|
"svelte-preprocess": "^6.0.3",
|