@pantograph/vue 0.5.0 → 0.6.2

package/dist/Tree/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("../class-CjZYGZDW.js"),Z=require("class-variance-authority"),le=require("../omit-C_ZXwm9T.js"),W=require("radix-vue"),J=require("lodash-es"),se=require("sortablejs"),D=require("../options-B4iSAKol.js"),ie=require("../IndentLevel.vue_vue_type_style_index_0_lang-B_x8tshB.js"),de=require("../Icon.vue_vue_type_style_index_0_lang-D-jaUivh.js"),ce=require("../Checkbox.vue_vue_type_style_index_0_lang-BQeNpCYy.js");var ue=1,ge=4;function B(F){return le.baseClone(F,ue|ge)}const ee=["sm","md","lg"],Q={none:"gap-none",sm:"gap-sm",md:"gap-md",lg:"gap-lg"},[te,ne]=W.createContext("CheckboxGroup"),ve=["tabindex"],me={class:"ms-200"},pe=["data-parents","data-level"],fe=e.defineComponent({...D.getComponentOptions("TreeNode"),__name:"TreeNode",props:{item:{},level:{default:1},hovered:{type:Boolean},parentKeys:{}},setup(F){const s=F,t=te(),y=Z.cva(t.prefixes.node,{variants:{disabled:g.generateVariantClassList("disabled",t.prefixes.node),active:g.generateVariantClassList("active",t.prefixes.node)}}),p=e.computed(()=>{switch(t.size.value){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}}),T=e.computed(()=>{switch(t.size.value){case"sm":return"2xsm";default:return"xsm"}}),C=n=>t.getNodeField(n,"children"),S=n=>t.getNodeField(n,"key"),z=e.computed(()=>C(s.item)),O=e.computed(()=>t.getNodeField(s.item,"leaf")),E=e.computed(()=>t.draggable.value?t.getNodeField(s.item,"draggable")??!0:!1),b=e.computed(()=>S(s.item)),N=e.computed(()=>t.getNodeField(s.item,"disabled")),w=e.computed(()=>{var n;return!!((n=z.value)!=null&&n.some(a=>t.expandedKeys.value.includes(S(a))))}),v=e.inject("tree-node-context",{hovered:e.ref(s.hovered??!1),expanded:e.ref(!1),childExpanded:w}),_=e.computed(()=>!(s.item.dragging??!1)&&t.expandedKeys.value.includes(b.value)),h=e.ref(!1),x=n=>{h.value=n};e.watch(h,n=>{t.showLine.value&&v.hovered&&(v.hovered.value=n)}),e.provide("tree-node-context",{expanded:_,childExpanded:w,hovered:h});const k=e.computed(()=>{var n,a,l;if(t.dragging.value)return!1;if(t.showLine.value){if(s.hovered||(n=v.hovered)!=null&&n.value||h.value)return"all";if(_.value&&!w.value)return"self";if((a=v.expanded)!=null&&a.value&&!((l=v.childExpanded)!=null&&l.value))return"last"}}),P=e.computed(()=>{var n;return!((n=z.value)!=null&&n.length)}),R=()=>{N.value||t.onSelect(s.item)},j=e.computed(()=>t.model.value.includes(b.value)),G=e.computed(()=>{const n=(m=s.item)=>{const d=C(m);return(d==null?void 0:d.length)&&d.every(c=>t.checked.value.includes(S(c)))},a=(m=s.item)=>{const d=C(m);return d!=null&&d.length?!!(d!=null&&d.some(c=>t.checked.value.includes(S(c))||a(c))):!1},l=t.checked.value.includes(b.value);return n()?(l||t.onCheck(s.item),!0):a()?(l&&t.onCheck(s.item),"indeterminate"):!!l}),U=()=>{var l;if(!((l=z.value)!=null&&l.length))return t.onCheck(s.item);const n=(f=s.item)=>{const m=C(f);return m!=null&&m.length?m.reduce((d,c)=>{const r=C(c),u=S(c);return r!=null&&r.length?[...d,u,...n(c)]:[...d,u]},[]):[]},a=n();return t.onCheck(s.item,{keys:[b.value,...a],value:!t.checked.value.includes(b.value)})},L=e.computed(()=>[...s.parentKeys??[],b.value]),K=()=>{t.onExpandKey(s.item)},V=e.computed(()=>s.item.dragging_level??s.level),A=e.computed(()=>V.value+1),$=e.ref(),i=e.ref();t.useSortable({root:$,instance:i});const o=e.computed(()=>{switch(t.size.value){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}});return(n,a)=>{const l=e.resolveComponent("TreeNode",!0);return e.openBlock(),e.createBlock(e.unref(W.Primitive),{asChild:P.value,key:P.value,"data-parents":e.unref(t).draggable.value?n.parentKeys:void 0,"data-key":e.unref(t).draggable.value?b.value:void 0,"data-draggable":e.unref(t).draggable.value?!e.unref(t).disabled.value&&!N.value&&E.value:void 0,class:e.normalizeClass([{[e.unref(t).prefixes.group]:!P.value},e.unref(t).getNodeField(n.item,"class")])},{default:e.withCtx(()=>{var f,m;return[e.createElementVNode("div",{tabindex:N.value?void 0:0,class:e.normalizeClass([e.unref(y)({disabled:N.value,active:j.value}),e.unref(t).getNodeField(n.item,"class")]),onMouseenter:a[1]||(a[1]=d=>x(!0)),onMouseleave:a[2]||(a[2]=d=>x(!1)),onClick:R},[e.unref(t).draggable.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(t).prefixes.draggable)},[!n.item.dragging&&!e.unref(t).dragging.value?(e.openBlock(),e.createBlock(de._sfc_main,{key:0,icon:"tabler:grip-vertical",size:T.value,class:e.normalizeClass(e.unref(t).prefixes.draggableIcon)},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"dragTrigger",e.normalizeProps(e.guardReactiveProps(n.item)))]),_:3},8,["size","class"])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createVNode(ie._sfc_main,{level:V.value,children:!!((f=z.value)!=null&&f.length||e.unref(t).lazyLoad.value&&!O.value),size:o.value,expanded:_.value,showLine:k.value,loading:e.unref(t).getNodeField(n.item,"loading"),"branch-icon":e.unref(t).getNodeField(n.item,"switcherIcon")??e.unref(t).switcherIcon.value,"no-rotate-branch":e.unref(t).getNodeField(n.item,"noRotateSwitcherIcon")??e.unref(t).noRotateSwitcherIcon.value,onToggleExpand:e.withModifiers(K,["stop"])},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"switcherIcon",e.mergeProps({expanded:_.value},n.item))]),_:3},8,["level","children","size","expanded","showLine","loading","branch-icon","no-rotate-branch"]),!n.item.dragging||!e.unref(t).dragging.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(t).checkbox.value?(e.openBlock(),e.createBlock(ce._sfc_main,{key:0,size:p.value,onClick:a[0]||(a[0]=e.withModifiers(()=>{},["stop"])),checked:G.value,"onUpdate:checked":U,disabled:N.value||e.unref(t).disabled.value},null,8,["size","checked","disabled"])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"title",e.normalizeProps(e.guardReactiveProps(n.item)),()=>[e.createElementVNode("div",me,e.toDisplayString(e.unref(t).getNodeField(n.item,"title")),1)])],64)):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(e.unref(g.getBemElement)(e.unref(t).prefixes.node,"slot"))},null,2))],42,ve),(m=z.value)!=null&&m.length?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(t).prefixes.groupList),ref_key:"root",ref:$,"data-parents":e.unref(t).draggable.value?L.value:void 0,"data-level":e.unref(t).draggable.value?A.value:void 0},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C(n.item),d=>{var c;return e.openBlock(),e.createBlock(l,{key:e.unref(t).getNodeField(d,"key"),parentKeys:L.value,item:d,level:A.value,hovered:s.hovered||h.value||((c=e.unref(v).hovered)==null?void 0:c.value)},{title:e.withCtx(r=>[e.renderSlot(n.$slots,"title",e.mergeProps({ref_for:!0},r))]),switcherIcon:e.withCtx(r=>[e.renderSlot(n.$slots,"switcherIcon",e.mergeProps({ref_for:!0},r))]),dragTrigger:e.withCtx(r=>[e.renderSlot(n.$slots,"dragTrigger",e.mergeProps({ref_for:!0},r))]),_:2},1032,["parentKeys","item","level","hovered"])}),128))],10,pe)),[[e.vShow,_.value]]):e.createCommentVNode("",!0)]}),_:3},8,["asChild","data-parents","data-key","data-draggable","class"])}}}),ae=e.defineComponent({...D.getComponentOptions("Tree"),__name:"Tree",props:{class:{},size:{default:"md"},gap:{},data:{},value:{},checkedKeys:{},expandedKeys:{},multiple:{type:Boolean},checkbox:{type:Boolean},defaultExpandAll:{type:Boolean},selectable:{type:Boolean},showLine:{type:Boolean},inlineNode:{type:Boolean},lazyLoad:{type:Boolean},fieldNames:{},groupName:{},switcherIcon:{},noRotateSwitcherIcon:{type:Boolean},draggable:{type:Boolean},disabled:{type:Boolean}},emits:["update:value","update:expandedKeys","update:checkedKeys","expand","select","check","dragStart","dragEnd"],setup(F,{emit:s}){const t=F,y=s,p=g.getBemBlock("tree"),T=g.getBemElement(p,"node"),C=g.getBemElement(T,"group"),S=g.getBemElement(T,"draggable"),z=g.getBemElement(S,"icon"),O=g.getBemElement(C,"list"),E={node:T,group:C,draggable:S,draggableIcon:z,groupList:O},b=Z.cva(p,{variants:{size:g.generateVariantClassList(ee,p),gap:g.generateVariantClassList(Q,p),selectable:g.generateVariantClassList("selectable",p),disabled:g.generateVariantClassList("disabled",p),inlineNode:g.generateVariantClassList("inline-node",p),dragging:g.generateVariantClassList("dragging",p)}}),N=e.computed(()=>B(t.data)),w=e.ref(N.value),v=(i,o)=>{var a;const n=J.get(i,o);return(a=t.fieldNames)!=null&&a[o]?J.get(i,t.fieldNames[o],n):n},_=()=>{if(!t.lazyLoad){const i=[],o=n=>{for(const a of n){const l=v(a,"children");l!=null&&l.length&&(i.push(v(a,"key")),o(l))}};return o(w.value),i}return[]},h=e.ref(t.expandedKeys??(t.defaultExpandAll?_():[]));e.watch(N,i=>{w.value=i;const o=_();h.value=h.value.filter(n=>o.includes(n)),L.value++},{deep:!0});const x=e.ref(t.value??[]),k=e.ref(t.checkedKeys??[]),P=i=>{if(t.selectable&&!t.disabled){let o=B(x.value);const n=v(i,"key");t.multiple?x.value.includes(n)?o=B(x.value.filter(a=>a!==n)):o=B([...x.value,n]):o.includes(n)?o=[]:o=[n],t.value!==void 0?y("update:value",o):x.value=o,y("select",i,o.includes(n))}},R=(i,o)=>{if(t.checkbox&&!t.disabled){let n=B(k.value);const a=v(i,"key");o!=null&&o.keys.length?o.value?n=J.uniq([...o.keys,...n]):n=B(k.value.filter(f=>!o.keys.includes(f))):k.value.includes(a)?n=B(k.value.filter(f=>f!==a)):n=B([...k.value,a]),t.checkedKeys!==void 0?y("update:checkedKeys",n):k.value=n;const l=(o==null?void 0:o.value)??k.value.includes(a);y("check",i,l,(o==null?void 0:o.keys)??a)}},j=i=>{let o=!0;const n=v(i,"key");let a=B(h.value);a.includes(n)?(a=a.filter(l=>l!==n),o=!1):a=[...a,n],t.expandedKeys!==void 0?y("update:expandedKeys",a):h.value=a,y("expand",i,o)},G=e.computed(()=>{if(t.gap){if(typeof t.gap=="number")return`${t.gap}px`;if(!Object.keys(Q).includes(t.gap))return t.gap}}),U=t.groupName??W.useId(void 0,p),L=e.ref(1),K=e.ref(!1),V=e.ref(),A=e.ref(),$=i=>{const{root:o,instance:n}=i,a=c=>{var r;return(r=c.getAttribute("data-parents"))==null?void 0:r.split(",")},l=c=>{const r=(q,oe=w.value)=>{const{parents:H,self:re}=q;for(let Y of oe){const X=v(Y,"key").toString();if(X===re)return Y;const M=v(Y,"children");if(H!=null&&H.includes(X)&&(M!=null&&M.length))return r(q,M)}},u=a(c),I=c.getAttribute("data-key")??"";return r({parents:u,self:I})},f=g.getBemModifier(g.getBemElement(p,"dragging_item"),t.size),m=(c=o.value)=>new se(c,{group:U,animation:150,forceFallback:!0,fallbackOnBody:!0,filter:"[data-draggable=false]",handle:`.${E.node} .${E.draggable} .${E.draggableIcon}`,dataIdAttr:"data-key",dragClass:f,onChoose(r){const u=l(r.item);u&&(u.dragging=!0)},onStart(r){var q;const u=document.querySelector(`.${f}`),I=(q=getComputedStyle(o.value))==null?void 0:q.direction;u!=null&&u.style&&(u.style.direction=I),K.value=!0,y("dragStart",r)},onUnchoose(r){const u=l(r.item);u&&(u.dragging=!1)},onEnd(r){K.value=!1,y("dragEnd",{...r,node:l(r.item),oldParents:a(r.item),newParents:a(r.to)})},onMove(r){const u=Number(r.to.getAttribute("data-level")??"1"),I=l(r.dragged);I&&(I.dragging_level=u)}}),d=()=>{var c;(c=n.value)==null||c.destroy(),n.value=void 0};e.onMounted(()=>{e.watch(()=>[o.value,t.draggable,L.value],()=>{n.value?d():o.value&&t.draggable&&(n.value=m())},{immediate:!0})}),e.onBeforeUnmount(()=>{n.value&&d()})};return $({root:V,instance:A}),ne({size:e.computed(()=>t.size),draggable:e.computed(()=>t.draggable),lazyLoad:e.computed(()=>t.lazyLoad),checkbox:e.computed(()=>t.checkbox),showLine:e.computed(()=>t.showLine),disabled:e.computed(()=>t.disabled),switcherIcon:e.computed(()=>t.switcherIcon),noRotateSwitcherIcon:e.computed(()=>t.noRotateSwitcherIcon),expandedKeys:h,model:x,checked:k,onExpandKey:j,onSelect:P,onCheck:R,getNodeField:v,useSortable:$,dragging:K,prefixes:E}),(i,o)=>(e.openBlock(),e.createElementBlock("div",{key:L.value,class:e.normalizeClass([e.unref(b)({size:t.size,gap:t.gap??t.size,selectable:t.selectable,disabled:t.disabled,inlineNode:t.inlineNode,dragging:K.value}),t.class]),style:e.normalizeStyle({"--ptc-tree-gap":G.value}),ref_key:"root",ref:V},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,n=>(e.openBlock(),e.createBlock(fe,{key:v(n,"key"),item:n},e.createSlots({_:2},[e.renderList(Object.keys(i.$slots),a=>({name:a,fn:e.withCtx(l=>[e.renderSlot(i.$slots,a,e.mergeProps({ref_for:!0},l))])}))]),1032,["item"]))),128))],6))}});exports.Tree=ae;exports.TreeGaps=Q;exports.TreeSizes=ee;exports.default=ae;exports.injectTreeContext=te;exports.provideTreeContext=ne;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("../class-CjZYGZDW.js"),Z=require("class-variance-authority"),le=require("../omit-C_ZXwm9T.js"),W=require("radix-vue"),J=require("lodash-es"),se=require("sortablejs"),D=require("../options-B4iSAKol.js"),ie=require("../IndentLevel.vue_vue_type_style_index_0_lang-B_x8tshB.js"),de=require("../Icon.vue_vue_type_style_index_0_lang-D-jaUivh.js"),ce=require("../Checkbox.vue_vue_type_style_index_0_lang-BQeNpCYy.js");var ue=1,ge=4;function B(F){return le.baseClone(F,ue|ge)}const ee=["sm","md","lg"],Q={none:"gap-none",sm:"gap-sm",md:"gap-md",lg:"gap-lg"},[te,ne]=W.createContext("CheckboxGroup"),ve=["tabindex"],me=["data-parents","data-level"],pe=e.defineComponent({...D.getComponentOptions("TreeNode"),__name:"TreeNode",props:{item:{},level:{default:1},hovered:{type:Boolean},parentKeys:{}},setup(F){const s=F,t=te(),y=Z.cva(t.prefixes.node,{variants:{disabled:u.generateVariantClassList("disabled",t.prefixes.node),active:u.generateVariantClassList("active",t.prefixes.node)}}),p=e.computed(()=>{switch(t.size.value){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}}),T=e.computed(()=>{switch(t.size.value){case"sm":return"2xsm";default:return"xsm"}}),C=n=>t.getNodeField(n,"children"),S=n=>t.getNodeField(n,"key"),E=e.computed(()=>C(s.item)),O=e.computed(()=>t.getNodeField(s.item,"leaf")),_=e.computed(()=>t.draggable.value?t.getNodeField(s.item,"draggable")??!0:!1),b=e.computed(()=>S(s.item)),N=e.computed(()=>t.getNodeField(s.item,"disabled")),w=e.computed(()=>{var n;return!!((n=E.value)!=null&&n.some(a=>t.expandedKeys.value.includes(S(a))))}),v=e.inject("tree-node-context",{hovered:e.ref(s.hovered??!1),expanded:e.ref(!1),childExpanded:w}),z=e.computed(()=>!(s.item.dragging??!1)&&t.expandedKeys.value.includes(b.value)),h=e.ref(!1),x=n=>{h.value=n};e.watch(h,n=>{t.showLine.value&&v.hovered&&(v.hovered.value=n)}),e.provide("tree-node-context",{expanded:z,childExpanded:w,hovered:h});const k=e.computed(()=>{var n,a,l;if(t.dragging.value)return!1;if(t.showLine.value){if(s.hovered||(n=v.hovered)!=null&&n.value||h.value)return"all";if(z.value&&!w.value)return"self";if((a=v.expanded)!=null&&a.value&&!((l=v.childExpanded)!=null&&l.value))return"last"}}),P=e.computed(()=>{var n;return!((n=E.value)!=null&&n.length)}),R=()=>{N.value||t.onSelect(s.item)},j=e.computed(()=>t.model.value.includes(b.value)),G=e.computed(()=>{const n=(m=s.item)=>{const d=C(m);return(d==null?void 0:d.length)&&d.every(c=>t.checked.value.includes(S(c)))},a=(m=s.item)=>{const d=C(m);return d!=null&&d.length?!!(d!=null&&d.some(c=>t.checked.value.includes(S(c))||a(c))):!1},l=t.checked.value.includes(b.value);return n()?(l||t.onCheck(s.item),!0):a()?(l&&t.onCheck(s.item),"indeterminate"):!!l}),U=()=>{var l;if(!((l=E.value)!=null&&l.length))return t.onCheck(s.item);const n=(f=s.item)=>{const m=C(f);return m!=null&&m.length?m.reduce((d,c)=>{const o=C(c),g=S(c);return o!=null&&o.length?[...d,g,...n(c)]:[...d,g]},[]):[]},a=n();return t.onCheck(s.item,{keys:[b.value,...a],value:!t.checked.value.includes(b.value)})},L=e.computed(()=>[...s.parentKeys??[],b.value]),K=()=>{t.onExpandKey(s.item)},V=e.computed(()=>s.item.dragging_level??s.level),A=e.computed(()=>V.value+1),$=e.ref(),i=e.ref();t.useSortable({root:$,instance:i});const r=e.computed(()=>{switch(t.size.value){case"sm":return"2xsm";case"md":return"xsm";case"lg":return"sm"}});return(n,a)=>{const l=e.resolveComponent("TreeNode",!0);return e.openBlock(),e.createBlock(e.unref(W.Primitive),{asChild:P.value,key:P.value,"data-parents":e.unref(t).draggable.value?n.parentKeys:void 0,"data-key":e.unref(t).draggable.value?b.value:void 0,"data-draggable":e.unref(t).draggable.value?!e.unref(t).disabled.value&&!N.value&&_.value:void 0,class:e.normalizeClass([{[e.unref(t).prefixes.group]:!P.value},e.unref(t).getNodeField(n.item,"class")])},{default:e.withCtx(()=>{var f,m;return[e.createElementVNode("div",{tabindex:N.value?void 0:0,class:e.normalizeClass([e.unref(y)({disabled:N.value,active:j.value}),e.unref(t).getNodeField(n.item,"class")]),onMouseenter:a[1]||(a[1]=d=>x(!0)),onMouseleave:a[2]||(a[2]=d=>x(!1)),onClick:R},[e.unref(t).draggable.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(t).prefixes.draggable)},[!n.item.dragging&&!e.unref(t).dragging.value?(e.openBlock(),e.createBlock(de._sfc_main,{key:0,icon:"tabler:grip-vertical",size:T.value,class:e.normalizeClass(e.unref(t).prefixes.draggableIcon)},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"dragTrigger",e.normalizeProps(e.guardReactiveProps(n.item)))]),_:3},8,["size","class"])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createVNode(ie._sfc_main,{level:V.value,children:!!((f=E.value)!=null&&f.length||e.unref(t).lazyLoad.value&&!O.value),size:r.value,expanded:z.value,showLine:k.value,loading:e.unref(t).getNodeField(n.item,"loading"),"branch-icon":e.unref(t).getNodeField(n.item,"switcherIcon")??e.unref(t).switcherIcon.value,"no-rotate-branch":e.unref(t).getNodeField(n.item,"noRotateSwitcherIcon")??e.unref(t).noRotateSwitcherIcon.value,onToggleExpand:e.withModifiers(K,["stop"])},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"switcherIcon",e.mergeProps({expanded:z.value},n.item))]),_:3},8,["level","children","size","expanded","showLine","loading","branch-icon","no-rotate-branch"]),!n.item.dragging||!e.unref(t).dragging.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(t).checkbox.value?(e.openBlock(),e.createBlock(ce._sfc_main,{key:0,size:p.value,onClick:a[0]||(a[0]=e.withModifiers(()=>{},["stop"])),checked:G.value,"onUpdate:checked":U,disabled:N.value||e.unref(t).disabled.value},null,8,["size","checked","disabled"])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"title",e.normalizeProps(e.guardReactiveProps(n.item)),()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(u.getBemElement)(e.unref(t).prefixes.node,"title"))},e.toDisplayString(e.unref(t).getNodeField(n.item,"title")),3)])],64)):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(e.unref(u.getBemElement)(e.unref(t).prefixes.node,"slot"))},null,2))],42,ve),(m=E.value)!=null&&m.length?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(t).prefixes.groupList),ref_key:"root",ref:$,"data-parents":e.unref(t).draggable.value?L.value:void 0,"data-level":e.unref(t).draggable.value?A.value:void 0},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C(n.item),d=>{var c;return e.openBlock(),e.createBlock(l,{key:e.unref(t).getNodeField(d,"key"),parentKeys:L.value,item:d,level:A.value,hovered:s.hovered||h.value||((c=e.unref(v).hovered)==null?void 0:c.value)},{title:e.withCtx(o=>[e.renderSlot(n.$slots,"title",e.mergeProps({ref_for:!0},o))]),switcherIcon:e.withCtx(o=>[e.renderSlot(n.$slots,"switcherIcon",e.mergeProps({ref_for:!0},o))]),dragTrigger:e.withCtx(o=>[e.renderSlot(n.$slots,"dragTrigger",e.mergeProps({ref_for:!0},o))]),_:2},1032,["parentKeys","item","level","hovered"])}),128))],10,me)),[[e.vShow,z.value]]):e.createCommentVNode("",!0)]}),_:3},8,["asChild","data-parents","data-key","data-draggable","class"])}}}),ae=e.defineComponent({...D.getComponentOptions("Tree"),__name:"Tree",props:{class:{},size:{default:"md"},gap:{},data:{},value:{},checkedKeys:{},expandedKeys:{},multiple:{type:Boolean},checkbox:{type:Boolean},defaultExpandAll:{type:Boolean},selectable:{type:Boolean},showLine:{type:Boolean},inlineNode:{type:Boolean},lazyLoad:{type:Boolean},fieldNames:{},groupName:{},switcherIcon:{},noRotateSwitcherIcon:{type:Boolean},draggable:{type:Boolean},disabled:{type:Boolean}},emits:["update:value","update:expandedKeys","update:checkedKeys","expand","select","check","dragStart","dragEnd"],setup(F,{emit:s}){const t=F,y=s,p=u.getBemBlock("tree"),T=u.getBemElement(p,"node"),C=u.getBemElement(T,"group"),S=u.getBemElement(T,"draggable"),E=u.getBemElement(S,"icon"),O=u.getBemElement(C,"list"),_={node:T,group:C,draggable:S,draggableIcon:E,groupList:O},b=Z.cva(p,{variants:{size:u.generateVariantClassList(ee,p),gap:u.generateVariantClassList(Q,p),selectable:u.generateVariantClassList("selectable",p),disabled:u.generateVariantClassList("disabled",p),inlineNode:u.generateVariantClassList("inline-node",p),dragging:u.generateVariantClassList("dragging",p)}}),N=e.computed(()=>B(t.data)),w=e.ref(N.value),v=(i,r)=>{var a;const n=J.get(i,r);return(a=t.fieldNames)!=null&&a[r]?J.get(i,t.fieldNames[r],n):n},z=()=>{if(!t.lazyLoad){const i=[],r=n=>{for(const a of n){const l=v(a,"children");l!=null&&l.length&&(i.push(v(a,"key")),r(l))}};return r(w.value),i}return[]},h=e.ref(t.expandedKeys??(t.defaultExpandAll?z():[]));e.watch(N,i=>{w.value=i;const r=z();h.value=h.value.filter(n=>r.includes(n)),L.value++},{deep:!0});const x=e.ref(t.value??[]),k=e.ref(t.checkedKeys??[]),P=i=>{if(t.selectable&&!t.disabled){let r=B(x.value);const n=v(i,"key");t.multiple?x.value.includes(n)?r=B(x.value.filter(a=>a!==n)):r=B([...x.value,n]):r.includes(n)?r=[]:r=[n],t.value!==void 0?y("update:value",r):x.value=r,y("select",i,r.includes(n))}},R=(i,r)=>{if(t.checkbox&&!t.disabled){let n=B(k.value);const a=v(i,"key");r!=null&&r.keys.length?r.value?n=J.uniq([...r.keys,...n]):n=B(k.value.filter(f=>!r.keys.includes(f))):k.value.includes(a)?n=B(k.value.filter(f=>f!==a)):n=B([...k.value,a]),t.checkedKeys!==void 0?y("update:checkedKeys",n):k.value=n;const l=(r==null?void 0:r.value)??k.value.includes(a);y("check",i,l,(r==null?void 0:r.keys)??a)}},j=i=>{let r=!0;const n=v(i,"key");let a=B(h.value);a.includes(n)?(a=a.filter(l=>l!==n),r=!1):a=[...a,n],t.expandedKeys!==void 0?y("update:expandedKeys",a):h.value=a,y("expand",i,r)},G=e.computed(()=>{if(t.gap){if(typeof t.gap=="number")return`${t.gap}px`;if(!Object.keys(Q).includes(t.gap))return t.gap}}),U=t.groupName??W.useId(void 0,p),L=e.ref(1),K=e.ref(!1),V=e.ref(),A=e.ref(),$=i=>{const{root:r,instance:n}=i,a=c=>{var o;return(o=c.getAttribute("data-parents"))==null?void 0:o.split(",")},l=c=>{const o=(q,re=w.value)=>{const{parents:H,self:oe}=q;for(let Y of re){const X=v(Y,"key").toString();if(X===oe)return Y;const M=v(Y,"children");if(H!=null&&H.includes(X)&&(M!=null&&M.length))return o(q,M)}},g=a(c),I=c.getAttribute("data-key")??"";return o({parents:g,self:I})},f=u.getBemModifier(u.getBemElement(p,"dragging_item"),t.size),m=(c=r.value)=>new se(c,{group:U,animation:150,forceFallback:!0,fallbackOnBody:!0,filter:"[data-draggable=false]",handle:`.${_.node} .${_.draggable} .${_.draggableIcon}`,dataIdAttr:"data-key",dragClass:f,onChoose(o){const g=l(o.item);g&&(g.dragging=!0)},onStart(o){var q;const g=document.querySelector(`.${f}`),I=(q=getComputedStyle(r.value))==null?void 0:q.direction;g!=null&&g.style&&(g.style.direction=I),K.value=!0,y("dragStart",o)},onUnchoose(o){const g=l(o.item);g&&(g.dragging=!1)},onEnd(o){K.value=!1,y("dragEnd",{...o,node:l(o.item),oldParents:a(o.item),newParents:a(o.to)})},onMove(o){const g=Number(o.to.getAttribute("data-level")??"1"),I=l(o.dragged);I&&(I.dragging_level=g)}}),d=()=>{var c;(c=n.value)==null||c.destroy(),n.value=void 0};e.onMounted(()=>{e.watch(()=>[r.value,t.draggable,L.value],()=>{n.value?d():r.value&&t.draggable&&(n.value=m())},{immediate:!0})}),e.onBeforeUnmount(()=>{n.value&&d()})};return $({root:V,instance:A}),ne({size:e.computed(()=>t.size),draggable:e.computed(()=>t.draggable),lazyLoad:e.computed(()=>t.lazyLoad),checkbox:e.computed(()=>t.checkbox),showLine:e.computed(()=>t.showLine),disabled:e.computed(()=>t.disabled),switcherIcon:e.computed(()=>t.switcherIcon),noRotateSwitcherIcon:e.computed(()=>t.noRotateSwitcherIcon),expandedKeys:h,model:x,checked:k,onExpandKey:j,onSelect:P,onCheck:R,getNodeField:v,useSortable:$,dragging:K,prefixes:_}),(i,r)=>(e.openBlock(),e.createElementBlock("div",{key:L.value,class:e.normalizeClass([e.unref(b)({size:t.size,gap:t.gap??t.size,selectable:t.selectable,disabled:t.disabled,inlineNode:t.inlineNode,dragging:K.value}),t.class]),style:e.normalizeStyle({"--ptc-tree-gap":G.value}),ref_key:"root",ref:V},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,n=>(e.openBlock(),e.createBlock(pe,{key:v(n,"key"),item:n},e.createSlots({_:2},[e.renderList(Object.keys(i.$slots),a=>({name:a,fn:e.withCtx(l=>[e.renderSlot(i.$slots,a,e.mergeProps({ref_for:!0},l))])}))]),1032,["item"]))),128))],6))}});exports.Tree=ae;exports.TreeGaps=Q;exports.TreeSizes=ee;exports.default=ae;exports.injectTreeContext=te;exports.provideTreeContext=ne;

package/dist/Tree/index.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as pe, computed as r, inject as be, ref as p, watch as le, provide as xe, resolveComponent as Ce, openBlock as h, createBlock as Y, unref as s, normalizeClass as F, withCtx as $, createElementVNode as de, createElementBlock as P, renderSlot as _, normalizeProps as ce, guardReactiveProps as ue, createCommentVNode as X, createVNode as Ne, withModifiers as ge, mergeProps as J, Fragment as oe, toDisplayString as Se, withDirectives as we, renderList as re, vShow as ze, normalizeStyle as Ke, createSlots as Be, onMounted as Le, onBeforeUnmount as Ee } from "vue";
-import { g as E, a as T, b as Ie, c as Fe } from "../class-DyU-Ox8D.js";
+import { defineComponent as pe, computed as r, inject as be, ref as p, watch as le, provide as xe, resolveComponent as Ce, openBlock as h, createBlock as Y, unref as s, normalizeClass as E, withCtx as T, createElementVNode as de, createElementBlock as P, renderSlot as _, normalizeProps as ce, guardReactiveProps as ue, createCommentVNode as X, createVNode as Ne, withModifiers as ge, mergeProps as J, Fragment as oe, toDisplayString as Se, withDirectives as we, renderList as re, vShow as ze, normalizeStyle as Ke, createSlots as Be, onMounted as Le, onBeforeUnmount as Ee } from "vue";
+import { g as I, a as F, b as Ie, c as Fe } from "../class-DyU-Ox8D.js";
 import { cva as me } from "class-variance-authority";
 import { b as $e } from "../omit-DtumnYm5.js";
-import { createContext as _e, Primitive as Te, useId as Pe } from "radix-vue";
+import { createContext as Te, Primitive as _e, useId as Pe } from "radix-vue";
 import { get as ve, uniq as Ae } from "lodash-es";
 import Me from "sortablejs";
 import { g as ye } from "../options-JBqnVZUl.js";
@@ -13,7 +13,7 @@ var je = 1, Ue = 4;
 function w(G) {
   return $e(G, je | Ue);
 }
-const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-md", lg: "gap-lg" }, [qe, He] = _e("CheckboxGroup"), Ye = ["tabindex"], Je = { class: "ms-200" }, Qe = ["data-parents", "data-level"], We = /* @__PURE__ */ pe({
+const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-md", lg: "gap-lg" }, [qe, He] = Te("CheckboxGroup"), Ye = ["tabindex"], Je = ["data-parents", "data-level"], Qe = /* @__PURE__ */ pe({
   ...ye("TreeNode"),
   __name: "TreeNode",
   props: {
@@ -25,8 +25,8 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
   setup(G) {
     const i = G, e = qe(), b = me(e.prefixes.node, {
       variants: {
-        disabled: E("disabled", e.prefixes.node),
-        active: E("active", e.prefixes.node)
+        disabled: I("disabled", e.prefixes.node),
+        active: I("active", e.prefixes.node)
       }
     }), m = r(() => {
       switch (e.size.value) {
@@ -44,10 +44,10 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
         default:
           return "xsm";
       }
-    }), C = (t) => e.getNodeField(t, "children"), z = (t) => e.getNodeField(t, "key"), I = r(() => C(i.item)), Z = r(() => e.getNodeField(i.item, "leaf")), A = r(() => e.draggable.value ? e.getNodeField(i.item, "draggable") ?? !0 : !1), N = r(() => z(i.item)), K = r(() => e.getNodeField(i.item, "disabled")), B = r(
+    }), C = (t) => e.getNodeField(t, "children"), z = (t) => e.getNodeField(t, "key"), $ = r(() => C(i.item)), Z = r(() => e.getNodeField(i.item, "leaf")), A = r(() => e.draggable.value ? e.getNodeField(i.item, "draggable") ?? !0 : !1), N = r(() => z(i.item)), K = r(() => e.getNodeField(i.item, "disabled")), B = r(
       () => {
         var t;
-        return !!((t = I.value) != null && t.some((a) => e.expandedKeys.value.includes(z(a))));
+        return !!((t = $.value) != null && t.some((a) => e.expandedKeys.value.includes(z(a))));
       }
     ), v = be("tree-node-context", {
       hovered: p(i.hovered ?? !1),
@@ -75,7 +75,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
       }
     }), U = r(() => {
       var t;
-      return !((t = I.value) != null && t.length);
+      return !((t = $.value) != null && t.length);
     }), D = () => {
       K.value || e.onSelect(i.item);
     }, ee = r(() => e.model.value.includes(N.value)), te = r(() => {
@@ -91,7 +91,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
       return t() ? (o || e.onCheck(i.item), !0) : a() ? (o && e.onCheck(i.item), "indeterminate") : !!o;
     }), ae = () => {
       var o;
-      if (!((o = I.value) != null && o.length)) return e.onCheck(i.item);
+      if (!((o = $.value) != null && o.length)) return e.onCheck(i.item);
       const t = (y = i.item) => {
         const f = C(y);
         return f != null && f.length ? f.reduce((c, u) => {
@@ -122,20 +122,20 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
     });
     return (t, a) => {
       const o = Ce("TreeNode", !0);
-      return h(), Y(s(Te), {
+      return h(), Y(s(_e), {
         asChild: U.value,
         key: U.value,
         "data-parents": s(e).draggable.value ? t.parentKeys : void 0,
         "data-key": s(e).draggable.value ? N.value : void 0,
         "data-draggable": s(e).draggable.value ? !s(e).disabled.value && !K.value && A.value : void 0,
-        class: F([{ [s(e).prefixes.group]: !U.value }, s(e).getNodeField(t.item, "class")])
+        class: E([{ [s(e).prefixes.group]: !U.value }, s(e).getNodeField(t.item, "class")])
       }, {
-        default: $(() => {
+        default: T(() => {
           var y, f;
           return [
             de("div", {
               tabindex: K.value ? void 0 : 0,
-              class: F([
+              class: E([
                 s(b)({
                   disabled: K.value,
                   active: ee.value
@@ -148,15 +148,15 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
             }, [
               s(e).draggable.value ? (h(), P("span", {
                 key: 0,
-                class: F(s(e).prefixes.draggable)
+                class: E(s(e).prefixes.draggable)
               }, [
                 !t.item.dragging && !s(e).dragging.value ? (h(), Y(Re, {
                   key: 0,
                   icon: "tabler:grip-vertical",
                   size: j.value,
-                  class: F(s(e).prefixes.draggableIcon)
+                  class: E(s(e).prefixes.draggableIcon)
                 }, {
-                  default: $(() => [
+                  default: T(() => [
                     _(t.$slots, "dragTrigger", ce(ue(t.item)))
                   ]),
                   _: 3
@@ -164,7 +164,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
               ], 2)) : X("", !0),
               Ne(Oe, {
                 level: V.value,
-                children: !!((y = I.value) != null && y.length || s(e).lazyLoad.value && !Z.value),
+                children: !!((y = $.value) != null && y.length || s(e).lazyLoad.value && !Z.value),
                 size: n.value,
                 expanded: L.value,
                 showLine: x.value,
@@ -173,7 +173,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
                 "no-rotate-branch": s(e).getNodeField(t.item, "noRotateSwitcherIcon") ?? s(e).noRotateSwitcherIcon.value,
                 onToggleExpand: ge(O, ["stop"])
               }, {
-                default: $(() => [
+                default: T(() => [
                   _(t.$slots, "switcherIcon", J({ expanded: L.value }, t.item))
                 ]),
                 _: 3
@@ -189,16 +189,18 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
                   disabled: K.value || s(e).disabled.value
                 }, null, 8, ["size", "checked", "disabled"])) : X("", !0),
                 _(t.$slots, "title", ce(ue(t.item)), () => [
-                  de("div", Je, Se(s(e).getNodeField(t.item, "title")), 1)
+                  de("div", {
+                    class: E(s(F)(s(e).prefixes.node, "title"))
+                  }, Se(s(e).getNodeField(t.item, "title")), 3)
                 ])
               ], 64)) : (h(), P("div", {
                 key: 2,
-                class: F(s(T)(s(e).prefixes.node, "slot"))
+                class: E(s(F)(s(e).prefixes.node, "slot"))
               }, null, 2))
             ], 42, Ye),
-            (f = I.value) != null && f.length ? we((h(), P("div", {
+            (f = $.value) != null && f.length ? we((h(), P("div", {
               key: 0,
-              class: F(s(e).prefixes.groupList),
+              class: E(s(e).prefixes.groupList),
               ref_key: "root",
               ref: q,
               "data-parents": s(e).draggable.value ? M.value : void 0,
@@ -213,19 +215,19 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
                   level: Q.value,
                   hovered: i.hovered || k.value || ((u = s(v).hovered) == null ? void 0 : u.value)
                 }, {
-                  title: $((l) => [
+                  title: T((l) => [
                     _(t.$slots, "title", J({ ref_for: !0 }, l))
                   ]),
-                  switcherIcon: $((l) => [
+                  switcherIcon: T((l) => [
                     _(t.$slots, "switcherIcon", J({ ref_for: !0 }, l))
                   ]),
-                  dragTrigger: $((l) => [
+                  dragTrigger: T((l) => [
                     _(t.$slots, "dragTrigger", J({ ref_for: !0 }, l))
                   ]),
                   _: 2
                 }, 1032, ["parentKeys", "item", "level", "hovered"]);
               }), 128))
-            ], 10, Qe)), [
+            ], 10, Je)), [
               [ze, L.value]
             ]) : X("", !0)
           ];
@@ -234,7 +236,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
       }, 8, ["asChild", "data-parents", "data-key", "data-draggable", "class"]);
     };
   }
-}), it = /* @__PURE__ */ pe({
+}), rt = /* @__PURE__ */ pe({
   ...ye("Tree"),
   __name: "Tree",
   props: {
@@ -261,20 +263,20 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
   },
   emits: ["update:value", "update:expandedKeys", "update:checkedKeys", "expand", "select", "check", "dragStart", "dragEnd"],
   setup(G, { emit: i }) {
-    const e = G, b = i, m = Ie("tree"), j = T(m, "node"), C = T(j, "group"), z = T(j, "draggable"), I = T(z, "icon"), Z = T(C, "list"), A = {
+    const e = G, b = i, m = Ie("tree"), j = F(m, "node"), C = F(j, "group"), z = F(j, "draggable"), $ = F(z, "icon"), Z = F(C, "list"), A = {
       node: j,
       group: C,
       draggable: z,
-      draggableIcon: I,
+      draggableIcon: $,
       groupList: Z
     }, N = me(m, {
       variants: {
-        size: E(Ve, m),
-        gap: E(fe, m),
-        selectable: E("selectable", m),
-        disabled: E("disabled", m),
-        inlineNode: E("inline-node", m),
-        dragging: E("dragging", m)
+        size: I(Ve, m),
+        gap: I(fe, m),
+        selectable: I("selectable", m),
+        disabled: I("disabled", m),
+        inlineNode: I("inline-node", m),
+        dragging: I("dragging", m)
       }
     }), K = r(() => w(e.data)), B = p(K.value), v = (d, n) => {
       var a;
@@ -340,7 +342,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
           }
         }, g = a(u), R = u.getAttribute("data-key") ?? "";
         return l({ parents: g, self: R });
-      }, y = Fe(T(m, "dragging_item"), e.size), f = (u = n.value) => new Me(u, {
+      }, y = Fe(F(m, "dragging_item"), e.size), f = (u = n.value) => new Me(u, {
         group: ae,
         animation: 150,
         forceFallback: !0,
@@ -415,7 +417,7 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
       prefixes: A
     }), (d, n) => (h(), P("div", {
       key: M.value,
-      class: F([
+      class: E([
         s(N)({
           size: e.size,
           gap: e.gap ?? e.size,
@@ -432,13 +434,13 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
       ref_key: "root",
       ref: V
     }, [
-      (h(!0), P(oe, null, re(B.value, (t) => (h(), Y(We, {
+      (h(!0), P(oe, null, re(B.value, (t) => (h(), Y(Qe, {
         key: v(t, "key"),
         item: t
       }, Be({ _: 2 }, [
         re(Object.keys(d.$slots), (a) => ({
           name: a,
-          fn: $((o) => [
+          fn: T((o) => [
             _(d.$slots, a, J({ ref_for: !0 }, o))
           ])
         }))
@@ -447,10 +449,10 @@ const Ve = ["sm", "md", "lg"], fe = { none: "gap-none", sm: "gap-sm", md: "gap-m
   }
 });
 export {
-  it as Tree,
+  rt as Tree,
   fe as TreeGaps,
   Ve as TreeSizes,
-  it as default,
+  rt as default,
   qe as injectTreeContext,
   He as provideTreeContext
 };