poe-svelte-ui-lib 0.2.0 → 1.0.0

package/dist/TextField/TextFieldProps.svelte

@@ -0,0 +1,92 @@
+<!-- $lib/ElementsUI/GridAccordionProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { ITextFieldProps, UIComponent } from '../types'
+  import * as UI from '../index'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ITextFieldProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.type))
+
+  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 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) => {
+    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 px-2">
+      <UI.Input
+        label={{ name: $t('service.constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+        type="text"
+      />
+      <UI.Select
+        label={{ name: $t('service.constructor.props.type') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.TEXTFIELD_SIZE_OPTIONS}
+        onUpdate={(item) => updateProperty('type', item.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.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => handleLabelAlign(option.value as string)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Switch
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.bold') }}
+        value={component.properties.bold ? 2 : 1}
+        onChange={(value) => updateProperty('bold', value === 2)}
+      />
+      <UI.Switch
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.italic') }}
+        value={component.properties.italic ? 2 : 1}
+        onChange={(value) => updateProperty('italic', value === 2)}
+      />
+    </div>
+  </div>
+{/if}

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

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

package/dist/appIcons/ButtonAdd.svelte

@@ -0,0 +1,10 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+  ><path fill="currentColor" d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" /><path
+    fill="currentColor"
+    fill-rule="evenodd"
+    d="M12.057 1.25h-.114c-2.309 0-4.118 0-5.53.19c-1.444.194-2.584.6-3.479 1.494c-.895.895-1.3 2.035-1.494 3.48c-.19 1.411-.19 3.22-.19 5.529v.114c0 2.309 0 4.118.19 5.53c.194 1.444.6 2.584 1.494 3.479c.895.895 2.035 1.3 3.48 1.494c1.411.19 3.22.19 5.529.19h.114c2.309 0 4.118 0 5.53-.19c1.444-.194 2.584-.6 3.479-1.494c.895-.895 1.3-2.035 1.494-3.48c.19-1.411.19-3.22.19-5.529v-.114c0-2.309 0-4.118-.19-5.53c-.194-1.444-.6-2.584-1.494-3.479c-.895-.895-2.035-1.3-3.48-1.494c-1.411-.19-3.22-.19-5.529-.19M3.995 3.995c.57-.57 1.34-.897 2.619-1.069c1.3-.174 3.008-.176 5.386-.176s4.086.002 5.386.176c1.279.172 2.05.5 2.62 1.069c.569.57.896 1.34 1.068 2.619c.174 1.3.176 3.008.176 5.386s-.002 4.086-.176 5.386c-.172 1.279-.5 2.05-1.069 2.62c-.57.569-1.34.896-2.619 1.068c-1.3.174-3.008.176-5.386.176s-4.086-.002-5.386-.176c-1.279-.172-2.05-.5-2.62-1.069c-.569-.57-.896-1.34-1.068-2.619c-.174-1.3-.176-3.008-.176-5.386s.002-4.086.176-5.386c.172-1.279.5-2.05 1.069-2.62"
+    clip-rule="evenodd"
+  /></svg
+>

package/dist/appIcons/ButtonAdd.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonAdd: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonAdd = InstanceType<typeof ButtonAdd>;
+export default ButtonAdd;

package/dist/appIcons/ButtonDelete.svelte

@@ -0,0 +1,13 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+  ><path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    d="m19.5 5.5l-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584c-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5M3 5.5h18m-4.944 0l-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5m1.447 11v-6m5 6v-6"
+    color="currentColor"
+  /></svg
+>

package/dist/appIcons/ButtonDelete.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonDelete: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonDelete = InstanceType<typeof ButtonDelete>;
+export default ButtonDelete;

package/dist/appIcons/LoaderRotate.svelte

@@ -0,0 +1,9 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" viewBox="0 0 24 24" class="opacity-70"
+  ><path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity=".4" /><path
+    fill="currentColor"
+    d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"
+    ><animateTransform attributeName="transform" dur="0.8s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate" /></path
+  ></svg
+>

package/dist/appIcons/LoaderRotate.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LoaderRotate: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LoaderRotate = InstanceType<typeof LoaderRotate>;
+export default LoaderRotate;

package/dist/index.d.ts

@@ -1 +1,26 @@
-export { default as Button } from './Button.svelte';
+export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as AccordionProps } from './Accordion/AccordionProps.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as ButtonProps } from './Button/ButtonProps.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
+export { default as FileAttach } from './FileAttach/FileAttach.svelte';
+export { default as Graph } from './Graph/Graph.svelte';
+export { default as GraphProps } from './Graph/GraphProps.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputProps } from './Input/InputProps.svelte';
+export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
+export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as SelectProps } from './Select/SelectProps.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
+export { default as SliderProps } from './Slider/SliderProps.svelte';
+export { default as Switch } from './Switch/Switch.svelte';
+export { default as SwitchProps } from './Switch/SwitchProps.svelte';
+export { default as Table } from './Table/Table.svelte';
+export { default as TableProps } from './Table/TableProps.svelte';
+export { default as TextField } from './TextField/TextField.svelte';
+export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as MessageModal } from './MessageModal.svelte';
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, } from './types';

package/dist/index.js

@@ -1,2 +1,27 @@
-/* $lib/index.ts */
-export { default as Button } from './Button.svelte';
+/* Реэкспорт всех UI компонентов для удобного импорта */
+export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as AccordionProps } from './Accordion/AccordionProps.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as ButtonProps } from './Button/ButtonProps.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
+export { default as FileAttach } from './FileAttach/FileAttach.svelte';
+export { default as Graph } from './Graph/Graph.svelte';
+export { default as GraphProps } from './Graph/GraphProps.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputProps } from './Input/InputProps.svelte';
+export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
+export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as SelectProps } from './Select/SelectProps.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
+export { default as SliderProps } from './Slider/SliderProps.svelte';
+export { default as Switch } from './Switch/Switch.svelte';
+export { default as SwitchProps } from './Switch/SwitchProps.svelte';
+export { default as Table } from './Table/Table.svelte';
+export { default as TableProps } from './Table/TableProps.svelte';
+export { default as TextField } from './TextField/TextField.svelte';
+export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as MessageModal } from './MessageModal.svelte';
+export {} from './types';

package/dist/locales/CircleFlagsEn.svelte

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" 
+  ><clipPath id="svgIDa"><circle cx="256" cy="256" r="256" /></clipPath><g clip-path="url(#svgIDa)"
+    ><path
+      fill="#eee"
+      d="m0 0l8 16l-8 15v16l32 65l-32 64v32l32 48l-32 48v32l32 64l-32 65v47l16-8l15 8h16l65-32l64 32h32l48-32l48 32h32l64-32l65 32h47l-8-15l8-16v-16l-32-65l32-64v-32l-32-48l32-48v-32l-32-64l32-65V0l-15 8l-16-8h-16l-65 32l-64-32h-32l-48 32l-48-32h-32l-64 32L47 0H0z"
+    /><path
+      fill="#0052b4"
+      d="m47 0l129 129V0Zm289 0v129L465 0ZM0 47v129h129Zm512 0L383 176h129ZM0 336v129l129-129Zm383 0l129 129V336Zm-47 47v129h129zm-160 0L47 512h129Z"
+    /><path fill="#d80027" d="M208 0v208H0v96h208v208h96V304h208v-96H304V0h-96z" /><path
+      fill="#d80027"
+      d="m336 336l176 176v-31L367 336Zm0-160L512 0h-31L336 145Zm-160 0L0 0v31l145 145zm0 160L0 512h31l145-145Z"
+    /></g
+  ></svg
+>

package/dist/locales/CircleFlagsEn.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CircleFlagsEn;
+type CircleFlagsEn = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CircleFlagsEn: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/locales/CircleFlagsRu.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
+  ><mask id="circleFlagsRu0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsRu0)"
+    ><path fill="#0052b4" d="M512 170v172l-256 32L0 342V170l256-32z" /><path fill="#eee" d="M512 0v170H0V0Z" /><path
+      fill="#d80027"
+      d="M512 342v170H0V342Z"
+    /></g
+  ></svg
+>

package/dist/locales/CircleFlagsRu.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CircleFlagsRu;
+type CircleFlagsRu = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CircleFlagsRu: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/locales/CircleFlagsZh.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" 
+  ><mask id="circleFlagsCn0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsCn0)"
+    ><path fill="#d80027" d="M0 0h512v512H0z" /><path
+      fill="#ffda44"
+      d="m140.1 155.8l22.1 68h71.5l-57.8 42.1l22.1 68l-57.9-42l-57.9 42l22.2-68l-57.9-42.1H118zm163.4 240.7l-16.9-20.8l-25 9.7l14.5-22.5l-16.9-20.9l25.9 6.9l14.6-22.5l1.4 26.8l26 6.9l-25.1 9.6zm33.6-61l8-25.6l-21.9-15.5l26.8-.4l7.9-25.6l8.7 25.4l26.8-.3l-21.5 16l8.6 25.4l-21.9-15.5zm45.3-147.6L370.6 212l19.2 18.7l-26.5-3.8l-11.8 24l-4.6-26.4l-26.6-3.8l23.8-12.5l-4.6-26.5l19.2 18.7zm-78.2-73l-2 26.7l24.9 10.1l-26.1 6.4l-1.9 26.8l-14.1-22.8l-26.1 6.4l17.3-20.5l-14.2-22.7l24.9 10.1z"
+    /></g
+  ></svg
+>

package/dist/locales/CircleFlagsZh.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CircleFlagsZh;
+type CircleFlagsZh = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CircleFlagsZh: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/locales/i18n.d.ts

@@ -0,0 +1,10 @@
+import { type Readable } from 'svelte/store';
+export declare const Language: import("svelte/store").Writable<string>;
+export declare function setLanguage(newLang: string): void;
+export declare const LOCALES: {
+    id: string;
+    name: string;
+    value: string;
+    component: import("svelte/legacy").LegacyComponentType;
+}[];
+export declare const t: Readable<(key: string) => string>;

package/dist/locales/i18n.js

@@ -0,0 +1,36 @@
+import { derived } from 'svelte/store';
+import { writable } from 'svelte/store';
+import translations from './translations';
+import CircleFlagsRu from './CircleFlagsRu.svelte';
+import CircleFlagsEn from './CircleFlagsEn.svelte';
+import CircleFlagsZh from './CircleFlagsZh.svelte';
+/* Язык по умолчанию */
+let initialLanguage = 'ru';
+/* Проверяем, доступен ли localStorage */
+if (typeof window !== 'undefined') {
+    initialLanguage = localStorage.getItem('AppLanguage') || navigator.language?.split('-')[0]?.toLowerCase() || 'ru';
+    const supported = ['ru', 'en', 'zh'];
+    if (!supported.includes(initialLanguage)) {
+        initialLanguage = 'ru';
+    }
+}
+/* Создаем хранилище с начальным значением языка */
+export const Language = writable(initialLanguage);
+/* Функция для изменения языка */
+export function setLanguage(newLang) {
+    if (typeof window !== 'undefined') {
+        localStorage.setItem('AppLanguage', newLang);
+    }
+    Language.set(newLang);
+}
+/* Поддерживаемые языки (код, название языка, флаг) */
+export const LOCALES = [
+    { id: 'app-language-ru', name: 'Русский', value: 'ru', component: CircleFlagsRu },
+    { id: 'app-language-en', name: 'English', value: 'en', component: CircleFlagsEn },
+    { id: 'app-language-zh', name: '中国人', value: 'zh', component: CircleFlagsZh },
+];
+/* Функция для перевода для текущего языка */
+function translate(locale, key) {
+    return translations[locale]?.[key] || key;
+}
+export const t = derived(Language, ($lang) => (key) => translate($lang, key));

package/dist/locales/translations.d.ts

@@ -0,0 +1,7 @@
+interface Translations {
+    [language: string]: {
+        [key: string]: string;
+    };
+}
+declare const translations: Translations;
+export default translations;