vue-devui 1.0.0-beta.1 → 1.0.0-beta.10

package/steps-guide/index.es.js

@@ -1,7 +1,11 @@
-import { computed, ref, reactive, nextTick, defineComponent, onMounted, createVNode, Teleport } from "vue";
+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
@@ -9,25 +13,37 @@ const stepsGuideProps = {
   showDots: {
     type: Boolean,
     default: true
+  },
+  scrollToTargetSwitch: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: 1100
+  },
+  stepChange: {
+    type: Function,
+    default() {
+      return true;
+    }
   }
 };
-function useStepsGuideNav(steps, stepIndex) {
-  const currentStep = computed(() => {
-    const _step = steps[stepIndex.value];
-    _step.position = _step.position || "top";
-    return _step;
-  });
-  const guideClassList = ["d-steps-guide"];
+function useStepsGuidePosition(props, currentStep) {
+  const guideClassList = reactive(["devui-steps-guide"]);
   const stepsRef = ref(null);
   const guidePosition = reactive({
     left: "",
     top: "",
-    zIndex: 1100
+    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;
@@ -36,9 +52,12 @@ function useStepsGuideNav(steps, stepIndex) {
       _top = top;
     } else {
       guideClassList.splice(1, 1, currentStepPosition);
-      const stepGuideElement = stepsRef.value;
       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;
@@ -70,93 +89,95 @@ function useStepsGuideNav(steps, stepIndex) {
     }
     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 {
-    currentStep,
     stepsRef,
     guidePosition,
     guideClassList,
     updateGuidePosition
   };
 }
-function useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition) {
-  const showSteps = ref(true);
-  const closeSteps = () => {
-    showSteps.value = false;
+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 > stepsCount.value || index2 < 0)
-      index2 = 0;
-    stepIndex.value = index2;
-    if (!showSteps.value) {
-      showSteps.value = true;
-      nextTick(() => {
-        updateGuidePosition();
-      });
-    } else {
-      updateGuidePosition();
+    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 {
-    showSteps,
-    closeSteps,
+    stepsCount,
+    closeGuide,
     setCurrentIndex
   };
 }
 var StepsGuide = defineComponent({
   name: "DStepsGuide",
   props: stepsGuideProps,
-  emits: [],
+  emits: ["guide-close", "update:stepIndex"],
   setup(props, ctx) {
-    const stepsCount = computed(() => props.steps.length - 1);
-    const stepIndex = ref(0);
+    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 {
-      currentStep,
       stepsRef,
       guidePosition,
       guideClassList,
       updateGuidePosition
-    } = useStepsGuideNav(props.steps, stepIndex);
+    } = useStepsGuidePosition(props, currentStep);
     const {
-      showSteps,
-      closeSteps,
+      stepsCount,
+      closeGuide,
       setCurrentIndex
-    } = useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition);
+    } = useStepsGuideCtrl(props, ctx, updateGuidePosition, stepIndex);
     onMounted(() => {
       updateGuidePosition();
     });
-    return {
-      stepsCount,
-      stepIndex,
-      showSteps,
-      guidePosition,
-      guideClassList,
-      stepsRef,
-      currentStep,
-      setCurrentIndex,
-      closeSteps
-    };
-  },
-  render(props) {
-    const {
-      showSteps,
-      guidePosition,
-      guideClassList,
-      currentStep,
-      stepIndex,
-      stepsCount,
-      setCurrentIndex,
-      closeSteps,
-      showClose,
-      showDots
-    } = props;
-    return showSteps ? createVNode(Teleport, {
+    ctx.expose({
+      closeGuide,
+      setCurrentIndex
+    });
+    return () => stepIndex.value > -1 && stepsCount.value > 0 ? createVNode(Teleport, {
       "to": "body"
     }, {
       default: () => [createVNode("div", {
         "style": guidePosition,
         "class": guideClassList,
-        "ref": "stepsRef"
+        "ref": stepsRef
       }, [createVNode("div", {
         "class": "devui-shining-dot"
       }, null), createVNode("div", {
@@ -167,45 +188,52 @@ var StepsGuide = defineComponent({
         "class": "devui-guide-container"
       }, [createVNode("p", {
         "class": "devui-title"
-      }, [currentStep.title]), showClose ? createVNode("div", {
+      }, [currentStep.value.title]), props.showClose ? createVNode("div", {
         "class": "icon icon-close",
-        "onClick": closeSteps
+        "onClick": closeGuide
       }, null) : null, createVNode("div", {
         "class": "devui-content"
-      }, [currentStep.content]), createVNode("div", {
+      }, [currentStep.value.content]), createVNode("div", {
         "class": "devui-ctrl"
-      }, [showDots ? createVNode("div", {
+      }, [props.showDots ? createVNode("div", {
         "class": "devui-dots"
       }, [props.steps.map((step, index2) => {
         return createVNode("em", {
-          "class": ["icon icon-dot-status", currentStep === step ? "devui-active" : ""],
+          "class": ["icon icon-dot-status", currentStep.value === step ? "devui-active" : ""],
           "key": index2
         }, null);
       })]) : null, createVNode("div", {
         "class": "devui-guide-btn"
-      }, [stepIndex > 0 ? createVNode("div", {
+      }, [stepIndex.value > 0 ? createVNode("div", {
         "class": "devui-prev-step",
-        "onClick": () => setCurrentIndex(--props.stepIndex)
-      }, ["\u4E0A\u4E00\u6B65"]) : null, stepIndex === stepsCount ? createVNode("div", {
-        "onClick": closeSteps
+        "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(++props.stepIndex);
+          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: "50%",
+  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(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";var b="";const N={steps:Array,showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0}};function V(t,h){const o=e.computed(()=>{const d=t[h.value];return d.position=d.position||"top",d}),s=["d-steps-guide"],r=e.ref(null),a=e.reactive({left:"",top:"",zIndex:1100});return{currentStep:o,stepsRef:r,guidePosition:a,guideClassList:s,updateGuidePosition:()=>{const d=window.pageYOffset-document.documentElement.clientTop,g=window.pageXOffset-document.documentElement.clientLeft,f=o.value.position;let c,l;if(typeof f!="string"){const{top:i=0,left:C=0,type:n="top"}=f;s.splice(1,1,n),c=C,l=i}else{s.splice(1,1,f);const i=r.value,C=o.value.target||o.value.trigger,n=document.querySelector(C),S=n.getBoundingClientRect();c=S.left+n.clientWidth/2-i.clientWidth/2+g,l=S.top+n.clientHeight/2-i.clientHeight/2+d;const v=f.split("-");switch(v[0]){case"top":l+=-i.clientHeight/2-n.clientHeight;break;case"bottom":l+=i.clientHeight/2+n.clientHeight;break;case"left":l+=i.clientHeight/2-n.clientHeight,c+=-i.clientWidth/2-n.clientWidth/2;break;case"right":l+=i.clientHeight/2-n.clientHeight,c+=i.clientWidth/2+n.clientWidth/2;break}switch(v[1]){case"left":c+=i.clientWidth/2-n.clientWidth/2;break;case"right":c+=-i.clientWidth/2+n.clientWidth/2;break}}a.left=c+"px",a.top=l+"px"}}}function y(t,h,o){const s=e.ref(!0);return{showSteps:s,closeSteps:()=>{s.value=!1},setCurrentIndex:p=>{(p>t.value||p<0)&&(p=0),h.value=p,s.value?o():(s.value=!0,e.nextTick(()=>{o()}))}}}var m=e.defineComponent({name:"DStepsGuide",props:N,emits:[],setup(t,h){const o=e.computed(()=>t.steps.length-1),s=e.ref(0),{currentStep:r,stepsRef:a,guidePosition:p,guideClassList:d,updateGuidePosition:g}=V(t.steps,s),{showSteps:f,closeSteps:c,setCurrentIndex:l}=y(o,s,g);return e.onMounted(()=>{g()}),{stepsCount:o,stepIndex:s,showSteps:f,guidePosition:p,guideClassList:d,stepsRef:a,currentStep:r,setCurrentIndex:l,closeSteps:c}},render(t){const{showSteps:h,guidePosition:o,guideClassList:s,currentStep:r,stepIndex:a,stepsCount:p,setCurrentIndex:d,closeSteps:g,showClose:f,showDots:c}=t;return h?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode("div",{style:o,class:s,ref:"stepsRef"},[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"},[r.title]),f?e.createVNode("div",{class:"icon icon-close",onClick:g},null):null,e.createVNode("div",{class:"devui-content"},[r.content]),e.createVNode("div",{class:"devui-ctrl"},[c?e.createVNode("div",{class:"devui-dots"},[t.steps.map((l,i)=>e.createVNode("em",{class:["icon icon-dot-status",r===l?"devui-active":""],key:i},null))]):null,e.createVNode("div",{class:"devui-guide-btn"},[a>0?e.createVNode("div",{class:"devui-prev-step",onClick:()=>d(--t.stepIndex)},["\u4E0A\u4E00\u6B65"]):null,a===p?e.createVNode("div",{onClick:g},["\u6211\u77E5\u9053\u5566"]):e.createVNode("div",{class:"devui-next-step",onClick:()=>{d(++t.stepIndex)}},["\u6211\u77E5\u9053\u5566,\u7EE7\u7EED"])])])])])]}):null}});m.install=function(t){t.component(m.name,m)};var w={title:"StepsGuide \u64CD\u4F5C\u6307\u5F15",category:"\u5BFC\u822A",status:"50%",install(t){t.use(m)}};u.StepsGuide=m,u.default=w,Object.defineProperty(u,"__esModule",{value:!0}),u[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;