@bigplay/tree-view-vue2 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# @bigplay/tree-view-vue2
+
+Дерево и турнирные сетки для Vue 2.6 / 2.7. Тот же компонент, что и
+[`@bigplay/tree-view`](https://www.npmjs.com/package/@bigplay/tree-view) для Vue 3:
+общий core, одинаковые пропы, события и классы стилей.
+
+```bash
+npm i @bigplay/tree-view-vue2
+```
+
+```js
+import Vue from 'vue'
+import { TreeView } from '@bigplay/tree-view-vue2'
+
+Vue.component('TreeView', TreeView)
+```
+
+```html
+<tree-view :data="data" :options="{ direction: 'right-to-left' }" collapsible>
+  <template #node="{ data, toggle }">
+    <div class="my-card" @click="toggle">{{ data.name }}</div>
+  </template>
+</tree-view>
+```
+
+Стили подключать не нужно — они внутри пакета и вставляются сами.
+
+Полная документация — в [корневом README](https://github.com/dadashi44/tree-view#readme).
+
+MIT

package/dist/TreeNodeCard.d.ts

@@ -0,0 +1,11 @@
+import { default as Vue } from 'vue';
+/**
+ * Карточка узла по умолчанию для Vue 2.
+ * Разметка и классы один в один как в Vue 3 — стили общие.
+ */
+declare const _default: import('vue/types/vue').ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, unknown, unknown, unknown, {
+    label: string;
+    hasChildren: boolean;
+    collapsed: boolean;
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin>;
+export default _default;

package/dist/TreeView.d.ts

@@ -0,0 +1,46 @@
+import { default as Vue, VNode } from 'vue';
+import { Layout, LayoutNode, ScaleLimits, Transform, TreeViewOptions } from '@bigplay/tree-view-core';
+/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */
+type NodeData = any;
+declare const _default: import('vue/types/vue').ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
+    /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */
+    collapsedIds: string[];
+    transform: Transform;
+}, {
+    /** Вписывает дерево в видимую область. */
+    fit(padding?: number): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetTransform(): void;
+    setTransform(transform: Transform): void;
+    /** Развернуть все свёрнутые ветки. */
+    expandAll(): void;
+    /** Свернуть или развернуть узел по id. */
+    toggle(id: string): void;
+    toggleNode(node: LayoutNode<NodeData>): void;
+    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void;
+    nodeStyle(node: LayoutNode<NodeData>): Record<string, string>;
+    nodeClassOf(node: LayoutNode<NodeData>): string | undefined;
+    /** Подпись карточки по умолчанию: name → title → label → id. */
+    labelOf(node: LayoutNode<NodeData>): string;
+    /** Своя карточка из scoped-слота или карточка по умолчанию. */
+    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[];
+}, {
+    layout: Layout<any>;
+    canvasStyle: Record<string, string>;
+    rootStyle: Record<string, string> | undefined;
+}, {
+    data: any;
+    options: Partial<TreeViewOptions>;
+    getId: ((item: any) => string | number | null | undefined) | undefined;
+    getChildren: ((item: any) => any[] | null | undefined) | undefined;
+    getParentId: ((item: any) => string | number | null | undefined) | undefined;
+    collapsible: boolean;
+    pannable: boolean;
+    zoomable: boolean;
+    fitOnMount: boolean;
+    size: string;
+    scaleLimits: ScaleLimits;
+    nodeClass: string | ((node: LayoutNode<NodeData>) => string);
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin>;
+export default _default;

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),s=require("@bigplay/tree-view-core"),a=n.extend({name:"TreeNodeCard",props:{label:{type:String,required:!0},hasChildren:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1}},render(e){const t=[e("span",{class:"tree-view-card__label"},this.label)];return this.hasChildren&&t.push(e("button",{class:"tree-view-card__toggle",attrs:{type:"button","data-tv-no-pan":"","aria-label":this.collapsed?"Развернуть":"Свернуть"},on:{click:l=>{l.stopPropagation(),this.$emit("toggle")}}},this.collapsed?"+":"−")),e("div",{class:"tree-view-card"},t)}}),o=new WeakMap,r=n.extend({name:"TreeView",props:{data:{type:[Object,Array],default:null},options:{type:Object,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:{type:String,default:"fill"},scaleLimits:{type:Object,default:void 0},nodeClass:{type:[String,Function],default:void 0}},data(){return{collapsedIds:[],transform:{x:0,y:0,scale:1}}},computed:{layout(){const e=s.toTree(this.data,{getId:this.getId,getChildren:this.getChildren,getParentId:this.getParentId});return s.layoutTree(s.applyCollapsed(e,new Set(this.collapsedIds)),this.options)},canvasStyle(){return{width:`${this.layout.width}px`,height:`${this.layout.height}px`,transform:s.toCssTransform(this.transform)}},rootStyle(){if(this.size==="content")return{width:`${this.layout.width*this.transform.scale}px`,height:`${this.layout.height*this.transform.scale}px`,overflow:"visible"}}},mounted(){const e=new s.PanZoomController({pannable:()=>this.pannable,zoomable:()=>this.zoomable,limits:this.scaleLimits?()=>this.scaleLimits:void 0,onChange:t=>{this.transform=t,this.$emit("transform",t)}});e.attach(this.$el),o.set(this,e),this.fitOnMount&&this.$nextTick(()=>this.fit())},beforeDestroy(){o.get(this)?.detach(),o.delete(this)},methods:{fit(e){o.get(this)?.fit({width:this.layout.width,height:this.layout.height},e)},zoomIn(){o.get(this)?.zoomIn()},zoomOut(){o.get(this)?.zoomOut()},resetTransform(){o.get(this)?.reset()},setTransform(e){o.get(this)?.set(e)},expandAll(){this.collapsedIds=[]},toggle(e){this.collapsedIds=[...s.toggleCollapsed(new Set(this.collapsedIds),e)]},toggleNode(e){this.toggle(e.id),this.$emit("toggle",e,this.collapsedIds.includes(e.id))},onNodeClick(e,t){this.$emit("node-click",e,t),this.collapsible&&e.hasChildren&&this.toggleNode(e)},nodeStyle(e){return{left:`${e.x}px`,top:`${e.y}px`,width:`${e.width}px`,height:`${e.height}px`}},nodeClassOf(e){return typeof this.nodeClass=="function"?this.nodeClass(e):this.nodeClass},labelOf(e){const t=e.data;return t?.name??t?.title??t?.label??e.id},renderNodeContent(e,t){const l=this.$scopedSlots.node;return l?l({node:t,data:t.data,depth:t.depth,collapsed:t.collapsed,hasChildren:t.hasChildren,toggle:()=>this.toggleNode(t)})??[]:e(a,{props:{label:this.labelOf(t),hasChildren:t.hasChildren,collapsed:t.collapsed},on:{toggle:()=>this.toggleNode(t)}})}},render(e){const t=this.layout,l=this.$scopedSlots.link,h=t.links.map(i=>l?l({link:i})??[]:e("path",{key:i.id,class:"tree-view__link",attrs:{d:i.path}})),c=t.nodes.map(i=>e("div",{key:i.id,class:["tree-view__node",this.nodeClassOf(i)],style:this.nodeStyle(i),on:{click:p=>this.onNodeClick(i,p)}},[].concat(this.renderNodeContent(e,i))));return e("div",{class:["tree-view",{"tree-view--pannable":this.pannable,"tree-view--content":this.size==="content"}],style:this.rootStyle},[e("div",{class:"tree-view__canvas",style:this.canvasStyle},[e("svg",{class:"tree-view__links",attrs:{width:t.width,height:t.height}},h),...c])])}}),u=".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}";s.injectStyles(u);const d={install(e){e.component("TreeView",r),e.component("TreeNodeCard",a)}};Object.defineProperty(exports,"DEFAULT_OPTIONS",{enumerable:!0,get:()=>s.DEFAULT_OPTIONS});exports.TreeNodeCard=a;exports.TreeView=r;exports.TreeViewPlugin=d;exports.default=d;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/TreeNodeCard.ts","../src/TreeView.ts","../src/index.ts"],"sourcesContent":["import Vue from 'vue'\n\n/**\n * Карточка узла по умолчанию для Vue 2.\n * Разметка и классы один в один как в Vue 3 — стили общие.\n */\nexport default Vue.extend({\n  name: 'TreeNodeCard',\n  props: {\n    label: { type: String, required: true },\n    hasChildren: { type: Boolean, default: false },\n    collapsed: { type: Boolean, default: false },\n  },\n  render(h) {\n    const children = [h('span', { class: 'tree-view-card__label' }, this.label)]\n\n    if (this.hasChildren) {\n      children.push(\n        h(\n          'button',\n          {\n            class: 'tree-view-card__toggle',\n            attrs: {\n              type: 'button',\n              'data-tv-no-pan': '',\n              'aria-label': this.collapsed ? 'Развернуть' : 'Свернуть',\n            },\n            on: {\n              click: (event: MouseEvent) => {\n                event.stopPropagation()\n                this.$emit('toggle')\n              },\n            },\n          },\n          this.collapsed ? '+' : '−',\n        ),\n      )\n    }\n\n    return h('div', { class: 'tree-view-card' }, children)\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  applyCollapsed,\n  layoutTree,\n  PanZoomController,\n  toCssTransform,\n  toggleCollapsed,\n  toTree,\n  type Accessors,\n  type Layout,\n  type LayoutNode,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard'\n\n/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */\ntype NodeData = any\n\n/**\n * Контроллеры держим здесь, а не в data(): Vue 2 сделал бы объект реактивным,\n * а внутри него DOM-элемент и Map — наблюдать за ними незачем.\n */\nconst controllers = new WeakMap<Vue, PanZoomController>()\n\nexport default Vue.extend({\n  name: 'TreeView',\n  props: {\n    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: { type: [Object, Array] as PropType<NodeData>, default: null },\n    /** Размеры и направление. Можно передать только часть полей. */\n    options: { type: Object as PropType<Partial<TreeViewOptions>>, default: undefined },\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId: { type: Function as PropType<Accessors<NodeData>['getId']>, default: undefined },\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren: { type: Function as PropType<Accessors<NodeData>['getChildren']>, default: undefined },\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId: { type: Function as PropType<Accessors<NodeData>['getParentId']>, default: undefined },\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible: { type: Boolean, default: false },\n    /** Разрешить перетаскивание холста. */\n    pannable: { type: Boolean, default: true },\n    /** Разрешить зум колесом и «щипком». */\n    zoomable: { type: Boolean, default: true },\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount: { type: Boolean, default: true },\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     */\n    size: { type: String as PropType<'fill' | 'content'>, default: 'fill' },\n    /** Пределы масштаба. */\n    scaleLimits: { type: Object as PropType<ScaleLimits>, default: undefined },\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass: {\n      type: [String, Function] as PropType<string | ((node: LayoutNode<NodeData>) => string)>,\n      default: undefined,\n    },\n  },\n\n  data() {\n    return {\n      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */\n      collapsedIds: [] as string[],\n      transform: { x: 0, y: 0, scale: 1 } as Transform,\n    }\n  },\n\n  computed: {\n    layout(): Layout<NodeData> {\n      const tree = toTree<NodeData>(this.data, {\n        getId: this.getId,\n        getChildren: this.getChildren,\n        getParentId: this.getParentId,\n      })\n\n      return layoutTree(applyCollapsed(tree, new Set(this.collapsedIds)), this.options)\n    },\n\n    canvasStyle(): Record<string, string> {\n      return {\n        width: `${this.layout.width}px`,\n        height: `${this.layout.height}px`,\n        transform: toCssTransform(this.transform),\n      }\n    },\n\n    rootStyle(): Record<string, string> | undefined {\n      if (this.size !== 'content') return undefined\n\n      return {\n        width: `${this.layout.width * this.transform.scale}px`,\n        height: `${this.layout.height * this.transform.scale}px`,\n        overflow: 'visible',\n      }\n    },\n  },\n\n  mounted() {\n    const controller = new PanZoomController({\n      pannable: () => this.pannable,\n      zoomable: () => this.zoomable,\n      limits: this.scaleLimits ? () => this.scaleLimits : undefined,\n      onChange: (transform) => {\n        this.transform = transform\n        this.$emit('transform', transform)\n      },\n    })\n\n    controller.attach(this.$el as HTMLElement)\n    controllers.set(this, controller)\n\n    if (this.fitOnMount) this.$nextTick(() => this.fit())\n  },\n\n  beforeDestroy() {\n    controllers.get(this)?.detach()\n    controllers.delete(this)\n  },\n\n  methods: {\n    /** Вписывает дерево в видимую область. */\n    fit(padding?: number): void {\n      controllers.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, padding)\n    },\n    zoomIn(): void {\n      controllers.get(this)?.zoomIn()\n    },\n    zoomOut(): void {\n      controllers.get(this)?.zoomOut()\n    },\n    resetTransform(): void {\n      controllers.get(this)?.reset()\n    },\n    setTransform(transform: Transform): void {\n      controllers.get(this)?.set(transform)\n    },\n    /** Развернуть все свёрнутые ветки. */\n    expandAll(): void {\n      this.collapsedIds = []\n    },\n    /** Свернуть или развернуть узел по id. */\n    toggle(id: string): void {\n      this.collapsedIds = [...toggleCollapsed(new Set(this.collapsedIds), id)]\n    },\n\n    toggleNode(node: LayoutNode<NodeData>): void {\n      this.toggle(node.id)\n      this.$emit('toggle', node, this.collapsedIds.includes(node.id))\n    },\n\n    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void {\n      this.$emit('node-click', node, event)\n      if (this.collapsible && node.hasChildren) this.toggleNode(node)\n    },\n\n    nodeStyle(node: LayoutNode<NodeData>): Record<string, string> {\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\n    nodeClassOf(node: LayoutNode<NodeData>): string | undefined {\n      return typeof this.nodeClass === 'function' ? this.nodeClass(node) : this.nodeClass\n    },\n\n    /** Подпись карточки по умолчанию: name → title → label → id. */\n    labelOf(node: LayoutNode<NodeData>): 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\n    /** Своя карточка из scoped-слота или карточка по умолчанию. */\n    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[] {\n      const slot = this.$scopedSlots.node\n\n      if (slot) {\n        return (slot({\n          node,\n          data: node.data,\n          depth: node.depth,\n          collapsed: node.collapsed,\n          hasChildren: node.hasChildren,\n          toggle: () => this.toggleNode(node),\n        }) ?? []) as VNode[]\n      }\n\n      return h(TreeNodeCard, {\n        props: { label: this.labelOf(node), hasChildren: node.hasChildren, collapsed: node.collapsed },\n        on: { toggle: () => this.toggleNode(node) },\n      })\n    },\n  },\n\n  render(h): VNode {\n    const layout = this.layout\n    const linkSlot = this.$scopedSlots.link\n\n    const links = layout.links.map((link) =>\n      linkSlot\n        ? ((linkSlot({ link }) ?? []) as VNode[])\n        : h('path', { key: link.id, class: 'tree-view__link', attrs: { d: link.path } }),\n    )\n\n    const nodes = layout.nodes.map((node) =>\n      h(\n        'div',\n        {\n          key: node.id,\n          class: ['tree-view__node', this.nodeClassOf(node)],\n          style: this.nodeStyle(node),\n          on: { click: (event: MouseEvent) => this.onNodeClick(node, event) },\n        },\n        ([] as VNode[]).concat(this.renderNodeContent(h, node)),\n      ),\n    )\n\n    return h(\n      'div',\n      {\n        class: [\n          'tree-view',\n          { 'tree-view--pannable': this.pannable, 'tree-view--content': this.size === 'content' },\n        ],\n        style: this.rootStyle,\n      },\n      [\n        h('div', { class: 'tree-view__canvas', style: this.canvasStyle }, [\n          h(\n            'svg',\n            {\n              class: 'tree-view__links',\n              attrs: { width: layout.width, height: layout.height },\n            },\n            links as VNode[],\n          ),\n          ...nodes,\n        ]),\n      ],\n    )\n  },\n})\n","import type { VueConstructor } from 'vue'\nimport TreeView from './TreeView'\nimport TreeNodeCard from './TreeNodeCard'\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 }\n\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/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin = {\n  install(Vue: VueConstructor) {\n    Vue.component('TreeView', TreeView)\n    Vue.component('TreeNodeCard', TreeNodeCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["TreeNodeCard","Vue","h","children","event","controllers","TreeView","tree","toTree","layoutTree","applyCollapsed","toCssTransform","controller","PanZoomController","transform","padding","id","toggleCollapsed","node","data","slot","layout","linkSlot","links","link","nodes","injectStyles","styles","TreeViewPlugin"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { VueConstructor } from 'vue';
+import { default as TreeView } from './TreeView';
+import { default as TreeNodeCard } from './TreeNodeCard';
+export { TreeView, TreeNodeCard };
+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';
+/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */
+export declare const TreeViewPlugin: {
+    install(Vue: VueConstructor): void;
+};
+export default TreeViewPlugin;

package/dist/index.js

@@ -0,0 +1,230 @@
+import l from "vue";
+import { toggleCollapsed as h, PanZoomController as c, toCssTransform as p, toTree as g, layoutTree as v, applyCollapsed as f, injectStyles as u } from "@bigplay/tree-view-core";
+import { DEFAULT_OPTIONS as k } from "@bigplay/tree-view-core";
+const a = l.extend({
+  name: "TreeNodeCard",
+  props: {
+    label: { type: String, required: !0 },
+    hasChildren: { type: Boolean, default: !1 },
+    collapsed: { type: Boolean, default: !1 }
+  },
+  render(e) {
+    const t = [e("span", { class: "tree-view-card__label" }, this.label)];
+    return this.hasChildren && t.push(
+      e(
+        "button",
+        {
+          class: "tree-view-card__toggle",
+          attrs: {
+            type: "button",
+            "data-tv-no-pan": "",
+            "aria-label": this.collapsed ? "Развернуть" : "Свернуть"
+          },
+          on: {
+            click: (s) => {
+              s.stopPropagation(), this.$emit("toggle");
+            }
+          }
+        },
+        this.collapsed ? "+" : "−"
+      )
+    ), e("div", { class: "tree-view-card" }, t);
+  }
+}), o = /* @__PURE__ */ new WeakMap(), w = l.extend({
+  name: "TreeView",
+  props: {
+    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */
+    data: { type: [Object, Array], default: null },
+    /** Размеры и направление. Можно передать только часть полей. */
+    options: { type: Object, default: void 0 },
+    /** Как достать id узла. По умолчанию — поле `id`. */
+    getId: { type: Function, default: void 0 },
+    /** Как достать детей. По умолчанию — поле `children`. */
+    getChildren: { type: Function, default: void 0 },
+    /** Как достать id родителя. Передан — значит данные плоские. */
+    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 },
+    /**
+     * Как компонент занимает место:
+     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;
+     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.
+     */
+    size: { type: String, default: "fill" },
+    /** Пределы масштаба. */
+    scaleLimits: { type: Object, default: void 0 },
+    /** Дополнительный класс на обёртке узла — строкой или функцией. */
+    nodeClass: {
+      type: [String, Function],
+      default: void 0
+    }
+  },
+  data() {
+    return {
+      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */
+      collapsedIds: [],
+      transform: { x: 0, y: 0, scale: 1 }
+    };
+  },
+  computed: {
+    layout() {
+      const e = g(this.data, {
+        getId: this.getId,
+        getChildren: this.getChildren,
+        getParentId: this.getParentId
+      });
+      return v(f(e, new Set(this.collapsedIds)), this.options);
+    },
+    canvasStyle() {
+      return {
+        width: `${this.layout.width}px`,
+        height: `${this.layout.height}px`,
+        transform: p(this.transform)
+      };
+    },
+    rootStyle() {
+      if (this.size === "content")
+        return {
+          width: `${this.layout.width * this.transform.scale}px`,
+          height: `${this.layout.height * this.transform.scale}px`,
+          overflow: "visible"
+        };
+    }
+  },
+  mounted() {
+    const e = new c({
+      pannable: () => this.pannable,
+      zoomable: () => this.zoomable,
+      limits: this.scaleLimits ? () => this.scaleLimits : void 0,
+      onChange: (t) => {
+        this.transform = t, this.$emit("transform", t);
+      }
+    });
+    e.attach(this.$el), o.set(this, e), this.fitOnMount && this.$nextTick(() => this.fit());
+  },
+  beforeDestroy() {
+    o.get(this)?.detach(), o.delete(this);
+  },
+  methods: {
+    /** Вписывает дерево в видимую область. */
+    fit(e) {
+      o.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, e);
+    },
+    zoomIn() {
+      o.get(this)?.zoomIn();
+    },
+    zoomOut() {
+      o.get(this)?.zoomOut();
+    },
+    resetTransform() {
+      o.get(this)?.reset();
+    },
+    setTransform(e) {
+      o.get(this)?.set(e);
+    },
+    /** Развернуть все свёрнутые ветки. */
+    expandAll() {
+      this.collapsedIds = [];
+    },
+    /** Свернуть или развернуть узел по id. */
+    toggle(e) {
+      this.collapsedIds = [...h(new Set(this.collapsedIds), e)];
+    },
+    toggleNode(e) {
+      this.toggle(e.id), this.$emit("toggle", e, this.collapsedIds.includes(e.id));
+    },
+    onNodeClick(e, t) {
+      this.$emit("node-click", e, t), this.collapsible && e.hasChildren && this.toggleNode(e);
+    },
+    nodeStyle(e) {
+      return {
+        left: `${e.x}px`,
+        top: `${e.y}px`,
+        width: `${e.width}px`,
+        height: `${e.height}px`
+      };
+    },
+    nodeClassOf(e) {
+      return typeof this.nodeClass == "function" ? this.nodeClass(e) : this.nodeClass;
+    },
+    /** Подпись карточки по умолчанию: name → title → label → id. */
+    labelOf(e) {
+      const t = e.data;
+      return t?.name ?? t?.title ?? t?.label ?? e.id;
+    },
+    /** Своя карточка из scoped-слота или карточка по умолчанию. */
+    renderNodeContent(e, t) {
+      const s = this.$scopedSlots.node;
+      return s ? s({
+        node: t,
+        data: t.data,
+        depth: t.depth,
+        collapsed: t.collapsed,
+        hasChildren: t.hasChildren,
+        toggle: () => this.toggleNode(t)
+      }) ?? [] : e(a, {
+        props: { label: this.labelOf(t), hasChildren: t.hasChildren, collapsed: t.collapsed },
+        on: { toggle: () => this.toggleNode(t) }
+      });
+    }
+  },
+  render(e) {
+    const t = this.layout, s = this.$scopedSlots.link, n = t.links.map(
+      (i) => s ? s({ link: i }) ?? [] : e("path", { key: i.id, class: "tree-view__link", attrs: { d: i.path } })
+    ), r = t.nodes.map(
+      (i) => e(
+        "div",
+        {
+          key: i.id,
+          class: ["tree-view__node", this.nodeClassOf(i)],
+          style: this.nodeStyle(i),
+          on: { click: (d) => this.onNodeClick(i, d) }
+        },
+        [].concat(this.renderNodeContent(e, i))
+      )
+    );
+    return e(
+      "div",
+      {
+        class: [
+          "tree-view",
+          { "tree-view--pannable": this.pannable, "tree-view--content": this.size === "content" }
+        ],
+        style: this.rootStyle
+      },
+      [
+        e("div", { class: "tree-view__canvas", style: this.canvasStyle }, [
+          e(
+            "svg",
+            {
+              class: "tree-view__links",
+              attrs: { width: t.width, height: t.height }
+            },
+            n
+          ),
+          ...r
+        ])
+      ]
+    );
+  }
+}), b = ".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}";
+u(b);
+const x = {
+  install(e) {
+    e.component("TreeView", w), e.component("TreeNodeCard", a);
+  }
+};
+export {
+  k as DEFAULT_OPTIONS,
+  a as TreeNodeCard,
+  w as TreeView,
+  x as TreeViewPlugin,
+  x as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/TreeNodeCard.ts","../src/TreeView.ts","../src/index.ts"],"sourcesContent":["import Vue from 'vue'\n\n/**\n * Карточка узла по умолчанию для Vue 2.\n * Разметка и классы один в один как в Vue 3 — стили общие.\n */\nexport default Vue.extend({\n  name: 'TreeNodeCard',\n  props: {\n    label: { type: String, required: true },\n    hasChildren: { type: Boolean, default: false },\n    collapsed: { type: Boolean, default: false },\n  },\n  render(h) {\n    const children = [h('span', { class: 'tree-view-card__label' }, this.label)]\n\n    if (this.hasChildren) {\n      children.push(\n        h(\n          'button',\n          {\n            class: 'tree-view-card__toggle',\n            attrs: {\n              type: 'button',\n              'data-tv-no-pan': '',\n              'aria-label': this.collapsed ? 'Развернуть' : 'Свернуть',\n            },\n            on: {\n              click: (event: MouseEvent) => {\n                event.stopPropagation()\n                this.$emit('toggle')\n              },\n            },\n          },\n          this.collapsed ? '+' : '−',\n        ),\n      )\n    }\n\n    return h('div', { class: 'tree-view-card' }, children)\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  applyCollapsed,\n  layoutTree,\n  PanZoomController,\n  toCssTransform,\n  toggleCollapsed,\n  toTree,\n  type Accessors,\n  type Layout,\n  type LayoutNode,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard'\n\n/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */\ntype NodeData = any\n\n/**\n * Контроллеры держим здесь, а не в data(): Vue 2 сделал бы объект реактивным,\n * а внутри него DOM-элемент и Map — наблюдать за ними незачем.\n */\nconst controllers = new WeakMap<Vue, PanZoomController>()\n\nexport default Vue.extend({\n  name: 'TreeView',\n  props: {\n    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: { type: [Object, Array] as PropType<NodeData>, default: null },\n    /** Размеры и направление. Можно передать только часть полей. */\n    options: { type: Object as PropType<Partial<TreeViewOptions>>, default: undefined },\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId: { type: Function as PropType<Accessors<NodeData>['getId']>, default: undefined },\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren: { type: Function as PropType<Accessors<NodeData>['getChildren']>, default: undefined },\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId: { type: Function as PropType<Accessors<NodeData>['getParentId']>, default: undefined },\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible: { type: Boolean, default: false },\n    /** Разрешить перетаскивание холста. */\n    pannable: { type: Boolean, default: true },\n    /** Разрешить зум колесом и «щипком». */\n    zoomable: { type: Boolean, default: true },\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount: { type: Boolean, default: true },\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     */\n    size: { type: String as PropType<'fill' | 'content'>, default: 'fill' },\n    /** Пределы масштаба. */\n    scaleLimits: { type: Object as PropType<ScaleLimits>, default: undefined },\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass: {\n      type: [String, Function] as PropType<string | ((node: LayoutNode<NodeData>) => string)>,\n      default: undefined,\n    },\n  },\n\n  data() {\n    return {\n      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */\n      collapsedIds: [] as string[],\n      transform: { x: 0, y: 0, scale: 1 } as Transform,\n    }\n  },\n\n  computed: {\n    layout(): Layout<NodeData> {\n      const tree = toTree<NodeData>(this.data, {\n        getId: this.getId,\n        getChildren: this.getChildren,\n        getParentId: this.getParentId,\n      })\n\n      return layoutTree(applyCollapsed(tree, new Set(this.collapsedIds)), this.options)\n    },\n\n    canvasStyle(): Record<string, string> {\n      return {\n        width: `${this.layout.width}px`,\n        height: `${this.layout.height}px`,\n        transform: toCssTransform(this.transform),\n      }\n    },\n\n    rootStyle(): Record<string, string> | undefined {\n      if (this.size !== 'content') return undefined\n\n      return {\n        width: `${this.layout.width * this.transform.scale}px`,\n        height: `${this.layout.height * this.transform.scale}px`,\n        overflow: 'visible',\n      }\n    },\n  },\n\n  mounted() {\n    const controller = new PanZoomController({\n      pannable: () => this.pannable,\n      zoomable: () => this.zoomable,\n      limits: this.scaleLimits ? () => this.scaleLimits : undefined,\n      onChange: (transform) => {\n        this.transform = transform\n        this.$emit('transform', transform)\n      },\n    })\n\n    controller.attach(this.$el as HTMLElement)\n    controllers.set(this, controller)\n\n    if (this.fitOnMount) this.$nextTick(() => this.fit())\n  },\n\n  beforeDestroy() {\n    controllers.get(this)?.detach()\n    controllers.delete(this)\n  },\n\n  methods: {\n    /** Вписывает дерево в видимую область. */\n    fit(padding?: number): void {\n      controllers.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, padding)\n    },\n    zoomIn(): void {\n      controllers.get(this)?.zoomIn()\n    },\n    zoomOut(): void {\n      controllers.get(this)?.zoomOut()\n    },\n    resetTransform(): void {\n      controllers.get(this)?.reset()\n    },\n    setTransform(transform: Transform): void {\n      controllers.get(this)?.set(transform)\n    },\n    /** Развернуть все свёрнутые ветки. */\n    expandAll(): void {\n      this.collapsedIds = []\n    },\n    /** Свернуть или развернуть узел по id. */\n    toggle(id: string): void {\n      this.collapsedIds = [...toggleCollapsed(new Set(this.collapsedIds), id)]\n    },\n\n    toggleNode(node: LayoutNode<NodeData>): void {\n      this.toggle(node.id)\n      this.$emit('toggle', node, this.collapsedIds.includes(node.id))\n    },\n\n    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void {\n      this.$emit('node-click', node, event)\n      if (this.collapsible && node.hasChildren) this.toggleNode(node)\n    },\n\n    nodeStyle(node: LayoutNode<NodeData>): Record<string, string> {\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\n    nodeClassOf(node: LayoutNode<NodeData>): string | undefined {\n      return typeof this.nodeClass === 'function' ? this.nodeClass(node) : this.nodeClass\n    },\n\n    /** Подпись карточки по умолчанию: name → title → label → id. */\n    labelOf(node: LayoutNode<NodeData>): 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\n    /** Своя карточка из scoped-слота или карточка по умолчанию. */\n    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[] {\n      const slot = this.$scopedSlots.node\n\n      if (slot) {\n        return (slot({\n          node,\n          data: node.data,\n          depth: node.depth,\n          collapsed: node.collapsed,\n          hasChildren: node.hasChildren,\n          toggle: () => this.toggleNode(node),\n        }) ?? []) as VNode[]\n      }\n\n      return h(TreeNodeCard, {\n        props: { label: this.labelOf(node), hasChildren: node.hasChildren, collapsed: node.collapsed },\n        on: { toggle: () => this.toggleNode(node) },\n      })\n    },\n  },\n\n  render(h): VNode {\n    const layout = this.layout\n    const linkSlot = this.$scopedSlots.link\n\n    const links = layout.links.map((link) =>\n      linkSlot\n        ? ((linkSlot({ link }) ?? []) as VNode[])\n        : h('path', { key: link.id, class: 'tree-view__link', attrs: { d: link.path } }),\n    )\n\n    const nodes = layout.nodes.map((node) =>\n      h(\n        'div',\n        {\n          key: node.id,\n          class: ['tree-view__node', this.nodeClassOf(node)],\n          style: this.nodeStyle(node),\n          on: { click: (event: MouseEvent) => this.onNodeClick(node, event) },\n        },\n        ([] as VNode[]).concat(this.renderNodeContent(h, node)),\n      ),\n    )\n\n    return h(\n      'div',\n      {\n        class: [\n          'tree-view',\n          { 'tree-view--pannable': this.pannable, 'tree-view--content': this.size === 'content' },\n        ],\n        style: this.rootStyle,\n      },\n      [\n        h('div', { class: 'tree-view__canvas', style: this.canvasStyle }, [\n          h(\n            'svg',\n            {\n              class: 'tree-view__links',\n              attrs: { width: layout.width, height: layout.height },\n            },\n            links as VNode[],\n          ),\n          ...nodes,\n        ]),\n      ],\n    )\n  },\n})\n","import type { VueConstructor } from 'vue'\nimport TreeView from './TreeView'\nimport TreeNodeCard from './TreeNodeCard'\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 }\n\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/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin = {\n  install(Vue: VueConstructor) {\n    Vue.component('TreeView', TreeView)\n    Vue.component('TreeNodeCard', TreeNodeCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["TreeNodeCard","Vue","h","children","event","controllers","TreeView","tree","toTree","layoutTree","applyCollapsed","toCssTransform","controller","PanZoomController","transform","padding","id","toggleCollapsed","node","data","slot","layout","linkSlot","links","link","nodes","injectStyles","styles","TreeViewPlugin"],"mappings":"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"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@bigplay/tree-view-vue2",
+  "version": "0.1.0",
+  "description": "Компонент дерева и турнирных сеток для Vue 2.6 / 2.7",
+  "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",
+    "vue2",
+    "tree",
+    "bracket",
+    "tournament",
+    "diagram"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@bigplay/tree-view-core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^2.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.0",
+    "@vue/test-utils": "^1.3.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": "^2.7.16",
+    "vue-template-compiler": "^2.7.16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dadashi44/tree-view.git",
+    "directory": "packages/vue2"
+  },
+  "homepage": "https://github.com/dadashi44/tree-view#readme",
+  "bugs": {
+    "url": "https://github.com/dadashi44/tree-view/issues"
+  },
+  "author": "Daniyar Kudaibergenev",
+  "publishConfig": {
+    "access": "public"
+  }
+}