@farris/ui-vue/components/list-view/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(H,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../common/index.umd.js"),require("../data-view/index.umd.js"),require("vue-i18n"),require("../checkbox/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js","../data-view/index.umd.js","vue-i18n","../checkbox/index.umd.js"],e):(H=typeof globalThis<"u"?globalThis:H||self,e(H["list-view"]={},H.Vue,H.common,H.dataView,H.vueI18n,H.checkbox))})(this,function(H,e,_,R,J,E){"use strict";const z={columns:{type:Array,default:[{field:"name",title:"",dataType:"string"}]},customClass:{type:String,default:""},data:{type:Array,default:[]},draggable:{type:Boolean,default:!1},multiSelect:{type:Boolean,default:!1},multiSelectMode:{type:String,default:"OnCheck"},idField:{type:String,default:"id"},valueField:{type:String,default:"id"},textField:{type:String,default:"name"},titleField:{type:String,default:"name"},view:{type:String,default:"ContentView"},size:{type:String,default:"default"},placeholder:{type:String,default:""},header:{type:String,default:"ContentHeader"},headerClass:{type:String,default:""},itemClass:{type:[String,Function],default:"",validator:t=>typeof t=="string"||typeof t=="function"},itemStyle:{type:[String,Function],default:"",validator:t=>typeof t=="string"||typeof t=="function"},itemContentClass:{type:String,default:""},selectionValues:{type:Array,default:[]},group:{type:Object},selection:{type:Object,default:{enableSelectRow:!0,multiSelect:!1,multiSelectMode:"DependOnCheck",showCheckbox:!1,showSelectAll:!1,showSelection:!0}},keepOrder:{type:Boolean,default:!1},disableField:{type:String,default:"disabled"},enableHighlightSearch:{type:Boolean,default:!0},virtualized:{type:Boolean,default:!0},checkBeforeRemoveItem:{type:Function,default:null},headerTemplate:{type:Object},contentTemplate:{type:Object},footerTemplate:{type:Object},emptyTemplate:{type:Object},pagination:{type:Object,default:{enable:!1,size:20}}};function Q(t,o){function C(a){const c=[];let m=a.nextNode();for(;m;)c.push(m),m=a.nextNode();return c}function w(a,c){const m=document.createTreeWalker(a,NodeFilter.SHOW_TEXT);return C(m).map(p=>({textNode:p,text:(p.textContent||"").toLocaleLowerCase()})).map(({textNode:p,text:i})=>{const r=[];let b=0;for(;b<i.length;){const S=i.indexOf(c,b);if(S===-1)break;r.push(S),b=S+c.length}return r.map(S=>{const v=new Range;return v.setStart(p,S),v.setEnd(p,S+c.length),v})}).flat()}function h(a){if(!CSS.highlights||(CSS.highlights.clear(),!a||!o))return;const c=w(o.value,a.toLocaleLowerCase()),m=new Highlight(...c);CSS.highlights.set("search-result",m)}return{search:h}}function K(t,o,C,w,h,a,c,m,O,g){const D=e.ref(t.size),p=e.ref(t.textField),i=e.ref(t.titleField),r=e.ref(t.disableField),b=e.computed(()=>{var n,s;return((n=t.selection)==null?void 0:n.multiSelect)&&((s=t.selection)==null?void 0:s.showCheckbox)}),{onMouseenterItem:S,onMouseoverItem:v,onMouseoutItem:N}=a,{getKey:V,listViewItemClass:T,onCheckItem:x,onClickItem:B}=c,u=e.computed(()=>{const n={"text-overflow":"ellipsis",overflow:"hidden","white-space":"nowrap"};return t.itemClass?n:{margin:D.value==="small"?"0.25rem 0":"8px 0",...n}});function l(n,s,M){return n.checked=m.findIndexInSelectedItems(n)>-1,e.createVNode("li",{class:T(n,s),id:V(n,s),key:V(n,s),onClick:F=>B(n,s,F),onMouseenter:F=>S(F,n,s),onMouseover:F=>v(F,n,s),onMouseout:F=>N(F,n,s)},[b.value&&e.createVNode("div",{class:"f-list-select",onClick:F=>F.stopPropagation()},[e.createVNode(E.FCheckbox,{id:"list-"+V(n,s),customClass:"listview-checkbox float-left",disabled:n[r.value],checked:n.checked,"onUpdate:checked":F=>n.checked=F,onChange:F=>{x(n,s,!F.checked)}},null)]),e.createVNode("div",{class:"f-list-content"},[e.createVNode("div",{class:t.itemContentClass,style:u.value,title:n.raw[i.value]||n.raw[p.value]},[n.raw[p.value]])])])}return{renderItem:l}}function Z(t,o,C,w,h,a,c,m,O,g){const D=e.ref(t.multiSelect),p=e.ref(t.disableField),i=e.ref(t.textField),{onMouseenterItem:r,onMouseoverItem:b,onMouseoutItem:S}=a,{getKey:v,listViewItemClass:N,listViewItemStyle:V,onCheckItem:T,onClickItem:x}=c;function B(l,n,s){return t.contentTemplate?e.createVNode(e.Fragment,null,[t.contentTemplate({item:l.raw,index:n,selectedItem:s})]):o.slots.content?e.createVNode(e.Fragment,null,[o.slots.content&&o.slots.content({item:l.raw,index:n,selectedItem:s})]):e.createVNode("div",{style:"margin: 10px 0;"},[l.raw[i.value||"name"]])}function u(l,n,s){return e.createVNode("li",{class:N(l,n),id:v(l,n),key:v(l,n),style:V(l,n),onClick:M=>x(l,n,M),onMouseenter:M=>r(M,l,n),onMouseover:M=>b(M,l,n),onMouseout:M=>S(M,l,n)},[D.value&&e.createVNode("div",{class:"f-list-select",onClick:M=>M.stopPropagation()},[e.createVNode(E.FCheckbox,{id:"list-"+v(l,n),customClass:"listview-checkbox",disabled:l[p.value]||!l.checked,checked:l.checked,"onUpdate:checked":M=>l.checked=M,onChange:M=>T(l,n,!M.checked)},null)]),e.createVNode("div",{class:"f-list-content"},[B(l,n,s)])])}return{renderItem:u}}function ee(t,o,C,w,h,a,c,m,O,g){const D=e.ref(t.multiSelect),p=e.ref(t.disableField),i=e.ref(t.textField),{onMouseenterItem:r,onMouseoverItem:b,onMouseoutItem:S}=a,{getKey:v,listViewItemClass:N,onCheckItem:V,onClickItem:T}=c,{dragstart:x,dragenter:B,dragover:u,dragend:l}=w,{removeItem:n}=O,s=e.computed(()=>({margin:D.value?"10px 0":"10px 0px 10px 14px"}));function M(d,f=""){const j=d.target;j.title=j.scrollWidth>j.clientWidth?f:""}function F(d){return e.createVNode("div",{style:s.value,onMouseenter:f=>M(f,d.raw[i.value||"name"])},[d.raw[i.value||"name"]])}function P(){return o.slots.itemContent?o.slots.itemContent:F}const G=P();function y(d,f,j){return e.createVNode("li",{class:N(d,f),id:v(d,f),key:v(d,f),onClick:I=>T(d,f,I),onMouseenter:I=>r(I,d,f),onMouseover:I=>b(I,d,f),onMouseout:I=>S(I,d,f),draggable:"true",onDragstart:I=>x(I,d,f),onDragenter:I=>B(I,f),onDragend:I=>l(I,d),onDragover:I=>u(I)},[D.value&&e.createVNode("div",{class:"f-list-select",onClick:I=>I.stopPropagation()},[e.createVNode(E.FCheckbox,{id:"list-"+v(d,f),customClass:"listview-checkbox",disabled:d[p.value]||!d.checked,checked:d.checked,"onUpdate:checked":I=>d.checked=I,onChange:I=>V(d,f,!I.checked)},null)]),e.createVNode("div",{class:"f-list-content"},[G(d)]),e.createVNode("div",{class:"f-list-remove",onClick:I=>n(f)},[e.createVNode("div",{class:"f-list-remove-icon"},[e.createVNode("i",{class:"f-icon f-icon-remove_face"},null)])]),e.createVNode("div",{class:"f-list-handle"},[e.createVNode("div",null,[e.createVNode("i",{class:"f-icon f-icon-drag-vertical"},null)])])])}return{renderItem:y}}function te(t,o,C,w,h,a,c,m,O,g){var v;const D=e.ref(((v=t.group)==null?void 0:v.groupFields)||[]),{collpaseGroupIconClass:p}=h,{toggleGroupRow:i}=g;function r(N,V){V.collapse=!V.collapse,C.value=i(V.collapse?"collapse":"expand",V,C.value)}function b(N,V,T){return o.slots.group?e.createVNode(e.Fragment,null,[o.slots.content&&o.slots.group({item:N.raw,index:V,selectedItem:T})]):e.createVNode("div",{class:"f-navlookup-recentHeader",onClick:x=>r(x,N)},[e.createVNode("div",{class:"fv-grid-group-row-icon"},[e.createVNode("span",{class:p(N)},null)]),e.createVNode("div",{class:"f-navlookup-recommandLabel"},[N.raw[D.value[N.layer]]])])}function S(N,V,T){return N.layer>-1&&b(N,V,T)}return{renderItem:S}}function ne(t,o,C,w){const{dataView:h}=C,{updateSelectedItems:a}=w;function c(m){if(m>-1&&m<h.value.length){if(t!=null&&t.checkBeforeRemoveItem&&!t.checkBeforeRemoveItem(h.value[m]))return;const O=h.value.splice(m,1);a(),o.emit("removeItem",O[0])}}return{removeItem:c}}function oe(t,o,C,w,h,a,c,m,O,g){const{t:D}=J.useI18n(),p=e.ref(t.view),i=e.ref(t.view==="CardView"),r=e.ref({}),b=e.ref(D("listView.emptyMessage")),S=ne(t,o,w,O),v=e.computed(()=>({"f-list-view-group":!0,"f-list-view-group-multiselect":t.multiSelect,"d-flex":i.value,"flex-wrap":i.value})),N=e.computed(()=>!!C.value&&C.value.length>0),V=e.computed(()=>C.value.length===0);e.computed(()=>V.value&&!o.slots.empty);function T(){return p.value==="SingleView"?K:p.value==="DraggableView"?ee:(p.value==="ContentView"||p.value==="CardView")&&(t.contentTemplate||o.slots.content)?Z:K}const x=T(),{renderItem:B}=x(t,o,C,g,h,a,O,c,S,m),{renderItem:u}=te(t,o,C,g,h,a,O,c,S,m),l=[B,u];function n(){return C.value.filter(F=>F.visible!==!1).map((F,P)=>l[F.type](F,P,r))}function s(){return e.createVNode("div",{class:"f-list-view-emptydata",style:"margin: 0 auto;"},[e.createVNode("p",{class:"f-empty-title"},[t.emptyTemplate?t.emptyTemplate():o.slots.empty?o.slots.empty():b.value])])}function M(){return e.createVNode("ul",{class:v.value,style:"list-style: none;"},[N.value&&n(),V.value&&s()])}return{renderListArea:M}}function ae(t,o,C){function w(){return o.slots.header&&e.createVNode("div",{class:"f-list-view-header"},[o.slots.header()])}return{renderHeader:w}}function U(t,o,C){const w=e.ref(t.headerClass),h=e.ref(t.placeholder),a=e.ref(""),c=e.computed(()=>!a.value),m=e.computed(()=>!!a.value);function O(i){a.value=""}e.watch(a,i=>{t.enableHighlightSearch&&C.search(i),o.emit("afterSearch",i)});const g=e.computed(()=>{const i={"form-group":!0,"farris-form-group":!0};return w.value&&w.value.split(" ").reduce((b,S)=>(b[S]=!0,b),i),i});function D(i){}function p(){return e.createVNode("div",{class:"f-list-view-header",onClick:e.withModifiers(()=>D,["prevent","stop"])},[e.createVNode("div",{class:g.value},[e.createVNode("div",{class:"farris-input-wrap"},[e.createVNode("div",{class:"f-cmp-inputgroup"},[e.createVNode("div",{class:"input-group f-state-editable"},[e.withDirectives(e.createVNode("input",{class:"form-control f-utils-fill text-left","onUpdate:modelValue":i=>a.value=i,name:"input-group-value",type:"text",placeholder:h.value,autocomplete:"off"},null),[[e.vModelText,a.value]]),e.createVNode("div",{class:"input-group-append"},[m.value&&e.createVNode("span",{class:"input-group-text input-group-clear",onClick:i=>O()},[e.createVNode("i",{class:"f-icon f-icon-close-circle"},null)]),c.value&&e.createVNode("span",{class:"input-group-text"},[e.createVNode("span",{class:"f-icon f-icon-search"},null)])])])])])])])}return{renderHeader:p}}function le(){const t=e.ref(""),o=e.ref(-1),C=e.ref(""),w=e.ref(-1),h=e.ref(!1);function a(p,i,r){w.value=r}function c(p,i,r){h.value||(w.value=r)}function m(p,i,r){w.value=-1}function O(){h.value=!0}function g(){h.value=!1}function D(){o.value=-1,t.value=""}return{activeIndex:o,focusedItemId:C,hoverIndex:w,clearActiveItem:D,onMouseenterItem:a,onMouseoverItem:c,onMouseoutItem:m,resumeHover:g,suspendHover:O}}function se(t,o,C,w){const h=e.ref(t.idField),{dataView:a}=C,c=e.ref(-1),m=e.ref(!1),{activeIndex:O,focusedItemId:g,hoverIndex:D,resumeHover:p,suspendHover:i}=w;let r,b=0,S=0;function v(u,l){const n=u-b,s=l-S;r.style.left=parseInt(r.style.left)+n+"px",r.style.top=parseInt(r.style.top)+s+"px",b=u,S=l}function N(u){const{left:l,top:n}=u.getBoundingClientRect(),s=u.cloneNode(!0);return s.style.cssText=`
        position:absolute;
        left:${l}px;
        top:${document.documentElement.scrollTop?n+document.documentElement.scrollTop:n}px;
        z-index: 999999;
        border: 1px solid #e2e3e5;
        pointer-events: none;
        background-color: #edf5ff;
        border-radius: 10px;
        margin: 4px 2px;    
        display: flex;
        align-items: center;
        float: none;
        text-align: initial;
        width:${getComputedStyle(u).width};
        height:${getComputedStyle(u).height};
        `,s.children[0].style.cssText="overflow: hidden;flex: 1 1 auto;width: 100%;",s.children[0].children[0].style.cssText=`
        margin: 10px 0px 10px 14px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
        `,s.children[1].style.cssText="width: 30px;color: #f4625f;padding: 0 14px 0 0",s.children[2].style.cssText="padding: 0 14px 0 0;",document.body.appendChild(s),s}function V(u,l,n){if(u.stopPropagation(),i(),l){if(r=N(u.target),u.dataTransfer){const s=new Image;s.src="",u.dataTransfer.setDragImage(s,0,0)}b=u.pageX,S=u.pageY,setTimeout(()=>{c.value=n,m.value=!0,l.moving=!0})}}function T(u,l){if(u.preventDefault(),c.value!==l){const n=a.value[c.value],s=a.value;s.splice(c.value,1),s.splice(l,0,n),c.value=l,v(u.pageX,u.pageY)}}function x(u){u.preventDefault(),u.dataTransfer&&(u.dataTransfer.dropEffect="move"),v(u.pageX,u.pageY)}function B(u,l){l&&(l.moving=!1,r&&(document.body.removeChild(r),r=null)),a.value.forEach((n,s)=>{n.__fv_index__=s}),m.value=!1,p(),D.value=l.raw.__fv_index__,O.value=l.raw.__fv_index__,g.value=l.raw[h.value],o.emit("change",a.value),o.emit("activeChange",[l.raw])}return{dragstart:V,dragenter:T,dragover:x,dragend:B,isDragging:m}}function ce(t,o,C,w,h,a){const c=e.ref(t.idField),m=e.ref(t.disableField),O=e.ref(t.draggable);e.ref(t.itemClass);const g=e.ref(t.selection.multiSelect??!1),D=e.ref(t.selection.multiSelectMode),{isDragging:p}=w,{activeIndex:i,focusedItemId:r,hoverIndex:b}=h,{clearSelection:S,getSelectedItems:v,toggleSelectItem:N,currentSelectedDataId:V}=a,T=e.ref(v()),x=y=>T.value.length===0?!1:T.value.some(d=>{let f="";return d.data?f=d.data[c.value]:f=d[c.value],f===y});function B(){T.value=v()}function u(y,d){return y.raw[c.value]!=null?y.raw[c.value]:""}function l(y,d){const f={"f-list-view-group-item":!0,"f-list-view-draggable-item":O.value,"f-un-click":!y.checked,"f-un-select":!!y.raw[m.value],"f-listview-active":g.value&&x(u(y))||!g.value&&y.raw[c.value]===V.value,"f-listview-hover":!p.value&&d===b.value,moving:!!y.moving};if(typeof t.itemClass=="string")return _.getCustomClass(f,t.itemClass);if(typeof t.itemClass=="function"){const j=t.itemClass(y);return _.getCustomClass(f,j)}return f}function n(y,d){const f=g.value&&x(u(y))||!g.value&&y.raw[c.value]===V.value,j={};if(f&&(j.backgroundColor="#dae9ff"),typeof t.itemStyle=="string")return _.getCustomStyle(j,t.itemStyle);if(typeof t.itemStyle=="function"){const I=t.itemStyle(y);return _.getCustomStyle(j,I)}return j}const s=e.computed(()=>!g.value);function M(y,d,f){y.checked=f,!y.raw[m.value]&&(s.value&&(r.value=y.raw[c.value]),N(y))}const F=e.computed(()=>g.value&&D.value==="OnCheckClearByClick"),P=e.computed(()=>!g.value||g.value&&(D.value==="OnCheckAndClick"||D.value==="OnClick"));function G(y,d,f){if(y.raw[m.value]){f==null||f.preventDefault(),f==null||f.stopPropagation();return}r.value=y.raw[c.value],i.value=d,F.value&&S(),P.value&&(N(y),B()),o.emit("clickItem",{data:T.value,index:d,dataItem:y.raw}),o.emit("activeChange",T.value)}return{getKey:u,selectedItems:T,listViewItemClass:l,listViewItemStyle:n,updateSelectedItems:B,onCheckItem:M,onClickItem:G}}const A=e.defineComponent({name:"FListView",props:z,emits:["afterSearch","checkValuesChange","clickItem","selectItem","unSelectItem","selectionChange","removeItem","change","activeChange","pageIndexChanged","pageSizeChanged","changed"],setup(t,o){const C=e.ref(),w=e.ref(!0),h=e.ref(!1),a=e.ref([]),c=0,m=e.ref(t.columns),O=R.useFilter(t,o),g=R.useIdentify(t),D=R.useHierarchy(t),p=R.useGroupData(t,g),i=R.useDataView(t,new Map,O,D,g),r=R.useSelection(t,i,g,a,o),b=Q(t,C),S=R.usePagination(t,i),v=e.computed(()=>i.dataView.value.length),N=R.useRow(t,o,r,g),V=R.useEdit(t,o,g,N,a),T=R.useVisualDataBound(t),x=R.useVisualDataCell(t,{},T),B=R.useVisualDataRow(t,i,V,D,g,T,x),u=R.useVisualGroupRow(t,g,x,B),l=R.useVisualSummaryRow(t,g,x,B),n=R.useVisualData(t,m,i,v,c,B,u,l),{getVisualData:s}=n;a.value=s(0,v.value+c-1);const M=e.computed(()=>{const k={"f-list-view":!0,"f-list-view-multiple":t.multiSelect};return t.size!=="default"&&(k[`${t.size}-item`]=!0),_.getCustomClass(k,t.customClass)}),F=e.computed(()=>!!o.slots.footer||w.value);function P(){return t.header==="SearchBar"?U:t.header==="ContentHeader"?ae:U}const G=P(),{renderHeader:y}=G(t,o,b),d=le(),f=se(t,o,i,d),j=ce(t,o,a,f,d,r),{renderListArea:I}=oe(t,o,a,i,p,d,r,n,j,f);function ie(k){b.search(k)}function re(k){k&&(i.load(k),a.value=s(0,v.value+c-1))}function ue(){r.clearSelection(),d.clearActiveItem()}function de(){return j.selectedItems.value}function fe(){return j.selectedItems.value.map(k=>k[g.idField.value])}function X(k){r.selectedValues.value=k,j.updateSelectedItems()}function me(){return r.currentSelectedDataId.value}function ge(k){N.activeRowById(k)}function he(k){const L=g.idField.value,Y=a.value.find(W=>W.raw[L]===k),$=a.value.findIndex(W=>W.raw[L]===k);Y&&$>-1&&j.onClickItem(Y,$)}function pe(k){S.updatePagination(k)}function Ce(k){return a.value.filter(L=>k.includes(L.raw[t.idField]))}o.expose({search:ie,updateDataSource:re,clearSelection:ue,getSelections:de,updateSelectionByIds:X,getSelectionIds:fe,activeRowById:ge,getCurrentRowId:me,clickRowItemById:he,updatePagination:pe,getVisibleDataByIds:Ce});function ve(k){t.multiSelect&&(k.preventDefault(),k.stopPropagation())}e.watch(()=>t.selectionValues,(k,L)=>{k!==L&&X(k)});const ye=R.useSidebar(t,r),{sidebarWidth:we,showSidebarCheckBox:ke}=ye,Se=R.useColumn(t,o),{applyColumnSorter:be,columnContext:Ve,updateColumnRenderContext:Ne}=Se,Ie=R.useVirtualScroll(t,i,a,Ve,n,v,c,we,V);return R.getPagination(t,o,i,Ie,S,r),()=>e.createVNode("div",{class:M.value,onClick:ve},[y(),e.createVNode("div",{ref:C,class:"f-list-view-content",onMouseover:()=>{h.value=!0},onMouseleave:()=>{h.value=!1}},[I()]),F.value&&e.createVNode("div",{class:"f-list-view-footer"},[t.footerTemplate?t.footerTemplate():o.slots.footer&&o.slots.footer()])])}}),q=e.defineComponent({name:"FListViewTable",props:z,emits:["outputValue","currentEvent","selectionChanged"],setup(t,o){const C=[{name:"任芳",code:"1.PO20198989001",date:"2024-02-19",desc:"导游1",amount:63.85,avatar:"./assets/avatar1.png"},{name:"戴秀兰",code:"2.PO20198989002",date:"2024-03-17",desc:"导游2",amount:60.13,avatar:"./assets/avatar2.png"},{name:"尹磊",code:"3.PO20198989003",date:"2024-04-09",desc:"导游3",amount:36.54,avatar:"./assets/avatar3.png"},{name:"赵明",code:"4.PO20198989004",date:"2024-03-27",desc:"导游4",amount:52.76,avatar:"./assets/avatar4.png"},{name:"吕洋",code:"5.PO20198989005",date:"2024-11-17",desc:"导游5",amount:84.13,avatar:"./assets/avatar5.png"}],w=e.computed(()=>t.data.length>0?t.data:C);return()=>{var h;return e.createVNode(e.Fragment,null,[(h=w.value)==null?void 0:h.map(a=>e.createVNode("div",{class:"f-template-listview-row"},[e.createVNode("div",{class:"list-view-item-title"},[e.createVNode("div",{class:"item-title-img"},[e.createVNode("img",{src:a.avatar,alt:"",style:"width: 44px;"},null)]),e.createVNode("div",{class:"item-title"},[e.createVNode("p",{class:"item-title-heading"},[a.code]),e.createVNode("p",{class:"item-title-text"},[a.desc])])]),e.createVNode("div",{class:"list-view-item-content"},[e.createVNode("div",{class:"content-message"},[e.createVNode("div",{class:"ower"},[e.createVNode("p",null,[e.createTextVNode("创建人")]),e.createVNode("p",{class:"con"},[a.name])]),e.createVNode("div",{class:"date"},[e.createVNode("p",null,[e.createTextVNode("创建时间")]),e.createVNode("p",{class:"con"},[a.date])])])])]))])}}});A.install=t=>{t.component(A.name,A),t.component(q.name,q)},H.FListView=A,H.FListViewTable=q,H.default=A,H.listViewProps=z,Object.defineProperties(H,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});