poe-svelte-ui-lib 1.75.0 → 1.76.0

package/dist/FileAttach/FileAttach.svelte

@@ -2,6 +2,10 @@
   import { T } from "../locales/i18n"
   import type { IFileAttachProps } from "../types"
   import { twMerge } from "tailwind-merge"
+  import Button from "../Button/Button.svelte"
+
+  /* Иконка «открыть файл» для type "button" — документ со стрелкой вверх, контур 1.75 как у остальных кнопок */
+  const OPEN_FILE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>`
 
   let {
     id = crypto.randomUUID(),
@@ -13,6 +17,8 @@
     imageSize = { height: "10rem", width: "10rem", fitMode: "cover", form: "square" },
     disabled = false,
     currentImage = $bindable(""),
+    info,
+    icon,
     onChange = () => {},
   }: IFileAttachProps = $props()
 
@@ -45,6 +51,8 @@
     }
 
     onChange(event, file)
+    /* Кнопка «Открыть файл» — повторный выбор того же файла тоже должен срабатывать */
+    if (type === "button") input.value = ""
   }
 
   const triggerFileInput = () => {
@@ -60,7 +68,11 @@
     <span class={twMerge(`w-full text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</span>
   {/if}
 
-  {#if type === "image"}
+  {#if type === "button"}
+    <!-- Иконочная кнопка с подсказкой, как UI.Button; выбор файла — скрытый input за ней -->
+    <Button {componentClass} {disabled} content={{ icon: icon ?? OPEN_FILE_ICON, info }} onClick={triggerFileInput} />
+    <input id={ID} type="file" class="hidden" {accept} {disabled} onchange={handleFileChange} />
+  {:else if type === "image"}
     <div class="relative">
       <button
         class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-[12px]'}

package/dist/FileAttach/README.md

@@ -17,6 +17,18 @@
 
 ## Особенности
 
+- `type="button"` — иконочная кнопка «Открыть файл» (скрытый `input` за `UI.Button`) с подсказкой `info`, для панелей инструментов: открыть файл для редактирования рядом с кнопками «Сохранить в файл», «Загрузить с сервера»; сохранение в файл — обычная `UI.Button`
+
+```svelte
+<UI.FileAttach
+  type="button"
+  accept=".yaml,.gz"
+  componentClass={TOOL_BUTTON}
+  info={{ text: "Открыть файл", side: "top" }}
+  onChange={(event, file) => open(file)}
+/>
+```
+
 - Для списка файлов, удаления и прогресса закачки используйте виджет «Файловая система»
 
 ### Адаптивность
@@ -35,24 +47,26 @@
 
 ## Пропсы
 
-| Название            | Тип                                          | По умолчанию          | Описание                                                         |
-| ------------------- | -------------------------------------------- | --------------------- | ---------------------------------------------------------------- |
-| `id`                | `string`                                     | `crypto.randomUUID()` | Уникальный идентификатор компонента                              |
-| `wrapperClass`      | `string`                                     | `""`                  | Дополнительные CSS-классы для обертки компонента                 |
-| `componentClass`    | `string`                                     | `""`                  | Дополнительные CSS-классы для элемента с именем выбранного файла |
-| `label`             | `object`                                     | `-`                   | Настройки заголовка компонента                                   |
-| `label.name`        | `string`                                     | `""`                  | Текст заголовка компонента                                       |
-| `label.class`       | `string`                                     | `""`                  | CSS-классы для стилизации текста заголовка                       |
-| `type`              | `"file" \| "image"`                          | `"file"`              | Тип компонента (файл или изображение)                            |
-| `accept`            | `string`                                     | `"*/*"`               | MIME-типы файлов, которые можно выбрать                          |
-| `imageSize`         | `object`                                     | `-`                   | Настройки отображения изображения                                |
-| `imageSize.height`  | `string`                                     | `"10rem"`             | Высота области отображения изображения                           |
-| `imageSize.width`   | `string`                                     | `"10rem"`             | Ширина области отображения изображения                           |
-| `imageSize.fitMode` | `"cover" \| "contain"`                       | `"cover"`             | Режим масштабирования изображения                                |
-| `imageSize.form`    | `"square" \| "circle"`                       | `"square"`            | Форма области отображения изображения                            |
-| `disabled`          | `boolean`                                    | `false`               | Состояние отключения компонента                                  |
-| `currentImage`      | `string \| null`                             | `""`                  | Текущее изображение (для связывания)                             |
-| `onChange`          | `(event: Event, file: File \| null) => void` | `() => {}`            | Обработчик изменения файла                                       |
+| Название            | Тип                                          | По умолчанию          | Описание                                                                           |
+| ------------------- | -------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------- |
+| `id`                | `string`                                     | `crypto.randomUUID()` | Уникальный идентификатор компонента                                                |
+| `wrapperClass`      | `string`                                     | `""`                  | Дополнительные CSS-классы для обертки компонента                                   |
+| `componentClass`    | `string`                                     | `""`                  | Дополнительные CSS-классы для элемента с именем выбранного файла                   |
+| `label`             | `object`                                     | `-`                   | Настройки заголовка компонента                                                     |
+| `label.name`        | `string`                                     | `""`                  | Текст заголовка компонента                                                         |
+| `label.class`       | `string`                                     | `""`                  | CSS-классы для стилизации текста заголовка                                         |
+| `type`              | `"file" \| "image" \| "button"`              | `"file"`              | Тип компонента: поле выбора файла, изображение или иконочная кнопка «Открыть файл» |
+| `info`              | `{ text, side }`                             | `-`                   | Только `button`: всплывающая подсказка, как у `UI.Button`                          |
+| `icon`              | `Component \| string`                        | документ со стрелкой  | Только `button`: своя иконка (компонент или SVG-строка)                            |
+| `accept`            | `string`                                     | `"*/*"`               | MIME-типы файлов, которые можно выбрать                                            |
+| `imageSize`         | `object`                                     | `-`                   | Настройки отображения изображения                                                  |
+| `imageSize.height`  | `string`                                     | `"10rem"`             | Высота области отображения изображения                                             |
+| `imageSize.width`   | `string`                                     | `"10rem"`             | Ширина области отображения изображения                                             |
+| `imageSize.fitMode` | `"cover" \| "contain"`                       | `"cover"`             | Режим масштабирования изображения                                                  |
+| `imageSize.form`    | `"square" \| "circle"`                       | `"square"`            | Форма области отображения изображения                                              |
+| `disabled`          | `boolean`                                    | `false`               | Состояние отключения компонента                                                    |
+| `currentImage`      | `string \| null`                             | `""`                  | Текущее изображение (для связывания)                                               |
+| `onChange`          | `(event: Event, file: File \| null) => void` | `() => {}`            | Обработчик изменения файла                                                         |
 
 ### Колбэки
 

package/dist/WidgetMap/WidgetMap.svelte

@@ -70,6 +70,15 @@
   let boards: Board[] = $state([])
   let now = $state(Date.now())
   let mapInstance: any = $state()
+  /* Вид карты (центр, масштаб, поворот) переживает сворачивание: тело виджета пересоздаёт карту, и она открывается там, где её оставили */
+  let view = $state.raw({ center: { lat: 30, lng: 0 }, zoom: 1.5, bearing: 0 })
+  $effect(() => {
+    const map = mapInstance
+    if (!map) return
+    const save = () => (view = { center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing() })
+    map.on("moveend", save)
+    return () => map.off("moveend", save)
+  })
   let isCopied = $state(false)
   let isDarkMode = $state(false)
 
@@ -211,8 +220,9 @@
         bind:map={mapInstance}
         class="h-full w-full overflow-hidden rounded-[14px] border border-(--hairline-color)"
         style={isDarkMode ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json" : "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"}
-        zoom={1.5}
-        center={{ lat: 30, lng: 0 }}
+        zoom={view.zoom}
+        center={view.center}
+        bearing={view.bearing}
         maxPitch={0}
       >
         <NavigationControl />

package/dist/WidgetMap/mapWrapper/Line.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy } from "svelte"
+  import { onDestroy, untrack } from "svelte"
   import { getMapContext } from "./contexts.svelte.js"
 
   interface Props {
@@ -23,31 +23,36 @@
     properties: {},
   })
 
+  /* Источник и слой — один раз; пока стиль карты грузится, добавление ждёт в очереди waitForStyleLoaded */
   $effect(() => {
     if (!mapCtx.map || added) return
-
-    mapCtx.addSource(id, { type: "geojson", data: toGeoJSON() })
-    mapCtx.addLayer({
-      id,
-      type: "line",
-      source: id,
-      layout: { "line-join": "round", "line-cap": "round" },
-      paint: { "line-color": color, "line-width": width, "line-opacity": opacity },
+    untrack(() => {
+      mapCtx.addSource(id, { type: "geojson", data: toGeoJSON() })
+      mapCtx.addLayer({
+        id,
+        type: "line",
+        source: id,
+        layout: { "line-join": "round", "line-cap": "round" },
+        paint: { "line-color": color, "line-width": width, "line-opacity": opacity },
+      })
     })
     added = true
   })
 
+  /* Координаты и оформление читаются до любых проверок — иначе эффект не подписывается на них и, запущенный до загрузки стиля, больше не срабатывает */
   $effect(() => {
-    if (!added || !mapCtx.map) return
-    const source = mapCtx.map.getSource(id) as any
-    source?.setData(toGeoJSON())
+    const data = toGeoJSON()
+    if (!added) return
+    mapCtx.waitForStyleLoaded((map) => (map.getSource(id) as any)?.setData(data))
   })
 
   $effect(() => {
-    if (!added || !mapCtx.map || !mapCtx.map.getLayer(id)) return
-    mapCtx.map.setPaintProperty(id, "line-color", color)
-    mapCtx.map.setPaintProperty(id, "line-width", width)
-    mapCtx.map.setPaintProperty(id, "line-opacity", opacity)
+    const paint = { "line-color": color, "line-width": width, "line-opacity": opacity }
+    if (!added) return
+    mapCtx.waitForStyleLoaded((map) => {
+      if (!map.getLayer(id)) return
+      for (const [name, value] of Object.entries(paint)) map.setPaintProperty(id, name, value)
+    })
   })
 
   onDestroy(() => {

package/dist/WidgetMap/mapWrapper/MapLibre.svelte

@@ -9,6 +9,7 @@
     style?: any | string
     zoom?: number
     center?: any
+    bearing?: number
     maxPitch?: number
     map?: any
     children?: Snippet<[any]>
@@ -19,6 +20,7 @@
     style = { version: 8, sources: {}, layers: [] },
     zoom = $bindable(undefined),
     center = $bindable(undefined),
+    bearing = 0,
     maxPitch = 60,
     map = $bindable(undefined),
     children,
@@ -45,13 +47,18 @@
     target.on("sourcedata", tryCollapse)
   }
 
+  /* Стиль, с которым создана или на который переключена карта — setStyle только при его реальной смене */
+  let appliedStyle: any = undefined
+
   const createMap = () => {
     if (!window.maplibregl || map || !container) return
+    appliedStyle = style
     map = new window.maplibregl.Map({
       container,
       style,
       zoom,
       center,
+      bearing,
       maxPitch,
       attributionControl: { compact: true },
     })
@@ -63,7 +70,8 @@
   $effect(createMap)
 
   $effect(() => {
-    if (map && style) {
+    if (map && style && style !== appliedStyle) {
+      appliedStyle = style
       mapCtx.setStyle(style)
     }
   })

package/dist/WidgetMap/mapWrapper/MapLibre.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     style?: any | string;
     zoom?: number;
     center?: any;
+    bearing?: number;
     maxPitch?: number;
     map?: any;
     children?: Snippet<[any]>;

package/dist/types.d.ts

@@ -116,8 +116,13 @@ export interface IFileAttachProps {
         name?: string;
         class?: string;
     };
-    type?: "file" | "image";
+    type?: "file" | "image" | "button";
     accept?: string;
+    info?: {
+        text: string;
+        side: "top" | "bottom" | "left" | "right";
+    };
+    icon?: ConstructorOfATypedSvelteComponent | string | null;
     imageSize?: {
         height?: string;
         width?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.75.0",
+  "version": "1.76.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"