ld-v2-kit 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +2 -2
- package/dist/index.umd.js +2 -2
- package/package.json +4 -2
package/dist/index.esm.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* ld-v2-kit version 1.0.
|
|
2
|
-
import{ELTableColumn as n,ELTable as e,ELPagination as t,ElEmpty as a,ElDialog as i}from"element-ui";import o from"vue";const l=(n={})=>{const{t:e=Number.POSITIVE_INFINITY,i:t=Number.POSITIVE_INFINITY,o:a=!0,type:i="inner"}=n;return{data:()=>({t:e,i:t,l:null}),p(){this.u(),this.l=()=>this.u(),window.addEventListener("resize",this.l,{passive:!0}),this.m("hook:beforeDestroy",()=>{window.removeEventListener("resize",this.l)})},h:{u(){"outer"===i?(this.t=window.outerWidth,this.i=window.outerHeight):a?(this.t=window.innerWidth,this.i=window.innerHeight):(this.t=window.document.documentElement.clientWidth,this.i=window.document.documentElement.clientHeight)}}}};function s(n,e,t,a,i,o,l,s,r,d){"boolean"!=typeof l&&(r=s,s=l,l=!1);const p="function"==typeof t?t.options:t;let c;if(n&&n.A&&(p.A=n.A,p.v=n.v,p.C=!0,i&&(p._=!0)),a&&(p.S=a),o?(c=function(n){(n=n||this.T&&this.T.L||this.parent&&this.parent.T&&this.parent.T.L)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,r(n)),n&&n.D&&n.D.add(o)},p.P=c):e&&(c=l?function(n){e.call(this,d(n,this.O.$.shadowRoot))}:function(n){e.call(this,s(n))}),c)if(p._){const n=p.A;p.A=function(e,t){return c.call(t),n(e,t)}}else{const n=p.M;p.M=n?[].concat(n,c):[c]}return t}const r={name:"LdTableColumn",k:{B:n},H:{j:{type:Object,required:!0}},h:{R(n){const e={align:"center",N:"center",...n};return delete e.W,delete e.I,e}}};var d=function(){var n=this,e=n.Y,t=n.U.F||e;return t("ELTableColumn",n.J({X:n.q([!n.j.children&&n.j.W&&n.j.G?{key:"header",V:function(e){var t=e.j,a=e.K;return[n.Z[n.j.G+"-header"]||n.nn[n.j.G+"-header"]?[n.en(n.j.G+"-header",null,{j:t,K:a})]:[n.tn("\n "+n.an(n.j.label)+"\n ")]]}}:null,!n.j.children&&n.j.I&&n.j.G?{key:"default",V:function(e){var t=e.ln,a=e.j,i=e.K;return[n.Z[n.j.G]||n.nn[n.j.G]?[n.en(n.j.G,null,{ln:t,j:a,K:i})]:[n.tn("\n "+n.an(n.j.sn?n.j.sn(t,a,t[n.j.G],i):t[n.j.G])+"\n ")]]}}:null],null,!0)},"ELTableColumn",n.R(n.j),!1),[n.j.children&&n.j.children.length>0?n.rn(n.j.children,function(n){return t("LdTableColumn",{key:n.G||n.label,dn:{j:n}})}):n.pn()],2)};d.cn=!0;var p=s({A:d,v:[]},void 0,r,void 0,!1,void 0,!1,void 0,void 0,void 0),c={name:"LdTable",un:!1,k:{mn:e,B:n,gn:t,hn:a,fn:p},An:[l()],H:{loading:{type:Boolean,default:!1},columns:{type:Array,default:()=>[]},bn:{type:[Object,Boolean],default:()=>({})},yn:{type:Object,default:()=>({})},vn:{type:String,default:"100%"},En:{type:Object,default:()=>({})},xn:{type:Boolean,default:!0},Cn:{type:Boolean,default:!0},_n:{type:Boolean},border:{type:Boolean},size:{type:String},height:{type:[String,Number]},data:{type:Array,default:()=>[]}},data:()=>({wn:48,Sn:null}),Tn:{Ln(){return this.bn&&!this.Dn},Pn(){return this.columns.map(n=>({hidden:n.hidden||!1,...n})).filter(n=>!n.hidden)},$n(){return{xn:this.xn,Cn:this.Cn,_n:this._n,border:this.border,size:this.size,data:this.data,...this.On,height:this.zn}},Mn(){return{kn:[100,200,300,500,1e3],align:"center",background:!0,layout:"total, prev, pager, next, sizes, jumper",Bn:!1,size:"default",Hn:this.t>1200?7:5,...this.yn}},Dn(){return this.data&&0===this.data.length},jn(){const n=(this.Ln?this.wn:0)+12;return{height:0===n?"100%":`calc(100% - ${n}px)`}},zn(){return this.Dn&&!this.loading?this.vn:this.height?this.height:"100%"},Rn(){return{description:this.Nn,Wn:120,...this.En}}},h:{In(n){if(!this.bn)return n+1;const{Yn:e,size:t}=this.bn;return isNaN((e-1)*t+n+1)?n+1:(e-1)*t+n+1},Fn(n){this.Un("pagination:size-change",n)},Jn(n){this.Un("pagination:current-change",n),this.Xn()},Xn(){this.qn(()=>{const n=this.Gn.Qn;if(n){const e=n.Vn.querySelectorAll(".el-table__body-wrapper");e.length>0&&e.forEach(n=>{n.scrollTo({top:0,left:0})})}})}}};const u="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function m(n){return(n,e)=>function(n,e){const t=u?e.media||"default":n,a=h[t]||(h[t]={Kn:new Set,Zn:[]});if(!a.Kn.has(n)){a.Kn.add(n);let t=e.source;if(e.map&&(t+="\n/*# sourceURL="+e.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",e.media&&a.element.setAttribute("media",e.media),void 0===g&&(g=document.head||document.getElementsByTagName("head")[0]),g.appendChild(a.element)),"styleSheet"in a.element)a.Zn.push(t),a.element.styleSheet.cssText=a.Zn.filter(Boolean).join("\n");else{const n=a.Kn.size-1,e=document.createTextNode(t),i=a.element.childNodes;i[n]&&a.element.removeChild(i[n]),i.length?a.element.insertBefore(e,i[n]):a.element.appendChild(e)}}}(n,e)}let g;const h={},f=c;var A=function(){var n=this,e=n.Y,t=n.U.F||e;return t("div",{ne:"ld-table",ee:{"ld-table--empty":n.Dn},style:n.jn},[t("ELTable",n.te(n.J({ae:[{name:"loading",ie:"v-loading",value:!!n.loading,oe:"!!loading"}],le:"elTableRef",X:n.q([{key:"empty",V:function(){return[n.Z.tableEmpty?[n.en("tableEmpty")]:[n.loading?t("div"):t("ELEmpty",n.J({X:n.q([n.Z.tableEmptyDescription||n.nn.tableEmptyDescription?{key:"description",V:function(){return[n.en("tableEmptyDescription")]},proxy:!0}:null,n.Z.tableEmptyImage||n.nn.tableEmptyImage?{key:"image",V:function(){return[n.en("tableEmptyImage")]},proxy:!0}:null,n.Z.tableEmptyDefault||n.nn.tableEmptyDefault?{key:"default",V:function(){return[n.en("tableEmptyDefault")]},proxy:!0}:null],null,!0)},"ELEmpty",n.Rn,!1))]]},proxy:!0},{key:"append",V:function(){return[n.en("tableAppend")]},proxy:!0}],null,!0)},"ELTable",n.$n,!1),n.se),[n.rn(n.Pn,function(e){return["globalIndex"===e.type?t("ELTableColumn",n.J({key:"globalIndex-"+(e.G||e.type),dn:{fixed:"left",align:"center",N:"center"},X:n.q([{key:"header",V:function(a){var i=a.j,o=a.K;return[n.Z[i.G+"-header"]||n.nn[i.G+"-header"]?[n.en(i.G+"-header",null,{j:i,K:o})]:[t("span",[n.tn(n.an(e.label||"序号"))])]]}},{key:"default",V:function(e){var a=e.ln,i=e.j,o=e.K;return[n.Z[""+i.G]||n.nn[""+i.G]?[n.en(""+i.G,null,{ln:a,j:i,K:o})]:[t("span",[n.tn(n.an(n.In(o)))])]]}}],null,!0)},"ELTableColumn",Object.assign({},e),!1)):t("LdTableColumn",{key:e.G||e.label,dn:{j:e},X:n.q([n.rn(n.Z,function(e,t){return{key:t,V:function(e){return[n.en(t,null,null,e)]}}})],null,!0)})]})],2),n.tn(" "),n.Ln?t("div",{le:"paginationRef",ne:"ld-table__pagination ld-table__pagination--custom",ee:n.Mn&&n.Mn.align?"ld-table__pagination--"+n.Mn.align:""},[t("ELPagination",n.J({dn:{total:n.bn&&n.bn.total,disabled:n.loading,"page-size":n.bn&&n.bn.size,"current-page":n.bn&&n.bn.Yn},on:{"size-change":n.Fn,"current-change":n.Jn},X:n.q([n.Z.tablePaginationDefault||n.nn.tablePaginationDefault?{key:"default",V:function(){return[n.en("tablePaginationDefault")]},proxy:!0}:null],null,!0)},"ELPagination",n.Mn,!1))],1):n.pn()],1)};A.cn=!0;var b=s({A:A,v:[]},function(n){n&&n("data-v-7b84ff95_0",{source:"\n.ld-table[data-v-7b84ff95] {\n width: 100%;\n position: relative;\n}\n.ld-table--empty[data-v-7b84ff95] {\n min-height: 200px;\n}\n.ld-table .el-table[data-v-7b84ff95] {\n width: 100%;\n}\n.ld-table__pagination[data-v-7b84ff95] {\n margin-top: 16px;\n padding: 8px 0;\n}\n.ld-table__pagination--left[data-v-7b84ff95] {\n text-align: left;\n}\n.ld-table__pagination--center[data-v-7b84ff95] {\n text-align: center;\n}\n.ld-table__pagination--right[data-v-7b84ff95] {\n text-align: right;\n}\n.ld-table__pagination .el-pagination[data-v-7b84ff95] {\n margin: 0;\n}\n.ld-table__pagination--custom[data-v-7b84ff95] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdTable/LdTable.vue"],names:[],mappings:";AAwUA;EACA,WAAA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,WAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;AACA;AAEA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,SAAA;AACA",file:"LdTable.vue",sourcesContent:['<script>\nimport { ELTable, ELTableColumn, ELPagination, ElEmpty } from "element-ui";\nimport { useWindowSize } from "../../mixins/useWindowSize.js";\nimport LdTableColumn from "./LdTableColumn.vue";\n\nexport default {\n name: "LdTable",\n inheritAttrs: false,\n components: {\n ELTable,\n ELTableColumn,\n ELPagination,\n ElEmpty,\n LdTableColumn,\n },\n mixins: [useWindowSize()],\n props: {\n /** 加载状态 */\n loading: {\n type: Boolean,\n default: false,\n },\n /** 列渲染配置 */\n columns: {\n type: Array,\n default: () => [],\n },\n /** 分页状态 */\n pagination: {\n type: [Object, Boolean],\n default: () => ({}),\n },\n /** 分页组件配置 */\n paginationOptions: {\n type: Object,\n default: () => ({}),\n },\n /** 空数据表格高度 */\n emptyHeight: {\n type: String,\n default: "100%",\n },\n // 空状态组件的配置项\n emptyOptions: {\n type: Object,\n default: () => ({}),\n },\n fit: {\n type: Boolean,\n default: true,\n },\n showHeader: {\n type: Boolean,\n default: true,\n },\n stripe: {\n type: Boolean,\n },\n border: {\n type: Boolean,\n },\n size: {\n type: String,\n },\n height: {\n type: [String, Number],\n },\n data: {\n type: Array,\n default: () => [],\n },\n },\n data() {\n return {\n paginationHeight: 48,\n tableHeaderRef: null, // 添加 tableHeaderRef 到 data 中\n };\n },\n computed: {\n showPagination() {\n return this.pagination && !this.isEmpty;\n },\n tableColumns() {\n return this.columns\n .map((column) => ({\n hidden: column.hidden || false,\n ...column,\n }))\n .filter((column) => !column.hidden);\n },\n tableProps() {\n const props = {\n fit: this.fit,\n showHeader: this.showHeader,\n stripe: this.stripe,\n border: this.border,\n size: this.size,\n data: this.data,\n };\n\n // 合并其他表格属性\n const otherProps = this.$attrs;\n return { ...props, ...otherProps, height: this.tableHeight };\n },\n mergedPaginationOptions() {\n const defaultOptions = {\n pageSizes: [100, 200, 300, 500, 1000],\n align: "center",\n background: true,\n layout: "total, prev, pager, next, sizes, jumper",\n hideOnSinglePage: false,\n size: "default",\n pagerCount: this.initialWidth > 1200 ? 7 : 5,\n };\n\n return { ...defaultOptions, ...this.paginationOptions };\n },\n isEmpty() {\n return this.data && this.data.length === 0;\n },\n\n containerHeight() {\n // 简化的容器高度计算\n const paginationHeight = this.showPagination ? this.paginationHeight : 0;\n const offset = paginationHeight + 12;\n return {\n height: offset === 0 ? "100%" : `calc(100% - ${offset}px)`,\n };\n },\n // 表格高度逻辑\n tableHeight() {\n // 空数据且非加载状态时固定高度\n if (this.isEmpty && !this.loading) return this.emptyHeight;\n // 使用传入的高度\n if (this.height) return this.height;\n // 默认占满容器高度\n return "100%";\n },\n // 合并空状态组件配置\n mergedEmptyOptions() {\n const defaultOptions = {\n description: this.emptyText,\n imageSize: 120,\n };\n return { ...defaultOptions, ...this.emptyOptions };\n },\n },\n methods: {\n getGlobalIndex(index) {\n if (!this.pagination) return index + 1;\n const { current, size } = this.pagination;\n return isNaN((current - 1) * size + index + 1)\n ? index + 1\n : (current - 1) * size + index + 1;\n },\n\n handleSizeChange(size) {\n this.$emit("pagination:size-change", size);\n },\n handleCurrentChange(current) {\n this.$emit("pagination:current-change", current);\n this.scrollToTop(); // 页码改变后滚动到表格顶部\n },\n // 滚动表格内容到顶部\n scrollToTop() {\n this.$nextTick(() => {\n const elTableRef = this.$refs.elTableRef;\n if (elTableRef) {\n // 找到 el-table_body 元素\n const tableBody = elTableRef.$el.querySelectorAll(\n ".el-table__body-wrapper"\n );\n if (tableBody.length > 0) {\n tableBody.forEach((item) => {\n item.scrollTo({\n top: 0, // 滚动目标位置(顶部)\n left: 0, // 水平位置(保持0即可)\n // behavior: "smooth", // 关键:平滑滚动,去掉则瞬间跳转\n });\n });\n }\n }\n });\n },\n },\n};\n<\/script>\n\n<template>\n <div\n class="ld-table"\n :class="{ \'ld-table--empty\': isEmpty }"\n :style="containerHeight"\n >\n <ELTable\n ref="elTableRef"\n v-loading="!!loading"\n v-bind="tableProps"\n v-on="$listeners"\n >\n <template v-for="col in tableColumns">\n \x3c!-- 渲染全局序号列 --\x3e\n <ELTableColumn\n v-if="col.type === \'globalIndex\'"\n fixed="left"\n align="center"\n headerAlign="center"\n v-bind="{ ...col }"\n :key="\'globalIndex-\' + (col.prop || col.type)"\n >\n <template #header="{ column, $index }">\n <template\n v-if="\n $scopedSlots[`${column.prop}-header`] ||\n $slots[`${column.prop}-header`]\n "\n >\n <slot\n :name="`${column.prop}-header`"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ col.label || "序号" }}</span>\n </template>\n </template>\n <template #default="{ row, column, $index }">\n <template\n v-if="$scopedSlots[`${column.prop}`] || $slots[`${column.prop}`]"\n >\n <slot\n :name="`${column.prop}`"\n :row="row"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ getGlobalIndex($index) }}</span>\n </template>\n </template>\n </ELTableColumn>\n\n \x3c!-- 渲染列 --\x3e\n <LdTableColumn v-else :key="col.prop || col.label" :column="col">\n <template\n v-for="(_, slotName) in $scopedSlots"\n #[slotName]="slotProps"\n >\n <slot :name="slotName" v-bind="slotProps" />\n </template>\n </LdTableColumn>\n </template>\n <template #empty>\n <template v-if="$scopedSlots[\'tableEmpty\']">\n <slot name="tableEmpty"></slot>\n </template>\n <template v-else>\n <div v-if="loading"></div>\n <ELEmpty v-else v-bind="mergedEmptyOptions">\n <template\n #description\n v-if="\n $scopedSlots[\'tableEmptyDescription\'] ||\n $slots[\'tableEmptyDescription\']\n "\n >\n <slot name="tableEmptyDescription"></slot>\n </template>\n <template\n #image\n v-if="\n $scopedSlots[\'tableEmptyImage\'] || $slots[\'tableEmptyImage\']\n "\n >\n <slot name="tableEmptyImage"></slot>\n </template>\n <template\n #default\n v-if="\n $scopedSlots[\'tableEmptyDefault\'] || $slots[\'tableEmptyDefault\']\n "\n >\n <slot name="tableEmptyDefault"></slot>\n </template>\n </ELEmpty>\n </template>\n </template>\n <template #append>\n <slot name="tableAppend"></slot>\n </template>\n </ELTable>\n\n <div\n v-if="showPagination"\n ref="paginationRef"\n class="ld-table__pagination ld-table__pagination--custom"\n :class="\n mergedPaginationOptions && mergedPaginationOptions.align\n ? \'ld-table__pagination--\' + mergedPaginationOptions.align\n : \'\'\n "\n >\n <ELPagination\n v-bind="mergedPaginationOptions"\n :total="pagination && pagination.total"\n :disabled="loading"\n :page-size="pagination && pagination.size"\n :current-page="pagination && pagination.current"\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n >\n <template\n #default\n v-if="\n $scopedSlots[\'tablePaginationDefault\'] ||\n $slots[\'tablePaginationDefault\']\n "\n >\n <slot name="tablePaginationDefault"></slot>\n </template>\n </ELPagination>\n </div>\n </div>\n</template>\n\n<style scoped>\n.ld-table {\n width: 100%;\n position: relative;\n}\n\n.ld-table--empty {\n min-height: 200px;\n}\n\n.ld-table .el-table {\n width: 100%;\n}\n\n.ld-table__pagination {\n margin-top: 16px;\n padding: 8px 0;\n}\n\n.ld-table__pagination--left {\n text-align: left;\n}\n\n.ld-table__pagination--center {\n text-align: center;\n}\n\n.ld-table__pagination--right {\n text-align: right;\n}\n\n.ld-table__pagination .el-pagination {\n margin: 0;\n}\n\n.ld-table__pagination--custom {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n</style>\n']},media:void 0})},f,"data-v-7b84ff95",!1,void 0,!1,m,void 0,void 0);function y(n,e){if(!e)return n;const t={...n};for(const n in e)e.hasOwnProperty(n)&&(e[n]&&"object"==typeof e[n]&&!Array.isArray(e[n])?t[n]=y(t[n]||{},e[n]):t[n]=e[n]);return t}b.install=n=>{n.component(b.name,b)},p.install=n=>{n.component(p.name,p)};const v={name:"DialogPro",k:{re:i},ae:{de:{bind(n,e){const t=n.querySelector(".el-dialog__header"),a=n.querySelector(".el-dialog");if(!t||!a)return;t.style.cursor="move";const i={pe:".el-dialog__header",overflow:!1,...e.value||{}};let o=null,l={offsetX:0,offsetY:0};const s=n=>{if(i.pe&&!n.target.closest(i.pe))return;n.preventDefault();const t=n.clientX,s=n.clientY,{offsetX:r,offsetY:d}=l,p=a.getBoundingClientRect(),c=p.left,u=p.top,m=p.width,g=p.height,h=document.documentElement.clientWidth,f=document.documentElement.clientHeight,A=-c-m/2+r,b=h-c-m/2+r,y=-u+d,v=f-u-g/2+d,E=Math.min(A,b),x=Math.max(A,b),C=Math.min(y,v),_=Math.max(y,v),w=n=>{o&&cancelAnimationFrame(o),o=requestAnimationFrame(()=>{let e=r+n.clientX-t,o=d+n.clientY-s;i.overflow||(e=Math.min(Math.max(e,E),x),o=Math.min(Math.max(o,C),_)),l={offsetX:e,offsetY:o},a.style.transform=`translate(${e}px, ${o}px)`,a.style.left="0",a.style.top="0",a.style.right="auto",a.style.bottom="auto"}),n.preventDefault(),n.stopPropagation()},S=n=>{o&&(cancelAnimationFrame(o),o=null),document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",S),"function"==typeof e.ce&&e.ce("end",{x:n.clientX,y:n.clientY,offsetX:l.offsetX,offsetY:l.offsetY})};document.addEventListener("mousemove",w),document.addEventListener("mouseup",S),n.preventDefault(),n.stopPropagation(),"function"==typeof e.ce&&e.ce("start",{x:n.clientX,y:n.clientY})};t.addEventListener("mousedown",s),n.ue={me:s}},ge(n){if(n.ue){const e=n.querySelector(".el-dialog__header");e&&e.removeEventListener("mousedown",n.ue.me),delete n.ue}}}},H:{he:{type:[Object,Function]},fe:{type:Object},Ae:{type:Object}},data:()=>({visible:!1}),p(){this.qn(()=>{this.Ae.height&&(document.querySelector(".ld-dialog-pro .el-dialog").style.height=this.Ae.height)})},h:{be(n){this.Un("close",n)}}};var E=function(){var n=this,e=n.Y,t=n.U.F||e;return t("ELDialog",n.J({ae:[{name:"dragDialog",ie:"v-dragDialog"}],ne:"ld-dialog-pro",dn:{visible:n.visible,ye:!1},on:{"update:visible":function(e){n.visible=e},close:function(e){return n.be("_close")}}},"ELDialog",n.Ae,!1),[t(n.he,n.J({le:"componentRef",tag:"component",on:{close:n.be}},"component",n.fe,!1))],1)};E.cn=!0;var x=s({A:E,v:[]},function(n){n&&n("data-v-6247a6f6_0",{source:"\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdDynamicDialog/DialogPro.vue"],names:[],mappings:";AA6DA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,aAAA;EACA,sBAAA;AACA;AAEA;EACA,OAAA;EACA,sBAAA;EACA,gBAAA;AACA",file:"DialogPro.vue",sourcesContent:['<script>\nimport { ElDialog } from "element-ui";\nimport { dragDialog } from "./drag-dialog";\n\nexport default {\n name: "DialogPro",\n components: {\n ElDialog,\n },\n directives: {\n dragDialog,\n },\n props: {\n componentInstance: {\n type: [Object, Function],\n },\n componentProps: {\n type: Object,\n },\n dialogProps: {\n type: Object,\n },\n },\n data() {\n return {\n visible: false,\n };\n },\n mounted() {\n this.$nextTick(() => {\n if (this.dialogProps.height) {\n document.querySelector(".ld-dialog-pro .el-dialog").style.height =\n this.dialogProps.height;\n }\n });\n },\n methods: {\n handleClose(type) {\n this.$emit("close", type);\n },\n },\n};\n<\/script>\n<template>\n <ELDialog\n :visible.sync="visible"\n v-bind="dialogProps"\n v-dragDialog\n @close="handleClose(\'_close\')"\n class="ld-dialog-pro"\n :modal="false"\n >\n <component\n ref="componentRef"\n :is="componentInstance"\n v-bind="componentProps"\n @close="handleClose"\n ></component>\n </ELDialog>\n</template>\n<style>\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n']},media:void 0})},v,void 0,!1,void 0,!1,m,void 0,void 0);const C=o.extend(x);class _{ve=null;constructor(n={}){o.prototype.Ee||this.xe(n)}xe(n){this.ve=new C({_e:n}).Ce(document.createElement("div")),this.ve.we("close",e=>{"_close"!==e?n.close&&n.close(e,this.ve.Gn.Se,this.close.bind(this)):this.close()}),(n.target||document.body).appendChild(this.ve.Vn),o.Te(()=>{this.ve.visible=!0})}close(){this.ve.visible=!1,this.ve.Le(),o.Te(()=>{this.ve.Vn.remove(),this.ve=null})}}const w=(n={})=>new _(y({Ae:{ye:!1,top:"0",De:!1,Pe:!1}},n));function S(n="YYYY-MM-DD HH:mm:ss",e=new Date){let t;e instanceof Date?t=e:"string"==typeof e||"number"==typeof e?(t=new Date(e),isNaN(t.getTime())&&(t=new Date)):t=new Date;const a=t.getFullYear(),i=t.getMonth(),o=t.getDate(),l=t.getDay(),s=t.getHours(),r=t.getMinutes(),d=t.getSeconds(),p=t.getMilliseconds(),c=n=>Math.ceil((n+1)/3),u={$e:a.toString(),Oe:a.toString().slice(-2),ze:(i+1).toString(),Me:(i+1).toString().padStart(2,"0"),ke:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][i],Be:["January","February","March","April","May","June","July","August","September","October","November","December"][i],He:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"][i],je:o.toString(),Re:o.toString().padStart(2,"0"),Ne:l.toString(),We:["周日","周一","周二","周三","周四","周五","周六"][l],Ie:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][l],Q:c(i).toString(),Ye:["一季度","二季度","三季度","四季度"][c(i)-1],Fe:s.toString(),Ue:s.toString().padStart(2,"0"),Je:(s%12||12).toString(),Xe:(s%12||12).toString().padStart(2,"0"),qe:s>=12?"PM":"AM",a:s>=12?"pm":"am",Qe:r.toString(),mm:r.toString().padStart(2,"0"),s:d.toString(),Ge:d.toString().padStart(2,"0"),Ve:p.toString(),Ke:p.toString().padStart(2,"0"),Ze:p.toString().padStart(3,"0")};return n.replace(/Y+|M+|D+|W+|Q+|H+|h+|A|a|m+|s+|S+/g,n=>u[n]||"")}const T="1.0.1",L=[b,p],D=(n,e={})=>{L.forEach(e=>{n.component(e.name,e)})};"undefined"!=typeof window&&window.Vue&&D(window.Vue);var P={install:D,version:T,nt:b,fn:p,et:w,tt:l,it:S};export{b as LdTable,p as LdTableColumn,S as dateFormatter,P as default,D as install,w as useDialog,l as useWindowSize,T as version};
|
|
1
|
+
/* ld-v2-kit version 1.0.3 */
|
|
2
|
+
import e from"vue";const n=(e={})=>{const{initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:t=Number.POSITIVE_INFINITY,includeScrollbar:i=!0,type:o="inner"}=e;return{data:()=>({initialWidth:n,initialHeight:t,resizeListener:null}),mounted(){this.updateWindowSize(),this.resizeListener=()=>this.updateWindowSize(),window.addEventListener("resize",this.resizeListener,{passive:!0}),this.$once("hook:beforeDestroy",()=>{window.removeEventListener("resize",this.resizeListener)})},methods:{updateWindowSize(){"outer"===o?(this.initialWidth=window.outerWidth,this.initialHeight=window.outerHeight):i?(this.initialWidth=window.innerWidth,this.initialHeight=window.innerHeight):(this.initialWidth=window.document.documentElement.clientWidth,this.initialHeight=window.document.documentElement.clientHeight)}}}};function t(e,n,t,i,o,a,l,s,r,d){"boolean"!=typeof l&&(r=s,s=l,l=!1);const p="function"==typeof t?t.options:t;let c;if(e&&e.render&&(p.render=e.render,p.staticRenderFns=e.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),i&&(p._scopeId=i),a?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},p._ssrRegister=c):n&&(c=l?function(e){n.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),c)if(p.functional){const e=p.render;p.render=function(n,t){return c.call(t),e(n,t)}}else{const e=p.beforeCreate;p.beforeCreate=e?[].concat(e,c):[c]}return t}const i={name:"LdTableColumn",props:{column:{type:Object,required:!0}},methods:{cleanColumnProps(e){const n={align:"center",headerAlign:"center",...e};return delete n.useHeaderSlot,delete n.useSlot,n}}};var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("el-table-column",e._b({scopedSlots:e._u([!e.column.children&&e.column.useHeaderSlot&&e.column.prop?{key:"header",fn:function(n){var t=n.column,i=n.$index;return[e.$scopedSlots[e.column.prop+"-header"]||e.$slots[e.column.prop+"-header"]?[e._t(e.column.prop+"-header",null,{column:t,$index:i})]:[e._v("\n "+e._s(e.column.label)+"\n ")]]}}:null,!e.column.children&&e.column.useSlot&&e.column.prop?{key:"default",fn:function(n){var t=n.row,i=n.column,o=n.$index;return[e.$scopedSlots[e.column.prop]||e.$slots[e.column.prop]?[e._t(e.column.prop,null,{row:t,column:i,$index:o})]:[e._v("\n "+e._s(e.column.formatter?e.column.formatter(t,i,t[e.column.prop],o):t[e.column.prop])+"\n ")]]}}:null],null,!0)},"el-table-column",e.cleanColumnProps(e.column),!1),[e.column.children&&e.column.children.length>0?e._l(e.column.children,function(e){return t("ld-table-column",{key:e.prop||e.label,attrs:{column:e}})}):e._e()],2)};o._withStripped=!0;var a=t({render:o,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0),l={name:"LdTable",inheritAttrs:!1,components:{"ld-table-column":a},mixins:[n()],props:{loading:{type:Boolean,default:!1},columns:{type:Array,default:()=>[]},pagination:{type:[Object,Boolean],default:()=>({})},paginationOptions:{type:Object,default:()=>({})},emptyHeight:{type:String,default:"100%"},emptyOptions:{type:Object,default:()=>({})},fit:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},stripe:{type:Boolean},border:{type:Boolean},size:{type:String},height:{type:[String,Number]},data:{type:Array,default:()=>[]}},data:()=>({paginationHeight:48,tableHeaderRef:null}),computed:{showPagination(){return this.pagination&&!this.isEmpty},tableColumns(){return this.columns.map(e=>({hidden:e.hidden||!1,...e})).filter(e=>!e.hidden)},tableProps(){return{fit:this.fit,showHeader:this.showHeader,stripe:this.stripe,border:this.border,size:this.size,data:this.data,...this.$attrs,height:this.tableHeight}},mergedPaginationOptions(){return{pageSizes:[100,200,300,500,1e3],align:"center",background:!0,layout:"total, prev, pager, next, sizes, jumper",hideOnSinglePage:!1,size:"default",pagerCount:this.initialWidth>1200?7:5,...this.paginationOptions}},isEmpty(){return this.data&&0===this.data.length},containerHeight(){const e=(this.showPagination?this.paginationHeight:0)+12;return{height:0===e?"100%":`calc(100% - ${e}px)`}},tableHeight(){return this.isEmpty&&!this.loading?this.emptyHeight:this.height?this.height:"100%"},mergedEmptyOptions(){return{description:this.emptyText,imageSize:120,...this.emptyOptions}}},methods:{getGlobalIndex(e){if(!this.pagination)return e+1;const{current:n,size:t}=this.pagination;return isNaN((n-1)*t+e+1)?e+1:(n-1)*t+e+1},handleSizeChange(e){this.$emit("pagination:size-change",e)},handleCurrentChange(e){this.$emit("pagination:current-change",e),this.scrollToTop()},scrollToTop(){this.$nextTick(()=>{const e=this.$refs.elTableRef;if(e){const n=e.$el.querySelectorAll(".el-table__body-wrapper");n.length>0&&n.forEach(e=>{e.scrollTo({top:0,left:0})})}})}}};const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(e){return(e,n)=>function(e,n){const t=s?n.media||"default":e,i=p[t]||(p[t]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",n.media&&i.element.setAttribute("media",n.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(t),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,n=document.createTextNode(t),o=i.element.childNodes;o[e]&&i.element.removeChild(o[e]),o.length?i.element.insertBefore(n,o[e]):i.element.appendChild(n)}}}(e,n)}let d;const p={},c=l;var m=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"ld-table",class:{"ld-table--empty":e.isEmpty},style:e.containerHeight},[t("el-table",e._g(e._b({directives:[{name:"loading",rawName:"v-loading",value:!!e.loading,expression:"!!loading"}],ref:"elTableRef",scopedSlots:e._u([{key:"empty",fn:function(){return[e.$scopedSlots.tableEmpty?[e._t("tableEmpty")]:[e.loading?t("div"):t("el-empty",e._b({scopedSlots:e._u([e.$scopedSlots.tableEmptyDescription||e.$slots.tableEmptyDescription?{key:"description",fn:function(){return[e._t("tableEmptyDescription")]},proxy:!0}:null,e.$scopedSlots.tableEmptyImage||e.$slots.tableEmptyImage?{key:"image",fn:function(){return[e._t("tableEmptyImage")]},proxy:!0}:null,e.$scopedSlots.tableEmptyDefault||e.$slots.tableEmptyDefault?{key:"default",fn:function(){return[e._t("tableEmptyDefault")]},proxy:!0}:null],null,!0)},"el-empty",e.mergedEmptyOptions,!1))]]},proxy:!0},{key:"append",fn:function(){return[e._t("tableAppend")]},proxy:!0}],null,!0)},"el-table",e.tableProps,!1),e.$listeners),[e._l(e.tableColumns,function(n){return["globalIndex"===n.type?t("el-table-column",e._b({key:"globalIndex-"+(n.prop||n.type),attrs:{fixed:"left",align:"center",headerAlign:"center"},scopedSlots:e._u([{key:"header",fn:function(i){var o=i.column,a=i.$index;return[e.$scopedSlots[o.prop+"-header"]||e.$slots[o.prop+"-header"]?[e._t(o.prop+"-header",null,{column:o,$index:a})]:[t("span",[e._v(e._s(n.label||"序号"))])]]}},{key:"default",fn:function(n){var i=n.row,o=n.column,a=n.$index;return[e.$scopedSlots[""+o.prop]||e.$slots[""+o.prop]?[e._t(""+o.prop,null,{row:i,column:o,$index:a})]:[t("span",[e._v(e._s(e.getGlobalIndex(a)))])]]}}],null,!0)},"el-table-column",Object.assign({},n),!1)):t("ld-table-column",{key:n.prop||n.label,attrs:{column:n},scopedSlots:e._u([e._l(e.$scopedSlots,function(n,t){return{key:t,fn:function(n){return[e._t(t,null,null,n)]}}})],null,!0)})]})],2),e._v(" "),e.showPagination?t("div",{ref:"paginationRef",staticClass:"ld-table__pagination ld-table__pagination--custom",class:e.mergedPaginationOptions&&e.mergedPaginationOptions.align?"ld-table__pagination--"+e.mergedPaginationOptions.align:""},[t("el-pagination",e._b({attrs:{total:e.pagination&&e.pagination.total,disabled:e.loading,"page-size":e.pagination&&e.pagination.size,"current-page":e.pagination&&e.pagination.current},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange},scopedSlots:e._u([e.$scopedSlots.tablePaginationDefault||e.$slots.tablePaginationDefault?{key:"default",fn:function(){return[e._t("tablePaginationDefault")]},proxy:!0}:null],null,!0)},"el-pagination",e.mergedPaginationOptions,!1))],1):e._e()],1)};m._withStripped=!0;var u=t({render:m,staticRenderFns:[]},function(e){e&&e("data-v-6131e836_0",{source:"\n.ld-table[data-v-6131e836] {\n width: 100%;\n position: relative;\n}\n.ld-table--empty[data-v-6131e836] {\n min-height: 200px;\n}\n.ld-table .el-table[data-v-6131e836] {\n width: 100%;\n}\n.ld-table__pagination[data-v-6131e836] {\n margin-top: 16px;\n padding: 8px 0;\n}\n.ld-table__pagination--left[data-v-6131e836] {\n text-align: left;\n}\n.ld-table__pagination--center[data-v-6131e836] {\n text-align: center;\n}\n.ld-table__pagination--right[data-v-6131e836] {\n text-align: right;\n}\n.ld-table__pagination .el-pagination[data-v-6131e836] {\n margin: 0;\n}\n.ld-table__pagination--custom[data-v-6131e836] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdTable/LdTable.vue"],names:[],mappings:";AAmUA;EACA,WAAA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,WAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;AACA;AAEA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,SAAA;AACA",file:"LdTable.vue",sourcesContent:['<script>\nimport { useWindowSize } from "../../mixins/useWindowSize.js";\nimport LdTableColumn from "./LdTableColumn.vue";\n\nexport default {\n name: "LdTable",\n inheritAttrs: false,\n components: {\n "ld-table-column": LdTableColumn,\n },\n mixins: [useWindowSize()],\n props: {\n /** 加载状态 */\n loading: {\n type: Boolean,\n default: false,\n },\n /** 列渲染配置 */\n columns: {\n type: Array,\n default: () => [],\n },\n /** 分页状态 */\n pagination: {\n type: [Object, Boolean],\n default: () => ({}),\n },\n /** 分页组件配置 */\n paginationOptions: {\n type: Object,\n default: () => ({}),\n },\n /** 空数据表格高度 */\n emptyHeight: {\n type: String,\n default: "100%",\n },\n // 空状态组件的配置项\n emptyOptions: {\n type: Object,\n default: () => ({}),\n },\n fit: {\n type: Boolean,\n default: true,\n },\n showHeader: {\n type: Boolean,\n default: true,\n },\n stripe: {\n type: Boolean,\n },\n border: {\n type: Boolean,\n },\n size: {\n type: String,\n },\n height: {\n type: [String, Number],\n },\n data: {\n type: Array,\n default: () => [],\n },\n },\n data() {\n return {\n paginationHeight: 48,\n tableHeaderRef: null, // 添加 tableHeaderRef 到 data 中\n };\n },\n computed: {\n showPagination() {\n return this.pagination && !this.isEmpty;\n },\n tableColumns() {\n return this.columns\n .map((column) => ({\n hidden: column.hidden || false,\n ...column,\n }))\n .filter((column) => !column.hidden);\n },\n tableProps() {\n const props = {\n fit: this.fit,\n showHeader: this.showHeader,\n stripe: this.stripe,\n border: this.border,\n size: this.size,\n data: this.data,\n };\n\n // 合并其他表格属性\n const otherProps = this.$attrs;\n return { ...props, ...otherProps, height: this.tableHeight };\n },\n mergedPaginationOptions() {\n const defaultOptions = {\n pageSizes: [100, 200, 300, 500, 1000],\n align: "center",\n background: true,\n layout: "total, prev, pager, next, sizes, jumper",\n hideOnSinglePage: false,\n size: "default",\n pagerCount: this.initialWidth > 1200 ? 7 : 5,\n };\n\n return { ...defaultOptions, ...this.paginationOptions };\n },\n isEmpty() {\n return this.data && this.data.length === 0;\n },\n\n containerHeight() {\n // 简化的容器高度计算\n const paginationHeight = this.showPagination ? this.paginationHeight : 0;\n const offset = paginationHeight + 12;\n return {\n height: offset === 0 ? "100%" : `calc(100% - ${offset}px)`,\n };\n },\n // 表格高度逻辑\n tableHeight() {\n // 空数据且非加载状态时固定高度\n if (this.isEmpty && !this.loading) return this.emptyHeight;\n // 使用传入的高度\n if (this.height) return this.height;\n // 默认占满容器高度\n return "100%";\n },\n // 合并空状态组件配置\n mergedEmptyOptions() {\n const defaultOptions = {\n description: this.emptyText,\n imageSize: 120,\n };\n return { ...defaultOptions, ...this.emptyOptions };\n },\n },\n methods: {\n getGlobalIndex(index) {\n if (!this.pagination) return index + 1;\n const { current, size } = this.pagination;\n return isNaN((current - 1) * size + index + 1)\n ? index + 1\n : (current - 1) * size + index + 1;\n },\n\n handleSizeChange(size) {\n this.$emit("pagination:size-change", size);\n },\n handleCurrentChange(current) {\n this.$emit("pagination:current-change", current);\n this.scrollToTop(); // 页码改变后滚动到表格顶部\n },\n // 滚动表格内容到顶部\n scrollToTop() {\n this.$nextTick(() => {\n const elTableRef = this.$refs.elTableRef;\n if (elTableRef) {\n // 找到 el-table_body 元素\n const tableBody = elTableRef.$el.querySelectorAll(\n ".el-table__body-wrapper"\n );\n if (tableBody.length > 0) {\n tableBody.forEach((item) => {\n item.scrollTo({\n top: 0, // 滚动目标位置(顶部)\n left: 0, // 水平位置(保持0即可)\n // behavior: "smooth", // 关键:平滑滚动,去掉则瞬间跳转\n });\n });\n }\n }\n });\n },\n },\n};\n<\/script>\n\n<template>\n <div\n class="ld-table"\n :class="{ \'ld-table--empty\': isEmpty }"\n :style="containerHeight"\n >\n <el-table\n ref="elTableRef"\n v-loading="!!loading"\n v-bind="tableProps"\n v-on="$listeners"\n >\n <template v-for="col in tableColumns">\n \x3c!-- 渲染全局序号列 --\x3e\n <el-table-column\n v-if="col.type === \'globalIndex\'"\n fixed="left"\n align="center"\n headerAlign="center"\n v-bind="{ ...col }"\n :key="\'globalIndex-\' + (col.prop || col.type)"\n >\n <template #header="{ column, $index }">\n <template\n v-if="\n $scopedSlots[`${column.prop}-header`] ||\n $slots[`${column.prop}-header`]\n "\n >\n <slot\n :name="`${column.prop}-header`"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ col.label || "序号" }}</span>\n </template>\n </template>\n <template #default="{ row, column, $index }">\n <template\n v-if="$scopedSlots[`${column.prop}`] || $slots[`${column.prop}`]"\n >\n <slot\n :name="`${column.prop}`"\n :row="row"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ getGlobalIndex($index) }}</span>\n </template>\n </template>\n </el-table-column>\n\n \x3c!-- 渲染列 --\x3e\n <ld-table-column v-else :key="col.prop || col.label" :column="col">\n <template\n v-for="(_, slotName) in $scopedSlots"\n #[slotName]="slotProps"\n >\n <slot :name="slotName" v-bind="slotProps" />\n </template>\n </ld-table-column>\n </template>\n <template #empty>\n <template v-if="$scopedSlots[\'tableEmpty\']">\n <slot name="tableEmpty"></slot>\n </template>\n <template v-else>\n <div v-if="loading"></div>\n <el-empty v-else v-bind="mergedEmptyOptions">\n <template\n #description\n v-if="\n $scopedSlots[\'tableEmptyDescription\'] ||\n $slots[\'tableEmptyDescription\']\n "\n >\n <slot name="tableEmptyDescription"></slot>\n </template>\n <template\n #image\n v-if="\n $scopedSlots[\'tableEmptyImage\'] || $slots[\'tableEmptyImage\']\n "\n >\n <slot name="tableEmptyImage"></slot>\n </template>\n <template\n #default\n v-if="\n $scopedSlots[\'tableEmptyDefault\'] || $slots[\'tableEmptyDefault\']\n "\n >\n <slot name="tableEmptyDefault"></slot>\n </template>\n </el-empty>\n </template>\n </template>\n <template #append>\n <slot name="tableAppend"></slot>\n </template>\n </el-table>\n\n <div\n v-if="showPagination"\n ref="paginationRef"\n class="ld-table__pagination ld-table__pagination--custom"\n :class="\n mergedPaginationOptions && mergedPaginationOptions.align\n ? \'ld-table__pagination--\' + mergedPaginationOptions.align\n : \'\'\n "\n >\n <el-pagination\n v-bind="mergedPaginationOptions"\n :total="pagination && pagination.total"\n :disabled="loading"\n :page-size="pagination && pagination.size"\n :current-page="pagination && pagination.current"\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n >\n <template\n #default\n v-if="\n $scopedSlots[\'tablePaginationDefault\'] ||\n $slots[\'tablePaginationDefault\']\n "\n >\n <slot name="tablePaginationDefault"></slot>\n </template>\n </el-pagination>\n </div>\n </div>\n</template>\n\n<style scoped>\n.ld-table {\n width: 100%;\n position: relative;\n}\n\n.ld-table--empty {\n min-height: 200px;\n}\n\n.ld-table .el-table {\n width: 100%;\n}\n\n.ld-table__pagination {\n margin-top: 16px;\n padding: 8px 0;\n}\n\n.ld-table__pagination--left {\n text-align: left;\n}\n\n.ld-table__pagination--center {\n text-align: center;\n}\n\n.ld-table__pagination--right {\n text-align: right;\n}\n\n.ld-table__pagination .el-pagination {\n margin: 0;\n}\n\n.ld-table__pagination--custom {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n</style>\n']},media:void 0})},c,"data-v-6131e836",!1,void 0,!1,r,void 0,void 0);function g(e,n){if(!n)return e;const t={...e};for(const e in n)n.hasOwnProperty(e)&&(n[e]&&"object"==typeof n[e]&&!Array.isArray(n[e])?t[e]=g(t[e]||{},n[e]):t[e]=n[e]);return t}u.install=e=>{e.component(u.name,u)},a.install=e=>{e.component(a.name,a)};const h={name:"DialogPro",directives:{dragDialog:{bind(e,n){const t=e.querySelector(".el-dialog__header"),i=e.querySelector(".el-dialog");if(!t||!i)return;t.style.cursor="move";const o={handle:".el-dialog__header",overflow:!1,...n.value||{}};let a=null,l={offsetX:0,offsetY:0};const s=e=>{if(o.handle&&!e.target.closest(o.handle))return;e.preventDefault();const t=e.clientX,s=e.clientY,{offsetX:r,offsetY:d}=l,p=i.getBoundingClientRect(),c=p.left,m=p.top,u=p.width,g=p.height,h=document.documentElement.clientWidth,f=document.documentElement.clientHeight,A=-c-u/2+r,b=h-c-u/2+r,y=-m+d,v=f-m-g/2+d,_=Math.min(A,b),S=Math.max(A,b),x=Math.min(y,v),E=Math.max(y,v),$=e=>{a&&cancelAnimationFrame(a),a=requestAnimationFrame(()=>{let n=r+e.clientX-t,a=d+e.clientY-s;o.overflow||(n=Math.min(Math.max(n,_),S),a=Math.min(Math.max(a,x),E)),l={offsetX:n,offsetY:a},i.style.transform=`translate(${n}px, ${a}px)`,i.style.left="0",i.style.top="0",i.style.right="auto",i.style.bottom="auto"}),e.preventDefault(),e.stopPropagation()},w=e=>{a&&(cancelAnimationFrame(a),a=null),document.removeEventListener("mousemove",$),document.removeEventListener("mouseup",w),"function"==typeof n.arg&&n.arg("end",{x:e.clientX,y:e.clientY,offsetX:l.offsetX,offsetY:l.offsetY})};document.addEventListener("mousemove",$),document.addEventListener("mouseup",w),e.preventDefault(),e.stopPropagation(),"function"==typeof n.arg&&n.arg("start",{x:e.clientX,y:e.clientY})};t.addEventListener("mousedown",s),e._localDragEventHandlers={handleMouseDown:s}},unbind(e){if(e._localDragEventHandlers){const n=e.querySelector(".el-dialog__header");n&&n.removeEventListener("mousedown",e._localDragEventHandlers.handleMouseDown),delete e._localDragEventHandlers}}}},props:{componentInstance:{type:[Object,Function]},componentProps:{type:Object},dialogProps:{type:Object}},data:()=>({visible:!1}),mounted(){this.$nextTick(()=>{this.dialogProps.height&&(document.querySelector(".ld-dialog-pro .el-dialog").style.height=this.dialogProps.height)})},methods:{handleClose(e){this.$emit("close",e)}}};var f=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("el-dialog",e._b({directives:[{name:"dragDialog",rawName:"v-dragDialog"}],staticClass:"ld-dialog-pro",attrs:{visible:e.visible,modal:!1},on:{"update:visible":function(n){e.visible=n},close:function(n){return e.handleClose("_close")}}},"el-dialog",e.dialogProps,!1),[t(e.componentInstance,e._b({ref:"componentRef",tag:"component",on:{close:e.handleClose}},"component",e.componentProps,!1))],1)};f._withStripped=!0;var A=t({render:f,staticRenderFns:[]},function(e){e&&e("data-v-b110715e_0",{source:"\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdDynamicDialog/DialogPro.vue"],names:[],mappings:";AAyDA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,aAAA;EACA,sBAAA;AACA;AAEA;EACA,OAAA;EACA,sBAAA;EACA,gBAAA;AACA",file:"DialogPro.vue",sourcesContent:['<script>\nimport { dragDialog } from "./drag-dialog";\n\nexport default {\n name: "DialogPro",\n directives: {\n dragDialog,\n },\n props: {\n componentInstance: {\n type: [Object, Function],\n },\n componentProps: {\n type: Object,\n },\n dialogProps: {\n type: Object,\n },\n },\n data() {\n return {\n visible: false,\n };\n },\n mounted() {\n this.$nextTick(() => {\n if (this.dialogProps.height) {\n document.querySelector(".ld-dialog-pro .el-dialog").style.height =\n this.dialogProps.height;\n }\n });\n },\n methods: {\n handleClose(type) {\n this.$emit("close", type);\n },\n },\n};\n<\/script>\n<template>\n <el-dialog\n :visible.sync="visible"\n v-bind="dialogProps"\n v-dragDialog\n @close="handleClose(\'_close\')"\n class="ld-dialog-pro"\n :modal="false"\n >\n <component\n ref="componentRef"\n :is="componentInstance"\n v-bind="componentProps"\n @close="handleClose"\n ></component>\n </el-dialog>\n</template>\n<style>\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n']},media:void 0})},h,void 0,!1,void 0,!1,r,void 0,void 0);const b=e.extend(A);class y{instance=null;constructor(n={}){e.prototype.$isServer||this.initInstance(n)}initInstance(n){this.instance=new b({propsData:n}).$mount(document.createElement("div")),this.instance.$on("close",e=>{"_close"!==e?n.close&&n.close(e,this.instance.$refs.componentRef,this.close.bind(this)):this.close()}),(n.target||document.body).appendChild(this.instance.$el),e.nextTick(()=>{this.instance.visible=!0})}close(){this.instance.visible=!1,this.instance.$destroy(),e.nextTick(()=>{this.instance.$el.remove(),this.instance=null})}}const v=(e={})=>new y(g({dialogProps:{modal:!1,top:"0",closeOnClickModal:!1,closeOnPressEscape:!1}},e));function _(e="YYYY-MM-DD HH:mm:ss",n=new Date){let t;n instanceof Date?t=n:"string"==typeof n||"number"==typeof n?(t=new Date(n),isNaN(t.getTime())&&(t=new Date)):t=new Date;const i=t.getFullYear(),o=t.getMonth(),a=t.getDate(),l=t.getDay(),s=t.getHours(),r=t.getMinutes(),d=t.getSeconds(),p=t.getMilliseconds(),c=e=>Math.ceil((e+1)/3),m={YYYY:i.toString(),YY:i.toString().slice(-2),M:(o+1).toString(),MM:(o+1).toString().padStart(2,"0"),MMM:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][o],MMMM:["January","February","March","April","May","June","July","August","September","October","November","December"][o],MMMMM:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"][o],D:a.toString(),DD:a.toString().padStart(2,"0"),W:l.toString(),WW:["周日","周一","周二","周三","周四","周五","周六"][l],WWW:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][l],Q:c(o).toString(),QQ:["一季度","二季度","三季度","四季度"][c(o)-1],H:s.toString(),HH:s.toString().padStart(2,"0"),h:(s%12||12).toString(),hh:(s%12||12).toString().padStart(2,"0"),A:s>=12?"PM":"AM",a:s>=12?"pm":"am",m:r.toString(),mm:r.toString().padStart(2,"0"),s:d.toString(),ss:d.toString().padStart(2,"0"),S:p.toString(),SS:p.toString().padStart(2,"0"),SSS:p.toString().padStart(3,"0")};return e.replace(/Y+|M+|D+|W+|Q+|H+|h+|A|a|m+|s+|S+/g,e=>m[e]||"")}const S="1.0.3",x=[u,a],E=(e,n={})=>{x.forEach(n=>{e.component(n.name,n)})};"undefined"!=typeof window&&window.Vue&&E(window.Vue);var $={install:E,version:S,LdTable:u,LdTableColumn:a,useDialog:v,useWindowSize:n,dateFormatter:_};export{u as LdTable,a as LdTableColumn,_ as dateFormatter,$ as default,E as install,v as useDialog,n as useWindowSize,S as version};
|
|
3
3
|
/* Follow me on GitHub! @chengbotao (慢知行 LearnDoing) */
|
package/dist/index.umd.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* ld-v2-kit version 1.0.
|
|
2
|
-
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("element-ui"),require("vue")):"function"==typeof define&&define.amd?define(["exports","element-ui","vue"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self)["ld-v2-kit"]={},n.t,n.i)}(this,function(n,e,t){"use strict";const i=(n={})=>{const{o:e=Number.POSITIVE_INFINITY,l:t=Number.POSITIVE_INFINITY,p:i=!0,type:a="inner"}=n;return{data:()=>({o:e,l:t,u:null}),m(){this.h(),this.u=()=>this.h(),window.addEventListener("resize",this.u,{passive:!0}),this.A("hook:beforeDestroy",()=>{window.removeEventListener("resize",this.u)})},v:{h(){"outer"===a?(this.o=window.outerWidth,this.l=window.outerHeight):i?(this.o=window.innerWidth,this.l=window.innerHeight):(this.o=window.document.documentElement.clientWidth,this.l=window.document.documentElement.clientHeight)}}}};function a(n,e,t,i,a,o,l,s,r,d){"boolean"!=typeof l&&(r=s,s=l,l=!1);const p="function"==typeof t?t.options:t;let u;if(n&&n.C&&(p.C=n.C,p._=n._,p.S=!0,a&&(p.T=!0)),i&&(p.L=i),o?(u=function(n){(n=n||this.D&&this.D.P||this.parent&&this.parent.D&&this.parent.D.P)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,r(n)),n&&n.O&&n.O.add(o)},p.$=u):e&&(u=l?function(n){e.call(this,d(n,this.k.M.shadowRoot))}:function(n){e.call(this,s(n))}),u)if(p.T){const n=p.C;p.C=function(e,t){return u.call(t),n(e,t)}}else{const n=p.B;p.B=n?[].concat(n,u):[u]}return t}const o={name:"LdTableColumn",H:{j:e.j},R:{N:{type:Object,required:!0}},v:{W(n){const e={align:"center",I:"center",...n};return delete e.Y,delete e.F,e}}};var l=function(){var n=this,e=n.U,t=n.q.J||e;return t("ELTableColumn",n.X({G:n.V([!n.N.children&&n.N.Y&&n.N.K?{key:"header",Z:function(e){var t=e.N,i=e.nn;return[n.en[n.N.K+"-header"]||n.tn[n.N.K+"-header"]?[n.an(n.N.K+"-header",null,{N:t,nn:i})]:[n.ln("\n "+n.sn(n.N.label)+"\n ")]]}}:null,!n.N.children&&n.N.F&&n.N.K?{key:"default",Z:function(e){var t=e.rn,i=e.N,a=e.nn;return[n.en[n.N.K]||n.tn[n.N.K]?[n.an(n.N.K,null,{rn:t,N:i,nn:a})]:[n.ln("\n "+n.sn(n.N.dn?n.N.dn(t,i,t[n.N.K],a):t[n.N.K])+"\n ")]]}}:null],null,!0)},"ELTableColumn",n.W(n.N),!1),[n.N.children&&n.N.children.length>0?n.pn(n.N.children,function(n){return t("LdTableColumn",{key:n.K||n.label,un:{N:n}})}):n.cn()],2)};l.mn=!0;var s=a({C:l,_:[]},void 0,o,void 0,!1,void 0,!1,void 0,void 0,void 0),r={name:"LdTable",gn:!1,H:{fn:e.fn,j:e.j,hn:e.hn,An:e.An,bn:s},yn:[i()],R:{loading:{type:Boolean,default:!1},columns:{type:Array,default:()=>[]},vn:{type:[Object,Boolean],default:()=>({})},En:{type:Object,default:()=>({})},xn:{type:String,default:"100%"},Cn:{type:Object,default:()=>({})},_n:{type:Boolean,default:!0},wn:{type:Boolean,default:!0},Sn:{type:Boolean},border:{type:Boolean},size:{type:String},height:{type:[String,Number]},data:{type:Array,default:()=>[]}},data:()=>({Tn:48,Ln:null}),Dn:{Pn(){return this.vn&&!this.On},$n(){return this.columns.map(n=>({hidden:n.hidden||!1,...n})).filter(n=>!n.hidden)},zn(){return{_n:this._n,wn:this.wn,Sn:this.Sn,border:this.border,size:this.size,data:this.data,...this.Mn,height:this.kn}},Bn(){return{Hn:[100,200,300,500,1e3],align:"center",background:!0,layout:"total, prev, pager, next, sizes, jumper",jn:!1,size:"default",Rn:this.o>1200?7:5,...this.En}},On(){return this.data&&0===this.data.length},Nn(){const n=(this.Pn?this.Tn:0)+12;return{height:0===n?"100%":`calc(100% - ${n}px)`}},kn(){return this.On&&!this.loading?this.xn:this.height?this.height:"100%"},Wn(){return{description:this.In,Yn:120,...this.Cn}}},v:{Fn(n){if(!this.vn)return n+1;const{Un:e,size:t}=this.vn;return isNaN((e-1)*t+n+1)?n+1:(e-1)*t+n+1},Jn(n){this.qn("pagination:size-change",n)},Xn(n){this.qn("pagination:current-change",n),this.Qn()},Qn(){this.Gn(()=>{const n=this.Kn.Vn;if(n){const e=n.Zn.querySelectorAll(".el-table__body-wrapper");e.length>0&&e.forEach(n=>{n.scrollTo({top:0,left:0})})}})}}};const d="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function p(n){return(n,e)=>function(n,e){const t=d?e.media||"default":n,i=c[t]||(c[t]={ne:new Set,ee:[]});if(!i.ne.has(n)){i.ne.add(n);let t=e.source;if(e.map&&(t+="\n/*# sourceURL="+e.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===u&&(u=document.head||document.getElementsByTagName("head")[0]),u.appendChild(i.element)),"styleSheet"in i.element)i.ee.push(t),i.element.styleSheet.cssText=i.ee.filter(Boolean).join("\n");else{const n=i.ne.size-1,e=document.createTextNode(t),a=i.element.childNodes;a[n]&&i.element.removeChild(a[n]),a.length?i.element.insertBefore(e,a[n]):i.element.appendChild(e)}}}(n,e)}let u;const c={},m=r;var g=function(){var n=this,e=n.U,t=n.q.J||e;return t("div",{te:"ld-table",ie:{"ld-table--empty":n.On},style:n.Nn},[t("ELTable",n.ae(n.X({oe:[{name:"loading",le:"v-loading",value:!!n.loading,se:"!!loading"}],re:"elTableRef",G:n.V([{key:"empty",Z:function(){return[n.en.tableEmpty?[n.an("tableEmpty")]:[n.loading?t("div"):t("ELEmpty",n.X({G:n.V([n.en.tableEmptyDescription||n.tn.tableEmptyDescription?{key:"description",Z:function(){return[n.an("tableEmptyDescription")]},proxy:!0}:null,n.en.tableEmptyImage||n.tn.tableEmptyImage?{key:"image",Z:function(){return[n.an("tableEmptyImage")]},proxy:!0}:null,n.en.tableEmptyDefault||n.tn.tableEmptyDefault?{key:"default",Z:function(){return[n.an("tableEmptyDefault")]},proxy:!0}:null],null,!0)},"ELEmpty",n.Wn,!1))]]},proxy:!0},{key:"append",Z:function(){return[n.an("tableAppend")]},proxy:!0}],null,!0)},"ELTable",n.zn,!1),n.de),[n.pn(n.$n,function(e){return["globalIndex"===e.type?t("ELTableColumn",n.X({key:"globalIndex-"+(e.K||e.type),un:{fixed:"left",align:"center",I:"center"},G:n.V([{key:"header",Z:function(i){var a=i.N,o=i.nn;return[n.en[a.K+"-header"]||n.tn[a.K+"-header"]?[n.an(a.K+"-header",null,{N:a,nn:o})]:[t("span",[n.ln(n.sn(e.label||"序号"))])]]}},{key:"default",Z:function(e){var i=e.rn,a=e.N,o=e.nn;return[n.en[""+a.K]||n.tn[""+a.K]?[n.an(""+a.K,null,{rn:i,N:a,nn:o})]:[t("span",[n.ln(n.sn(n.Fn(o)))])]]}}],null,!0)},"ELTableColumn",Object.assign({},e),!1)):t("LdTableColumn",{key:e.K||e.label,un:{N:e},G:n.V([n.pn(n.en,function(e,t){return{key:t,Z:function(e){return[n.an(t,null,null,e)]}}})],null,!0)})]})],2),n.ln(" "),n.Pn?t("div",{re:"paginationRef",te:"ld-table__pagination ld-table__pagination--custom",ie:n.Bn&&n.Bn.align?"ld-table__pagination--"+n.Bn.align:""},[t("ELPagination",n.X({un:{total:n.vn&&n.vn.total,disabled:n.loading,"page-size":n.vn&&n.vn.size,"current-page":n.vn&&n.vn.Un},on:{"size-change":n.Jn,"current-change":n.Xn},G:n.V([n.en.tablePaginationDefault||n.tn.tablePaginationDefault?{key:"default",Z:function(){return[n.an("tablePaginationDefault")]},proxy:!0}:null],null,!0)},"ELPagination",n.Bn,!1))],1):n.cn()],1)};g.mn=!0;var f=a({C:g,_:[]},function(n){n&&n("data-v-7b84ff95_0",{source:"\n.ld-table[data-v-7b84ff95] {\n width: 100%;\n position: relative;\n}\n.ld-table--empty[data-v-7b84ff95] {\n min-height: 200px;\n}\n.ld-table .el-table[data-v-7b84ff95] {\n width: 100%;\n}\n.ld-table__pagination[data-v-7b84ff95] {\n margin-top: 16px;\n padding: 8px 0;\n}\n.ld-table__pagination--left[data-v-7b84ff95] {\n text-align: left;\n}\n.ld-table__pagination--center[data-v-7b84ff95] {\n text-align: center;\n}\n.ld-table__pagination--right[data-v-7b84ff95] {\n text-align: right;\n}\n.ld-table__pagination .el-pagination[data-v-7b84ff95] {\n margin: 0;\n}\n.ld-table__pagination--custom[data-v-7b84ff95] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdTable/LdTable.vue"],names:[],mappings:";AAwUA;EACA,WAAA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,WAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;AACA;AAEA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,SAAA;AACA",file:"LdTable.vue",sourcesContent:['<script>\nimport { ELTable, ELTableColumn, ELPagination, ElEmpty } from "element-ui";\nimport { useWindowSize } from "../../mixins/useWindowSize.js";\nimport LdTableColumn from "./LdTableColumn.vue";\n\nexport default {\n name: "LdTable",\n inheritAttrs: false,\n components: {\n ELTable,\n ELTableColumn,\n ELPagination,\n ElEmpty,\n LdTableColumn,\n },\n mixins: [useWindowSize()],\n props: {\n /** 加载状态 */\n loading: {\n type: Boolean,\n default: false,\n },\n /** 列渲染配置 */\n columns: {\n type: Array,\n default: () => [],\n },\n /** 分页状态 */\n pagination: {\n type: [Object, Boolean],\n default: () => ({}),\n },\n /** 分页组件配置 */\n paginationOptions: {\n type: Object,\n default: () => ({}),\n },\n /** 空数据表格高度 */\n emptyHeight: {\n type: String,\n default: "100%",\n },\n // 空状态组件的配置项\n emptyOptions: {\n type: Object,\n default: () => ({}),\n },\n fit: {\n type: Boolean,\n default: true,\n },\n showHeader: {\n type: Boolean,\n default: true,\n },\n stripe: {\n type: Boolean,\n },\n border: {\n type: Boolean,\n },\n size: {\n type: String,\n },\n height: {\n type: [String, Number],\n },\n data: {\n type: Array,\n default: () => [],\n },\n },\n data() {\n return {\n paginationHeight: 48,\n tableHeaderRef: null, // 添加 tableHeaderRef 到 data 中\n };\n },\n computed: {\n showPagination() {\n return this.pagination && !this.isEmpty;\n },\n tableColumns() {\n return this.columns\n .map((column) => ({\n hidden: column.hidden || false,\n ...column,\n }))\n .filter((column) => !column.hidden);\n },\n tableProps() {\n const props = {\n fit: this.fit,\n showHeader: this.showHeader,\n stripe: this.stripe,\n border: this.border,\n size: this.size,\n data: this.data,\n };\n\n // 合并其他表格属性\n const otherProps = this.$attrs;\n return { ...props, ...otherProps, height: this.tableHeight };\n },\n mergedPaginationOptions() {\n const defaultOptions = {\n pageSizes: [100, 200, 300, 500, 1000],\n align: "center",\n background: true,\n layout: "total, prev, pager, next, sizes, jumper",\n hideOnSinglePage: false,\n size: "default",\n pagerCount: this.initialWidth > 1200 ? 7 : 5,\n };\n\n return { ...defaultOptions, ...this.paginationOptions };\n },\n isEmpty() {\n return this.data && this.data.length === 0;\n },\n\n containerHeight() {\n // 简化的容器高度计算\n const paginationHeight = this.showPagination ? this.paginationHeight : 0;\n const offset = paginationHeight + 12;\n return {\n height: offset === 0 ? "100%" : `calc(100% - ${offset}px)`,\n };\n },\n // 表格高度逻辑\n tableHeight() {\n // 空数据且非加载状态时固定高度\n if (this.isEmpty && !this.loading) return this.emptyHeight;\n // 使用传入的高度\n if (this.height) return this.height;\n // 默认占满容器高度\n return "100%";\n },\n // 合并空状态组件配置\n mergedEmptyOptions() {\n const defaultOptions = {\n description: this.emptyText,\n imageSize: 120,\n };\n return { ...defaultOptions, ...this.emptyOptions };\n },\n },\n methods: {\n getGlobalIndex(index) {\n if (!this.pagination) return index + 1;\n const { current, size } = this.pagination;\n return isNaN((current - 1) * size + index + 1)\n ? index + 1\n : (current - 1) * size + index + 1;\n },\n\n handleSizeChange(size) {\n this.$emit("pagination:size-change", size);\n },\n handleCurrentChange(current) {\n this.$emit("pagination:current-change", current);\n this.scrollToTop(); // 页码改变后滚动到表格顶部\n },\n // 滚动表格内容到顶部\n scrollToTop() {\n this.$nextTick(() => {\n const elTableRef = this.$refs.elTableRef;\n if (elTableRef) {\n // 找到 el-table_body 元素\n const tableBody = elTableRef.$el.querySelectorAll(\n ".el-table__body-wrapper"\n );\n if (tableBody.length > 0) {\n tableBody.forEach((item) => {\n item.scrollTo({\n top: 0, // 滚动目标位置(顶部)\n left: 0, // 水平位置(保持0即可)\n // behavior: "smooth", // 关键:平滑滚动,去掉则瞬间跳转\n });\n });\n }\n }\n });\n },\n },\n};\n<\/script>\n\n<template>\n <div\n class="ld-table"\n :class="{ \'ld-table--empty\': isEmpty }"\n :style="containerHeight"\n >\n <ELTable\n ref="elTableRef"\n v-loading="!!loading"\n v-bind="tableProps"\n v-on="$listeners"\n >\n <template v-for="col in tableColumns">\n \x3c!-- 渲染全局序号列 --\x3e\n <ELTableColumn\n v-if="col.type === \'globalIndex\'"\n fixed="left"\n align="center"\n headerAlign="center"\n v-bind="{ ...col }"\n :key="\'globalIndex-\' + (col.prop || col.type)"\n >\n <template #header="{ column, $index }">\n <template\n v-if="\n $scopedSlots[`${column.prop}-header`] ||\n $slots[`${column.prop}-header`]\n "\n >\n <slot\n :name="`${column.prop}-header`"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ col.label || "序号" }}</span>\n </template>\n </template>\n <template #default="{ row, column, $index }">\n <template\n v-if="$scopedSlots[`${column.prop}`] || $slots[`${column.prop}`]"\n >\n <slot\n :name="`${column.prop}`"\n :row="row"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ getGlobalIndex($index) }}</span>\n </template>\n </template>\n </ELTableColumn>\n\n \x3c!-- 渲染列 --\x3e\n <LdTableColumn v-else :key="col.prop || col.label" :column="col">\n <template\n v-for="(_, slotName) in $scopedSlots"\n #[slotName]="slotProps"\n >\n <slot :name="slotName" v-bind="slotProps" />\n </template>\n </LdTableColumn>\n </template>\n <template #empty>\n <template v-if="$scopedSlots[\'tableEmpty\']">\n <slot name="tableEmpty"></slot>\n </template>\n <template v-else>\n <div v-if="loading"></div>\n <ELEmpty v-else v-bind="mergedEmptyOptions">\n <template\n #description\n v-if="\n $scopedSlots[\'tableEmptyDescription\'] ||\n $slots[\'tableEmptyDescription\']\n "\n >\n <slot name="tableEmptyDescription"></slot>\n </template>\n <template\n #image\n v-if="\n $scopedSlots[\'tableEmptyImage\'] || $slots[\'tableEmptyImage\']\n "\n >\n <slot name="tableEmptyImage"></slot>\n </template>\n <template\n #default\n v-if="\n $scopedSlots[\'tableEmptyDefault\'] || $slots[\'tableEmptyDefault\']\n "\n >\n <slot name="tableEmptyDefault"></slot>\n </template>\n </ELEmpty>\n </template>\n </template>\n <template #append>\n <slot name="tableAppend"></slot>\n </template>\n </ELTable>\n\n <div\n v-if="showPagination"\n ref="paginationRef"\n class="ld-table__pagination ld-table__pagination--custom"\n :class="\n mergedPaginationOptions && mergedPaginationOptions.align\n ? \'ld-table__pagination--\' + mergedPaginationOptions.align\n : \'\'\n "\n >\n <ELPagination\n v-bind="mergedPaginationOptions"\n :total="pagination && pagination.total"\n :disabled="loading"\n :page-size="pagination && pagination.size"\n :current-page="pagination && pagination.current"\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n >\n <template\n #default\n v-if="\n $scopedSlots[\'tablePaginationDefault\'] ||\n $slots[\'tablePaginationDefault\']\n "\n >\n <slot name="tablePaginationDefault"></slot>\n </template>\n </ELPagination>\n </div>\n </div>\n</template>\n\n<style scoped>\n.ld-table {\n width: 100%;\n position: relative;\n}\n\n.ld-table--empty {\n min-height: 200px;\n}\n\n.ld-table .el-table {\n width: 100%;\n}\n\n.ld-table__pagination {\n margin-top: 16px;\n padding: 8px 0;\n}\n\n.ld-table__pagination--left {\n text-align: left;\n}\n\n.ld-table__pagination--center {\n text-align: center;\n}\n\n.ld-table__pagination--right {\n text-align: right;\n}\n\n.ld-table__pagination .el-pagination {\n margin: 0;\n}\n\n.ld-table__pagination--custom {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n</style>\n']},media:void 0})},m,"data-v-7b84ff95",!1,void 0,!1,p,void 0,void 0);function h(n,e){if(!e)return n;const t={...n};for(const n in e)e.hasOwnProperty(n)&&(e[n]&&"object"==typeof e[n]&&!Array.isArray(e[n])?t[n]=h(t[n]||{},e[n]):t[n]=e[n]);return t}f.install=n=>{n.component(f.name,f)},s.install=n=>{n.component(s.name,s)};const A={bind(n,e){const t=n.querySelector(".el-dialog__header"),i=n.querySelector(".el-dialog");if(!t||!i)return;t.style.cursor="move";const a={pe:".el-dialog__header",overflow:!1,...e.value||{}};let o=null,l={offsetX:0,offsetY:0};const s=n=>{if(a.pe&&!n.target.closest(a.pe))return;n.preventDefault();const t=n.clientX,s=n.clientY,{offsetX:r,offsetY:d}=l,p=i.getBoundingClientRect(),u=p.left,c=p.top,m=p.width,g=p.height,f=document.documentElement.clientWidth,h=document.documentElement.clientHeight,A=-u-m/2+r,b=f-u-m/2+r,y=-c+d,v=h-c-g/2+d,E=Math.min(A,b),x=Math.max(A,b),C=Math.min(y,v),_=Math.max(y,v),w=n=>{o&&cancelAnimationFrame(o),o=requestAnimationFrame(()=>{let e=r+n.clientX-t,o=d+n.clientY-s;a.overflow||(e=Math.min(Math.max(e,E),x),o=Math.min(Math.max(o,C),_)),l={offsetX:e,offsetY:o},i.style.transform=`translate(${e}px, ${o}px)`,i.style.left="0",i.style.top="0",i.style.right="auto",i.style.bottom="auto"}),n.preventDefault(),n.stopPropagation()},S=n=>{o&&(cancelAnimationFrame(o),o=null),document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",S),"function"==typeof e.ue&&e.ue("end",{x:n.clientX,y:n.clientY,offsetX:l.offsetX,offsetY:l.offsetY})};document.addEventListener("mousemove",w),document.addEventListener("mouseup",S),n.preventDefault(),n.stopPropagation(),"function"==typeof e.ue&&e.ue("start",{x:n.clientX,y:n.clientY})};t.addEventListener("mousedown",s),n.ce={me:s}},ge(n){if(n.ce){const e=n.querySelector(".el-dialog__header");e&&e.removeEventListener("mousedown",n.ce.me),delete n.ce}}},b={name:"DialogPro",H:{fe:e.fe},oe:{he:A},R:{Ae:{type:[Object,Function]},be:{type:Object},ye:{type:Object}},data:()=>({visible:!1}),m(){this.Gn(()=>{this.ye.height&&(document.querySelector(".ld-dialog-pro .el-dialog").style.height=this.ye.height)})},v:{ve(n){this.qn("close",n)}}};var y=function(){var n=this,e=n.U,t=n.q.J||e;return t("ELDialog",n.X({oe:[{name:"dragDialog",le:"v-dragDialog"}],te:"ld-dialog-pro",un:{visible:n.visible,Ee:!1},on:{"update:visible":function(e){n.visible=e},close:function(e){return n.ve("_close")}}},"ELDialog",n.ye,!1),[t(n.Ae,n.X({re:"componentRef",tag:"component",on:{close:n.ve}},"component",n.be,!1))],1)};y.mn=!0;var v=a({C:y,_:[]},function(n){n&&n("data-v-6247a6f6_0",{source:"\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdDynamicDialog/DialogPro.vue"],names:[],mappings:";AA6DA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,aAAA;EACA,sBAAA;AACA;AAEA;EACA,OAAA;EACA,sBAAA;EACA,gBAAA;AACA",file:"DialogPro.vue",sourcesContent:['<script>\nimport { ElDialog } from "element-ui";\nimport { dragDialog } from "./drag-dialog";\n\nexport default {\n name: "DialogPro",\n components: {\n ElDialog,\n },\n directives: {\n dragDialog,\n },\n props: {\n componentInstance: {\n type: [Object, Function],\n },\n componentProps: {\n type: Object,\n },\n dialogProps: {\n type: Object,\n },\n },\n data() {\n return {\n visible: false,\n };\n },\n mounted() {\n this.$nextTick(() => {\n if (this.dialogProps.height) {\n document.querySelector(".ld-dialog-pro .el-dialog").style.height =\n this.dialogProps.height;\n }\n });\n },\n methods: {\n handleClose(type) {\n this.$emit("close", type);\n },\n },\n};\n<\/script>\n<template>\n <ELDialog\n :visible.sync="visible"\n v-bind="dialogProps"\n v-dragDialog\n @close="handleClose(\'_close\')"\n class="ld-dialog-pro"\n :modal="false"\n >\n <component\n ref="componentRef"\n :is="componentInstance"\n v-bind="componentProps"\n @close="handleClose"\n ></component>\n </ELDialog>\n</template>\n<style>\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n']},media:void 0})},b,void 0,!1,void 0,!1,p,void 0,void 0);const E=t.extend(v);class x{xe=null;constructor(n={}){t.prototype.Ce||this._e(n)}_e(n){this.xe=new E({Se:n}).we(document.createElement("div")),this.xe.Te("close",e=>{"_close"!==e?n.close&&n.close(e,this.xe.Kn.Le,this.close.bind(this)):this.close()}),(n.target||document.body).appendChild(this.xe.Zn),t.De(()=>{this.xe.visible=!0})}close(){this.xe.visible=!1,this.xe.Pe(),t.De(()=>{this.xe.Zn.remove(),this.xe=null})}}const C=(n={})=>new x(h({ye:{Ee:!1,top:"0",Oe:!1,$e:!1}},n));function _(n="YYYY-MM-DD HH:mm:ss",e=new Date){let t;e instanceof Date?t=e:"string"==typeof e||"number"==typeof e?(t=new Date(e),isNaN(t.getTime())&&(t=new Date)):t=new Date;const i=t.getFullYear(),a=t.getMonth(),o=t.getDate(),l=t.getDay(),s=t.getHours(),r=t.getMinutes(),d=t.getSeconds(),p=t.getMilliseconds(),u=n=>Math.ceil((n+1)/3),c={ze:i.toString(),Me:i.toString().slice(-2),ke:(a+1).toString(),Be:(a+1).toString().padStart(2,"0"),He:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][a],je:["January","February","March","April","May","June","July","August","September","October","November","December"][a],Re:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"][a],Ne:o.toString(),We:o.toString().padStart(2,"0"),Ie:l.toString(),Ye:["周日","周一","周二","周三","周四","周五","周六"][l],Fe:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][l],Q:u(a).toString(),Ue:["一季度","二季度","三季度","四季度"][u(a)-1],Je:s.toString(),qe:s.toString().padStart(2,"0"),Xe:(s%12||12).toString(),Qe:(s%12||12).toString().padStart(2,"0"),Ge:s>=12?"PM":"AM",a:s>=12?"pm":"am",Ve:r.toString(),mm:r.toString().padStart(2,"0"),s:d.toString(),Ke:d.toString().padStart(2,"0"),Ze:p.toString(),nt:p.toString().padStart(2,"0"),et:p.toString().padStart(3,"0")};return n.replace(/Y+|M+|D+|W+|Q+|H+|h+|A|a|m+|s+|S+/g,n=>c[n]||"")}const w="1.0.1",S=[f,s],T=(n,e={})=>{S.forEach(e=>{n.component(e.name,e)})};"undefined"!=typeof window&&window.i&&T(window.i);var L={install:T,version:w,tt:f,bn:s,it:C,ot:i,lt:_};n.tt=f,n.bn=s,n.lt=_,n.default=L,n.install=T,n.it=C,n.ot=i,n.version=w,Object.defineProperty(n,"st",{value:!0})});
|
|
1
|
+
/* ld-v2-kit version 1.0.3 */
|
|
2
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["ld-v2-kit"]={},e.Vue)}(this,function(e,n){"use strict";const t=(e={})=>{const{initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:t=Number.POSITIVE_INFINITY,includeScrollbar:i=!0,type:o="inner"}=e;return{data:()=>({initialWidth:n,initialHeight:t,resizeListener:null}),mounted(){this.updateWindowSize(),this.resizeListener=()=>this.updateWindowSize(),window.addEventListener("resize",this.resizeListener,{passive:!0}),this.$once("hook:beforeDestroy",()=>{window.removeEventListener("resize",this.resizeListener)})},methods:{updateWindowSize(){"outer"===o?(this.initialWidth=window.outerWidth,this.initialHeight=window.outerHeight):i?(this.initialWidth=window.innerWidth,this.initialHeight=window.innerHeight):(this.initialWidth=window.document.documentElement.clientWidth,this.initialHeight=window.document.documentElement.clientHeight)}}}};function i(e,n,t,i,o,a,l,s,r,d){"boolean"!=typeof l&&(r=s,s=l,l=!1);const p="function"==typeof t?t.options:t;let c;if(e&&e.render&&(p.render=e.render,p.staticRenderFns=e.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),i&&(p._scopeId=i),a?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},p._ssrRegister=c):n&&(c=l?function(e){n.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),c)if(p.functional){const e=p.render;p.render=function(n,t){return c.call(t),e(n,t)}}else{const e=p.beforeCreate;p.beforeCreate=e?[].concat(e,c):[c]}return t}const o={name:"LdTableColumn",props:{column:{type:Object,required:!0}},methods:{cleanColumnProps(e){const n={align:"center",headerAlign:"center",...e};return delete n.useHeaderSlot,delete n.useSlot,n}}};var a=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("el-table-column",e._b({scopedSlots:e._u([!e.column.children&&e.column.useHeaderSlot&&e.column.prop?{key:"header",fn:function(n){var t=n.column,i=n.$index;return[e.$scopedSlots[e.column.prop+"-header"]||e.$slots[e.column.prop+"-header"]?[e._t(e.column.prop+"-header",null,{column:t,$index:i})]:[e._v("\n "+e._s(e.column.label)+"\n ")]]}}:null,!e.column.children&&e.column.useSlot&&e.column.prop?{key:"default",fn:function(n){var t=n.row,i=n.column,o=n.$index;return[e.$scopedSlots[e.column.prop]||e.$slots[e.column.prop]?[e._t(e.column.prop,null,{row:t,column:i,$index:o})]:[e._v("\n "+e._s(e.column.formatter?e.column.formatter(t,i,t[e.column.prop],o):t[e.column.prop])+"\n ")]]}}:null],null,!0)},"el-table-column",e.cleanColumnProps(e.column),!1),[e.column.children&&e.column.children.length>0?e._l(e.column.children,function(e){return t("ld-table-column",{key:e.prop||e.label,attrs:{column:e}})}):e._e()],2)};a._withStripped=!0;var l=i({render:a,staticRenderFns:[]},void 0,o,void 0,!1,void 0,!1,void 0,void 0,void 0),s={name:"LdTable",inheritAttrs:!1,components:{"ld-table-column":l},mixins:[t()],props:{loading:{type:Boolean,default:!1},columns:{type:Array,default:()=>[]},pagination:{type:[Object,Boolean],default:()=>({})},paginationOptions:{type:Object,default:()=>({})},emptyHeight:{type:String,default:"100%"},emptyOptions:{type:Object,default:()=>({})},fit:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},stripe:{type:Boolean},border:{type:Boolean},size:{type:String},height:{type:[String,Number]},data:{type:Array,default:()=>[]}},data:()=>({paginationHeight:48,tableHeaderRef:null}),computed:{showPagination(){return this.pagination&&!this.isEmpty},tableColumns(){return this.columns.map(e=>({hidden:e.hidden||!1,...e})).filter(e=>!e.hidden)},tableProps(){return{fit:this.fit,showHeader:this.showHeader,stripe:this.stripe,border:this.border,size:this.size,data:this.data,...this.$attrs,height:this.tableHeight}},mergedPaginationOptions(){return{pageSizes:[100,200,300,500,1e3],align:"center",background:!0,layout:"total, prev, pager, next, sizes, jumper",hideOnSinglePage:!1,size:"default",pagerCount:this.initialWidth>1200?7:5,...this.paginationOptions}},isEmpty(){return this.data&&0===this.data.length},containerHeight(){const e=(this.showPagination?this.paginationHeight:0)+12;return{height:0===e?"100%":`calc(100% - ${e}px)`}},tableHeight(){return this.isEmpty&&!this.loading?this.emptyHeight:this.height?this.height:"100%"},mergedEmptyOptions(){return{description:this.emptyText,imageSize:120,...this.emptyOptions}}},methods:{getGlobalIndex(e){if(!this.pagination)return e+1;const{current:n,size:t}=this.pagination;return isNaN((n-1)*t+e+1)?e+1:(n-1)*t+e+1},handleSizeChange(e){this.$emit("pagination:size-change",e)},handleCurrentChange(e){this.$emit("pagination:current-change",e),this.scrollToTop()},scrollToTop(){this.$nextTick(()=>{const e=this.$refs.elTableRef;if(e){const n=e.$el.querySelectorAll(".el-table__body-wrapper");n.length>0&&n.forEach(e=>{e.scrollTo({top:0,left:0})})}})}}};const r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function d(e){return(e,n)=>function(e,n){const t=r?n.media||"default":e,i=c[t]||(c[t]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",n.media&&i.element.setAttribute("media",n.media),void 0===p&&(p=document.head||document.getElementsByTagName("head")[0]),p.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(t),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,n=document.createTextNode(t),o=i.element.childNodes;o[e]&&i.element.removeChild(o[e]),o.length?i.element.insertBefore(n,o[e]):i.element.appendChild(n)}}}(e,n)}let p;const c={},u=s;var m=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"ld-table",class:{"ld-table--empty":e.isEmpty},style:e.containerHeight},[t("el-table",e._g(e._b({directives:[{name:"loading",rawName:"v-loading",value:!!e.loading,expression:"!!loading"}],ref:"elTableRef",scopedSlots:e._u([{key:"empty",fn:function(){return[e.$scopedSlots.tableEmpty?[e._t("tableEmpty")]:[e.loading?t("div"):t("el-empty",e._b({scopedSlots:e._u([e.$scopedSlots.tableEmptyDescription||e.$slots.tableEmptyDescription?{key:"description",fn:function(){return[e._t("tableEmptyDescription")]},proxy:!0}:null,e.$scopedSlots.tableEmptyImage||e.$slots.tableEmptyImage?{key:"image",fn:function(){return[e._t("tableEmptyImage")]},proxy:!0}:null,e.$scopedSlots.tableEmptyDefault||e.$slots.tableEmptyDefault?{key:"default",fn:function(){return[e._t("tableEmptyDefault")]},proxy:!0}:null],null,!0)},"el-empty",e.mergedEmptyOptions,!1))]]},proxy:!0},{key:"append",fn:function(){return[e._t("tableAppend")]},proxy:!0}],null,!0)},"el-table",e.tableProps,!1),e.$listeners),[e._l(e.tableColumns,function(n){return["globalIndex"===n.type?t("el-table-column",e._b({key:"globalIndex-"+(n.prop||n.type),attrs:{fixed:"left",align:"center",headerAlign:"center"},scopedSlots:e._u([{key:"header",fn:function(i){var o=i.column,a=i.$index;return[e.$scopedSlots[o.prop+"-header"]||e.$slots[o.prop+"-header"]?[e._t(o.prop+"-header",null,{column:o,$index:a})]:[t("span",[e._v(e._s(n.label||"序号"))])]]}},{key:"default",fn:function(n){var i=n.row,o=n.column,a=n.$index;return[e.$scopedSlots[""+o.prop]||e.$slots[""+o.prop]?[e._t(""+o.prop,null,{row:i,column:o,$index:a})]:[t("span",[e._v(e._s(e.getGlobalIndex(a)))])]]}}],null,!0)},"el-table-column",Object.assign({},n),!1)):t("ld-table-column",{key:n.prop||n.label,attrs:{column:n},scopedSlots:e._u([e._l(e.$scopedSlots,function(n,t){return{key:t,fn:function(n){return[e._t(t,null,null,n)]}}})],null,!0)})]})],2),e._v(" "),e.showPagination?t("div",{ref:"paginationRef",staticClass:"ld-table__pagination ld-table__pagination--custom",class:e.mergedPaginationOptions&&e.mergedPaginationOptions.align?"ld-table__pagination--"+e.mergedPaginationOptions.align:""},[t("el-pagination",e._b({attrs:{total:e.pagination&&e.pagination.total,disabled:e.loading,"page-size":e.pagination&&e.pagination.size,"current-page":e.pagination&&e.pagination.current},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange},scopedSlots:e._u([e.$scopedSlots.tablePaginationDefault||e.$slots.tablePaginationDefault?{key:"default",fn:function(){return[e._t("tablePaginationDefault")]},proxy:!0}:null],null,!0)},"el-pagination",e.mergedPaginationOptions,!1))],1):e._e()],1)};m._withStripped=!0;var g=i({render:m,staticRenderFns:[]},function(e){e&&e("data-v-6131e836_0",{source:"\n.ld-table[data-v-6131e836] {\n width: 100%;\n position: relative;\n}\n.ld-table--empty[data-v-6131e836] {\n min-height: 200px;\n}\n.ld-table .el-table[data-v-6131e836] {\n width: 100%;\n}\n.ld-table__pagination[data-v-6131e836] {\n margin-top: 16px;\n padding: 8px 0;\n}\n.ld-table__pagination--left[data-v-6131e836] {\n text-align: left;\n}\n.ld-table__pagination--center[data-v-6131e836] {\n text-align: center;\n}\n.ld-table__pagination--right[data-v-6131e836] {\n text-align: right;\n}\n.ld-table__pagination .el-pagination[data-v-6131e836] {\n margin: 0;\n}\n.ld-table__pagination--custom[data-v-6131e836] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdTable/LdTable.vue"],names:[],mappings:";AAmUA;EACA,WAAA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,WAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;AACA;AAEA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,SAAA;AACA",file:"LdTable.vue",sourcesContent:['<script>\nimport { useWindowSize } from "../../mixins/useWindowSize.js";\nimport LdTableColumn from "./LdTableColumn.vue";\n\nexport default {\n name: "LdTable",\n inheritAttrs: false,\n components: {\n "ld-table-column": LdTableColumn,\n },\n mixins: [useWindowSize()],\n props: {\n /** 加载状态 */\n loading: {\n type: Boolean,\n default: false,\n },\n /** 列渲染配置 */\n columns: {\n type: Array,\n default: () => [],\n },\n /** 分页状态 */\n pagination: {\n type: [Object, Boolean],\n default: () => ({}),\n },\n /** 分页组件配置 */\n paginationOptions: {\n type: Object,\n default: () => ({}),\n },\n /** 空数据表格高度 */\n emptyHeight: {\n type: String,\n default: "100%",\n },\n // 空状态组件的配置项\n emptyOptions: {\n type: Object,\n default: () => ({}),\n },\n fit: {\n type: Boolean,\n default: true,\n },\n showHeader: {\n type: Boolean,\n default: true,\n },\n stripe: {\n type: Boolean,\n },\n border: {\n type: Boolean,\n },\n size: {\n type: String,\n },\n height: {\n type: [String, Number],\n },\n data: {\n type: Array,\n default: () => [],\n },\n },\n data() {\n return {\n paginationHeight: 48,\n tableHeaderRef: null, // 添加 tableHeaderRef 到 data 中\n };\n },\n computed: {\n showPagination() {\n return this.pagination && !this.isEmpty;\n },\n tableColumns() {\n return this.columns\n .map((column) => ({\n hidden: column.hidden || false,\n ...column,\n }))\n .filter((column) => !column.hidden);\n },\n tableProps() {\n const props = {\n fit: this.fit,\n showHeader: this.showHeader,\n stripe: this.stripe,\n border: this.border,\n size: this.size,\n data: this.data,\n };\n\n // 合并其他表格属性\n const otherProps = this.$attrs;\n return { ...props, ...otherProps, height: this.tableHeight };\n },\n mergedPaginationOptions() {\n const defaultOptions = {\n pageSizes: [100, 200, 300, 500, 1000],\n align: "center",\n background: true,\n layout: "total, prev, pager, next, sizes, jumper",\n hideOnSinglePage: false,\n size: "default",\n pagerCount: this.initialWidth > 1200 ? 7 : 5,\n };\n\n return { ...defaultOptions, ...this.paginationOptions };\n },\n isEmpty() {\n return this.data && this.data.length === 0;\n },\n\n containerHeight() {\n // 简化的容器高度计算\n const paginationHeight = this.showPagination ? this.paginationHeight : 0;\n const offset = paginationHeight + 12;\n return {\n height: offset === 0 ? "100%" : `calc(100% - ${offset}px)`,\n };\n },\n // 表格高度逻辑\n tableHeight() {\n // 空数据且非加载状态时固定高度\n if (this.isEmpty && !this.loading) return this.emptyHeight;\n // 使用传入的高度\n if (this.height) return this.height;\n // 默认占满容器高度\n return "100%";\n },\n // 合并空状态组件配置\n mergedEmptyOptions() {\n const defaultOptions = {\n description: this.emptyText,\n imageSize: 120,\n };\n return { ...defaultOptions, ...this.emptyOptions };\n },\n },\n methods: {\n getGlobalIndex(index) {\n if (!this.pagination) return index + 1;\n const { current, size } = this.pagination;\n return isNaN((current - 1) * size + index + 1)\n ? index + 1\n : (current - 1) * size + index + 1;\n },\n\n handleSizeChange(size) {\n this.$emit("pagination:size-change", size);\n },\n handleCurrentChange(current) {\n this.$emit("pagination:current-change", current);\n this.scrollToTop(); // 页码改变后滚动到表格顶部\n },\n // 滚动表格内容到顶部\n scrollToTop() {\n this.$nextTick(() => {\n const elTableRef = this.$refs.elTableRef;\n if (elTableRef) {\n // 找到 el-table_body 元素\n const tableBody = elTableRef.$el.querySelectorAll(\n ".el-table__body-wrapper"\n );\n if (tableBody.length > 0) {\n tableBody.forEach((item) => {\n item.scrollTo({\n top: 0, // 滚动目标位置(顶部)\n left: 0, // 水平位置(保持0即可)\n // behavior: "smooth", // 关键:平滑滚动,去掉则瞬间跳转\n });\n });\n }\n }\n });\n },\n },\n};\n<\/script>\n\n<template>\n <div\n class="ld-table"\n :class="{ \'ld-table--empty\': isEmpty }"\n :style="containerHeight"\n >\n <el-table\n ref="elTableRef"\n v-loading="!!loading"\n v-bind="tableProps"\n v-on="$listeners"\n >\n <template v-for="col in tableColumns">\n \x3c!-- 渲染全局序号列 --\x3e\n <el-table-column\n v-if="col.type === \'globalIndex\'"\n fixed="left"\n align="center"\n headerAlign="center"\n v-bind="{ ...col }"\n :key="\'globalIndex-\' + (col.prop || col.type)"\n >\n <template #header="{ column, $index }">\n <template\n v-if="\n $scopedSlots[`${column.prop}-header`] ||\n $slots[`${column.prop}-header`]\n "\n >\n <slot\n :name="`${column.prop}-header`"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ col.label || "序号" }}</span>\n </template>\n </template>\n <template #default="{ row, column, $index }">\n <template\n v-if="$scopedSlots[`${column.prop}`] || $slots[`${column.prop}`]"\n >\n <slot\n :name="`${column.prop}`"\n :row="row"\n :column="column"\n :$index="$index"\n />\n </template>\n <template v-else>\n <span>{{ getGlobalIndex($index) }}</span>\n </template>\n </template>\n </el-table-column>\n\n \x3c!-- 渲染列 --\x3e\n <ld-table-column v-else :key="col.prop || col.label" :column="col">\n <template\n v-for="(_, slotName) in $scopedSlots"\n #[slotName]="slotProps"\n >\n <slot :name="slotName" v-bind="slotProps" />\n </template>\n </ld-table-column>\n </template>\n <template #empty>\n <template v-if="$scopedSlots[\'tableEmpty\']">\n <slot name="tableEmpty"></slot>\n </template>\n <template v-else>\n <div v-if="loading"></div>\n <el-empty v-else v-bind="mergedEmptyOptions">\n <template\n #description\n v-if="\n $scopedSlots[\'tableEmptyDescription\'] ||\n $slots[\'tableEmptyDescription\']\n "\n >\n <slot name="tableEmptyDescription"></slot>\n </template>\n <template\n #image\n v-if="\n $scopedSlots[\'tableEmptyImage\'] || $slots[\'tableEmptyImage\']\n "\n >\n <slot name="tableEmptyImage"></slot>\n </template>\n <template\n #default\n v-if="\n $scopedSlots[\'tableEmptyDefault\'] || $slots[\'tableEmptyDefault\']\n "\n >\n <slot name="tableEmptyDefault"></slot>\n </template>\n </el-empty>\n </template>\n </template>\n <template #append>\n <slot name="tableAppend"></slot>\n </template>\n </el-table>\n\n <div\n v-if="showPagination"\n ref="paginationRef"\n class="ld-table__pagination ld-table__pagination--custom"\n :class="\n mergedPaginationOptions && mergedPaginationOptions.align\n ? \'ld-table__pagination--\' + mergedPaginationOptions.align\n : \'\'\n "\n >\n <el-pagination\n v-bind="mergedPaginationOptions"\n :total="pagination && pagination.total"\n :disabled="loading"\n :page-size="pagination && pagination.size"\n :current-page="pagination && pagination.current"\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n >\n <template\n #default\n v-if="\n $scopedSlots[\'tablePaginationDefault\'] ||\n $slots[\'tablePaginationDefault\']\n "\n >\n <slot name="tablePaginationDefault"></slot>\n </template>\n </el-pagination>\n </div>\n </div>\n</template>\n\n<style scoped>\n.ld-table {\n width: 100%;\n position: relative;\n}\n\n.ld-table--empty {\n min-height: 200px;\n}\n\n.ld-table .el-table {\n width: 100%;\n}\n\n.ld-table__pagination {\n margin-top: 16px;\n padding: 8px 0;\n}\n\n.ld-table__pagination--left {\n text-align: left;\n}\n\n.ld-table__pagination--center {\n text-align: center;\n}\n\n.ld-table__pagination--right {\n text-align: right;\n}\n\n.ld-table__pagination .el-pagination {\n margin: 0;\n}\n\n.ld-table__pagination--custom {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n</style>\n']},media:void 0})},u,"data-v-6131e836",!1,void 0,!1,d,void 0,void 0);function h(e,n){if(!n)return e;const t={...e};for(const e in n)n.hasOwnProperty(e)&&(n[e]&&"object"==typeof n[e]&&!Array.isArray(n[e])?t[e]=h(t[e]||{},n[e]):t[e]=n[e]);return t}g.install=e=>{e.component(g.name,g)},l.install=e=>{e.component(l.name,l)};const f={name:"DialogPro",directives:{dragDialog:{bind(e,n){const t=e.querySelector(".el-dialog__header"),i=e.querySelector(".el-dialog");if(!t||!i)return;t.style.cursor="move";const o={handle:".el-dialog__header",overflow:!1,...n.value||{}};let a=null,l={offsetX:0,offsetY:0};const s=e=>{if(o.handle&&!e.target.closest(o.handle))return;e.preventDefault();const t=e.clientX,s=e.clientY,{offsetX:r,offsetY:d}=l,p=i.getBoundingClientRect(),c=p.left,u=p.top,m=p.width,g=p.height,h=document.documentElement.clientWidth,f=document.documentElement.clientHeight,b=-c-m/2+r,A=h-c-m/2+r,y=-u+d,v=f-u-g/2+d,_=Math.min(b,A),S=Math.max(b,A),x=Math.min(y,v),E=Math.max(y,v),$=e=>{a&&cancelAnimationFrame(a),a=requestAnimationFrame(()=>{let n=r+e.clientX-t,a=d+e.clientY-s;o.overflow||(n=Math.min(Math.max(n,_),S),a=Math.min(Math.max(a,x),E)),l={offsetX:n,offsetY:a},i.style.transform=`translate(${n}px, ${a}px)`,i.style.left="0",i.style.top="0",i.style.right="auto",i.style.bottom="auto"}),e.preventDefault(),e.stopPropagation()},w=e=>{a&&(cancelAnimationFrame(a),a=null),document.removeEventListener("mousemove",$),document.removeEventListener("mouseup",w),"function"==typeof n.arg&&n.arg("end",{x:e.clientX,y:e.clientY,offsetX:l.offsetX,offsetY:l.offsetY})};document.addEventListener("mousemove",$),document.addEventListener("mouseup",w),e.preventDefault(),e.stopPropagation(),"function"==typeof n.arg&&n.arg("start",{x:e.clientX,y:e.clientY})};t.addEventListener("mousedown",s),e._localDragEventHandlers={handleMouseDown:s}},unbind(e){if(e._localDragEventHandlers){const n=e.querySelector(".el-dialog__header");n&&n.removeEventListener("mousedown",e._localDragEventHandlers.handleMouseDown),delete e._localDragEventHandlers}}}},props:{componentInstance:{type:[Object,Function]},componentProps:{type:Object},dialogProps:{type:Object}},data:()=>({visible:!1}),mounted(){this.$nextTick(()=>{this.dialogProps.height&&(document.querySelector(".ld-dialog-pro .el-dialog").style.height=this.dialogProps.height)})},methods:{handleClose(e){this.$emit("close",e)}}};var b=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("el-dialog",e._b({directives:[{name:"dragDialog",rawName:"v-dragDialog"}],staticClass:"ld-dialog-pro",attrs:{visible:e.visible,modal:!1},on:{"update:visible":function(n){e.visible=n},close:function(n){return e.handleClose("_close")}}},"el-dialog",e.dialogProps,!1),[t(e.componentInstance,e._b({ref:"componentRef",tag:"component",on:{close:e.handleClose}},"component",e.componentProps,!1))],1)};b._withStripped=!0;var A=i({render:b,staticRenderFns:[]},function(e){e&&e("data-v-b110715e_0",{source:"\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n",map:{version:3,sources:["/Users/chengbotao/Desktop/ld-v2-kit/packages/components/LdDynamicDialog/DialogPro.vue"],names:[],mappings:";AAyDA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,aAAA;EACA,sBAAA;AACA;AAEA;EACA,OAAA;EACA,sBAAA;EACA,gBAAA;AACA",file:"DialogPro.vue",sourcesContent:['<script>\nimport { dragDialog } from "./drag-dialog";\n\nexport default {\n name: "DialogPro",\n directives: {\n dragDialog,\n },\n props: {\n componentInstance: {\n type: [Object, Function],\n },\n componentProps: {\n type: Object,\n },\n dialogProps: {\n type: Object,\n },\n },\n data() {\n return {\n visible: false,\n };\n },\n mounted() {\n this.$nextTick(() => {\n if (this.dialogProps.height) {\n document.querySelector(".ld-dialog-pro .el-dialog").style.height =\n this.dialogProps.height;\n }\n });\n },\n methods: {\n handleClose(type) {\n this.$emit("close", type);\n },\n },\n};\n<\/script>\n<template>\n <el-dialog\n :visible.sync="visible"\n v-bind="dialogProps"\n v-dragDialog\n @close="handleClose(\'_close\')"\n class="ld-dialog-pro"\n :modal="false"\n >\n <component\n ref="componentRef"\n :is="componentInstance"\n v-bind="componentProps"\n @close="handleClose"\n ></component>\n </el-dialog>\n</template>\n<style>\n.ld-dialog-pro.el-dialog__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog {\n margin: 0;\n display: flex;\n flex-direction: column;\n}\n\n.ld-dialog-pro.el-dialog__wrapper .el-dialog .el-dialog__body {\n flex: 1;\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n']},media:void 0})},f,void 0,!1,void 0,!1,d,void 0,void 0);const y=n.extend(A);class v{instance=null;constructor(e={}){n.prototype.$isServer||this.initInstance(e)}initInstance(e){this.instance=new y({propsData:e}).$mount(document.createElement("div")),this.instance.$on("close",n=>{"_close"!==n?e.close&&e.close(n,this.instance.$refs.componentRef,this.close.bind(this)):this.close()}),(e.target||document.body).appendChild(this.instance.$el),n.nextTick(()=>{this.instance.visible=!0})}close(){this.instance.visible=!1,this.instance.$destroy(),n.nextTick(()=>{this.instance.$el.remove(),this.instance=null})}}const _=(e={})=>new v(h({dialogProps:{modal:!1,top:"0",closeOnClickModal:!1,closeOnPressEscape:!1}},e));function S(e="YYYY-MM-DD HH:mm:ss",n=new Date){let t;n instanceof Date?t=n:"string"==typeof n||"number"==typeof n?(t=new Date(n),isNaN(t.getTime())&&(t=new Date)):t=new Date;const i=t.getFullYear(),o=t.getMonth(),a=t.getDate(),l=t.getDay(),s=t.getHours(),r=t.getMinutes(),d=t.getSeconds(),p=t.getMilliseconds(),c=e=>Math.ceil((e+1)/3),u={YYYY:i.toString(),YY:i.toString().slice(-2),M:(o+1).toString(),MM:(o+1).toString().padStart(2,"0"),MMM:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][o],MMMM:["January","February","March","April","May","June","July","August","September","October","November","December"][o],MMMMM:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"][o],D:a.toString(),DD:a.toString().padStart(2,"0"),W:l.toString(),WW:["周日","周一","周二","周三","周四","周五","周六"][l],WWW:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][l],Q:c(o).toString(),QQ:["一季度","二季度","三季度","四季度"][c(o)-1],H:s.toString(),HH:s.toString().padStart(2,"0"),h:(s%12||12).toString(),hh:(s%12||12).toString().padStart(2,"0"),A:s>=12?"PM":"AM",a:s>=12?"pm":"am",m:r.toString(),mm:r.toString().padStart(2,"0"),s:d.toString(),ss:d.toString().padStart(2,"0"),S:p.toString(),SS:p.toString().padStart(2,"0"),SSS:p.toString().padStart(3,"0")};return e.replace(/Y+|M+|D+|W+|Q+|H+|h+|A|a|m+|s+|S+/g,e=>u[e]||"")}const x="1.0.3",E=[g,l],$=(e,n={})=>{E.forEach(n=>{e.component(n.name,n)})};"undefined"!=typeof window&&window.Vue&&$(window.Vue);var w={install:$,version:x,LdTable:g,LdTableColumn:l,useDialog:_,useWindowSize:t,dateFormatter:S};e.LdTable=g,e.LdTableColumn=l,e.dateFormatter=S,e.default=w,e.install=$,e.useDialog=_,e.useWindowSize=t,e.version=x,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
3
3
|
/* Follow me on GitHub! @chengbotao (慢知行 LearnDoing) */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ld-v2-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "基于 Vue2 + ElementUI 的轻量级工具组件包,包含自定义 UI 组件、业务组件与常用工具类。",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -53,11 +53,13 @@
|
|
|
53
53
|
"element-ui": "~2.15.14",
|
|
54
54
|
"vue": "~2.6.14"
|
|
55
55
|
},
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"@babel/runtime": "^7.28.6"
|
|
58
|
+
},
|
|
56
59
|
"devDependencies": {
|
|
57
60
|
"@babel/core": "^7.28.6",
|
|
58
61
|
"@babel/plugin-transform-runtime": "^7.28.5",
|
|
59
62
|
"@babel/preset-env": "^7.28.6",
|
|
60
|
-
"@babel/runtime": "^7.28.6",
|
|
61
63
|
"@rollup/plugin-babel": "^6.1.0",
|
|
62
64
|
"@rollup/plugin-commonjs": "^29.0.0",
|
|
63
65
|
"@rollup/plugin-json": "^6.1.0",
|