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

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/status/index.es.js

@@ -1,22 +1,46 @@
 import { defineComponent, computed, createVNode } from "vue";
+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
+  };
+}
 var status = "";
 var Status = defineComponent({
   name: "DStatus",
   props: {
     type: {
-      default: "initial",
+      default: "invalid",
       type: String
     }
   },
   setup(props, ctx) {
+    const ns = useNamespace("status");
     const typeClass = computed(() => {
       const {
         type
       } = props;
       const typeStatus = ["success", "error", "initial", "warning", "waiting", "running", "invalid"];
-      let typeClassStr = `devui-status devui-status-bg-invalid`;
+      let typeClassStr = `${ns.b()} ${ns.em("bg", "invalid")}`;
       if (typeStatus.includes(type)) {
-        typeClassStr = `devui-status devui-status-bg-${type}`;
+        typeClassStr = `${ns.b()} ${ns.em("bg", type)}`;
       }
       return typeClassStr;
     });
@@ -28,15 +52,12 @@ var Status = defineComponent({
     };
   }
 });
-Status.install = function(app) {
-  app.component(Status.name, Status);
-};
 var index = {
   title: "Status \u72B6\u6001",
   category: "\u901A\u7528",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
-    app.use(Status);
+    app.component(Status.name, Status);
   }
 };
 export { Status, index as default };

package/status/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";var l="",u=e.defineComponent({name:"DStatus",props:{type:{default:"initial",type:String}},setup(n,o){const r=e.computed(()=>{const{type:s}=n,i=["success","error","initial","warning","waiting","running","invalid"];let a="devui-status devui-status-bg-invalid";return i.includes(s)&&(a=`devui-status devui-status-bg-${s}`),a});return()=>{var s,i;return e.createVNode("span",{class:r.value},[(i=(s=o.slots).default)==null?void 0:i.call(s)])}}});u.install=function(n){n.component(u.name,u)};var d={title:"Status \u72B6\u6001",category:"\u901A\u7528",status:"\u5DF2\u5B8C\u6210",install(n){n.use(u)}};t.Status=u,t.default=d,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(t,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],u):(t=typeof globalThis!="undefined"?globalThis:t||self,u(t.index={},t.Vue))})(this,function(t,u){"use strict";function c(n,a,e){let i=n;return a&&(i+=`__${a}`),e&&(i+=`--${e}`),i}function f(n,a=!1){const e=a?`.devui-${n}`:`devui-${n}`;return{b:()=>c(e),e:s=>s?c(e,s):"",m:s=>s?c(e,"",s):"",em:(s,p)=>s&&p?c(e,s,p):""}}var v="",d=u.defineComponent({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(n,a){const e=f("status"),i=u.computed(()=>{const{type:o}=n,r=["success","error","initial","warning","waiting","running","invalid"];let l=`${e.b()} ${e.em("bg","invalid")}`;return r.includes(o)&&(l=`${e.b()} ${e.em("bg",o)}`),l});return()=>{var o,r;return u.createVNode("span",{class:i.value},[(r=(o=a.slots).default)==null?void 0:r.call(o)])}}}),m={title:"Status \u72B6\u6001",category:"\u901A\u7528",status:"100%",install(n){n.component(d.name,d)}};t.Status=d,t.default=m,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/status/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-status{line-height:20px;height:20px;display:flex;align-items:center}.devui-status:before{display:inline-block;content:"";width:10px;height:10px;margin-right:5px;border-radius:100%}.devui-status.devui-status-bg-success:before{background-color:var(--devui-success, #50d4ab)}.devui-status.devui-status-bg-error:before{background-color:var(--devui-danger, #f66f6a)}.devui-status.devui-status-bg-warning:before{background-color:var(--devui-warning, #fac20a)}.devui-status.devui-status-bg-initial:before{background-color:var(--devui-initial, #e9edfa)}.devui-status.devui-status-bg-waiting:before{background-color:var(--devui-waiting, #9faad7)}.devui-status.devui-status-bg-running:before{background-color:var(--devui-info, #5e7ce0)}.devui-status.devui-status-bg-invalid:before{background-color:var(--devui-dividing-line, #dfe1e6)}
+.devui-status{line-height:20px;height:20px;display:flex;align-items:center}.devui-status:before{display:inline-block;content:"";width:10px;height:10px;margin-right:5px;border-radius:100%}.devui-status.devui-status__bg--success:before{background-color:var(--devui-success, #50d4ab)}.devui-status.devui-status__bg--error:before{background-color:var(--devui-danger, #f66f6a)}.devui-status.devui-status__bg--warning:before{background-color:var(--devui-warning, #fac20a)}.devui-status.devui-status__bg--initial:before{background-color:var(--devui-initial, #e9edfa)}.devui-status.devui-status__bg--waiting:before{background-color:var(--devui-waiting, #9faad7)}.devui-status.devui-status__bg--running:before{background-color:var(--devui-info, #5e7ce0)}.devui-status.devui-status__bg--invalid:before{background-color:var(--devui-dividing-line, #f2f2f3)}

package/steps/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/index.es.js

@@ -0,0 +1,386 @@
+import { defineComponent, toRefs, ref, provide, watch, computed, createVNode, resolveDynamicComponent, mergeProps, getCurrentInstance, inject, Fragment } from "vue";
+const stepsProps = {
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  space: {
+    type: Number
+  },
+  alignCenter: {
+    type: Boolean,
+    default: false
+  },
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  simple: {
+    type: Boolean,
+    default: false
+  }
+};
+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
+  };
+}
+var steps = "";
+const ACTIVE_STEP = "active-step";
+const STEPS = "steps";
+const STEPS_PROPS = "steps-props";
+var Steps = defineComponent({
+  name: "DSteps",
+  props: stepsProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    slots
+  }) {
+    const {
+      modelValue,
+      direction,
+      simple
+    } = toRefs(props);
+    const ns = useNamespace("steps");
+    const activeStep = ref(modelValue.value);
+    provide(ACTIVE_STEP, activeStep);
+    provide(STEPS_PROPS, props);
+    const steps2 = ref([]);
+    provide(STEPS, steps2);
+    watch(modelValue, (newVal) => {
+      activeStep.value = newVal;
+    });
+    const stepsClass = computed(() => {
+      const directionClass = direction.value === "vertical" ? " vertical" : "";
+      const simpleClass = simple.value ? " simple" : "";
+      return `${ns.b()}${directionClass}${simpleClass}`;
+    });
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": stepsClass.value
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const stepProps = {
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  status: {
+    type: String
+  }
+};
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
+  }
+});
+var iconGroup = "";
+defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns = useNamespace("icon-group");
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+var step = "";
+var Step = defineComponent({
+  name: "DStep",
+  props: stepProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      title,
+      description,
+      icon: icon2,
+      status
+    } = toRefs(props);
+    const ns = useNamespace("step");
+    const instance = getCurrentInstance();
+    const activeStep = inject(ACTIVE_STEP);
+    const steps2 = inject(STEPS);
+    steps2.value.push(instance);
+    const stepsProps2 = inject(STEPS_PROPS);
+    const currentStepIndex = steps2.value.indexOf(instance);
+    const stepClass = computed(() => {
+      const activeClass = activeStep.value === currentStepIndex ? " active" : "";
+      const finishedClass = activeStep.value > currentStepIndex ? " finished" : "";
+      const centerClass = stepsProps2.alignCenter ? " center" : "";
+      const statusClass = (status == null ? void 0 : status.value) ? ` ${status == null ? void 0 : status.value}` : "";
+      const simpleClass = stepsProps2.simple ? ` ${ns.m("simple")}` : "";
+      return `${ns.b()}${activeClass}${finishedClass}${centerClass}${statusClass}${simpleClass}`;
+    });
+    const stepStyle = computed(() => {
+      const styleObj = {};
+      if (stepsProps2.space) {
+        styleObj.width = `${stepsProps2.space}px`;
+      } else {
+        styleObj.flexBasis = stepsProps2.alignCenter || stepsProps2.simple ? `${100 / steps2.value.length}%` : `${100 / (steps2.value.length - 1)}%`;
+      }
+      return styleObj;
+    });
+    const iconColor = computed(() => {
+      const isActive = activeStep.value === currentStepIndex;
+      const isFinished = activeStep.value > currentStepIndex;
+      return isActive ? "var(--devui-brand)" : isFinished ? "var(--devui-success)" : "var(--devui-placeholder)";
+    });
+    const statusMap = {
+      finish: createVNode(Icon, {
+        "name": "right-o",
+        "color": "var(--devui-success)",
+        "size": "24px"
+      }, null),
+      success: createVNode(Icon, {
+        "name": "right-o",
+        "color": "var(--devui-success)",
+        "size": "24px"
+      }, null),
+      error: createVNode(Icon, {
+        "name": "error-o",
+        "color": "var(--devui-danger)",
+        "size": "24px"
+      }, null)
+    };
+    const renderDot = () => {
+      var _a;
+      return slots.icon ? (_a = slots.icon) == null ? void 0 : _a.call(slots, iconColor.value) : icon2.value ? createVNode(Icon, {
+        "name": icon2.value,
+        "color": iconColor.value,
+        "size": "24px"
+      }, null) : status.value && statusMap[status.value] ? statusMap[status.value] : activeStep.value > steps2.value.indexOf(instance) ? createVNode(Icon, {
+        "name": "right-o",
+        "color": "var(--devui-success)",
+        "size": "24px"
+      }, null) : createVNode("span", {
+        "class": ns.e("dot")
+      }, [currentStepIndex + 1]);
+    };
+    return () => {
+      return createVNode(Fragment, null, [stepsProps2.simple ? createVNode("div", {
+        "class": stepClass.value,
+        "style": stepStyle.value
+      }, [title.value]) : createVNode("div", {
+        "class": stepClass.value,
+        "style": stepStyle.value
+      }, [createVNode("div", {
+        "class": ns.e("dot-container")
+      }, [renderDot(), createVNode("div", {
+        "class": ns.e("line")
+      }, null)]), createVNode("div", {
+        "class": ns.e("content")
+      }, [createVNode("span", {
+        "class": ns.e("title")
+      }, [title.value]), description.value && createVNode("span", {
+        "class": ns.e("description")
+      }, [description.value])])])]);
+    };
+  }
+});
+var index = {
+  title: "Steps \u6B65\u9AA4\u6761",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.component(Steps.name, Steps);
+    app.component(Step.name, Step);
+  }
+};
+export { Step, Steps, index as default, stepProps, stepsProps };

package/steps/index.umd.js

@@ -0,0 +1 @@
+(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue))})(this,function(d,e){"use strict";const P={modelValue:{type:Number,default:0},space:{type:Number},alignCenter:{type:Boolean,default:!1},direction:{type:String,default:"horizontal"},simple:{type:Boolean,default:!1}};function y(a,s,o){let n=a;return s&&(n+=`__${s}`),o&&(n+=`--${o}`),n}function v(a,s=!1){const o=s?`.devui-${a}`:`devui-${a}`;return{b:()=>y(o),e:t=>t?y(o,t):"",m:t=>t?y(o,"",t):"",em:(t,r)=>t&&r?y(o,t,r):""}}var k="";const D="active-step",I="steps",z="steps-props";var C=e.defineComponent({name:"DSteps",props:P,emits:["update:modelValue"],setup(a,{slots:s}){const{modelValue:o,direction:n,simple:u}=e.toRefs(a),l=v("steps"),c=e.ref(o.value);e.provide(D,c),e.provide(z,a);const t=e.ref([]);e.provide(I,t),e.watch(o,i=>{c.value=i});const r=e.computed(()=>{const i=n.value==="vertical"?" vertical":"",p=u.value?" simple":"";return`${l.b()}${i}${p}`});return()=>{var i;return e.createVNode("div",{class:r.value},[(i=s.default)==null?void 0:i.call(s)])}}});const x={title:{type:String,required:!0},description:{type:String},icon:{type:String},status:{type:String}},E={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},T={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};var M="",_=e.defineComponent({name:"DSvgIcon",props:T,setup(a){const{name:s,color:o,size:n}=e.toRefs(a),u=v("svg-icon"),l=e.computed(()=>`#icon-${s.value}`),c=e.computed(()=>typeof n.value=="number"?`${n.value}px`:n.value),t={width:c.value,height:c.value};return()=>e.createVNode("svg",{class:u.b(),style:t},[e.createVNode("use",{"xlink:href":l.value,fill:o.value},null)])}});function A(a){return/^((http|https):)?\/\//.test(a)}function R(a,s){const{component:o,name:n,size:u,color:l,classPrefix:c,rotate:t}=e.toRefs(a),r=v("icon"),i=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),p=o.value?e.resolveDynamicComponent(o.value):e.resolveDynamicComponent(_),m=()=>e.createVNode("img",e.mergeProps({src:n.value,alt:n.value.split("/")[n.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{width:i.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},s.attrs),null),S=()=>e.createVNode(p,e.mergeProps({name:n.value,color:l.value,size:i.value,class:[(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},s.attrs),null),h=()=>{const N=/^icon-/.test(n.value)?n.value:`${c.value}-${n.value}`;return e.createVNode("i",e.mergeProps({class:[c.value,N,(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{fontSize:i.value,color:l.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},s.attrs),null)};return{iconDom:()=>o.value?S():A(n.value)?m():h()}}var g=e.defineComponent({name:"DIcon",props:E,emits:["click"],setup(a,s){const{disabled:o,operable:n}=e.toRefs(a),{iconDom:u}=R(a,s),l=v("icon"),c=e.computed(()=>({[l.e("container")]:!0,[l.m("disabled")]:o.value,[l.m("operable")]:n.value})),t=r=>{o.value||s.emit("click",r)};return()=>{var r,i,p,m;return e.createVNode("div",{class:c.value,onClick:t},[(i=(r=s.slots).prefix)==null?void 0:i.call(r),u(),(m=(p=s.slots).suffix)==null?void 0:m.call(p)])}}}),U="";e.defineComponent({name:"DIconGroup",setup(a,s){const o=v("icon-group");return()=>{var n,u;return e.createVNode("div",{class:o.b()},[(u=(n=s.slots).default)==null?void 0:u.call(n)])}}});var G="",V=e.defineComponent({name:"DStep",props:x,setup(a,{slots:s}){const{title:o,description:n,icon:u,status:l}=e.toRefs(a),c=v("step"),t=e.getCurrentInstance(),r=e.inject(D),i=e.inject(I);i.value.push(t);const p=e.inject(z),m=i.value.indexOf(t),S=e.computed(()=>{const f=r.value===m?" active":"",b=r.value>m?" finished":"",F=p.alignCenter?" center":"",O=l!=null&&l.value?` ${l==null?void 0:l.value}`:"",w=p.simple?` ${c.m("simple")}`:"";return`${c.b()}${f}${b}${F}${O}${w}`}),h=e.computed(()=>{const f={};return p.space?f.width=`${p.space}px`:f.flexBasis=p.alignCenter||p.simple?`${100/i.value.length}%`:`${100/(i.value.length-1)}%`,f}),$=e.computed(()=>{const f=r.value===m,b=r.value>m;return f?"var(--devui-brand)":b?"var(--devui-success)":"var(--devui-placeholder)"}),N={finish:e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null),success:e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null),error:e.createVNode(g,{name:"error-o",color:"var(--devui-danger)",size:"24px"},null)},B=()=>{var f;return s.icon?(f=s.icon)==null?void 0:f.call(s,$.value):u.value?e.createVNode(g,{name:u.value,color:$.value,size:"24px"},null):l.value&&N[l.value]?N[l.value]:r.value>i.value.indexOf(t)?e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null):e.createVNode("span",{class:c.e("dot")},[m+1])};return()=>e.createVNode(e.Fragment,null,[p.simple?e.createVNode("div",{class:S.value,style:h.value},[o.value]):e.createVNode("div",{class:S.value,style:h.value},[e.createVNode("div",{class:c.e("dot-container")},[B(),e.createVNode("div",{class:c.e("line")},null)]),e.createVNode("div",{class:c.e("content")},[e.createVNode("span",{class:c.e("title")},[o.value]),n.value&&e.createVNode("span",{class:c.e("description")},[n.value])])])])}}),j={title:"Steps \u6B65\u9AA4\u6761",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(C.name,C),a.component(V.name,V)}};d.Step=V,d.Steps=C,d.default=j,d.stepProps=x,d.stepsProps=P,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/steps/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "steps",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/steps/style.css

@@ -0,0 +1 @@
+.devui-steps{display:flex}.devui-steps.vertical{flex-direction:column;height:100%}.devui-steps.vertical .devui-step{flex-direction:row}.devui-steps.vertical .devui-step__line{width:1px;height:100%;left:12px;top:24px}.devui-steps.vertical .devui-step__content{margin-left:8px;padding-top:2px}.devui-steps.simple .devui-step{position:relative;height:36px;line-height:36px;text-align:center;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-steps.simple .devui-step:not(:first-child){margin-left:18px}.devui-steps.simple .devui-step:not(:last-child){margin-right:18px}.devui-steps.simple .devui-step:not(:first-child):before{content:"";width:0;height:0;position:absolute;left:-28px;top:0;border:solid 18px transparent;border-top-color:var(--devui-brand-foil, #f2f2f3);border-right-color:var(--devui-brand-foil, #f2f2f3);border-bottom-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step:after{content:"";width:0;height:0;position:absolute;right:-36px;top:0;border:solid 18px transparent;border-left-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step.active{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.active:before{border-top-color:var(--devui-brand, #5e7ce0);border-right-color:var(--devui-brand, #5e7ce0);border-bottom-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.active:after{border-left-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.finished{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.finished:before{border-top-color:var(--devui-success, #50d4ab);border-right-color:var(--devui-success, #50d4ab);border-bottom-color:var(--devui-success, #50d4ab)}.devui-steps.simple .devui-step.finished:after{border-left-color:var(--devui-success, #50d4ab)}.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-step{display:flex;flex-direction:column;flex-shrink:1}.devui-step:last-child{flex-shrink:0}.devui-step:last-child:not(.center):not(.devui-step--simple){flex-basis:auto!important}.devui-step:last-child .devui-step__line{display:none}.devui-step__dot-container{position:relative}.devui-step__content{display:flex;flex-direction:column}.devui-step__dot{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step__line{position:absolute;top:12px;left:24px;width:calc(100% - 24px);height:1px;background-color:var(--devui-line, #d7d8da)}.devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step__description{color:var(--devui-placeholder, #babbc0);font-size:12px}.devui-step.active .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.active .devui-step__title,.devui-step.active .devui-step__description{color:var(--devui-brand, #5e7ce0)}.devui-step.finished .devui-step__dot{background-color:var(--devui-success, #50d4ab)}.devui-step.finished .devui-step__title,.devui-step.finished .devui-step__description{color:var(--devui-success, #50d4ab)}.devui-step.center{text-align:center}.devui-step.center .devui-step__line{left:calc(50% + 12px)}.devui-step.wait .devui-step__dot{background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step.wait .devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step.process .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.process .devui-step__title{color:var(--devui-brand, #5e7ce0)}.devui-step.finish .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.finish .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.success .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.success .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.error .devui-step__dot{background-color:var(--devui-danger, #f66f6a);color:var(--devui-light-text, #ffffff)}.devui-step.error .devui-step__title{color:var(--devui-danger, #f66f6a)}