@robot-admin/naive-ui-components 0.13.1 → 0.13.5
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/CHANGELOG.md +26 -0
- package/README.md +4 -0
- package/README_EN.md +4 -0
- package/dist/C_ActionBar.css +75 -63
- package/dist/C_ActionBar2.cjs +1 -1
- package/dist/C_ActionBar2.js +1 -1
- package/dist/C_AntV.css +249 -79
- package/dist/C_AntV2.cjs +3 -3
- package/dist/C_AntV2.js +2 -2
- package/dist/C_AudioPlayer.css +88 -76
- package/dist/C_AudioPlayer2.cjs +1 -1
- package/dist/C_AudioPlayer2.js +1 -1
- package/dist/C_AvatarGroup.css +32 -28
- package/dist/C_AvatarGroup2.cjs +1 -1
- package/dist/C_AvatarGroup2.js +1 -1
- package/dist/C_Breadcrumb.css +35 -17
- package/dist/C_Breadcrumb2.cjs +1 -1
- package/dist/C_Breadcrumb2.js +1 -1
- package/dist/C_Captcha.css +66 -53
- package/dist/C_Captcha2.cjs +1 -1
- package/dist/C_Captcha2.js +1 -1
- package/dist/C_Cascade.css +6 -2
- package/dist/C_Cascade2.cjs +1 -1
- package/dist/C_Cascade2.js +1 -1
- package/dist/C_Chat.css +40 -33
- package/dist/C_City.css +37 -32
- package/dist/C_City2.cjs +1 -1
- package/dist/C_City2.js +1 -1
- package/dist/C_Code.css +53 -40
- package/dist/C_Code2.cjs +1 -1
- package/dist/C_Code2.js +1 -1
- package/dist/C_CollapsePanel.css +68 -55
- package/dist/C_CollapsePanel2.cjs +1 -1
- package/dist/C_CollapsePanel2.js +1 -1
- package/dist/C_ContextMenu.css +68 -26
- package/dist/C_ContextMenu2.cjs +1 -1
- package/dist/C_ContextMenu2.js +1 -1
- package/dist/C_Cron.css +95 -68
- package/dist/C_Cron2.cjs +1 -1
- package/dist/C_Cron2.js +1 -1
- package/dist/C_Date.css +8 -1
- package/dist/C_Date2.cjs +1 -1
- package/dist/C_Date2.js +1 -1
- package/dist/C_Draggable.css +60 -51
- package/dist/C_Draggable2.cjs +1 -1
- package/dist/C_Draggable2.js +1 -1
- package/dist/C_Editor.css +23 -15
- package/dist/C_Editor2.cjs +1 -1
- package/dist/C_Editor2.js +1 -1
- package/dist/C_FilePreview.css +200 -90
- package/dist/C_FilePreview2.cjs +1 -1
- package/dist/C_FilePreview2.js +1 -1
- package/dist/C_Form.base.css +284 -224
- package/dist/C_Form.css +307 -239
- package/dist/C_Form2.cjs +1 -1
- package/dist/C_Form2.js +1 -1
- package/dist/C_FormModal.css +18 -8
- package/dist/C_FormModal2.cjs +1 -1
- package/dist/C_FormModal2.js +1 -1
- package/dist/C_FormSearch.css +58 -45
- package/dist/C_FormSearch2.cjs +1 -1
- package/dist/C_FormSearch2.js +1 -1
- package/dist/C_FormulaEditor.css +62 -37
- package/dist/C_FormulaEditor2.cjs +1 -1
- package/dist/C_FormulaEditor2.js +1 -1
- package/dist/C_FullCalendar.css +16 -3
- package/dist/C_FullCalendar2.cjs +1 -1
- package/dist/C_FullCalendar2.js +1 -1
- package/dist/C_GlobalSearch.css +121 -112
- package/dist/C_GlobalSearch2.cjs +1 -1
- package/dist/C_GlobalSearch2.js +1 -1
- package/dist/C_Guide.css +30 -18
- package/dist/C_Guide2.cjs +1 -1
- package/dist/C_Guide2.js +1 -1
- package/dist/C_Icon.css +24 -17
- package/dist/C_Icon2.cjs +1 -1
- package/dist/C_Icon2.js +1 -1
- package/dist/C_ImageCropper.css +39 -22
- package/dist/C_ImageCropper2.cjs +1 -1
- package/dist/C_ImageCropper2.js +1 -1
- package/dist/C_Language.css +30 -17
- package/dist/C_Language2.cjs +1 -1
- package/dist/C_Language2.js +1 -1
- package/dist/C_Login.css +162 -137
- package/dist/C_Login2.cjs +1 -1
- package/dist/C_Login2.js +1 -1
- package/dist/C_Map.css +25 -4
- package/dist/C_Map2.cjs +1 -1
- package/dist/C_Map2.js +1 -1
- package/dist/C_Markdown.css +47 -42
- package/dist/C_Markdown2.cjs +1 -1
- package/dist/C_Markdown2.js +1 -1
- package/dist/C_Menu.css +7 -1
- package/dist/C_Menu2.cjs +1 -1
- package/dist/C_Menu2.js +1 -1
- package/dist/C_NotificationCenter.css +134 -90
- package/dist/C_NotificationCenter2.cjs +1 -1
- package/dist/C_NotificationCenter2.js +1 -1
- package/dist/C_OrgChart.css +10 -0
- package/dist/C_OrgChart2.cjs +1 -1
- package/dist/C_OrgChart2.js +1 -1
- package/dist/C_QRCode.css +12 -8
- package/dist/C_QRCode2.cjs +1 -1
- package/dist/C_QRCode2.js +1 -1
- package/dist/C_Signature.css +18 -14
- package/dist/C_Signature2.cjs +1 -1
- package/dist/C_Signature2.js +1 -1
- package/dist/C_Skeleton.css +5 -0
- package/dist/C_Skeleton2.cjs +1 -1
- package/dist/C_Skeleton2.js +1 -1
- package/dist/C_SplitPane.css +61 -39
- package/dist/C_SplitPane2.cjs +1 -1
- package/dist/C_SplitPane2.js +1 -1
- package/dist/C_Steps.css +42 -38
- package/dist/C_Steps2.cjs +1 -1
- package/dist/C_Steps2.js +1 -1
- package/dist/C_Table.base.css +465 -352
- package/dist/C_Table.css +488 -367
- package/dist/C_TagsView.css +93 -55
- package/dist/C_TagsView2.cjs +1 -1
- package/dist/C_TagsView2.js +1 -1
- package/dist/C_Theme.css +24 -17
- package/dist/C_Timeline.css +47 -36
- package/dist/C_Transfer.css +86 -67
- package/dist/C_Transfer2.cjs +1 -1
- package/dist/C_Transfer2.js +1 -1
- package/dist/C_Tree.css +48 -33
- package/dist/C_Tree2.cjs +1 -1
- package/dist/C_Tree2.js +1 -1
- package/dist/C_Upload.css +104 -51
- package/dist/C_Upload2.cjs +1 -1
- package/dist/C_Upload2.js +1 -1
- package/dist/C_VideoPlayer.css +140 -69
- package/dist/C_VideoPlayer2.cjs +1 -1
- package/dist/C_VideoPlayer2.js +1 -1
- package/dist/C_VtableGantt.css +42 -19
- package/dist/C_VtableGantt2.cjs +1 -1
- package/dist/C_VtableGantt2.js +1 -1
- package/dist/C_WaterFall.css +32 -16
- package/dist/C_WaterFall2.cjs +1 -1
- package/dist/C_WaterFall2.js +1 -1
- package/dist/C_WorkFlow.css +332 -221
- package/dist/C_WorkFlow2.cjs +1 -1
- package/dist/C_WorkFlow2.js +1 -1
- package/dist/constants.d.cts +4 -4
- package/dist/constants.d.ts +4 -4
- package/dist/constants2.d.cts +3 -3
- package/dist/constants2.d.ts +3 -3
- package/dist/constants3.d.cts +2 -2
- package/dist/constants3.d.ts +2 -2
- package/dist/constants4.d.cts +5 -5
- package/dist/constants4.d.ts +5 -5
- package/dist/constants5.d.cts +4 -4
- package/dist/constants5.d.ts +4 -4
- package/dist/data.d.cts +9 -9
- package/dist/data.d.ts +9 -9
- package/dist/data2.cjs +1 -1
- package/dist/data2.js +1 -1
- package/dist/index.vue.d.cts +3 -3
- package/dist/index.vue.d.ts +3 -3
- package/dist/index10.vue.d.cts +3 -3
- package/dist/index10.vue.d.ts +3 -3
- package/dist/index11.vue.d.cts +3 -3
- package/dist/index11.vue.d.ts +1 -1
- package/dist/index12.vue.d.cts +1 -1
- package/dist/index12.vue.d.ts +2 -2
- package/dist/index13.vue.d.cts +2 -2
- package/dist/index13.vue.d.ts +2 -2
- package/dist/index14.vue.d.cts +2 -2
- package/dist/index14.vue.d.ts +14 -12
- package/dist/index15.vue.d.cts +14 -12
- package/dist/index15.vue.d.ts +2 -2
- package/dist/index16.vue.d.cts +2 -2
- package/dist/index16.vue.d.ts +11 -2
- package/dist/index17.vue.d.cts +11 -2
- package/dist/index17.vue.d.ts +5 -5
- package/dist/index18.vue.d.cts +5 -5
- package/dist/index2.vue.d.cts +1 -1
- package/dist/index2.vue.d.ts +1 -1
- package/dist/index20.vue.d.cts +1 -1
- package/dist/index20.vue.d.ts +1 -1
- package/dist/index21.vue.d.cts +2 -2
- package/dist/index21.vue.d.ts +2 -2
- package/dist/index24.vue.d.cts +4 -4
- package/dist/index24.vue.d.ts +4 -4
- package/dist/index26.vue.d.cts +1 -1
- package/dist/index26.vue.d.ts +1 -1
- package/dist/index27.vue.d.cts +3 -3
- package/dist/index27.vue.d.ts +3 -3
- package/dist/index3.vue.d.cts +4 -4
- package/dist/index3.vue.d.ts +4 -4
- package/dist/index5.vue.d.ts +2 -2
- package/dist/index6.vue.d.cts +2 -2
- package/dist/index6.vue.d.ts +2 -2
- package/dist/index7.vue.d.cts +2 -2
- package/dist/index7.vue.d.ts +2 -2
- package/dist/index8.vue.d.cts +2 -2
- package/dist/index8.vue.d.ts +3 -3
- package/dist/index9.vue.d.cts +3 -3
- package/dist/index9.vue.d.ts +3 -3
- package/dist/mapUtils.d.cts +4 -4
- package/dist/mapUtils.d.ts +4 -4
- package/dist/presets.d.cts +1 -1
- package/dist/presets.d.ts +1 -1
- package/dist/style.css +3083 -1982
- package/dist/useCollapsePanel.d.cts +7 -7
- package/dist/useCollapsePanel.d.ts +7 -7
- package/dist/useCropperCore.d.cts +10 -10
- package/dist/useCropperCore.d.ts +10 -10
- package/dist/useDraggableLayout.d.cts +5 -5
- package/dist/useDraggableLayout.d.ts +5 -5
- package/dist/useEdgeInteraction.d.cts +1 -1
- package/dist/useEdgeInteraction.d.ts +1 -1
- package/dist/useFullscreen.d.cts +2 -2
- package/dist/useFullscreen.d.ts +2 -2
- package/dist/useInfiniteScroll.d.cts +3 -3
- package/dist/useInfiniteScroll.d.ts +3 -3
- package/dist/useQRCode.d.cts +4 -4
- package/dist/useQRCode.d.ts +4 -4
- package/dist/useSearchState.d.cts +27 -27
- package/dist/useSearchState.d.ts +27 -27
- package/dist/useSignatureHistory.d.cts +3 -3
- package/dist/useSignatureHistory.d.ts +3 -3
- package/dist/useSplitResize.d.cts +6 -6
- package/dist/useSplitResize.d.ts +6 -6
- package/dist/useTableQuery.cjs +1 -1
- package/dist/useTableQuery.js +1 -1
- package/dist/useTimeSelection.d.cts +4 -4
- package/dist/useTimeSelection.d.ts +4 -4
- package/dist/useTreeOperations.d.cts +5 -5
- package/dist/useTreeOperations.d.ts +5 -5
- package/dist/useWorkflowValidation.d.cts +2 -2
- package/dist/useWorkflowValidation.d.ts +2 -2
- package/package.json +8 -1
package/dist/C_Signature2.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`),r=require(`naive-ui`);function i(e){let{canvasRef:t,penConfig:r,mode:i,disabled:a,backgroundImage:o,importedImage:s,onStrokeComplete:c,onDrawStart:l,onDrawing:u}=e,d=(0,n.ref)(!1),f=(0,n.ref)([]),p=null,m=()=>{let e=t.value;if(!e||(p=e.getContext(`2d`,{willReadFrequently:!0}),!p))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,p.scale(n,n),p.lineCap=`round`,p.lineJoin=`round`},h=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},g=(e,t,n,r=!1)=>{p&&(p.save(),r?(p.globalCompositeOperation=`destination-out`,p.lineWidth=20):(p.globalCompositeOperation=`source-over`,p.strokeStyle=n.color,p.lineWidth=n.width,p.globalAlpha=n.opacity),p.beginPath(),p.moveTo(e.x,e.y),p.lineTo(t.x,t.y),p.stroke(),p.restore())},_=e=>{if(a.value)return;e.preventDefault(),d.value=!0,f.value=[];let t=h(e);f.value.push(t),l()},v=e=>{if(!d.value||a.value)return;e.preventDefault();let t=h(e),n=f.value[f.value.length-1];n&&g(n,t,r.value,i.value===`eraser`),f.value.push(t),u(t)},y=e=>{!d.value||a.value||(e.preventDefault(),d.value=!1,f.value.length>0&&(c({points:[...f.value],color:r.value.color,width:r.value.width,opacity:r.value.opacity,mode:i.value}),f.value=[]))};return{isDrawing:(0,n.readonly)(d),initCanvas:m,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,_),e.addEventListener(`mousemove`,v),e.addEventListener(`mouseup`,y),e.addEventListener(`mouseleave`,y),e.addEventListener(`touchstart`,_,{passive:!1}),e.addEventListener(`touchmove`,v,{passive:!1}),e.addEventListener(`touchend`,y),e.addEventListener(`touchcancel`,y))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,_),e.removeEventListener(`mousemove`,v),e.removeEventListener(`mouseup`,y),e.removeEventListener(`mouseleave`,y),e.removeEventListener(`touchstart`,_),e.removeEventListener(`touchmove`,v),e.removeEventListener(`touchend`,y),e.removeEventListener(`touchcancel`,y))},redrawStrokes:e=>{if(!p||!t.value)return;let n=t.value,{width:r,height:i}=n.getBoundingClientRect();p.clearRect(0,0,n.width,n.height),o?.value&&p.drawImage(o.value,0,0,r,i),s?.value&&p.drawImage(s.value,0,0,r,i),e.forEach(e=>{for(let t=1;t<e.points.length;t++)g(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!p||!t.value||p.clearRect(0,0,t.value.width,t.value.height)}}}const a=e=>e.map(e=>({...e,points:e.points.map(e=>({...e}))}));function o(e={}){let{onChange:t}=e,r=Math.max(2,Math.floor(e.maxHistory??50)),i=(0,n.ref)([]),o=(0,n.ref)([]),s=(0,n.ref)(-1),c=(0,n.computed)(()=>s.value>0),l=(0,n.computed)(()=>s.value<o.value.length-1),u=e=>{i.value.push(a([e])[0]),d()},d=()=>{o.value=o.value.slice(0,s.value+1),o.value.push(a(i.value)),s.value++,o.value.length>r&&(o.value.shift(),s.value--),t?.(a(i.value))},f=()=>c.value?(s.value--,i.value=a(o.value[s.value]),t?.(a(i.value)),!0):!1,p=()=>l.value?(s.value++,i.value=a(o.value[s.value]),t?.(a(i.value)),!0):!1,m=()=>{i.value=[],o.value=[[]],s.value=0,t?.([])},h=e=>{i.value=a(e),o.value=[a(e)],s.value=0,t?.(a(i.value))},g=(0,n.computed)(()=>i.value.length===0);return o.value=[[]],s.value=0,{strokes:(0,n.readonly)(i),canUndo:(0,n.readonly)(c),canRedo:(0,n.readonly)(l),isEmpty:(0,n.readonly)(g),addStroke:u,undo:f,redo:p,clear:m,loadData:h}}function s(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=e=>{let t=e.getContext(`2d`);if(!t)return!0;let{data:n}=t.getImageData(0,0,e.width,e.height);return!n.some(e=>e!==0)},l=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);if(c(n))throw Error(`签名为空,请先签名后再导出`);let{format:r=`png`,quality:i=.92}=e,a=o(n,{...e,includeBackground:e.includeBackground??r===`jpeg`});if(r===`blob`)return s(a,i);if(r===`svg`){let e=a.toDataURL(`image/png`),t=`<svg xmlns="http://www.w3.org/2000/svg" width="${a.width}" height="${a.height}" viewBox="0 0 ${a.width} ${a.height}"><image href="${e}" width="100%" height="100%"/></svg>`;return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}`}let l=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(l,i)};return{exportSignature:l,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await l({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n===`blob`?`png`:n}`,document.body.appendChild(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(t),1e3)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,document.body.appendChild(t),t.click(),t.remove()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const c={color:`#000000`,width:2,opacity:1},l={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},u=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],d={class:`c-signature`},f={key:0,class:`signature-toolbar`},p={class:`toolbar-section`},m={key:0,class:`toolbar-section`},h={key:1,class:`toolbar-section`},g={class:`toolbar-section`},_={class:`toolbar-section`},v={key:0,class:`canvas-placeholder`},y=(0,n.defineComponent)({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`,`error`],setup(t,{expose:a,emit:y}){let b=t,x=y,S=(0,n.ref)(null),C=(0,n.ref)(null),w=(0,n.shallowRef)(null),T=(0,n.shallowRef)(null),E=(0,n.computed)(()=>b.disabled||b.readonly),D=(0,n.ref)(`pen`),O=(0,n.reactive)({...c,...b.penConfig}),k=(0,n.reactive)({...l,...b.watermark}),{strokes:A,canUndo:j,canRedo:M,isEmpty:N,addStroke:P,undo:F,redo:I,clear:L,loadData:R}=o({maxHistory:b.maxHistory,onChange:e=>{B.redrawStrokes(e),x(`change`,e)}}),z=(0,n.computed)(()=>N.value&&!T.value),B=i({canvasRef:S,penConfig:(0,n.toRef)(O),mode:D,disabled:E,backgroundImage:w,importedImage:T,onStrokeComplete:e=>{P(e),x(`end-draw`,e)},onDrawStart:()=>x(`start-draw`),onDrawing:e=>x(`drawing`,e)}),V=s({canvasRef:S,watermark:(0,n.toRef)(k)}),H=()=>{let e=F();return e&&x(`undo`),e},U=()=>{let e=I();return e&&x(`redo`),e},W=()=>{T.value=null,L(),x(`clear`)},G=async e=>V.exportSignature(e),K=async(e,t)=>V.download(e,t);function q(e){return new Promise((t,n)=>{let r=new Image;r.crossOrigin=`anonymous`,r.onload=()=>t(r),r.onerror=()=>n(Error(`签名图片加载失败`)),r.src=e})}let J=0;async function Y(e){let t=++J;if(!e){w.value=null,B.redrawStrokes(A.value);return}let n=await q(e);t===J&&(w.value=n,B.redrawStrokes(A.value))}let X=async e=>{T.value=await q(e),L()},Z=()=>A.value.map(e=>({...e,points:e.points.map(e=>({...e}))})),ee=e=>{T.value=null,R(e)},te=()=>z.value;(0,n.onMounted)(()=>{B.initCanvas(),B.bindEvents(),typeof ResizeObserver<`u`&&C.value&&(Q=new ResizeObserver(()=>{B.initCanvas(),B.redrawStrokes(A.value)}),Q.observe(C.value)),Y(b.backgroundImage).catch($)});let Q=null;function $(e){x(`error`,e instanceof Error?e:Error(String(e)))}return(0,n.watch)(()=>b.backgroundImage,e=>{Y(e).catch($)}),(0,n.onUnmounted)(()=>{J++,Q?.disconnect(),B.unbindEvents()}),a({clear:W,undo:H,redo:U,export:G,download:K,loadImage:X,getSignatureData:Z,loadSignatureData:ee,isEmpty:te}),(i,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[t.showToolbar?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,f,[(0,n.createElementVNode)(`div`,p,[(0,n.createVNode)((0,n.unref)(r.NButtonGroup),null,{default:(0,n.withCtx)(()=>[(0,n.createVNode)((0,n.unref)(r.NButton),{type:D.value===`pen`?`primary`:`default`,size:`small`,disabled:E.value,onClick:a[0]||=e=>D.value=`pen`},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[4]||=(0,n.createTextVNode)(` 画笔 `,-1)]),_:1},8,[`type`,`disabled`]),(0,n.createVNode)((0,n.unref)(r.NButton),{type:D.value===`eraser`?`primary`:`default`,size:`small`,disabled:E.value,onClick:a[1]||=e=>D.value=`eraser`},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[5]||=(0,n.createTextVNode)(` 橡皮擦 `,-1)]),_:1},8,[`type`,`disabled`])]),_:1})]),a[11]||=(0,n.createElementVNode)(`div`,{class:`toolbar-section divider`},null,-1),D.value===`pen`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,m,[a[6]||=(0,n.createElementVNode)(`span`,{class:`section-label`},`颜色`,-1),(0,n.createVNode)((0,n.unref)(r.NColorPicker),{value:O.color,"onUpdate:value":a[2]||=e=>O.color=e,"show-alpha":!1,disabled:E.value,size:`small`,swatches:(0,n.unref)(u)},null,8,[`value`,`disabled`,`swatches`])])):(0,n.createCommentVNode)(`v-if`,!0),D.value===`pen`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,h,[a[7]||=(0,n.createElementVNode)(`span`,{class:`section-label`},`粗细`,-1),(0,n.createVNode)((0,n.unref)(r.NInputNumber),{value:O.width,"onUpdate:value":a[3]||=e=>O.width=e,min:1,max:20,disabled:E.value,size:`small`,style:{width:`80px`}},null,8,[`value`,`disabled`])])):(0,n.createCommentVNode)(`v-if`,!0),a[12]||=(0,n.createElementVNode)(`div`,{class:`toolbar-section divider`},null,-1),(0,n.createElementVNode)(`div`,g,[(0,n.createVNode)((0,n.unref)(r.NButton),{size:`small`,disabled:E.value||!(0,n.unref)(j),onClick:H},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[8]||=(0,n.createTextVNode)(` 撤销 `,-1)]),_:1},8,[`disabled`]),(0,n.createVNode)((0,n.unref)(r.NButton),{size:`small`,disabled:E.value||!(0,n.unref)(M),onClick:U},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[9]||=(0,n.createTextVNode)(` 重做 `,-1)]),_:1},8,[`disabled`])]),a[13]||=(0,n.createElementVNode)(`div`,{class:`toolbar-section divider`},null,-1),(0,n.createElementVNode)(`div`,_,[(0,n.createVNode)((0,n.unref)(r.NButton),{size:`small`,type:`error`,disabled:E.value||z.value,onClick:W},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[10]||=(0,n.createTextVNode)(` 清空 `,-1)]),_:1},8,[`disabled`])])])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`div`,{ref_key:`canvasWrapperRef`,ref:C,class:(0,n.normalizeClass)([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:(0,n.normalizeStyle)({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[(0,n.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:S,class:(0,n.normalizeClass)([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),z.value&&!t.disabled&&!t.readonly?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,v,` 请在此处签名 `)):(0,n.createCommentVNode)(`v-if`,!0)],6)]))}});var b=t.t(y,[[`__scopeId`,`data-v-99dc336d`]]);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return b}});
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`),r=require(`naive-ui`);function i(e){let{canvasRef:t,penConfig:r,mode:i,disabled:a,backgroundImage:o,importedImage:s,onStrokeComplete:c,onDrawStart:l,onDrawing:u}=e,d=(0,n.ref)(!1),f=(0,n.ref)([]),p=null,m=()=>{let e=t.value;if(!e||(p=e.getContext(`2d`,{willReadFrequently:!0}),!p))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,p.scale(n,n),p.lineCap=`round`,p.lineJoin=`round`},h=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},g=(e,t,n,r=!1)=>{p&&(p.save(),r?(p.globalCompositeOperation=`destination-out`,p.lineWidth=20):(p.globalCompositeOperation=`source-over`,p.strokeStyle=n.color,p.lineWidth=n.width,p.globalAlpha=n.opacity),p.beginPath(),p.moveTo(e.x,e.y),p.lineTo(t.x,t.y),p.stroke(),p.restore())},_=e=>{if(a.value)return;e.preventDefault(),d.value=!0,f.value=[];let t=h(e);f.value.push(t),l()},v=e=>{if(!d.value||a.value)return;e.preventDefault();let t=h(e),n=f.value[f.value.length-1];n&&g(n,t,r.value,i.value===`eraser`),f.value.push(t),u(t)},y=e=>{!d.value||a.value||(e.preventDefault(),d.value=!1,f.value.length>0&&(c({points:[...f.value],color:r.value.color,width:r.value.width,opacity:r.value.opacity,mode:i.value}),f.value=[]))};return{isDrawing:(0,n.readonly)(d),initCanvas:m,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,_),e.addEventListener(`mousemove`,v),e.addEventListener(`mouseup`,y),e.addEventListener(`mouseleave`,y),e.addEventListener(`touchstart`,_,{passive:!1}),e.addEventListener(`touchmove`,v,{passive:!1}),e.addEventListener(`touchend`,y),e.addEventListener(`touchcancel`,y))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,_),e.removeEventListener(`mousemove`,v),e.removeEventListener(`mouseup`,y),e.removeEventListener(`mouseleave`,y),e.removeEventListener(`touchstart`,_),e.removeEventListener(`touchmove`,v),e.removeEventListener(`touchend`,y),e.removeEventListener(`touchcancel`,y))},redrawStrokes:e=>{if(!p||!t.value)return;let n=t.value,{width:r,height:i}=n.getBoundingClientRect();p.clearRect(0,0,n.width,n.height),o?.value&&p.drawImage(o.value,0,0,r,i),s?.value&&p.drawImage(s.value,0,0,r,i),e.forEach(e=>{for(let t=1;t<e.points.length;t++)g(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!p||!t.value||p.clearRect(0,0,t.value.width,t.value.height)}}}const a=e=>e.map(e=>({...e,points:e.points.map(e=>({...e}))}));function o(e={}){let{onChange:t}=e,r=Math.max(2,Math.floor(e.maxHistory??50)),i=(0,n.ref)([]),o=(0,n.ref)([]),s=(0,n.ref)(-1),c=(0,n.computed)(()=>s.value>0),l=(0,n.computed)(()=>s.value<o.value.length-1),u=e=>{i.value.push(a([e])[0]),d()},d=()=>{o.value=o.value.slice(0,s.value+1),o.value.push(a(i.value)),s.value++,o.value.length>r&&(o.value.shift(),s.value--),t?.(a(i.value))},f=()=>c.value?(s.value--,i.value=a(o.value[s.value]),t?.(a(i.value)),!0):!1,p=()=>l.value?(s.value++,i.value=a(o.value[s.value]),t?.(a(i.value)),!0):!1,m=()=>{i.value=[],o.value=[[]],s.value=0,t?.([])},h=e=>{i.value=a(e),o.value=[a(e)],s.value=0,t?.(a(i.value))},g=(0,n.computed)(()=>i.value.length===0);return o.value=[[]],s.value=0,{strokes:(0,n.readonly)(i),canUndo:(0,n.readonly)(c),canRedo:(0,n.readonly)(l),isEmpty:(0,n.readonly)(g),addStroke:u,undo:f,redo:p,clear:m,loadData:h}}function s(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=e=>{let t=e.getContext(`2d`);if(!t)return!0;let{data:n}=t.getImageData(0,0,e.width,e.height);return!n.some(e=>e!==0)},l=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);if(c(n))throw Error(`签名为空,请先签名后再导出`);let{format:r=`png`,quality:i=.92}=e,a=o(n,{...e,includeBackground:e.includeBackground??r===`jpeg`});if(r===`blob`)return s(a,i);if(r===`svg`){let e=a.toDataURL(`image/png`),t=`<svg xmlns="http://www.w3.org/2000/svg" width="${a.width}" height="${a.height}" viewBox="0 0 ${a.width} ${a.height}"><image href="${e}" width="100%" height="100%"/></svg>`;return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}`}let l=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(l,i)};return{exportSignature:l,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await l({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n===`blob`?`png`:n}`,document.body.appendChild(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(t),1e3)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,document.body.appendChild(t),t.click(),t.remove()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const c={color:`#000000`,width:2,opacity:1},l={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},u=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],d={class:`c-signature`},f={key:0,class:`signature-toolbar`},p={class:`toolbar-section`},m={key:0,class:`toolbar-section`},h={key:1,class:`toolbar-section`},g={class:`toolbar-section`},_={class:`toolbar-section`},v={key:0,class:`canvas-placeholder`},y=(0,n.defineComponent)({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`,`error`],setup(t,{expose:a,emit:y}){let b=t,x=y,S=(0,n.ref)(null),C=(0,n.ref)(null),w=(0,n.shallowRef)(null),T=(0,n.shallowRef)(null),E=(0,n.computed)(()=>b.disabled||b.readonly),D=(0,n.ref)(`pen`),O=(0,n.reactive)({...c,...b.penConfig}),k=(0,n.reactive)({...l,...b.watermark}),{strokes:A,canUndo:j,canRedo:M,isEmpty:N,addStroke:P,undo:F,redo:I,clear:L,loadData:R}=o({maxHistory:b.maxHistory,onChange:e=>{B.redrawStrokes(e),x(`change`,e)}}),z=(0,n.computed)(()=>N.value&&!T.value),B=i({canvasRef:S,penConfig:(0,n.toRef)(O),mode:D,disabled:E,backgroundImage:w,importedImage:T,onStrokeComplete:e=>{P(e),x(`end-draw`,e)},onDrawStart:()=>x(`start-draw`),onDrawing:e=>x(`drawing`,e)}),V=s({canvasRef:S,watermark:(0,n.toRef)(k)}),H=()=>{let e=F();return e&&x(`undo`),e},U=()=>{let e=I();return e&&x(`redo`),e},W=()=>{T.value=null,L(),x(`clear`)},G=async e=>V.exportSignature(e),K=async(e,t)=>V.download(e,t);function q(e){return new Promise((t,n)=>{let r=new Image;r.crossOrigin=`anonymous`,r.onload=()=>t(r),r.onerror=()=>n(Error(`签名图片加载失败`)),r.src=e})}let J=0;async function Y(e){let t=++J;if(!e){w.value=null,B.redrawStrokes(A.value);return}let n=await q(e);t===J&&(w.value=n,B.redrawStrokes(A.value))}let X=async e=>{T.value=await q(e),L()},Z=()=>A.value.map(e=>({...e,points:e.points.map(e=>({...e}))})),ee=e=>{T.value=null,R(e)},te=()=>z.value;(0,n.onMounted)(()=>{B.initCanvas(),B.bindEvents(),typeof ResizeObserver<`u`&&C.value&&(Q=new ResizeObserver(()=>{B.initCanvas(),B.redrawStrokes(A.value)}),Q.observe(C.value)),Y(b.backgroundImage).catch($)});let Q=null;function $(e){x(`error`,e instanceof Error?e:Error(String(e)))}return(0,n.watch)(()=>b.backgroundImage,e=>{Y(e).catch($)}),(0,n.onUnmounted)(()=>{J++,Q?.disconnect(),B.unbindEvents()}),a({clear:W,undo:H,redo:U,export:G,download:K,loadImage:X,getSignatureData:Z,loadSignatureData:ee,isEmpty:te}),(i,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[t.showToolbar?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,f,[(0,n.createElementVNode)(`div`,p,[(0,n.createVNode)((0,n.unref)(r.NButtonGroup),null,{default:(0,n.withCtx)(()=>[(0,n.createVNode)((0,n.unref)(r.NButton),{type:D.value===`pen`?`primary`:`default`,size:`small`,disabled:E.value,onClick:a[0]||=e=>D.value=`pen`},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[4]||=(0,n.createTextVNode)(` 画笔 `,-1)]),_:1},8,[`type`,`disabled`]),(0,n.createVNode)((0,n.unref)(r.NButton),{type:D.value===`eraser`?`primary`:`default`,size:`small`,disabled:E.value,onClick:a[1]||=e=>D.value=`eraser`},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[5]||=(0,n.createTextVNode)(` 橡皮擦 `,-1)]),_:1},8,[`type`,`disabled`])]),_:1})]),a[11]||=(0,n.createElementVNode)(`div`,{class:`toolbar-section divider`},null,-1),D.value===`pen`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,m,[a[6]||=(0,n.createElementVNode)(`span`,{class:`section-label`},`颜色`,-1),(0,n.createVNode)((0,n.unref)(r.NColorPicker),{value:O.color,"onUpdate:value":a[2]||=e=>O.color=e,"show-alpha":!1,disabled:E.value,size:`small`,swatches:(0,n.unref)(u)},null,8,[`value`,`disabled`,`swatches`])])):(0,n.createCommentVNode)(`v-if`,!0),D.value===`pen`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,h,[a[7]||=(0,n.createElementVNode)(`span`,{class:`section-label`},`粗细`,-1),(0,n.createVNode)((0,n.unref)(r.NInputNumber),{value:O.width,"onUpdate:value":a[3]||=e=>O.width=e,min:1,max:20,disabled:E.value,size:`small`,style:{width:`80px`}},null,8,[`value`,`disabled`])])):(0,n.createCommentVNode)(`v-if`,!0),a[12]||=(0,n.createElementVNode)(`div`,{class:`toolbar-section divider`},null,-1),(0,n.createElementVNode)(`div`,g,[(0,n.createVNode)((0,n.unref)(r.NButton),{size:`small`,disabled:E.value||!(0,n.unref)(j),onClick:H},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[8]||=(0,n.createTextVNode)(` 撤销 `,-1)]),_:1},8,[`disabled`]),(0,n.createVNode)((0,n.unref)(r.NButton),{size:`small`,disabled:E.value||!(0,n.unref)(M),onClick:U},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[9]||=(0,n.createTextVNode)(` 重做 `,-1)]),_:1},8,[`disabled`])]),a[13]||=(0,n.createElementVNode)(`div`,{class:`toolbar-section divider`},null,-1),(0,n.createElementVNode)(`div`,_,[(0,n.createVNode)((0,n.unref)(r.NButton),{size:`small`,type:`error`,disabled:E.value||z.value,onClick:W},{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:(0,n.withCtx)(()=>[a[10]||=(0,n.createTextVNode)(` 清空 `,-1)]),_:1},8,[`disabled`])])])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`div`,{ref_key:`canvasWrapperRef`,ref:C,class:(0,n.normalizeClass)([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:(0,n.normalizeStyle)({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[(0,n.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:S,class:(0,n.normalizeClass)([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),z.value&&!t.disabled&&!t.readonly?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,v,` 请在此处签名 `)):(0,n.createCommentVNode)(`v-if`,!0)],6)]))}});var b=t.t(y,[[`__scopeId`,`data-v-66ce1727`]]);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return b}});
|
package/dist/C_Signature2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onMounted as d,onUnmounted as f,openBlock as p,reactive as m,readonly as h,ref as g,shallowRef as _,toRef as v,unref as y,watch as b,withCtx as x}from"vue";import{NButton as S,NButtonGroup as ee,NColorPicker as te,NInputNumber as ne}from"naive-ui";function C(e){let{canvasRef:t,penConfig:n,mode:r,disabled:i,backgroundImage:a,importedImage:o,onStrokeComplete:s,onDrawStart:c,onDrawing:l}=e,u=g(!1),d=g([]),f=null,p=()=>{let e=t.value;if(!e||(f=e.getContext(`2d`,{willReadFrequently:!0}),!f))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,f.scale(n,n),f.lineCap=`round`,f.lineJoin=`round`},m=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},_=(e,t,n,r=!1)=>{f&&(f.save(),r?(f.globalCompositeOperation=`destination-out`,f.lineWidth=20):(f.globalCompositeOperation=`source-over`,f.strokeStyle=n.color,f.lineWidth=n.width,f.globalAlpha=n.opacity),f.beginPath(),f.moveTo(e.x,e.y),f.lineTo(t.x,t.y),f.stroke(),f.restore())},v=e=>{if(i.value)return;e.preventDefault(),u.value=!0,d.value=[];let t=m(e);d.value.push(t),c()},y=e=>{if(!u.value||i.value)return;e.preventDefault();let t=m(e),a=d.value[d.value.length-1];a&&_(a,t,n.value,r.value===`eraser`),d.value.push(t),l(t)},b=e=>{!u.value||i.value||(e.preventDefault(),u.value=!1,d.value.length>0&&(s({points:[...d.value],color:n.value.color,width:n.value.width,opacity:n.value.opacity,mode:r.value}),d.value=[]))};return{isDrawing:h(u),initCanvas:p,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,v),e.addEventListener(`mousemove`,y),e.addEventListener(`mouseup`,b),e.addEventListener(`mouseleave`,b),e.addEventListener(`touchstart`,v,{passive:!1}),e.addEventListener(`touchmove`,y,{passive:!1}),e.addEventListener(`touchend`,b),e.addEventListener(`touchcancel`,b))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,v),e.removeEventListener(`mousemove`,y),e.removeEventListener(`mouseup`,b),e.removeEventListener(`mouseleave`,b),e.removeEventListener(`touchstart`,v),e.removeEventListener(`touchmove`,y),e.removeEventListener(`touchend`,b),e.removeEventListener(`touchcancel`,b))},redrawStrokes:e=>{if(!f||!t.value)return;let n=t.value,{width:r,height:i}=n.getBoundingClientRect();f.clearRect(0,0,n.width,n.height),a?.value&&f.drawImage(a.value,0,0,r,i),o?.value&&f.drawImage(o.value,0,0,r,i),e.forEach(e=>{for(let t=1;t<e.points.length;t++)_(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!f||!t.value||f.clearRect(0,0,t.value.width,t.value.height)}}}const w=e=>e.map(e=>({...e,points:e.points.map(e=>({...e}))}));function T(e={}){let{onChange:t}=e,r=Math.max(2,Math.floor(e.maxHistory??50)),i=g([]),a=g([]),o=g(-1),s=n(()=>o.value>0),c=n(()=>o.value<a.value.length-1),l=e=>{i.value.push(w([e])[0]),u()},u=()=>{a.value=a.value.slice(0,o.value+1),a.value.push(w(i.value)),o.value++,a.value.length>r&&(a.value.shift(),o.value--),t?.(w(i.value))},d=()=>s.value?(o.value--,i.value=w(a.value[o.value]),t?.(w(i.value)),!0):!1,f=()=>c.value?(o.value++,i.value=w(a.value[o.value]),t?.(w(i.value)),!0):!1,p=()=>{i.value=[],a.value=[[]],o.value=0,t?.([])},m=e=>{i.value=w(e),a.value=[w(e)],o.value=0,t?.(w(i.value))},_=n(()=>i.value.length===0);return a.value=[[]],o.value=0,{strokes:h(i),canUndo:h(s),canRedo:h(c),isEmpty:h(_),addStroke:l,undo:d,redo:f,clear:p,loadData:m}}function E(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=e=>{let t=e.getContext(`2d`);if(!t)return!0;let{data:n}=t.getImageData(0,0,e.width,e.height);return!n.some(e=>e!==0)},l=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);if(c(n))throw Error(`签名为空,请先签名后再导出`);let{format:r=`png`,quality:i=.92}=e,a=o(n,{...e,includeBackground:e.includeBackground??r===`jpeg`});if(r===`blob`)return s(a,i);if(r===`svg`){let e=a.toDataURL(`image/png`),t=`<svg xmlns="http://www.w3.org/2000/svg" width="${a.width}" height="${a.height}" viewBox="0 0 ${a.width} ${a.height}"><image href="${e}" width="100%" height="100%"/></svg>`;return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}`}let l=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(l,i)};return{exportSignature:l,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await l({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n===`blob`?`png`:n}`,document.body.appendChild(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(t),1e3)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,document.body.appendChild(t),t.click(),t.remove()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const re={color:`#000000`,width:2,opacity:1},ie={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},D=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],ae={class:`c-signature`},oe={key:0,class:`signature-toolbar`},se={class:`toolbar-section`},ce={key:0,class:`toolbar-section`},le={key:1,class:`toolbar-section`},ue={class:`toolbar-section`},O={class:`toolbar-section`},de={key:0,class:`canvas-placeholder`};var k=t(c({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`,`error`],setup(t,{expose:c,emit:h}){let w=t,k=h,A=g(null),j=g(null),M=_(null),N=_(null),P=n(()=>w.disabled||w.readonly),F=g(`pen`),I=m({...re,...w.penConfig}),fe=m({...ie,...w.watermark}),{strokes:L,canUndo:R,canRedo:z,isEmpty:B,addStroke:V,undo:pe,redo:me,clear:H,loadData:he}=T({maxHistory:w.maxHistory,onChange:e=>{W.redrawStrokes(e),k(`change`,e)}}),U=n(()=>B.value&&!N.value),W=C({canvasRef:A,penConfig:v(I),mode:F,disabled:P,backgroundImage:M,importedImage:N,onStrokeComplete:e=>{V(e),k(`end-draw`,e)},onDrawStart:()=>k(`start-draw`),onDrawing:e=>k(`drawing`,e)}),G=E({canvasRef:A,watermark:v(fe)}),K=()=>{let e=pe();return e&&k(`undo`),e},q=()=>{let e=me();return e&&k(`redo`),e},J=()=>{N.value=null,H(),k(`clear`)},ge=async e=>G.exportSignature(e),_e=async(e,t)=>G.download(e,t);function Y(e){return new Promise((t,n)=>{let r=new Image;r.crossOrigin=`anonymous`,r.onload=()=>t(r),r.onerror=()=>n(Error(`签名图片加载失败`)),r.src=e})}let X=0;async function Z(e){let t=++X;if(!e){M.value=null,W.redrawStrokes(L.value);return}let n=await Y(e);t===X&&(M.value=n,W.redrawStrokes(L.value))}let ve=async e=>{N.value=await Y(e),H()},ye=()=>L.value.map(e=>({...e,points:e.points.map(e=>({...e}))})),be=e=>{N.value=null,he(e)},xe=()=>U.value;d(()=>{W.initCanvas(),W.bindEvents(),typeof ResizeObserver<`u`&&j.value&&(Q=new ResizeObserver(()=>{W.initCanvas(),W.redrawStrokes(L.value)}),Q.observe(j.value)),Z(w.backgroundImage).catch($)});let Q=null;function $(e){k(`error`,e instanceof Error?e:Error(String(e)))}return b(()=>w.backgroundImage,e=>{Z(e).catch($)}),f(()=>{X++,Q?.disconnect(),W.unbindEvents()}),c({clear:J,undo:K,redo:q,export:ge,download:_e,loadImage:ve,getSignatureData:ye,loadSignatureData:be,isEmpty:xe}),(n,c)=>(p(),i(`div`,ae,[t.showToolbar?(p(),i(`div`,oe,[a(`div`,se,[s(y(ee),null,{default:x(()=>[s(y(S),{type:F.value===`pen`?`primary`:`default`,size:`small`,disabled:P.value,onClick:c[0]||=e=>F.value=`pen`},{icon:x(()=>[s(e,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:x(()=>[c[4]||=o(` 画笔 `,-1)]),_:1},8,[`type`,`disabled`]),s(y(S),{type:F.value===`eraser`?`primary`:`default`,size:`small`,disabled:P.value,onClick:c[1]||=e=>F.value=`eraser`},{icon:x(()=>[s(e,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:x(()=>[c[5]||=o(` 橡皮擦 `,-1)]),_:1},8,[`type`,`disabled`])]),_:1})]),c[11]||=a(`div`,{class:`toolbar-section divider`},null,-1),F.value===`pen`?(p(),i(`div`,ce,[c[6]||=a(`span`,{class:`section-label`},`颜色`,-1),s(y(te),{value:I.color,"onUpdate:value":c[2]||=e=>I.color=e,"show-alpha":!1,disabled:P.value,size:`small`,swatches:y(D)},null,8,[`value`,`disabled`,`swatches`])])):r(`v-if`,!0),F.value===`pen`?(p(),i(`div`,le,[c[7]||=a(`span`,{class:`section-label`},`粗细`,-1),s(y(ne),{value:I.width,"onUpdate:value":c[3]||=e=>I.width=e,min:1,max:20,disabled:P.value,size:`small`,style:{width:`80px`}},null,8,[`value`,`disabled`])])):r(`v-if`,!0),c[12]||=a(`div`,{class:`toolbar-section divider`},null,-1),a(`div`,ue,[s(y(S),{size:`small`,disabled:P.value||!y(R),onClick:K},{icon:x(()=>[s(e,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:x(()=>[c[8]||=o(` 撤销 `,-1)]),_:1},8,[`disabled`]),s(y(S),{size:`small`,disabled:P.value||!y(z),onClick:q},{icon:x(()=>[s(e,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:x(()=>[c[9]||=o(` 重做 `,-1)]),_:1},8,[`disabled`])]),c[13]||=a(`div`,{class:`toolbar-section divider`},null,-1),a(`div`,O,[s(y(S),{size:`small`,type:`error`,disabled:P.value||U.value,onClick:J},{icon:x(()=>[s(e,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:x(()=>[c[10]||=o(` 清空 `,-1)]),_:1},8,[`disabled`])])])):r(`v-if`,!0),a(`div`,{ref_key:`canvasWrapperRef`,ref:j,class:l([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:u({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[a(`canvas`,{ref_key:`canvasRef`,ref:A,class:l([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),U.value&&!t.disabled&&!t.readonly?(p(),i(`div`,de,` 请在此处签名 `)):r(`v-if`,!0)],6)]))}}),[[`__scopeId`,`data-v-99dc336d`]]);export{C as i,E as n,T as r,k as t};
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onMounted as d,onUnmounted as f,openBlock as p,reactive as m,readonly as h,ref as g,shallowRef as _,toRef as v,unref as y,watch as b,withCtx as x}from"vue";import{NButton as S,NButtonGroup as ee,NColorPicker as te,NInputNumber as ne}from"naive-ui";function C(e){let{canvasRef:t,penConfig:n,mode:r,disabled:i,backgroundImage:a,importedImage:o,onStrokeComplete:s,onDrawStart:c,onDrawing:l}=e,u=g(!1),d=g([]),f=null,p=()=>{let e=t.value;if(!e||(f=e.getContext(`2d`,{willReadFrequently:!0}),!f))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,f.scale(n,n),f.lineCap=`round`,f.lineJoin=`round`},m=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},_=(e,t,n,r=!1)=>{f&&(f.save(),r?(f.globalCompositeOperation=`destination-out`,f.lineWidth=20):(f.globalCompositeOperation=`source-over`,f.strokeStyle=n.color,f.lineWidth=n.width,f.globalAlpha=n.opacity),f.beginPath(),f.moveTo(e.x,e.y),f.lineTo(t.x,t.y),f.stroke(),f.restore())},v=e=>{if(i.value)return;e.preventDefault(),u.value=!0,d.value=[];let t=m(e);d.value.push(t),c()},y=e=>{if(!u.value||i.value)return;e.preventDefault();let t=m(e),a=d.value[d.value.length-1];a&&_(a,t,n.value,r.value===`eraser`),d.value.push(t),l(t)},b=e=>{!u.value||i.value||(e.preventDefault(),u.value=!1,d.value.length>0&&(s({points:[...d.value],color:n.value.color,width:n.value.width,opacity:n.value.opacity,mode:r.value}),d.value=[]))};return{isDrawing:h(u),initCanvas:p,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,v),e.addEventListener(`mousemove`,y),e.addEventListener(`mouseup`,b),e.addEventListener(`mouseleave`,b),e.addEventListener(`touchstart`,v,{passive:!1}),e.addEventListener(`touchmove`,y,{passive:!1}),e.addEventListener(`touchend`,b),e.addEventListener(`touchcancel`,b))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,v),e.removeEventListener(`mousemove`,y),e.removeEventListener(`mouseup`,b),e.removeEventListener(`mouseleave`,b),e.removeEventListener(`touchstart`,v),e.removeEventListener(`touchmove`,y),e.removeEventListener(`touchend`,b),e.removeEventListener(`touchcancel`,b))},redrawStrokes:e=>{if(!f||!t.value)return;let n=t.value,{width:r,height:i}=n.getBoundingClientRect();f.clearRect(0,0,n.width,n.height),a?.value&&f.drawImage(a.value,0,0,r,i),o?.value&&f.drawImage(o.value,0,0,r,i),e.forEach(e=>{for(let t=1;t<e.points.length;t++)_(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!f||!t.value||f.clearRect(0,0,t.value.width,t.value.height)}}}const w=e=>e.map(e=>({...e,points:e.points.map(e=>({...e}))}));function T(e={}){let{onChange:t}=e,r=Math.max(2,Math.floor(e.maxHistory??50)),i=g([]),a=g([]),o=g(-1),s=n(()=>o.value>0),c=n(()=>o.value<a.value.length-1),l=e=>{i.value.push(w([e])[0]),u()},u=()=>{a.value=a.value.slice(0,o.value+1),a.value.push(w(i.value)),o.value++,a.value.length>r&&(a.value.shift(),o.value--),t?.(w(i.value))},d=()=>s.value?(o.value--,i.value=w(a.value[o.value]),t?.(w(i.value)),!0):!1,f=()=>c.value?(o.value++,i.value=w(a.value[o.value]),t?.(w(i.value)),!0):!1,p=()=>{i.value=[],a.value=[[]],o.value=0,t?.([])},m=e=>{i.value=w(e),a.value=[w(e)],o.value=0,t?.(w(i.value))},_=n(()=>i.value.length===0);return a.value=[[]],o.value=0,{strokes:h(i),canUndo:h(s),canRedo:h(c),isEmpty:h(_),addStroke:l,undo:d,redo:f,clear:p,loadData:m}}function E(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=e=>{let t=e.getContext(`2d`);if(!t)return!0;let{data:n}=t.getImageData(0,0,e.width,e.height);return!n.some(e=>e!==0)},l=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);if(c(n))throw Error(`签名为空,请先签名后再导出`);let{format:r=`png`,quality:i=.92}=e,a=o(n,{...e,includeBackground:e.includeBackground??r===`jpeg`});if(r===`blob`)return s(a,i);if(r===`svg`){let e=a.toDataURL(`image/png`),t=`<svg xmlns="http://www.w3.org/2000/svg" width="${a.width}" height="${a.height}" viewBox="0 0 ${a.width} ${a.height}"><image href="${e}" width="100%" height="100%"/></svg>`;return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}`}let l=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(l,i)};return{exportSignature:l,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await l({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n===`blob`?`png`:n}`,document.body.appendChild(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(t),1e3)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,document.body.appendChild(t),t.click(),t.remove()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const re={color:`#000000`,width:2,opacity:1},ie={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},D=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],ae={class:`c-signature`},oe={key:0,class:`signature-toolbar`},se={class:`toolbar-section`},ce={key:0,class:`toolbar-section`},le={key:1,class:`toolbar-section`},ue={class:`toolbar-section`},O={class:`toolbar-section`},de={key:0,class:`canvas-placeholder`};var k=t(c({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`,`error`],setup(t,{expose:c,emit:h}){let w=t,k=h,A=g(null),j=g(null),M=_(null),N=_(null),P=n(()=>w.disabled||w.readonly),F=g(`pen`),I=m({...re,...w.penConfig}),fe=m({...ie,...w.watermark}),{strokes:L,canUndo:R,canRedo:z,isEmpty:B,addStroke:V,undo:pe,redo:me,clear:H,loadData:he}=T({maxHistory:w.maxHistory,onChange:e=>{W.redrawStrokes(e),k(`change`,e)}}),U=n(()=>B.value&&!N.value),W=C({canvasRef:A,penConfig:v(I),mode:F,disabled:P,backgroundImage:M,importedImage:N,onStrokeComplete:e=>{V(e),k(`end-draw`,e)},onDrawStart:()=>k(`start-draw`),onDrawing:e=>k(`drawing`,e)}),G=E({canvasRef:A,watermark:v(fe)}),K=()=>{let e=pe();return e&&k(`undo`),e},q=()=>{let e=me();return e&&k(`redo`),e},J=()=>{N.value=null,H(),k(`clear`)},ge=async e=>G.exportSignature(e),_e=async(e,t)=>G.download(e,t);function Y(e){return new Promise((t,n)=>{let r=new Image;r.crossOrigin=`anonymous`,r.onload=()=>t(r),r.onerror=()=>n(Error(`签名图片加载失败`)),r.src=e})}let X=0;async function Z(e){let t=++X;if(!e){M.value=null,W.redrawStrokes(L.value);return}let n=await Y(e);t===X&&(M.value=n,W.redrawStrokes(L.value))}let ve=async e=>{N.value=await Y(e),H()},ye=()=>L.value.map(e=>({...e,points:e.points.map(e=>({...e}))})),be=e=>{N.value=null,he(e)},xe=()=>U.value;d(()=>{W.initCanvas(),W.bindEvents(),typeof ResizeObserver<`u`&&j.value&&(Q=new ResizeObserver(()=>{W.initCanvas(),W.redrawStrokes(L.value)}),Q.observe(j.value)),Z(w.backgroundImage).catch($)});let Q=null;function $(e){k(`error`,e instanceof Error?e:Error(String(e)))}return b(()=>w.backgroundImage,e=>{Z(e).catch($)}),f(()=>{X++,Q?.disconnect(),W.unbindEvents()}),c({clear:J,undo:K,redo:q,export:ge,download:_e,loadImage:ve,getSignatureData:ye,loadSignatureData:be,isEmpty:xe}),(n,c)=>(p(),i(`div`,ae,[t.showToolbar?(p(),i(`div`,oe,[a(`div`,se,[s(y(ee),null,{default:x(()=>[s(y(S),{type:F.value===`pen`?`primary`:`default`,size:`small`,disabled:P.value,onClick:c[0]||=e=>F.value=`pen`},{icon:x(()=>[s(e,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:x(()=>[c[4]||=o(` 画笔 `,-1)]),_:1},8,[`type`,`disabled`]),s(y(S),{type:F.value===`eraser`?`primary`:`default`,size:`small`,disabled:P.value,onClick:c[1]||=e=>F.value=`eraser`},{icon:x(()=>[s(e,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:x(()=>[c[5]||=o(` 橡皮擦 `,-1)]),_:1},8,[`type`,`disabled`])]),_:1})]),c[11]||=a(`div`,{class:`toolbar-section divider`},null,-1),F.value===`pen`?(p(),i(`div`,ce,[c[6]||=a(`span`,{class:`section-label`},`颜色`,-1),s(y(te),{value:I.color,"onUpdate:value":c[2]||=e=>I.color=e,"show-alpha":!1,disabled:P.value,size:`small`,swatches:y(D)},null,8,[`value`,`disabled`,`swatches`])])):r(`v-if`,!0),F.value===`pen`?(p(),i(`div`,le,[c[7]||=a(`span`,{class:`section-label`},`粗细`,-1),s(y(ne),{value:I.width,"onUpdate:value":c[3]||=e=>I.width=e,min:1,max:20,disabled:P.value,size:`small`,style:{width:`80px`}},null,8,[`value`,`disabled`])])):r(`v-if`,!0),c[12]||=a(`div`,{class:`toolbar-section divider`},null,-1),a(`div`,ue,[s(y(S),{size:`small`,disabled:P.value||!y(R),onClick:K},{icon:x(()=>[s(e,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:x(()=>[c[8]||=o(` 撤销 `,-1)]),_:1},8,[`disabled`]),s(y(S),{size:`small`,disabled:P.value||!y(z),onClick:q},{icon:x(()=>[s(e,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:x(()=>[c[9]||=o(` 重做 `,-1)]),_:1},8,[`disabled`])]),c[13]||=a(`div`,{class:`toolbar-section divider`},null,-1),a(`div`,O,[s(y(S),{size:`small`,type:`error`,disabled:P.value||U.value,onClick:J},{icon:x(()=>[s(e,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:x(()=>[c[10]||=o(` 清空 `,-1)]),_:1},8,[`disabled`])])])):r(`v-if`,!0),a(`div`,{ref_key:`canvasWrapperRef`,ref:j,class:l([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:u({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[a(`canvas`,{ref_key:`canvasRef`,ref:A,class:l([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),U.value&&!t.disabled&&!t.readonly?(p(),i(`div`,de,` 请在此处签名 `)):r(`v-if`,!0)],6)]))}}),[[`__scopeId`,`data-v-66ce1727`]]);export{C as i,E as n,T as r,k as t};
|
package/dist/C_Skeleton.css
CHANGED
package/dist/C_Skeleton2.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);let e=require(`vue`);const t={key:0,class:`c-skeleton__card-cover c-skeleton__item`},n={class:`c-skeleton__card-body`},r={class:`c-skeleton__card-desc`},i={key:1,class:`c-skeleton__card-footer`},a={class:`c-skeleton__table`},o={key:0,class:`c-skeleton__table-header`},s={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},c={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},l={key:0,class:`c-skeleton__form-actions`},u={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},d={class:`c-skeleton__list-content`},f={class:`c-skeleton__detail`},p={key:0,class:`c-skeleton__detail-header`},m={class:`c-skeleton__detail-body`},h={class:`c-skeleton__detail-value`},g=(0,e.defineComponent)({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(g){let _=g,v=(0,e.computed)(()=>_.animation===!1?`none`:_.animation),y=(e,t)=>Number.isFinite(e)?Math.min(t,Math.max(1,Math.floor(e))):1,b=(0,e.computed)(()=>y(_.repeat,100)),x=(0,e.computed)(()=>({rows:y(_.table?.rows??5,100),cols:y(_.table?.cols??4,20),showHeader:_.table?.showHeader??!0,showActions:_.table?.showActions??!0})),S=(0,e.computed)(()=>({fields:y(_.form?.fields??6,100),cols:y(_.form?.cols??2,12),showLabel:_.form?.showLabel??!0,showActions:_.form?.showActions??!0})),C=(0,e.computed)(()=>({items:y(_.list?.items??5,100),showAvatar:_.list?.showAvatar??!0,descLines:y(_.list?.descLines??2,20)})),w=(0,e.computed)(()=>({showCover:_.card?.showCover??!0,titleLines:y(_.card?.titleLines??1,20),descLines:y(_.card?.descLines??2,20),showFooter:_.card?.showFooter??!0})),T=(0,e.computed)(()=>({fields:y(_.detail?.fields??6,100),valueLines:y(_.detail?.valueLines??1,20),showAvatar:_.detail?.showAvatar??!0}));return(y,E)=>_.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:(0,e.normalizeClass)([`c-skeleton`,[`c-skeleton--${v.value}`]]),style:(0,e.normalizeStyle)({"--c-skeleton-radius":g.borderRadius}),role:`status`,"aria-label":`加载中`},[(0,e.createCommentVNode)(` text 预设 `),g.preset===`text`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(b.value,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t,class:`c-skeleton__text`},[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item`,style:(0,e.normalizeStyle)({width:t===b.value?`60%`:`100%`})},null,4)]))),128)):g.preset===`avatar`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:1},[(0,e.createCommentVNode)(` avatar 预设 `),E[0]||=(0,e.createStaticVNode)(`<div class="c-skeleton__avatar-group"><div class="c-skeleton__circle c-skeleton__item"></div><div class="c-skeleton__avatar-text"><div class="c-skeleton__line c-skeleton__item" style="width:40%;"></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;"></div></div></div>`,1)],64)):g.preset===`image`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:2},[(0,e.createCommentVNode)(` image 预设 `),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(b.value,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t,class:`c-skeleton__image c-skeleton__item`},[...E[1]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__image-icon`},[(0,e.createElementVNode)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[(0,e.createElementVNode)(`path`,{d:`M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z`})])],-1)]]))),128))],64)):g.preset===`card`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:3},[(0,e.createCommentVNode)(` card 预设 `),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(b.value,a=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:a,class:`c-skeleton__card`},[w.value.showCover?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t)):(0,e.createCommentVNode)(`v-if`,!0),(0,e.createElementVNode)(`div`,n,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(w.value.titleLines,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`t-${t}`,class:`c-skeleton__line c-skeleton__item`,style:(0,e.normalizeStyle)({width:t===w.value.titleLines?`50%`:`80%`})},null,4))),128)),(0,e.createElementVNode)(`div`,r,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(w.value.descLines,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`d-${t}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,e.normalizeStyle)({width:t===w.value.descLines?`70%`:`100%`})},null,4))),128))])]),w.value.showFooter?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,i,[...E[2]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)]])):(0,e.createCommentVNode)(`v-if`,!0)]))),128))],64)):g.preset===`table`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:4},[(0,e.createCommentVNode)(` table 预设 `),(0,e.createElementVNode)(`div`,a,[x.value.showHeader?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,o,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(x.value.cols,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`h-${t}`,class:`c-skeleton__table-cell`},[...E[3]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]]))),128)),x.value.showActions?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,s,[...E[4]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)]])):(0,e.createCommentVNode)(`v-if`,!0)])):(0,e.createCommentVNode)(`v-if`,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(x.value.rows,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`r-${t}`,class:`c-skeleton__table-row`},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(x.value.cols,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`c-${n}`,class:`c-skeleton__table-cell`},[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,e.normalizeStyle)({width:`${Math.floor(50+t*n*17%50)}%`})},null,4)]))),128)),x.value.showActions?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,c,[...E[5]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__action-btns`},[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)]])):(0,e.createCommentVNode)(`v-if`,!0)]))),128))])],64)):g.preset===`form`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:5},[(0,e.createCommentVNode)(` form 预设 `),(0,e.createElementVNode)(`div`,{class:`c-skeleton__form`,style:(0,e.normalizeStyle)({"--form-cols":S.value.cols})},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(S.value.fields,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t,class:`c-skeleton__form-field`},[S.value.showLabel?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:(0,e.normalizeStyle)({width:`${60+t*13%30}px`})},null,4)):(0,e.createCommentVNode)(`v-if`,!0),E[6]||=(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),S.value.showActions?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,l,[...E[7]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)]])):(0,e.createCommentVNode)(`v-if`,!0)],4)],64)):g.preset===`list`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:6},[(0,e.createCommentVNode)(` list 预设 `),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(C.value.items,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t,class:`c-skeleton__list-item`},[C.value.showAvatar?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,u)):(0,e.createCommentVNode)(`v-if`,!0),(0,e.createElementVNode)(`div`,d,[E[8]||=(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(C.value.descLines,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`d-${t}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,e.normalizeStyle)({width:t===C.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):g.preset===`detail`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:7},[(0,e.createCommentVNode)(` detail 预设 `),(0,e.createElementVNode)(`div`,f,[T.value.showAvatar?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,p,[...E[9]||=[(0,e.createElementVNode)(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),(0,e.createElementVNode)(`div`,{class:`c-skeleton__detail-title`},[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)]])):(0,e.createCommentVNode)(`v-if`,!0),(0,e.createElementVNode)(`div`,m,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(T.value.fields,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t,class:`c-skeleton__detail-field`},[(0,e.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:(0,e.normalizeStyle)({width:`${50+t*17%40}px`})},null,4),(0,e.createElementVNode)(`div`,h,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(T.value.valueLines,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:`v-${t}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,e.normalizeStyle)({width:t===T.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):(0,e.createCommentVNode)(`v-if`,!0)],6)):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:1},[(0,e.createCommentVNode)(` 加载完成后显示插槽内容 `),(0,e.renderSlot)(y.$slots,`default`)],2112))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`);const n={key:0,class:`c-skeleton__card-cover c-skeleton__item`},r={class:`c-skeleton__card-body`},i={class:`c-skeleton__card-desc`},a={key:1,class:`c-skeleton__card-footer`},o={class:`c-skeleton__table`},s={key:0,class:`c-skeleton__table-header`},c={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},l={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},u={key:0,class:`c-skeleton__form-actions`},d={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},f={class:`c-skeleton__list-content`},p={class:`c-skeleton__detail`},m={key:0,class:`c-skeleton__detail-header`},h={class:`c-skeleton__detail-body`},g={class:`c-skeleton__detail-value`},_=(0,t.defineComponent)({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(e){let _=e,v=(0,t.computed)(()=>_.animation===!1?`none`:_.animation),y=(e,t)=>Number.isFinite(e)?Math.min(t,Math.max(1,Math.floor(e))):1,b=(0,t.computed)(()=>y(_.repeat,100)),x=(0,t.computed)(()=>({rows:y(_.table?.rows??5,100),cols:y(_.table?.cols??4,20),showHeader:_.table?.showHeader??!0,showActions:_.table?.showActions??!0})),S=(0,t.computed)(()=>({fields:y(_.form?.fields??6,100),cols:y(_.form?.cols??2,12),showLabel:_.form?.showLabel??!0,showActions:_.form?.showActions??!0})),C=(0,t.computed)(()=>({items:y(_.list?.items??5,100),showAvatar:_.list?.showAvatar??!0,descLines:y(_.list?.descLines??2,20)})),w=(0,t.computed)(()=>({showCover:_.card?.showCover??!0,titleLines:y(_.card?.titleLines??1,20),descLines:y(_.card?.descLines??2,20),showFooter:_.card?.showFooter??!0})),T=(0,t.computed)(()=>({fields:y(_.detail?.fields??6,100),valueLines:y(_.detail?.valueLines??1,20),showAvatar:_.detail?.showAvatar??!0}));return(y,E)=>_.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`c-skeleton`,[`c-skeleton--${v.value}`]]),style:(0,t.normalizeStyle)({"--c-skeleton-radius":e.borderRadius}),role:`status`,"aria-label":`加载中`},[(0,t.createCommentVNode)(` text 预设 `),e.preset===`text`?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(b.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e,class:`c-skeleton__text`},[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item`,style:(0,t.normalizeStyle)({width:e===b.value?`60%`:`100%`})},null,4)]))),128)):e.preset===`avatar`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createCommentVNode)(` avatar 预设 `),E[0]||=(0,t.createStaticVNode)(`<div class="c-skeleton__avatar-group" data-v-02f4cea3><div class="c-skeleton__circle c-skeleton__item" data-v-02f4cea3></div><div class="c-skeleton__avatar-text" data-v-02f4cea3><div class="c-skeleton__line c-skeleton__item" style="width:40%;" data-v-02f4cea3></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;" data-v-02f4cea3></div></div></div>`,1)],64)):e.preset===`image`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:2},[(0,t.createCommentVNode)(` image 预设 `),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(b.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e,class:`c-skeleton__image c-skeleton__item`},[...E[1]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__image-icon`},[(0,t.createElementVNode)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[(0,t.createElementVNode)(`path`,{d:`M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z`})])],-1)]]))),128))],64)):e.preset===`card`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:3},[(0,t.createCommentVNode)(` card 预设 `),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(b.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e,class:`c-skeleton__card`},[w.value.showCover?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n)):(0,t.createCommentVNode)(`v-if`,!0),(0,t.createElementVNode)(`div`,r,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(w.value.titleLines,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`t-${e}`,class:`c-skeleton__line c-skeleton__item`,style:(0,t.normalizeStyle)({width:e===w.value.titleLines?`50%`:`80%`})},null,4))),128)),(0,t.createElementVNode)(`div`,i,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(w.value.descLines,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,t.normalizeStyle)({width:e===w.value.descLines?`70%`:`100%`})},null,4))),128))])]),w.value.showFooter?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,a,[...E[2]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)]])):(0,t.createCommentVNode)(`v-if`,!0)]))),128))],64)):e.preset===`table`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:4},[(0,t.createCommentVNode)(` table 预设 `),(0,t.createElementVNode)(`div`,o,[x.value.showHeader?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,s,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(x.value.cols,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`h-${e}`,class:`c-skeleton__table-cell`},[...E[3]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]]))),128)),x.value.showActions?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,c,[...E[4]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)]])):(0,t.createCommentVNode)(`v-if`,!0)])):(0,t.createCommentVNode)(`v-if`,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(x.value.rows,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`r-${e}`,class:`c-skeleton__table-row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(x.value.cols,n=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`c-${n}`,class:`c-skeleton__table-cell`},[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,t.normalizeStyle)({width:`${Math.floor(50+e*n*17%50)}%`})},null,4)]))),128)),x.value.showActions?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,l,[...E[5]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__action-btns`},[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)]])):(0,t.createCommentVNode)(`v-if`,!0)]))),128))])],64)):e.preset===`form`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:5},[(0,t.createCommentVNode)(` form 预设 `),(0,t.createElementVNode)(`div`,{class:`c-skeleton__form`,style:(0,t.normalizeStyle)({"--form-cols":S.value.cols})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(S.value.fields,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e,class:`c-skeleton__form-field`},[S.value.showLabel?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:(0,t.normalizeStyle)({width:`${60+e*13%30}px`})},null,4)):(0,t.createCommentVNode)(`v-if`,!0),E[6]||=(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),S.value.showActions?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,u,[...E[7]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)]])):(0,t.createCommentVNode)(`v-if`,!0)],4)],64)):e.preset===`list`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:6},[(0,t.createCommentVNode)(` list 预设 `),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(C.value.items,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e,class:`c-skeleton__list-item`},[C.value.showAvatar?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,d)):(0,t.createCommentVNode)(`v-if`,!0),(0,t.createElementVNode)(`div`,f,[E[8]||=(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(C.value.descLines,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,t.normalizeStyle)({width:e===C.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):e.preset===`detail`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:7},[(0,t.createCommentVNode)(` detail 预设 `),(0,t.createElementVNode)(`div`,p,[T.value.showAvatar?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m,[...E[9]||=[(0,t.createElementVNode)(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),(0,t.createElementVNode)(`div`,{class:`c-skeleton__detail-title`},[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)]])):(0,t.createCommentVNode)(`v-if`,!0),(0,t.createElementVNode)(`div`,h,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(T.value.fields,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e,class:`c-skeleton__detail-field`},[(0,t.createElementVNode)(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:(0,t.normalizeStyle)({width:`${50+e*17%40}px`})},null,4),(0,t.createElementVNode)(`div`,g,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(T.value.valueLines,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`v-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:(0,t.normalizeStyle)({width:e===T.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):(0,t.createCommentVNode)(`v-if`,!0)],6)):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createCommentVNode)(` 加载完成后显示插槽内容 `),(0,t.renderSlot)(y.$slots,`default`,{},void 0,!0)],2112))}});var v=e.t(_,[[`__scopeId`,`data-v-02f4cea3`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return v}});
|
package/dist/C_Skeleton2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createStaticVNode as o,defineComponent as s,normalizeClass as c,normalizeStyle as l,openBlock as u,renderList as d,renderSlot as f}from"vue";const p={key:0,class:`c-skeleton__card-cover c-skeleton__item`},m={class:`c-skeleton__card-body`},h={class:`c-skeleton__card-desc`},g={key:1,class:`c-skeleton__card-footer`},_={class:`c-skeleton__table`},v={key:0,class:`c-skeleton__table-header`},y={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},b={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},x={key:0,class:`c-skeleton__form-actions`},S={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},C={class:`c-skeleton__list-content`},w={class:`c-skeleton__detail`},T={key:0,class:`c-skeleton__detail-header`},E={class:`c-skeleton__detail-body`},D={class:`c-skeleton__detail-value`};var O=e(s({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(e){let s=e,O=n(()=>s.animation===!1?`none`:s.animation),k=(e,t)=>Number.isFinite(e)?Math.min(t,Math.max(1,Math.floor(e))):1,A=n(()=>k(s.repeat,100)),j=n(()=>({rows:k(s.table?.rows??5,100),cols:k(s.table?.cols??4,20),showHeader:s.table?.showHeader??!0,showActions:s.table?.showActions??!0})),M=n(()=>({fields:k(s.form?.fields??6,100),cols:k(s.form?.cols??2,12),showLabel:s.form?.showLabel??!0,showActions:s.form?.showActions??!0})),N=n(()=>({items:k(s.list?.items??5,100),showAvatar:s.list?.showAvatar??!0,descLines:k(s.list?.descLines??2,20)})),P=n(()=>({showCover:s.card?.showCover??!0,titleLines:k(s.card?.titleLines??1,20),descLines:k(s.card?.descLines??2,20),showFooter:s.card?.showFooter??!0})),F=n(()=>({fields:k(s.detail?.fields??6,100),valueLines:k(s.detail?.valueLines??1,20),showAvatar:s.detail?.showAvatar??!0}));return(n,k)=>s.loading?(u(),i(`div`,{key:0,class:c([`c-skeleton`,[`c-skeleton--${O.value}`]]),style:l({"--c-skeleton-radius":e.borderRadius}),role:`status`,"aria-label":`加载中`},[r(` text 预设 `),e.preset===`text`?(u(!0),i(t,{key:0},d(A.value,e=>(u(),i(`div`,{key:e,class:`c-skeleton__text`},[a(`div`,{class:`c-skeleton__line c-skeleton__item`,style:l({width:e===A.value?`60%`:`100%`})},null,4)]))),128)):e.preset===`avatar`?(u(),i(t,{key:1},[r(` avatar 预设 `),k[0]||=o(`<div class="c-skeleton__avatar-group" data-v-02f4cea3><div class="c-skeleton__circle c-skeleton__item" data-v-02f4cea3></div><div class="c-skeleton__avatar-text" data-v-02f4cea3><div class="c-skeleton__line c-skeleton__item" style="width:40%;" data-v-02f4cea3></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;" data-v-02f4cea3></div></div></div>`,1)],64)):e.preset===`image`?(u(),i(t,{key:2},[r(` image 预设 `),(u(!0),i(t,null,d(A.value,e=>(u(),i(`div`,{key:e,class:`c-skeleton__image c-skeleton__item`},[...k[1]||=[a(`div`,{class:`c-skeleton__image-icon`},[a(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[a(`path`,{d:`M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z`})])],-1)]]))),128))],64)):e.preset===`card`?(u(),i(t,{key:3},[r(` card 预设 `),(u(!0),i(t,null,d(A.value,e=>(u(),i(`div`,{key:e,class:`c-skeleton__card`},[P.value.showCover?(u(),i(`div`,p)):r(`v-if`,!0),a(`div`,m,[(u(!0),i(t,null,d(P.value.titleLines,e=>(u(),i(`div`,{key:`t-${e}`,class:`c-skeleton__line c-skeleton__item`,style:l({width:e===P.value.titleLines?`50%`:`80%`})},null,4))),128)),a(`div`,h,[(u(!0),i(t,null,d(P.value.descLines,e=>(u(),i(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:l({width:e===P.value.descLines?`70%`:`100%`})},null,4))),128))])]),P.value.showFooter?(u(),i(`div`,g,[...k[2]||=[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)]])):r(`v-if`,!0)]))),128))],64)):e.preset===`table`?(u(),i(t,{key:4},[r(` table 预设 `),a(`div`,_,[j.value.showHeader?(u(),i(`div`,v,[(u(!0),i(t,null,d(j.value.cols,e=>(u(),i(`div`,{key:`h-${e}`,class:`c-skeleton__table-cell`},[...k[3]||=[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]]))),128)),j.value.showActions?(u(),i(`div`,y,[...k[4]||=[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)]])):r(`v-if`,!0)])):r(`v-if`,!0),(u(!0),i(t,null,d(j.value.rows,e=>(u(),i(`div`,{key:`r-${e}`,class:`c-skeleton__table-row`},[(u(!0),i(t,null,d(j.value.cols,t=>(u(),i(`div`,{key:`c-${t}`,class:`c-skeleton__table-cell`},[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:l({width:`${Math.floor(50+e*t*17%50)}%`})},null,4)]))),128)),j.value.showActions?(u(),i(`div`,b,[...k[5]||=[a(`div`,{class:`c-skeleton__action-btns`},[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)]])):r(`v-if`,!0)]))),128))])],64)):e.preset===`form`?(u(),i(t,{key:5},[r(` form 预设 `),a(`div`,{class:`c-skeleton__form`,style:l({"--form-cols":M.value.cols})},[(u(!0),i(t,null,d(M.value.fields,e=>(u(),i(`div`,{key:e,class:`c-skeleton__form-field`},[M.value.showLabel?(u(),i(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:l({width:`${60+e*13%30}px`})},null,4)):r(`v-if`,!0),k[6]||=a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),M.value.showActions?(u(),i(`div`,x,[...k[7]||=[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)]])):r(`v-if`,!0)],4)],64)):e.preset===`list`?(u(),i(t,{key:6},[r(` list 预设 `),(u(!0),i(t,null,d(N.value.items,e=>(u(),i(`div`,{key:e,class:`c-skeleton__list-item`},[N.value.showAvatar?(u(),i(`div`,S)):r(`v-if`,!0),a(`div`,C,[k[8]||=a(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),(u(!0),i(t,null,d(N.value.descLines,e=>(u(),i(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:l({width:e===N.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):e.preset===`detail`?(u(),i(t,{key:7},[r(` detail 预设 `),a(`div`,w,[F.value.showAvatar?(u(),i(`div`,T,[...k[9]||=[a(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),a(`div`,{class:`c-skeleton__detail-title`},[a(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)]])):r(`v-if`,!0),a(`div`,E,[(u(!0),i(t,null,d(F.value.fields,e=>(u(),i(`div`,{key:e,class:`c-skeleton__detail-field`},[a(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:l({width:`${50+e*17%40}px`})},null,4),a(`div`,D,[(u(!0),i(t,null,d(F.value.valueLines,e=>(u(),i(`div`,{key:`v-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:l({width:e===F.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):r(`v-if`,!0)],6)):(u(),i(t,{key:1},[r(` 加载完成后显示插槽内容 `),f(n.$slots,`default`,{},void 0,!0)],2112))}}),[[`__scopeId`,`data-v-02f4cea3`]]);export{O as t};
|
package/dist/C_SplitPane.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* unplugin-vue-components disabled *//* 分割面板组件样式 */
|
|
2
|
-
.c-split-pane[data-v-
|
|
2
|
+
.c-split-pane[data-v-99f7e295] {
|
|
3
3
|
display: flex;
|
|
4
4
|
width: 100%;
|
|
5
5
|
height: 100%;
|
|
@@ -7,49 +7,49 @@
|
|
|
7
7
|
position: relative;
|
|
8
8
|
/* ─── 方向 ────────────────────────────────── */
|
|
9
9
|
}
|
|
10
|
-
.c-split-pane--horizontal[data-v-
|
|
10
|
+
.c-split-pane--horizontal[data-v-99f7e295] {
|
|
11
11
|
flex-direction: row;
|
|
12
12
|
}
|
|
13
|
-
.c-split-pane--vertical[data-v-
|
|
13
|
+
.c-split-pane--vertical[data-v-99f7e295] {
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
}
|
|
16
|
-
.c-split-pane[data-v-
|
|
16
|
+
.c-split-pane[data-v-99f7e295] {
|
|
17
17
|
/* ─── 拖拽中 ──────────────────────────────── */
|
|
18
18
|
}
|
|
19
|
-
.c-split-pane--dragging .split-panel__content[data-v-
|
|
19
|
+
.c-split-pane--dragging .split-panel__content[data-v-99f7e295] {
|
|
20
20
|
pointer-events: none;
|
|
21
21
|
user-select: none;
|
|
22
22
|
}
|
|
23
|
-
.c-split-pane[data-v-
|
|
23
|
+
.c-split-pane[data-v-99f7e295] {
|
|
24
24
|
/* ─── 禁用 ────────────────────────────────── */
|
|
25
25
|
}
|
|
26
|
-
.c-split-pane--disabled .split-gutter[data-v-
|
|
26
|
+
.c-split-pane--disabled .split-gutter[data-v-99f7e295] {
|
|
27
27
|
cursor: default !important;
|
|
28
28
|
opacity: 0.5;
|
|
29
29
|
}
|
|
30
|
-
.c-split-pane--disabled .split-gutter[data-v-
|
|
30
|
+
.c-split-pane--disabled .split-gutter[data-v-99f7e295]:hover {
|
|
31
31
|
background: transparent;
|
|
32
32
|
}
|
|
33
|
-
.c-split-pane[data-v-
|
|
33
|
+
.c-split-pane[data-v-99f7e295] {
|
|
34
34
|
/* ─── 折叠过渡 ────────────────────────────── */
|
|
35
35
|
}
|
|
36
|
-
.c-split-pane--collapsed-first .split-panel[data-v-
|
|
36
|
+
.c-split-pane--collapsed-first .split-panel[data-v-99f7e295], .c-split-pane--collapsed-second .split-panel[data-v-99f7e295] {
|
|
37
37
|
transition: width 0.3s ease, height 0.3s ease;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
/* ─── 面板 ──────────────────────────────────── */
|
|
41
|
-
.split-panel[data-v-
|
|
41
|
+
.split-panel[data-v-99f7e295] {
|
|
42
42
|
overflow: hidden;
|
|
43
43
|
position: relative;
|
|
44
44
|
}
|
|
45
|
-
.split-panel__content[data-v-
|
|
45
|
+
.split-panel__content[data-v-99f7e295] {
|
|
46
46
|
width: 100%;
|
|
47
47
|
height: 100%;
|
|
48
48
|
overflow: auto;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
/* ─── 分割线手柄 ────────────────────────────── */
|
|
52
|
-
.split-gutter[data-v-
|
|
52
|
+
.split-gutter[data-v-99f7e295] {
|
|
53
53
|
position: relative;
|
|
54
54
|
display: flex;
|
|
55
55
|
align-items: center;
|
|
@@ -61,61 +61,61 @@
|
|
|
61
61
|
outline: none;
|
|
62
62
|
/* 水平方向 */
|
|
63
63
|
}
|
|
64
|
-
.c-split-pane--horizontal .split-gutter[data-v-
|
|
64
|
+
.c-split-pane--horizontal .split-gutter[data-v-99f7e295] {
|
|
65
65
|
cursor: col-resize;
|
|
66
66
|
min-width: 4px;
|
|
67
67
|
}
|
|
68
|
-
.c-split-pane--horizontal .split-gutter[data-v-
|
|
68
|
+
.c-split-pane--horizontal .split-gutter[data-v-99f7e295]:hover, .c-split-pane--horizontal .split-gutter[data-v-99f7e295]:focus-visible {
|
|
69
69
|
background: var(--c-primary, #409eff);
|
|
70
70
|
}
|
|
71
|
-
.split-gutter[data-v-
|
|
71
|
+
.split-gutter[data-v-99f7e295] {
|
|
72
72
|
/* 垂直方向 */
|
|
73
73
|
}
|
|
74
|
-
.c-split-pane--vertical .split-gutter[data-v-
|
|
74
|
+
.c-split-pane--vertical .split-gutter[data-v-99f7e295] {
|
|
75
75
|
cursor: row-resize;
|
|
76
76
|
min-height: 4px;
|
|
77
77
|
}
|
|
78
|
-
.c-split-pane--vertical .split-gutter[data-v-
|
|
78
|
+
.c-split-pane--vertical .split-gutter[data-v-99f7e295]:hover, .c-split-pane--vertical .split-gutter[data-v-99f7e295]:focus-visible {
|
|
79
79
|
background: var(--c-primary, #409eff);
|
|
80
80
|
}
|
|
81
|
-
.split-gutter[data-v-
|
|
81
|
+
.split-gutter[data-v-99f7e295] {
|
|
82
82
|
/* focus 轮廓 */
|
|
83
83
|
}
|
|
84
|
-
.split-gutter[data-v-
|
|
84
|
+
.split-gutter[data-v-99f7e295]:focus-visible {
|
|
85
85
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
|
|
86
86
|
}
|
|
87
|
-
.split-gutter[data-v-
|
|
87
|
+
.split-gutter[data-v-99f7e295] {
|
|
88
88
|
/* ─── 视觉指示条 ──────────────────────────── */
|
|
89
89
|
}
|
|
90
|
-
.split-gutter__visual[data-v-
|
|
90
|
+
.split-gutter__visual[data-v-99f7e295] {
|
|
91
91
|
display: flex;
|
|
92
92
|
align-items: center;
|
|
93
93
|
justify-content: center;
|
|
94
94
|
}
|
|
95
|
-
.split-gutter__dots[data-v-
|
|
95
|
+
.split-gutter__dots[data-v-99f7e295] {
|
|
96
96
|
display: flex;
|
|
97
97
|
gap: 2px;
|
|
98
98
|
}
|
|
99
|
-
.c-split-pane--horizontal .split-gutter__dots[data-v-
|
|
99
|
+
.c-split-pane--horizontal .split-gutter__dots[data-v-99f7e295] {
|
|
100
100
|
flex-direction: column;
|
|
101
101
|
}
|
|
102
|
-
.c-split-pane--vertical .split-gutter__dots[data-v-
|
|
102
|
+
.c-split-pane--vertical .split-gutter__dots[data-v-99f7e295] {
|
|
103
103
|
flex-direction: row;
|
|
104
104
|
}
|
|
105
|
-
.split-gutter__dot[data-v-
|
|
105
|
+
.split-gutter__dot[data-v-99f7e295] {
|
|
106
106
|
width: 3px;
|
|
107
107
|
height: 3px;
|
|
108
108
|
border-radius: 50%;
|
|
109
109
|
background: var(--c-text-4, #ccc);
|
|
110
110
|
transition: background-color 0.2s ease;
|
|
111
111
|
}
|
|
112
|
-
.split-gutter:hover .split-gutter__dot[data-v-
|
|
112
|
+
.split-gutter:hover .split-gutter__dot[data-v-99f7e295] {
|
|
113
113
|
background: #fff;
|
|
114
114
|
}
|
|
115
|
-
.split-gutter[data-v-
|
|
115
|
+
.split-gutter[data-v-99f7e295] {
|
|
116
116
|
/* ─── 折叠按钮 ────────────────────────────── */
|
|
117
117
|
}
|
|
118
|
-
.split-gutter__collapse-btn[data-v-
|
|
118
|
+
.split-gutter__collapse-btn[data-v-99f7e295] {
|
|
119
119
|
position: absolute;
|
|
120
120
|
display: flex;
|
|
121
121
|
align-items: center;
|
|
@@ -133,36 +133,58 @@
|
|
|
133
133
|
transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
|
|
134
134
|
z-index: 2;
|
|
135
135
|
}
|
|
136
|
-
.split-gutter:hover .split-gutter__collapse-btn[data-v-
|
|
136
|
+
.split-gutter:hover .split-gutter__collapse-btn[data-v-99f7e295] {
|
|
137
137
|
opacity: 1;
|
|
138
138
|
}
|
|
139
|
-
.split-gutter__collapse-btn[data-v-
|
|
139
|
+
.split-gutter__collapse-btn[data-v-99f7e295]:hover {
|
|
140
140
|
color: var(--c-primary, #409eff);
|
|
141
141
|
background: var(--c-bg, #fff);
|
|
142
142
|
}
|
|
143
|
-
.split-gutter__collapse-btn[data-v-
|
|
143
|
+
.split-gutter__collapse-btn[data-v-99f7e295] {
|
|
144
144
|
/* 水平方向的定位 */
|
|
145
145
|
}
|
|
146
|
-
.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-
|
|
146
|
+
.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-99f7e295] {
|
|
147
147
|
left: 50%;
|
|
148
148
|
transform: translateX(-50%);
|
|
149
149
|
}
|
|
150
|
-
.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-
|
|
150
|
+
.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-99f7e295] {
|
|
151
151
|
top: 8px;
|
|
152
152
|
}
|
|
153
|
-
.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-
|
|
153
|
+
.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-99f7e295] {
|
|
154
154
|
bottom: 8px;
|
|
155
155
|
}
|
|
156
|
-
.split-gutter__collapse-btn[data-v-
|
|
156
|
+
.split-gutter__collapse-btn[data-v-99f7e295] {
|
|
157
157
|
/* 垂直方向的定位 */
|
|
158
158
|
}
|
|
159
|
-
.c-split-pane--vertical .split-gutter__collapse-btn[data-v-
|
|
159
|
+
.c-split-pane--vertical .split-gutter__collapse-btn[data-v-99f7e295] {
|
|
160
160
|
top: 50%;
|
|
161
161
|
transform: translateY(-50%);
|
|
162
162
|
}
|
|
163
|
-
.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-
|
|
163
|
+
.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-99f7e295] {
|
|
164
164
|
left: 8px;
|
|
165
165
|
}
|
|
166
|
-
.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-
|
|
166
|
+
.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-99f7e295] {
|
|
167
167
|
right: 8px;
|
|
168
168
|
}
|
|
169
|
+
/* unplugin-vue-components disabled */
|
|
170
|
+
/* layer: shortcuts */
|
|
171
|
+
.container[data-v-99f7e295]{width:100%;}
|
|
172
|
+
@media (min-width: 640px){
|
|
173
|
+
.container[data-v-99f7e295]{max-width:640px;}
|
|
174
|
+
}
|
|
175
|
+
@media (min-width: 768px){
|
|
176
|
+
.container[data-v-99f7e295]{max-width:768px;}
|
|
177
|
+
}
|
|
178
|
+
@media (min-width: 1024px){
|
|
179
|
+
.container[data-v-99f7e295]{max-width:1024px;}
|
|
180
|
+
}
|
|
181
|
+
@media (min-width: 1280px){
|
|
182
|
+
.container[data-v-99f7e295]{max-width:1280px;}
|
|
183
|
+
}
|
|
184
|
+
@media (min-width: 1536px){
|
|
185
|
+
.container[data-v-99f7e295]{max-width:1536px;}
|
|
186
|
+
}
|
|
187
|
+
/* layer: default */
|
|
188
|
+
.resize[data-v-99f7e295]{resize:both;}
|
|
189
|
+
.px[data-v-99f7e295]{padding-left:1rem;padding-right:1rem;}
|
|
190
|
+
|
package/dist/C_SplitPane2.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`);function r(e){let{containerRef:t,direction:r,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:d,onExpand:f,onDragStart:p,onDragEnd:m}=e,h=Number.isFinite(a)?a:0,g=Number.isFinite(o)?o:100,_=Math.max(0,Math.min(100,Math.min(h,g))),v=Math.max(0,Math.min(100,Math.max(h,g))),y=Math.min(v,Math.max(_,Number.isFinite(i)?i:50)),b=(0,n.ref)(y),x=(0,n.ref)(!1),S=(0,n.ref)(null),C=(0,n.ref)(y),w=``,T=``,E=(0,n.computed)(()=>S.value===`first`),D=(0,n.computed)(()=>S.value===`second`),O=e=>Number.isFinite(e)?Math.min(v,Math.max(_,e)):b.value,k=()=>{let e=t.value;return e?r.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},A=()=>{let e=t.value;if(!e)return 0;let n=e.getBoundingClientRect();return r.value===`horizontal`?n.left:n.top},j=e=>{let t=k();return t===0?b.value:O((e-A())/t*100)},M=e=>e instanceof TouchEvent?r.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:r.value===`horizontal`?e.clientX:e.clientY,N=e=>{let t=O(e);t!==b.value&&(b.value=t,u?.(t,100-t))},P=e=>{if(!x.value||s.value)return;e.preventDefault();let t=j(M(e));S.value&&=null,N(t)},F=()=>{x.value&&(x.value=!1,document.body.style.cursor=w,document.body.style.userSelect=T,m?.(b.value),document.removeEventListener(`mousemove`,P),document.removeEventListener(`mouseup`,F),document.removeEventListener(`touchmove`,P),document.removeEventListener(`touchend`,F))},I=e=>{s.value||x.value||(e.preventDefault(),e.currentTarget?.focus(),x.value=!0,w=document.body.style.cursor,T=document.body.style.userSelect,document.body.style.cursor=r.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,p?.(b.value),document.addEventListener(`mousemove`,P),document.addEventListener(`mouseup`,F),document.addEventListener(`touchmove`,P,{passive:!1}),document.addEventListener(`touchend`,F))},L=()=>{s.value||!c.value||B(`first`)},R=(e=`first`)=>{!c.value||S.value===e||(S.value||(C.value=b.value),S.value=e,e===`first`?b.value=0:b.value=100,d?.(e),u?.(b.value,100-b.value))},z=()=>{if(!S.value)return;let e=S.value;S.value=null,b.value=O(C.value),f?.(e),u?.(b.value,100-b.value)},B=(e=`first`)=>{S.value===e?z():R(e)},V=(e,t)=>{let n=Number.isFinite(l)&&l>0?l:2;return{ArrowLeft:t?-n:0,ArrowRight:t?n:0,ArrowUp:t?0:-n,ArrowDown:t?0:n}[e]??null};return(0,n.onUnmounted)(()=>{x.value&&=(document.body.style.cursor=w,document.body.style.userSelect=T,!1),document.removeEventListener(`mousemove`,P),document.removeEventListener(`mouseup`,F),document.removeEventListener(`touchmove`,P),document.removeEventListener(`touchend`,F)}),{panelSize:b,isDragging:x,collapsedTarget:S,isFirstCollapsed:E,isSecondCollapsed:D,handleMouseDown:I,handleDoubleClick:L,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){N(_),e.preventDefault();return}if(e.key===`End`){N(v),e.preventDefault();return}let t=V(e.key,r.value===`horizontal`);t===null||t===0||(e.preventDefault(),S.value&&=null,N(b.value+t))},collapse:R,expand:z,toggle:B,resetSize:()=>{S.value=null,b.value=y,u?.(y,100-y)},setSize:e=>{S.value=null,N(e)},getPanelInfo:()=>({first:{size:b.value,collapsed:E.value},second:{size:100-b.value,collapsed:D.value}})}}const i={class:`split-panel__content`},a=[`aria-orientation`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`,`aria-disabled`,`tabindex`],o={class:`split-gutter__visual`},s={class:`split-gutter__dots`},c=[`title`],l=[`title`],u={class:`split-panel__content`},d=(0,n.defineComponent)({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,n.ref)(null),{panelSize:g,isDragging:_,isFirstCollapsed:v,isSecondCollapsed:y,handleMouseDown:b,handleDoubleClick:x,handleKeyDown:S,collapse:C,expand:w,toggle:T,resetSize:E,setSize:D,getPanelInfo:O}=r({containerRef:h,direction:(0,n.toRef)(p,`direction`),defaultSize:p.defaultSize,minSize:p.minSize,maxSize:p.maxSize,disabled:(0,n.toRef)(p,`disabled`),collapsible:(0,n.toRef)(p,`collapsible`),step:p.step,onResize:(e,t)=>m(`resize`,e,t),onCollapse:e=>m(`collapse`,e),onExpand:e=>m(`expand`,e),onDragStart:e=>m(`drag-start`,e),onDragEnd:e=>m(`drag-end`,e)}),k=(0,n.computed)(()=>{let e=`calc(${g.value}% - ${Math.max(0,p.gutterSize)/2}px)`;return p.direction===`horizontal`?{width:e}:{height:e}}),A=(0,n.computed)(()=>{let e=`calc(${100-g.value}% - ${Math.max(0,p.gutterSize)/2}px)`;return p.direction===`horizontal`?{width:e}:{height:e}}),j=(0,n.computed)(()=>p.direction===`horizontal`?{width:`${Math.max(0,p.gutterSize)}px`}:{height:`${Math.max(0,p.gutterSize)}px`}),M=(0,n.computed)(()=>p.direction===`horizontal`?v.value?`mdi:chevron-right`:`mdi:chevron-left`:v.value?`mdi:chevron-down`:`mdi:chevron-up`),N=(0,n.computed)(()=>p.direction===`horizontal`?y.value?`mdi:chevron-left`:`mdi:chevron-right`:y.value?`mdi:chevron-up`:`mdi:chevron-down`);return d({collapse:C,expand:w,toggle:T,resetSize:E,getPanelInfo:O,setSize:D}),(r,d)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`containerRef`,ref:h,class:(0,n.normalizeClass)([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":(0,n.unref)(_),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":(0,n.unref)(v),"c-split-pane--collapsed-second":(0,n.unref)(y)}]])},[(0,n.createCommentVNode)(` 首面板 `),(0,n.createElementVNode)(`div`,{class:`split-panel split-panel--first`,style:(0,n.normalizeStyle)(k.value)},[(0,n.createElementVNode)(`div`,i,[(0,n.renderSlot)(r.$slots,`first`,{},void 0,!0)])],4),(0,n.createCommentVNode)(` 分割线手柄 `),(0,n.createElementVNode)(`div`,{class:`split-gutter`,style:(0,n.normalizeStyle)(j.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round((0,n.unref)(g)),"aria-valuemin":Math.min(t.minSize,t.maxSize),"aria-valuemax":Math.max(t.minSize,t.maxSize),"aria-disabled":t.disabled||void 0,tabindex:t.disabled?-1:0,onMousedown:d[4]||=(...e)=>(0,n.unref)(b)&&(0,n.unref)(b)(...e),onTouchstart:d[5]||=(0,n.withModifiers)((...e)=>(0,n.unref)(b)&&(0,n.unref)(b)(...e),[`prevent`]),onDblclick:d[6]||=(...e)=>(0,n.unref)(x)&&(0,n.unref)(x)(...e),onKeydown:d[7]||=(...e)=>(0,n.unref)(S)&&(0,n.unref)(S)(...e)},[(0,n.createElementVNode)(`div`,o,[(0,n.createElementVNode)(`div`,s,[((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(3,e=>(0,n.createElementVNode)(`span`,{key:e,class:`split-gutter__dot`})),64))])]),(0,n.createCommentVNode)(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:0},[(0,n.createElementVNode)(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:(0,n.unref)(v)?`展开首面板`:`折叠首面板`,onClick:d[0]||=(0,n.withModifiers)(e=>(0,n.unref)(T)(`first`),[`stop`]),onMousedown:d[1]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.createVNode)(e.t,{name:M.value,size:16,color:`currentColor`},null,8,[`name`])],40,c),(0,n.createElementVNode)(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:(0,n.unref)(y)?`展开第二面板`:`折叠第二面板`,onClick:d[2]||=(0,n.withModifiers)(e=>(0,n.unref)(T)(`second`),[`stop`]),onMousedown:d[3]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.createVNode)(e.t,{name:N.value,size:16,color:`currentColor`},null,8,[`name`])],40,l)],64)):(0,n.createCommentVNode)(`v-if`,!0)],44,a),(0,n.createCommentVNode)(` 第二面板 `),(0,n.createElementVNode)(`div`,{class:`split-panel split-panel--second`,style:(0,n.normalizeStyle)(A.value)},[(0,n.createElementVNode)(`div`,u,[(0,n.renderSlot)(r.$slots,`second`,{},void 0,!0)])],4)],2))}});var f=t.t(d,[[`__scopeId`,`data-v-
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`);function r(e){let{containerRef:t,direction:r,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:d,onExpand:f,onDragStart:p,onDragEnd:m}=e,h=Number.isFinite(a)?a:0,g=Number.isFinite(o)?o:100,_=Math.max(0,Math.min(100,Math.min(h,g))),v=Math.max(0,Math.min(100,Math.max(h,g))),y=Math.min(v,Math.max(_,Number.isFinite(i)?i:50)),b=(0,n.ref)(y),x=(0,n.ref)(!1),S=(0,n.ref)(null),C=(0,n.ref)(y),w=``,T=``,E=(0,n.computed)(()=>S.value===`first`),D=(0,n.computed)(()=>S.value===`second`),O=e=>Number.isFinite(e)?Math.min(v,Math.max(_,e)):b.value,k=()=>{let e=t.value;return e?r.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},A=()=>{let e=t.value;if(!e)return 0;let n=e.getBoundingClientRect();return r.value===`horizontal`?n.left:n.top},j=e=>{let t=k();return t===0?b.value:O((e-A())/t*100)},M=e=>e instanceof TouchEvent?r.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:r.value===`horizontal`?e.clientX:e.clientY,N=e=>{let t=O(e);t!==b.value&&(b.value=t,u?.(t,100-t))},P=e=>{if(!x.value||s.value)return;e.preventDefault();let t=j(M(e));S.value&&=null,N(t)},F=()=>{x.value&&(x.value=!1,document.body.style.cursor=w,document.body.style.userSelect=T,m?.(b.value),document.removeEventListener(`mousemove`,P),document.removeEventListener(`mouseup`,F),document.removeEventListener(`touchmove`,P),document.removeEventListener(`touchend`,F))},I=e=>{s.value||x.value||(e.preventDefault(),e.currentTarget?.focus(),x.value=!0,w=document.body.style.cursor,T=document.body.style.userSelect,document.body.style.cursor=r.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,p?.(b.value),document.addEventListener(`mousemove`,P),document.addEventListener(`mouseup`,F),document.addEventListener(`touchmove`,P,{passive:!1}),document.addEventListener(`touchend`,F))},L=()=>{s.value||!c.value||B(`first`)},R=(e=`first`)=>{!c.value||S.value===e||(S.value||(C.value=b.value),S.value=e,e===`first`?b.value=0:b.value=100,d?.(e),u?.(b.value,100-b.value))},z=()=>{if(!S.value)return;let e=S.value;S.value=null,b.value=O(C.value),f?.(e),u?.(b.value,100-b.value)},B=(e=`first`)=>{S.value===e?z():R(e)},V=(e,t)=>{let n=Number.isFinite(l)&&l>0?l:2;return{ArrowLeft:t?-n:0,ArrowRight:t?n:0,ArrowUp:t?0:-n,ArrowDown:t?0:n}[e]??null};return(0,n.onUnmounted)(()=>{x.value&&=(document.body.style.cursor=w,document.body.style.userSelect=T,!1),document.removeEventListener(`mousemove`,P),document.removeEventListener(`mouseup`,F),document.removeEventListener(`touchmove`,P),document.removeEventListener(`touchend`,F)}),{panelSize:b,isDragging:x,collapsedTarget:S,isFirstCollapsed:E,isSecondCollapsed:D,handleMouseDown:I,handleDoubleClick:L,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){N(_),e.preventDefault();return}if(e.key===`End`){N(v),e.preventDefault();return}let t=V(e.key,r.value===`horizontal`);t===null||t===0||(e.preventDefault(),S.value&&=null,N(b.value+t))},collapse:R,expand:z,toggle:B,resetSize:()=>{S.value=null,b.value=y,u?.(y,100-y)},setSize:e=>{S.value=null,N(e)},getPanelInfo:()=>({first:{size:b.value,collapsed:E.value},second:{size:100-b.value,collapsed:D.value}})}}const i={class:`split-panel__content`},a=[`aria-orientation`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`,`aria-disabled`,`tabindex`],o={class:`split-gutter__visual`},s={class:`split-gutter__dots`},c=[`title`],l=[`title`],u={class:`split-panel__content`},d=(0,n.defineComponent)({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,n.ref)(null),{panelSize:g,isDragging:_,isFirstCollapsed:v,isSecondCollapsed:y,handleMouseDown:b,handleDoubleClick:x,handleKeyDown:S,collapse:C,expand:w,toggle:T,resetSize:E,setSize:D,getPanelInfo:O}=r({containerRef:h,direction:(0,n.toRef)(p,`direction`),defaultSize:p.defaultSize,minSize:p.minSize,maxSize:p.maxSize,disabled:(0,n.toRef)(p,`disabled`),collapsible:(0,n.toRef)(p,`collapsible`),step:p.step,onResize:(e,t)=>m(`resize`,e,t),onCollapse:e=>m(`collapse`,e),onExpand:e=>m(`expand`,e),onDragStart:e=>m(`drag-start`,e),onDragEnd:e=>m(`drag-end`,e)}),k=(0,n.computed)(()=>{let e=`calc(${g.value}% - ${Math.max(0,p.gutterSize)/2}px)`;return p.direction===`horizontal`?{width:e}:{height:e}}),A=(0,n.computed)(()=>{let e=`calc(${100-g.value}% - ${Math.max(0,p.gutterSize)/2}px)`;return p.direction===`horizontal`?{width:e}:{height:e}}),j=(0,n.computed)(()=>p.direction===`horizontal`?{width:`${Math.max(0,p.gutterSize)}px`}:{height:`${Math.max(0,p.gutterSize)}px`}),M=(0,n.computed)(()=>p.direction===`horizontal`?v.value?`mdi:chevron-right`:`mdi:chevron-left`:v.value?`mdi:chevron-down`:`mdi:chevron-up`),N=(0,n.computed)(()=>p.direction===`horizontal`?y.value?`mdi:chevron-left`:`mdi:chevron-right`:y.value?`mdi:chevron-up`:`mdi:chevron-down`);return d({collapse:C,expand:w,toggle:T,resetSize:E,getPanelInfo:O,setSize:D}),(r,d)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`containerRef`,ref:h,class:(0,n.normalizeClass)([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":(0,n.unref)(_),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":(0,n.unref)(v),"c-split-pane--collapsed-second":(0,n.unref)(y)}]])},[(0,n.createCommentVNode)(` 首面板 `),(0,n.createElementVNode)(`div`,{class:`split-panel split-panel--first`,style:(0,n.normalizeStyle)(k.value)},[(0,n.createElementVNode)(`div`,i,[(0,n.renderSlot)(r.$slots,`first`,{},void 0,!0)])],4),(0,n.createCommentVNode)(` 分割线手柄 `),(0,n.createElementVNode)(`div`,{class:`split-gutter`,style:(0,n.normalizeStyle)(j.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round((0,n.unref)(g)),"aria-valuemin":Math.min(t.minSize,t.maxSize),"aria-valuemax":Math.max(t.minSize,t.maxSize),"aria-disabled":t.disabled||void 0,tabindex:t.disabled?-1:0,onMousedown:d[4]||=(...e)=>(0,n.unref)(b)&&(0,n.unref)(b)(...e),onTouchstart:d[5]||=(0,n.withModifiers)((...e)=>(0,n.unref)(b)&&(0,n.unref)(b)(...e),[`prevent`]),onDblclick:d[6]||=(...e)=>(0,n.unref)(x)&&(0,n.unref)(x)(...e),onKeydown:d[7]||=(...e)=>(0,n.unref)(S)&&(0,n.unref)(S)(...e)},[(0,n.createElementVNode)(`div`,o,[(0,n.createElementVNode)(`div`,s,[((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(3,e=>(0,n.createElementVNode)(`span`,{key:e,class:`split-gutter__dot`})),64))])]),(0,n.createCommentVNode)(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:0},[(0,n.createElementVNode)(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:(0,n.unref)(v)?`展开首面板`:`折叠首面板`,onClick:d[0]||=(0,n.withModifiers)(e=>(0,n.unref)(T)(`first`),[`stop`]),onMousedown:d[1]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.createVNode)(e.t,{name:M.value,size:16,color:`currentColor`},null,8,[`name`])],40,c),(0,n.createElementVNode)(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:(0,n.unref)(y)?`展开第二面板`:`折叠第二面板`,onClick:d[2]||=(0,n.withModifiers)(e=>(0,n.unref)(T)(`second`),[`stop`]),onMousedown:d[3]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.createVNode)(e.t,{name:N.value,size:16,color:`currentColor`},null,8,[`name`])],40,l)],64)):(0,n.createCommentVNode)(`v-if`,!0)],44,a),(0,n.createCommentVNode)(` 第二面板 `),(0,n.createElementVNode)(`div`,{class:`split-panel split-panel--second`,style:(0,n.normalizeStyle)(A.value)},[(0,n.createElementVNode)(`div`,u,[(0,n.renderSlot)(r.$slots,`second`,{},void 0,!0)])],4)],2))}});var f=t.t(d,[[`__scopeId`,`data-v-99f7e295`]]);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
|
package/dist/C_SplitPane2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onUnmounted as d,openBlock as f,ref as p,renderList as m,renderSlot as h,toRef as g,unref as _,withModifiers as v}from"vue";function y(e){let{containerRef:t,direction:n,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:f,onExpand:m,onDragStart:h,onDragEnd:g}=e,_=Number.isFinite(a)?a:0,v=Number.isFinite(o)?o:100,y=Math.max(0,Math.min(100,Math.min(_,v))),b=Math.max(0,Math.min(100,Math.max(_,v))),x=Math.min(b,Math.max(y,Number.isFinite(i)?i:50)),S=p(x),C=p(!1),w=p(null),T=p(x),E=``,D=``,O=r(()=>w.value===`first`),k=r(()=>w.value===`second`),A=e=>Number.isFinite(e)?Math.min(b,Math.max(y,e)):S.value,j=()=>{let e=t.value;return e?n.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},M=()=>{let e=t.value;if(!e)return 0;let r=e.getBoundingClientRect();return n.value===`horizontal`?r.left:r.top},N=e=>{let t=j();return t===0?S.value:A((e-M())/t*100)},P=e=>e instanceof TouchEvent?n.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:n.value===`horizontal`?e.clientX:e.clientY,F=e=>{let t=A(e);t!==S.value&&(S.value=t,u?.(t,100-t))},I=e=>{if(!C.value||s.value)return;e.preventDefault();let t=N(P(e));w.value&&=null,F(t)},L=()=>{C.value&&(C.value=!1,document.body.style.cursor=E,document.body.style.userSelect=D,g?.(S.value),document.removeEventListener(`mousemove`,I),document.removeEventListener(`mouseup`,L),document.removeEventListener(`touchmove`,I),document.removeEventListener(`touchend`,L))},R=e=>{s.value||C.value||(e.preventDefault(),e.currentTarget?.focus(),C.value=!0,E=document.body.style.cursor,D=document.body.style.userSelect,document.body.style.cursor=n.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,h?.(S.value),document.addEventListener(`mousemove`,I),document.addEventListener(`mouseup`,L),document.addEventListener(`touchmove`,I,{passive:!1}),document.addEventListener(`touchend`,L))},z=()=>{s.value||!c.value||H(`first`)},B=(e=`first`)=>{!c.value||w.value===e||(w.value||(T.value=S.value),w.value=e,e===`first`?S.value=0:S.value=100,f?.(e),u?.(S.value,100-S.value))},V=()=>{if(!w.value)return;let e=w.value;w.value=null,S.value=A(T.value),m?.(e),u?.(S.value,100-S.value)},H=(e=`first`)=>{w.value===e?V():B(e)},U=(e,t)=>{let n=Number.isFinite(l)&&l>0?l:2;return{ArrowLeft:t?-n:0,ArrowRight:t?n:0,ArrowUp:t?0:-n,ArrowDown:t?0:n}[e]??null};return d(()=>{C.value&&=(document.body.style.cursor=E,document.body.style.userSelect=D,!1),document.removeEventListener(`mousemove`,I),document.removeEventListener(`mouseup`,L),document.removeEventListener(`touchmove`,I),document.removeEventListener(`touchend`,L)}),{panelSize:S,isDragging:C,collapsedTarget:w,isFirstCollapsed:O,isSecondCollapsed:k,handleMouseDown:R,handleDoubleClick:z,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){F(y),e.preventDefault();return}if(e.key===`End`){F(b),e.preventDefault();return}let t=U(e.key,n.value===`horizontal`);t===null||t===0||(e.preventDefault(),w.value&&=null,F(S.value+t))},collapse:B,expand:V,toggle:H,resetSize:()=>{w.value=null,S.value=x,u?.(x,100-x)},setSize:e=>{w.value=null,F(e)},getPanelInfo:()=>({first:{size:S.value,collapsed:O.value},second:{size:100-S.value,collapsed:k.value}})}}const b={class:`split-panel__content`},x=[`aria-orientation`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`,`aria-disabled`,`tabindex`],S={class:`split-gutter__visual`},C={class:`split-gutter__dots`},w=[`title`],T=[`title`],E={class:`split-panel__content`};var D=t(c({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:c,emit:d}){let D=t,O=d,k=p(null),{panelSize:A,isDragging:j,isFirstCollapsed:M,isSecondCollapsed:N,handleMouseDown:P,handleDoubleClick:F,handleKeyDown:I,collapse:L,expand:R,toggle:z,resetSize:B,setSize:V,getPanelInfo:H}=y({containerRef:k,direction:g(D,`direction`),defaultSize:D.defaultSize,minSize:D.minSize,maxSize:D.maxSize,disabled:g(D,`disabled`),collapsible:g(D,`collapsible`),step:D.step,onResize:(e,t)=>O(`resize`,e,t),onCollapse:e=>O(`collapse`,e),onExpand:e=>O(`expand`,e),onDragStart:e=>O(`drag-start`,e),onDragEnd:e=>O(`drag-end`,e)}),U=r(()=>{let e=`calc(${A.value}% - ${Math.max(0,D.gutterSize)/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),W=r(()=>{let e=`calc(${100-A.value}% - ${Math.max(0,D.gutterSize)/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),G=r(()=>D.direction===`horizontal`?{width:`${Math.max(0,D.gutterSize)}px`}:{height:`${Math.max(0,D.gutterSize)}px`}),K=r(()=>D.direction===`horizontal`?M.value?`mdi:chevron-right`:`mdi:chevron-left`:M.value?`mdi:chevron-down`:`mdi:chevron-up`),q=r(()=>D.direction===`horizontal`?N.value?`mdi:chevron-left`:`mdi:chevron-right`:N.value?`mdi:chevron-up`:`mdi:chevron-down`);return c({collapse:L,expand:R,toggle:z,resetSize:B,getPanelInfo:H,setSize:V}),(r,c)=>(f(),a(`div`,{ref_key:`containerRef`,ref:k,class:l([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":_(j),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":_(M),"c-split-pane--collapsed-second":_(N)}]])},[i(` 首面板 `),o(`div`,{class:`split-panel split-panel--first`,style:u(U.value)},[o(`div`,b,[h(r.$slots,`first`,{},void 0,!0)])],4),i(` 分割线手柄 `),o(`div`,{class:`split-gutter`,style:u(G.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round(_(A)),"aria-valuemin":Math.min(t.minSize,t.maxSize),"aria-valuemax":Math.max(t.minSize,t.maxSize),"aria-disabled":t.disabled||void 0,tabindex:t.disabled?-1:0,onMousedown:c[4]||=(...e)=>_(P)&&_(P)(...e),onTouchstart:c[5]||=v((...e)=>_(P)&&_(P)(...e),[`prevent`]),onDblclick:c[6]||=(...e)=>_(F)&&_(F)(...e),onKeydown:c[7]||=(...e)=>_(I)&&_(I)(...e)},[o(`div`,S,[o(`div`,C,[(f(),a(n,null,m(3,e=>o(`span`,{key:e,class:`split-gutter__dot`})),64))])]),i(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?(f(),a(n,{key:0},[o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:_(M)?`展开首面板`:`折叠首面板`,onClick:c[0]||=v(e=>_(z)(`first`),[`stop`]),onMousedown:c[1]||=v(()=>{},[`stop`])},[s(e,{name:K.value,size:16,color:`currentColor`},null,8,[`name`])],40,w),o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:_(N)?`展开第二面板`:`折叠第二面板`,onClick:c[2]||=v(e=>_(z)(`second`),[`stop`]),onMousedown:c[3]||=v(()=>{},[`stop`])},[s(e,{name:q.value,size:16,color:`currentColor`},null,8,[`name`])],40,T)],64)):i(`v-if`,!0)],44,x),i(` 第二面板 `),o(`div`,{class:`split-panel split-panel--second`,style:u(W.value)},[o(`div`,E,[h(r.$slots,`second`,{},void 0,!0)])],4)],2))}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onUnmounted as d,openBlock as f,ref as p,renderList as m,renderSlot as h,toRef as g,unref as _,withModifiers as v}from"vue";function y(e){let{containerRef:t,direction:n,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:f,onExpand:m,onDragStart:h,onDragEnd:g}=e,_=Number.isFinite(a)?a:0,v=Number.isFinite(o)?o:100,y=Math.max(0,Math.min(100,Math.min(_,v))),b=Math.max(0,Math.min(100,Math.max(_,v))),x=Math.min(b,Math.max(y,Number.isFinite(i)?i:50)),S=p(x),C=p(!1),w=p(null),T=p(x),E=``,D=``,O=r(()=>w.value===`first`),k=r(()=>w.value===`second`),A=e=>Number.isFinite(e)?Math.min(b,Math.max(y,e)):S.value,j=()=>{let e=t.value;return e?n.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},M=()=>{let e=t.value;if(!e)return 0;let r=e.getBoundingClientRect();return n.value===`horizontal`?r.left:r.top},N=e=>{let t=j();return t===0?S.value:A((e-M())/t*100)},P=e=>e instanceof TouchEvent?n.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:n.value===`horizontal`?e.clientX:e.clientY,F=e=>{let t=A(e);t!==S.value&&(S.value=t,u?.(t,100-t))},I=e=>{if(!C.value||s.value)return;e.preventDefault();let t=N(P(e));w.value&&=null,F(t)},L=()=>{C.value&&(C.value=!1,document.body.style.cursor=E,document.body.style.userSelect=D,g?.(S.value),document.removeEventListener(`mousemove`,I),document.removeEventListener(`mouseup`,L),document.removeEventListener(`touchmove`,I),document.removeEventListener(`touchend`,L))},R=e=>{s.value||C.value||(e.preventDefault(),e.currentTarget?.focus(),C.value=!0,E=document.body.style.cursor,D=document.body.style.userSelect,document.body.style.cursor=n.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,h?.(S.value),document.addEventListener(`mousemove`,I),document.addEventListener(`mouseup`,L),document.addEventListener(`touchmove`,I,{passive:!1}),document.addEventListener(`touchend`,L))},z=()=>{s.value||!c.value||H(`first`)},B=(e=`first`)=>{!c.value||w.value===e||(w.value||(T.value=S.value),w.value=e,e===`first`?S.value=0:S.value=100,f?.(e),u?.(S.value,100-S.value))},V=()=>{if(!w.value)return;let e=w.value;w.value=null,S.value=A(T.value),m?.(e),u?.(S.value,100-S.value)},H=(e=`first`)=>{w.value===e?V():B(e)},U=(e,t)=>{let n=Number.isFinite(l)&&l>0?l:2;return{ArrowLeft:t?-n:0,ArrowRight:t?n:0,ArrowUp:t?0:-n,ArrowDown:t?0:n}[e]??null};return d(()=>{C.value&&=(document.body.style.cursor=E,document.body.style.userSelect=D,!1),document.removeEventListener(`mousemove`,I),document.removeEventListener(`mouseup`,L),document.removeEventListener(`touchmove`,I),document.removeEventListener(`touchend`,L)}),{panelSize:S,isDragging:C,collapsedTarget:w,isFirstCollapsed:O,isSecondCollapsed:k,handleMouseDown:R,handleDoubleClick:z,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){F(y),e.preventDefault();return}if(e.key===`End`){F(b),e.preventDefault();return}let t=U(e.key,n.value===`horizontal`);t===null||t===0||(e.preventDefault(),w.value&&=null,F(S.value+t))},collapse:B,expand:V,toggle:H,resetSize:()=>{w.value=null,S.value=x,u?.(x,100-x)},setSize:e=>{w.value=null,F(e)},getPanelInfo:()=>({first:{size:S.value,collapsed:O.value},second:{size:100-S.value,collapsed:k.value}})}}const b={class:`split-panel__content`},x=[`aria-orientation`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`,`aria-disabled`,`tabindex`],S={class:`split-gutter__visual`},C={class:`split-gutter__dots`},w=[`title`],T=[`title`],E={class:`split-panel__content`};var D=t(c({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:c,emit:d}){let D=t,O=d,k=p(null),{panelSize:A,isDragging:j,isFirstCollapsed:M,isSecondCollapsed:N,handleMouseDown:P,handleDoubleClick:F,handleKeyDown:I,collapse:L,expand:R,toggle:z,resetSize:B,setSize:V,getPanelInfo:H}=y({containerRef:k,direction:g(D,`direction`),defaultSize:D.defaultSize,minSize:D.minSize,maxSize:D.maxSize,disabled:g(D,`disabled`),collapsible:g(D,`collapsible`),step:D.step,onResize:(e,t)=>O(`resize`,e,t),onCollapse:e=>O(`collapse`,e),onExpand:e=>O(`expand`,e),onDragStart:e=>O(`drag-start`,e),onDragEnd:e=>O(`drag-end`,e)}),U=r(()=>{let e=`calc(${A.value}% - ${Math.max(0,D.gutterSize)/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),W=r(()=>{let e=`calc(${100-A.value}% - ${Math.max(0,D.gutterSize)/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),G=r(()=>D.direction===`horizontal`?{width:`${Math.max(0,D.gutterSize)}px`}:{height:`${Math.max(0,D.gutterSize)}px`}),K=r(()=>D.direction===`horizontal`?M.value?`mdi:chevron-right`:`mdi:chevron-left`:M.value?`mdi:chevron-down`:`mdi:chevron-up`),q=r(()=>D.direction===`horizontal`?N.value?`mdi:chevron-left`:`mdi:chevron-right`:N.value?`mdi:chevron-up`:`mdi:chevron-down`);return c({collapse:L,expand:R,toggle:z,resetSize:B,getPanelInfo:H,setSize:V}),(r,c)=>(f(),a(`div`,{ref_key:`containerRef`,ref:k,class:l([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":_(j),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":_(M),"c-split-pane--collapsed-second":_(N)}]])},[i(` 首面板 `),o(`div`,{class:`split-panel split-panel--first`,style:u(U.value)},[o(`div`,b,[h(r.$slots,`first`,{},void 0,!0)])],4),i(` 分割线手柄 `),o(`div`,{class:`split-gutter`,style:u(G.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round(_(A)),"aria-valuemin":Math.min(t.minSize,t.maxSize),"aria-valuemax":Math.max(t.minSize,t.maxSize),"aria-disabled":t.disabled||void 0,tabindex:t.disabled?-1:0,onMousedown:c[4]||=(...e)=>_(P)&&_(P)(...e),onTouchstart:c[5]||=v((...e)=>_(P)&&_(P)(...e),[`prevent`]),onDblclick:c[6]||=(...e)=>_(F)&&_(F)(...e),onKeydown:c[7]||=(...e)=>_(I)&&_(I)(...e)},[o(`div`,S,[o(`div`,C,[(f(),a(n,null,m(3,e=>o(`span`,{key:e,class:`split-gutter__dot`})),64))])]),i(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?(f(),a(n,{key:0},[o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:_(M)?`展开首面板`:`折叠首面板`,onClick:c[0]||=v(e=>_(z)(`first`),[`stop`]),onMousedown:c[1]||=v(()=>{},[`stop`])},[s(e,{name:K.value,size:16,color:`currentColor`},null,8,[`name`])],40,w),o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:_(N)?`展开第二面板`:`折叠第二面板`,onClick:c[2]||=v(e=>_(z)(`second`),[`stop`]),onMousedown:c[3]||=v(()=>{},[`stop`])},[s(e,{name:q.value,size:16,color:`currentColor`},null,8,[`name`])],40,T)],64)):i(`v-if`,!0)],44,x),i(` 第二面板 `),o(`div`,{class:`split-panel split-panel--second`,style:u(W.value)},[o(`div`,E,[h(r.$slots,`second`,{},void 0,!0)])],4)],2))}}),[[`__scopeId`,`data-v-99f7e295`]]);export{y as n,D as t};
|