vue-devui 1.0.0-beta.2 → 1.0.0-beta.220808

package/skeleton/index.es.js

@@ -1,13 +1,18 @@
-import { defineComponent, createVNode, Fragment, withDirectives, vShow } from "vue";
-var skeleton = "";
+import { toRefs, inject, computed, createVNode, defineComponent, provide } from "vue";
+const skeletonItemProps = {
+  variant: {
+    type: String,
+    default: "square"
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+};
 const skeletonProps = {
-  row: {
+  rows: {
     type: Number,
-    default: 0
-  },
-  animate: {
-    type: Boolean,
-    default: true
+    default: 3
   },
   round: {
     type: Boolean,
@@ -17,159 +22,124 @@ const skeletonProps = {
     type: Boolean,
     default: true
   },
-  avatar: {
-    type: Boolean,
-    default: false
-  },
-  title: {
-    type: Boolean,
-    default: true
-  },
-  paragraph: {
+  showAnimation: {
     type: Boolean,
     default: true
-  },
-  avatarSize: {
-    type: [String, Number],
-    default: "40px"
-  },
-  avatarShape: {
-    value: String,
-    default: "round"
-  },
-  titleWidth: {
-    type: [String, Number],
-    default: "40%"
-  },
-  rowWidth: {
-    type: [Number, String, Array],
-    default: ["100%"]
   }
 };
+const roundInjectionKey = Symbol("round");
+const animationInjectionKey = Symbol("showAnimation");
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function useSkeletonItem(props) {
+  const ns = useNamespace("skeleton-item");
+  const { variant, size } = toRefs(props);
+  const round = inject(roundInjectionKey, void 0);
+  const showAnimation = inject(animationInjectionKey, void 0);
+  const classes = computed(() => ({
+    [ns.b()]: true,
+    [ns.m(variant.value)]: true,
+    [ns.m(size.value)]: variant.value !== "square",
+    [ns.m("round")]: variant.value !== "circle" && Boolean(round == null ? void 0 : round.value),
+    [ns.m("animation")]: Boolean(showAnimation == null ? void 0 : showAnimation.value)
+  }));
+  return { classes };
+}
+function ImageIcon() {
+  return createVNode("svg", {
+    "width": "24px",
+    "height": "24px",
+    "viewBox": "0 0 24 24",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("g", null, [createVNode("rect", {
+    "fill": "#d8d8d8",
+    "opacity": "0",
+    "x": "0",
+    "y": "0",
+    "width": "24",
+    "height": "24"
+  }, null), createVNode("path", {
+    "d": "M17.9783341,3.022 C19.5705758,3.022 20.8816065,4.27616494 20.9732206,5.84628917 L20.9783341,6.022 L20.9783341,15.4777069           L20.9783775,15.4946187 C20.9778434,15.509964 20.9768409,15.525296 20.9753698,15.5405914 L20.9783341,15.4777069           C20.9783341,15.8919205 20.6425477,16.2277069 20.2283341,16.2277069 C19.9841207,16.2277069 19.7671693,16.1109847           19.630224,15.9302845 L16.3835041,12.6846982 C15.9279377,12.2291319 15.2084078,12.1987608 14.7176463,12.593585           L14.6161642,12.6846982 L9.05907272,18.2417898 C8.76083183,18.5400306 8.28304152,18.5577535 7.96352506,18.2824274           C7.67269311,18.0318186 7.64008582,17.5928941 7.89069464,17.3020621 L7.9253008,17.2647549 L7.9253008,17.2647549           L13.5555041,11.6240381 C14.5846517,10.5948904 16.2263561,10.5520093 17.3065502,11.4953946 L17.4441642,11.6240381           L19.4783341,13.658 L19.4783341,6.022 C19.4783341,5.24761276 18.8784495,4.6021759 18.1219124,4.52892169 L17.9783341,4.522           L6.02133414,4.522 C5.24694691,4.522 4.60151004,5.12188468 4.52825583,5.87842174 L4.52133414,6.022 L4.52133414,17.978           C4.52133414,18.7529555 5.12086774,19.397891 5.87769393,19.4710842 L6.02133414,19.478 L17.9783341,19.478 C18.7530944,19.478           19.3982021,18.8786501 19.4714163,18.1216726 L19.4783341,17.978 C19.4783341,17.5637864 19.8141206,17.208 20.2283341,17.228           C20.6425477,17.228 20.9783341,17.5637864 20.9783341,17.978 C20.9783341,19.5709231 19.724442,20.881321 18.1540742,20.9728891           L17.9783341,20.978 L6.02133414,20.978 C4.42880954,20.978 3.11804157,19.7244922 3.02644657,18.1537812 L3.02133414,17.978           L3.02133414,6.022 C3.02133414,4.42975835 4.27549908,3.11872764 5.84562331,3.02711351 L6.02133414,3.022 L17.9783341,3.022 Z           M8.99983414,7.7505 C9.6900477,7.7505 10.2498341,8.31028644 10.2498341,9.0005 C10.2498341,9.69071356 9.6900477,10.2505           8.99983414,10.3505 C8.30962058,10.2505 7.74983414,9.69071356 7.74983414,9.0005 C7.74983414,8.31028644 8.30962058,7.7505           8.99983414,7.7505 Z",
+    "fill": "#bfbfbf"
+  }, null)])])]);
+}
+var skeletonItem = "";
+var SkeletonItem = defineComponent({
+  name: "DSkeletonItem",
+  props: skeletonItemProps,
+  setup(props) {
+    const {
+      variant
+    } = toRefs(props);
+    const {
+      classes
+    } = useSkeletonItem(props);
+    return () => createVNode("div", {
+      "class": classes.value
+    }, [variant.value === "image" && createVNode(ImageIcon, null, null)]);
+  }
+});
+var skeleton = "";
 var Skeleton = defineComponent({
   name: "DSkeleton",
   props: skeletonProps,
   setup(props, ctx) {
+    const ns = useNamespace("skeleton");
     const {
-      slots
-    } = ctx;
-    function renderAnimate(isAnimated) {
-      return isAnimated ? "devui-skeleton-animated" : "";
-    }
-    function renderBorderRadius(isRound) {
-      return isRound ? "border-radius: 1em;" : "";
-    }
-    function renderParagraph(isShown, 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 withDirectives(createVNode("div", {
-        "class": "devui-skeleton__paragraph"
-      }, [arr.map((item) => {
-        return createVNode("div", {
-          "class": "devui-skeleton__item",
-          "style": round ? "border-radius: 1em;" : `width: ${item.width}`
-        }, null);
-      })]), [[vShow, isShown]]);
-    }
-    function renderAvatarStyle(avatarSize, avatarShape) {
-      function renderAvatarSize(avatarSize2) {
-        switch (typeof avatarSize2) {
-          case "string":
-            return `width:${avatarSize2};height:${avatarSize2};`;
-          case "number":
-            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) {
-      function renderTitleWidth(titleWidth2) {
-        switch (typeof titleWidth2) {
-          case "string":
-            return `width: ${titleWidth2};`;
-          case "number":
-            return `width: ${titleWidth2}px;`;
-        }
-      }
-      function renderTitleVisibility(isVisible2) {
-        return isVisible2 ? null : "visibility: hidden;";
-      }
-      return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
-    }
-    function renderSkeleton(isLoading) {
-      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)])]);
-      }
-      return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
-    }
+      loading,
+      rows,
+      showAnimation,
+      round
+    } = toRefs(props);
+    const paragraphs = computed(() => new Array(rows.value).fill(""));
+    provide(animationInjectionKey, showAnimation);
+    provide(roundInjectionKey, round);
     return () => {
-      return createVNode("div", {
-        "class": `devui-skeleton ${renderAnimate(props.animate)}`
-      }, [renderSkeleton(props.loading)]);
+      var _a, _b;
+      return loading.value ? ctx.slots.placeholder ? ctx.slots.placeholder() : createVNode("div", {
+        "class": ns.b()
+      }, [createVNode(SkeletonItem, {
+        "class": ns.e("title")
+      }, null), paragraphs.value.map(() => createVNode(SkeletonItem, {
+        "class": ns.e("paragraph")
+      }, null))]) : (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
     };
   }
 });
-Skeleton.install = function(app) {
-  app.component(Skeleton.name, Skeleton);
-};
 var index = {
   title: "Skeleton \u9AA8\u67B6\u5C4F",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
-    app.use(Skeleton);
+    app.component(Skeleton.name, Skeleton);
+    app.component(SkeletonItem.name, SkeletonItem);
   }
 };
-export { Skeleton, index as default };
+export { Skeleton, SkeletonItem, animationInjectionKey, index as default, roundInjectionKey, skeletonItemProps, skeletonProps };

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";const C={variant:{type:String,default:"square"},size:{type:String,default:"md"}},y={rows:{type:Number,default:3},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},showAnimation:{type:Boolean,default:!0}},m=Symbol("round"),f=Symbol("showAnimation");function d(o,n,t){let s=o;return n&&(s+=`__${n}`),t&&(s+=`--${t}`),s}function h(o,n=!1){const t=n?`.devui-${o}`:`devui-${o}`;return{b:()=>d(t),e:a=>a?d(t,a):"",m:a=>a?d(t,"",a):"",em:(a,u)=>a&&u?d(t,a,u):""}}function k(o){const n=h("skeleton-item"),{variant:t,size:s}=e.toRefs(o),i=e.inject(m,void 0),r=e.inject(f,void 0);return{classes:e.computed(()=>({[n.b()]:!0,[n.m(t.value)]:!0,[n.m(s.value)]:t.value!=="square",[n.m("round")]:t.value!=="circle"&&Boolean(i==null?void 0:i.value),[n.m("animation")]:Boolean(r==null?void 0:r.value)}))}}function v(){return e.createVNode("svg",{width:"24px",height:"24px",viewBox:"0 0 24 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",null,[e.createVNode("rect",{fill:"#d8d8d8",opacity:"0",x:"0",y:"0",width:"24",height:"24"},null),e.createVNode("path",{d:"M17.9783341,3.022 C19.5705758,3.022 20.8816065,4.27616494 20.9732206,5.84628917 L20.9783341,6.022 L20.9783341,15.4777069           L20.9783775,15.4946187 C20.9778434,15.509964 20.9768409,15.525296 20.9753698,15.5405914 L20.9783341,15.4777069           C20.9783341,15.8919205 20.6425477,16.2277069 20.2283341,16.2277069 C19.9841207,16.2277069 19.7671693,16.1109847           19.630224,15.9302845 L16.3835041,12.6846982 C15.9279377,12.2291319 15.2084078,12.1987608 14.7176463,12.593585           L14.6161642,12.6846982 L9.05907272,18.2417898 C8.76083183,18.5400306 8.28304152,18.5577535 7.96352506,18.2824274           C7.67269311,18.0318186 7.64008582,17.5928941 7.89069464,17.3020621 L7.9253008,17.2647549 L7.9253008,17.2647549           L13.5555041,11.6240381 C14.5846517,10.5948904 16.2263561,10.5520093 17.3065502,11.4953946 L17.4441642,11.6240381           L19.4783341,13.658 L19.4783341,6.022 C19.4783341,5.24761276 18.8784495,4.6021759 18.1219124,4.52892169 L17.9783341,4.522           L6.02133414,4.522 C5.24694691,4.522 4.60151004,5.12188468 4.52825583,5.87842174 L4.52133414,6.022 L4.52133414,17.978           C4.52133414,18.7529555 5.12086774,19.397891 5.87769393,19.4710842 L6.02133414,19.478 L17.9783341,19.478 C18.7530944,19.478           19.3982021,18.8786501 19.4714163,18.1216726 L19.4783341,17.978 C19.4783341,17.5637864 19.8141206,17.208 20.2283341,17.228           C20.6425477,17.228 20.9783341,17.5637864 20.9783341,17.978 C20.9783341,19.5709231 19.724442,20.881321 18.1540742,20.9728891           L17.9783341,20.978 L6.02133414,20.978 C4.42880954,20.978 3.11804157,19.7244922 3.02644657,18.1537812 L3.02133414,17.978           L3.02133414,6.022 C3.02133414,4.42975835 4.27549908,3.11872764 5.84562331,3.02711351 L6.02133414,3.022 L17.9783341,3.022 Z           M8.99983414,7.7505 C9.6900477,7.7505 10.2498341,8.31028644 10.2498341,9.0005 C10.2498341,9.69071356 9.6900477,10.2505           8.99983414,10.3505 C8.30962058,10.2505 7.74983414,9.69071356 7.74983414,9.0005 C7.74983414,8.31028644 8.30962058,7.7505           8.99983414,7.7505 Z",fill:"#bfbfbf"},null)])])])}var w="",c=e.defineComponent({name:"DSkeletonItem",props:C,setup(o){const{variant:n}=e.toRefs(o),{classes:t}=k(o);return()=>e.createVNode("div",{class:t.value},[n.value==="image"&&e.createVNode(v,null,null)])}}),I="",p=e.defineComponent({name:"DSkeleton",props:y,setup(o,n){const t=h("skeleton"),{loading:s,rows:i,showAnimation:r,round:L}=e.toRefs(o),a=e.computed(()=>new Array(i.value).fill(""));return e.provide(f,r),e.provide(m,L),()=>{var u,g;return s.value?n.slots.placeholder?n.slots.placeholder():e.createVNode("div",{class:t.b()},[e.createVNode(c,{class:t.e("title")},null),a.value.map(()=>e.createVNode(c,{class:t.e("paragraph")},null))]):(g=(u=n.slots).default)==null?void 0:g.call(u)}}}),S={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.component(p.name,p),o.component(c.name,c)}};l.Skeleton=p,l.SkeletonItem=c,l.animationInjectionKey=f,l.default=S,l.roundInjectionKey=m,l.skeletonItemProps=C,l.skeletonProps=y,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"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-item{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-skeleton-item--round{border-radius:var(--devui-border-radius, 4px)}.devui-skeleton-item--square{width:100%;height:16px}.devui-skeleton-item--circle{border-radius:50%}.devui-skeleton-item--circle.devui-skeleton-item--sm{width:20px;height:20px}.devui-skeleton-item--circle.devui-skeleton-item--md{width:40px;height:40px}.devui-skeleton-item--circle.devui-skeleton-item--lg{width:60px;height:60px}.devui-skeleton-item--image{display:flex;justify-content:center;align-items:center}.devui-skeleton-item--image svg{width:40%;height:40%}.devui-skeleton-item--image.devui-skeleton-item--sm{width:50px;height:50px}.devui-skeleton-item--image.devui-skeleton-item--md{width:100px;height:100px}.devui-skeleton-item--image.devui-skeleton-item--lg{width:200px;height:200px}.devui-skeleton-item--animation.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%) var(--devui-list-item-hover-bg, #f2f2f3);background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton{width:100%}.devui-skeleton__paragraph{margin-bottom:12px}.devui-skeleton__paragraph:last-child{width:60%;margin-bottom:0}.devui-skeleton-item.devui-skeleton__title{width:40%;margin-bottom:16px}

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;