vue-devui 1.0.0-beta.5 → 1.0.0-beta.6

package/overlay/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [
@@ -27,7 +27,7 @@
     "serve": "vitepress serve docs",
     "app:dev": "vite",
     "app:build": "vite build",
-    "build:lib": "yarn predev && yarn build:components && yarn generate:theme && yarn copy",
+    "build:lib": "yarn predev && yarn build:components && yarn copy",
     "test": "jest --config jest.config.js",
     "ls-lint": "ls-lint",
     "lint": "eslint \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
@@ -35,6 +35,7 @@
     "stylelint": "stylelint --fix \"{devui,src}/**/*.{scss,css}\"",
     "build:components": "node ./devui-cli/index.js build",
     "generate:theme": "node ./devui-cli/index.js generate:theme",
+    "generate:dts": "node ./devui-cli/index.js generate:dts",
     "copy": "cp package.json build && cp README.md build && cp devui/theme/theme.scss build/theme",
     "clean:cli": "npm uninstall -g devui-cli & npm uninstall -g vue-devui",
     "cli:create": "node ./devui-cli/index.js create -t component",

package/pagination/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/panel/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/popover/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/progress/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/quadrant-diagram/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/radio/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/rate/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/read-tip/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/read-tip/index.es.js

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,8 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, ref, onMounted, createVNode, Teleport, Fragment, reactive, onUnmounted } from "vue";
+import { defineComponent, toRefs, reactive, ref, onMounted, createVNode, Teleport, Fragment, onUnmounted } from "vue";
 const readTipProps = {
   readTipOptions: {
     type: Object
@@ -32,30 +29,66 @@ var TipsTemplate = defineComponent({
   props: readTipProps,
   emits: [],
   setup(props, ctx) {
-    var _a;
-    const query = ((_a = props.defaultTemplateProps) == null ? void 0 : _a.id) ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector;
+    const {
+      defaultTemplateProps
+    } = toRefs(props);
+    let rule = defaultTemplateProps.value;
+    const query = (rule == null ? void 0 : rule.id) ? `#${rule.id}` : rule.selector;
+    const styles = reactive({});
+    if (typeof rule.dataFn === "function") {
+      const dataFn = rule.dataFn({
+        element: document.querySelector(query),
+        rule
+      });
+      rule = __spreadValues(__spreadValues({}, rule), dataFn);
+    }
     const temp = ref(null);
     onMounted(() => {
-      if (props.defaultTemplateProps.position == "top") {
-        temp.value.style.top = -temp.value.offsetHeight - 10 + "px";
+      const domBounding = document.querySelector(query).getBoundingClientRect();
+      const distance = 10;
+      let positionTop = 0;
+      let positionLeft = 0;
+      const targetDom = document.querySelector(".read-tip-container").getBoundingClientRect();
+      if (rule.appendToBody) {
+        positionTop = domBounding.y + document.documentElement.scrollTop;
+        positionLeft = domBounding.x;
+      }
+      switch (rule.position) {
+        case "top":
+          styles.top = positionTop - targetDom.height - distance + "px";
+          styles.left = positionLeft + "px";
+          break;
+        case "left":
+          styles.top = positionTop + "px";
+          styles.left = positionLeft - targetDom.width - distance + "px";
+          break;
+        case "bottom":
+          styles.top = positionTop + domBounding.height + distance + "px";
+          styles.left = positionLeft + "px";
+          break;
+        case "right":
+          styles.top = positionTop + "px";
+          styles.left = positionLeft + domBounding.width + distance + "px";
+          break;
       }
     });
     return () => {
       return createVNode(Teleport, {
-        "to": query
+        "to": rule.appendToBody ? "body" : query
       }, {
         default: () => {
-          var _a2;
+          var _a;
           return [createVNode("div", {
             "ref": temp,
-            "class": ["read-tip-container", props.defaultTemplateProps.position]
+            "class": ["read-tip-container", rule.position, rule.overlayClassName],
+            "style": styles
           }, [createVNode("span", {
             "class": "after"
-          }, null), props.defaultTemplateProps.contentTemplate ? (_a2 = ctx.slots) == null ? void 0 : _a2.default() : createVNode(Fragment, null, [createVNode("div", {
+          }, null), rule.contentTemplate ? (_a = ctx.slots) == null ? void 0 : _a.default() : createVNode(Fragment, null, [createVNode("div", {
             "class": "title"
-          }, [props.defaultTemplateProps.title]), createVNode("div", {
+          }, [rule.title]), createVNode("div", {
             "class": "content"
-          }, [props.defaultTemplateProps.content])])])];
+          }, [rule.content])])])];
         }
       });
     };
@@ -78,7 +111,7 @@ var ReadTip = defineComponent({
         selector: null
       }
     };
-    const tempTop = ref(0);
+    ref(0);
     const options = __spreadValues(__spreadValues({}, defaultOptions), props.readTipOptions);
     const defaultSlot = ref(null);
     const onMouseenter = (rule) => () => {
@@ -103,17 +136,23 @@ var ReadTip = defineComponent({
       rules2.map((rule) => {
         rule.status = false;
         trigger = rule.trigger || trigger;
+        rule.overlayClassName = rule.overlayClassName || options.overlayClassName;
+        rule.position = rule.position || options.position;
         rule.contentTemplate = !!ctx.slots.contentTemplate;
+        if (!("appendToBody" in rule))
+          rule.appendToBody = options.appendToBody;
         const doms = defaultSlot.value.querySelectorAll(rule.selector);
         [...doms].map((dom, index2) => {
-          dom.style.position = "relative";
+          if (rule.appendToBody === false)
+            dom.style.position = "relative";
           let newRule = reactive({
             id: null
           });
+          const id = rule.selector.slice(rule.selector[0] === "." ? 1 : 0) + index2;
           if (index2 > 0) {
             newRule = __spreadValues({}, rule);
-            dom.id = rule.selector.slice(1) + index2;
-            newRule.id = rule.selector.slice(1) + index2;
+            dom.id = id;
+            newRule.id = id;
             rules2.push(newRule);
           }
           if (trigger === "hover") {
@@ -125,7 +164,6 @@ var ReadTip = defineComponent({
       return rules2;
     };
     function show(dom, rule) {
-      dom.offsetTop;
       rule.status = true;
     }
     const rules = (rules2) => {
@@ -182,9 +220,7 @@ var ReadTip = defineComponent({
         "ref": defaultSlot,
         "onClick": onClick
       }, [(_a = ctx.slots) == null ? void 0 : _a.default()]), refRules.map((rule) => createVNode("div", null, [rule.status && createVNode(TipsTemplate, {
-        "defaultTemplateProps": __spreadProps(__spreadValues({}, rule), {
-          top: tempTop
-        })
+        "defaultTemplateProps": __spreadValues({}, rule)
       }, {
         default: () => {
           var _a2;
@@ -200,7 +236,7 @@ ReadTip.install = function(app) {
 var index = {
   title: "ReadTip \u9605\u8BFB\u63D0\u793A",
   category: "\u53CD\u9988",
-  status: "30%",
+  status: "50%",
   install(app) {
     app.use(ReadTip);
   }

package/read-tip/index.umd.js

@@ -1 +1 @@
-var E=Object.defineProperty,S=Object.defineProperties;var q=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var g=(s,e,i)=>e in s?E(s,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[e]=i,T=(s,e)=>{for(var i in e||(e={}))D.call(e,i)&&g(s,i,e[i]);if(V)for(var i of V(e))L.call(e,i)&&g(s,i,e[i]);return s},A=(s,e)=>S(s,q(e));(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const i={readTipOptions:{type:Object},defaultTemplateProps:{type:Object}};var w="",R=e.defineComponent({name:"DReadTipTemplate",props:i,emits:[],setup(a,u){var d;const v=((d=a.defaultTemplateProps)==null?void 0:d.id)?`#${a.defaultTemplateProps.id}`:a.defaultTemplateProps.selector,m=e.ref(null);return e.onMounted(()=>{a.defaultTemplateProps.position=="top"&&(m.value.style.top=-m.value.offsetHeight-10+"px")}),()=>e.createVNode(e.Teleport,{to:v},{default:()=>{var c;return[e.createVNode("div",{ref:m,class:["read-tip-container",a.defaultTemplateProps.position]},[e.createVNode("span",{class:"after"},null),a.defaultTemplateProps.contentTemplate?(c=u.slots)==null?void 0:c.default():e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"title"},[a.defaultTemplateProps.title]),e.createVNode("div",{class:"content"},[a.defaultTemplateProps.content])])])]}})}}),p=e.defineComponent({name:"DReadTip",props:i,emits:[],setup(a,u){const v={trigger:"hover",showAnimate:!1,mouseenterTime:100,mouseleaveTime:100,position:"top",overlayClassName:"",appendToBody:!0,rules:{selector:null}},m=e.ref(0),d=T(T({},v),a.readTipOptions),c=e.ref(null),M=t=>()=>{setTimeout(()=>{if(t.id){const o=f.find(n=>n.id===t.id);o.status=!0}t.status=!0},t.mouseenterTime||d.mouseenterTime)},O=t=>()=>{setTimeout(()=>{if(t.id){const o=f.find(n=>n.id===t.id);o.status=!1}t.status=!1},t.mouseleaveTime||d.mouseleaveTime)},b=(t,o="hover")=>(t.map(n=>{n.status=!1,o=n.trigger||o,n.contentTemplate=!!u.slots.contentTemplate,[...c.value.querySelectorAll(n.selector)].map((y,P)=>{y.style.position="relative";let r=e.reactive({id:null});P>0&&(r=T({},n),y.id=n.selector.slice(1)+P,r.id=n.selector.slice(1)+P,t.push(r)),o==="hover"&&(y.addEventListener("mouseenter",M(r.id?r:n)),y.addEventListener("mouseleave",O(r.id?r:n)))})}),t);function h(t,o){t.offsetTop,o.status=!0}const j=t=>{if(t!==null)return typeof t=="object"&&!Array.isArray(t)&&(t=[t]),t=[...t],Array.isArray(t)&&t.map(o=>{o.status=!1}),t},f=e.reactive(j(d.rules)),N=()=>{f.forEach(t=>{t.status=!1})};e.onMounted(()=>{b(f,d.trigger),document.addEventListener("click",N,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",N)});const k=t=>{for(const o of f){const n=c.value.querySelectorAll(o.selector);for(const l of n)if(n.length>1){if(l===t.target&&o.id){h(l,o);return}else if(l===t.target&&!o.id&&!l.id){h(l,o);return}}else if(l===t.target){h(l,o);return}else o.status=!1}};return()=>{var t;return e.createVNode("div",{class:"devui-read-tip"},[e.createVNode("div",{ref:c,onClick:k},[(t=u.slots)==null?void 0:t.default()]),f.map(o=>e.createVNode("div",null,[o.status&&e.createVNode(R,{defaultTemplateProps:A(T({},o),{top:m})},{default:()=>{var n;return[o.contentTemplate&&((n=u.slots)==null?void 0:n.contentTemplate())]}})]))])}}});p.install=function(a){a.component(p.name,p)};var C={title:"ReadTip \u9605\u8BFB\u63D0\u793A",category:"\u53CD\u9988",status:"30%",install(a){a.use(p)}};s.ReadTip=p,s.default=C,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+var q=Object.defineProperty;var R=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var k=(a,e,i)=>e in a?q(a,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):a[e]=i,y=(a,e)=>{for(var i in e||(e={}))w.call(e,i)&&k(a,i,e[i]);if(R)for(var i of R(e))E.call(e,i)&&k(a,i,e[i]);return a};(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";const i={readTipOptions:{type:Object},defaultTemplateProps:{type:Object}};var F="",x=e.defineComponent({name:"DReadTipTemplate",props:i,emits:[],setup(f,g){const{defaultTemplateProps:B}=e.toRefs(f);let o=B.value;const m=(o==null?void 0:o.id)?`#${o.id}`:o.selector,c=e.reactive({});if(typeof o.dataFn=="function"){const r=o.dataFn({element:document.querySelector(m),rule:o});o=y(y({},o),r)}const C=e.ref(null);return e.onMounted(()=>{const r=document.querySelector(m).getBoundingClientRect(),l=10;let u=0,d=0;const v=document.querySelector(".read-tip-container").getBoundingClientRect();switch(o.appendToBody&&(u=r.y+document.documentElement.scrollTop,d=r.x),o.position){case"top":c.top=u-v.height-l+"px",c.left=d+"px";break;case"left":c.top=u+"px",c.left=d-v.width-l+"px";break;case"bottom":c.top=u+r.height+l+"px",c.left=d+"px";break;case"right":c.top=u+"px",c.left=d+r.width+l+"px";break}}),()=>e.createVNode(e.Teleport,{to:o.appendToBody?"body":m},{default:()=>{var r;return[e.createVNode("div",{ref:C,class:["read-tip-container",o.position,o.overlayClassName],style:c},[e.createVNode("span",{class:"after"},null),o.contentTemplate?(r=g.slots)==null?void 0:r.default():e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"title"},[o.title]),e.createVNode("div",{class:"content"},[o.content])])])]}})}}),h=e.defineComponent({name:"DReadTip",props:i,emits:[],setup(f,g){const B={trigger:"hover",showAnimate:!1,mouseenterTime:100,mouseleaveTime:100,position:"top",overlayClassName:"",appendToBody:!0,rules:{selector:null}};e.ref(0);const o=y(y({},B),f.readTipOptions),m=e.ref(null),c=t=>()=>{setTimeout(()=>{if(t.id){const s=d.find(n=>n.id===t.id);s.status=!0}t.status=!0},t.mouseenterTime||o.mouseenterTime)},C=t=>()=>{setTimeout(()=>{if(t.id){const s=d.find(n=>n.id===t.id);s.status=!1}t.status=!1},t.mouseleaveTime||o.mouseleaveTime)},r=(t,s="hover")=>(t.map(n=>{n.status=!1,s=n.trigger||s,n.overlayClassName=n.overlayClassName||o.overlayClassName,n.position=n.position||o.position,n.contentTemplate=!!g.slots.contentTemplate,"appendToBody"in n||(n.appendToBody=o.appendToBody),[...m.value.querySelectorAll(n.selector)].map((N,b)=>{n.appendToBody===!1&&(N.style.position="relative");let T=e.reactive({id:null});const V=n.selector.slice(n.selector[0]==="."?1:0)+b;b>0&&(T=y({},n),N.id=V,T.id=V,t.push(T)),s==="hover"&&(N.addEventListener("mouseenter",c(T.id?T:n)),N.addEventListener("mouseleave",C(T.id?T:n)))})}),t);function l(t,s){s.status=!0}const u=t=>{if(t!==null)return typeof t=="object"&&!Array.isArray(t)&&(t=[t]),t=[...t],Array.isArray(t)&&t.map(s=>{s.status=!1}),t},d=e.reactive(u(o.rules)),v=()=>{d.forEach(t=>{t.status=!1})};e.onMounted(()=>{r(d,o.trigger),document.addEventListener("click",v,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",v)});const S=t=>{for(const s of d){const n=m.value.querySelectorAll(s.selector);for(const p of n)if(n.length>1){if(p===t.target&&s.id){l(p,s);return}else if(p===t.target&&!s.id&&!p.id){l(p,s);return}}else if(p===t.target){l(p,s);return}else s.status=!1}};return()=>{var t;return e.createVNode("div",{class:"devui-read-tip"},[e.createVNode("div",{ref:m,onClick:S},[(t=g.slots)==null?void 0:t.default()]),d.map(s=>e.createVNode("div",null,[s.status&&e.createVNode(x,{defaultTemplateProps:y({},s)},{default:()=>{var n;return[s.contentTemplate&&((n=g.slots)==null?void 0:n.contentTemplate())]}})]))])}}});h.install=function(f){f.component(h.name,h)};var A={title:"ReadTip \u9605\u8BFB\u63D0\u793A",category:"\u53CD\u9988",status:"50%",install(f){f.use(h)}};a.ReadTip=h,a.default=A,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/read-tip/style.css

@@ -1 +1 @@
-.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-read-tip{position:relative}.source{overflow:initial}.read-tip-container{font-size:var(--devui-font-size, 12px);position:absolute;width:max-content;height:max-content;line-height:1.5;border:none;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e);color:var(--devui-feedback-overlay-text, #dfe1e6);overflow-wrap:break-word;padding:10px;z-index:50}.read-tip-container .after{content:"";width:12px;height:12px;transform:rotate(45deg);position:absolute;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.read-tip-container.top{top:-60px;left:0}.read-tip-container.top .after{bottom:-4px}.read-tip-container.left{right:calc(100% + 10px);top:-2px}.read-tip-container.left .after{right:-4px}.read-tip-container.right{left:calc(100% + 10px);top:-2px}.read-tip-container.right .after{left:-4px}.read-tip-container.bottom{top:calc(100% + 10px)}.read-tip-container.bottom .after{top:-4px}
+.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-read-tip{position:relative}.devui-read-tip .title{font-size:16px}.source{overflow:initial}.read-tip-container{font-size:var(--devui-font-size, 12px);position:absolute;width:max-content;height:max-content;line-height:1.5;border:none;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e);color:var(--devui-feedback-overlay-text, #dfe1e6);overflow-wrap:break-word;padding:10px;z-index:50}.read-tip-container .after{content:"";width:12px;height:12px;transform:rotate(45deg);position:absolute;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.read-tip-container.top .after{bottom:-4px}.read-tip-container.left .after{right:-4px}.read-tip-container.right .after{left:-4px}.read-tip-container.bottom .after{top:-4px}

package/ripple/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/search/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/select/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/skeleton/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/skeleton/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode, Fragment, withDirectives, vShow } from "vue";
+import { defineComponent, createVNode, Fragment, withDirectives, vShow, mergeProps } from "vue";
 var skeleton = "";
 const skeletonProps = {
   row: {
@@ -34,7 +34,7 @@ const skeletonProps = {
     default: "40px"
   },
   avatarShape: {
-    value: String,
+    type: String,
     default: "round"
   },
   titleWidth: {
@@ -54,7 +54,7 @@ var Skeleton = defineComponent({
       slots
     } = ctx;
     function renderAnimate(isAnimated) {
-      return isAnimated ? "devui-skeleton-animated" : "";
+      return isAnimated ? "devui-skeleton__animated" : "";
     }
     function renderBorderRadius(isRound) {
       return isRound ? "border-radius: 1em;" : "";
@@ -102,14 +102,17 @@ var Skeleton = defineComponent({
       })();
       return withDirectives(createVNode("div", {
         "class": "devui-skeleton__paragraph"
-      }, [arr.map((item) => {
+      }, [arr.map((item2) => {
         return createVNode("div", {
           "class": "devui-skeleton__item",
-          "style": round ? "border-radius: 1em;" : `width: ${item.width}`
+          "style": round ? "border-radius: 1em;" : `width: ${item2.width}`
         }, null);
       })]), [[vShow, isShown]]);
     }
     function renderAvatarStyle(avatarSize, avatarShape) {
+      function renderAvatarShape(avatarShape2) {
+        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      }
       function renderAvatarSize(avatarSize2) {
         switch (typeof avatarSize2) {
           case "string":
@@ -118,9 +121,6 @@ var Skeleton = defineComponent({
             return `width:${avatarSize2}px;height:${avatarSize2}px;`;
         }
       }
-      function renderAvatarShape(avatarShape2) {
-        return avatarShape2 === "square" ? "" : "border-radius:50%;";
-      }
       return renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape);
     }
     function renderTitle(isVisible, titleWidth, isRound) {
@@ -137,32 +137,154 @@ var Skeleton = defineComponent({
       }
       return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
     }
-    function renderSkeleton(isLoading) {
+    function renderDefaultSkeleton() {
+      return createVNode(Fragment, null, [withDirectives(createVNode("div", {
+        "class": "devui-skeleton__avatar"
+      }, [createVNode("div", {
+        "class": "avatar",
+        "style": renderAvatarStyle(props.avatarSize, props.avatarShape)
+      }, null)]), [[vShow, props.avatar]]), createVNode("div", {
+        "class": "devui-skeleton__group"
+      }, [createVNode("div", {
+        "class": "devui-skeleton__title",
+        "style": renderTitle(props.title, props.titleWidth, props.round)
+      }, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
+    }
+    return () => {
       var _a;
-      if (isLoading) {
-        return createVNode(Fragment, null, [withDirectives(createVNode("div", {
-          "class": "devui-skeleton__avatar"
-        }, [createVNode("div", {
-          "class": "avatar",
-          "style": renderAvatarStyle(props.avatarSize, props.avatarShape)
-        }, null)]), [[vShow, props.avatar]]), createVNode("div", {
-          "class": "devui-skeleton__item__group"
-        }, [createVNode("div", {
-          "class": "devui-skeleton__title",
-          "style": renderTitle(props.title, props.titleWidth, props.round)
-        }, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
+      if (props.loading) {
+        return createVNode("div", {
+          "class": `devui-skeleton ${renderAnimate(props.animate)}`
+        }, [renderDefaultSkeleton()]);
       }
       return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var item = "";
+const itemProps = {
+  row: {
+    type: Number,
+    default: 0
+  },
+  animate: {
+    type: Boolean,
+    default: true
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  avatarShape: {
+    type: String,
+    default: "round"
+  },
+  titleWidth: {
+    type: [String, Number],
+    default: "40%"
+  },
+  rowWidth: {
+    type: [Number, String, Array],
+    default: ["100%"]
+  },
+  shape: {
+    type: String
+  }
+};
+var SkeletonItem = defineComponent({
+  name: "DSkeletonItem",
+  props: itemProps,
+  setup(props, ctx) {
+    const {
+      slots
+    } = ctx;
+    function renderAnimate(isAnimated) {
+      return isAnimated ? "devui-skeleton__animated" : "";
+    }
+    function renderShapeParagraph(rowNum, rowWidth, round) {
+      const arr = [];
+      function pushIntoArray(type) {
+        for (let index2 = 0; index2 < rowNum; index2++) {
+          arr.push({
+            width: type
+          });
+        }
+      }
+      (function handleRowWidth() {
+        if (rowWidth instanceof Array) {
+          for (let index2 = 0; index2 < rowNum; index2++) {
+            if (rowWidth[index2]) {
+              switch (typeof rowWidth[index2]) {
+                case "string":
+                  arr.push({
+                    width: rowWidth[index2]
+                  });
+                  break;
+                case "number":
+                  arr.push({
+                    width: `${rowWidth[index2]}px`
+                  });
+              }
+            } else {
+              arr.push({
+                width: 1
+              });
+            }
+          }
+        } else {
+          switch (typeof rowWidth) {
+            case "string":
+              pushIntoArray(rowWidth);
+              break;
+            case "number":
+              pushIntoArray(`${rowWidth}px`);
+              break;
+          }
+        }
+      })();
+      return createVNode("div", mergeProps({
+        "class": `devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`
+      }, ctx.attrs), [arr.map((item2) => {
+        return createVNode("div", {
+          "class": "devui-skeleton__shape__paragraph__item",
+          "style": round ? "border-radius: 1em;" : `width: ${item2.width}`
+        }, null);
+      })]);
+    }
+    function renderAvatarStyle(avatarShape) {
+      function renderAvatarShape(avatarShape2) {
+        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      }
+      return renderAvatarShape(avatarShape);
     }
     return () => {
-      return createVNode("div", {
-        "class": `devui-skeleton ${renderAnimate(props.animate)}`
-      }, [renderSkeleton(props.loading)]);
+      var _a;
+      if (props.loading && props.shape) {
+        switch (props.shape) {
+          case "avatar":
+            return createVNode(Fragment, null, [createVNode("div", mergeProps({
+              "class": `devui-skeleton__shape__avatar ${renderAnimate(props.animate)}`,
+              "style": renderAvatarStyle(props.avatarShape)
+            }, ctx.attrs), null)]);
+          case "paragraph":
+            return createVNode(Fragment, null, [renderShapeParagraph(props.row, props.rowWidth, props.round)]);
+          default:
+            return createVNode(Fragment, null, [createVNode("div", mergeProps({
+              "class": `devui-skeleton__shape__${props.shape} ${renderAnimate(props.animate)}`
+            }, ctx.attrs), null)]);
+        }
+      }
+      return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
 Skeleton.install = function(app) {
   app.component(Skeleton.name, Skeleton);
+  app.component(SkeletonItem.name, SkeletonItem);
 };
 var index = {
   title: "Skeleton \u9AA8\u67B6\u5C4F",
@@ -172,4 +294,4 @@ var index = {
     app.use(Skeleton);
   }
 };
-export { Skeleton, index as default };
+export { Skeleton, SkeletonItem, index as default };

package/skeleton/index.umd.js

@@ -1 +1 @@
-(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue))})(this,function(i,e){"use strict";var w="";const h={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1},title:{type:Boolean,default:!0},paragraph:{type:Boolean,default:!0},avatarSize:{type:[String,Number],default:"40px"},avatarShape:{value:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]}};var o=e.defineComponent({name:"DSkeleton",props:h,setup(t,p){const{slots:f}=p;function m(a){return a?"devui-skeleton-animated":""}function g(a){return a?"border-radius: 1em;":""}function b(a,u,r,s){const n=[];function l(c){for(let d=0;d<u;d++)n.push({width:c})}return function(){if(r instanceof Array)for(let d=0;d<u;d++)if(r[d])switch(typeof r[d]){case"string":n.push({width:r[d]});break;case"number":n.push({width:`${r[d]}px`})}else n.push({width:1});else switch(typeof r){case"string":l(r);break;case"number":l(`${r}px`);break}}(),e.withDirectives(e.createVNode("div",{class:"devui-skeleton__paragraph"},[n.map(c=>e.createVNode("div",{class:"devui-skeleton__item",style:s?"border-radius: 1em;":`width: ${c.width}`},null))]),[[e.vShow,a]])}function v(a,u){function r(n){switch(typeof n){case"string":return`width:${n};height:${n};`;case"number":return`width:${n}px;height:${n}px;`}}function s(n){return n==="square"?"":"border-radius:50%;"}return r(a)+s(u)}function k(a,u,r){function s(l){switch(typeof l){case"string":return`width: ${l};`;case"number":return`width: ${l}px;`}}function n(l){return l?null:"visibility: hidden;"}return s(u)+g(r)+n(a)}function S(a){var u;return a?e.createVNode(e.Fragment,null,[e.withDirectives(e.createVNode("div",{class:"devui-skeleton__avatar"},[e.createVNode("div",{class:"avatar",style:v(t.avatarSize,t.avatarShape)},null)]),[[e.vShow,t.avatar]]),e.createVNode("div",{class:"devui-skeleton__item__group"},[e.createVNode("div",{class:"devui-skeleton__title",style:k(t.title,t.titleWidth,t.round)},null),b(t.paragraph,t.row,t.rowWidth,t.round)])]):e.createVNode(e.Fragment,null,[(u=f.default)==null?void 0:u.call(f)])}return()=>e.createVNode("div",{class:`devui-skeleton ${m(t.animate)}`},[S(t.loading)])}});o.install=function(t){t.component(o.name,o)};var y={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"\u5DF2\u5B8C\u6210",install(t){t.use(o)}};i.Skeleton=o,i.default=y,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";var V="";const S={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1},title:{type:Boolean,default:!0},paragraph:{type:Boolean,default:!0},avatarSize:{type:[String,Number],default:"40px"},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]}};var m=e.defineComponent({name:"DSkeleton",props:S,setup(t,h){const{slots:f}=h;function p(a){return a?"devui-skeleton__animated":""}function b(a){return a?"border-radius: 1em;":""}function k(a,o,n,r){const i=[];function c(g){for(let s=0;s<o;s++)i.push({width:g})}return function(){if(n instanceof Array)for(let s=0;s<o;s++)if(n[s])switch(typeof n[s]){case"string":i.push({width:n[s]});break;case"number":i.push({width:`${n[s]}px`})}else i.push({width:1});else switch(typeof n){case"string":c(n);break;case"number":c(`${n}px`);break}}(),e.withDirectives(e.createVNode("div",{class:"devui-skeleton__paragraph"},[i.map(g=>e.createVNode("div",{class:"devui-skeleton__item",style:r?"border-radius: 1em;":`width: ${g.width}`},null))]),[[e.vShow,a]])}function u(a,o){function n(i){return i==="square"?"":"border-radius:50%;"}function r(i){switch(typeof i){case"string":return`width:${i};height:${i};`;case"number":return`width:${i}px;height:${i}px;`}}return r(a)+n(o)}function d(a,o,n){function r(c){switch(typeof c){case"string":return`width: ${c};`;case"number":return`width: ${c}px;`}}function i(c){return c?null:"visibility: hidden;"}return r(o)+b(n)+i(a)}function y(){return e.createVNode(e.Fragment,null,[e.withDirectives(e.createVNode("div",{class:"devui-skeleton__avatar"},[e.createVNode("div",{class:"avatar",style:u(t.avatarSize,t.avatarShape)},null)]),[[e.vShow,t.avatar]]),e.createVNode("div",{class:"devui-skeleton__group"},[e.createVNode("div",{class:"devui-skeleton__title",style:d(t.title,t.titleWidth,t.round)},null),k(t.paragraph,t.row,t.rowWidth,t.round)])])}return()=>{var a;return t.loading?e.createVNode("div",{class:`devui-skeleton ${p(t.animate)}`},[y()]):e.createVNode(e.Fragment,null,[(a=f.default)==null?void 0:a.call(f)])}}}),v="";const N={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]},shape:{type:String}};var _=e.defineComponent({name:"DSkeletonItem",props:N,setup(t,h){const{slots:f}=h;function p(u){return u?"devui-skeleton__animated":""}function b(u,d,y){const a=[];function o(n){for(let r=0;r<u;r++)a.push({width:n})}return function(){if(d instanceof Array)for(let r=0;r<u;r++)if(d[r])switch(typeof d[r]){case"string":a.push({width:d[r]});break;case"number":a.push({width:`${d[r]}px`})}else a.push({width:1});else switch(typeof d){case"string":o(d);break;case"number":o(`${d}px`);break}}(),e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__paragraph ${p(t.animate)}`},h.attrs),[a.map(n=>e.createVNode("div",{class:"devui-skeleton__shape__paragraph__item",style:y?"border-radius: 1em;":`width: ${n.width}`},null))])}function k(u){function d(y){return y==="square"?"":"border-radius:50%;"}return d(u)}return()=>{var u;if(t.loading&&t.shape)switch(t.shape){case"avatar":return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__avatar ${p(t.animate)}`,style:k(t.avatarShape)},h.attrs),null)]);case"paragraph":return e.createVNode(e.Fragment,null,[b(t.row,t.rowWidth,t.round)]);default:return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__${t.shape} ${p(t.animate)}`},h.attrs),null)])}return e.createVNode(e.Fragment,null,[(u=f.default)==null?void 0:u.call(f)])}}});m.install=function(t){t.component(m.name,m),t.component(_.name,_)};var w={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"\u5DF2\u5B8C\u6210",install(t){t.use(m)}};l.Skeleton=m,l.SkeletonItem=_,l.default=w,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/skeleton/style.css

@@ -1 +1 @@
-.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton .devui-skeleton__avatar{display:flex;flex:1;justify-content:center;padding-right:16px}.devui-skeleton .devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton .devui-skeleton__item__group{flex:11}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item,.devui-skeleton .devui-skeleton__item__group .devui-skeleton__title{width:100%;height:16px;background-color:#f2f2f2}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__title{margin-top:24px}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__paragraph{margin-top:12px}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item:last-child{width:60%}.devui-skeleton-animated>.devui-skeleton__item__group>.devui-skeleton__title,.devui-skeleton-animated>.devui-skeleton__avatar>.avatar,.devui-skeleton-animated>.devui-skeleton__item__group>div>.devui-skeleton__item{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton__avatar>.avatar,.devui-skeleton__item__group>div>.devui-skeleton__item{margin-top:12px}.devui-skeleton-animated>.devui-skeleton__avatar>.avatar{animation-delay:.1s}
+.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton__avatar{display:flex;flex:1;justify-content:center;padding-right:16px}.devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__group{flex:11}.devui-skeleton__item,.devui-skeleton__title{width:100%;height:16px;background-color:#f2f2f2}.devui-skeleton__title{margin-top:24px}.devui-skeleton__paragraph{margin-top:12px}.devui-skeleton__item:last-child{width:60%}.devui-skeleton__avatar>.avatar,.devui-skeleton__group>div>.devui-skeleton__item{margin-top:12px}.devui-skeleton__animated>.devui-skeleton__group>.devui-skeleton__title,.devui-skeleton__animated>.devui-skeleton__group>div>.devui-skeleton__item,.devui-skeleton__animated>.devui-skeleton__avatar>.avatar{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}.devui-skeleton__shape__avatar,.devui-skeleton__shape__image,.devui-skeleton__shape__title,.devui-skeleton__shape__button{background-color:#f2f2f2}.devui-skeleton__shape__avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__shape__image{width:200px;height:150px;border-radius:4px}.devui-skeleton__shape__title{width:40%;height:24px}.devui-skeleton__shape__paragraph__item{background-color:#f2f2f2;width:100%;height:16px;margin-bottom:10px}.devui-skeleton__shape__paragraph__item:last-child{width:60%}.devui-skeleton__shape__button{width:115px;height:32px}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton__animated .devui-skeleton__shape__avatar,.devui-skeleton__animated.devui-skeleton__shape__avatar,.devui-skeleton__animated.devui-skeleton__shape__image,.devui-skeleton__animated.devui-skeleton__shape__title,.devui-skeleton__animated.devui-skeleton__shape__paragraph>.devui-skeleton__shape__paragraph__item,.devui-skeleton__animated.devui-skeleton__shape__button{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}

package/slider/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/splitter/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/status/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/steps-guide/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.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;