vue-devui 1.0.0-alpha.1 → 1.0.0-alpha.12

package/grid/index.es.js

@@ -0,0 +1,271 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
+const rowProps = {
+  align: {
+    type: String,
+    default: "top"
+  },
+  gutter: {
+    type: [Number, Object, Array],
+    default: 0
+  },
+  justify: {
+    type: String,
+    default: "start"
+  },
+  wrap: {
+    type: Boolean,
+    default: false
+  }
+};
+const numberProp = Number;
+const colPropsBaseStyle = {
+  flex: [String, Number],
+  order: numberProp
+};
+const colPropsBaseClass = {
+  offset: numberProp,
+  pull: numberProp,
+  push: numberProp,
+  span: numberProp
+};
+const screenSizesProp = [Number, Object];
+const screenSizes = {
+  xs: screenSizesProp,
+  sm: screenSizesProp,
+  md: screenSizesProp,
+  lg: screenSizesProp,
+  xl: screenSizesProp,
+  xxl: screenSizesProp
+};
+const colProps = { ...colPropsBaseStyle, ...colPropsBaseClass, ...screenSizes };
+const RESULT_SCREEN = ["xxl", "xl", "lg", "md", "sm", "xs"];
+const screenMedias = {
+  xs: "screen and (max-width: 575px)",
+  sm: "screen and (min-width: 576px)",
+  md: "screen and (min-width: 768px)",
+  lg: "screen and (min-width: 992px)",
+  xl: "screen and (min-width: 1200px)",
+  xxl: "screen and (min-width: 1600px)"
+};
+const subscribers = /* @__PURE__ */ new Map();
+let subUid = -1;
+const screen = {};
+const results = {};
+function dispatch() {
+  subscribers.forEach((value) => {
+    value({ ...screen });
+  });
+}
+function register() {
+  Object.keys(screenMedias).forEach((key) => {
+    const result = window.matchMedia(screenMedias[key]);
+    if (result.matches) {
+      screen[key] = true;
+      dispatch();
+    }
+    const listener = (e) => {
+      screen[key] = e.matches;
+      dispatch();
+    };
+    result.addEventListener("change", listener);
+    results[key] = {
+      res: result,
+      listener
+    };
+  });
+}
+function responesScreen(func) {
+  if (!subscribers.size) {
+    register();
+  }
+  subUid += 1;
+  subscribers.set(subUid, func);
+  func({ ...screen });
+  return subUid;
+}
+function unRegister() {
+  Object.keys(screenMedias).forEach((key) => {
+    const handler = results[key];
+    handler.res.removeEventListener("change", handler.listener);
+  });
+  subscribers.clear();
+}
+function removeSubscribeCb(id) {
+  subscribers.delete(id);
+  if (subscribers.size === 0) {
+    unRegister();
+  }
+}
+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 row = "";
+var Row = defineComponent({
+  name: "DRow",
+  props: rowProps,
+  emits: [],
+  setup(props, {
+    slots
+  }) {
+    const gutterScreenSize = ref({});
+    const ns = useNamespace("row");
+    const rowClass = computed(() => ({
+      [ns.em("align", props.align)]: true,
+      [ns.em("justify", props.justify)]: true,
+      [ns.e("wrap")]: props.wrap
+    }));
+    let token;
+    onMounted(() => {
+      token = responesScreen((screen2) => {
+        gutterScreenSize.value = screen2;
+      });
+    });
+    onUnmounted(() => {
+      removeSubscribeCb(token);
+    });
+    const gutterStyle = computed(() => {
+      if (!props.gutter) {
+        return {};
+      }
+      let currentGutter = [0, 0];
+      if (Array.isArray(props.gutter)) {
+        currentGutter = props.gutter;
+      } else if (typeof props.gutter === "number") {
+        currentGutter = [props.gutter, 0];
+      } else {
+        RESULT_SCREEN.some((size) => {
+          const gzs = props.gutter[size];
+          if (gutterScreenSize.value[size] && gzs) {
+            if (typeof gzs === "number") {
+              currentGutter = [gzs, 0];
+            } else {
+              currentGutter = gzs;
+            }
+            return true;
+          }
+          return false;
+        });
+      }
+      const paddingLeft = `${(currentGutter[0] || 0) / 2}px`;
+      const paddingRight = `${(currentGutter[0] || 0) / 2}px`;
+      const paddingTop = `${(currentGutter[1] || 0) / 2}px`;
+      const paddingBottom = `${(currentGutter[1] || 0) / 2}px`;
+      return {
+        paddingLeft,
+        paddingRight,
+        paddingTop,
+        paddingBottom
+      };
+    });
+    provide("gutterStyle", gutterStyle);
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": [ns.b(), rowClass.value]
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const colNs = useNamespace("col");
+function useColClassNames(props) {
+  return computed(() => ({
+    [colNs.em("span", props.span ? String(props.span) : "")]: true,
+    [colNs.em("offset", props.offset ? String(props.offset) : "")]: true,
+    [colNs.em("pull", props.pull ? String(props.pull) : "")]: true,
+    [colNs.em("push", props.push ? String(props.push) : "")]: true
+  }));
+}
+function setSpace(val) {
+  return ` ${val.trim()}${val && " "}`;
+}
+function useSize(colSizes) {
+  const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
+  return computed(() => {
+    return keys.reduce((total, key) => {
+      const valueType = typeof colSizes[key];
+      if (valueType === "number") {
+        total = `${setSpace(total)}${colNs.em(key, `span-${colSizes[key]}`)}`;
+      } else if (valueType === "object") {
+        const colSizesKeys = Object.keys(colSizes[key]);
+        const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
+          const baseClass = colSizes[key];
+          const _class = baseClass[k];
+          if (typeof _class !== "number") {
+            return "";
+          } else {
+            tot = `${setSpace(tot)}${colNs.em(key, `${k}-${_class}`)}`;
+          }
+          return tot;
+        }, "");
+        total = `${setSpace(total)}${sum}`;
+      }
+      return total;
+    }, "");
+  });
+}
+var col = "";
+var Col = defineComponent({
+  name: "DCol",
+  props: colProps,
+  setup(props, {
+    slots
+  }) {
+    const ns = useNamespace("col");
+    const formatFlex = (flex) => {
+      if (typeof flex === "number") {
+        return `${flex} ${flex} auto`;
+      }
+      if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(flex)) {
+        return `0 0 ${flex}`;
+      }
+      return flex;
+    };
+    const colClassNames = useColClassNames(props);
+    const sizeClassNames = useSize(props);
+    const colStyle = computed(() => ({
+      flex: formatFlex(props.flex),
+      order: props.order
+    }));
+    const gutterStyle = inject("gutterStyle");
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": [ns.b(), colClassNames.value, sizeClassNames.value],
+        "style": {
+          ...colStyle.value,
+          ...gutterStyle == null ? void 0 : gutterStyle.value
+        }
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var index = {
+  title: "Grid \u6805\u683C",
+  category: "\u5E03\u5C40",
+  status: "100%",
+  install(app) {
+    app.component(Row.name, Row);
+    app.component(Col.name, Col);
+  }
+};
+export { Col, Row, colProps, colPropsBaseClass, colPropsBaseStyle, index as default, rowProps, screenSizes };

package/grid/index.umd.js

@@ -0,0 +1 @@
+(function(o,c){typeof exports=="object"&&typeof module!="undefined"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(o=typeof globalThis!="undefined"?globalThis:o||self,c(o.index={},o.Vue))})(this,function(o,c){"use strict";const P={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},p=Number,E={flex:[String,Number],order:p},S={offset:p,pull:p,push:p,span:p},a=[Number,Object],$={xs:a,sm:a,md:a,lg:a,xl:a,xxl:a},B={...E,...S,...$},T=["xxl","xl","lg","md","sm","xs"],w={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},l=new Map;let x=-1;const g={},O={};function R(){l.forEach(e=>{e({...g})})}function _(){Object.keys(w).forEach(e=>{const s=window.matchMedia(w[e]);s.matches&&(g[e]=!0,R());const n=r=>{g[e]=r.matches,R()};s.addEventListener("change",n),O[e]={res:s,listener:n}})}function L(e){return l.size||_(),x+=1,l.set(x,e),e({...g}),x}function A(){Object.keys(w).forEach(e=>{const s=O[e];s.res.removeEventListener("change",s.listener)}),l.clear()}function U(e){l.delete(e),l.size===0&&A()}function b(e,s,n){let r=e;return s&&(r+=`__${s}`),n&&(r+=`--${n}`),r}function C(e,s=!1){const n=s?`.devui-${e}`:`devui-${e}`;return{b:()=>b(n),e:t=>t?b(n,t):"",m:t=>t?b(n,"",t):"",em:(t,u)=>t&&u?b(n,t,u):""}}var q="",j=c.defineComponent({name:"DRow",props:P,emits:[],setup(e,{slots:s}){const n=c.ref({}),r=C("row"),i=c.computed(()=>({[r.em("align",e.align)]:!0,[r.em("justify",e.justify)]:!0,[r.e("wrap")]:e.wrap}));let f;c.onMounted(()=>{f=L(t=>{n.value=t})}),c.onUnmounted(()=>{U(f)});const m=c.computed(()=>{if(!e.gutter)return{};let t=[0,0];Array.isArray(e.gutter)?t=e.gutter:typeof e.gutter=="number"?t=[e.gutter,0]:T.some(M=>{const h=e.gutter[M];return n.value[M]&&h?(typeof h=="number"?t=[h,0]:t=h,!0):!1});const u=`${(t[0]||0)/2}px`,z=`${(t[0]||0)/2}px`,y=`${(t[1]||0)/2}px`,K=`${(t[1]||0)/2}px`;return{paddingLeft:u,paddingRight:z,paddingTop:y,paddingBottom:K}});return c.provide("gutterStyle",m),()=>{var t;return c.createVNode("div",{class:[r.b(),i.value]},[(t=s.default)==null?void 0:t.call(s)])}}});const d=C("col");function V(e){return c.computed(()=>({[d.em("span",e.span?String(e.span):"")]:!0,[d.em("offset",e.offset?String(e.offset):"")]:!0,[d.em("pull",e.pull?String(e.pull):"")]:!0,[d.em("push",e.push?String(e.push):"")]:!0}))}function v(e){return` ${e.trim()}${e&&" "}`}function D(e){const s=Object.keys(e).filter(n=>n in $);return c.computed(()=>s.reduce((n,r)=>{const i=typeof e[r];if(i==="number")n=`${v(n)}${d.em(r,`span-${e[r]}`)}`;else if(i==="object"){const m=Object.keys(e[r]).filter(t=>t in S).reduce((t,u)=>{const y=e[r][u];return typeof y!="number"?"":(t=`${v(t)}${d.em(r,`${u}-${y}`)}`,t)},"");n=`${v(n)}${m}`}return n},""))}var F="",N=c.defineComponent({name:"DCol",props:B,setup(e,{slots:s}){const n=C("col"),r=u=>typeof u=="number"?`${u} ${u} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(u)?`0 0 ${u}`:u,i=V(e),f=D(e),m=c.computed(()=>({flex:r(e.flex),order:e.order})),t=c.inject("gutterStyle");return()=>{var u;return c.createVNode("div",{class:[n.b(),i.value,f.value],style:{...m.value,...t==null?void 0:t.value}},[(u=s.default)==null?void 0:u.call(s)])}}}),G={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(j.name,j),e.component(N.name,N)}};o.Col=N,o.Row=j,o.colProps=B,o.colPropsBaseClass=S,o.colPropsBaseStyle=E,o.default=G,o.rowProps=P,o.screenSizes=$,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/{sticky → grid}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sticky",
+  "name": "grid",
   "version": "0.0.0",
   "main": "index.umd.js",
   "module": "index.es.js",

package/grid/style.css

@@ -0,0 +1 @@
+.devui-row{display:flex}.devui-row__wrap{flex-wrap:wrap}.devui-row__align--top{align-items:flex-start}.devui-row__align--middle{align-items:center}.devui-row__align--bottom{align-items:flex-end}.devui-row__justify--start{justify-content:flex-start}.devui-row__justify--center{justify-content:center}.devui-row__justify--end{justify-content:flex-end}.devui-row__justify--around{justify-content:space-around}.devui-row__justify--between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col__span--0,.devui-col__xs--span-0{display:none}.devui-col__offset--1{margin-left:4.1666666667%}.devui-col__pull--1{right:4.1666666667%}.devui-col__push--1{left:4.1666666667%}.devui-col__span--1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xs--offset-1{margin-left:4.1666666667%}.devui-col__xs--pull-1{right:4.1666666667%}.devui-col__xs--push-1{left:4.1666666667%}.devui-col__xs--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__offset--2{margin-left:8.3333333333%}.devui-col__pull--2{right:8.3333333333%}.devui-col__push--2{left:8.3333333333%}.devui-col__span--2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xs--offset-2{margin-left:8.3333333333%}.devui-col__xs--pull-2{right:8.3333333333%}.devui-col__xs--push-2{left:8.3333333333%}.devui-col__xs--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__offset--3{margin-left:12.5%}.devui-col__pull--3{right:12.5%}.devui-col__push--3{left:12.5%}.devui-col__span--3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xs--offset-3{margin-left:12.5%}.devui-col__xs--pull-3{right:12.5%}.devui-col__xs--push-3{left:12.5%}.devui-col__xs--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__offset--4{margin-left:16.6666666667%}.devui-col__pull--4{right:16.6666666667%}.devui-col__push--4{left:16.6666666667%}.devui-col__span--4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xs--offset-4{margin-left:16.6666666667%}.devui-col__xs--pull-4{right:16.6666666667%}.devui-col__xs--push-4{left:16.6666666667%}.devui-col__xs--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__offset--5{margin-left:20.8333333333%}.devui-col__pull--5{right:20.8333333333%}.devui-col__push--5{left:20.8333333333%}.devui-col__span--5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xs--offset-5{margin-left:20.8333333333%}.devui-col__xs--pull-5{right:20.8333333333%}.devui-col__xs--push-5{left:20.8333333333%}.devui-col__xs--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__offset--6{margin-left:25%}.devui-col__pull--6{right:25%}.devui-col__push--6{left:25%}.devui-col__span--6{display:block;flex:0 0 25%;width:25%}.devui-col__xs--offset-6{margin-left:25%}.devui-col__xs--pull-6{right:25%}.devui-col__xs--push-6{left:25%}.devui-col__xs--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__offset--7{margin-left:29.1666666667%}.devui-col__pull--7{right:29.1666666667%}.devui-col__push--7{left:29.1666666667%}.devui-col__span--7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xs--offset-7{margin-left:29.1666666667%}.devui-col__xs--pull-7{right:29.1666666667%}.devui-col__xs--push-7{left:29.1666666667%}.devui-col__xs--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__offset--8{margin-left:33.3333333333%}.devui-col__pull--8{right:33.3333333333%}.devui-col__push--8{left:33.3333333333%}.devui-col__span--8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xs--offset-8{margin-left:33.3333333333%}.devui-col__xs--pull-8{right:33.3333333333%}.devui-col__xs--push-8{left:33.3333333333%}.devui-col__xs--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__offset--9{margin-left:37.5%}.devui-col__pull--9{right:37.5%}.devui-col__push--9{left:37.5%}.devui-col__span--9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xs--offset-9{margin-left:37.5%}.devui-col__xs--pull-9{right:37.5%}.devui-col__xs--push-9{left:37.5%}.devui-col__xs--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__offset--10{margin-left:41.6666666667%}.devui-col__pull--10{right:41.6666666667%}.devui-col__push--10{left:41.6666666667%}.devui-col__span--10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xs--offset-10{margin-left:41.6666666667%}.devui-col__xs--pull-10{right:41.6666666667%}.devui-col__xs--push-10{left:41.6666666667%}.devui-col__xs--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__offset--11{margin-left:45.8333333333%}.devui-col__pull--11{right:45.8333333333%}.devui-col__push--11{left:45.8333333333%}.devui-col__span--11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xs--offset-11{margin-left:45.8333333333%}.devui-col__xs--pull-11{right:45.8333333333%}.devui-col__xs--push-11{left:45.8333333333%}.devui-col__xs--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__offset--12{margin-left:50%}.devui-col__pull--12{right:50%}.devui-col__push--12{left:50%}.devui-col__span--12{display:block;flex:0 0 50%;width:50%}.devui-col__xs--offset-12{margin-left:50%}.devui-col__xs--pull-12{right:50%}.devui-col__xs--push-12{left:50%}.devui-col__xs--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__offset--13{margin-left:54.1666666667%}.devui-col__pull--13{right:54.1666666667%}.devui-col__push--13{left:54.1666666667%}.devui-col__span--13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xs--offset-13{margin-left:54.1666666667%}.devui-col__xs--pull-13{right:54.1666666667%}.devui-col__xs--push-13{left:54.1666666667%}.devui-col__xs--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__offset--14{margin-left:58.3333333333%}.devui-col__pull--14{right:58.3333333333%}.devui-col__push--14{left:58.3333333333%}.devui-col__span--14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xs--offset-14{margin-left:58.3333333333%}.devui-col__xs--pull-14{right:58.3333333333%}.devui-col__xs--push-14{left:58.3333333333%}.devui-col__xs--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__offset--15{margin-left:62.5%}.devui-col__pull--15{right:62.5%}.devui-col__push--15{left:62.5%}.devui-col__span--15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xs--offset-15{margin-left:62.5%}.devui-col__xs--pull-15{right:62.5%}.devui-col__xs--push-15{left:62.5%}.devui-col__xs--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__offset--16{margin-left:66.6666666667%}.devui-col__pull--16{right:66.6666666667%}.devui-col__push--16{left:66.6666666667%}.devui-col__span--16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xs--offset-16{margin-left:66.6666666667%}.devui-col__xs--pull-16{right:66.6666666667%}.devui-col__xs--push-16{left:66.6666666667%}.devui-col__xs--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__offset--17{margin-left:70.8333333333%}.devui-col__pull--17{right:70.8333333333%}.devui-col__push--17{left:70.8333333333%}.devui-col__span--17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xs--offset-17{margin-left:70.8333333333%}.devui-col__xs--pull-17{right:70.8333333333%}.devui-col__xs--push-17{left:70.8333333333%}.devui-col__xs--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__offset--18{margin-left:75%}.devui-col__pull--18{right:75%}.devui-col__push--18{left:75%}.devui-col__span--18{display:block;flex:0 0 75%;width:75%}.devui-col__xs--offset-18{margin-left:75%}.devui-col__xs--pull-18{right:75%}.devui-col__xs--push-18{left:75%}.devui-col__xs--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__offset--19{margin-left:79.1666666667%}.devui-col__pull--19{right:79.1666666667%}.devui-col__push--19{left:79.1666666667%}.devui-col__span--19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xs--offset-19{margin-left:79.1666666667%}.devui-col__xs--pull-19{right:79.1666666667%}.devui-col__xs--push-19{left:79.1666666667%}.devui-col__xs--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__offset--20{margin-left:83.3333333333%}.devui-col__pull--20{right:83.3333333333%}.devui-col__push--20{left:83.3333333333%}.devui-col__span--20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xs--offset-20{margin-left:83.3333333333%}.devui-col__xs--pull-20{right:83.3333333333%}.devui-col__xs--push-20{left:83.3333333333%}.devui-col__xs--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__offset--21{margin-left:87.5%}.devui-col__pull--21{right:87.5%}.devui-col__push--21{left:87.5%}.devui-col__span--21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xs--offset-21{margin-left:87.5%}.devui-col__xs--pull-21{right:87.5%}.devui-col__xs--push-21{left:87.5%}.devui-col__xs--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__offset--22{margin-left:91.6666666667%}.devui-col__pull--22{right:91.6666666667%}.devui-col__push--22{left:91.6666666667%}.devui-col__span--22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xs--offset-22{margin-left:91.6666666667%}.devui-col__xs--pull-22{right:91.6666666667%}.devui-col__xs--push-22{left:91.6666666667%}.devui-col__xs--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__offset--23{margin-left:95.8333333333%}.devui-col__pull--23{right:95.8333333333%}.devui-col__push--23{left:95.8333333333%}.devui-col__span--23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xs--offset-23{margin-left:95.8333333333%}.devui-col__xs--pull-23{right:95.8333333333%}.devui-col__xs--push-23{left:95.8333333333%}.devui-col__xs--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__offset--24{margin-left:100%}.devui-col__pull--24{right:100%}.devui-col__push--24{left:100%}.devui-col__span--24{display:block;flex:0 0 100%;width:100%}.devui-col__xs--offset-24{margin-left:100%}.devui-col__xs--pull-24{right:100%}.devui-col__xs--push-24{left:100%}.devui-col__xs--span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col__sm--span-0{display:none}.devui-col__sm--offset-1{margin-left:4.1666666667%}.devui-col__sm--pull-1{right:4.1666666667%}.devui-col__sm--push-1{left:4.1666666667%}.devui-col__sm--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__sm--offset-2{margin-left:8.3333333333%}.devui-col__sm--pull-2{right:8.3333333333%}.devui-col__sm--push-2{left:8.3333333333%}.devui-col__sm--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__sm--offset-3{margin-left:12.5%}.devui-col__sm--pull-3{right:12.5%}.devui-col__sm--push-3{left:12.5%}.devui-col__sm--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__sm--offset-4{margin-left:16.6666666667%}.devui-col__sm--pull-4{right:16.6666666667%}.devui-col__sm--push-4{left:16.6666666667%}.devui-col__sm--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__sm--offset-5{margin-left:20.8333333333%}.devui-col__sm--pull-5{right:20.8333333333%}.devui-col__sm--push-5{left:20.8333333333%}.devui-col__sm--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__sm--offset-6{margin-left:25%}.devui-col__sm--pull-6{right:25%}.devui-col__sm--push-6{left:25%}.devui-col__sm--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__sm--offset-7{margin-left:29.1666666667%}.devui-col__sm--pull-7{right:29.1666666667%}.devui-col__sm--push-7{left:29.1666666667%}.devui-col__sm--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__sm--offset-8{margin-left:33.3333333333%}.devui-col__sm--pull-8{right:33.3333333333%}.devui-col__sm--push-8{left:33.3333333333%}.devui-col__sm--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__sm--offset-9{margin-left:37.5%}.devui-col__sm--pull-9{right:37.5%}.devui-col__sm--push-9{left:37.5%}.devui-col__sm--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__sm--offset-10{margin-left:41.6666666667%}.devui-col__sm--pull-10{right:41.6666666667%}.devui-col__sm--push-10{left:41.6666666667%}.devui-col__sm--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__sm--offset-11{margin-left:45.8333333333%}.devui-col__sm--pull-11{right:45.8333333333%}.devui-col__sm--push-11{left:45.8333333333%}.devui-col__sm--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__sm--offset-12{margin-left:50%}.devui-col__sm--pull-12{right:50%}.devui-col__sm--push-12{left:50%}.devui-col__sm--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__sm--offset-13{margin-left:54.1666666667%}.devui-col__sm--pull-13{right:54.1666666667%}.devui-col__sm--push-13{left:54.1666666667%}.devui-col__sm--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__sm--offset-14{margin-left:58.3333333333%}.devui-col__sm--pull-14{right:58.3333333333%}.devui-col__sm--push-14{left:58.3333333333%}.devui-col__sm--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__sm--offset-15{margin-left:62.5%}.devui-col__sm--pull-15{right:62.5%}.devui-col__sm--push-15{left:62.5%}.devui-col__sm--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__sm--offset-16{margin-left:66.6666666667%}.devui-col__sm--pull-16{right:66.6666666667%}.devui-col__sm--push-16{left:66.6666666667%}.devui-col__sm--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__sm--offset-17{margin-left:70.8333333333%}.devui-col__sm--pull-17{right:70.8333333333%}.devui-col__sm--push-17{left:70.8333333333%}.devui-col__sm--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__sm--offset-18{margin-left:75%}.devui-col__sm--pull-18{right:75%}.devui-col__sm--push-18{left:75%}.devui-col__sm--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__sm--offset-19{margin-left:79.1666666667%}.devui-col__sm--pull-19{right:79.1666666667%}.devui-col__sm--push-19{left:79.1666666667%}.devui-col__sm--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__sm--offset-20{margin-left:83.3333333333%}.devui-col__sm--pull-20{right:83.3333333333%}.devui-col__sm--push-20{left:83.3333333333%}.devui-col__sm--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__sm--offset-21{margin-left:87.5%}.devui-col__sm--pull-21{right:87.5%}.devui-col__sm--push-21{left:87.5%}.devui-col__sm--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__sm--offset-22{margin-left:91.6666666667%}.devui-col__sm--pull-22{right:91.6666666667%}.devui-col__sm--push-22{left:91.6666666667%}.devui-col__sm--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__sm--offset-23{margin-left:95.8333333333%}.devui-col__sm--pull-23{right:95.8333333333%}.devui-col__sm--push-23{left:95.8333333333%}.devui-col__sm--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__sm--offset-24{margin-left:100%}.devui-col__sm--pull-24{right:100%}.devui-col__sm--push-24{left:100%}.devui-col__sm--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col__md--span-0{display:none}.devui-col__md--offset-1{margin-left:4.1666666667%}.devui-col__md--pull-1{right:4.1666666667%}.devui-col__md--push-1{left:4.1666666667%}.devui-col__md--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__md--offset-2{margin-left:8.3333333333%}.devui-col__md--pull-2{right:8.3333333333%}.devui-col__md--push-2{left:8.3333333333%}.devui-col__md--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__md--offset-3{margin-left:12.5%}.devui-col__md--pull-3{right:12.5%}.devui-col__md--push-3{left:12.5%}.devui-col__md--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__md--offset-4{margin-left:16.6666666667%}.devui-col__md--pull-4{right:16.6666666667%}.devui-col__md--push-4{left:16.6666666667%}.devui-col__md--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__md--offset-5{margin-left:20.8333333333%}.devui-col__md--pull-5{right:20.8333333333%}.devui-col__md--push-5{left:20.8333333333%}.devui-col__md--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__md--offset-6{margin-left:25%}.devui-col__md--pull-6{right:25%}.devui-col__md--push-6{left:25%}.devui-col__md--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__md--offset-7{margin-left:29.1666666667%}.devui-col__md--pull-7{right:29.1666666667%}.devui-col__md--push-7{left:29.1666666667%}.devui-col__md--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__md--offset-8{margin-left:33.3333333333%}.devui-col__md--pull-8{right:33.3333333333%}.devui-col__md--push-8{left:33.3333333333%}.devui-col__md--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__md--offset-9{margin-left:37.5%}.devui-col__md--pull-9{right:37.5%}.devui-col__md--push-9{left:37.5%}.devui-col__md--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__md--offset-10{margin-left:41.6666666667%}.devui-col__md--pull-10{right:41.6666666667%}.devui-col__md--push-10{left:41.6666666667%}.devui-col__md--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__md--offset-11{margin-left:45.8333333333%}.devui-col__md--pull-11{right:45.8333333333%}.devui-col__md--push-11{left:45.8333333333%}.devui-col__md--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__md--offset-12{margin-left:50%}.devui-col__md--pull-12{right:50%}.devui-col__md--push-12{left:50%}.devui-col__md--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__md--offset-13{margin-left:54.1666666667%}.devui-col__md--pull-13{right:54.1666666667%}.devui-col__md--push-13{left:54.1666666667%}.devui-col__md--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__md--offset-14{margin-left:58.3333333333%}.devui-col__md--pull-14{right:58.3333333333%}.devui-col__md--push-14{left:58.3333333333%}.devui-col__md--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__md--offset-15{margin-left:62.5%}.devui-col__md--pull-15{right:62.5%}.devui-col__md--push-15{left:62.5%}.devui-col__md--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__md--offset-16{margin-left:66.6666666667%}.devui-col__md--pull-16{right:66.6666666667%}.devui-col__md--push-16{left:66.6666666667%}.devui-col__md--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__md--offset-17{margin-left:70.8333333333%}.devui-col__md--pull-17{right:70.8333333333%}.devui-col__md--push-17{left:70.8333333333%}.devui-col__md--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__md--offset-18{margin-left:75%}.devui-col__md--pull-18{right:75%}.devui-col__md--push-18{left:75%}.devui-col__md--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__md--offset-19{margin-left:79.1666666667%}.devui-col__md--pull-19{right:79.1666666667%}.devui-col__md--push-19{left:79.1666666667%}.devui-col__md--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__md--offset-20{margin-left:83.3333333333%}.devui-col__md--pull-20{right:83.3333333333%}.devui-col__md--push-20{left:83.3333333333%}.devui-col__md--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__md--offset-21{margin-left:87.5%}.devui-col__md--pull-21{right:87.5%}.devui-col__md--push-21{left:87.5%}.devui-col__md--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__md--offset-22{margin-left:91.6666666667%}.devui-col__md--pull-22{right:91.6666666667%}.devui-col__md--push-22{left:91.6666666667%}.devui-col__md--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__md--offset-23{margin-left:95.8333333333%}.devui-col__md--pull-23{right:95.8333333333%}.devui-col__md--push-23{left:95.8333333333%}.devui-col__md--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__md--offset-24{margin-left:100%}.devui-col__md--pull-24{right:100%}.devui-col__md--push-24{left:100%}.devui-col__md--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col__lg--span-0{display:none}.devui-col__lg--offset-1{margin-left:4.1666666667%}.devui-col__lg--pull-1{right:4.1666666667%}.devui-col__lg--push-1{left:4.1666666667%}.devui-col__lg--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__lg--offset-2{margin-left:8.3333333333%}.devui-col__lg--pull-2{right:8.3333333333%}.devui-col__lg--push-2{left:8.3333333333%}.devui-col__lg--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__lg--offset-3{margin-left:12.5%}.devui-col__lg--pull-3{right:12.5%}.devui-col__lg--push-3{left:12.5%}.devui-col__lg--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__lg--offset-4{margin-left:16.6666666667%}.devui-col__lg--pull-4{right:16.6666666667%}.devui-col__lg--push-4{left:16.6666666667%}.devui-col__lg--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__lg--offset-5{margin-left:20.8333333333%}.devui-col__lg--pull-5{right:20.8333333333%}.devui-col__lg--push-5{left:20.8333333333%}.devui-col__lg--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__lg--offset-6{margin-left:25%}.devui-col__lg--pull-6{right:25%}.devui-col__lg--push-6{left:25%}.devui-col__lg--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__lg--offset-7{margin-left:29.1666666667%}.devui-col__lg--pull-7{right:29.1666666667%}.devui-col__lg--push-7{left:29.1666666667%}.devui-col__lg--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__lg--offset-8{margin-left:33.3333333333%}.devui-col__lg--pull-8{right:33.3333333333%}.devui-col__lg--push-8{left:33.3333333333%}.devui-col__lg--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__lg--offset-9{margin-left:37.5%}.devui-col__lg--pull-9{right:37.5%}.devui-col__lg--push-9{left:37.5%}.devui-col__lg--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__lg--offset-10{margin-left:41.6666666667%}.devui-col__lg--pull-10{right:41.6666666667%}.devui-col__lg--push-10{left:41.6666666667%}.devui-col__lg--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__lg--offset-11{margin-left:45.8333333333%}.devui-col__lg--pull-11{right:45.8333333333%}.devui-col__lg--push-11{left:45.8333333333%}.devui-col__lg--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__lg--offset-12{margin-left:50%}.devui-col__lg--pull-12{right:50%}.devui-col__lg--push-12{left:50%}.devui-col__lg--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__lg--offset-13{margin-left:54.1666666667%}.devui-col__lg--pull-13{right:54.1666666667%}.devui-col__lg--push-13{left:54.1666666667%}.devui-col__lg--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__lg--offset-14{margin-left:58.3333333333%}.devui-col__lg--pull-14{right:58.3333333333%}.devui-col__lg--push-14{left:58.3333333333%}.devui-col__lg--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__lg--offset-15{margin-left:62.5%}.devui-col__lg--pull-15{right:62.5%}.devui-col__lg--push-15{left:62.5%}.devui-col__lg--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__lg--offset-16{margin-left:66.6666666667%}.devui-col__lg--pull-16{right:66.6666666667%}.devui-col__lg--push-16{left:66.6666666667%}.devui-col__lg--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__lg--offset-17{margin-left:70.8333333333%}.devui-col__lg--pull-17{right:70.8333333333%}.devui-col__lg--push-17{left:70.8333333333%}.devui-col__lg--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__lg--offset-18{margin-left:75%}.devui-col__lg--pull-18{right:75%}.devui-col__lg--push-18{left:75%}.devui-col__lg--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__lg--offset-19{margin-left:79.1666666667%}.devui-col__lg--pull-19{right:79.1666666667%}.devui-col__lg--push-19{left:79.1666666667%}.devui-col__lg--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__lg--offset-20{margin-left:83.3333333333%}.devui-col__lg--pull-20{right:83.3333333333%}.devui-col__lg--push-20{left:83.3333333333%}.devui-col__lg--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__lg--offset-21{margin-left:87.5%}.devui-col__lg--pull-21{right:87.5%}.devui-col__lg--push-21{left:87.5%}.devui-col__lg--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__lg--offset-22{margin-left:91.6666666667%}.devui-col__lg--pull-22{right:91.6666666667%}.devui-col__lg--push-22{left:91.6666666667%}.devui-col__lg--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__lg--offset-23{margin-left:95.8333333333%}.devui-col__lg--pull-23{right:95.8333333333%}.devui-col__lg--push-23{left:95.8333333333%}.devui-col__lg--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__lg--offset-24{margin-left:100%}.devui-col__lg--pull-24{right:100%}.devui-col__lg--push-24{left:100%}.devui-col__lg--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col__xl--span-0{display:none}.devui-col__xl--offset-1{margin-left:4.1666666667%}.devui-col__xl--pull-1{right:4.1666666667%}.devui-col__xl--push-1{left:4.1666666667%}.devui-col__xl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xl--offset-2{margin-left:8.3333333333%}.devui-col__xl--pull-2{right:8.3333333333%}.devui-col__xl--push-2{left:8.3333333333%}.devui-col__xl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xl--offset-3{margin-left:12.5%}.devui-col__xl--pull-3{right:12.5%}.devui-col__xl--push-3{left:12.5%}.devui-col__xl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xl--offset-4{margin-left:16.6666666667%}.devui-col__xl--pull-4{right:16.6666666667%}.devui-col__xl--push-4{left:16.6666666667%}.devui-col__xl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xl--offset-5{margin-left:20.8333333333%}.devui-col__xl--pull-5{right:20.8333333333%}.devui-col__xl--push-5{left:20.8333333333%}.devui-col__xl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xl--offset-6{margin-left:25%}.devui-col__xl--pull-6{right:25%}.devui-col__xl--push-6{left:25%}.devui-col__xl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xl--offset-7{margin-left:29.1666666667%}.devui-col__xl--pull-7{right:29.1666666667%}.devui-col__xl--push-7{left:29.1666666667%}.devui-col__xl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xl--offset-8{margin-left:33.3333333333%}.devui-col__xl--pull-8{right:33.3333333333%}.devui-col__xl--push-8{left:33.3333333333%}.devui-col__xl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xl--offset-9{margin-left:37.5%}.devui-col__xl--pull-9{right:37.5%}.devui-col__xl--push-9{left:37.5%}.devui-col__xl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xl--offset-10{margin-left:41.6666666667%}.devui-col__xl--pull-10{right:41.6666666667%}.devui-col__xl--push-10{left:41.6666666667%}.devui-col__xl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xl--offset-11{margin-left:45.8333333333%}.devui-col__xl--pull-11{right:45.8333333333%}.devui-col__xl--push-11{left:45.8333333333%}.devui-col__xl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xl--offset-12{margin-left:50%}.devui-col__xl--pull-12{right:50%}.devui-col__xl--push-12{left:50%}.devui-col__xl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xl--offset-13{margin-left:54.1666666667%}.devui-col__xl--pull-13{right:54.1666666667%}.devui-col__xl--push-13{left:54.1666666667%}.devui-col__xl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xl--offset-14{margin-left:58.3333333333%}.devui-col__xl--pull-14{right:58.3333333333%}.devui-col__xl--push-14{left:58.3333333333%}.devui-col__xl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xl--offset-15{margin-left:62.5%}.devui-col__xl--pull-15{right:62.5%}.devui-col__xl--push-15{left:62.5%}.devui-col__xl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xl--offset-16{margin-left:66.6666666667%}.devui-col__xl--pull-16{right:66.6666666667%}.devui-col__xl--push-16{left:66.6666666667%}.devui-col__xl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xl--offset-17{margin-left:70.8333333333%}.devui-col__xl--pull-17{right:70.8333333333%}.devui-col__xl--push-17{left:70.8333333333%}.devui-col__xl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xl--offset-18{margin-left:75%}.devui-col__xl--pull-18{right:75%}.devui-col__xl--push-18{left:75%}.devui-col__xl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xl--offset-19{margin-left:79.1666666667%}.devui-col__xl--pull-19{right:79.1666666667%}.devui-col__xl--push-19{left:79.1666666667%}.devui-col__xl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xl--offset-20{margin-left:83.3333333333%}.devui-col__xl--pull-20{right:83.3333333333%}.devui-col__xl--push-20{left:83.3333333333%}.devui-col__xl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xl--offset-21{margin-left:87.5%}.devui-col__xl--pull-21{right:87.5%}.devui-col__xl--push-21{left:87.5%}.devui-col__xl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xl--offset-22{margin-left:91.6666666667%}.devui-col__xl--pull-22{right:91.6666666667%}.devui-col__xl--push-22{left:91.6666666667%}.devui-col__xl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xl--offset-23{margin-left:95.8333333333%}.devui-col__xl--pull-23{right:95.8333333333%}.devui-col__xl--push-23{left:95.8333333333%}.devui-col__xl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xl--offset-24{margin-left:100%}.devui-col__xl--pull-24{right:100%}.devui-col__xl--push-24{left:100%}.devui-col__xl--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col__xxl--span-0{display:none}.devui-col__xxl--offset-1{margin-left:4.1666666667%}.devui-col__xxl--pull-1{right:4.1666666667%}.devui-col__xxl--push-1{left:4.1666666667%}.devui-col__xxl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xxl--offset-2{margin-left:8.3333333333%}.devui-col__xxl--pull-2{right:8.3333333333%}.devui-col__xxl--push-2{left:8.3333333333%}.devui-col__xxl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xxl--offset-3{margin-left:12.5%}.devui-col__xxl--pull-3{right:12.5%}.devui-col__xxl--push-3{left:12.5%}.devui-col__xxl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xxl--offset-4{margin-left:16.6666666667%}.devui-col__xxl--pull-4{right:16.6666666667%}.devui-col__xxl--push-4{left:16.6666666667%}.devui-col__xxl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xxl--offset-5{margin-left:20.8333333333%}.devui-col__xxl--pull-5{right:20.8333333333%}.devui-col__xxl--push-5{left:20.8333333333%}.devui-col__xxl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xxl--offset-6{margin-left:25%}.devui-col__xxl--pull-6{right:25%}.devui-col__xxl--push-6{left:25%}.devui-col__xxl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xxl--offset-7{margin-left:29.1666666667%}.devui-col__xxl--pull-7{right:29.1666666667%}.devui-col__xxl--push-7{left:29.1666666667%}.devui-col__xxl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xxl--offset-8{margin-left:33.3333333333%}.devui-col__xxl--pull-8{right:33.3333333333%}.devui-col__xxl--push-8{left:33.3333333333%}.devui-col__xxl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xxl--offset-9{margin-left:37.5%}.devui-col__xxl--pull-9{right:37.5%}.devui-col__xxl--push-9{left:37.5%}.devui-col__xxl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xxl--offset-10{margin-left:41.6666666667%}.devui-col__xxl--pull-10{right:41.6666666667%}.devui-col__xxl--push-10{left:41.6666666667%}.devui-col__xxl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xxl--offset-11{margin-left:45.8333333333%}.devui-col__xxl--pull-11{right:45.8333333333%}.devui-col__xxl--push-11{left:45.8333333333%}.devui-col__xxl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xxl--offset-12{margin-left:50%}.devui-col__xxl--pull-12{right:50%}.devui-col__xxl--push-12{left:50%}.devui-col__xxl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xxl--offset-13{margin-left:54.1666666667%}.devui-col__xxl--pull-13{right:54.1666666667%}.devui-col__xxl--push-13{left:54.1666666667%}.devui-col__xxl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xxl--offset-14{margin-left:58.3333333333%}.devui-col__xxl--pull-14{right:58.3333333333%}.devui-col__xxl--push-14{left:58.3333333333%}.devui-col__xxl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xxl--offset-15{margin-left:62.5%}.devui-col__xxl--pull-15{right:62.5%}.devui-col__xxl--push-15{left:62.5%}.devui-col__xxl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xxl--offset-16{margin-left:66.6666666667%}.devui-col__xxl--pull-16{right:66.6666666667%}.devui-col__xxl--push-16{left:66.6666666667%}.devui-col__xxl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xxl--offset-17{margin-left:70.8333333333%}.devui-col__xxl--pull-17{right:70.8333333333%}.devui-col__xxl--push-17{left:70.8333333333%}.devui-col__xxl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xxl--offset-18{margin-left:75%}.devui-col__xxl--pull-18{right:75%}.devui-col__xxl--push-18{left:75%}.devui-col__xxl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xxl--offset-19{margin-left:79.1666666667%}.devui-col__xxl--pull-19{right:79.1666666667%}.devui-col__xxl--push-19{left:79.1666666667%}.devui-col__xxl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xxl--offset-20{margin-left:83.3333333333%}.devui-col__xxl--pull-20{right:83.3333333333%}.devui-col__xxl--push-20{left:83.3333333333%}.devui-col__xxl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xxl--offset-21{margin-left:87.5%}.devui-col__xxl--pull-21{right:87.5%}.devui-col__xxl--push-21{left:87.5%}.devui-col__xxl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xxl--offset-22{margin-left:91.6666666667%}.devui-col__xxl--pull-22{right:91.6666666667%}.devui-col__xxl--push-22{left:91.6666666667%}.devui-col__xxl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xxl--offset-23{margin-left:95.8333333333%}.devui-col__xxl--pull-23{right:95.8333333333%}.devui-col__xxl--push-23{left:95.8333333333%}.devui-col__xxl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xxl--offset-24{margin-left:100%}.devui-col__xxl--pull-24{right:100%}.devui-col__xxl--push-24{left:100%}.devui-col__xxl--span-24{display:block;flex:0 0 100%;width:100%}}

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

@@ -1 +1,218 @@
-var e=Object.defineProperty,r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(r,t,n)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[t]=n;"undefined"!=typeof require&&require;import{defineComponent as i,createVNode as a}from"vue";var l=i({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup:e=>((e,i)=>{for(var a in i||(i={}))t.call(i,a)&&o(e,a,i[a]);if(r)for(var a of r(i))n.call(i,a)&&o(e,a,i[a]);return e})({},e),render(){const{name:e,size:r,color:t,classPrefix:n}=this;return a("i",{class:`${n} ${n}-${e}`,style:{fontSize:r,color:t}},null)}});l.install=function(e){e.component(l.name,l)};var c={title:"Icon 图标",category:"通用",install(e){e.use(l)}};export{l as Icon,c as default};
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps } from "vue";
+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"
+  }
+};
+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 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 = "";
+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 index = {
+  title: "Icon \u56FE\u6807",
+  category: "\u901A\u7528",
+  status: "100%",
+  install(app) {
+    app.component(Icon.name, Icon);
+    app.component(IconGroup.name, IconGroup);
+  }
+};
+export { Icon, IconGroup, index as default, iconProps, svgIconProps };

package/icon/index.umd.js

@@ -1 +1 @@
-var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,r,o)=>r in e?__defProp(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,__spreadValues=(e,r)=>{for(var o in r||(r={}))__hasOwnProp.call(r,o)&&__defNormalProp(e,o,r[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(r))__propIsEnum.call(r,o)&&__defNormalProp(e,o,r[o]);return e},__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')};!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,r){"use strict";var o=r.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup:e=>__spreadValues({},e),render(){const{name:e,size:o,color:t,classPrefix:n}=this;return r.createVNode("i",{class:`${n} ${n}-${e}`,style:{fontSize:o,color:t}},null)}});o.install=function(e){e.component(o.name,o)};var t={title:"Icon 图标",category:"通用",install(e){e.use(o)}};e.Icon=o,e.default=t,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+(function(i,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(i=typeof globalThis!="undefined"?globalThis:i||self,n(i.index={},i.Vue))})(this,function(i,n){"use strict";const I={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]}},b={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function m(s,l,o){let t=s;return l&&(t+=`__${l}`),o&&(t+=`--${o}`),t}function d(s,l=!1){const o=l?`.devui-${s}`:`devui-${s}`;return{b:()=>m(o),e:e=>e?m(o,e):"",m:e=>e?m(o,"",e):"",em:(e,a)=>e&&a?m(o,e,a):""}}var V="",h=n.defineComponent({name:"DSvgIcon",props:b,setup(s){const{name:l,color:o,size:t}=n.toRefs(s),c=d("svg-icon"),r=n.computed(()=>`#icon-${l.value}`),u=n.computed(()=>typeof t.value=="number"?`${t.value}px`:t.value),e={width:u.value,height:u.value};return()=>n.createVNode("svg",{class:c.b(),style:e},[n.createVNode("use",{"xlink:href":r.value,fill:o.value},null)])}});function D(s){return/^((http|https):)?\/\//.test(s)}function S(s,l){const{component:o,name:t,size:c,color:r,classPrefix:u,rotate:e}=n.toRefs(s),a=d("icon"),p=n.computed(()=>typeof c.value=="number"?`${c.value}px`:c.value),f=o.value?n.resolveDynamicComponent(o.value):n.resolveDynamicComponent(h),v=()=>n.createVNode("img",n.mergeProps({src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],class:[(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{width:p.value||"",transform:`rotate(${e==null?void 0:e.value}deg)`,verticalAlign:"middle"}},l.attrs),null),P=()=>n.createVNode(f,n.mergeProps({name:t.value,color:r.value,size:p.value,class:[(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{transform:`rotate(${e==null?void 0:e.value}deg)`}},l.attrs),null),$=()=>{const C=/^icon-/.test(t.value)?t.value:`${u.value}-${t.value}`;return n.createVNode("i",n.mergeProps({class:[u.value,C,(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{fontSize:p.value,color:r.value,transform:`rotate(${e==null?void 0:e.value}deg)`}},l.attrs),null)};return{iconDom:()=>o.value?P():D(t.value)?v():$()}}var g=n.defineComponent({name:"DIcon",props:I,emits:["click"],setup(s,l){const{disabled:o,operable:t}=n.toRefs(s),{iconDom:c}=S(s,l),r=d("icon"),u=n.computed(()=>({[r.e("container")]:!0,[r.m("disabled")]:o.value,[r.m("operable")]:t.value})),e=a=>{o.value||l.emit("click",a)};return()=>{var a,p,f,v;return n.createVNode("div",{class:u.value,onClick:e},[(p=(a=l.slots).prefix)==null?void 0:p.call(a),c(),(v=(f=l.slots).suffix)==null?void 0:v.call(f)])}}}),_="",y=n.defineComponent({name:"DIconGroup",setup(s,l){const o=d("icon-group");return()=>{var t,c;return n.createVNode("div",{class:o.b()},[(c=(t=l.slots).default)==null?void 0:c.call(t)])}}}),N={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"100%",install(s){s.component(g.name,g),s.component(y.name,y)}};i.Icon=g,i.IconGroup=y,i.default=N,i.iconProps=I,i.svgIconProps=b,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/icon/style.css

@@ -0,0 +1 @@
+.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}

package/image-preview/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;