vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12

package/steps-guide/index.es.js

@@ -1 +1,239 @@
-import{computed as e,ref as t,reactive as s,nextTick as i,defineComponent as n,onMounted as l,createVNode as o,Teleport as c}from"vue";var u=n({name:"DStepsGuide",props:{steps:Array,showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0}},emits:[],setup(n,o){const c=e((()=>n.steps.length-1)),u=t(0),{currentStep:d,stepsRef:p,guidePosition:a,guideClassList:r,updateGuidePosition:v}=function(i,n){const l=e((()=>{const e=i[n.value];return e.position=e.position||"top",e})),o=["d-steps-guide"],c=t(null),u=s({left:"",top:"",zIndex:1100});return{currentStep:l,stepsRef:c,guidePosition:u,guideClassList:o,updateGuidePosition:()=>{const e=window.pageYOffset-document.documentElement.clientTop,t=window.pageXOffset-document.documentElement.clientLeft,s=l.value.position;let i,n;if("string"!=typeof s){const{top:e=0,left:t=0,type:l="top"}=s;o.splice(1,1,l),i=t,n=e}else{o.splice(1,1,s);const u=c.value,d=l.value.target||l.value.trigger,p=document.querySelector(d),a=p.getBoundingClientRect();i=a.left+p.clientWidth/2-u.clientWidth/2+t,n=a.top+p.clientHeight/2-u.clientHeight/2+e;const r=s.split("-");switch(r[0]){case"top":n+=-u.clientHeight/2-p.clientHeight;break;case"bottom":n+=u.clientHeight/2+p.clientHeight;break;case"left":n+=u.clientHeight/2-p.clientHeight,i+=-u.clientWidth/2-p.clientWidth/2;break;case"right":n+=u.clientHeight/2-p.clientHeight,i+=u.clientWidth/2+p.clientWidth/2}switch(r[1]){case"left":i+=u.clientWidth/2-p.clientWidth/2;break;case"right":i+=-u.clientWidth/2+p.clientWidth/2}}u.left=i+"px",u.top=n+"px"}}}(n.steps,u),{showSteps:g,closeSteps:h,setCurrentIndex:f}=function(e,s,n){const l=t(!0);return{showSteps:l,closeSteps:()=>{l.value=!1},setCurrentIndex:t=>{(t>e.value||t<0)&&(t=0),s.value=t,l.value?n():(l.value=!0,i((()=>{n()})))}}}(c,u,v);return l((()=>{v()})),{stepsCount:c,stepIndex:u,showSteps:g,guidePosition:a,guideClassList:r,stepsRef:p,currentStep:d,setCurrentIndex:f,closeSteps:h}},render(e){const{showSteps:t,guidePosition:s,guideClassList:i,currentStep:n,stepIndex:l,stepsCount:u,setCurrentIndex:d,closeSteps:p,showClose:a,showDots:r}=e;return t?o(c,{to:"body"},{default:()=>[o("div",{style:s,class:i,ref:"stepsRef"},[o("div",{class:"devui-shining-dot"},null),o("div",{class:"devui-shining-plus"},null),o("div",{class:"devui-arrow"},null),o("div",{class:"devui-guide-container"},[o("p",{class:"devui-title"},[n.title]),a?o("div",{class:"icon icon-close",onClick:p},null):null,o("div",{class:"devui-content"},[n.content]),o("div",{class:"devui-ctrl"},[r?o("div",{class:"devui-dots"},[e.steps.map(((e,t)=>o("em",{class:["icon icon-dot-status",n===e?"devui-active":""],key:t},null)))]):null,o("div",{class:"devui-guide-btn"},[l>0?o("div",{class:"devui-prev-step",onClick:()=>d(--e.stepIndex)},["上一步"]):null,l===u?o("div",{onClick:p},["我知道啦"]):o("div",{class:"devui-next-step",onClick:()=>{d(++e.stepIndex)}},["我知道啦,继续"])])])])])]}):null}});u.install=function(e){e.component(u.name,u)};var d={title:"StepsGuide 操作指引",category:"导航",status:"50%",install(e){e.use(u)}};export{u as StepsGuide,d as default};
+import { reactive, ref, nextTick, computed, defineComponent, onMounted, createVNode, Teleport } from "vue";
+var stepsGuide = "";
+const stepsGuideProps = {
+  steps: Array,
+  stepIndex: {
+    type: Number,
+    default: void 0
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  showDots: {
+    type: Boolean,
+    default: true
+  },
+  scrollToTargetSwitch: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: 1100
+  },
+  stepChange: {
+    type: Function,
+    default() {
+      return true;
+    }
+  }
+};
+function useStepsGuidePosition(props, currentStep) {
+  const guideClassList = reactive(["devui-steps-guide"]);
+  const stepsRef = ref(null);
+  const guidePosition = reactive({
+    left: "",
+    top: "",
+    zIndex: props.zIndex
+  });
+  const updateGuidePosition = () => {
+    if (!currentStep.value || !stepsRef.value)
+      return;
+    const baseTop = window.pageYOffset - document.documentElement.clientTop;
+    const baseLeft = window.pageXOffset - document.documentElement.clientLeft;
+    const currentStepPosition = currentStep.value.position;
+    const stepGuideElement = stepsRef.value;
+    let _left, _top;
+    if (typeof currentStepPosition !== "string") {
+      const { top = 0, left = 0, type = "top" } = currentStepPosition;
+      guideClassList.splice(1, 1, type);
+      _left = left;
+      _top = top;
+    } else {
+      guideClassList.splice(1, 1, currentStepPosition);
+      const triggerSelector = currentStep.value.target || currentStep.value.trigger;
+      const triggerElement = document.querySelector(triggerSelector);
+      if (!triggerElement) {
+        console.warn(`${triggerSelector} \u4E0D\u5B58\u5728!`);
+        return false;
+      }
+      const targetRect = triggerElement.getBoundingClientRect();
+      _left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft;
+      _top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop;
+      const positionTypes = currentStepPosition.split("-");
+      switch (positionTypes[0]) {
+        case "top":
+          _top += -stepGuideElement.clientHeight / 2 - triggerElement.clientHeight;
+          break;
+        case "bottom":
+          _top += stepGuideElement.clientHeight / 2 + triggerElement.clientHeight;
+          break;
+        case "left":
+          _top += stepGuideElement.clientHeight / 2 - triggerElement.clientHeight;
+          _left += -stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2;
+          break;
+        case "right":
+          _top += stepGuideElement.clientHeight / 2 - triggerElement.clientHeight;
+          _left += stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2;
+          break;
+      }
+      switch (positionTypes[1]) {
+        case "left":
+          _left += stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2;
+          break;
+        case "right":
+          _left += -stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2;
+          break;
+      }
+    }
+    guidePosition.left = _left + "px";
+    guidePosition.top = _top + "px";
+    if (props.scrollToTargetSwitch && typeof stepGuideElement.scrollIntoView === "function") {
+      nextTick(() => {
+        stepGuideElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      });
+    }
+  };
+  return {
+    stepsRef,
+    guidePosition,
+    guideClassList,
+    updateGuidePosition
+  };
+}
+function useStepsGuideCtrl(props, ctx, updateGuidePosition, stepIndex) {
+  const stepsCount = computed(() => props.steps.length);
+  const closeGuide = () => {
+    const _index = stepIndex.value;
+    stepIndex.value = -1;
+    nextTick(() => {
+      ctx.emit("guide-close", _index);
+    });
+  };
+  const setCurrentIndex = (index2) => {
+    if (index2 !== -1 && props.stepChange()) {
+      if (index2 > -1 && index2 < stepsCount.value) {
+        stepIndex.value = index2;
+        nextTick(() => {
+          updateGuidePosition();
+        });
+      } else {
+        console.error(`stepIndex is not within the value range`);
+      }
+    }
+    if (index2 === -1)
+      closeGuide();
+  };
+  return {
+    stepsCount,
+    closeGuide,
+    setCurrentIndex
+  };
+}
+var StepsGuide = defineComponent({
+  name: "DStepsGuide",
+  props: stepsGuideProps,
+  emits: ["guide-close", "update:stepIndex"],
+  setup(props, ctx) {
+    var _a;
+    const stepIndexData = ref((_a = props.stepIndex) != null ? _a : 0);
+    const stepIndex = computed({
+      set: (val) => {
+        if (props.stepIndex != null) {
+          ctx.emit("update:stepIndex", val);
+        }
+        stepIndexData.value = val;
+      },
+      get: () => stepIndexData.value
+    });
+    const currentStep = computed(() => {
+      const _step = props.steps[stepIndex.value];
+      if (_step)
+        _step.position = _step.position || "top";
+      return _step;
+    });
+    const {
+      stepsRef,
+      guidePosition,
+      guideClassList,
+      updateGuidePosition
+    } = useStepsGuidePosition(props, currentStep);
+    const {
+      stepsCount,
+      closeGuide,
+      setCurrentIndex
+    } = useStepsGuideCtrl(props, ctx, updateGuidePosition, stepIndex);
+    onMounted(() => {
+      updateGuidePosition();
+    });
+    ctx.expose({
+      closeGuide,
+      setCurrentIndex
+    });
+    return () => stepIndex.value > -1 && stepsCount.value > 0 ? createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode("div", {
+        "style": guidePosition,
+        "class": guideClassList,
+        "ref": stepsRef
+      }, [createVNode("div", {
+        "class": "devui-shining-dot"
+      }, null), createVNode("div", {
+        "class": "devui-shining-plus"
+      }, null), createVNode("div", {
+        "class": "devui-arrow"
+      }, null), createVNode("div", {
+        "class": "devui-guide-container"
+      }, [createVNode("p", {
+        "class": "devui-title"
+      }, [currentStep.value.title]), props.showClose ? createVNode("div", {
+        "class": "icon icon-close",
+        "onClick": closeGuide
+      }, null) : null, createVNode("div", {
+        "class": "devui-content"
+      }, [currentStep.value.content]), createVNode("div", {
+        "class": "devui-ctrl"
+      }, [props.showDots ? createVNode("div", {
+        "class": "devui-dots"
+      }, [props.steps.map((step, index2) => {
+        return createVNode("em", {
+          "class": ["icon icon-dot-status", currentStep.value === step ? "devui-active" : ""],
+          "key": index2
+        }, null);
+      })]) : null, createVNode("div", {
+        "class": "devui-guide-btn"
+      }, [stepIndex.value > 0 ? createVNode("div", {
+        "class": "devui-prev-step",
+        "onClick": () => setCurrentIndex(stepIndex.value - 1)
+      }, ["\u4E0A\u4E00\u6B65"]) : null, stepIndex.value === stepsCount.value - 1 ? createVNode("div", {
+        "onClick": closeGuide
+      }, ["\u6211\u77E5\u9053\u5566"]) : createVNode("div", {
+        "class": "devui-next-step",
+        "onClick": () => {
+          setCurrentIndex(stepIndex.value + 1);
+        }
+      }, ["\u6211\u77E5\u9053\u5566,\u7EE7\u7EED"])])])])])]
+    }) : null;
+  }
+});
+var StepsGuideDirective = {
+  mounted(el, binding, vNode) {
+  },
+  updated(el, binding) {
+  }
+};
+StepsGuide.install = function(app) {
+  app.component(StepsGuide.name, StepsGuide);
+};
+var index = {
+  title: "StepsGuide \u64CD\u4F5C\u6307\u5F15",
+  category: "\u5BFC\u822A",
+  status: "80%",
+  install(app) {
+    app.use(StepsGuide);
+    app.directive("StepsGuide", StepsGuideDirective);
+  }
+};
+export { StepsGuide, index as default };

package/steps-guide/index.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,t){"use strict";const i={steps:Array,showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0}};var s=t.defineComponent({name:"DStepsGuide",props:i,emits:[],setup(e,i){const s=t.computed((()=>e.steps.length-1)),n=t.ref(0),{currentStep:o,stepsRef:l,guidePosition:c,guideClassList:d,updateGuidePosition:u}=function(e,i){const s=t.computed((()=>{const t=e[i.value];return t.position=t.position||"top",t})),n=["d-steps-guide"],o=t.ref(null),l=t.reactive({left:"",top:"",zIndex:1100});return{currentStep:s,stepsRef:o,guidePosition:l,guideClassList:n,updateGuidePosition:()=>{const e=window.pageYOffset-document.documentElement.clientTop,t=window.pageXOffset-document.documentElement.clientLeft,i=s.value.position;let c,d;if("string"!=typeof i){const{top:e=0,left:t=0,type:s="top"}=i;n.splice(1,1,s),c=t,d=e}else{n.splice(1,1,i);const l=o.value,u=s.value.target||s.value.trigger,a=document.querySelector(u),r=a.getBoundingClientRect();c=r.left+a.clientWidth/2-l.clientWidth/2+t,d=r.top+a.clientHeight/2-l.clientHeight/2+e;const p=i.split("-");switch(p[0]){case"top":d+=-l.clientHeight/2-a.clientHeight;break;case"bottom":d+=l.clientHeight/2+a.clientHeight;break;case"left":d+=l.clientHeight/2-a.clientHeight,c+=-l.clientWidth/2-a.clientWidth/2;break;case"right":d+=l.clientHeight/2-a.clientHeight,c+=l.clientWidth/2+a.clientWidth/2}switch(p[1]){case"left":c+=l.clientWidth/2-a.clientWidth/2;break;case"right":c+=-l.clientWidth/2+a.clientWidth/2}}l.left=c+"px",l.top=d+"px"}}}(e.steps,n),{showSteps:a,closeSteps:r,setCurrentIndex:p}=function(e,i,s){const n=t.ref(!0);return{showSteps:n,closeSteps:()=>{n.value=!1},setCurrentIndex:o=>{(o>e.value||o<0)&&(o=0),i.value=o,n.value?s():(n.value=!0,t.nextTick((()=>{s()})))}}}(s,n,u);return t.onMounted((()=>{u()})),{stepsCount:s,stepIndex:n,showSteps:a,guidePosition:c,guideClassList:d,stepsRef:l,currentStep:o,setCurrentIndex:p,closeSteps:r}},render(e){const{showSteps:i,guidePosition:s,guideClassList:n,currentStep:o,stepIndex:l,stepsCount:c,setCurrentIndex:d,closeSteps:u,showClose:a,showDots:r}=e;return i?t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode("div",{style:s,class:n,ref:"stepsRef"},[t.createVNode("div",{class:"devui-shining-dot"},null),t.createVNode("div",{class:"devui-shining-plus"},null),t.createVNode("div",{class:"devui-arrow"},null),t.createVNode("div",{class:"devui-guide-container"},[t.createVNode("p",{class:"devui-title"},[o.title]),a?t.createVNode("div",{class:"icon icon-close",onClick:u},null):null,t.createVNode("div",{class:"devui-content"},[o.content]),t.createVNode("div",{class:"devui-ctrl"},[r?t.createVNode("div",{class:"devui-dots"},[e.steps.map(((e,i)=>t.createVNode("em",{class:["icon icon-dot-status",o===e?"devui-active":""],key:i},null)))]):null,t.createVNode("div",{class:"devui-guide-btn"},[l>0?t.createVNode("div",{class:"devui-prev-step",onClick:()=>d(--e.stepIndex)},["上一步"]):null,l===c?t.createVNode("div",{onClick:u},["我知道啦"]):t.createVNode("div",{class:"devui-next-step",onClick:()=>{d(++e.stepIndex)}},["我知道啦,继续"])])])])])]}):null}});s.install=function(e){e.component(s.name,s)};var n={title:"StepsGuide 操作指引",category:"导航",status:"50%",install(e){e.use(s)}};e.StepsGuide=s,e.default=n,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";var x="";const y={steps:Array,stepIndex:{type:Number,default:void 0},showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0},scrollToTargetSwitch:{type:Boolean,default:!0},zIndex:{type:Number,default:1100},stepChange:{type:Function,default(){return!0}}};function b(i,o){const r=e.reactive(["devui-steps-guide"]),n=e.ref(null),l=e.reactive({left:"",top:"",zIndex:i.zIndex});return{stepsRef:n,guidePosition:l,guideClassList:r,updateGuidePosition:()=>{if(!o.value||!n.value)return;const m=window.pageYOffset-document.documentElement.clientTop,c=window.pageXOffset-document.documentElement.clientLeft,p=o.value.position,s=n.value;let d,u;if(typeof p!="string"){const{top:f=0,left:t=0,type:g="top"}=p;r.splice(1,1,g),d=t,u=f}else{r.splice(1,1,p);const f=o.value.target||o.value.trigger,t=document.querySelector(f);if(!t)return console.warn(`${f} \u4E0D\u5B58\u5728!`),!1;const g=t.getBoundingClientRect();d=g.left+t.clientWidth/2-s.clientWidth/2+c,u=g.top+t.clientHeight/2-s.clientHeight/2+m;const C=p.split("-");switch(C[0]){case"top":u+=-s.clientHeight/2-t.clientHeight;break;case"bottom":u+=s.clientHeight/2+t.clientHeight;break;case"left":u+=s.clientHeight/2-t.clientHeight,d+=-s.clientWidth/2-t.clientWidth/2;break;case"right":u+=s.clientHeight/2-t.clientHeight,d+=s.clientWidth/2+t.clientWidth/2;break}switch(C[1]){case"left":d+=s.clientWidth/2-t.clientWidth/2;break;case"right":d+=-s.clientWidth/2+t.clientWidth/2;break}}l.left=d+"px",l.top=u+"px",i.scrollToTargetSwitch&&typeof s.scrollIntoView=="function"&&e.nextTick(()=>{s.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})})}}}function N(i,o,r,n){const l=e.computed(()=>i.steps.length),v=()=>{const c=n.value;n.value=-1,e.nextTick(()=>{o.emit("guide-close",c)})};return{stepsCount:l,closeGuide:v,setCurrentIndex:c=>{c!==-1&&i.stepChange()&&(c>-1&&c<l.value?(n.value=c,e.nextTick(()=>{r()})):console.error("stepIndex is not within the value range")),c===-1&&v()}}}var h=e.defineComponent({name:"DStepsGuide",props:y,emits:["guide-close","update:stepIndex"],setup(i,o){var f;const r=e.ref((f=i.stepIndex)!=null?f:0),n=e.computed({set:t=>{i.stepIndex!=null&&o.emit("update:stepIndex",t),r.value=t},get:()=>r.value}),l=e.computed(()=>{const t=i.steps[n.value];return t&&(t.position=t.position||"top"),t}),{stepsRef:v,guidePosition:m,guideClassList:c,updateGuidePosition:p}=b(i,l),{stepsCount:s,closeGuide:d,setCurrentIndex:u}=N(i,o,p,n);return e.onMounted(()=>{p()}),o.expose({closeGuide:d,setCurrentIndex:u}),()=>n.value>-1&&s.value>0?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode("div",{style:m,class:c,ref:v},[e.createVNode("div",{class:"devui-shining-dot"},null),e.createVNode("div",{class:"devui-shining-plus"},null),e.createVNode("div",{class:"devui-arrow"},null),e.createVNode("div",{class:"devui-guide-container"},[e.createVNode("p",{class:"devui-title"},[l.value.title]),i.showClose?e.createVNode("div",{class:"icon icon-close",onClick:d},null):null,e.createVNode("div",{class:"devui-content"},[l.value.content]),e.createVNode("div",{class:"devui-ctrl"},[i.showDots?e.createVNode("div",{class:"devui-dots"},[i.steps.map((t,g)=>e.createVNode("em",{class:["icon icon-dot-status",l.value===t?"devui-active":""],key:g},null))]):null,e.createVNode("div",{class:"devui-guide-btn"},[n.value>0?e.createVNode("div",{class:"devui-prev-step",onClick:()=>u(n.value-1)},["\u4E0A\u4E00\u6B65"]):null,n.value===s.value-1?e.createVNode("div",{onClick:d},["\u6211\u77E5\u9053\u5566"]):e.createVNode("div",{class:"devui-next-step",onClick:()=>{u(n.value+1)}},["\u6211\u77E5\u9053\u5566,\u7EE7\u7EED"])])])])])]}):null}}),V={mounted(i,o,r){},updated(i,o){}};h.install=function(i){i.component(h.name,h)};var w={title:"StepsGuide \u64CD\u4F5C\u6307\u5F15",category:"\u5BFC\u822A",status:"80%",install(i){i.use(h),i.directive("StepsGuide",V)}};a.StepsGuide=h,a.default=w,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/steps-guide/style.css

@@ -1 +1 @@
-@charset "UTF-8";.d-steps-guide{width:400px;min-height:160px;background:#5e7ce0;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) #5170ff4d;border-radius:var(--devui-border-radius-feedback, 4px);font-size:12px;color:#fff;padding:20px;position:absolute}.d-steps-guide .devui-title{font-size:12px;opacity:1;margin:0 0 20px;padding:0}.d-steps-guide>.devui-arrow,.d-steps-guide>.devui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.d-steps-guide>.devui-arrow{border-width:8px}.d-steps-guide.left>.devui-arrow{top:23px;right:-6px;margin-top:-3px;border-right-width:0;transform:rotate(-135deg);border-left-color:#5e7ce0}.d-steps-guide.top>.devui-arrow,.d-steps-guide.top-left>.devui-arrow,.d-steps-guide.top-right>.devui-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#5e7ce0;transform:rotate(135deg)}.d-steps-guide.top>.devui-arrow{left:calc(50% - 4px)}.d-steps-guide.top-left>.devui-arrow{left:23px}.d-steps-guide.top-right>.devui-arrow{right:23px;transform:rotate(-135deg)}.d-steps-guide.right>.devui-arrow{top:23px;left:-6px;margin-top:-3px;border-left-width:0;transform:rotate(135deg);border-right-color:#5e7ce0}.d-steps-guide.bottom>.devui-arrow,.d-steps-guide.bottom-left>.devui-arrow,.d-steps-guide.bottom-right>.devui-arrow{top:-6px;margin-left:3px;border-top-width:0;border-bottom-color:#5e7ce0}.d-steps-guide.bottom>.devui-arrow{left:calc(50% - 4px);transform:rotate(-135deg)}.d-steps-guide.bottom-right>.devui-arrow{right:23px;transform:rotate(135deg)}.d-steps-guide.bottom-left>.devui-arrow{left:23px;transform:rotate(-135deg)}.d-steps-guide>.devui-shining-dot,.d-steps-guide .devui-shining-plus{position:absolute;background:#5e7ce0;width:6px;height:6px;border-radius:var(--devui-border-radius-feedback, 4px)}.d-steps-guide.left>.devui-shining-dot,.d-steps-guide.left>.devui-shining-plus{top:21px;right:-30px}.d-steps-guide.right>.devui-shining-dot,.d-steps-guide.right>.devui-shining-plus{top:21px;left:-30px}.d-steps-guide.top>.devui-shining-dot,.d-steps-guide.top>.devui-shining-plus{left:calc(50% - 3px);bottom:-30px}.d-steps-guide.top-left>.devui-shining-dot,.d-steps-guide.top-left>.devui-shining-plus{left:21px;bottom:-30px}.d-steps-guide.top-right>.devui-shining-dot,.d-steps-guide.top-right>.devui-shining-plus{right:21px;bottom:-30px}.d-steps-guide.bottom>.devui-shining-dot,.d-steps-guide.bottom>.devui-shining-plus{left:calc(50% - 3px);top:-30px}.d-steps-guide.bottom-right>.devui-shining-dot,.d-steps-guide.bottom-right>.devui-shining-plus{top:-30px;right:21px}.d-steps-guide.bottom-left>.devui-shining-dot,.d-steps-guide.bottom-left>.devui-shining-plus{top:-30px;left:21px}.d-steps-guide .devui-shining-plus{animation:devui-glow 2s 0s infinite}.d-steps-guide .devui-guide-container{position:relative}.d-steps-guide .devui-guide-container>.icon-close{position:absolute;top:0;right:0;cursor:pointer}.d-steps-guide .devui-guide-container .devui-ctrl{display:flex;flex-wrap:wrap}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots{color:#fff;position:relative;top:25px;font-size:12px;height:30px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em{opacity:.2;margin:0 5px 0 2px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em.devui-active{opacity:1}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn{display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-end;padding:20px 0 0;white-space:nowrap}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div{color:#fff;background:rgba(255,255,255,.1);border-radius:4px;padding:5px 15px;cursor:pointer;margin-left:10px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div.devui-prev-step{background:none;border:solid 1px rgba(255,255,255,.1)}@keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}
+@charset "UTF-8";.devui-steps-guide{width:400px;min-height:160px;background:#5e7ce0;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) #5170ff4d;border-radius:var(--devui-border-radius-feedback, 4px);font-size:12px;color:#fff;padding:20px;position:absolute}.devui-steps-guide .devui-title{font-size:12px;opacity:1;margin:0 0 20px;padding:0}.devui-steps-guide>.devui-arrow,.devui-steps-guide>.devui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.devui-steps-guide>.devui-arrow{border-width:8px}.devui-steps-guide.left>.devui-arrow{top:23px;right:-6px;margin-top:-3px;border-right-width:0;transform:rotate(-135deg);border-left-color:#5e7ce0}.devui-steps-guide.top>.devui-arrow,.devui-steps-guide.top-left>.devui-arrow,.devui-steps-guide.top-right>.devui-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#5e7ce0;transform:rotate(135deg)}.devui-steps-guide.top>.devui-arrow{left:calc(50% - 4px)}.devui-steps-guide.top-left>.devui-arrow{left:23px}.devui-steps-guide.top-right>.devui-arrow{right:23px;transform:rotate(-135deg)}.devui-steps-guide.right>.devui-arrow{top:23px;left:-6px;margin-top:-3px;border-left-width:0;transform:rotate(135deg);border-right-color:#5e7ce0}.devui-steps-guide.bottom>.devui-arrow,.devui-steps-guide.bottom-left>.devui-arrow,.devui-steps-guide.bottom-right>.devui-arrow{top:-6px;margin-left:3px;border-top-width:0;border-bottom-color:#5e7ce0}.devui-steps-guide.bottom>.devui-arrow{left:calc(50% - 4px);transform:rotate(-135deg)}.devui-steps-guide.bottom-right>.devui-arrow{right:23px;transform:rotate(135deg)}.devui-steps-guide.bottom-left>.devui-arrow{left:23px;transform:rotate(-135deg)}.devui-steps-guide>.devui-shining-dot,.devui-steps-guide .devui-shining-plus{position:absolute;background:#5e7ce0;width:6px;height:6px;border-radius:var(--devui-border-radius-feedback, 4px)}.devui-steps-guide.left>.devui-shining-dot,.devui-steps-guide.left>.devui-shining-plus{top:21px;right:-30px}.devui-steps-guide.right>.devui-shining-dot,.devui-steps-guide.right>.devui-shining-plus{top:21px;left:-30px}.devui-steps-guide.top>.devui-shining-dot,.devui-steps-guide.top>.devui-shining-plus{left:calc(50% - 3px);bottom:-30px}.devui-steps-guide.top-left>.devui-shining-dot,.devui-steps-guide.top-left>.devui-shining-plus{left:21px;bottom:-30px}.devui-steps-guide.top-right>.devui-shining-dot,.devui-steps-guide.top-right>.devui-shining-plus{right:21px;bottom:-30px}.devui-steps-guide.bottom>.devui-shining-dot,.devui-steps-guide.bottom>.devui-shining-plus{left:calc(50% - 3px);top:-30px}.devui-steps-guide.bottom-right>.devui-shining-dot,.devui-steps-guide.bottom-right>.devui-shining-plus{top:-30px;right:21px}.devui-steps-guide.bottom-left>.devui-shining-dot,.devui-steps-guide.bottom-left>.devui-shining-plus{top:-30px;left:21px}.devui-steps-guide .devui-shining-plus{animation:devui-glow 2s 0s infinite}.devui-steps-guide .devui-guide-container{position:relative}.devui-steps-guide .devui-guide-container>.icon-close{position:absolute;top:0;right:0;cursor:pointer}.devui-steps-guide .devui-guide-container .devui-ctrl{display:flex;flex-wrap:wrap}.devui-steps-guide .devui-guide-container .devui-ctrl .devui-dots{color:#fff;position:relative;top:25px;font-size:12px;height:30px}.devui-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em{opacity:.2;margin:0 5px 0 2px}.devui-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em.devui-active{opacity:1}.devui-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn{display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-end;padding:20px 0 0;white-space:nowrap}.devui-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div{color:#fff;background:rgba(255,255,255,.1);border-radius:4px;padding:5px 15px;cursor:pointer;margin-left:10px}.devui-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div.devui-prev-step{background:none;border:solid 1px rgba(255,255,255,.1)}@keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}

package/sticky/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/sticky/index.es.js

@@ -1 +1,197 @@
-import{defineComponent as t,reactive as e,watch as o,onMounted as n,ref as i,createVNode as l}from"vue";var s=t({name:"DSticky",props:{zIndex:{type:Number},container:{type:Object},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Object}},emits:["statusChange"],setup(t,s){const{slots:a}=s;let d,p,u,r;let c,g=0;const m=e({status:"normal"});o((()=>t.zIndex),(()=>{w()})),o((()=>t.container),(()=>{w()})),o((()=>t.scrollTarget),(()=>{w()})),o((()=>m.status),(()=>{s.emit("statusChange",m.status)}),{immediate:!0});const w=()=>{c=R.value.parentElement,d=t.container?t.container:c,R.value.style.zIndex=t.zIndex,p=t.scrollTarget||window,p.addEventListener("scroll",v),y(p)},y=t=>{const e=t===window?[document.documentElement,document.body]:[t];let o=!1;e.forEach((t=>{t.scrollTop&&t.scrollTop>0&&(o=!0)})),o&&setTimeout(B)},f=e=>{const o=R.value||document.createElement("div");switch(e){case"normal":o.style.top="auto",o.style.left="auto",o.style.position="static";break;case"follow":const e=p,n=p&&p!==window?e.getBoundingClientRect().top:0;o.style.top=+n+(t.view&&t.view.top||0)+"px",o.style.left=o.getBoundingClientRect().left+"px",o.style.position="fixed";break;case"stay":o.style.top=b(o,c,"top")+"px",o.style.left="auto",o.style.position="relative";break;case"remain":"fixed"!==o.style.position&&"absolute"!==o.style.position&&(o.style.top=b(o,c,"top")+"px",o.style.left="auto",o.style.position="absolute"),o.style.top=h(o,c,d)+"px",o.style.left=b(o,c,"left")+"px",o.style.position="relative"}},v=()=>{const t=C,e=Date.now();u&&clearTimeout(u),r||(r=e),e-r>100?(t(),r=null,u=null):u=setTimeout((()=>{t(),r=null,u=null}),16)},C=()=>{d.getBoundingClientRect().left-(g||0)!=0?(m.status="stay",g=d.getBoundingClientRect().left):B()},B=()=>{const e=p,o=R.value||document.createElement("div"),n=p&&p!==window?e.getBoundingClientRect().top:0,i=window.getComputedStyle(d);c.getBoundingClientRect().top-n>(t.view&&t.view.top||0)||d.getBoundingClientRect().top+parseInt(i.paddingTop,10)+parseInt(i.borderTopWidth,10)-n>=(t.view&&t.view.top||0)?(m.status="normal",f(m.status)):d.getBoundingClientRect().bottom-parseInt(i.paddingBottom,10)-parseInt(i.borderBottomWidth,10)<n+(t.view&&t.view.top||0)+o.getBoundingClientRect().height+(t.view&&t.view.bottom||0)?(m.status="remain",f(m.status)):d.getBoundingClientRect().top+parseInt(i.paddingTop,10)-n<(t.view&&t.view.top||0)&&(m.status="follow",f(m.status))},b=(t,e,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const i=window.getComputedStyle(e);return t.getBoundingClientRect()[n[o][0]]-e.getBoundingClientRect()[n[o][0]]-parseInt(i["left"===o?"paddingLeft":"paddingTop"],10)-parseInt(i["left"===o?"borderLeftWidth":"borderTopWidth"],10)}},h=(t,e,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),i=o.getBoundingClientRect().height-t.getBoundingClientRect().height+o.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return i<0?0:i}};n((()=>{w()}));const R=i();return()=>l("div",{ref:R},[a.default?a.default():""])}});s.install=function(t){t.component(s.name,s)};var a={title:"Sticky 便贴",category:"通用",status:"50%",install(t){t.use(s)}};export{s as Sticky,a as default};
+import { defineComponent, reactive, watch, onMounted, ref, createVNode } from "vue";
+var Sticky = defineComponent({
+  name: "DSticky",
+  props: {
+    zIndex: {
+      type: Number
+    },
+    container: {
+      type: Object
+    },
+    view: {
+      type: Object,
+      default: () => {
+        return {
+          top: 0,
+          bottom: 0
+        };
+      }
+    },
+    scrollTarget: {
+      type: Object
+    }
+  },
+  emits: ["statusChange"],
+  setup(props, ctx) {
+    const {
+      slots
+    } = ctx;
+    let container;
+    let scrollTarget;
+    let scrollTimer;
+    let scrollPreStart;
+    const THROTTLE_DELAY = 16;
+    const THROTTLE_TRIGGER = 100;
+    let parentNode;
+    let containerLeft = 0;
+    const state = reactive({
+      status: "normal"
+    });
+    watch(() => props.zIndex, () => {
+      init();
+    });
+    watch(() => props.container, () => {
+      init();
+    });
+    watch(() => props.scrollTarget, () => {
+      init();
+    });
+    watch(() => state.status, () => {
+      ctx.emit("statusChange", state.status);
+    }, {
+      immediate: true
+    });
+    const init = () => {
+      parentNode = stickyRef.value.parentElement;
+      if (!props.container) {
+        container = parentNode;
+      } else {
+        container = props.container;
+      }
+      stickyRef.value.style.zIndex = props.zIndex;
+      scrollTarget = props.scrollTarget || window;
+      scrollTarget.addEventListener("scroll", throttle);
+      initScrollStatus(scrollTarget);
+    };
+    const initScrollStatus = (target) => {
+      const scrollTargets = target === window ? [document.documentElement, document.body] : [target];
+      let flag = false;
+      scrollTargets.forEach((scrollTarget2) => {
+        if (scrollTarget2.scrollTop && scrollTarget2.scrollTop > 0) {
+          flag = true;
+        }
+      });
+      if (flag) {
+        setTimeout(scrollHandler);
+      }
+    };
+    const statusProcess = (status) => {
+      const wrapper = stickyRef.value || document.createElement("div");
+      switch (status) {
+        case "normal":
+          wrapper.style.top = "auto";
+          wrapper.style.left = "auto";
+          wrapper.style.position = "static";
+          break;
+        case "follow":
+          const scrollTargetElement = scrollTarget;
+          const viewOffset = scrollTarget && scrollTarget !== window ? scrollTargetElement.getBoundingClientRect().top : 0;
+          wrapper.style.top = +viewOffset + (props.view && props.view.top || 0) + "px";
+          wrapper.style.left = wrapper.getBoundingClientRect().left + "px";
+          wrapper.style.position = "fixed";
+          break;
+        case "stay":
+          wrapper.style.top = calculateRelativePosition(wrapper, parentNode, "top") + "px";
+          wrapper.style.left = "auto";
+          wrapper.style.position = "relative";
+          break;
+        case "remain":
+          if (wrapper.style.position !== "fixed" && wrapper.style.position !== "absolute") {
+            wrapper.style.top = calculateRelativePosition(wrapper, parentNode, "top") + "px";
+            wrapper.style.left = "auto";
+            wrapper.style.position = "absolute";
+          }
+          wrapper.style.top = calculateRemainPosition(wrapper, parentNode, container) + "px";
+          wrapper.style.left = calculateRelativePosition(wrapper, parentNode, "left") + "px";
+          wrapper.style.position = "relative";
+          break;
+      }
+    };
+    const throttle = () => {
+      const fn = scrollAndResizeHock;
+      const time = Date.now();
+      if (scrollTimer) {
+        clearTimeout(scrollTimer);
+      }
+      if (!scrollPreStart) {
+        scrollPreStart = time;
+      }
+      if (time - scrollPreStart > THROTTLE_TRIGGER) {
+        fn();
+        scrollPreStart = null;
+        scrollTimer = null;
+      } else {
+        scrollTimer = setTimeout(() => {
+          fn();
+          scrollPreStart = null;
+          scrollTimer = null;
+        }, THROTTLE_DELAY);
+      }
+    };
+    const scrollAndResizeHock = () => {
+      if (container.getBoundingClientRect().left - (containerLeft || 0) !== 0) {
+        state.status = "stay";
+        containerLeft = container.getBoundingClientRect().left;
+      } else {
+        scrollHandler();
+      }
+    };
+    const scrollHandler = () => {
+      const scrollTargetElement = scrollTarget;
+      const wrapper = stickyRef.value || document.createElement("div");
+      const viewOffsetTop = scrollTarget && scrollTarget !== window ? scrollTargetElement.getBoundingClientRect().top : 0;
+      const computedStyle = window.getComputedStyle(container);
+      if (parentNode.getBoundingClientRect().top - viewOffsetTop > (props.view && props.view.top || 0)) {
+        state.status = "normal";
+        statusProcess(state.status);
+      } else if (container.getBoundingClientRect().top + parseInt(computedStyle.paddingTop, 10) + parseInt(computedStyle.borderTopWidth, 10) - viewOffsetTop >= (props.view && props.view.top || 0)) {
+        state.status = "normal";
+        statusProcess(state.status);
+      } else if (container.getBoundingClientRect().bottom - parseInt(computedStyle.paddingBottom, 10) - parseInt(computedStyle.borderBottomWidth, 10) < viewOffsetTop + (props.view && props.view.top || 0) + wrapper.getBoundingClientRect().height + (props.view && props.view.bottom || 0)) {
+        state.status = "remain";
+        statusProcess(state.status);
+      } else if (container.getBoundingClientRect().top + parseInt(computedStyle.paddingTop, 10) - viewOffsetTop < (props.view && props.view.top || 0)) {
+        state.status = "follow";
+        statusProcess(state.status);
+      }
+    };
+    const calculateRelativePosition = (element, relativeElement, direction) => {
+      const key = {
+        left: ["left", "Left"],
+        top: ["top", "Top"]
+      };
+      if (window && window.getComputedStyle) {
+        const computedStyle = window.getComputedStyle(relativeElement);
+        return element.getBoundingClientRect()[key[direction][0]] - relativeElement.getBoundingClientRect()[key[direction][0]] - parseInt(computedStyle[direction === "left" ? "paddingLeft" : "paddingTop"], 10) - parseInt(computedStyle[direction === "left" ? "borderLeftWidth" : "borderTopWidth"], 10);
+      }
+    };
+    const calculateRemainPosition = (element, relativeElement, container2) => {
+      if (window && window.getComputedStyle) {
+        const computedStyle = window.getComputedStyle(container2);
+        const result = container2.getBoundingClientRect().height - element.getBoundingClientRect().height + container2.getBoundingClientRect().top - relativeElement.getBoundingClientRect().top - parseInt(computedStyle["paddingTop"], 10) - parseInt(computedStyle["borderTopWidth"], 10) - parseInt(computedStyle["paddingBottom"], 10) - parseInt(computedStyle["borderBottomWidth"], 10);
+        return result < 0 ? 0 : result;
+      }
+    };
+    onMounted(() => {
+      init();
+    });
+    const stickyRef = ref();
+    return () => {
+      return createVNode("div", {
+        "ref": stickyRef
+      }, [slots.default ? slots.default() : ""]);
+    };
+  }
+});
+Sticky.install = function(app) {
+  app.component(Sticky.name, Sticky);
+};
+var index = {
+  title: "Sticky \u4FBF\u8D34",
+  category: "\u901A\u7528",
+  status: "50%",
+  install(app) {
+    app.use(Sticky);
+  }
+};
+export { Sticky, index as default };

package/sticky/index.umd.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).index={},t.Vue)}(this,(function(t,e){"use strict";var o=e.defineComponent({name:"DSticky",props:{zIndex:{type:Number},container:{type:Object},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Object}},emits:["statusChange"],setup(t,o){const{slots:n}=o;let i,l,s,a;let d,p=0;const u=e.reactive({status:"normal"});e.watch((()=>t.zIndex),(()=>{r()})),e.watch((()=>t.container),(()=>{r()})),e.watch((()=>t.scrollTarget),(()=>{r()})),e.watch((()=>u.status),(()=>{o.emit("statusChange",u.status)}),{immediate:!0});const r=()=>{d=b.value.parentElement,i=t.container?t.container:d,b.value.style.zIndex=t.zIndex,l=t.scrollTarget||window,l.addEventListener("scroll",f),c(l)},c=t=>{const e=t===window?[document.documentElement,document.body]:[t];let o=!1;e.forEach((t=>{t.scrollTop&&t.scrollTop>0&&(o=!0)})),o&&setTimeout(m)},g=e=>{const o=b.value||document.createElement("div");switch(e){case"normal":o.style.top="auto",o.style.left="auto",o.style.position="static";break;case"follow":const e=l,n=l&&l!==window?e.getBoundingClientRect().top:0;o.style.top=+n+(t.view&&t.view.top||0)+"px",o.style.left=o.getBoundingClientRect().left+"px",o.style.position="fixed";break;case"stay":o.style.top=y(o,d,"top")+"px",o.style.left="auto",o.style.position="relative";break;case"remain":"fixed"!==o.style.position&&"absolute"!==o.style.position&&(o.style.top=y(o,d,"top")+"px",o.style.left="auto",o.style.position="absolute"),o.style.top=v(o,d,i)+"px",o.style.left=y(o,d,"left")+"px",o.style.position="relative"}},f=()=>{const t=w,e=Date.now();s&&clearTimeout(s),a||(a=e),e-a>100?(t(),a=null,s=null):s=setTimeout((()=>{t(),a=null,s=null}),16)},w=()=>{i.getBoundingClientRect().left-(p||0)!=0?(u.status="stay",p=i.getBoundingClientRect().left):m()},m=()=>{const e=l,o=b.value||document.createElement("div"),n=l&&l!==window?e.getBoundingClientRect().top:0,s=window.getComputedStyle(i);d.getBoundingClientRect().top-n>(t.view&&t.view.top||0)||i.getBoundingClientRect().top+parseInt(s.paddingTop,10)+parseInt(s.borderTopWidth,10)-n>=(t.view&&t.view.top||0)?(u.status="normal",g(u.status)):i.getBoundingClientRect().bottom-parseInt(s.paddingBottom,10)-parseInt(s.borderBottomWidth,10)<n+(t.view&&t.view.top||0)+o.getBoundingClientRect().height+(t.view&&t.view.bottom||0)?(u.status="remain",g(u.status)):i.getBoundingClientRect().top+parseInt(s.paddingTop,10)-n<(t.view&&t.view.top||0)&&(u.status="follow",g(u.status))},y=(t,e,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const i=window.getComputedStyle(e);return t.getBoundingClientRect()[n[o][0]]-e.getBoundingClientRect()[n[o][0]]-parseInt(i["left"===o?"paddingLeft":"paddingTop"],10)-parseInt(i["left"===o?"borderLeftWidth":"borderTopWidth"],10)}},v=(t,e,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),i=o.getBoundingClientRect().height-t.getBoundingClientRect().height+o.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return i<0?0:i}};e.onMounted((()=>{r()}));const b=e.ref();return()=>e.createVNode("div",{ref:b},[n.default?n.default():""])}});o.install=function(t){t.component(o.name,o)};var n={title:"Sticky 便贴",category:"通用",status:"50%",install(t){t.use(o)}};t.Sticky=o,t.default=n,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"}));
+(function(a,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(a=typeof globalThis!="undefined"?globalThis:a||self,i(a.index={},a.Vue))})(this,function(a,i){"use strict";var r=i.defineComponent({name:"DSticky",props:{zIndex:{type:Number},container:{type:Object},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Object}},emits:["statusChange"],setup(e,h){const{slots:C}=h;let c,d,f,g;const B=16,S=100;let u,R=0;const s=i.reactive({status:"normal"});i.watch(()=>e.zIndex,()=>{w()}),i.watch(()=>e.container,()=>{w()}),i.watch(()=>e.scrollTarget,()=>{w()}),i.watch(()=>s.status,()=>{h.emit("statusChange",s.status)},{immediate:!0});const w=()=>{u=p.value.parentElement,e.container?c=e.container:c=u,p.value.style.zIndex=e.zIndex,d=e.scrollTarget||window,d.addEventListener("scroll",x),I(d)},I=l=>{const t=l===window?[document.documentElement,document.body]:[l];let o=!1;t.forEach(n=>{n.scrollTop&&n.scrollTop>0&&(o=!0)}),o&&setTimeout(v)},y=l=>{const t=p.value||document.createElement("div");switch(l){case"normal":t.style.top="auto",t.style.left="auto",t.style.position="static";break;case"follow":const n=d&&d!==window?d.getBoundingClientRect().top:0;t.style.top=+n+(e.view&&e.view.top||0)+"px",t.style.left=t.getBoundingClientRect().left+"px",t.style.position="fixed";break;case"stay":t.style.top=T(t,u,"top")+"px",t.style.left="auto",t.style.position="relative";break;case"remain":t.style.position!=="fixed"&&t.style.position!=="absolute"&&(t.style.top=T(t,u,"top")+"px",t.style.left="auto",t.style.position="absolute"),t.style.top=k(t,u,c)+"px",t.style.left=T(t,u,"left")+"px",t.style.position="relative";break}},x=()=>{const l=E,t=Date.now();f&&clearTimeout(f),g||(g=t),t-g>S?(l(),g=null,f=null):f=setTimeout(()=>{l(),g=null,f=null},B)},E=()=>{c.getBoundingClientRect().left-(R||0)!=0?(s.status="stay",R=c.getBoundingClientRect().left):v()},v=()=>{const l=d,t=p.value||document.createElement("div"),o=d&&d!==window?l.getBoundingClientRect().top:0,n=window.getComputedStyle(c);u.getBoundingClientRect().top-o>(e.view&&e.view.top||0)||c.getBoundingClientRect().top+parseInt(n.paddingTop,10)+parseInt(n.borderTopWidth,10)-o>=(e.view&&e.view.top||0)?(s.status="normal",y(s.status)):c.getBoundingClientRect().bottom-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10)<o+(e.view&&e.view.top||0)+t.getBoundingClientRect().height+(e.view&&e.view.bottom||0)?(s.status="remain",y(s.status)):c.getBoundingClientRect().top+parseInt(n.paddingTop,10)-o<(e.view&&e.view.top||0)&&(s.status="follow",y(s.status))},T=(l,t,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const m=window.getComputedStyle(t);return l.getBoundingClientRect()[n[o][0]]-t.getBoundingClientRect()[n[o][0]]-parseInt(m[o==="left"?"paddingLeft":"paddingTop"],10)-parseInt(m[o==="left"?"borderLeftWidth":"borderTopWidth"],10)}},k=(l,t,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),m=o.getBoundingClientRect().height-l.getBoundingClientRect().height+o.getBoundingClientRect().top-t.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return m<0?0:m}};i.onMounted(()=>{w()});const p=i.ref();return()=>i.createVNode("div",{ref:p},[C.default?C.default():""])}});r.install=function(e){e.component(r.name,r)};var b={title:"Sticky \u4FBF\u8D34",category:"\u901A\u7528",status:"50%",install(e){e.use(r)}};a.Sticky=r,a.default=b,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});