@bigplay/tree-view 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @bigplay/tree-view
+
+Дерево и турнирные сетки для Vue 3. Без зависимостей (d3 не нужен).
+
+```bash
+npm i @bigplay/tree-view
+```
+
+```vue
+<script setup>
+import { TreeView } from '@bigplay/tree-view'
+
+const data = { id: 'final', name: 'Финал', children: [{ id: 'sf-1', name: 'Полуфинал' }] }
+</script>
+
+<template>
+  <div style="height: 600px">
+    <TreeView :data="data" :options="{ direction: 'right-to-left' }" collapsible />
+  </div>
+</template>
+```
+
+Свой вид узла — через слот:
+
+```vue
+<TreeView :data="data">
+  <template #node="{ data, collapsed, hasChildren, toggle }">
+    <div class="my-card" @click="toggle">{{ data.name }}</div>
+  </template>
+</TreeView>
+```
+
+Стили подключать не нужно — они внутри пакета и вставляются сами.
+
+Полная документация — в [корневом README](https://github.com/dadashi44/tree-view#readme):
+пропы, события, методы, форматы данных, CSS-переменные.
+
+MIT

package/dist/TreeNodeCard.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    label: string;
+    hasChildren?: boolean;
+    collapsed?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    toggle: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/TreeView.vue.d.ts

@@ -0,0 +1,83 @@
+import { Accessors, LayoutNode, ScaleLimits, Transform, TreeViewOptions } from '@bigplay/tree-view-core';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onToggle?: ((node: LayoutNode<T>, collapsed: boolean) => any) | undefined;
+        readonly "onNode-click"?: ((node: LayoutNode<T>, event: MouseEvent) => any) | undefined;
+        readonly onTransform?: ((transform: Transform) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onToggle" | "onNode-click" | "onTransform"> & {
+        /** Данные: объект, массив объектов или плоский список (вместе с `getParentId`). */
+        data: T | T[] | null | undefined;
+        /** Размеры и направление. Можно передать только часть полей. */
+        options?: Partial<TreeViewOptions>;
+        /** Как достать id узла. По умолчанию — поле `id`. */
+        getId?: Accessors<T>["getId"];
+        /** Как достать детей. По умолчанию — поле `children`. */
+        getChildren?: Accessors<T>["getChildren"];
+        /** Как достать id родителя. Передан — значит данные плоские. */
+        getParentId?: Accessors<T>["getParentId"];
+        /** Клик по узлу сворачивает/разворачивает ветку. */
+        collapsible?: boolean;
+        /** Разрешить перетаскивание холста. */
+        pannable?: boolean;
+        /** Разрешить зум колесом и «щипком». */
+        zoomable?: boolean;
+        /** Вписать дерево в контейнер при первом отображении. */
+        fitOnMount?: boolean;
+        /**
+         * Как компонент занимает место:
+         *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается,
+         *    дерево двигают мышью;
+         *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.
+         *    Нужен, когда сетка стоит внутри страницы со своим скроллом.
+         */
+        size?: "fill" | "content";
+        /** Пределы масштаба. */
+        scaleLimits?: ScaleLimits;
+        /** Дополнительный класс на обёртке узла — строкой или функцией. */
+        nodeClass?: string | ((node: LayoutNode<T>) => string);
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        fit: (padding?: number) => void;
+        zoomIn: () => void;
+        zoomOut: () => void;
+        resetTransform: () => void;
+        setTransform: (next: Transform) => void;
+        expandAll: () => void;
+        toggle: (id: string) => void;
+        layout: import('vue').ComputedRef<import('@bigplay/tree-view-core').Layout<T>>;
+        transform: import('vue').Ref<{
+            x: number;
+            y: number;
+            scale: number;
+        }, Transform | {
+            x: number;
+            y: number;
+            scale: number;
+        }>;
+    }>): void;
+    attrs: any;
+    slots: {
+        link?(_: {
+            link: import('@bigplay/tree-view-core').LayoutLink<T>;
+        }): any;
+        node?(_: {
+            node: LayoutNode<T>;
+            data: T;
+            depth: number;
+            collapsed: boolean;
+            hasChildren: boolean;
+            toggle: () => void;
+        }): any;
+    };
+    emit: {
+        (e: "node-click", node: LayoutNode<T>, event: MouseEvent): void;
+        (e: "toggle", node: LayoutNode<T>, collapsed: boolean): void;
+        (e: "transform", transform: Transform): void;
+    };
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("@bigplay/tree-view-core"),I={class:"tree-view-card"},$={class:"tree-view-card__label"},O=["aria-label"],m=e.defineComponent({__name:"TreeNodeCard",props:{label:{},hasChildren:{type:Boolean},collapsed:{type:Boolean}},emits:["toggle"],setup(n,{emit:r}){const a=r;return(o,s)=>(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("span",$,e.toDisplayString(n.label),1),n.hasChildren?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"tree-view-card__toggle","data-tv-no-pan":"","aria-label":n.collapsed?"Развернуть":"Свернуть",onClick:s[0]||(s[0]=e.withModifiers(u=>a("toggle"),["stop"]))},e.toDisplayString(n.collapsed?"+":"−"),9,O)):e.createCommentVNode("",!0)]))}});function b(n){const r=e.ref({...d.IDENTITY_TRANSFORM}),a=new d.PanZoomController({pannable:n.pannable,zoomable:n.zoomable,limits:n.limits,onChange:o=>{r.value=o}});return e.watch(n.element,(o,s,u)=>{o&&(a.attach(o),u(()=>a.detach()))},{immediate:!0}),e.onBeforeUnmount(()=>a.detach()),{transform:r,fit:(o,s)=>a.fit(o,s),zoomIn:()=>a.zoomIn(),zoomOut:()=>a.zoomOut(),reset:()=>a.reset(),setTransform:o=>a.set(o)}}function _(n){const r=e.ref(new Set),a=e.computed(()=>d.toTree(n.data(),n.accessors())),o=e.computed(()=>d.applyCollapsed(a.value,r.value)),s=e.computed(()=>d.layoutTree(o.value,n.options()));function u(v){return r.value.has(v)}function i(v){r.value=d.toggleCollapsed(r.value,v)}function h(){r.value=new Set}return{layout:s,isCollapsed:u,toggle:i,expandAll:h}}const N=["width","height"],P=["d"],L=["onClick"],y=e.defineComponent({__name:"TreeView",props:{data:{},options:{default:void 0},getId:{type:Function,default:void 0},getChildren:{type:Function,default:void 0},getParentId:{type:Function,default:void 0},collapsible:{type:Boolean,default:!1},pannable:{type:Boolean,default:!0},zoomable:{type:Boolean,default:!0},fitOnMount:{type:Boolean,default:!0},size:{default:"fill"},scaleLimits:{default:void 0},nodeClass:{type:[String,Function],default:void 0}},emits:["node-click","toggle","transform"],setup(n,{expose:r,emit:a}){const o=n,s=a,u=e.ref(null),{layout:i,isCollapsed:h,toggle:v,expandAll:C}=_({data:()=>o.data,options:()=>o.options,accessors:()=>({getId:o.getId,getChildren:o.getChildren,getParentId:o.getParentId})}),c=b({element:u,pannable:()=>o.pannable,zoomable:()=>o.zoomable,limits:()=>o.scaleLimits??d.DEFAULT_SCALE_LIMITS}),x=e.computed(()=>({width:`${i.value.width}px`,height:`${i.value.height}px`,transform:d.toCssTransform(c.transform.value)})),T=e.computed(()=>{if(o.size!=="content")return;const{scale:t}=c.transform.value;return{width:`${i.value.width*t}px`,height:`${i.value.height*t}px`,overflow:"visible"}});function z(t){return{left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`}}function B(t){return typeof o.nodeClass=="function"?o.nodeClass(t):o.nodeClass}function S(t){const p=t.data;return p?.name??p?.title??p?.label??t.id}function f(t){v(t.id),s("toggle",t,h(t.id))}function E(t,p){s("node-click",t,p),o.collapsible&&t.hasChildren&&f(t)}function g(t){c.fit({width:i.value.width,height:i.value.height},t)}return e.onMounted(()=>{o.fitOnMount&&e.nextTick(()=>g())}),e.watch(()=>c.transform.value,t=>s("transform",t)),r({fit:g,zoomIn:c.zoomIn,zoomOut:c.zoomOut,resetTransform:c.reset,setTransform:c.setTransform,expandAll:C,toggle:v,layout:i,transform:c.transform}),(t,p)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootElement",ref:u,class:e.normalizeClass(["tree-view",{"tree-view--pannable":n.pannable,"tree-view--content":n.size==="content"}]),style:e.normalizeStyle(T.value)},[e.createElementVNode("div",{class:"tree-view__canvas",style:e.normalizeStyle(x.value)},[(e.openBlock(),e.createElementBlock("svg",{class:"tree-view__links",width:e.unref(i).width,height:e.unref(i).height},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i).links,l=>e.renderSlot(t.$slots,"link",{link:l},()=>[e.createElementVNode("path",{class:"tree-view__link",d:l.path},null,8,P)],void 0,l.id)),128))],8,N)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i).nodes,l=>(e.openBlock(),e.createElementBlock("div",{key:l.id,class:e.normalizeClass(["tree-view__node",B(l)]),style:e.normalizeStyle(z(l)),onClick:w=>E(l,w)},[e.renderSlot(t.$slots,"node",{node:l,data:l.data,depth:l.depth,collapsed:l.collapsed,hasChildren:l.hasChildren,toggle:()=>f(l)},()=>[e.createVNode(m,{label:S(l),"has-children":l.hasChildren,collapsed:l.collapsed,onToggle:w=>f(l)},null,8,["label","has-children","collapsed","onToggle"])])],14,L))),128))],4)],6))}}),V=".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-view--pannable{cursor:grab}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}";d.injectStyles(V);const k={install(n){n.component("TreeView",y),n.component("TreeNodeCard",m)}};Object.defineProperty(exports,"DEFAULT_OPTIONS",{enumerable:!0,get:()=>d.DEFAULT_OPTIONS});exports.TreeNodeCard=m;exports.TreeView=y;exports.TreeViewPlugin=k;exports.default=k;exports.usePanZoom=b;exports.useTreeLayout=_;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/TreeNodeCard.vue","../src/usePanZoom.ts","../src/useTreeLayout.ts","../src/TreeView.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Карточка узла по умолчанию.\n * Нужна только чтобы «из коробки» что-то отображалось —\n * в реальном проекте обычно используют слот #node и рисуют свой блок.\n */\ndefineProps<{\n  label: string\n  hasChildren?: boolean\n  collapsed?: boolean\n}>()\n\nconst emit = defineEmits<{ (e: 'toggle'): void }>()\n</script>\n\n<template>\n  <div class=\"tree-view-card\">\n    <span class=\"tree-view-card__label\">{{ label }}</span>\n\n    <button\n      v-if=\"hasChildren\"\n      type=\"button\"\n      class=\"tree-view-card__toggle\"\n      data-tv-no-pan\n      :aria-label=\"collapsed ? 'Развернуть' : 'Свернуть'\"\n      @click.stop=\"emit('toggle')\"\n    >\n      {{ collapsed ? '+' : '−' }}\n    </button>\n  </div>\n</template>\n","import { onBeforeUnmount, ref, watch, type Ref } from 'vue'\nimport {\n  IDENTITY_TRANSFORM,\n  PanZoomController,\n  type ScaleLimits,\n  type Size,\n  type Transform,\n} from '@bigplay/tree-view-core'\n\nexport interface UsePanZoomParams {\n  /** Элемент, который слушаем: по нему тянут и крутят колесо. */\n  element: Ref<HTMLElement | null>\n  pannable: () => boolean\n  zoomable: () => boolean\n  limits: () => ScaleLimits\n}\n\n/**\n * Тонкая обёртка над `PanZoomController` из core:\n * переносит его состояние в реактивный `ref` и следит за жизненным циклом.\n */\nexport function usePanZoom(params: UsePanZoomParams) {\n  const transform = ref<Transform>({ ...IDENTITY_TRANSFORM })\n\n  const controller = new PanZoomController({\n    pannable: params.pannable,\n    zoomable: params.zoomable,\n    limits: params.limits,\n    onChange: (next) => {\n      transform.value = next\n    },\n  })\n\n  watch(\n    params.element,\n    (element, _previous, onCleanup) => {\n      if (!element) return\n\n      controller.attach(element)\n      onCleanup(() => controller.detach())\n    },\n    { immediate: true },\n  )\n\n  onBeforeUnmount(() => controller.detach())\n\n  return {\n    transform,\n    fit: (content: Size, padding?: number) => controller.fit(content, padding),\n    zoomIn: () => controller.zoomIn(),\n    zoomOut: () => controller.zoomOut(),\n    reset: () => controller.reset(),\n    setTransform: (next: Transform) => controller.set(next),\n  }\n}\n","import { computed, ref, type ComputedRef } from 'vue'\nimport {\n  applyCollapsed,\n  layoutTree,\n  toggleCollapsed,\n  toTree,\n  type Accessors,\n  type Layout,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\n\n/** Функции-геттеры, чтобы композабл видел свежие значения пропов. */\nexport interface UseTreeLayoutParams<T> {\n  data: () => T | T[] | null | undefined\n  options: () => Partial<TreeViewOptions> | undefined\n  accessors: () => Accessors<T>\n}\n\nexport interface UseTreeLayoutResult<T> {\n  /** Готовая раскладка: узлы с координатами и линии. */\n  layout: ComputedRef<Layout<T>>\n  /** Свёрнут ли узел с таким id. */\n  isCollapsed: (id: string) => boolean\n  /** Свернуть/развернуть узел. */\n  toggle: (id: string) => void\n  /** Развернуть всё дерево. */\n  expandAll: () => void\n}\n\n/**\n * Вся «логика» компонента: данные → дерево → раскладка.\n * Каждый шаг — отдельная чистая функция из core, здесь только реактивность.\n */\nexport function useTreeLayout<T>(params: UseTreeLayoutParams<T>): UseTreeLayoutResult<T> {\n  const collapsedIds = ref(new Set<string>())\n\n  const tree = computed(() => toTree(params.data(), params.accessors()))\n  const visibleTree = computed(() => applyCollapsed(tree.value, collapsedIds.value))\n  const layout = computed(() => layoutTree(visibleTree.value, params.options()))\n\n  function isCollapsed(id: string): boolean {\n    return collapsedIds.value.has(id)\n  }\n\n  function toggle(id: string): void {\n    // Новое множество вместо мутации — иначе Vue не заметит изменения.\n    collapsedIds.value = toggleCollapsed(collapsedIds.value, id)\n  }\n\n  function expandAll(): void {\n    collapsedIds.value = new Set()\n  }\n\n  return { layout, isCollapsed, toggle, expandAll }\n}\n","<script setup lang=\"ts\" generic=\"T\">\n/**\n * Компонент-обёртка. Вся математика — в пакете core, здесь только\n * реактивность, разметка и события.\n */\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport {\n  DEFAULT_SCALE_LIMITS,\n  toCssTransform,\n  type Accessors,\n  type LayoutNode,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard.vue'\nimport { usePanZoom } from './usePanZoom'\nimport { useTreeLayout } from './useTreeLayout'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Данные: объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: T | T[] | null | undefined\n    /** Размеры и направление. Можно передать только часть полей. */\n    options?: Partial<TreeViewOptions>\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId?: Accessors<T>['getId']\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren?: Accessors<T>['getChildren']\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId?: Accessors<T>['getParentId']\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible?: boolean\n    /** Разрешить перетаскивание холста. */\n    pannable?: boolean\n    /** Разрешить зум колесом и «щипком». */\n    zoomable?: boolean\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount?: boolean\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается,\n     *    дерево двигают мышью;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     *    Нужен, когда сетка стоит внутри страницы со своим скроллом.\n     */\n    size?: 'fill' | 'content'\n    /** Пределы масштаба. */\n    scaleLimits?: ScaleLimits\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass?: string | ((node: LayoutNode<T>) => string)\n  }>(),\n  {\n    options: undefined,\n    getId: undefined,\n    getChildren: undefined,\n    getParentId: undefined,\n    collapsible: false,\n    pannable: true,\n    zoomable: true,\n    fitOnMount: true,\n    size: 'fill',\n    scaleLimits: undefined,\n    nodeClass: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'node-click', node: LayoutNode<T>, event: MouseEvent): void\n  (e: 'toggle', node: LayoutNode<T>, collapsed: boolean): void\n  (e: 'transform', transform: Transform): void\n}>()\n\nconst rootElement = ref<HTMLElement | null>(null)\n\nconst { layout, isCollapsed, toggle, expandAll } = useTreeLayout<T>({\n  data: () => props.data,\n  options: () => props.options,\n  accessors: () => ({\n    getId: props.getId,\n    getChildren: props.getChildren,\n    getParentId: props.getParentId,\n  }),\n})\n\nconst panZoom = usePanZoom({\n  element: rootElement,\n  pannable: () => props.pannable,\n  zoomable: () => props.zoomable,\n  limits: () => props.scaleLimits ?? DEFAULT_SCALE_LIMITS,\n})\n\nconst canvasStyle = computed(() => ({\n  width: `${layout.value.width}px`,\n  height: `${layout.value.height}px`,\n  transform: toCssTransform(panZoom.transform.value),\n}))\n\nconst rootStyle = computed(() => {\n  if (props.size !== 'content') return undefined\n\n  const { scale } = panZoom.transform.value\n  return {\n    width: `${layout.value.width * scale}px`,\n    height: `${layout.value.height * scale}px`,\n    overflow: 'visible',\n  }\n})\n\nfunction nodeStyle(node: LayoutNode<T>) {\n  return {\n    left: `${node.x}px`,\n    top: `${node.y}px`,\n    width: `${node.width}px`,\n    height: `${node.height}px`,\n  }\n}\n\nfunction nodeClassOf(node: LayoutNode<T>): string | undefined {\n  return typeof props.nodeClass === 'function' ? props.nodeClass(node) : props.nodeClass\n}\n\n/** Подпись карточки по умолчанию: name → title → label → id. */\nfunction labelOf(node: LayoutNode<T>): string {\n  const data = node.data as { name?: string; title?: string; label?: string } | null\n  return data?.name ?? data?.title ?? data?.label ?? node.id\n}\n\nfunction toggleNode(node: LayoutNode<T>): void {\n  toggle(node.id)\n  emit('toggle', node, isCollapsed(node.id))\n}\n\nfunction onNodeClick(node: LayoutNode<T>, event: MouseEvent): void {\n  emit('node-click', node, event)\n  if (props.collapsible && node.hasChildren) toggleNode(node)\n}\n\n/** Вписывает дерево в видимую область. */\nfunction fit(padding?: number): void {\n  panZoom.fit({ width: layout.value.width, height: layout.value.height }, padding)\n}\n\nonMounted(() => {\n  if (props.fitOnMount) void nextTick(() => fit())\n})\n\nwatch(\n  () => panZoom.transform.value,\n  (transform) => emit('transform', transform),\n)\n\ndefineExpose({\n  fit,\n  zoomIn: panZoom.zoomIn,\n  zoomOut: panZoom.zoomOut,\n  resetTransform: panZoom.reset,\n  setTransform: panZoom.setTransform,\n  expandAll,\n  toggle,\n  layout,\n  transform: panZoom.transform,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootElement\"\n    class=\"tree-view\"\n    :class=\"{ 'tree-view--pannable': pannable, 'tree-view--content': size === 'content' }\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"tree-view__canvas\" :style=\"canvasStyle\">\n      <svg class=\"tree-view__links\" :width=\"layout.width\" :height=\"layout.height\">\n        <template v-for=\"link in layout.links\" :key=\"link.id\">\n          <slot name=\"link\" :link=\"link\">\n            <path class=\"tree-view__link\" :d=\"link.path\" />\n          </slot>\n        </template>\n      </svg>\n\n      <div\n        v-for=\"node in layout.nodes\"\n        :key=\"node.id\"\n        class=\"tree-view__node\"\n        :class=\"nodeClassOf(node)\"\n        :style=\"nodeStyle(node)\"\n        @click=\"onNodeClick(node, $event)\"\n      >\n        <!--\n          Главная точка кастомизации: сюда подставляют свою карточку.\n          Доступно всё, что может понадобиться для отрисовки и управления.\n        -->\n        <slot\n          name=\"node\"\n          :node=\"node\"\n          :data=\"node.data\"\n          :depth=\"node.depth\"\n          :collapsed=\"node.collapsed\"\n          :has-children=\"node.hasChildren\"\n          :toggle=\"() => toggleNode(node)\"\n        >\n          <TreeNodeCard\n            :label=\"labelOf(node)\"\n            :has-children=\"node.hasChildren\"\n            :collapsed=\"node.collapsed\"\n            @toggle=\"toggleNode(node)\"\n          />\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n","import type { App, Plugin } from 'vue'\nimport TreeView from './TreeView.vue'\nimport TreeNodeCard from './TreeNodeCard.vue'\n// Стили общие для Vue 2 и Vue 3 — лежат в core, чтобы не расходились.\n// Они попадают прямо в бандл и подключаются сами: отдельный импорт в проекте не нужен.\nimport { injectStyles } from '@bigplay/tree-view-core'\nimport styles from '@bigplay/tree-view-core/style.css?inline'\n\ninjectStyles(styles)\n\nexport { TreeView, TreeNodeCard }\nexport { useTreeLayout } from './useTreeLayout'\nexport { usePanZoom } from './usePanZoom'\n\n// Типы из core переэкспортируем, чтобы их не приходилось ставить отдельно.\nexport type {\n  Accessors,\n  Direction,\n  Layout,\n  LayoutLink,\n  LayoutNode,\n  LinkStyle,\n  ScaleLimits,\n  Transform,\n  TreeNode,\n  TreeViewOptions,\n} from '@bigplay/tree-view-core'\nexport { DEFAULT_OPTIONS } from '@bigplay/tree-view-core'\n\n/** Плагин: `app.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin: Plugin = {\n  install(app: App) {\n    app.component('TreeView', TreeView)\n    app.component('TreeNodeCard', TreeNodeCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["emit","__emit","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_toDisplayString","__props","_hoisted_3","usePanZoom","params","transform","ref","IDENTITY_TRANSFORM","controller","PanZoomController","next","watch","element","_previous","onCleanup","onBeforeUnmount","content","padding","useTreeLayout","collapsedIds","tree","computed","toTree","visibleTree","applyCollapsed","layout","layoutTree","isCollapsed","id","toggle","toggleCollapsed","expandAll","props","rootElement","panZoom","DEFAULT_SCALE_LIMITS","canvasStyle","toCssTransform","rootStyle","scale","nodeStyle","node","nodeClassOf","labelOf","data","toggleNode","onNodeClick","event","fit","onMounted","nextTick","__expose","_normalizeClass","_unref","_Fragment","_renderList","link","_renderSlot","_ctx","_normalizeStyle","$event","_createVNode","TreeNodeCard","injectStyles","styles","TreeViewPlugin","app","TreeView"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from 'vue';
+import { default as TreeView } from './TreeView.vue';
+import { default as TreeNodeCard } from './TreeNodeCard.vue';
+export { TreeView, TreeNodeCard };
+export { useTreeLayout } from './useTreeLayout';
+export { usePanZoom } from './usePanZoom';
+export type { Accessors, Direction, Layout, LayoutLink, LayoutNode, LinkStyle, ScaleLimits, Transform, TreeNode, TreeViewOptions, } from '@bigplay/tree-view-core';
+export { DEFAULT_OPTIONS } from '@bigplay/tree-view-core';
+/** Плагин: `app.use(TreeViewPlugin)` регистрирует компоненты глобально. */
+export declare const TreeViewPlugin: Plugin;
+export default TreeViewPlugin;

package/dist/index.js

@@ -0,0 +1,210 @@
+import { defineComponent as $, openBlock as c, createElementBlock as u, createElementVNode as b, toDisplayString as C, withModifiers as A, createCommentVNode as M, ref as _, watch as S, onBeforeUnmount as D, computed as p, onMounted as j, nextTick as U, normalizeStyle as w, normalizeClass as T, unref as f, Fragment as k, renderList as z, renderSlot as I, createVNode as Z } from "vue";
+import { IDENTITY_TRANSFORM as R, PanZoomController as Y, toTree as q, applyCollapsed as G, layoutTree as H, toggleCollapsed as J, toCssTransform as K, DEFAULT_SCALE_LIMITS as Q, injectStyles as W } from "@bigplay/tree-view-core";
+import { DEFAULT_OPTIONS as pe } from "@bigplay/tree-view-core";
+const X = { class: "tree-view-card" }, ee = { class: "tree-view-card__label" }, te = ["aria-label"], N = /* @__PURE__ */ $({
+  __name: "TreeNodeCard",
+  props: {
+    label: {},
+    hasChildren: { type: Boolean },
+    collapsed: { type: Boolean }
+  },
+  emits: ["toggle"],
+  setup(o, { emit: a }) {
+    const l = a;
+    return (t, r) => (c(), u("div", X, [
+      b("span", ee, C(o.label), 1),
+      o.hasChildren ? (c(), u("button", {
+        key: 0,
+        type: "button",
+        class: "tree-view-card__toggle",
+        "data-tv-no-pan": "",
+        "aria-label": o.collapsed ? "Развернуть" : "Свернуть",
+        onClick: r[0] || (r[0] = A((d) => l("toggle"), ["stop"]))
+      }, C(o.collapsed ? "+" : "−"), 9, te)) : M("", !0)
+    ]));
+  }
+});
+function oe(o) {
+  const a = _({ ...R }), l = new Y({
+    pannable: o.pannable,
+    zoomable: o.zoomable,
+    limits: o.limits,
+    onChange: (t) => {
+      a.value = t;
+    }
+  });
+  return S(
+    o.element,
+    (t, r, d) => {
+      t && (l.attach(t), d(() => l.detach()));
+    },
+    { immediate: !0 }
+  ), D(() => l.detach()), {
+    transform: a,
+    fit: (t, r) => l.fit(t, r),
+    zoomIn: () => l.zoomIn(),
+    zoomOut: () => l.zoomOut(),
+    reset: () => l.reset(),
+    setTransform: (t) => l.set(t)
+  };
+}
+function ne(o) {
+  const a = _(/* @__PURE__ */ new Set()), l = p(() => q(o.data(), o.accessors())), t = p(() => G(l.value, a.value)), r = p(() => H(t.value, o.options()));
+  function d(v) {
+    return a.value.has(v);
+  }
+  function i(v) {
+    a.value = J(a.value, v);
+  }
+  function g() {
+    a.value = /* @__PURE__ */ new Set();
+  }
+  return { layout: r, isCollapsed: d, toggle: i, expandAll: g };
+}
+const le = ["width", "height"], ie = ["d"], ae = ["onClick"], re = /* @__PURE__ */ $({
+  __name: "TreeView",
+  props: {
+    data: {},
+    options: { default: void 0 },
+    getId: { type: Function, default: void 0 },
+    getChildren: { type: Function, default: void 0 },
+    getParentId: { type: Function, default: void 0 },
+    collapsible: { type: Boolean, default: !1 },
+    pannable: { type: Boolean, default: !0 },
+    zoomable: { type: Boolean, default: !0 },
+    fitOnMount: { type: Boolean, default: !0 },
+    size: { default: "fill" },
+    scaleLimits: { default: void 0 },
+    nodeClass: { type: [String, Function], default: void 0 }
+  },
+  emits: ["node-click", "toggle", "transform"],
+  setup(o, { expose: a, emit: l }) {
+    const t = o, r = l, d = _(null), { layout: i, isCollapsed: g, toggle: v, expandAll: O } = ne({
+      data: () => t.data,
+      options: () => t.options,
+      accessors: () => ({
+        getId: t.getId,
+        getChildren: t.getChildren,
+        getParentId: t.getParentId
+      })
+    }), s = oe({
+      element: d,
+      pannable: () => t.pannable,
+      zoomable: () => t.zoomable,
+      limits: () => t.scaleLimits ?? Q
+    }), B = p(() => ({
+      width: `${i.value.width}px`,
+      height: `${i.value.height}px`,
+      transform: K(s.transform.value)
+    })), E = p(() => {
+      if (t.size !== "content") return;
+      const { scale: e } = s.transform.value;
+      return {
+        width: `${i.value.width * e}px`,
+        height: `${i.value.height * e}px`,
+        overflow: "visible"
+      };
+    });
+    function F(e) {
+      return {
+        left: `${e.x}px`,
+        top: `${e.y}px`,
+        width: `${e.width}px`,
+        height: `${e.height}px`
+      };
+    }
+    function L(e) {
+      return typeof t.nodeClass == "function" ? t.nodeClass(e) : t.nodeClass;
+    }
+    function P(e) {
+      const h = e.data;
+      return h?.name ?? h?.title ?? h?.label ?? e.id;
+    }
+    function m(e) {
+      v(e.id), r("toggle", e, g(e.id));
+    }
+    function V(e, h) {
+      r("node-click", e, h), t.collapsible && e.hasChildren && m(e);
+    }
+    function y(e) {
+      s.fit({ width: i.value.width, height: i.value.height }, e);
+    }
+    return j(() => {
+      t.fitOnMount && U(() => y());
+    }), S(
+      () => s.transform.value,
+      (e) => r("transform", e)
+    ), a({
+      fit: y,
+      zoomIn: s.zoomIn,
+      zoomOut: s.zoomOut,
+      resetTransform: s.reset,
+      setTransform: s.setTransform,
+      expandAll: O,
+      toggle: v,
+      layout: i,
+      transform: s.transform
+    }), (e, h) => (c(), u("div", {
+      ref_key: "rootElement",
+      ref: d,
+      class: T(["tree-view", { "tree-view--pannable": o.pannable, "tree-view--content": o.size === "content" }]),
+      style: w(E.value)
+    }, [
+      b("div", {
+        class: "tree-view__canvas",
+        style: w(B.value)
+      }, [
+        (c(), u("svg", {
+          class: "tree-view__links",
+          width: f(i).width,
+          height: f(i).height
+        }, [
+          (c(!0), u(k, null, z(f(i).links, (n) => I(e.$slots, "link", { link: n }, () => [
+            b("path", {
+              class: "tree-view__link",
+              d: n.path
+            }, null, 8, ie)
+          ], void 0, n.id)), 128))
+        ], 8, le)),
+        (c(!0), u(k, null, z(f(i).nodes, (n) => (c(), u("div", {
+          key: n.id,
+          class: T(["tree-view__node", L(n)]),
+          style: w(F(n)),
+          onClick: (x) => V(n, x)
+        }, [
+          I(e.$slots, "node", {
+            node: n,
+            data: n.data,
+            depth: n.depth,
+            collapsed: n.collapsed,
+            hasChildren: n.hasChildren,
+            toggle: () => m(n)
+          }, () => [
+            Z(N, {
+              label: P(n),
+              "has-children": n.hasChildren,
+              collapsed: n.collapsed,
+              onToggle: (x) => m(n)
+            }, null, 8, ["label", "has-children", "collapsed", "onToggle"])
+          ])
+        ], 14, ae))), 128))
+      ], 4)
+    ], 6));
+  }
+}), se = ".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-view--pannable{cursor:grab}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}";
+W(se);
+const ue = {
+  install(o) {
+    o.component("TreeView", re), o.component("TreeNodeCard", N);
+  }
+};
+export {
+  pe as DEFAULT_OPTIONS,
+  N as TreeNodeCard,
+  re as TreeView,
+  ue as TreeViewPlugin,
+  ue as default,
+  oe as usePanZoom,
+  ne as useTreeLayout
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/TreeNodeCard.vue","../src/usePanZoom.ts","../src/useTreeLayout.ts","../src/TreeView.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Карточка узла по умолчанию.\n * Нужна только чтобы «из коробки» что-то отображалось —\n * в реальном проекте обычно используют слот #node и рисуют свой блок.\n */\ndefineProps<{\n  label: string\n  hasChildren?: boolean\n  collapsed?: boolean\n}>()\n\nconst emit = defineEmits<{ (e: 'toggle'): void }>()\n</script>\n\n<template>\n  <div class=\"tree-view-card\">\n    <span class=\"tree-view-card__label\">{{ label }}</span>\n\n    <button\n      v-if=\"hasChildren\"\n      type=\"button\"\n      class=\"tree-view-card__toggle\"\n      data-tv-no-pan\n      :aria-label=\"collapsed ? 'Развернуть' : 'Свернуть'\"\n      @click.stop=\"emit('toggle')\"\n    >\n      {{ collapsed ? '+' : '−' }}\n    </button>\n  </div>\n</template>\n","import { onBeforeUnmount, ref, watch, type Ref } from 'vue'\nimport {\n  IDENTITY_TRANSFORM,\n  PanZoomController,\n  type ScaleLimits,\n  type Size,\n  type Transform,\n} from '@bigplay/tree-view-core'\n\nexport interface UsePanZoomParams {\n  /** Элемент, который слушаем: по нему тянут и крутят колесо. */\n  element: Ref<HTMLElement | null>\n  pannable: () => boolean\n  zoomable: () => boolean\n  limits: () => ScaleLimits\n}\n\n/**\n * Тонкая обёртка над `PanZoomController` из core:\n * переносит его состояние в реактивный `ref` и следит за жизненным циклом.\n */\nexport function usePanZoom(params: UsePanZoomParams) {\n  const transform = ref<Transform>({ ...IDENTITY_TRANSFORM })\n\n  const controller = new PanZoomController({\n    pannable: params.pannable,\n    zoomable: params.zoomable,\n    limits: params.limits,\n    onChange: (next) => {\n      transform.value = next\n    },\n  })\n\n  watch(\n    params.element,\n    (element, _previous, onCleanup) => {\n      if (!element) return\n\n      controller.attach(element)\n      onCleanup(() => controller.detach())\n    },\n    { immediate: true },\n  )\n\n  onBeforeUnmount(() => controller.detach())\n\n  return {\n    transform,\n    fit: (content: Size, padding?: number) => controller.fit(content, padding),\n    zoomIn: () => controller.zoomIn(),\n    zoomOut: () => controller.zoomOut(),\n    reset: () => controller.reset(),\n    setTransform: (next: Transform) => controller.set(next),\n  }\n}\n","import { computed, ref, type ComputedRef } from 'vue'\nimport {\n  applyCollapsed,\n  layoutTree,\n  toggleCollapsed,\n  toTree,\n  type Accessors,\n  type Layout,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\n\n/** Функции-геттеры, чтобы композабл видел свежие значения пропов. */\nexport interface UseTreeLayoutParams<T> {\n  data: () => T | T[] | null | undefined\n  options: () => Partial<TreeViewOptions> | undefined\n  accessors: () => Accessors<T>\n}\n\nexport interface UseTreeLayoutResult<T> {\n  /** Готовая раскладка: узлы с координатами и линии. */\n  layout: ComputedRef<Layout<T>>\n  /** Свёрнут ли узел с таким id. */\n  isCollapsed: (id: string) => boolean\n  /** Свернуть/развернуть узел. */\n  toggle: (id: string) => void\n  /** Развернуть всё дерево. */\n  expandAll: () => void\n}\n\n/**\n * Вся «логика» компонента: данные → дерево → раскладка.\n * Каждый шаг — отдельная чистая функция из core, здесь только реактивность.\n */\nexport function useTreeLayout<T>(params: UseTreeLayoutParams<T>): UseTreeLayoutResult<T> {\n  const collapsedIds = ref(new Set<string>())\n\n  const tree = computed(() => toTree(params.data(), params.accessors()))\n  const visibleTree = computed(() => applyCollapsed(tree.value, collapsedIds.value))\n  const layout = computed(() => layoutTree(visibleTree.value, params.options()))\n\n  function isCollapsed(id: string): boolean {\n    return collapsedIds.value.has(id)\n  }\n\n  function toggle(id: string): void {\n    // Новое множество вместо мутации — иначе Vue не заметит изменения.\n    collapsedIds.value = toggleCollapsed(collapsedIds.value, id)\n  }\n\n  function expandAll(): void {\n    collapsedIds.value = new Set()\n  }\n\n  return { layout, isCollapsed, toggle, expandAll }\n}\n","<script setup lang=\"ts\" generic=\"T\">\n/**\n * Компонент-обёртка. Вся математика — в пакете core, здесь только\n * реактивность, разметка и события.\n */\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport {\n  DEFAULT_SCALE_LIMITS,\n  toCssTransform,\n  type Accessors,\n  type LayoutNode,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard.vue'\nimport { usePanZoom } from './usePanZoom'\nimport { useTreeLayout } from './useTreeLayout'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Данные: объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: T | T[] | null | undefined\n    /** Размеры и направление. Можно передать только часть полей. */\n    options?: Partial<TreeViewOptions>\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId?: Accessors<T>['getId']\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren?: Accessors<T>['getChildren']\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId?: Accessors<T>['getParentId']\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible?: boolean\n    /** Разрешить перетаскивание холста. */\n    pannable?: boolean\n    /** Разрешить зум колесом и «щипком». */\n    zoomable?: boolean\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount?: boolean\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается,\n     *    дерево двигают мышью;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     *    Нужен, когда сетка стоит внутри страницы со своим скроллом.\n     */\n    size?: 'fill' | 'content'\n    /** Пределы масштаба. */\n    scaleLimits?: ScaleLimits\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass?: string | ((node: LayoutNode<T>) => string)\n  }>(),\n  {\n    options: undefined,\n    getId: undefined,\n    getChildren: undefined,\n    getParentId: undefined,\n    collapsible: false,\n    pannable: true,\n    zoomable: true,\n    fitOnMount: true,\n    size: 'fill',\n    scaleLimits: undefined,\n    nodeClass: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'node-click', node: LayoutNode<T>, event: MouseEvent): void\n  (e: 'toggle', node: LayoutNode<T>, collapsed: boolean): void\n  (e: 'transform', transform: Transform): void\n}>()\n\nconst rootElement = ref<HTMLElement | null>(null)\n\nconst { layout, isCollapsed, toggle, expandAll } = useTreeLayout<T>({\n  data: () => props.data,\n  options: () => props.options,\n  accessors: () => ({\n    getId: props.getId,\n    getChildren: props.getChildren,\n    getParentId: props.getParentId,\n  }),\n})\n\nconst panZoom = usePanZoom({\n  element: rootElement,\n  pannable: () => props.pannable,\n  zoomable: () => props.zoomable,\n  limits: () => props.scaleLimits ?? DEFAULT_SCALE_LIMITS,\n})\n\nconst canvasStyle = computed(() => ({\n  width: `${layout.value.width}px`,\n  height: `${layout.value.height}px`,\n  transform: toCssTransform(panZoom.transform.value),\n}))\n\nconst rootStyle = computed(() => {\n  if (props.size !== 'content') return undefined\n\n  const { scale } = panZoom.transform.value\n  return {\n    width: `${layout.value.width * scale}px`,\n    height: `${layout.value.height * scale}px`,\n    overflow: 'visible',\n  }\n})\n\nfunction nodeStyle(node: LayoutNode<T>) {\n  return {\n    left: `${node.x}px`,\n    top: `${node.y}px`,\n    width: `${node.width}px`,\n    height: `${node.height}px`,\n  }\n}\n\nfunction nodeClassOf(node: LayoutNode<T>): string | undefined {\n  return typeof props.nodeClass === 'function' ? props.nodeClass(node) : props.nodeClass\n}\n\n/** Подпись карточки по умолчанию: name → title → label → id. */\nfunction labelOf(node: LayoutNode<T>): string {\n  const data = node.data as { name?: string; title?: string; label?: string } | null\n  return data?.name ?? data?.title ?? data?.label ?? node.id\n}\n\nfunction toggleNode(node: LayoutNode<T>): void {\n  toggle(node.id)\n  emit('toggle', node, isCollapsed(node.id))\n}\n\nfunction onNodeClick(node: LayoutNode<T>, event: MouseEvent): void {\n  emit('node-click', node, event)\n  if (props.collapsible && node.hasChildren) toggleNode(node)\n}\n\n/** Вписывает дерево в видимую область. */\nfunction fit(padding?: number): void {\n  panZoom.fit({ width: layout.value.width, height: layout.value.height }, padding)\n}\n\nonMounted(() => {\n  if (props.fitOnMount) void nextTick(() => fit())\n})\n\nwatch(\n  () => panZoom.transform.value,\n  (transform) => emit('transform', transform),\n)\n\ndefineExpose({\n  fit,\n  zoomIn: panZoom.zoomIn,\n  zoomOut: panZoom.zoomOut,\n  resetTransform: panZoom.reset,\n  setTransform: panZoom.setTransform,\n  expandAll,\n  toggle,\n  layout,\n  transform: panZoom.transform,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootElement\"\n    class=\"tree-view\"\n    :class=\"{ 'tree-view--pannable': pannable, 'tree-view--content': size === 'content' }\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"tree-view__canvas\" :style=\"canvasStyle\">\n      <svg class=\"tree-view__links\" :width=\"layout.width\" :height=\"layout.height\">\n        <template v-for=\"link in layout.links\" :key=\"link.id\">\n          <slot name=\"link\" :link=\"link\">\n            <path class=\"tree-view__link\" :d=\"link.path\" />\n          </slot>\n        </template>\n      </svg>\n\n      <div\n        v-for=\"node in layout.nodes\"\n        :key=\"node.id\"\n        class=\"tree-view__node\"\n        :class=\"nodeClassOf(node)\"\n        :style=\"nodeStyle(node)\"\n        @click=\"onNodeClick(node, $event)\"\n      >\n        <!--\n          Главная точка кастомизации: сюда подставляют свою карточку.\n          Доступно всё, что может понадобиться для отрисовки и управления.\n        -->\n        <slot\n          name=\"node\"\n          :node=\"node\"\n          :data=\"node.data\"\n          :depth=\"node.depth\"\n          :collapsed=\"node.collapsed\"\n          :has-children=\"node.hasChildren\"\n          :toggle=\"() => toggleNode(node)\"\n        >\n          <TreeNodeCard\n            :label=\"labelOf(node)\"\n            :has-children=\"node.hasChildren\"\n            :collapsed=\"node.collapsed\"\n            @toggle=\"toggleNode(node)\"\n          />\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n","import type { App, Plugin } from 'vue'\nimport TreeView from './TreeView.vue'\nimport TreeNodeCard from './TreeNodeCard.vue'\n// Стили общие для Vue 2 и Vue 3 — лежат в core, чтобы не расходились.\n// Они попадают прямо в бандл и подключаются сами: отдельный импорт в проекте не нужен.\nimport { injectStyles } from '@bigplay/tree-view-core'\nimport styles from '@bigplay/tree-view-core/style.css?inline'\n\ninjectStyles(styles)\n\nexport { TreeView, TreeNodeCard }\nexport { useTreeLayout } from './useTreeLayout'\nexport { usePanZoom } from './usePanZoom'\n\n// Типы из core переэкспортируем, чтобы их не приходилось ставить отдельно.\nexport type {\n  Accessors,\n  Direction,\n  Layout,\n  LayoutLink,\n  LayoutNode,\n  LinkStyle,\n  ScaleLimits,\n  Transform,\n  TreeNode,\n  TreeViewOptions,\n} from '@bigplay/tree-view-core'\nexport { DEFAULT_OPTIONS } from '@bigplay/tree-view-core'\n\n/** Плагин: `app.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin: Plugin = {\n  install(app: App) {\n    app.component('TreeView', TreeView)\n    app.component('TreeNodeCard', TreeNodeCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["emit","__emit","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_toDisplayString","__props","_hoisted_3","usePanZoom","params","transform","ref","IDENTITY_TRANSFORM","controller","PanZoomController","next","watch","element","_previous","onCleanup","onBeforeUnmount","content","padding","useTreeLayout","collapsedIds","tree","computed","toTree","visibleTree","applyCollapsed","layout","layoutTree","isCollapsed","id","toggle","toggleCollapsed","expandAll","props","rootElement","panZoom","DEFAULT_SCALE_LIMITS","canvasStyle","toCssTransform","rootStyle","scale","nodeStyle","node","nodeClassOf","labelOf","data","toggleNode","onNodeClick","event","fit","onMounted","nextTick","__expose","_normalizeClass","_unref","_Fragment","_renderList","link","_renderSlot","_ctx","_normalizeStyle","$event","_createVNode","TreeNodeCard","injectStyles","styles","TreeViewPlugin","app","TreeView"],"mappings":"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"}

package/dist/usePanZoom.d.ts

@@ -0,0 +1,29 @@
+import { Ref } from 'vue';
+import { ScaleLimits, Size, Transform } from '@bigplay/tree-view-core';
+export interface UsePanZoomParams {
+    /** Элемент, который слушаем: по нему тянут и крутят колесо. */
+    element: Ref<HTMLElement | null>;
+    pannable: () => boolean;
+    zoomable: () => boolean;
+    limits: () => ScaleLimits;
+}
+/**
+ * Тонкая обёртка над `PanZoomController` из core:
+ * переносит его состояние в реактивный `ref` и следит за жизненным циклом.
+ */
+export declare function usePanZoom(params: UsePanZoomParams): {
+    transform: Ref<{
+        x: number;
+        y: number;
+        scale: number;
+    }, Transform | {
+        x: number;
+        y: number;
+        scale: number;
+    }>;
+    fit: (content: Size, padding?: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => void;
+    setTransform: (next: Transform) => void;
+};

package/dist/useTreeLayout.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef } from 'vue';
+import { Accessors, Layout, TreeViewOptions } from '@bigplay/tree-view-core';
+/** Функции-геттеры, чтобы композабл видел свежие значения пропов. */
+export interface UseTreeLayoutParams<T> {
+    data: () => T | T[] | null | undefined;
+    options: () => Partial<TreeViewOptions> | undefined;
+    accessors: () => Accessors<T>;
+}
+export interface UseTreeLayoutResult<T> {
+    /** Готовая раскладка: узлы с координатами и линии. */
+    layout: ComputedRef<Layout<T>>;
+    /** Свёрнут ли узел с таким id. */
+    isCollapsed: (id: string) => boolean;
+    /** Свернуть/развернуть узел. */
+    toggle: (id: string) => void;
+    /** Развернуть всё дерево. */
+    expandAll: () => void;
+}
+/**
+ * Вся «логика» компонента: данные → дерево → раскладка.
+ * Каждый шаг — отдельная чистая функция из core, здесь только реактивность.
+ */
+export declare function useTreeLayout<T>(params: UseTreeLayoutParams<T>): UseTreeLayoutResult<T>;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@bigplay/tree-view",
+  "version": "0.1.0",
+  "description": "Компонент дерева и турнирных сеток для Vue 3",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "tree",
+    "bracket",
+    "tournament",
+    "diagram"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@bigplay/tree-view-core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^15.11.7",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "vue-tsc": "^3.0.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dadashi44/tree-view.git",
+    "directory": "packages/vue3"
+  },
+  "homepage": "https://github.com/dadashi44/tree-view#readme",
+  "bugs": {
+    "url": "https://github.com/dadashi44/tree-view/issues"
+  },
+  "author": "Daniyar Kudaibergenev",
+  "publishConfig": {
+    "access": "public"
+  }
+}