vue-devui 1.0.0-rc.5 → 1.0.0-rc.8

package/image-preview/index.umd.js

@@ -1 +1 @@
-var S=Object.defineProperty;var O=(r,e,u)=>e in r?S(r,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):r[e]=u;var n=(r,e,u)=>(O(r,typeof e!="symbol"?e+"":e,u),u);(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,e){"use strict";var u="";const L={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class b{constructor(o,i={}){n(this,"el");n(this,"oTransformX",0);n(this,"oTransformY",0);n(this,"transformX");n(this,"transformY");n(this,"zoom");n(this,"rotate");n(this,"STEP",.25);n(this,"MIN_SCALE",.2);n(this,"MAX_SCALE",2.5);n(this,"TRANSFORMX",0);n(this,"TRANSFORMY",0);n(this,"ZOOM",1);n(this,"ROTATE",0);this.el=o,this.transformX=i.transformX||this.TRANSFORMX,this.transformY=i.transformY||this.TRANSFORMY,this.zoom=i.zoom||this.ZOOM,this.rotate=i.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=o=>{const i=o.clientX,s=o.clientY;document.onmousemove=l=>{const c=l.clientX-i,f=l.clientY-s;this.transformX=this.oTransformX+c,this.transformY=this.oTransformY+f,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const o=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=i=>{const s=-i.wheelDelta||i.deltaY||i.detail;o(s)}}throttle(o,i){let s=null;return(...l)=>{s||setTimeout(()=>{s=null,o.apply(this,l)},i)}}setMouseWheel(o){if(o<0){if(this.zoom>=this.MAX_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(o=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+o),this.setPosition()}setZoomOut(o=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-o),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}var V=e.defineComponent({name:"DImagePreview",props:L,emits:[],setup(t){let o=null;const i=e.ref(0),s=e.computed(()=>t.previewUrlList[i.value]),l=t.zIndex?{zIndex:t.zIndex}:{},c=t.backDropZIndex?{zIndex:t.backDropZIndex}:{};function f(){const d=document.querySelector(".devui-image-preview-main-image");o=new b(d)}function M(){i.value=t.previewUrlList.findIndex(d=>d===t.url)}function m(){i.value=i.value<=0?t.previewUrlList.length-1:i.value-1}function g(){i.value=i.value>=t.previewUrlList.length-1?0:i.value+1}function C(){a.close()}function z(){o.setZoomIn()}function P(){o.setZoomOut()}function T(){o.setRotate()}function D(){o.setZoomBest()}function A(){o.setZoomOriginal()}function y(d){d.defaultPrevented||(d.code==="Escape"?C():d.code==="ArrowLeft"?m():d.code==="ArrowRight"&&g())}function $(){document.addEventListener("keydown",y,!1)}function E(){document.removeEventListener("keydown",y,!1)}return e.onMounted(()=>{M(),f(),$()}),e.onUnmounted(()=>{E()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"devui-image-preview",style:l},[e.createVNode("img",{class:"devui-image-preview-main-image",src:s.value},null),e.createVNode("button",{class:"devui-image-preview-close-btn",onClick:C},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8                     13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542                      2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-left",onClick:m},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322                     2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-right",onClick:g},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322                     11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("div",{class:"devui-image-preview-toolbar"},[e.createVNode("button",{onClick:z},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z                       M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847                       C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675                        3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906                         12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375                          12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375                           4.23857625,12 7,12 Z"},null)])])])]),e.createVNode("button",{onClick:P},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542                       L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932                        0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351                         13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12                          12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375                           4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),e.createVNode("button",{onClick:T},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468                       7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356                        12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355                         0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289                          2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661                           13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151                            Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6                             10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712                              9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712                               7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),e.createVNode("button",{onClick:m},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322                       10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("span",{class:"devui-image-preview-index"},[i.value+1,e.createTextVNode(":"),t.previewUrlList.length]),e.createVNode("button",{class:"devui-next",onClick:g},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322                       11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("button",{onClick:D},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275                       L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914                        L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16                         L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994                          L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914                           L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:A},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:"devui-image-preview-bg",style:c},null)])}});function k(t){return e.createApp(V,t)}class a{static open(o){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),k(o).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var o;(o=this.$body)==null||o.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}n(a,"$body",null),n(a,"$div",null),n(a,"$overflow","");function w(t){a.open({url:t.url,previewUrlList:t.previewUrlList,zIndex:t.zIndex,backDropZIndex:t.backDropZIndex})}function v(){a.close()}function p(t){return[...t.querySelectorAll("img")].map(i=>i.getAttribute("src"))}function x(t){var s;t.stopPropagation();const o=t.currentTarget,i=t.target;if(((s=i==null?void 0:i.nodeName)==null?void 0:s.toLowerCase())==="img"){const l=p(o),c=i.getAttribute("src");w({url:c,previewUrlList:l,zIndex:o==null?void 0:o.zIndex,backDropZIndex:o==null?void 0:o.backDropZIndex})}}function h(t){t.addEventListener("click",x)}function I(t){t.removeEventListener("click",x)}var N={mounted(t,o){if(!o.value)return h(t);const{custom:i,disableDefault:s}=o.value;i instanceof Object&&(i.open=()=>{const l=p(t);w({url:l==null?void 0:l[0],previewUrlList:l,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})},i.close=()=>v()),!s&&h(t)},unmounted(){v()},updated(t,o){var i,s;if(t.zIndex=(i=o.value)==null?void 0:i.zIndex,t.backDropZIndex=(s=o.value)==null?void 0:s.backDropZIndex,o.value){const{value:{disableDefault:l},oldValue:{disableDefault:c}}=o;l!==c&&(l?I(t):h(t))}}},Z={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.directive("d-image-preview",N),t.config.globalProperties.$imagePreviewService=a}};r.ImagePreviewDirective=N,r.ImagePreviewService=a,r.default=Z,r.imagePreviewProps=L,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+var X=Object.defineProperty;var R=(s,e,d)=>e in s?X(s,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):s[e]=d;var r=(s,e,d)=>(R(s,typeof e!="symbol"?e+"":e,d),d);(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const d={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class V{constructor(t,n={}){r(this,"el");r(this,"oTransformX",0);r(this,"oTransformY",0);r(this,"transformX");r(this,"transformY");r(this,"zoom");r(this,"rotate");r(this,"STEP",.25);r(this,"MIN_SCALE",.2);r(this,"MAX_SCALE",2.5);r(this,"TRANSFORMX",0);r(this,"TRANSFORMY",0);r(this,"ZOOM",1);r(this,"ROTATE",0);this.el=t,this.transformX=n.transformX||this.TRANSFORMX,this.transformY=n.transformY||this.TRANSFORMY,this.zoom=n.zoom||this.ZOOM,this.rotate=n.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=t=>{const n=t.clientX,i=t.clientY;document.onmousemove=l=>{const u=l.clientX-n,a=l.clientY-i;this.transformX=this.oTransformX+u,this.transformY=this.oTransformY+a,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const t=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=n=>{const i=-n.wheelDelta||n.deltaY||n.detail;t(i)}}throttle(t,n){let i=null;return(...l)=>{i||setTimeout(()=>{i=null,t.apply(this,l)},n)}}setMouseWheel(t){if(t<0){if(this.zoom>=this.MAX_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(t=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+t),this.setPosition()}setZoomOut(t=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-t),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}function f(o,t,n){let i=o;return t&&(i+=`__${t}`),n&&(i+=`--${n}`),i}function k(o){const t=`devui-${o}`;return{b:()=>f(t),e:a=>a?f(t,a):"",m:a=>a?f(t,"",a):"",em:(a,m)=>a&&m?f(t,a,m):""}}var Y="",I=e.defineComponent({name:"DImagePreview",props:d,emits:[],setup(o){const t=k("image-preview");let n=null;const i=e.ref(0),l=e.computed(()=>o.previewUrlList[i.value]),u=o.zIndex?{zIndex:o.zIndex}:{},a=o.backDropZIndex?{zIndex:o.backDropZIndex}:{};function m(){const h=document.querySelector(`.${t.e("main-image")}`);n=new V(h)}function P(){i.value=o.previewUrlList.findIndex(h=>h===o.url)}function g(){i.value=i.value<=0?o.previewUrlList.length-1:i.value-1}function w(){i.value=i.value>=o.previewUrlList.length-1?0:i.value+1}function b(){c.close()}function T(){n.setZoomIn()}function $(){n.setZoomOut()}function D(){n.setRotate()}function A(){n.setZoomBest()}function E(){n.setZoomOriginal()}function y(h){h.defaultPrevented||(h.code==="Escape"?b():h.code==="ArrowLeft"?g():h.code==="ArrowRight"&&w())}function S(){document.addEventListener("keydown",y,!1)}function O(){document.removeEventListener("keydown",y,!1)}return e.onMounted(()=>{P(),m(),S()}),e.onUnmounted(()=>{O()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:t.b(),style:u},[e.createVNode("img",{class:t.e("main-image"),src:l.value},null),e.createVNode("button",{class:t.e("close-btn"),onClick:b},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8                     13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542                      2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),e.createVNode("button",{class:t.e("arrow-left"),onClick:g},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322                     2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("button",{class:t.e("arrow-right"),onClick:w},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322                     11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("div",{class:t.e("toolbar")},[e.createVNode("button",{onClick:T},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z                       M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847                       C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675                        3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906                         12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375                          12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375                           4.23857625,12 7,12 Z"},null)])])])]),e.createVNode("button",{onClick:$},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542                       L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932                        0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351                         13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12                          12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375                           4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),e.createVNode("button",{onClick:D},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468                       7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356                        12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355                         0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289                          2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661                           13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151                            Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6                             10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712                              9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712                               7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),e.createVNode("button",{onClick:g},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322                       10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("span",{class:t.e("index")},[i.value+1,e.createTextVNode(":"),o.previewUrlList.length]),e.createVNode("button",{onClick:w},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322                       11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("button",{onClick:A},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275                       L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914                        L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16                         L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994                          L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914                           L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:E},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:t.e("bg"),style:a},null)])}});function Z(o){return e.createApp(I,o)}class c{static open(t){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),Z(t).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var t;(t=this.$body)==null||t.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}r(c,"$body",null),r(c,"$div",null),r(c,"$overflow","");function p(o){c.open({url:o.url,previewUrlList:o.previewUrlList,zIndex:o.zIndex,backDropZIndex:o.backDropZIndex})}function x(){c.close()}function N(o){return[...o.querySelectorAll("img")].map(n=>n.getAttribute("src"))}function C(o){var i;o.stopPropagation();const t=o.currentTarget,n=o.target;if(((i=n==null?void 0:n.nodeName)==null?void 0:i.toLowerCase())==="img"){const l=N(t),u=n.getAttribute("src");p({url:u,previewUrlList:l,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})}}function L(o){o.addEventListener("click",C)}function M(o){o.removeEventListener("click",C)}var v={mounted(o,t){if(!t.value)return L(o);const{custom:n,disableDefault:i}=t.value;n instanceof Object&&(n.open=()=>{const l=N(o);p({url:l==null?void 0:l[0],previewUrlList:l,zIndex:o==null?void 0:o.zIndex,backDropZIndex:o==null?void 0:o.backDropZIndex})},n.close=()=>x()),!i&&L(o)},unmounted(){x()},updated(o,t){var n,i;if(o.zIndex=(n=t.value)==null?void 0:n.zIndex,o.backDropZIndex=(i=t.value)==null?void 0:i.backDropZIndex,t.value){const{value:{disableDefault:l},oldValue:{disableDefault:u}}=t;l!==u&&(l?M(o):L(o))}}},z={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.directive("d-image-preview",v),o.config.globalProperties.$imagePreviewService=c}};s.ImagePreviewDirective=v,s.ImagePreviewService=c,s.default=z,s.imagePreviewProps=d,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/image-preview/style.css

@@ -1 +1 @@
-.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050));display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #252b3a)}.devui-image-preview-main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview-arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-left svg{width:38px;height:18px}.devui-image-preview-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview-arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-right svg{width:38px;height:18px}.devui-image-preview-toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1))}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}.devui-image-preview-bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background:var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}
+.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050));display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #252b3a)}.devui-image-preview__main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview__close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview__close-btn:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview__close-btn svg{width:38px;height:18px}.devui-image-preview__arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview__arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview__arrow-left svg{width:38px;height:18px}.devui-image-preview__arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview__arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview__arrow-right svg{width:38px;height:18px}.devui-image-preview__toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1))}.devui-image-preview__toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a)}.devui-image-preview__toolbar .devui-image-preview__index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview__toolbar>:not(:first-child){margin-left:20px}.devui-image-preview__bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background:var(--devui-shadow, rgba(37, 43, 58, .2));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}

package/input/index.es.js

@@ -1,178 +1,124 @@
-import { defineComponent, inject, computed, ref, watch, createVNode, withDirectives, mergeProps, resolveDirective, resolveComponent } from "vue";
+import { inject, computed, ref, toRefs, defineComponent, watch, createVNode, mergeProps } from "vue";
 const inputProps = {
-  placeholder: {
+  modelValue: {
     type: String,
-    default: void 0
+    default: ""
   },
   disabled: {
     type: Boolean,
     default: false
   },
-  autoFocus: {
-    type: Boolean,
-    default: false
-  },
-  maxLength: {
-    type: Number,
-    default: Number.MAX_SAFE_INTEGER
-  },
-  cssClass: {
-    type: String,
-    default: ""
-  },
   error: {
     type: Boolean,
     default: false
   },
   size: {
     type: String,
-    default: ""
-  },
-  showPassword: {
-    type: Boolean,
-    default: false
-  },
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  "update:modelValue": {
-    type: Function,
-    default: void 0
-  },
-  onChange: {
-    type: Function,
-    default: void 0
-  },
-  onKeydown: {
-    type: Function,
-    default: void 0
-  },
-  onFocus: {
-    type: Function,
-    default: void 0
-  },
-  onBlur: {
-    type: Function,
-    default: void 0
+    default: "md"
   }
 };
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function useInputRender(props) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
+  const ns = useNamespace("input");
+  const isFocus = ref(false);
+  const { error, size, disabled } = toRefs(props);
+  const wrapClasses = computed(() => ({
+    [ns.b()]: true,
+    [ns.m("focus")]: isFocus.value,
+    [ns.m("disabled")]: disabled.value,
+    [ns.m("error")]: error.value || isValidateError.value,
+    [ns.m("feedback")]: formItemContext == null ? void 0 : formItemContext.showFeedback,
+    [ns.m(size.value)]: true
+  }));
+  return { isFocus, wrapClasses };
+}
+function useInputEvent(isFocus, ctx) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const onFocus = (e) => {
+    isFocus.value = true;
+    ctx.emit("focus", e);
+  };
+  const onBlur = (e) => {
+    isFocus.value = false;
+    ctx.emit("blur", e);
+    formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
+  };
+  const onInput = (e) => {
+    ctx.emit("update:modelValue", e.target.value);
+  };
+  const onChange = (e) => {
+    ctx.emit("change", e.target.value);
+  };
+  const onKeydown = (e) => {
+    ctx.emit("keydown", e);
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown };
+}
 var input = "";
-const formItemInjectionKey = Symbol("dFormItem");
-const dFormItemEvents = {
-  blur: "d.form.blur",
-  change: "d.form.change",
-  input: "d.form.input"
-};
 var Input = defineComponent({
   name: "DInput",
-  directives: {
-    focus: {
-      mounted: function(el, binding) {
-        if (binding.value) {
-          el.focus();
-        }
-      }
-    }
-  },
+  inheritAttrs: false,
   props: inputProps,
-  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
+  emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown"],
   setup(props, ctx) {
-    const formItem = inject(formItemInjectionKey, {});
-    const hasFormItem = Object.keys(formItem).length > 0;
-    const sizeCls = computed(() => `devui-input-${props.size}`);
-    const showPwdIcon = ref(false);
-    const inputType = ref("text");
-    const inputCls = computed(() => {
-      return {
-        error: props.error,
-        [props.cssClass]: true,
-        "devui-input-restore": showPwdIcon.value,
-        [sizeCls.value]: props.size !== ""
-      };
-    });
-    const showPreviewIcon = computed(() => inputType.value === "password");
-    watch(() => props.showPassword, (flg) => {
-      inputType.value = flg ? "password" : "text";
-      showPwdIcon.value = props.showPassword;
-    }, {
-      immediate: true
-    });
-    const onInput = ($event) => {
-      ctx.emit("update:modelValue", $event.target.value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
-    }, onFocus = () => {
-      ctx.emit("focus");
-    }, onBlur = () => {
-      ctx.emit("blur");
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
-    }, onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
-    }, onKeydown = ($event) => {
-      ctx.emit("keydown", $event);
-    }, onChangeInputType = () => {
-      inputType.value = inputType.value === "password" ? "text" : "password";
-    };
-    return {
-      inputCls,
-      inputType,
-      showPreviewIcon,
-      showPwdIcon,
-      onInput,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeydown,
-      onChangeInputType
-    };
-  },
-  render() {
+    const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
       modelValue,
-      showPreviewIcon,
-      showPwdIcon,
-      inputCls,
-      inputType,
-      maxLength,
-      autoFocus,
-      placeholder,
-      disabled,
-      onInput,
+      disabled
+    } = toRefs(props);
+    const ns = useNamespace("input");
+    const {
+      isFocus,
+      wrapClasses
+    } = useInputRender(props);
+    const {
       onFocus,
       onBlur,
+      onInput,
       onChange,
-      onKeydown,
-      onChangeInputType
-    } = this;
-    return createVNode("div", {
-      "class": "devui-input__wrap"
-    }, [withDirectives(createVNode("input", mergeProps({
-      dinput: true
-    }, {
-      "value": modelValue,
-      "disabled": disabled,
-      "type": inputType,
-      "maxlength": maxLength,
-      "placeholder": placeholder,
-      "class": inputCls,
+      onKeydown
+    } = useInputEvent(isFocus, ctx);
+    watch(() => props.modelValue, () => {
+      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    });
+    return () => createVNode("div", {
+      "class": wrapClasses.value
+    }, [createVNode("input", mergeProps({
+      "value": modelValue.value,
+      "disabled": disabled.value,
+      "class": ns.e("inner")
+    }, ctx.attrs, {
       "onInput": onInput,
       "onFocus": onFocus,
       "onBlur": onBlur,
       "onChange": onChange,
       "onKeydown": onKeydown
-    }), null), [[resolveDirective("focus"), autoFocus]]), showPwdIcon && createVNode("div", {
-      "class": "devui-input__preview",
-      "onClick": onChangeInputType
-    }, [showPreviewIcon ? createVNode(resolveComponent("d-icon"), {
-      "name": "preview-forbidden",
-      "size": "12px",
-      "key": 1
-    }, null) : createVNode(resolveComponent("d-icon"), {
-      "name": "preview",
-      "size": "12px",
-      "key": 2
-    }, null)])]);
+    }), null)]);
   }
 });
 var index = {

package/input/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";const m={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},modelValue:{type:String,default:""},"update:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var b="";const F=Symbol("dFormItem"),l={blur:"d.form.blur",change:"d.form.change",input:"d.form.input"};var r=e.defineComponent({name:"DInput",directives:{focus:{mounted:function(n,o){o.value&&n.focus()}}},props:m,emits:["update:modelValue","focus","blur","change","keydown"],setup(n,o){const i=e.inject(F,{}),a=Object.keys(i).length>0,p=e.computed(()=>`devui-input-${n.size}`),s=e.ref(!1),u=e.ref("text"),c=e.computed(()=>({error:n.error,[n.cssClass]:!0,"devui-input-restore":s.value,[p.value]:n.size!==""})),f=e.computed(()=>u.value==="password");return e.watch(()=>n.showPassword,d=>{u.value=d?"password":"text",s.value=n.showPassword},{immediate:!0}),{inputCls:c,inputType:u,showPreviewIcon:f,showPwdIcon:s,onInput:d=>{o.emit("update:modelValue",d.target.value),a&&i.formItemMitt.emit(l.input)},onFocus:()=>{o.emit("focus")},onBlur:()=>{o.emit("blur"),a&&i.formItemMitt.emit(l.blur)},onChange:d=>{o.emit("change",d.target.value),a&&i.formItemMitt.emit(l.change)},onKeydown:d=>{o.emit("keydown",d)},onChangeInputType:()=>{u.value=u.value==="password"?"text":"password"}}},render(){const{modelValue:n,showPreviewIcon:o,showPwdIcon:i,inputCls:a,inputType:p,maxLength:s,autoFocus:u,placeholder:c,disabled:f,onInput:y,onFocus:h,onBlur:w,onChange:g,onKeydown:I,onChangeInputType:v}=this;return e.createVNode("div",{class:"devui-input__wrap"},[e.withDirectives(e.createVNode("input",e.mergeProps({dinput:!0},{value:n,disabled:f,type:p,maxlength:s,placeholder:c,class:a,onInput:y,onFocus:h,onBlur:w,onChange:g,onKeydown:I}),null),[[e.resolveDirective("focus"),u]]),i&&e.createVNode("div",{class:"devui-input__preview",onClick:v},[o?e.createVNode(e.resolveComponent("d-icon"),{name:"preview-forbidden",size:"12px",key:1},null):e.createVNode(e.resolveComponent("d-icon"),{name:"preview",size:"12px",key:2},null)])])}}),C={title:"Input \u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(n){n.component(r.name,r)}};t.Input=r,t.default=C,t.inputProps=m,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(l,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis!="undefined"?globalThis:l||self,n(l.index={},l.Vue))})(this,function(l,n){"use strict";const b={modelValue:{type:String,default:""},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},size:{type:String,default:"md"}},p=Symbol("dFormItem");function r(t,e,u){let o=t;return e&&(o+=`__${e}`),u&&(o+=`--${u}`),o}function y(t){const e=`devui-${t}`;return{b:()=>r(e),e:a=>a?r(e,a):"",m:a=>a?r(e,"",a):"",em:(a,c)=>a&&c?r(e,a,c):""}}function h(t){const e=n.inject(p,void 0),u=n.computed(()=>(e==null?void 0:e.validateState)==="error"),o=y("input"),d=n.ref(!1),{error:i,size:a,disabled:c}=n.toRefs(t),s=n.computed(()=>({[o.b()]:!0,[o.m("focus")]:d.value,[o.m("disabled")]:c.value,[o.m("error")]:i.value||u.value,[o.m("feedback")]:e==null?void 0:e.showFeedback,[o.m(a.value)]:!0}));return{isFocus:d,wrapClasses:s}}function v(t,e){const u=n.inject(p,void 0);return{onFocus:s=>{t.value=!0,e.emit("focus",s)},onBlur:s=>{t.value=!1,e.emit("blur",s),u==null||u.validate("blur").catch(m=>console.warn(m))},onInput:s=>{e.emit("update:modelValue",s.target.value)},onChange:s=>{e.emit("change",s.target.value)},onKeydown:s=>{e.emit("keydown",s)}}}var I="",f=n.defineComponent({name:"DInput",inheritAttrs:!1,props:b,emits:["update:modelValue","focus","blur","input","change","keydown"],setup(t,e){const u=n.inject(p,void 0),{modelValue:o,disabled:d}=n.toRefs(t),i=y("input"),{isFocus:a,wrapClasses:c}=h(t),{onFocus:s,onBlur:m,onInput:w,onChange:F,onKeydown:V}=v(a,e);return n.watch(()=>t.modelValue,()=>{u==null||u.validate("change").catch(B=>console.warn(B))}),()=>n.createVNode("div",{class:c.value},[n.createVNode("input",n.mergeProps({value:o.value,disabled:d.value,class:i.e("inner")},e.attrs,{onInput:w,onFocus:s,onBlur:m,onChange:F,onKeydown:V}),null)])}}),g={title:"Input \u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.component(f.name,f)}};l.Input=f,l.default=g,l.inputProps=b,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/input/style.css

@@ -1 +1 @@
-@charset "UTF-8";.devui-form-controls input[type=text],.devui-form-controls input[type=password],[dInput]{width:100%;height:28px;font-size:var(--devui-font-size, 12px)}.devui-form-controls input[type=text].devui-input-sm,.devui-form-controls input[type=password].devui-input-sm,[dInput].devui-input-sm{font-size:var(--devui-font-size-sm, 12px);height:26px}.devui-form-controls input[type=text].devui-input-lg,.devui-form-controls input[type=password].devui-input-lg,[dInput].devui-input-lg{font-size:var(--devui-font-size-lg, 14px);height:46px}[dTextArea]{width:100%}.devui-form-controls textarea,[dInput],[dTextarea]{box-sizing:border-box;padding:4px 10px;color:var(--devui-text, #252b3a);vertical-align:middle;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-base-bg, #ffffff);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-form-controls textarea[disabled],.devui-form-controls textarea[disabled]:hover,.devui-form-controls textarea.disabled,.devui-form-controls textarea.disabled:hover,.devui-form-controls textarea.devui-disabled,.devui-form-controls textarea.devui-disabled:hover,[dInput][disabled],[dInput][disabled]:hover,[dInput].disabled,[dInput].disabled:hover,[dInput].devui-disabled,[dInput].devui-disabled:hover,[dTextarea][disabled],[dTextarea][disabled]:hover,[dTextarea].disabled,[dTextarea].disabled:hover,[dTextarea].devui-disabled,[dTextarea].devui-disabled:hover{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-form-controls textarea,[dTextarea]{width:100%}.devui-input-group{position:relative;display:table;border-collapse:separate}.devui-input-group-addon{border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);display:table-cell;padding:0 10px;text-align:center}.devui-input-group-addon:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}.devui-input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.devui-input{outline:none;background-color:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);padding:5px 10px;line-height:16px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-input:hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input:focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input[disabled],.devui-input[disabled]:hover,.devui-input[disabled]:focus,.devui-input[disabled]:hover:focus,.devui-input.disabled,.devui-input.disabled:hover,.devui-input.disabled:focus,.devui-input.disabled:hover:focus,.devui-input.devui-disabled,.devui-input.devui-disabled:hover,.devui-input.devui-disabled:focus,.devui-input.devui-disabled:hover:focus{border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-input::placeholder{color:var(--devui-placeholder, #8a8e99)}.devui-input.devui-search-in-dropdown{margin:0;border:none;padding:5px 26px 5px 10px;background-color:var(--devui-embed-search-bg, #f2f5fc);color:var(--devui-text, #252b3a)}.devui-input.devui-search-in-dropdown:-ms-input-placeholder{color:var(--devui-placeholder, #8a8e99)}.devui-input.devui-search-in-dropdown:hover{background-color:var(--devui-embed-search-bg-hover, #eef0f5)}.devui-input-group>.devui-input{display:table-cell}.devui-input-group>.devui-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-group>.devui-input:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-group>.devui-input:not(:first-child):not(:last-child){border-radius:0}.devui-input-lg{font-size:var(--devui-font-size-page-title, 16px);line-height:20px;height:32px}.devui-input-sm{font-size:var(--devui-font-size, 12px);line-height:14px;height:26px}.devui-dropup,.devui-dropdown,.devui-form-group{position:relative}.devui-form-control{color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);display:block;border-radius:var(--devui-border-radius, 2px);outline:0;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-control[disabled],.devui-form-control[disabled]:hover,.devui-form-control[disabled]:focus,.devui-form-control.disabled,.devui-form-control.disabled:hover,.devui-form-control.disabled:focus,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:focus{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-form-control[disabled],.devui-form-control[disabled]>input,.devui-form-control[disabled]:hover,.devui-form-control[disabled]:hover>input,.devui-form-control[disabled]:focus,.devui-form-control[disabled]:focus>input,.devui-form-control.disabled,.devui-form-control.disabled>input,.devui-form-control.disabled:hover,.devui-form-control.disabled:hover>input,.devui-form-control.disabled:focus,.devui-form-control.disabled:focus>input,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled>input,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:hover>input,.devui-form-control.devui-disabled:focus,.devui-form-control.devui-disabled:focus>input{color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-form-control:hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-form-control:focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border){border-color:var(--devui-form-control-line, #adb0b8);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):hover:not(:focus):not(.devui-dropdown-origin-open){border-color:var(--devui-form-control-line-hover, #575d6c)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus,:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus-within{outline:none;border-color:var(--devui-form-control-line-active, #5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border).devui-dropdown-origin-open{outline:none;border-color:var(--devui-connected-overlay-line, #526ecc)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]){min-height:28px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled){color:var(--devui-text, #252b3a)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-input,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-form-control{height:26px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not(.devui-select-underlined-border):not(.devui-dropdown-no-border):not(.devui-no-border){border-radius:var(--devui-border-radius, 2px);border-width:1px;border-style:solid}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:focus{border-color:transparent}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:focus{background-color:var(--devui-disabled-bg, #f5f5f6)}input::-moz-placeholder{color:var(--devui-placeholder, #8a8e99)}input:-ms-input-placeholder{color:var(--devui-placeholder, #8a8e99)}input::-webkit-input-placeholder{color:var(--devui-placeholder, #8a8e99)}[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}[dDatePicker]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{background-color:var(--devui-danger-bg, #ffeeed)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown{border-color:var(--devui-danger-line, #f66f6a)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback{background-color:var(--devui-danger-bg, #ffeeed)}d-editable-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-form-group:not(.multiple-label-auto-complete-disabled) input.devui-form-control.devui-dropdown-origin{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg, #ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg, #ffeeed)}d-input-number:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .input-box:not(:disabled){border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled).multiple-label-auto-complete.multiple-label-auto-complete-border ul.devui-dropdown-origin{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input[dAutoComplete]{background-color:var(--devui-danger-bg, #ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) div.devui-tags.devui-form-control{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input.devui-input{background-color:var(--devui-danger-bg, #ffeeed)}d-tree-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled)>div.devui-select-input.devui-dropdown-origin.devui-tree-select-input{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-search:not([disabled]):not(.disabled):not(.devui-disabled).devui-error input.devui-input{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-editor-md:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line, #f66f6a)}d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-toolbar,d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-container{border-color:var(--devui-danger-line, #f66f6a)}d-form-control d-search{width:100%}.devui-form-controls.devui-form-control-has-suffix [dInput],.devui-form-controls.devui-form-control-has-suffix [dTextArea]{padding-right:28px}.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dTextArea]{padding-right:56px}.devui-form-controls.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-feedback [dTextarea]{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-icon{right:24px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-icon-left{padding-right:30px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-sm{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-sm{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-lg{padding-right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-lg{padding-right:95px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-select-input{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-tree-select{vertical-align:middle}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-input.devui-tree-select-input{padding-right:52px}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-chevron-icon{right:34px}.devui-form-controls.devui-form-control-has-feedback d-input-number{width:100%}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-control-buttons{right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-box{padding-right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number:hover .input-box:not(.disabled){padding-right:58px}.devui-form-controls.devui-form-control-has-feedback d-tags-input .devui-tags{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-multi-auto-complete .multiple-label-auto-complete ul{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-editable-select .devui-form-group.devui-has-feedback>.devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-editable-select>div>.devui-form-control{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback [dDatePicker].devui-form-control{padding-right:32px}.devui-input__wrap{position:relative;display:flex;justify-content:"space-between";align-items:center}.devui-input__wrap .devui-input-restore{padding-right:32px}.devui-input__preview{position:absolute;width:32px;height:16px;right:0;text-align:center;line-height:16px;cursor:pointer;display:flex;justify-content:center;align-items:center;flex-direction:column}
+.devui-input{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0 8px;box-sizing:border-box;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-input:not(.devui-input--error):not(.devui-input--disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input--focus:not(.devui-input--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input--focus:not(.devui-input--error):hover{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input--disabled{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-input--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-input--disabled .devui-input__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-input--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-input--sm{height:26px;font-size:var(--devui-font-size-sm, 12px)}.devui-input--md{height:28px;font-size:var(--devui-font-size, 12px)}.devui-input--lg{height:46px;font-size:var(--devui-font-size-lg, 14px)}.devui-input--feedback{padding-right:28px}.devui-input__inner{width:100%;height:100%;color:var(--devui-text, #252b3a);font-size:inherit;padding:4px 0;border:none;background:none;outline:none}

package/input-number/index.es.js

@@ -102,7 +102,7 @@ var InputNumber = defineComponent({
   props: inputNumberProps,
   emits: ["update:modelValue", "change", "input", "focus", "blur", "keydown"],
   setup(props, ctx) {
-    const inputVal = ref(props.modelValue);
+    const inputVal = ref(props.modelValue < props.min ? props.min : props.modelValue);
     const focusVal = ref("");
     const isSize = computed(() => {
       return `devui-input-number-${props.size}`;
@@ -117,7 +117,18 @@ var InputNumber = defineComponent({
       if (inputVal.value >= props.max) {
         return;
       }
-      inputVal.value += props.step != 0 ? props.step : 1;
+      if (props.step !== 0) {
+        const maxSpaceVal = props.max - inputVal.value;
+        if (inputVal.value < props.max && maxSpaceVal < props.step) {
+          inputVal.value += maxSpaceVal;
+        } else if (inputVal.value < props.max && maxSpaceVal > props.step) {
+          inputVal.value += props.step;
+        } else {
+          inputVal.value += props.step;
+        }
+      } else {
+        inputVal.value += 1;
+      }
       focusVal.value = "active";
       ctx.emit("change", inputVal.value);
       ctx.emit("update:modelValue", inputVal.value);
@@ -129,15 +140,26 @@ var InputNumber = defineComponent({
       if (inputVal.value <= props.min) {
         return;
       }
-      inputVal.value -= props.step != 0 ? props.step : 1;
+      if (props.step !== 0) {
+        const minSpaceVal = inputVal.value - props.min;
+        if (inputVal.value > props.min && minSpaceVal > props.step) {
+          inputVal.value -= props.step;
+        } else if (inputVal.value > props.min && minSpaceVal < props.step) {
+          inputVal.value -= minSpaceVal;
+        } else {
+          inputVal.value -= props.step;
+        }
+      } else {
+        inputVal.value -= 1;
+      }
       focusVal.value = "active";
       ctx.emit("change", inputVal.value);
       ctx.emit("update:modelValue", inputVal.value);
     };
     const onInput = (val) => {
       inputVal.value = parseInt(val.data);
-      ctx.emit("input", val.data);
-      ctx.emit("update:modelValue", val.data);
+      ctx.emit("input", inputVal.value);
+      ctx.emit("update:modelValue", inputVal.value);
     };
     const onFocus = ($event) => {
       focusVal.value = "active";

package/input-number/index.umd.js

@@ -1 +1 @@
-(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue))})(this,function(i,e){"use strict";const h={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},step:{type:Number,default:0},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},size:{type:String,default:""},modelValue:{type:Number,default:0},"onUpdate:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var N="";const V={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var c=e.defineComponent({name:"DIcon",props:V,setup(t){const{name:n,size:u,color:o,classPrefix:l}=e.toRefs(t);return()=>/^((https?):)?\/\//.test(n.value)?e.createVNode("img",{src:n.value,alt:n.value.split("/")[n.value.split("/").length-1],style:{width:u.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${l.value} ${l.value}-${n.value}`,style:{fontSize:u.value,color:o.value}},null)}}),d=e.defineComponent({name:"DInputNumber",props:h,emits:["update:modelValue","change","input","focus","blur","keydown"],setup(t,n){const u=e.ref(t.modelValue),o=e.ref(""),l=e.computed(()=>`devui-input-number-${t.size}`),s=e.computed(()=>t.disabled);return{inputVal:u,focusVal:o,isDisabled:s,isSize:l,add:()=>{t.disabled||u.value>=t.max||(u.value+=t.step!=0?t.step:1,o.value="active",n.emit("change",u.value),n.emit("update:modelValue",u.value))},subtract:()=>{t.disabled||u.value<=t.min||(u.value-=t.step!=0?t.step:1,o.value="active",n.emit("change",u.value),n.emit("update:modelValue",u.value))},onInput:a=>{u.value=parseInt(a.data),n.emit("input",a.data),n.emit("update:modelValue",a.data)},onChange:a=>{n.emit("change",a.target.value)},onKeydown:a=>{n.emit("keydown",a)},onBlur:a=>{o.value="",n.emit("blur",a)},onFocus:a=>{o.value="active",n.emit("focus",a)}}},render(){const{focusVal:t,placeholder:n,add:u,inputVal:o,isDisabled:l,isSize:s,subtract:p,onInput:m,onChange:f,onKeydown:v,onBlur:r,onFocus:y}=this,b=["devui-input-number",l?"devui-input-disabled":"",s];return e.createVNode("div",{class:b},[e.createVNode("div",{onBlur:r,tabindex:"1",class:["devui-control-buttons",t.value]},[e.createVNode("span",{onClick:u},[e.createVNode(c,{size:"12px",name:"chevron-up"},null)]),e.createVNode("span",{onClick:p},[e.createVNode(c,{size:"12px",name:"chevron-down"},null)])]),e.createVNode("div",{class:"devui-input-item"},[e.createVNode("input",{type:"number",value:o,placeholder:n,disabled:l,class:["devui-input-style devui-input-box",t.value],onInput:m,onChange:f,onFocus:y,onBlur:r,onKeydown:v},null)])])}});d.install=function(t){t.component(d.name,d)};var g={title:"InputNumber \u6570\u5B57\u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"50%",install(t){t.use(d)}};i.InputNumber=d,i.default=g,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+(function(l,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis!="undefined"?globalThis:l||self,n(l.index={},l.Vue))})(this,function(l,n){"use strict";const V={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},step:{type:Number,default:0},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},size:{type:String,default:""},modelValue:{type:Number,default:0},"onUpdate:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var N="";const h={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var r=n.defineComponent({name:"DIcon",props:h,setup(e){const{name:u,size:t,color:i,classPrefix:o}=n.toRefs(e);return()=>/^((https?):)?\/\//.test(u.value)?n.createVNode("img",{src:u.value,alt:u.value.split("/")[u.value.split("/").length-1],style:{width:t.value,verticalAlign:"text-bottom"}},null):n.createVNode("i",{class:`${o.value} ${o.value}-${u.value}`,style:{fontSize:t.value,color:i.value}},null)}}),d=n.defineComponent({name:"DInputNumber",props:V,emits:["update:modelValue","change","input","focus","blur","keydown"],setup(e,u){const t=n.ref(e.modelValue<e.min?e.min:e.modelValue),i=n.ref(""),o=n.computed(()=>`devui-input-number-${e.size}`),s=n.computed(()=>e.disabled);return{inputVal:t,focusVal:i,isDisabled:s,isSize:o,add:()=>{if(!e.disabled&&!(t.value>=e.max)){if(e.step!==0){const a=e.max-t.value;t.value<e.max&&a<e.step?t.value+=a:(t.value<e.max&&a>e.step,t.value+=e.step)}else t.value+=1;i.value="active",u.emit("change",t.value),u.emit("update:modelValue",t.value)}},subtract:()=>{if(!e.disabled&&!(t.value<=e.min)){if(e.step!==0){const a=t.value-e.min;t.value>e.min&&a>e.step?t.value-=e.step:t.value>e.min&&a<e.step?t.value-=a:t.value-=e.step}else t.value-=1;i.value="active",u.emit("change",t.value),u.emit("update:modelValue",t.value)}},onInput:a=>{t.value=parseInt(a.data),u.emit("input",t.value),u.emit("update:modelValue",t.value)},onChange:a=>{u.emit("change",a.target.value)},onKeydown:a=>{u.emit("keydown",a)},onBlur:a=>{i.value="",u.emit("blur",a)},onFocus:a=>{i.value="active",u.emit("focus",a)}}},render(){const{focusVal:e,placeholder:u,add:t,inputVal:i,isDisabled:o,isSize:s,subtract:m,onInput:f,onChange:v,onKeydown:p,onBlur:c,onFocus:y}=this,b=["devui-input-number",o?"devui-input-disabled":"",s];return n.createVNode("div",{class:b},[n.createVNode("div",{onBlur:c,tabindex:"1",class:["devui-control-buttons",e.value]},[n.createVNode("span",{onClick:t},[n.createVNode(r,{size:"12px",name:"chevron-up"},null)]),n.createVNode("span",{onClick:m},[n.createVNode(r,{size:"12px",name:"chevron-down"},null)])]),n.createVNode("div",{class:"devui-input-item"},[n.createVNode("input",{type:"number",value:i,placeholder:u,disabled:o,class:["devui-input-style devui-input-box",e.value],onInput:f,onChange:v,onFocus:y,onBlur:c,onKeydown:p},null)])])}});d.install=function(e){e.component(d.name,d)};var g={title:"InputNumber \u6570\u5B57\u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"50%",install(e){e.use(d)}};l.InputNumber=d,l.default=g,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/input-number/style.css

@@ -1 +1 @@
-.devui-input-number{position:relative;display:inline-block;width:80px;line-height:38px;margin-right:12px}.devui-input-number:hover:not(.devui-input-disabled) .devui-input-box{border-color:var(--devui-form-control-line-hover)}.devui-input-number:hover:not(.devui-input-disabled) .devui-control-buttons:not(.disabled){display:flex;border-color:var(--devui-form-control-line-hover)}.devui-input-number:focus-within .devui-control-buttons{display:flex}.devui-input-number .active{border:1px solid var(--devui-form-control-line-active)!important;display:flex!important}.devui-input-number.devui-input-disabled .devui-subtract,.devui-input-number.devui-input-disabled .devui-add,.devui-input-number.devui-input-disabled .devui-input-style{cursor:not-allowed;border-color:#e4e7ed;color:#e4e7ed}.devui-input-number.devui-input-disabled .devui-input-style{border-color:var(--devui-disabled-line)!important;color:var(--devui-disabled-text)!important;background-color:var(--devui-disabled-bg)!important}.devui-input-number.devui-input-number-sm .devui-input-box{width:80px;height:26px;line-height:26px}.devui-input-number.devui-input-number-normal .devui-input-box{width:80px;height:28px;line-height:28px}.devui-input-number.devui-input-number-lg .devui-input-box{width:80px;height:46px;line-height:46px}.devui-input-number .devui-input-item{line-height:100%}.devui-input-number .devui-input-style::-webkit-outer-spin-button,.devui-input-number .devui-input-style::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.devui-input-number .devui-add,.devui-input-number .devui-subtract{display:inline-block;width:50px;height:38px;line-height:38px;text-align:center;font-size:16px;color:#333;background:#f5f7fa;cursor:pointer;border:1px solid #dcdfe6}.devui-input-number .devui-add{float:right;margin-left:-1px;border-radius:0 4px 4px 0}.devui-input-number .devui-subtract{float:left;margin-right:-1px;border-radius:4px 0 0 4px}.devui-input-number .devui-input-style{display:block;-moz-appearance:textfield}.devui-input-number .devui-input-style{outline:none;background-color:var(--devui-base-bg);border:1px solid var(--devui-form-control-line);border-radius:var(--devui-border-radius);padding:4px 8px;line-height:18px;font-size:var(--devui-font-size);color:var(--devui-text);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s var(--devui-animation-ease-in-out-smooth)}.devui-input-number .devui-input-box{box-sizing:border-box;padding:4px 8px;font-size:var(--devui-font-size);vertical-align:middle;border-radius:var(--devui-border-radius);outline:none;width:100%;line-height:20px;height:28px;border-width:1px;border-style:solid}.devui-input-number .devui-input-box:not(.disabled){background-color:var(--devui-base-bg);border-color:var(--devui-line);color:var(--devui-text)}.devui-input-number .disabled{cursor:not-allowed}.devui-input-number .devui-control-buttons{display:none;position:absolute;right:0;width:22px;height:100%;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid var(--devui-line);box-sizing:border-box;line-height:100%;border-radius:0 var(--devui-border-radius) var(--devui-border-radius) 0}.devui-input-number .devui-control-buttons:not(.disabled){cursor:pointer}.devui-input-number .devui-control-buttons>span{display:flex}
+.devui-input-number{position:relative;display:inline-block;width:80px;line-height:38px;margin-right:12px}.devui-input-number:hover:not(.devui-input-disabled) .devui-input-box{border-color:var(--devui-form-control-line-hover)}.devui-input-number:hover:not(.devui-input-disabled) .devui-control-buttons:not(.disabled){display:flex;border-color:var(--devui-form-control-line-hover)}.devui-input-number:focus-within .devui-control-buttons{display:flex}.devui-input-number .active{border:1px solid var(--devui-form-control-line-active)!important;display:flex!important}.devui-input-number.devui-input-disabled .devui-subtract,.devui-input-number.devui-input-disabled .devui-add,.devui-input-number.devui-input-disabled .devui-input-style{cursor:not-allowed;border-color:#e4e7ed;color:#e4e7ed}.devui-input-number.devui-input-disabled .devui-input-style{border-color:var(--devui-disabled-line)!important;color:var(--devui-disabled-text)!important;background-color:var(--devui-disabled-bg)!important}.devui-input-number.devui-input-number-sm{width:60px}.devui-input-number.devui-input-number-sm .devui-input-box{height:26px;line-height:26px}.devui-input-number.devui-input-number-md{width:80px}.devui-input-number.devui-input-number-md .devui-input-box{height:32px;line-height:32px}.devui-input-number.devui-input-number-lg{width:100px}.devui-input-number.devui-input-number-lg .devui-input-box{height:38px;line-height:38px}.devui-input-number .devui-input-item{line-height:100%}.devui-input-number .devui-input-style::-webkit-outer-spin-button,.devui-input-number .devui-input-style::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.devui-input-number .devui-add,.devui-input-number .devui-subtract{display:inline-block;width:50px;height:38px;line-height:38px;text-align:center;font-size:16px;color:#333;background:#f5f7fa;cursor:pointer;border:1px solid #dcdfe6}.devui-input-number .devui-add{float:right;margin-left:-1px;border-radius:0 4px 4px 0}.devui-input-number .devui-subtract{float:left;margin-right:-1px;border-radius:4px 0 0 4px}.devui-input-number .devui-input-style{display:block;-moz-appearance:textfield}.devui-input-number .devui-input-style{outline:none;background-color:var(--devui-base-bg);border:1px solid var(--devui-form-control-line);border-radius:var(--devui-border-radius);padding:4px 8px;line-height:18px;font-size:var(--devui-font-size);color:var(--devui-text);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s var(--devui-animation-ease-in-out-smooth)}.devui-input-number .devui-input-box{box-sizing:border-box;padding:4px 8px;font-size:var(--devui-font-size);vertical-align:middle;border-radius:var(--devui-border-radius);outline:none;width:100%;line-height:20px;height:28px;border-width:1px;border-style:solid}.devui-input-number .devui-input-box:not(.disabled){background-color:var(--devui-base-bg);border-color:var(--devui-line);color:var(--devui-text)}.devui-input-number .disabled{cursor:not-allowed}.devui-input-number .devui-control-buttons{display:none;position:absolute;right:0;width:22px;height:100%;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid var(--devui-line);box-sizing:border-box;line-height:100%;border-radius:0 var(--devui-border-radius) var(--devui-border-radius) 0}.devui-input-number .devui-control-buttons:not(.disabled){cursor:pointer}.devui-input-number .devui-control-buttons>span{display:flex}

package/layout/index.es.js

@@ -1,4 +1,27 @@
 import { defineComponent, createVNode } from "vue";
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var layout = "";
 var Layout = defineComponent({
   name: "DLayout",
@@ -6,11 +29,12 @@ var Layout = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("layout");
     return () => {
       var _a;
       const slotDefault = (_a = slots.default) == null ? void 0 : _a.call(slots);
-      const isAside = slotDefault.some((item) => item.name === "DAside");
-      const classNames = `${isAside ? "devui-layout-aside " : ""}devui-layout`;
+      const isAside = slotDefault.some((item) => item.type.name === "DAside");
+      const classNames = `${isAside ? ns.e("aside") : ""} ${ns.b()}`;
       return createVNode("div", {
         "class": classNames
       }, [slotDefault]);
@@ -23,10 +47,11 @@ var Content = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("layout");
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-content"
+        "class": ns.e("content")
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
@@ -37,10 +62,11 @@ var Header = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("layout");
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-header"
+        "class": ns.e("header")
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
@@ -51,10 +77,11 @@ var Footer = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("layout");
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-footer"
+        "class": ns.e("footer")
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
@@ -64,10 +91,11 @@ var Aside = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("layout");
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-aside"
+        "class": ns.e("aside")
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }