balm-ui
Version:
A modular and customizable UI library based on Material Design and Vue 3
1 lines • 18.1 kB
JavaScript
!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiTree",["vue"],t):"object"===typeof exports?exports.UiTree=t(require("vue")):e.UiTree=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={744:function(e){var t=function(e){return function(e){return!!e&&"object"===typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===a}(e)}(e)};var a="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function n(e,t){return!1!==t.clone&&t.isMergeableObject(e)?c((a=e,Array.isArray(a)?[]:{}),e,t):e;var a}function l(e,t,a){return e.concat(t).map((function(e){return n(e,a)}))}function r(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function o(e,t){try{return t in e}catch(a){return!1}}function d(e,t,a){var l={};return a.isMergeableObject(e)&&r(e).forEach((function(t){l[t]=n(e[t],a)})),r(t).forEach((function(r){(function(e,t){return o(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,r)||(o(e,r)&&a.isMergeableObject(t[r])?l[r]=function(e,t){if(!t.customMerge)return c;var a=t.customMerge(e);return"function"===typeof a?a:c}(r,a)(e[r],t[r],a):l[r]=n(t[r],a))})),l}function c(e,a,r){(r=r||{}).arrayMerge=r.arrayMerge||l,r.isMergeableObject=r.isMergeableObject||t,r.cloneUnlessOtherwiseSpecified=n;var o=Array.isArray(a);return o===Array.isArray(e)?o?r.arrayMerge(e,a,r):d(e,a,r):n(a,r)}c.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,a){return c(e,a,t)}),{})};var s=c;e.exports=s},154:function(t){t.exports=e}},a={};function n(e){var l=a[e];if(void 0!==l)return l.exports;var r=a[e]={exports:{}};return t[e](r,r.exports,n),r.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var l={};n.d(l,{default:function(){return j}});var r=n(744),o=n.n(r);const d=/(?:^\[object\s(.*?)\]$)/;var c=e=>Object.prototype.toString.call(e).replace(d,"$1").toLowerCase();const s=e=>{let{componentProps:t,propName:a,props:n}=e,l=n[a];if("object"===c(l)){const e=t[a].default;t[a].default=()=>o()(e,l)}else Array.isArray(l)?t[a].default=()=>l:t[a].default=l},i=e=>{let{componentMixins:t,propName:a,props:n}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[a]){s({componentProps:t[e].props,propName:a,props:n});break}}};var u=(e,t)=>{for(const a of Object.keys(t))e.props?void 0===e.props[a]?i({componentMixins:e.mixins,propName:a,props:t}):s({componentProps:e.props,propName:a,props:t}):i({componentMixins:e.mixins,propName:a,props:t})};var p=(e,t)=>{for(const a of Object.keys(t))if(/^Ui[A-Z]{1}[A-Za-z]+$/.test(a)){const n=e[a],l=t[a];u(n,l)}};var h=e=>{const t={install(t){p(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});for(let a in e){const n=e[a];t.component(n.name,n)}}};return t},f=n(154);const m=(e,t,a)=>{let{selectedValue:n,nodeMap:l,dataFormat:r}=e,{level:o,parentKey:d}=a,c=Object.assign({},t);const{value:s,children:i,hasChildren:u,isLeaf:p,disabled:h}=r,f=c[s],m=Array.isArray(c[i])?c[i]:[],y=((e,t,a)=>e[t]||!a)(c,p,c[u]||m.length);return c.level=o,c.isRoot=!o,c.isLeaf=y,c.expanded=!1,c.selected=!Array.isArray(n)&&f===n,c.checked=Array.isArray(n)&&n.includes(f),c.parentKey=d,c.disabled=c[h],m.length||(c[i]=[]),y||(c.indeterminate=!1),l.has(f)||l.set(f,c),c};let y=[],k=[];class v{constructor(e){this.treeData=e}getData(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";const{dataFormat:n,maxLevel:l}=this.treeData,r=[],{value:o,children:d,hasChildren:c}=n;for(let s=0,i=e.length;s<i;s++){let n=m(this.treeData,e[s],{level:t,parentKey:a});const i=Array.isArray(n[d])?n[d]:[],u=n[c]||i.length;t<l&&u&&(n[d]=this.getData(i,t+1,n[o])),r.push(n)}return r}static addData(e,t,a){const{dataFormat:n,nodeMap:l}=e,r=[],{value:o,children:d}=n,c=t.level+1,s=t[o];for(let i=0,u=a.length;i<u;i++){let t=m(e,a[i],{level:c,parentKey:s});t.checked&&this.setMultipleSelectedValue(e,t[o],!0),r.push(t)}t[d]=r,t.expanded=!0,l.set(s,t)}static async onExpand(e,t){if(e.loadData){const{dataFormat:a}=e;if(t[a.children]&&t[a.children].length)t.expanded=!t.expanded;else{const n=await e.loadData(t[a.value],t);if(Array.isArray(n)){this.addData(e,t,n);const l=n.every((t=>e.selectedValue.includes(t[a.value])));if(!!l||n.some((t=>e.selectedValue.includes(t[a.value]))))if(l||1===n.length){const l=n[0][a.parentKey];l?(e.selectedValue.push(l),t.checked=!0):console.warn("[UiTree]","Missing `parentKey`")}else t.indeterminate=!0}else console.warn("[UiTree]","Invalid data")}}else t.expanded=!t.expanded}static async collapseAllNode(e,t){const{dataFormat:a,nodeMap:n}=e;for await(let l of t){const t=l[a.value],r=n.get(t);r.expanded=!1,r.children&&r.children.length&&this.collapseAllNode(e,r.children)}return!0}static setSingleSelectedValue(e,t,a){const{nodeMap:n}=e,l=n.get(t);l&&(l.selected=a,e.selectedEvent={selected:a,selectedNodes:t,node:l})}static onSelect(e,t){const{dataFormat:a,selectedValue:n}=e,l=t[a.value];n&&this.setSingleSelectedValue(e,n,!1),e.selectedValue=l,this.setSingleSelectedValue(e,l,!0)}static setMultipleSelectedValue(e,t,a){const{dataFormat:n,nodeMap:l,filterParentNode:r}=e,o=l.get(t);a&&!o.indeterminate?e.selectedValue.includes(t)||(r?o.isLeaf&&e.selectedValue.push(t):e.selectedValue.push(t)):e.selectedValue=e.selectedValue.filter((e=>e!==t))}static setChildrenCheckedValue(e,t,a){const{dataFormat:n,nodeMap:l}=e,{value:r,children:o}=n;for(let d=0,c=t.length;d<c;d++){let n=Object.assign({},t[d]);const c=n[r],s=n[o],i=l.get(c);i&&(a?!i.checked&&y.push(c):i.checked&&y.push(c),i.indeterminate=!1,i.checked=a,this.setMultipleSelectedValue(e,c,a)),!n.isLeaf&&s.length&&this.setChildrenCheckedValue(e,s,a)}}static setParentCheckedValue(e,t){const{dataFormat:a,nodeMap:n}=e,{value:l,children:r}=a;if(t){const a=t[l],o=t[r],d=o.filter((e=>e.checked||e.indeterminate)),c=n.get(a);if(d.length){const t=d.filter((e=>e.checked)).length,n=t===o.length;n?!c.checked&&y.push(a):c.checked&&y.push(a),c.checked=n,c.indeterminate=!n,this.setMultipleSelectedValue(e,a,n)}else c.checked=!1,c.indeterminate=!1,this.setMultipleSelectedValue(e,a,c.checked);t.isRoot||this.setParentCheckedValue(e,n.get(t.parentKey))}}static onCheck(e,t){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=!t.checked;"boolean"===typeof a&&(n=a);const{dataFormat:l,nodeMap:r,singleChecked:o}=e,{value:d,children:c}=l,s=t[d],i=t[c];o?(t.checked=n,this.setMultipleSelectedValue(e,s,n),e.selectedEvent={checked:n,checkedNodes:[s],node:t}):(y=[s],t.isLeaf?(t.checked=n,this.setMultipleSelectedValue(e,s,n)):(t.indeterminate&&(t.indeterminate=!1,n=!0),t.checked=n,this.setMultipleSelectedValue(e,s,n),this.setChildrenCheckedValue(e,i,n)),t.isRoot||this.setParentCheckedValue(e,r.get(t.parentKey)),e.selectedEvent={checked:n,checkedNodes:y,node:t})}static async handleExpandKeys(e,t,a){const{dataFormat:n,nodeMap:l}=e;for await(let r of t){const t=r[n.value],o=l.get(t);a.includes(t)&&this.onExpand(e,o),r.children&&r.children.length&&this.handleExpandKeys(e,r.children,a)}}static async handleExpandAll(e,t){const{dataFormat:a,nodeMap:n}=e;for await(let l of t){const t=l[a.value],r=n.get(t);this.onExpand(e,r),r.children&&r.children.length&&this.handleExpandAll(e,r.children)}}static async findTreeNode(e,t,a){if(e[t]===a)return e;if(e.children&&e.children.length)for(let n=0;n<e.children.length;n++){const l=await this.findTreeNode(e.children[n],t,a);if(null!==l)return l}return null}static toReverseArray(e){const t=[];for(let a=e.length-1;a>=0;a--)t.push(e[a]);return t}static async handleAutoExpandSelected(e,t,a,n){if(await this.collapseAllNode(n,e)){const l=await this.findTreeNode(e[0],t,a);if(k.push(l[t]),l.parentKey&&this.handleAutoExpandSelected(e,t,l.parentKey,n),!l.parentKey){const t=this.toReverseArray(k);n&&this.handleExpandKeys(n,e,t)}}}static async setExpanded(e,t,a){let{autoExpandParent:n,defaultExpandedKeys:l,autoExpandAll:r}=a;const{dataFormat:o,nodeMap:d}=e;if(r&&this.handleExpandAll(e,t),n)if(l.length)this.handleExpandKeys(e,t,l);else for await(let c of t){const t=c[o.value],a=d.get(t);this.onExpand(e,a)}}static resetSelected(e,t){const{nodeMap:a}=e;for(let n=0,l=t.length;n<l;n++){const l=t[n],r=a.get(l);r&&this.onCheck(e,r,!1)}}static setSelected(e,t,a){let{nodeList:n,autoExpandSelected:l}=a;const{dataFormat:r,nodeMap:o,multiple:d}=e,c=Array.isArray(t)?t:[t];for(let s=0,i=c.length;s<i;s++){const t=c[s],a=o.get(t);a&&(d?this.onCheck(e,a,!0):this.onSelect(e,a))}l&&!Array.isArray(t)&&(k=[],this.handleAutoExpandSelected(n,r.value,t,e))}static async createNode(e,t,a){const{dataFormat:n,nodeMap:l}=e,{value:r,children:o,hasChildren:d}=n,c=l.get(t),s=a[r];let i=m(e,a,{level:c.level+1,parentKey:t,checked:!1});c.isLeaf?(c[o].unshift(i),c[d]||(c[d]=!0),c.isLeaf=!1):c[d]?c[o].length?c[o].unshift(i):await this.onExpand(e,c):(c[o].unshift(i),c[d]=!0,c.expanded=!0),l.set(t,c),l.set(s,i)}static updateNode(e,t,a){const{dataFormat:n,nodeMap:l}=e,{value:r,children:o}=n,d=a[r],c=l.get(d);Object.keys(c).forEach((e=>{"undefined"!==typeof a[e]&&(c[e]=a[e])}));const s=l.get(t),i=s[o].findIndex((e=>e[r]===d));s[o][i]=c,l.set(t,s),l.set(d,c)}static deleteNode(e,t,a){const{dataFormat:n,nodeMap:l}=e,{value:r,children:o,hasChildren:d}=n,c=a[r];if(l.has(c)){const e=l.get(t),a=e[o];a.splice(a.findIndex((e=>e[r]===c)),1),e[d]=a.length,e[d]||(e.isLeaf=!0,e.expanded=!1),l.set(t,e),l.delete(c)}}}const b=["checked","disabled"],g=(0,f.createStaticVNode)('<div class="mdc-checkbox__background"><svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24"><path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg><div class="mdc-checkbox__mixedmark"></div></div><div class="mdc-checkbox__ripple"></div><div class="mdc-checkbox__focus-ring"></div>',3),x={name:"MdcCheckbox",customOptions:{}};var E=Object.assign(x,{props:{checked:{type:[Boolean,null],default:null},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(e,t){let{expose:a}=t;const n=e,l=(0,f.ref)(null),r=(0,f.ref)(null);return(0,f.onMounted)((()=>{n.indeterminate&&(r.value.indeterminate=n.indeterminate),n.disabled&&(r.value.disabled=n.disabled),(0,f.watch)((()=>n.indeterminate),(e=>r.value.indeterminate=e)),(0,f.watch)((()=>n.disabled),(e=>r.value.disabled=e))})),a({mdcCheckbox:l,reset:function(){r.value.indeterminate?r.value.indeterminate=!1:r.value.checked=!1}}),(t,a)=>((0,f.openBlock)(),(0,f.createElementBlock)("div",{ref_key:"mdcCheckbox",ref:l,class:"mdc-checkbox"},[(0,f.renderSlot)(t.$slots,"default",{},(()=>[(0,f.createElementVNode)("input",{ref_key:"checkbox",ref:r,type:"checkbox",class:"mdc-checkbox__native-control",checked:e.checked,disabled:e.disabled},null,8,b)])),g],512))}});const S={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];return[S.cssClasses.icon,...t]}};var V=S;const C={key:0,class:"mdc-tree-node__indent"},A={class:"mdc-tree-node__icon"},N=["onClick"],M=["onClick"],D=["onClick"],L={name:"UiTreeNode",customOptions:{UI_GLOBAL:V}};var _=Object.assign(L,{props:{children:{type:Array,default:()=>[]},treeData:{type:Object,default:()=>({})}},setup(e){const t=e,a=t.treeData.dataFormat;function n(e){!e.disabled&&v.onCheck(t.treeData,e)}function l(e){const{children:t,...n}=e;return e[a.isLeaf]?e:n}return(r,o)=>{const d=(0,f.resolveComponent)("ui-tree-node");return(0,f.openBlock)(),(0,f.createElementBlock)("ul",null,[((0,f.openBlock)(!0),(0,f.createElementBlock)(f.Fragment,null,(0,f.renderList)(e.children,((o,c)=>((0,f.openBlock)(),(0,f.createElementBlock)("li",{key:c,class:(0,f.normalizeClass)(["mdc-tree-node",{"mdc-tree-node--root":o.isRoot,"mdc-tree-node--leaf":o.isLeaf}])},[(0,f.createElementVNode)("div",{class:(0,f.normalizeClass)(["mdc-tree-node__content",{"mdc-tree-node--selected":o.selected||o.checked}])},[(0,f.renderSlot)(r.$slots,"before",{data:l(o)}),o.level?((0,f.openBlock)(),(0,f.createElementBlock)("div",C,[((0,f.openBlock)(!0),(0,f.createElementBlock)(f.Fragment,null,(0,f.renderList)(o.level,(e=>((0,f.openBlock)(),(0,f.createElementBlock)("span",{key:e,class:"mdc-tree-node__indent-unit"})))),128))])):(0,f.createCommentVNode)("",!0),(0,f.createElementVNode)("div",A,[o[(0,f.unref)(a).isLeaf]?(0,f.createCommentVNode)("",!0):((0,f.openBlock)(),(0,f.createElementBlock)("span",{key:0,onClick:e=>{return a=o,void v.onExpand(t.treeData,a);var a}},[o.expanded?(0,f.renderSlot)(r.$slots,"expand-more-icon",{key:0},(()=>[(0,f.createElementVNode)("i",{class:(0,f.normalizeClass)((0,f.unref)(V).cssClasses.icon),"aria-hidden":"true"}," expand_more ",2)])):(0,f.renderSlot)(r.$slots,"expand-less-icon",{key:1},(()=>[(0,f.createElementVNode)("i",{class:(0,f.normalizeClass)((0,f.unref)(V).cssClasses.icon),"aria-hidden":"true"}," chevron_right ",2)]))],8,N))]),e.treeData.multiple?((0,f.openBlock)(),(0,f.createElementBlock)("div",{key:1,class:"mdc-tree-node__checkbox",onClick:e=>n(o)},[o[(0,f.unref)(a).isLeaf]?((0,f.openBlock)(),(0,f.createBlock)(E,{key:0,checked:o.checked,disabled:o.disabled},null,8,["checked","disabled"])):((0,f.openBlock)(),(0,f.createBlock)(E,{key:1,checked:o.checked,indeterminate:o.indeterminate,disabled:o.disabled},null,8,["checked","indeterminate","disabled"]))],8,M)):(0,f.createCommentVNode)("",!0),(0,f.createElementVNode)("label",{class:(0,f.normalizeClass)({"mdc-tree-node__label":!0,"mdc-tree-node__label--disabled":o.disabled}),onClick:(0,f.withModifiers)((a=>{return e.treeData.multiple?n(o):void(!(l=o).disabled&&v.onSelect(t.treeData,l));var l}),["prevent"])},[(0,f.renderSlot)(r.$slots,"title",{data:l(o)},(()=>[(0,f.createTextVNode)((0,f.toDisplayString)(o[(0,f.unref)(a).label]),1)]))],10,D),(0,f.renderSlot)(r.$slots,"after",{data:l(o)})],2),!o[(0,f.unref)(a).isLeaf]&&o.expanded?((0,f.openBlock)(),(0,f.createBlock)(d,{key:0,class:"mdc-tree-node__children",children:o[(0,f.unref)(a).children],"tree-data":e.treeData},(0,f.createSlots)({_:2},[(0,f.renderList)(r.$slots,((e,t)=>({name:t,fn:(0,f.withCtx)((e=>[(0,f.renderSlot)(r.$slots,t,(0,f.normalizeProps)((0,f.guardReactiveProps)(e)))]))})))]),1032,["children","tree-data"])):(0,f.createCommentVNode)("",!0)],2)))),128))])}}});const B={dataFormat:{label:"label",value:"value",children:"children",hasChildren:"hasChildren",isLeaf:"isLeaf",disabled:"disabled",parentKey:"parentKey"},EVENTS:{CHANGE:"update:modelValue",SELECTED:"selected"}},w={name:"UiTree",customOptions:{UI_TREE:B}};var O=Object.assign(w,{props:{modelValue:{type:[String,Number,Array],default:""},filterParentNode:{type:Boolean,default:!1},data:{type:Array,default:()=>[]},dataFormat:{type:Object,default:()=>({})},maxLevel:{type:Number,default:0},multiple:{type:Boolean,default:!1},singleChecked:{type:Boolean,default:!1},loadData:{type:[Function,null],default:null},autoExpandParent:{type:Boolean,default:!1},defaultExpandedKeys:{type:Array,default:()=>[]},autoExpandSelected:{type:Boolean,default:!1},autoExpandAll:{type:Boolean,default:!1}},emits:[B.EVENTS.CHANGE,B.EVENTS.SELECTED],setup(e,t){let{expose:a,emit:n}=t;const l=e,r=n,o=(0,f.reactive)({$tree:null,nodeList:[],treeData:{dataFormat:Object.assign(B.dataFormat,l.dataFormat),maxLevel:l.maxLevel,nodeMap:new Map,selectedValue:l.modelValue,filterParentNode:l.filterParentNode,multiple:l.multiple,singleChecked:l.singleChecked,loadData:l.loadData,selectedEvent:{}}}),{nodeList:d,treeData:c}=(0,f.toRefs)(o),s=(0,f.computed)((()=>({"mdc-tree":!0,"mdc-tree--multiple":l.multiple})));function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l.data;o.nodeList=o.$tree.getData(e),o.nodeList.length&&(v.setExpanded(o.treeData,o.nodeList,{autoExpandParent:l.autoExpandParent,defaultExpandedKeys:l.defaultExpandedKeys,autoExpandAll:l.autoExpandAll}),v.setSelected(o.treeData,o.treeData.selectedValue,{nodeList:o.nodeList,autoExpandSelected:l.autoExpandSelected}))}function u(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];(0,f.nextTick)((()=>{t.length&&v.resetSelected(o.treeData,t),v.setSelected(o.treeData,e,{nodeList:o.nodeList,autoExpandSelected:l.autoExpandSelected}),o.treeData.selectedValue=e}))}(0,f.watch)((()=>l.modelValue),((e,t)=>{Array.isArray(e)?((e,t)=>{for(const a of new Set([...e,...t]))if(e.filter((e=>e===a)).length!==t.filter((e=>e===a)).length)return!1;return!0})(o.treeData.selectedValue,e)||u(e,t):o.treeData.selectedValue!==e&&u(e)})),(0,f.watch)((()=>l.data),(e=>i(e))),(0,f.watch)((()=>o.treeData.selectedValue),(e=>{r(B.EVENTS.CHANGE,e,o.treeData.selectedEvent),r(B.EVENTS.SELECTED,Array.isArray(e)?e.map((e=>p(e))):p(e))})),(0,f.onBeforeMount)((()=>{if(l.multiple&&!Array.isArray(o.treeData.selectedValue))throw new Error("[UiTree]: The 'modelValue' prop must be an array in the multiple tree")})),(0,f.onMounted)((()=>{o.$tree=new v(o.treeData),i()}));const p=e=>o.treeData.nodeMap.get(e);return a({updateNode:function(e,t,a){switch(e){case"create":v.createNode(o.treeData,t,a);break;case"delete":v.deleteNode(o.treeData,t,a);break;default:v.updateNode(o.treeData,t,a)}},getNode:p}),(e,t)=>((0,f.openBlock)(),(0,f.createElementBlock)("div",{class:(0,f.normalizeClass)(s.value)},[(0,f.renderSlot)(e.$slots,"default"),(0,f.createVNode)(_,{children:(0,f.unref)(d),"tree-data":(0,f.unref)(c)},(0,f.createSlots)({_:2},[(0,f.renderList)(e.$slots,((t,a)=>({name:a,fn:(0,f.withCtx)((t=>[(0,f.renderSlot)(e.$slots,a,(0,f.normalizeProps)((0,f.guardReactiveProps)(t)))]))})))]),1032,["children","tree-data"])],2))}});var j=h({UiTree:O,UiTreeNode:_});return l=l.default}()}));