vue-devui 1.0.0-rc.3 → 1.0.0-rc.6

package/notification/index.es.js

@@ -100,6 +100,105 @@ var Close = defineComponent({
     }, null)]);
   }
 });
+function SuccessIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("defs", null, [createVNode("polygon", {
+    "id": "path-s",
+    "points": "6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391            6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
+  }, null)]), createVNode("g", {
+    "id": "correct",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("mask", {
+    "id": "mask-2",
+    "fill": "white"
+  }, [createVNode("use", {
+    "xlink:href": "#path-s"
+  }, null)]), createVNode("use", {
+    "id": "Mask",
+    "class": "devui-notification-image-success-path",
+    "xlink:href": "#path-s"
+  }, null)])]);
+}
+function WarningIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "class": "devui-icon-warning-outer",
+    "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+  }, null), createVNode("path", {
+    "class": "devui-icon-warning-inner",
+    "stroke-width": "0.3",
+    "fill-rule": "nonzero",
+    "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105            L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+  }, null)])]);
+}
+function InfoIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "id": "info",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "class": "devui-notification-image-info-path",
+    "d": "M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z",
+    "id": "info"
+  }, null)])]);
+}
+function ErrorIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("defs", null, [createVNode("polygon", {
+    "id": "path-e",
+    "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085            10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425            8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
+  }, null)]), createVNode("g", {
+    "id": "error",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("mask", {
+    "id": "mask-2",
+    "fill": "white"
+  }, [createVNode("use", {
+    "xlink:href": "#path-e"
+  }, null)]), createVNode("use", {
+    "id": "Mask",
+    "class": "devui-notification-image-error-path",
+    "xlink:href": "#path-e"
+  }, null)])]);
+}
 var TypeIcon = defineComponent({
   props: {
     type: {
@@ -115,18 +214,9 @@ var TypeIcon = defineComponent({
       "devui-notification-image": true,
       [`devui-notification-image-${type.value}`]: true
     }));
-    const severityIconMap = {
-      info: "info-o",
-      success: "right-o",
-      warning: "warning-o",
-      error: "error-o"
-    };
     return () => createVNode("span", {
       "class": classes.value
-    }, [type.value !== "normal" && createVNode(Icon, {
-      "name": severityIconMap[type.value],
-      "size": "16px"
-    }, null)]);
+    }, [type.value && type.value !== "normal" && (type.value === "success" && createVNode(SuccessIcon, null, null) || type.value === "info" && createVNode(InfoIcon, null, null) || type.value === "warning" && createVNode(WarningIcon, null, null) || type.value === "error" && createVNode(ErrorIcon, null, null))]);
   }
 });
 function useNotification(props) {

package/notification/index.umd.js

@@ -1 +1 @@
-var I=Object.defineProperty,M=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var N=(i,e,l)=>e in i?I(i,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):i[e]=l,m=(i,e)=>{for(var l in e||(e={}))k.call(e,l)&&N(i,l,e[l]);if(v)for(var l of v(e))A.call(e,l)&&N(i,l,e[l]);return i},g=(i,e)=>M(i,R(e));(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 l={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},type:{type:String,default:"normal"},duration:{type:Number,default:3e3},onClose:{type:Function}},S={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var p=e.defineComponent({name:"DIcon",props:S,setup(n){const{name:t,size:o,color:a,classPrefix:c}=e.toRefs(n);return()=>/^((https?):)?\/\//.test(t.value)?e.createVNode("img",{src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:o.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${c.value} ${c.value}-${t.value}`,style:{fontSize:o.value,color:a.value}},null)}}),h=e.defineComponent({emits:["click"],setup(n,{emit:t}){return()=>e.createVNode("div",{class:"devui-notification-icon-close",onClick:o=>t("click",o)},[e.createVNode(p,{name:"close",size:"14px"},null)])}}),C=e.defineComponent({props:{type:{type:String,default:"normal"}},setup(n){const{type:t}=e.toRefs(n),o=e.computed(()=>({"devui-notification-image":!0,[`devui-notification-image-${t.value}`]:!0})),a={info:"info-o",success:"right-o",warning:"warning-o",error:"error-o"};return()=>e.createVNode("span",{class:o.value},[t.value!=="normal"&&e.createVNode(p,{name:a[t.value],size:"16px"},null)])}});function T(n){return{classes:e.computed(()=>({"devui-notification-item-container":!0,[`devui-notification-message-${n.type}`]:!0}))}}function b(n,t){let o=null,a;const c=()=>{var s;clearTimeout(o),o=null,(s=n.onClose)==null||s.call(n),t("update:modelValue",!1)},r=()=>{o&&(clearTimeout(o),o=null)},d=()=>{if(!n.modelValue){const s=n.duration-(Date.now()-a);o=setTimeout(c,s)}},f=()=>{t("destroy")};return e.watch(()=>n.modelValue,s=>{s&&(a=Date.now(),n.duration&&(o=setTimeout(c,n.duration)))}),{interrupt:r,removeReset:d,close:c,handleDestroy:f}}var E="",u=e.defineComponent({name:"DNotification",props:l,emits:["update:modelValue","destroy"],setup(n,{emit:t,slots:o}){const{modelValue:a,title:c,type:r}=e.toRefs(n),{classes:d}=T(n),{interrupt:f,removeReset:s,close:x,handleDestroy:z}=b(n,t);return()=>e.createVNode(e.Transition,{name:"notification-fade",onAfterLeave:z},{default:()=>{var V;return[a.value&&e.createVNode("div",{class:"devui-notification"},[e.createVNode("div",{class:d.value,onMouseenter:f,onMouseleave:s},[e.createVNode("div",{class:"devui-notification-item"},[e.createVNode(h,{onClick:x},null),c.value&&e.createVNode(C,{type:r.value},null),e.createVNode("div",{class:"devui-notification-message"},[e.createVNode("span",{class:"devui-notification-title"},[c.value]),e.createVNode("span",{class:"devui-notification-content"},[(V=o.default)==null?void 0:V.call(o)])])])])])]}})}});function D(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}const P={modelValue:!1,duration:3e3,type:"normal"};function w(n,t){const o=document.createElement("div"),a=e.createApp({setup(){return e.onUnmounted(()=>{document.body.removeChild(o)}),()=>e.createVNode(u,e.mergeProps(n,{onDestroy:a.unmount}),D(t)?t:{default:()=>[t]})}});return document.body.appendChild(o),a.mount(o),a}function $(n,t){n.modelValue=!1,t==null||t()}class y{static open(t){const o=t.onClose||null,a=t.content;let c;delete t.content;const r=e.reactive(g(m(m({},P),t),{onClose:()=>{$(r,o)}}));w(r,a),r.modelValue=!0,clearTimeout(c),t.duration&&(c=setTimeout(r.onClose,t.duration))}}var j={title:"Notification \u5168\u5C40\u901A\u77E5",category:"\u53CD\u9988",status:"100%",install(n){n.component(u.name,u),n.config.globalProperties.$notificationService=y}};i.Notification=u,i.NotificationService=y,i.default=j,i.notificationProps=l,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+var B=Object.defineProperty,R=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var V=(i,e,l)=>e in i?B(i,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):i[e]=l,m=(i,e)=>{for(var l in e||(e={}))A.call(e,l)&&V(i,l,e[l]);if(w)for(var l of w(e))E.call(e,l)&&V(i,l,e[l]);return i},g=(i,e)=>R(i,Z(e));(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 l={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},type:{type:String,default:"normal"},duration:{type:Number,default:3e3},onClose:{type:Function}},N={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var x=e.defineComponent({name:"DIcon",props:N,setup(n){const{name:t,size:o,color:a,classPrefix:r}=e.toRefs(n);return()=>/^((https?):)?\/\//.test(t.value)?e.createVNode("img",{src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:o.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${r.value} ${r.value}-${t.value}`,style:{fontSize:o.value,color:a.value}},null)}}),y=e.defineComponent({emits:["click"],setup(n,{emit:t}){return()=>e.createVNode("div",{class:"devui-notification-icon-close",onClick:o=>t("click",o)},[e.createVNode(x,{name:"close",size:"14px"},null)])}});function k(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("defs",null,[e.createVNode("polygon",{id:"path-s",points:"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391            6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"},null)]),e.createVNode("g",{id:"correct",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("mask",{id:"mask-2",fill:"white"},[e.createVNode("use",{"xlink:href":"#path-s"},null)]),e.createVNode("use",{id:"Mask",class:"devui-notification-image-success-path","xlink:href":"#path-s"},null)])])}function v(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{class:"devui-icon-warning-outer",d:"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"},null),e.createVNode("path",{class:"devui-icon-warning-inner","stroke-width":"0.3","fill-rule":"nonzero",d:"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105            L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"},null)])])}function L(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{id:"info",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{class:"devui-notification-image-info-path",d:"M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z",id:"info"},null)])])}function C(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("defs",null,[e.createVNode("polygon",{id:"path-e",points:"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085            10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425            8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"},null)]),e.createVNode("g",{id:"error",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("mask",{id:"mask-2",fill:"white"},[e.createVNode("use",{"xlink:href":"#path-e"},null)]),e.createVNode("use",{id:"Mask",class:"devui-notification-image-error-path","xlink:href":"#path-e"},null)])])}var S=e.defineComponent({props:{type:{type:String,default:"normal"}},setup(n){const{type:t}=e.toRefs(n),o=e.computed(()=>({"devui-notification-image":!0,[`devui-notification-image-${t.value}`]:!0}));return()=>e.createVNode("span",{class:o.value},[t.value&&t.value!=="normal"&&(t.value==="success"&&e.createVNode(k,null,null)||t.value==="info"&&e.createVNode(L,null,null)||t.value==="warning"&&e.createVNode(v,null,null)||t.value==="error"&&e.createVNode(C,null,null))])}});function T(n){return{classes:e.computed(()=>({"devui-notification-item-container":!0,[`devui-notification-message-${n.type}`]:!0}))}}function M(n,t){let o=null,a;const r=()=>{var s;clearTimeout(o),o=null,(s=n.onClose)==null||s.call(n),t("update:modelValue",!1)},c=()=>{o&&(clearTimeout(o),o=null)},u=()=>{if(!n.modelValue){const s=n.duration-(Date.now()-a);o=setTimeout(r,s)}},f=()=>{t("destroy")};return e.watch(()=>n.modelValue,s=>{s&&(a=Date.now(),n.duration&&(o=setTimeout(r,n.duration)))}),{interrupt:c,removeReset:u,close:r,handleDestroy:f}}var _="",d=e.defineComponent({name:"DNotification",props:l,emits:["update:modelValue","destroy"],setup(n,{emit:t,slots:o}){const{modelValue:a,title:r,type:c}=e.toRefs(n),{classes:u}=T(n),{interrupt:f,removeReset:s,close:j,handleDestroy:z}=M(n,t);return()=>e.createVNode(e.Transition,{name:"notification-fade",onAfterLeave:z},{default:()=>{var h;return[a.value&&e.createVNode("div",{class:"devui-notification"},[e.createVNode("div",{class:u.value,onMouseenter:f,onMouseleave:s},[e.createVNode("div",{class:"devui-notification-item"},[e.createVNode(y,{onClick:j},null),r.value&&e.createVNode(S,{type:c.value},null),e.createVNode("div",{class:"devui-notification-message"},[e.createVNode("span",{class:"devui-notification-title"},[r.value]),e.createVNode("span",{class:"devui-notification-content"},[(h=o.default)==null?void 0:h.call(o)])])])])])]}})}});function b(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}const I={modelValue:!1,duration:3e3,type:"normal"};function D(n,t){const o=document.createElement("div"),a=e.createApp({setup(){return e.onUnmounted(()=>{document.body.removeChild(o)}),()=>e.createVNode(d,e.mergeProps(n,{onDestroy:a.unmount}),b(t)?t:{default:()=>[t]})}});return document.body.appendChild(o),a.mount(o),a}function P(n,t){n.modelValue=!1,t==null||t()}class p{static open(t){const o=t.onClose||null,a=t.content;let r;delete t.content;const c=e.reactive(g(m(m({},I),t),{onClose:()=>{P(c,o)}}));D(c,a),c.modelValue=!0,clearTimeout(r),t.duration&&(r=setTimeout(c.onClose,t.duration))}}var $={title:"Notification \u5168\u5C40\u901A\u77E5",category:"\u53CD\u9988",status:"100%",install(n){n.component(d.name,d),n.config.globalProperties.$notificationService=p}};i.Notification=d,i.NotificationService=p,i.default=$,i.notificationProps=l,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/notification/style.css

@@ -1 +1 @@
-.devui-notification{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word;z-index:1060}.devui-notification a:link,.devui-notification a:visited{color:var(--devui-link-light, #96adfa)}.devui-notification a:hover,.devui-notification a:active{color:var(--devui-link-light-active, #beccfa)}.devui-notification-item-container{position:relative;margin:0 0 8px;opacity:.95;filter:alpha(opacity=95);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-notification-item{position:relative;display:block;padding:12px 16px}.devui-notification-icon-close{position:absolute;top:7px;right:10px;cursor:pointer}.devui-notification-icon-close i.icon{color:var(--devui-light-text, #ffffff)!important}.devui-notification-title{font-size:var(--devui-font-size-card-title, 14px);padding:0 0 calc(.5em - 2px) 0;display:block;font-weight:700}.devui-notification-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:16px;top:14px;padding:0;line-height:1}.devui-notification-image.devui-notification-image-warn i.icon{color:var(--devui-warning, #fac20a)!important}.devui-notification-image.devui-notification-image-info i.icon{color:var(--devui-info, #5e7ce0)!important}.devui-notification-image.devui-notification-image-error i.icon{color:var(--devui-danger, #f66f6a)!important}.devui-notification-image.devui-notification-image-success i.icon{color:var(--devui-success, #50d4ab)!important}.devui-notification-image .devui-notification-image-info-path,.devui-notification-image .devui-notification-image-error-path,.devui-notification-image .devui-notification-image-success-path{fill:var(--devui-light-text, #ffffff)}.devui-notification-message{margin-left:20px}.devui-notification-message .devui-notification-content{font-size:var(--devui-font-size, 12px);margin-top:4px}.devui-notification-message-common .devui-notification-message{margin-left:0}.devui-notification-message p{font-size:var(--devui-font-size, 12px);margin-top:4px}.notification-fade-enter-active,.notification-fade-leave-active{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.notification-fade-enter-from,.notification-fade-leave-to{transform:translate(100%)}
+.devui-notification{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word;z-index:1060}.devui-notification a:link,.devui-notification a:visited{color:var(--devui-link-light, #96adfa)}.devui-notification a:hover,.devui-notification a:active{color:var(--devui-link-light-active, #beccfa)}.devui-notification-item-container{position:relative;margin:0 0 8px;opacity:.95;filter:alpha(opacity=95);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-notification-item{position:relative;display:block;padding:12px 16px}.devui-notification-icon-close{position:absolute;top:7px;right:10px;cursor:pointer}.devui-notification-icon-close i.icon{color:var(--devui-light-text, #ffffff)!important}.devui-notification-title{font-size:var(--devui-font-size-card-title, 14px);padding:0 0 calc(.5em - 2px) 0;display:block;font-weight:700}.devui-notification-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:16px;top:14px;padding:0;line-height:1}.devui-notification-image.devui-notification-image-warning path.devui-icon-warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-notification-image.devui-notification-image-warning path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-notification-image.devui-notification-image-info{background-color:var(--devui-info, #5e7ce0)}.devui-notification-image.devui-notification-image-error{background-color:var(--devui-danger, #f66f6a)}.devui-notification-image.devui-notification-image-success{background-color:var(--devui-success, #50d4ab)}.devui-notification-image .devui-notification-image-info-path,.devui-notification-image .devui-notification-image-error-path,.devui-notification-image .devui-notification-image-success-path{fill:var(--devui-light-text, #ffffff)}.devui-notification-message{margin-left:20px}.devui-notification-message .devui-notification-content{font-size:var(--devui-font-size, 12px);margin-top:4px}.devui-notification-message-common .devui-notification-message{margin-left:0}.devui-notification-message p{font-size:var(--devui-font-size, 12px);margin-top:4px}.notification-fade-enter-active,.notification-fade-leave-active{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.notification-fade-enter-from,.notification-fade-leave-to{transform:translate(100%)}

package/nuxt/components/Column.js

@@ -0,0 +1,3 @@
+import '../../table/style.css' 
+
+export  { Column as default } from '../../table/index.es.js'

package/nuxt/components/DatePicker.js

@@ -0,0 +1,3 @@
+import '../../date-picker/style.css' 
+
+export  { DatePicker as default } from '../../date-picker/index.es.js'

package/nuxt/components/Drawer.js

@@ -0,0 +1,3 @@
+import '../../drawer/style.css' 
+
+export  { Drawer as default } from '../../drawer/index.es.js'

package/nuxt/components/DrawerService.js

@@ -0,0 +1,3 @@
+import '../../drawer/style.css' 
+
+export  { DrawerService as default } from '../../drawer/index.es.js'

package/nuxt/components/Dropdown.js

@@ -0,0 +1,3 @@
+import '../../dropdown/style.css' 
+
+export  { Dropdown as default } from '../../dropdown/index.es.js'

package/nuxt/components/DropdownMenu.js

@@ -0,0 +1,3 @@
+import '../../dropdown/style.css' 
+
+export  { DropdownMenu as default } from '../../dropdown/index.es.js'

package/nuxt/components/Form.js

@@ -0,0 +1,3 @@
+import '../../form/style.css' 
+
+export  { Form as default } from '../../form/index.es.js'

package/nuxt/components/FormControl.js

@@ -0,0 +1,3 @@
+import '../../form/style.css' 
+
+export  { FormControl as default } from '../../form/index.es.js'

package/nuxt/components/FormItem.js

@@ -0,0 +1,3 @@
+import '../../form/style.css' 
+
+export  { FormItem as default } from '../../form/index.es.js'

package/nuxt/components/FormLabel.js

@@ -0,0 +1,3 @@
+import '../../form/style.css' 
+
+export  { FormLabel as default } from '../../form/index.es.js'

package/nuxt/components/FormOperation.js

@@ -0,0 +1,3 @@
+import '../../form/style.css' 
+
+export  { FormOperation as default } from '../../form/index.es.js'

package/nuxt/components/InputNumber.js

@@ -0,0 +1,3 @@
+import '../../input-number/style.css' 
+
+export  { InputNumber as default } from '../../input-number/index.es.js'

package/nuxt/components/LoadingOptions.js

@@ -0,0 +1,3 @@
+import '../../loading/style.css' 
+
+export  { LoadingOptions as default } from '../../loading/index.es.js'

package/nuxt/components/Select.js

@@ -0,0 +1,3 @@
+import '../../select/style.css' 
+
+export  { Select as default } from '../../select/index.es.js'

package/nuxt/components/StickSlider.js

@@ -0,0 +1,3 @@
+import '../../date-picker/style.css' 
+
+export  { StickSlider as default } from '../../date-picker/index.es.js'

package/nuxt/components/Tab.js

@@ -0,0 +1,3 @@
+import '../../tabs/style.css' 
+
+export  { Tab as default } from '../../tabs/index.es.js'

package/nuxt/components/Table.js

@@ -0,0 +1,3 @@
+import '../../table/style.css' 
+
+export  { Table as default } from '../../table/index.es.js'

package/nuxt/components/Tabs.js

@@ -0,0 +1,3 @@
+import '../../tabs/style.css' 
+
+export  { Tabs as default } from '../../tabs/index.es.js'

package/nuxt/components/Tooltip.js

@@ -0,0 +1,3 @@
+import '../../tooltip/style.css' 
+
+export  { Tooltip as default } from '../../tooltip/index.es.js'

package/nuxt/components/Tree.js

@@ -0,0 +1,3 @@
+import '../../tree/style.css' 
+
+export  { Tree as default } from '../../tree/index.es.js'

package/nuxt/components/dropdownMenuProps.js

@@ -0,0 +1,3 @@
+import '../../dropdown/style.css' 
+
+export  { dropdownMenuProps as default } from '../../dropdown/index.es.js'

package/nuxt/components/loadingProps.js

@@ -0,0 +1,3 @@
+import '../../loading/style.css' 
+
+export  { loadingProps as default } from '../../loading/index.es.js'

package/nuxt/components/modalProps.js

@@ -0,0 +1,3 @@
+import '../../modal/style.css' 
+
+export  { modalProps as default } from '../../modal/index.es.js'

package/nuxt/components/sliderProps.js

@@ -0,0 +1,3 @@
+import '../../slider/style.css' 
+
+export  { sliderProps as default } from '../../slider/index.es.js'

package/nuxt/components/tabsProps.js

@@ -0,0 +1,3 @@
+import '../../tabs/style.css' 
+
+export  { tabsProps as default } from '../../tabs/index.es.js'

package/nuxt/components/tooltipProps.js

@@ -0,0 +1,3 @@
+import '../../tooltip/style.css' 
+
+export  { tooltipProps as default } from '../../tooltip/index.es.js'

package/nuxt/components/treeProps.js

@@ -0,0 +1,3 @@
+import '../../tree/style.css' 
+
+export  { treeProps as default } from '../../tree/index.es.js'

package/overlay/index.es.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps } from "vue";
-import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -165,6 +165,9 @@ const flexibleOverlayProps = {
     type: [Number, Object],
     default: 8
   },
+  shiftOffset: {
+    type: Number
+  },
   align: {
     type: String,
     default: null
@@ -232,7 +235,6 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
-      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -240,12 +242,22 @@ function useOverlay(props, emit) {
       })
     ];
     props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
       middleware
     });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
     emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {

package/overlay/index.umd.js

@@ -1 +1 @@
-var R=Object.defineProperty,T=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var x=(l,e,a)=>e in l?R(l,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[e]=a,B=(l,e)=>{for(var a in e||(e={}))z.call(e,a)&&x(l,a,e[a]);if(O)for(var a of O(e))D.call(e,a)&&x(l,a,e[a]);return l},E=(l,e)=>T(l,$(e));(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue,l.dom))})(this,function(l,e,a){"use strict";var M="";function S(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const V=e.defineComponent({setup(t,r){return()=>{let i;return e.createVNode(e.Teleport,{to:"#d-overlay-anchor"},{default:()=>[e.createVNode(e.Transition,{name:"devui-overlay-fade"},S(i=e.renderSlot(r.slots,"default"))?i:{default:()=>[i]})]})}}}),p={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},h=E(B({},p),{overlayStyle:{type:[String,Object],default:void 0}}),k=["update:visible","backdropClick"];function A(t,r){const i=e.computed(()=>["devui-overlay-background",t.backgroundClass,t.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),d=e.computed(()=>"devui-overlay"),n=o=>{var c;o.preventDefault(),(c=t.onBackdropClick)==null||c.call(t),t.backdropClose&&r.emit("update:visible",!1)},s=o=>o.cancelBubble=!0;return e.onMounted(()=>{const o=document.body,c=o.style.overflow,u=o.style.position;e.watch([()=>t.visible,()=>t.backgroundBlock],([f,v])=>{if(v){const y=o.getBoundingClientRect().y;f?(o.style.overflowY="scroll",o.style.position=f?"fixed":"",o.style.top=`${y}px`):(o.style.overflowY=c,o.style.position=u,o.style.top="",window.scrollTo(0,-y))}}),e.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:i,overlayClass:d,handleBackdropClick:n,handleOverlayBubbleCancel:s}}var q="";const m=e.defineComponent({name:"DFixedOverlay",props:h,emits:k,setup(t,r){const{backgroundClass:i,overlayClass:d,handleBackdropClick:n,handleOverlayBubbleCancel:s}=A(t,r);return()=>e.createVNode(V,null,{default:()=>[t.visible&&e.createVNode("div",{class:i.value,style:t.backgroundStyle,onClick:n},[e.createVNode("div",{class:d.value,style:t.overlayStyle,onClick:s},[e.renderSlot(r.slots,"default")])])]})}}),C={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function j(t){const r=/(auto|scroll|hidden)/;for(let i=t;i=i.parentElement;i.parentElement!==document.body){const d=window.getComputedStyle(i);if(r.test(d.overflow+d.overflowX+d.overflowY))return i}return window}function P(t,r,i,d){let{x:n,y:s}=r;if(!t){const{width:o,height:c}=d;n&&i.includes("start")&&(n=12),n&&i.includes("end")&&(n=Math.round(o-24)),s&&i.includes("start")&&(s=10),s&&i.includes("end")&&(s=c-14)}return{x:n,y:s}}function L(t,r){const i=e.ref(),d=e.ref();let n=null;const s=(c,u,f,v)=>{const{x:y,y:w}=P(t.isArrowCenter,f,u,v.getBoundingClientRect()),b={top:"bottom",right:"left",bottom:"top",left:"right"}[u.split("-")[0]];Object.assign(c.style,{left:y?`${y}px`:"",top:w?`${w}px`:"",right:"",bottom:"",[b]:"-4px"})},o=async()=>{const c=t.origin,u=e.unref(i.value),f=e.unref(d.value),v=[a.shift(),a.offset(t.offset),a.autoPlacement({alignment:t.align,allowedPlacements:t.position})];t.showArrow&&v.push(a.arrow({element:f}));const{x:y,y:w,placement:b,middlewareData:_}=await a.computePosition(c,u,{strategy:"fixed",middleware:v});r("positionChange",b),Object.assign(u.style,{top:`${w}px`,left:`${y}px`}),t.showArrow&&s(f,b,_.arrow,u)};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(n=j(t.origin),e.nextTick(o),n==null||n.addEventListener("scroll",o),n!==window&&window.addEventListener("scroll",o),window.addEventListener("resize",o)):(n==null||n.removeEventListener("scroll",o),n!==window&&window.removeEventListener("scroll",o),window.removeEventListener("resize",o))}),e.onUnmounted(()=>{n==null||n.removeEventListener("scroll",o),n!==window&&window.removeEventListener("scroll",o),window.removeEventListener("resize",o)}),{arrowRef:d,overlayRef:i,updatePosition:o}}var Y="";const g=e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:C,emits:["update:modelValue","positionChange"],setup(t,{slots:r,attrs:i,emit:d,expose:n}){const{arrowRef:s,overlayRef:o,updatePosition:c}=L(t,d);return n({updatePosition:c}),()=>{var u;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:o,class:"devui-flexible-overlay"},i),[(u=r.default)==null?void 0:u.call(r),t.showArrow&&e.createVNode("div",{ref:s,class:"devui-flexible-overlay-arrow"},null)])}}}),N=typeof window!="undefined";var F={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(t){if(t.component(m.name,m),t.component(g.name,g),N&&!document.getElementById("d-overlay-anchor")){const r=document.createElement("div");r.setAttribute("id","d-overlay-anchor"),r.style.position="fixed",r.style.left="0",r.style.top="0",r.style.zIndex="1000",document.body.appendChild(r)}}};l.FixedOverlay=m,l.FlexibleOverlay=g,l.default=F,l.fixedOverlayProps=h,l.flexibleOverlayProps=C,l.overlayEmits=k,l.overlayProps=p,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
+var z=Object.defineProperty,D=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var A=(l,t,a)=>t in l?z(l,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[t]=a,j=(l,t)=>{for(var a in t||(t={}))q.call(t,a)&&A(l,a,t[a]);if(V)for(var a of V(t))X.call(t,a)&&A(l,a,t[a]);return l},P=(l,t)=>D(l,M(t));(function(l,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],t):(l=typeof globalThis!="undefined"?globalThis:l||self,t(l.index={},l.Vue,l.dom))})(this,function(l,t,a){"use strict";var I="";function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const N=t.defineComponent({setup(e,i){return()=>{let r;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},L(r=t.renderSlot(i.slots,"default"))?r:{default:()=>[r]})]})}}}),p={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},k=P(j({},p),{overlayStyle:{type:[String,Object],default:void 0}}),C=["update:visible","backdropClick"];function F(e,i){const r=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),d=t.computed(()=>"devui-overlay"),n=o=>{var c;o.preventDefault(),(c=e.onBackdropClick)==null||c.call(e),e.backdropClose&&i.emit("update:visible",!1)},s=o=>o.cancelBubble=!0;return t.onMounted(()=>{const o=document.body,c=o.style.overflow,f=o.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([u,y])=>{if(y){const v=o.getBoundingClientRect().y;u?(o.style.overflowY="scroll",o.style.position=u?"fixed":"",o.style.top=`${v}px`):(o.style.overflowY=c,o.style.position=f,o.style.top="",window.scrollTo(0,-v))}}),t.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:r,overlayClass:d,handleBackdropClick:n,handleOverlayBubbleCancel:s}}var U="";const m=t.defineComponent({name:"DFixedOverlay",props:k,emits:C,setup(e,i){const{backgroundClass:r,overlayClass:d,handleBackdropClick:n,handleOverlayBubbleCancel:s}=F(e,i);return()=>t.createVNode(N,null,{default:()=>[e.visible&&t.createVNode("div",{class:r.value,style:e.backgroundStyle,onClick:n},[t.createVNode("div",{class:d.value,style:e.overlayStyle,onClick:s},[t.renderSlot(i.slots,"default")])])]})}}),x={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function _(e){const i=/(auto|scroll|hidden)/;for(let r=e;r=r.parentElement;r.parentElement!==document.body){const d=window.getComputedStyle(r);if(i.test(d.overflow+d.overflowX+d.overflowY))return r}return window}function R(e,i,r,d){let{x:n,y:s}=i;if(!e){const{width:o,height:c}=d;n&&r.includes("start")&&(n=12),n&&r.includes("end")&&(n=Math.round(o-24)),s&&r.includes("start")&&(s=10),s&&r.includes("end")&&(s=c-14)}return{x:n,y:s}}function T(e,i){const r=t.ref(),d=t.ref();let n=null;const s=(c,f,u,y)=>{const{x:v,y:w}=R(e.isArrowCenter,u,f,y.getBoundingClientRect()),b={top:"bottom",right:"left",bottom:"top",left:"right"}[f.split("-")[0]];Object.assign(c.style,{left:v?`${v}px`:"",top:w?`${w}px`:"",right:"",bottom:"",[b]:"-4px"})},o=async()=>{const c=e.origin,f=t.unref(r.value),u=t.unref(d.value),y=[a.offset(e.offset),a.autoPlacement({alignment:e.align,allowedPlacements:e.position})];e.showArrow&&y.push(a.arrow({element:u})),e.shiftOffset!==void 0&&y.push(a.shift());const{x:v,y:w,placement:b,middlewareData:B}=await a.computePosition(c,f,{strategy:"fixed",middleware:y});let g=v,O=w;if(e.shiftOffset!==void 0){const{x:E,y:S}=B.shift;E<0&&(g-=e.shiftOffset),E>0&&(g+=e.shiftOffset),S<0&&(O-=e.shiftOffset),S>0&&(O+=e.shiftOffset)}i("positionChange",b),Object.assign(f.style,{top:`${O}px`,left:`${g}px`}),e.showArrow&&s(u,b,B.arrow,f)};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(n=_(e.origin),t.nextTick(o),n==null||n.addEventListener("scroll",o),n!==window&&window.addEventListener("scroll",o),window.addEventListener("resize",o)):(n==null||n.removeEventListener("scroll",o),n!==window&&window.removeEventListener("scroll",o),window.removeEventListener("resize",o))}),t.onUnmounted(()=>{n==null||n.removeEventListener("scroll",o),n!==window&&window.removeEventListener("scroll",o),window.removeEventListener("resize",o)}),{arrowRef:d,overlayRef:r,updatePosition:o}}var G="";const h=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:x,emits:["update:modelValue","positionChange"],setup(e,{slots:i,attrs:r,emit:d,expose:n}){const{arrowRef:s,overlayRef:o,updatePosition:c}=T(e,d);return n({updatePosition:c}),()=>{var f;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:o,class:"devui-flexible-overlay"},r),[(f=i.default)==null?void 0:f.call(i),e.showArrow&&t.createVNode("div",{ref:s,class:"devui-flexible-overlay-arrow"},null)])}}}),Y=typeof window!="undefined";var $={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(m.name,m),e.component(h.name,h),Y&&!document.getElementById("d-overlay-anchor")){const i=document.createElement("div");i.setAttribute("id","d-overlay-anchor"),i.style.position="fixed",i.style.left="0",i.style.top="0",i.style.zIndex="1000",document.body.appendChild(i)}}};l.FixedOverlay=m,l.FlexibleOverlay=h,l.default=$,l.fixedOverlayProps=k,l.flexibleOverlayProps=x,l.overlayEmits=C,l.overlayProps=p,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.6",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [
@@ -25,7 +25,7 @@
   "style": "style.css",
   "dependencies": {
     "@devui-design/icons": "^1.3.0",
-    "@floating-ui/dom": "^0.4.0",
+    "@floating-ui/dom": "^0.4.4",
     "@types/lodash-es": "^4.17.4",
     "@vueuse/core": "^7.7.1",
     "async-validator": "^4.0.2",

package/popover/index.es.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, toRefs, Fragment } from "vue";
-import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -165,6 +165,9 @@ const flexibleOverlayProps = {
     type: [Number, Object],
     default: 8
   },
+  shiftOffset: {
+    type: Number
+  },
   align: {
     type: String,
     default: null
@@ -232,7 +235,6 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
-      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -240,12 +242,22 @@ function useOverlay(props, emit) {
       })
     ];
     props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
       middleware
     });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
     emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {