@qxs-bns/components 0.0.1

package/src/photo-crop-tool/src/photo-crop-tool.vue.cjs

@@ -0,0 +1 @@
+"use strict";var P=(M,S,a)=>new Promise((T,E)=>{var f=v=>{try{h(a.next(v))}catch(u){E(u)}},x=v=>{try{h(a.throw(v))}catch(u){E(u)}},h=v=>v.done?T(v.value):Promise.resolve(v.value).then(f,x);h((a=a.apply(M,S)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),J=require("../../../packages/hooks/src/use-namespace/index.cjs"),$=require("../../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.6.3_/node_modules/@vueuse/core/index.cjs"),K=require("./composables.cjs"),Z=["src"],ee=e.defineComponent({name:"QxsPhotoCropTool",__name:"photo-crop-tool",props:{imgFile:{type:Object,default:()=>null},aspectRatio:{type:String,default:()=>"16 / 9"},defaultWidth:{type:Number,default:()=>320},defaultHeight:{type:Number,default:()=>180},zoomType:{type:String,default:()=>"fixed"}},setup(M,{expose:S}){const a=M;let T=0,E=0,f=0,x=0;const h=J.useNamespace("photo-crop-tool"),v=e.ref(null),u=e.ref(null),B=e.ref(null),F=e.ref(""),c=e.ref(""),L=e.ref({x:0,y:0}),t=e.ref({width:a.defaultWidth,height:a.defaultHeight,x:0,y:0}),{width:k,height:N}=$.useElementSize(v),{width:X}=$.useElementSize(B),{x:m,y:g,style:Y}=$.useDraggable(v,{containerElement:u,draggingElement:v,disabled:e.computed(()=>!!c.value),exact:!0,initialValue:L}),V=e.computed(()=>a.imgFile?URL.createObjectURL(a.imgFile):"");e.watch(()=>a.imgFile,l=>{l&&!l.type.startsWith("image/")?F.value="文件类型错误":F.value=""});const D=e.computed(()=>{var l;return(((l=B.value)==null?void 0:l.naturalWidth)||0)/X.value}),p=e.computed(()=>{const l={left:0,top:0};return c.value==="bottom-right"?(l.left=t.value.x,l.top=t.value.y):c.value==="top-left"?(l.left=t.value.x-k.value,l.top=t.value.y-N.value):c.value==="top-right"?(l.top=t.value.y-N.value,l.left=t.value.x):c.value==="bottom-left"&&(l.left=t.value.x-k.value,l.top=t.value.y),l}),Q=e.computed(()=>{const{aspectRatio:l}=a,i={width:`${t.value.width||a.defaultWidth}`,height:`${t.value.height||a.defaultHeight}`,"aspect-ratio":l,top:`${p.value.top}px`,left:`${p.value.left}px`};return a.zoomType==="free"?delete i["aspect-ratio"]:a.zoomType==="fixed"&&delete i.height,h.cssVarBlock(i)});function y(l){return l*D.value}function A(){return P(this,arguments,function*(l=B.value){var W,C;let i="transparent";u.value&&(i=window.getComputedStyle(u.value).backgroundColor);const n=document.createElement("canvas");n.width=y(((W=u.value)==null?void 0:W.clientWidth)||0),n.height=y(((C=u.value)==null?void 0:C.clientHeight)||0);const{drawImage:H,cropCanvas:b,drawColor:z}=K.useCanvas(n);return z(0,0,n.width,n.height,i),H(l,y(l.offsetLeft),y(l.offsetTop),l.naturalWidth,l.naturalHeight),yield b(y(m.value),y(g.value),y(k.value),y(N.value))})}function w(l,i){var b,z;const n=((b=u.value)==null?void 0:b.clientWidth)||1/0,H=((z=u.value)==null?void 0:z.clientHeight)||1/0;return{width:Math.min(Math.max(l,0),n),height:Math.min(Math.max(i,0),H)}}function U(l){var H,b,z,W,C,j,q,O;const i=l.clientX-T,n=l.clientY-E;if(c.value==="bottom-right"){if(a.zoomType==="free"){const{width:s,height:o}=w(f+i,x+n);t.value.width=s,t.value.height=o}else if(a.zoomType==="fixed"){const s=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f+i,r=o/s;const{width:R,height:d}=w(o,r);d>(((H=u.value)==null?void 0:H.clientHeight)||1/0)&&(r=((b=u.value)==null?void 0:b.clientHeight)||1/0,o=r*s),t.value.width=R,t.value.height=d}}else if(c.value==="top-left"){if(a.zoomType==="free"){const{width:s,height:o}=w(f-i,x-n);t.value.width=s,t.value.height=o}else if(a.zoomType==="fixed"){const s=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f-i,r=o/s;const{width:R,height:d}=w(o,r);d>(((z=u.value)==null?void 0:z.clientHeight)||1/0)&&(r=((W=u.value)==null?void 0:W.clientHeight)||1/0,o=r*s),t.value.width=R,t.value.height=d}m.value=p.value.left,g.value=p.value.top}else if(c.value==="top-right"){if(a.zoomType==="free"){const{width:s,height:o}=w(f+i,x-n);t.value.width=s,t.value.height=o}else if(a.zoomType==="fixed"){const s=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f+i,r=o/s;const{width:R,height:d}=w(o,r);d>(((C=u.value)==null?void 0:C.clientHeight)||1/0)&&(r=((j=u.value)==null?void 0:j.clientHeight)||1/0,o=r*s),t.value.width=R,t.value.height=d}m.value=p.value.left,g.value=p.value.top}else if(c.value==="bottom-left"){if(a.zoomType==="free"){const{width:s,height:o}=w(f-i,x+n);t.value.width=s,t.value.height=o}else if(a.zoomType==="fixed"){const s=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f-i,r=o/s;const{width:R,height:d}=w(o,r);d>(((q=u.value)==null?void 0:q.clientHeight)||1/0)&&(r=((O=u.value)==null?void 0:O.clientHeight)||1/0,o=r*s),t.value.width=R,t.value.height=d}m.value=p.value.left,g.value=p.value.top}l.preventDefault(),l.stopPropagation()}function I(l,i){c.value=i,T=l.clientX,E=l.clientY,f=t.value.width,x=t.value.height,i==="bottom-right"?(t.value.x=m.value,t.value.y=g.value):i==="top-left"?(t.value.x=m.value+k.value,t.value.y=g.value+N.value):i==="top-right"?(t.value.x=m.value,t.value.y=g.value+N.value):i==="bottom-left"&&(t.value.x=m.value+k.value,t.value.y=g.value)}function _(){c.value=""}function G(){t.value.width=a.defaultWidth,t.value.height=a.defaultHeight,m.value=0,g.value=0}return document.addEventListener("mouseup",_),document.addEventListener("mousemove",U),e.onMounted(()=>{e.nextTick(()=>{var l,i;L.value.x=(((l=u.value)==null?void 0:l.offsetWidth)||0)/2-t.value.width/2,L.value.y=(((i=u.value)==null?void 0:i.offsetHeight)||0)/2-t.value.height/2})}),e.onUnmounted(()=>{V.value&&URL.revokeObjectURL(V.value),document.removeEventListener("mouseup",_),document.removeEventListener("mousemove",U)}),S({crop:A,resize:G}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:u,class:e.normalizeClass([e.unref(h).e("img-box")])},[F.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(h).e("error-message")])},e.toDisplayString(F.value),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:B,class:e.normalizeClass([e.unref(h).e("image")]),src:V.value},null,10,Z),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:v,class:e.normalizeClass([e.unref(h).e("crop-tool-box")]),style:e.normalizeStyle([Q.value,c.value?`left: ${p.value.left}px;top: ${p.value.top}px`:e.unref(Y)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(h).e("top-left")]),onMousedown:i[0]||(i[0]=n=>I(n,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(h).e("top-right")]),onMousedown:i[1]||(i[1]=n=>I(n,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(h).e("bottom-right")]),onMousedown:i[2]||(i[2]=n=>I(n,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(h).e("bottom-left")]),onMousedown:i[3]||(i[3]=n=>I(n,"bottom-left"))},null,34)],6)],64))],2))}});exports.default=ee;

package/src/photo-crop-tool/src/photo-crop-tool.vue.js

@@ -0,0 +1,224 @@
+var A = ($, X, i) => new Promise((L, F) => {
+  var f = (v) => {
+    try {
+      h(i.next(v));
+    } catch (o) {
+      F(o);
+    }
+  }, b = (v) => {
+    try {
+      h(i.throw(v));
+    } catch (o) {
+      F(o);
+    }
+  }, h = (v) => v.done ? L(v.value) : Promise.resolve(v.value).then(f, b);
+  h((i = i.apply($, X)).next());
+});
+import { defineComponent as ie, ref as W, computed as C, watch as ae, onMounted as oe, nextTick as ue, onUnmounted as ne, openBlock as D, createElementBlock as O, normalizeClass as x, unref as m, toDisplayString as se, Fragment as he, createElementVNode as k, normalizeStyle as ve } from "vue";
+import { useNamespace as re } from "../../../packages/hooks/src/use-namespace/index.js";
+import { useElementSize as G, useDraggable as fe } from "../../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.6.3_/node_modules/@vueuse/core/index.js";
+import { useCanvas as ce } from "./composables.js";
+const de = ["src"], xe = /* @__PURE__ */ ie({
+  name: "QxsPhotoCropTool",
+  __name: "photo-crop-tool",
+  props: {
+    imgFile: {
+      type: Object,
+      default: () => null
+    },
+    aspectRatio: {
+      type: String,
+      default: () => "16 / 9"
+    },
+    defaultWidth: {
+      type: Number,
+      default: () => 320
+    },
+    defaultHeight: {
+      type: Number,
+      default: () => 180
+    },
+    /**
+     * free 自由缩放
+     * fixed 固定比例缩放
+     */
+    zoomType: {
+      type: String,
+      default: () => "fixed"
+    }
+  },
+  setup($, { expose: X }) {
+    const i = $;
+    let L = 0, F = 0, f = 0, b = 0;
+    const h = re("photo-crop-tool"), v = W(null), o = W(null), B = W(null), S = W(""), r = W(""), Y = W({
+      x: 0,
+      y: 0
+    }), e = W({
+      width: i.defaultWidth,
+      height: i.defaultHeight,
+      x: 0,
+      y: 0
+    }), { width: I, height: N } = G(v), { width: J } = G(B), { x: p, y: g, style: K } = fe(v, {
+      containerElement: o,
+      draggingElement: v,
+      disabled: C(() => !!r.value),
+      exact: !0,
+      initialValue: Y
+    }), j = C(() => i.imgFile ? URL.createObjectURL(i.imgFile) : "");
+    ae(() => i.imgFile, (t) => {
+      t && !t.type.startsWith("image/") ? S.value = "文件类型错误" : S.value = "";
+    });
+    const Z = C(() => {
+      var t;
+      return (((t = B.value) == null ? void 0 : t.naturalWidth) || 0) / J.value;
+    }), d = C(() => {
+      const t = {
+        left: 0,
+        top: 0
+      };
+      return r.value === "bottom-right" ? (t.left = e.value.x, t.top = e.value.y) : r.value === "top-left" ? (t.left = e.value.x - I.value, t.top = e.value.y - N.value) : r.value === "top-right" ? (t.top = e.value.y - N.value, t.left = e.value.x) : r.value === "bottom-left" && (t.left = e.value.x - I.value, t.top = e.value.y), t;
+    }), ee = C(() => {
+      const { aspectRatio: t } = i, l = {
+        width: `${e.value.width || i.defaultWidth}`,
+        height: `${e.value.height || i.defaultHeight}`,
+        "aspect-ratio": t,
+        top: `${d.value.top}px`,
+        left: `${d.value.left}px`
+      };
+      return i.zoomType === "free" ? delete l["aspect-ratio"] : i.zoomType === "fixed" && delete l.height, h.cssVarBlock(l);
+    });
+    function w(t) {
+      return t * Z.value;
+    }
+    function te() {
+      return A(this, arguments, function* (t = B.value) {
+        var E, M;
+        let l = "transparent";
+        o.value && (l = window.getComputedStyle(o.value).backgroundColor);
+        const u = document.createElement("canvas");
+        u.width = w(((E = o.value) == null ? void 0 : E.clientWidth) || 0), u.height = w(((M = o.value) == null ? void 0 : M.clientHeight) || 0);
+        const { drawImage: T, cropCanvas: R, drawColor: H } = ce(u);
+        return H(0, 0, u.width, u.height, l), T(t, w(t.offsetLeft), w(t.offsetTop), t.naturalWidth, t.naturalHeight), yield R(w(p.value), w(g.value), w(I.value), w(N.value));
+      });
+    }
+    function y(t, l) {
+      var R, H;
+      const u = ((R = o.value) == null ? void 0 : R.clientWidth) || 1 / 0, T = ((H = o.value) == null ? void 0 : H.clientHeight) || 1 / 0;
+      return {
+        width: Math.min(Math.max(t, 0), u),
+        height: Math.min(Math.max(l, 0), T)
+      };
+    }
+    function P(t) {
+      var T, R, H, E, M, _, Q, q;
+      const l = t.clientX - L, u = t.clientY - F;
+      if (r.value === "bottom-right") {
+        if (i.zoomType === "free") {
+          const { width: n, height: a } = y(f + l, b + u);
+          e.value.width = n, e.value.height = a;
+        } else if (i.zoomType === "fixed") {
+          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
+          let a = f + l, s = a / n;
+          const { width: z, height: c } = y(a, s);
+          c > (((T = o.value) == null ? void 0 : T.clientHeight) || 1 / 0) && (s = ((R = o.value) == null ? void 0 : R.clientHeight) || 1 / 0, a = s * n), e.value.width = z, e.value.height = c;
+        }
+      } else if (r.value === "top-left") {
+        if (i.zoomType === "free") {
+          const { width: n, height: a } = y(f - l, b - u);
+          e.value.width = n, e.value.height = a;
+        } else if (i.zoomType === "fixed") {
+          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
+          let a = f - l, s = a / n;
+          const { width: z, height: c } = y(a, s);
+          c > (((H = o.value) == null ? void 0 : H.clientHeight) || 1 / 0) && (s = ((E = o.value) == null ? void 0 : E.clientHeight) || 1 / 0, a = s * n), e.value.width = z, e.value.height = c;
+        }
+        p.value = d.value.left, g.value = d.value.top;
+      } else if (r.value === "top-right") {
+        if (i.zoomType === "free") {
+          const { width: n, height: a } = y(f + l, b - u);
+          e.value.width = n, e.value.height = a;
+        } else if (i.zoomType === "fixed") {
+          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
+          let a = f + l, s = a / n;
+          const { width: z, height: c } = y(a, s);
+          c > (((M = o.value) == null ? void 0 : M.clientHeight) || 1 / 0) && (s = ((_ = o.value) == null ? void 0 : _.clientHeight) || 1 / 0, a = s * n), e.value.width = z, e.value.height = c;
+        }
+        p.value = d.value.left, g.value = d.value.top;
+      } else if (r.value === "bottom-left") {
+        if (i.zoomType === "free") {
+          const { width: n, height: a } = y(f - l, b + u);
+          e.value.width = n, e.value.height = a;
+        } else if (i.zoomType === "fixed") {
+          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
+          let a = f - l, s = a / n;
+          const { width: z, height: c } = y(a, s);
+          c > (((Q = o.value) == null ? void 0 : Q.clientHeight) || 1 / 0) && (s = ((q = o.value) == null ? void 0 : q.clientHeight) || 1 / 0, a = s * n), e.value.width = z, e.value.height = c;
+        }
+        p.value = d.value.left, g.value = d.value.top;
+      }
+      t.preventDefault(), t.stopPropagation();
+    }
+    function U(t, l) {
+      r.value = l, L = t.clientX, F = t.clientY, f = e.value.width, b = e.value.height, l === "bottom-right" ? (e.value.x = p.value, e.value.y = g.value) : l === "top-left" ? (e.value.x = p.value + I.value, e.value.y = g.value + N.value) : l === "top-right" ? (e.value.x = p.value, e.value.y = g.value + N.value) : l === "bottom-left" && (e.value.x = p.value + I.value, e.value.y = g.value);
+    }
+    function V() {
+      r.value = "";
+    }
+    function le() {
+      e.value.width = i.defaultWidth, e.value.height = i.defaultHeight, p.value = 0, g.value = 0;
+    }
+    return document.addEventListener("mouseup", V), document.addEventListener("mousemove", P), oe(() => {
+      ue(() => {
+        var t, l;
+        Y.value.x = (((t = o.value) == null ? void 0 : t.offsetWidth) || 0) / 2 - e.value.width / 2, Y.value.y = (((l = o.value) == null ? void 0 : l.offsetHeight) || 0) / 2 - e.value.height / 2;
+      });
+    }), ne(() => {
+      j.value && URL.revokeObjectURL(j.value), document.removeEventListener("mouseup", V), document.removeEventListener("mousemove", P);
+    }), X({
+      crop: te,
+      resize: le
+    }), (t, l) => (D(), O("div", {
+      ref_key: "containerBoxRef",
+      ref: o,
+      class: x([m(h).e("img-box")])
+    }, [
+      S.value ? (D(), O("div", {
+        key: 0,
+        class: x([m(h).e("error-message")])
+      }, se(S.value), 3)) : (D(), O(he, { key: 1 }, [
+        k("img", {
+          ref_key: "imgRef",
+          ref: B,
+          class: x([m(h).e("image")]),
+          src: j.value
+        }, null, 10, de),
+        k("div", {
+          ref_key: "cropBoxRef",
+          ref: v,
+          class: x([m(h).e("crop-tool-box")]),
+          style: ve([ee.value, r.value ? `left: ${d.value.left}px;top: ${d.value.top}px` : m(K)])
+        }, [
+          k("div", {
+            class: x([m(h).e("top-left")]),
+            onMousedown: l[0] || (l[0] = (u) => U(u, "top-left"))
+          }, null, 34),
+          k("div", {
+            class: x([m(h).e("top-right")]),
+            onMousedown: l[1] || (l[1] = (u) => U(u, "top-right"))
+          }, null, 34),
+          k("div", {
+            class: x([m(h).e("bottom-right")]),
+            onMousedown: l[2] || (l[2] = (u) => U(u, "bottom-right"))
+          }, null, 34),
+          k("div", {
+            class: x([m(h).e("bottom-left")]),
+            onMousedown: l[3] || (l[3] = (u) => U(u, "bottom-left"))
+          }, null, 34)
+        ], 6)
+      ], 64))
+    ], 2));
+  }
+});
+export {
+  xe as default
+};

package/src/photo-crop-tool/src/photo-crop-tool.vue2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./photo-crop-tool.vue.cjs");exports.default=e.default;

package/src/photo-crop-tool/src/photo-crop-tool.vue2.js

@@ -0,0 +1,4 @@
+import f from "./photo-crop-tool.vue.js";
+export {
+  f as default
+};

package/src/withInstall.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function l(t,n){return t.install=o=>{for(const e of[t,...Object.values({})])o.component(e.name,e)},t}exports.withInstall=l;

package/src/withInstall.js

@@ -0,0 +1,9 @@
+function c(t, n) {
+  return t.install = (e) => {
+    for (const o of [t, ...Object.values({})])
+      e.component(o.name, o);
+  }, t;
+}
+export {
+  c as withInstall
+};

package/theme-chalk/base.css

@@ -0,0 +1,256 @@
+@charset "UTF-8";
+/* Element Chalk Variables */
+/* stylelint-disable no-duplicate-selectors */
+:root {
+  --qxs-color-white: #fff;
+  --qxs-color-black: #000;
+  --qxs-color-primary-rgb: 255;
+  --qxs-color-success-rgb: 58;
+  --qxs-color-warning-rgb: 60;
+  --qxs-color-danger-rgb: 108;
+  --qxs-color-error-rgb: 108;
+  --qxs-color-info-rgb: 153;
+  --qxs-font-size-extra-large: 20px;
+  --qxs-font-size-large: 18px;
+  --qxs-font-size-medium: 16px;
+  --qxs-font-size-base: 14px;
+  --qxs-font-size-small: 13px;
+  --qxs-font-size-extra-small: 12px;
+  --qxs-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  --qxs-font-weight-primary: 500;
+  --qxs-font-line-height-primary: 24px;
+  --qxs-index-normal: 1;
+  --qxs-index-top: 1000;
+  --qxs-index-popper: 2000;
+  --qxs-border-radius-base: 4px;
+  --qxs-border-radius-small: 2px;
+  --qxs-border-radius-round: 20px;
+  --qxs-border-radius-circle: 100%;
+  --qxs-transition-duration: 0.3s;
+  --qxs-transition-duration-fast: 0.2s;
+  --qxs-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --qxs-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+  --qxs-transition-all: all var(--qxs-transition-duration) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-fade: opacity var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier);
+  --qxs-transition-md-fade: transform var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier), opacity var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier);
+  --qxs-transition-fade-linear: opacity var(--qxs-transition-duration-fast) linear;
+  --qxs-transition-border: border-color var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-box-shadow: box-shadow var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-color: color var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-component-size-large: 40px;
+  --qxs-component-size: 32px;
+  --qxs-component-size-small: 24px;
+}
+
+:root {
+  color-scheme: light;
+  --qxs-color-primary: #409eff;
+  --qxs-color-primary-light-3: rgb(121.3, 187.1, 255);
+  --qxs-color-primary-light-5: rgb(159.5, 206.5, 255);
+  --qxs-color-primary-light-7: rgb(197.7, 225.9, 255);
+  --qxs-color-primary-light-8: rgb(216.8, 235.6, 255);
+  --qxs-color-primary-light-9: rgb(235.9, 245.3, 255);
+  --qxs-color-primary-dark-2: rgb(51.2, 126.4, 204);
+  --qxs-color-success: #67c23a;
+  --qxs-color-success-light-3: rgb(148.6, 212.3, 117.1);
+  --qxs-color-success-light-5: rgb(179, 224.5, 156.5);
+  --qxs-color-success-light-7: rgb(209.4, 236.7, 195.9);
+  --qxs-color-success-light-8: rgb(224.6, 242.8, 215.6);
+  --qxs-color-success-light-9: rgb(239.8, 248.9, 235.3);
+  --qxs-color-success-dark-2: rgb(82.4, 155.2, 46.4);
+  --qxs-color-warning: #e6a23c;
+  --qxs-color-warning-light-3: rgb(237.5, 189.9, 118.5);
+  --qxs-color-warning-light-5: rgb(242.5, 208.5, 157.5);
+  --qxs-color-warning-light-7: rgb(247.5, 227.1, 196.5);
+  --qxs-color-warning-light-8: rgb(250, 236.4, 216);
+  --qxs-color-warning-light-9: rgb(252.5, 245.7, 235.5);
+  --qxs-color-warning-dark-2: rgb(184, 129.6, 48);
+  --qxs-color-danger: #f56c6c;
+  --qxs-color-danger-light-3: rgb(248, 152.1, 152.1);
+  --qxs-color-danger-light-5: rgb(250, 181.5, 181.5);
+  --qxs-color-danger-light-7: rgb(252, 210.9, 210.9);
+  --qxs-color-danger-light-8: rgb(253, 225.6, 225.6);
+  --qxs-color-danger-light-9: rgb(254, 240.3, 240.3);
+  --qxs-color-danger-dark-2: rgb(196, 86.4, 86.4);
+  --qxs-color-error: #f56c6c;
+  --qxs-color-error-light-3: rgb(248, 152.1, 152.1);
+  --qxs-color-error-light-5: rgb(250, 181.5, 181.5);
+  --qxs-color-error-light-7: rgb(252, 210.9, 210.9);
+  --qxs-color-error-light-8: rgb(253, 225.6, 225.6);
+  --qxs-color-error-light-9: rgb(254, 240.3, 240.3);
+  --qxs-color-error-dark-2: rgb(196, 86.4, 86.4);
+  --qxs-color-info: #909399;
+  --qxs-color-info-light-3: rgb(177.3, 179.4, 183.6);
+  --qxs-color-info-light-5: rgb(199.5, 201, 204);
+  --qxs-color-info-light-7: rgb(221.7, 222.6, 224.4);
+  --qxs-color-info-light-8: rgb(232.8, 233.4, 234.6);
+  --qxs-color-info-light-9: rgb(243.9, 244.2, 244.8);
+  --qxs-color-info-dark-2: rgb(115.2, 117.6, 122.4);
+  --qxs-bg-color: #fff;
+  --qxs-bg-color-page: #f2f3f5;
+  --qxs-bg-color-overlay: #fff;
+  --qxs-text-color-primary: #303133;
+  --qxs-text-color-regular: #606266;
+  --qxs-text-color-secondary: #909399;
+  --qxs-text-color-placeholder: #a8abb2;
+  --qxs-text-color-disabled: #c0c4cc;
+  --qxs-border-color: #dcdfe6;
+  --qxs-border-color-light: #e4e7ed;
+  --qxs-border-color-lighter: #ebeef5;
+  --qxs-border-color-extra-light: #f2f6fc;
+  --qxs-border-color-dark: #d4d7de;
+  --qxs-border-color-darker: #cdd0d6;
+  --qxs-fill-color: #f0f2f5;
+  --qxs-fill-color-light: #f5f7fa;
+  --qxs-fill-color-lighter: #fafafa;
+  --qxs-fill-color-extra-light: #fafcff;
+  --qxs-fill-color-dark: #ebedf0;
+  --qxs-fill-color-darker: #e6e8eb;
+  --qxs-fill-color-blank: #fff;
+  --qxs-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
+  --qxs-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.12);
+  --qxs-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.12);
+  --qxs-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.16);
+  --qxs-disabled-bg-color: var(--qxs-fill-color-light);
+  --qxs-disabled-text-color: var(--qxs-text-color-placeholder);
+  --qxs-disabled-border-color: var(--qxs-border-color-light);
+  --qxs-overlay-color: rgba(0, 0, 0, 0.8);
+  --qxs-overlay-color-light: rgba(0, 0, 0, 0.7);
+  --qxs-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+  --qxs-mask-color: rgba(255, 255, 255, 0.9);
+  --qxs-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+  --qxs-border-width: 1px;
+  --qxs-border-style: solid;
+  --qxs-border-color-hover: var(--qxs-text-color-disabled);
+  --qxs-border: var(--qxs-border-width) var(--qxs-border-style) var(--qxs-border-color);
+  --qxs-svg-monochrome-grey: var(--qxs-border-color);
+}
+
+/* stylelint-enable no-duplicate-selectors */
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: var(--qxs-transition-fade-linear);
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.qxs-fade-in-linear-enter-active,
+.qxs-fade-in-linear-leave-active {
+  transition: var(--qxs-transition-fade-linear);
+}
+
+.qxs-fade-in-linear-enter-from,
+.qxs-fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.qxs-fade-in-enter-active,
+.qxs-fade-in-leave-active {
+  transition: all var(--qxs-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.qxs-fade-in-enter-from,
+.qxs-fade-in-leave-active {
+  opacity: 0;
+}
+
+.qxs-zoom-in-center-enter-active,
+.qxs-zoom-in-center-leave-active {
+  transition: all var(--qxs-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.qxs-zoom-in-center-enter-from,
+.qxs-zoom-in-center-leave-active {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.qxs-zoom-in-top-enter-active,
+.qxs-zoom-in-top-leave-active {
+  opacity: 1;
+  transition: var(--qxs-transition-md-fade);
+  transform: scaleY(1);
+  transform-origin: center top;
+}
+.qxs-zoom-in-top-enter-active[data-popper-placement^=top],
+.qxs-zoom-in-top-leave-active[data-popper-placement^=top] {
+  transform-origin: center bottom;
+}
+
+.qxs-zoom-in-top-enter-from,
+.qxs-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.qxs-zoom-in-bottom-enter-active,
+.qxs-zoom-in-bottom-leave-active {
+  opacity: 1;
+  transition: var(--qxs-transition-md-fade);
+  transform: scaleY(1);
+  transform-origin: center bottom;
+}
+
+.qxs-zoom-in-bottom-enter-from,
+.qxs-zoom-in-bottom-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.qxs-zoom-in-left-enter-active,
+.qxs-zoom-in-left-leave-active {
+  opacity: 1;
+  transition: var(--qxs-transition-md-fade);
+  transform: scale(1, 1);
+  transform-origin: top left;
+}
+
+.qxs-zoom-in-left-enter-from,
+.qxs-zoom-in-left-leave-active {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+  transition: var(--qxs-transition-duration) height ease-in-out, var(--qxs-transition-duration) padding-top ease-in-out, var(--qxs-transition-duration) padding-bottom ease-in-out;
+}
+
+.qxs-collapse-transition-leave-active,
+.qxs-collapse-transition-enter-active {
+  transition: var(--qxs-transition-duration) max-height ease-in-out, var(--qxs-transition-duration) padding-top ease-in-out, var(--qxs-transition-duration) padding-bottom ease-in-out;
+}
+
+.horizontal-collapse-transition {
+  transition: var(--qxs-transition-duration) width ease-in-out, var(--qxs-transition-duration) padding-left ease-in-out, var(--qxs-transition-duration) padding-right ease-in-out;
+}
+
+.qxs-list-enter-active,
+.qxs-list-leave-active {
+  transition: all 1s;
+}
+
+.qxs-list-enter-from,
+.qxs-list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.qxs-list-leave-active {
+  position: absolute !important;
+}
+
+.qxs-opacity-transition {
+  transition: opacity var(--qxs-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+:root [data-fixed-calc-width] {
+  position: fixed;
+  right: 0;
+  left: 0%;
+}
+:root [data-mode=mobile] [data-fixed-calc-width] {
+  width: 100% !important;
+}

package/theme-chalk/file-upload.css

@@ -0,0 +1,23 @@
+/* Element Chalk Variables */
+.qxs-file-upload__control .el-upload.is-drag {
+  display: inline-block;
+}
+.qxs-file-upload__control .el-upload.is-drag .el-upload-dragger {
+  padding: 0;
+}
+.qxs-file-upload__control .el-upload.is-drag .el-upload-dragger .el-icon--upload {
+  margin-bottom: 0;
+  font-size: 40px;
+}
+.qxs-file-upload__control .el-upload.is-drag .el-upload-dragger .el-upload__text {
+  padding: 0 6px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.qxs-file-upload__control .el-upload.is-drag.is-dragover {
+  border-width: 1px;
+}
+.qxs-file-upload__control .el-upload.is-drag .slot {
+  width: 160px;
+  height: 90px;
+}

package/theme-chalk/fixed-action-bar.css

@@ -0,0 +1,13 @@
+/* Element Chalk Variables */
+.qxs-fixed-action-bar__actionbar {
+  bottom: 0;
+  z-index: 10;
+  padding: var(--qxs-fixed-action-bar-actionbar-padding);
+  text-align: center;
+  background-color: var(--qxs-bg-color, #fff);
+  box-shadow: 0 0 1px 0 var(--qxs-border-color, #f3f3f2);
+  transition: box-shadow 0.3s, var(--qxs-transition-box-shadow, #f3f3f2);
+}
+.qxs-fixed-action-bar__actionbar.is-shadow {
+  box-shadow: 0 -10px 10px -10px var(--qxs-border-color, #fff);
+}

package/theme-chalk/image-upload.css

@@ -0,0 +1,117 @@
+/* Element Chalk Variables */
+.qxs-image-upload__upload-container {
+  line-height: initial;
+}
+.qxs-image-upload__upload-container .el-upload__tip-text {
+  font-size: 14px;
+  line-height: 32px;
+  color: #c8c8c8;
+}
+.qxs-image-upload__upload-container .el-image {
+  display: block;
+}
+.qxs-image-upload__upload-container .image {
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+}
+.qxs-image-upload__upload-container .image .mask {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--el-overlay-color-lighter);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.qxs-image-upload__upload-container .image .mask .actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.qxs-image-upload__upload-container .image .mask .actions span {
+  width: 50%;
+  color: var(--el-color-white);
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.1s, transform 0.1s;
+}
+.qxs-image-upload__upload-container .image .mask .actions span:hover {
+  transform: scale(1.5);
+}
+.qxs-image-upload__upload-container .image .mask .actions span .el-icon {
+  font-size: 24px;
+}
+.qxs-image-upload__upload-container .image:hover .mask {
+  opacity: 1;
+}
+.qxs-image-upload__image-upload {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.qxs-image-upload__upload-container .el-upload {
+  font-size: 0;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger {
+  display: inline-block;
+  padding: 0;
+  font-size: 0;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger.is-dragover {
+  border-width: 1px;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  background-color: #f5f5f5;
+  transition: all 0.3s;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot:hover {
+  background-color: #eee;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot .el-icon {
+  font-size: 28px;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot p {
+  margin-top: 10px;
+  margin-bottom: 0;
+  line-height: 1em;
+  color: #5a5a5a;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress {
+  position: absolute;
+  top: 0;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--el-overlay-color-lighter);
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress .el-progress {
+  z-index: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress .el-progress .el-progress__text {
+  color: var(--el-text-color-placeholder);
+}