@qxs-bns/components 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +1 -1
- package/package.json +3 -3
- package/package.json.cjs +1 -1
- package/package.json.js +1 -1
- package/src/defaults.cjs +1 -1
- package/src/file-upload/index.cjs +1 -1
- package/src/file-upload/src/file-upload.vue.cjs +1 -1
- package/src/file-upload/src/file-upload.vue.js +32 -33
- package/src/file-upload/src/file-upload.vue2.cjs +1 -1
- package/src/fixed-action-bar/index.cjs +1 -1
- package/src/fixed-action-bar/src/fixed-action-bar.vue.cjs +1 -1
- package/src/fixed-action-bar/src/fixed-action-bar.vue.js +31 -41
- package/src/fixed-action-bar/src/fixed-action-bar.vue2.cjs +1 -1
- package/src/image-upload/index.cjs +1 -1
- package/src/image-upload/src/image-upload.vue.cjs +1 -1
- package/src/image-upload/src/image-upload.vue.js +55 -56
- package/src/image-upload/src/image-upload.vue2.cjs +1 -1
- package/src/photo-crop-tool/index.cjs +1 -1
- package/src/photo-crop-tool/src/photo-crop-tool.vue.cjs +1 -1
- package/src/photo-crop-tool/src/photo-crop-tool.vue.js +117 -135
- package/src/photo-crop-tool/src/photo-crop-tool.vue2.cjs +1 -1
- package/types/index.d.ts +6 -1
- package/types/src/base/style/css.d.ts +0 -0
- package/types/src/base/style/index.d.ts +1 -0
- package/types/src/components.d.ts +4 -0
- package/types/src/defaults.d.ts +5 -0
- package/types/src/file-upload/index.d.ts +36 -0
- package/types/src/file-upload/src/file-upload.vue.d.ts +158 -0
- package/types/src/file-upload/style/index.d.ts +1 -0
- package/types/src/fixed-action-bar/index.d.ts +40 -0
- package/types/src/fixed-action-bar/src/fixed-action-bar.vue.d.ts +23 -0
- package/types/src/fixed-action-bar/style/index.d.ts +1 -0
- package/types/src/image-upload/index.d.ts +46 -0
- package/types/src/image-upload/src/image-upload.vue.d.ts +47 -0
- package/types/src/image-upload/style/index.d.ts +1 -0
- package/types/src/make-installer.d.ts +9 -0
- package/types/src/photo-crop-tool/index.d.ts +54 -0
- package/types/src/photo-crop-tool/src/composables.d.ts +6 -0
- package/types/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts +65 -0
- package/types/src/photo-crop-tool/style/index.d.ts +1 -0
- package/types/src/rich-editor/index.d.ts +3 -0
- package/types/src/rich-editor/src/rich-editor.vue.d.ts +2 -0
- package/types/src/rich-editor/style/index.d.ts +1 -0
- package/types/src/withInstall.d.ts +4 -0
package/index.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./src/defaults.cjs"),o=require("./src/file-upload/index.cjs"),s=require("./src/fixed-action-bar/index.cjs"),
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./src/defaults.cjs"),o=require("./src/file-upload/index.cjs"),s=require("./src/fixed-action-bar/index.cjs"),i=require("./src/image-upload/index.cjs"),t=require("./src/photo-crop-tool/index.cjs"),r=e.install,l=e.version;exports.default=e;exports.QxsFileUpload=o.QxsFileUpload;exports.QxsFixedActionBar=s.QxsFixedActionBar;exports.QxsImageUpload=i.QxsImageUpload;exports.QxsPhotoCropTool=t.QxsPhotoCropTool;exports.install=r;exports.version=l;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@qxs-bns/components",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.2",
|
4
4
|
"description": "Vue 3 Component Library",
|
5
5
|
"main": "./index.cjs",
|
6
6
|
"module": "./index.js",
|
@@ -38,7 +38,7 @@
|
|
38
38
|
"@element-plus/icons-vue": "^2.0.0"
|
39
39
|
},
|
40
40
|
"dependencies": {
|
41
|
-
"@qxs-bns/hooks": "0.0.
|
42
|
-
"@qxs-bns/utils": "0.0.
|
41
|
+
"@qxs-bns/hooks": "0.0.2",
|
42
|
+
"@qxs-bns/utils": "0.0.2"
|
43
43
|
}
|
44
44
|
}
|
package/package.json.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.0.
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.0.2";exports.version=e;
|
package/package.json.js
CHANGED
package/src/defaults.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("./components.cjs"),s=require("./make-installer.cjs"),t=s.makeInstaller(e);module.exports=t;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../withInstall.cjs"),l=require("./src/file-upload.vue.cjs"),e=t.withInstall(l
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../withInstall.cjs"),l=require("./src/file-upload.vue.cjs"),e=t.withInstall(l);exports.QxsFileUpload=e;exports.default=e;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("vue"),N=require("@element-plus/icons-vue"),v=require("../../../packages/hooks/src/use-namespace/index.cjs"),c=require("element-plus"),h={class:"slot"},E={key:0,class:"el-upload__tip"},V={style:{display:"inline-block"}},C=e.defineComponent({name:"QxsFileUpload",__name:"file-upload",props:{action:{},headers:{},data:{},name:{default:"file"},size:{default:20},max:{default:3},accept:{default:"zip,rar"},files:{default:()=>[]},notip:{type:Boolean,default:!1},ext:{}},emits:["onSuccess"],setup(r,{emit:d}){const a=r,p=d,u=v.useNamespace("file-upload"),i=e.computed(()=>a.accept.split(",").map(t=>t.split("/").pop())),m=t=>{const s=t.name.split(".").at(-1)??"",l=i.value.includes(s),n=t.size/1024/1024<a.size;return l||c.ElMessage.error(`上传文件只支持 ${i.value.join(" / ")} 格式!`),n||c.ElMessage.error(`上传文件大小不能超过 ${a.size}MB!`),l&&n},f=()=>{c.ElMessage.warning("文件上传超过限制")},_=(t,o,s)=>{p("onSuccess",t,o,s)};return(t,o)=>{const s=e.resolveComponent("el-icon"),l=e.resolveComponent("el-alert"),n=e.resolveComponent("el-upload");return e.openBlock(),e.createBlock(n,{headers:t.headers,action:t.action,data:t.data,name:t.name,"before-upload":m,"on-exceed":f,"on-success":_,"file-list":t.files,limit:t.max,drag:"",class:e.normalizeClass(e.unref(u).e("control"))},{tip:e.withCtx(()=>[t.notip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",V,[e.createVNode(l,{title:`上传文件支持 ${i.value.join(" / ")} 格式,单个文件大小不超过 ${t.size}MB,且文件数量不超过 ${t.max} 个`,type:"info","show-icon":"",closable:!1},null,8,["title"])])]))]),default:e.withCtx(()=>[e.createElementVNode("div",h,[e.createVNode(s,{class:"el-icon--upload"},{default:e.withCtx(()=>[e.createVNode(e.unref(N.UploadFilled))]),_:1}),o[0]||(o[0]=e.createElementVNode("div",{class:"el-upload__text"},[e.createTextVNode(" 将文件拖到此处,或"),e.createElementVNode("em",null,"点击上传")],-1))])]),_:1},8,["headers","action","data","name","file-list","limit","class"])}}});module.exports=C;
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import { defineComponent as
|
2
|
-
import { UploadFilled as
|
3
|
-
import { useNamespace as
|
4
|
-
import { ElMessage as p } from "
|
5
|
-
const
|
1
|
+
import { defineComponent as y, computed as B, resolveComponent as c, openBlock as m, createBlock as x, normalizeClass as C, unref as u, withCtx as r, createElementBlock as E, createElementVNode as a, createVNode as d, createCommentVNode as $, createTextVNode as b } from "vue";
|
2
|
+
import { UploadFilled as S } from "@element-plus/icons-vue";
|
3
|
+
import { useNamespace as V } from "../../../packages/hooks/src/use-namespace/index.js";
|
4
|
+
import { ElMessage as p } from "element-plus";
|
5
|
+
const g = { class: "slot" }, w = {
|
6
6
|
key: 0,
|
7
7
|
class: "el-upload__tip"
|
8
|
-
},
|
8
|
+
}, M = { style: { display: "inline-block" } }, T = /* @__PURE__ */ y({
|
9
9
|
name: "QxsFileUpload",
|
10
10
|
__name: "file-upload",
|
11
11
|
props: {
|
@@ -21,35 +21,34 @@ const w = { class: "slot" }, M = {
|
|
21
21
|
ext: {}
|
22
22
|
},
|
23
23
|
emits: ["onSuccess"],
|
24
|
-
setup(
|
25
|
-
const n =
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
}, N = () => {
|
24
|
+
setup(f, { emit: _ }) {
|
25
|
+
const n = f, h = _, v = V("file-upload"), i = B(() => n.accept.split(",").map((e) => e.split("/").pop())), z = (e) => {
|
26
|
+
const t = e.name.split(".").at(-1) ?? "", l = i.value.includes(t), s = e.size / 1024 / 1024 < n.size;
|
27
|
+
return l || p.error(`上传文件只支持 ${i.value.join(" / ")} 格式!`), s || p.error(`上传文件大小不能超过 ${n.size}MB!`), l && s;
|
28
|
+
}, k = () => {
|
30
29
|
p.warning("文件上传超过限制");
|
31
|
-
},
|
32
|
-
|
30
|
+
}, N = (e, o, t) => {
|
31
|
+
h("onSuccess", e, o, t);
|
33
32
|
};
|
34
33
|
return (e, o) => {
|
35
|
-
const t = c("el-icon"), l = c("el-alert"),
|
36
|
-
return
|
34
|
+
const t = c("el-icon"), l = c("el-alert"), s = c("el-upload");
|
35
|
+
return m(), x(s, {
|
37
36
|
headers: e.headers,
|
38
37
|
action: e.action,
|
39
38
|
data: e.data,
|
40
39
|
name: e.name,
|
41
|
-
"before-upload":
|
42
|
-
"on-exceed":
|
43
|
-
"on-success":
|
40
|
+
"before-upload": z,
|
41
|
+
"on-exceed": k,
|
42
|
+
"on-success": N,
|
44
43
|
"file-list": e.files,
|
45
44
|
limit: e.max,
|
46
45
|
drag: "",
|
47
|
-
class:
|
46
|
+
class: C(u(v).e("control"))
|
48
47
|
}, {
|
49
|
-
tip:
|
50
|
-
e.notip ?
|
51
|
-
|
52
|
-
|
48
|
+
tip: r(() => [
|
49
|
+
e.notip ? $("", !0) : (m(), E("div", w, [
|
50
|
+
a("div", M, [
|
51
|
+
d(l, {
|
53
52
|
title: `上传文件支持 ${i.value.join(" / ")} 格式,单个文件大小不超过 ${e.size}MB,且文件数量不超过 ${e.max} 个`,
|
54
53
|
type: "info",
|
55
54
|
"show-icon": "",
|
@@ -58,17 +57,17 @@ const w = { class: "slot" }, M = {
|
|
58
57
|
])
|
59
58
|
]))
|
60
59
|
]),
|
61
|
-
default:
|
62
|
-
|
63
|
-
|
64
|
-
default:
|
65
|
-
|
60
|
+
default: r(() => [
|
61
|
+
a("div", g, [
|
62
|
+
d(t, { class: "el-icon--upload" }, {
|
63
|
+
default: r(() => [
|
64
|
+
d(u(S))
|
66
65
|
]),
|
67
66
|
_: 1
|
68
67
|
}),
|
69
|
-
o[0] || (o[0] =
|
70
|
-
|
71
|
-
|
68
|
+
o[0] || (o[0] = a("div", { class: "el-upload__text" }, [
|
69
|
+
b(" 将文件拖到此处,或"),
|
70
|
+
a("em", null, "点击上传")
|
72
71
|
], -1))
|
73
72
|
])
|
74
73
|
]),
|
@@ -78,5 +77,5 @@ const w = { class: "slot" }, M = {
|
|
78
77
|
}
|
79
78
|
});
|
80
79
|
export {
|
81
|
-
|
80
|
+
T as default
|
82
81
|
};
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("./file-upload.vue.cjs");module.exports=e;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../withInstall.cjs"),i=require("./src/fixed-action-bar.vue.cjs"),e=t.withInstall(i
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../withInstall.cjs"),i=require("./src/fixed-action-bar.vue.cjs"),e=t.withInstall(i);exports.QxsFixedActionBar=e;exports.default=e;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("vue"),b=require("../../../packages/hooks/src/use-namespace/index.cjs"),t=require("../../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.6.3_/node_modules/@vueuse/core/index.cjs"),g=e.defineComponent({name:"QxsFixedActionBar",inheritAttrs:!1,__name:"fixed-action-bar",props:{padding:{type:String,default:"8px"}},setup(u){const m=u,n=b.useNamespace("fixed-action-bar"),p=e.useAttrs(),r=e.ref(!1),c=e.ref(null),s=e.ref(null),a=t.useParentElement(s),{height:f}=t.useElementSize(c,void 0,{box:"border-box"}),{left:h}=t.useElementBounding(a),{width:x}=t.useElementSize(a,void 0,{box:"border-box"});function o(){const l=window.scrollY||document.documentElement.scrollTop,d=window.innerHeight||document.documentElement.clientHeight,w=document.documentElement.scrollHeight;r.value=Math.ceil(l+d)>=w}e.onMounted(()=>{o(),window.addEventListener("scroll",o)}),e.onUnmounted(()=>{window.removeEventListener("scroll",o)});const i=e.computed(()=>({width:`${x||0}px`,left:`${h}px`,class:`${r.value?"":n.is("shadow")} ${p.class||""}`,...n.cssVarBlock({"actionbar-padding":`${m.padding}`})}));return(l,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"placeholderRef",ref:s,style:e.normalizeStyle(`width: 100%; height: ${e.unref(f)}px`)},null,4),e.createElementVNode("div",{ref_key:"actionbar",ref:c,style:e.normalizeStyle(i.value),class:e.normalizeClass([i.value.class,e.unref(n).e("actionbar")]),"data-fixed-calc-width":""},[e.renderSlot(l.$slots,"default")],6)],64))}});module.exports=g;
|
@@ -1,18 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
for (var e in t || (t = {}))
|
6
|
-
B.call(t, e) && p(o, e, t[e]);
|
7
|
-
if (u)
|
8
|
-
for (var e of u(t))
|
9
|
-
S.call(t, e) && p(o, e, t[e]);
|
10
|
-
return o;
|
11
|
-
};
|
12
|
-
import { defineComponent as k, useAttrs as H, ref as c, onMounted as z, onUnmounted as A, computed as L, openBlock as C, createElementBlock as F, Fragment as M, createElementVNode as h, normalizeStyle as w, unref as x, normalizeClass as N, renderSlot as P } from "vue";
|
13
|
-
import { useNamespace as R } from "../../../packages/hooks/src/use-namespace/index.js";
|
14
|
-
import { useParentElement as T, useElementSize as b, useElementBounding as V } from "../../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.6.3_/node_modules/@vueuse/core/index.js";
|
15
|
-
const Y = /* @__PURE__ */ k({
|
1
|
+
import { defineComponent as E, useAttrs as y, ref as n, onMounted as _, onUnmounted as $, computed as B, openBlock as S, createElementBlock as k, Fragment as H, createElementVNode as d, normalizeStyle as m, unref as u, normalizeClass as z, renderSlot as A } from "vue";
|
2
|
+
import { useNamespace as L } from "../../../packages/hooks/src/use-namespace/index.js";
|
3
|
+
import { useParentElement as C, useElementSize as p, useElementBounding as F } from "../../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.6.3_/node_modules/@vueuse/core/index.js";
|
4
|
+
const R = /* @__PURE__ */ E({
|
16
5
|
name: "QxsFixedActionBar",
|
17
6
|
inheritAttrs: !1,
|
18
7
|
__name: "fixed-action-bar",
|
@@ -22,42 +11,43 @@ const Y = /* @__PURE__ */ k({
|
|
22
11
|
default: "8px"
|
23
12
|
}
|
24
13
|
},
|
25
|
-
setup(
|
26
|
-
const
|
27
|
-
function
|
28
|
-
const
|
29
|
-
|
14
|
+
setup(f) {
|
15
|
+
const h = f, e = L("fixed-action-bar"), w = y(), l = n(!1), c = n(null), r = n(null), a = C(r), { height: x } = p(c, void 0, { box: "border-box" }), { left: b } = F(a), { width: g } = p(a, void 0, { box: "border-box" });
|
16
|
+
function t() {
|
17
|
+
const o = window.scrollY || document.documentElement.scrollTop, i = window.innerHeight || document.documentElement.clientHeight, v = document.documentElement.scrollHeight;
|
18
|
+
l.value = Math.ceil(o + i) >= v;
|
30
19
|
}
|
31
|
-
|
32
|
-
|
33
|
-
}),
|
34
|
-
window.removeEventListener("scroll",
|
20
|
+
_(() => {
|
21
|
+
t(), window.addEventListener("scroll", t);
|
22
|
+
}), $(() => {
|
23
|
+
window.removeEventListener("scroll", t);
|
35
24
|
});
|
36
|
-
const
|
37
|
-
width: `${
|
38
|
-
left: `${
|
39
|
-
class: `${
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
25
|
+
const s = B(() => ({
|
26
|
+
width: `${g || 0}px`,
|
27
|
+
left: `${b}px`,
|
28
|
+
class: `${l.value ? "" : e.is("shadow")} ${w.class || ""}`,
|
29
|
+
...e.cssVarBlock({
|
30
|
+
"actionbar-padding": `${h.padding}`
|
31
|
+
})
|
32
|
+
}));
|
33
|
+
return (o, i) => (S(), k(H, null, [
|
34
|
+
d("div", {
|
45
35
|
ref_key: "placeholderRef",
|
46
|
-
ref:
|
47
|
-
style:
|
36
|
+
ref: r,
|
37
|
+
style: m(`width: 100%; height: ${u(x)}px`)
|
48
38
|
}, null, 4),
|
49
|
-
|
39
|
+
d("div", {
|
50
40
|
ref_key: "actionbar",
|
51
|
-
ref:
|
52
|
-
style:
|
53
|
-
class:
|
41
|
+
ref: c,
|
42
|
+
style: m(s.value),
|
43
|
+
class: z([s.value.class, u(e).e("actionbar")]),
|
54
44
|
"data-fixed-calc-width": ""
|
55
45
|
}, [
|
56
|
-
|
46
|
+
A(o.$slots, "default")
|
57
47
|
], 6)
|
58
48
|
], 64));
|
59
49
|
}
|
60
50
|
});
|
61
51
|
export {
|
62
|
-
|
52
|
+
R as default
|
63
53
|
};
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("./fixed-action-bar.vue.cjs");module.exports=e;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../withInstall.cjs"),l=require("./src/image-upload.vue.cjs"),e=t.withInstall(l
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../withInstall.cjs"),l=require("./src/image-upload.vue.cjs"),e=t.withInstall(l);exports.QxsImageUpload=e;exports.default=e;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("vue"),n=require("@element-plus/icons-vue"),C=require("../../../packages/hooks/src/use-namespace/index.cjs"),d=require("element-plus"),$={key:1,class:"image"},B={class:"mask"},E={class:"actions"},z={key:0,class:"el-upload__tip-text"},S={style:{display:"inline-block"}},b=e.defineComponent({name:"QxsImageUpload",__name:"image-upload",props:{action:{},headers:{},data:{},name:{default:"file"},url:{default:""},size:{default:20},width:{default:160},accept:{default:"image/jpeg,image/jpg,image/png,image/gif"},height:{default:90},placeholder:{default:"点击上传图片"},notip:{type:Boolean,default:!1},tipText:{},beforeUpload:{}},emits:["update:url","onSuccess"],setup(u,{emit:m}){const s=u,p=m,c=C.useNamespace("image-upload"),o=e.ref({imageViewerVisible:!1,progress:{preview:"",percent:0}}),r=e.computed(()=>s.accept.split(",").map(t=>t.split("/").pop()));function h(){o.value.imageViewerVisible=!0}function g(){o.value.imageViewerVisible=!1}function f(){p("update:url","")}const v=t=>{const i=t.name.split(".").at(-1)??"",l=r.value.includes(i),a=t.size/1024/1024<s.size;return l?a?o.value.progress.preview=URL.createObjectURL(t):d.ElMessage.error(`上传图片大小不能超过 ${s.size}MB!`):d.ElMessage.error(`上传图片只支持${r.value.join(" / ")}格式!`),l&&a&&(!s.beforeUpload||s.beforeUpload(t))},w=t=>{o.value.progress.percent=~~t.percent},V=(...t)=>{o.value.progress.preview="",o.value.progress.percent=0,p("onSuccess",...t)};return(t,y)=>{const i=e.resolveComponent("el-icon"),l=e.resolveComponent("el-image"),a=e.resolveComponent("el-progress"),N=e.resolveComponent("el-upload"),k=e.resolveComponent("el-image-viewer");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(c).e("upload-container"))},[e.createVNode(N,{"show-file-list":!1,headers:t.headers,action:t.action,data:t.data,name:t.name,"before-upload":v,"on-progress":w,"on-success":V,drag:"",accept:t.accept,class:e.normalizeClass(e.unref(c).e("image-upload"))},{default:e.withCtx(()=>[t.url===""?(e.openBlock(),e.createBlock(l,{key:0,src:t.url===""?t.placeholder:t.url,style:e.normalizeStyle(`width:${t.width}px;height:${t.height}px;`),fit:"fill"},{error:e.withCtx(()=>[e.createElementVNode("div",{class:"image-slot",style:e.normalizeStyle(`width:${t.width}px;height:${t.height}px;`)},[e.createVNode(i,null,{default:e.withCtx(()=>[e.createVNode(e.unref(n.Plus))]),_:1}),e.createElementVNode("p",null,e.toDisplayString(t.placeholder),1)],4)]),_:1},8,["src","style"])):(e.openBlock(),e.createElementBlock("div",$,[e.createVNode(l,{src:t.url,style:e.normalizeStyle(`width:${t.width}px;height:${t.height}px;`),fit:"fill"},null,8,["src","style"]),e.createElementVNode("div",B,[e.createElementVNode("div",E,[e.createElementVNode("span",{title:"预览",onClick:e.withModifiers(h,["stop"])},[e.createVNode(i,null,{default:e.withCtx(()=>[e.createVNode(e.unref(n.ZoomIn))]),_:1})]),e.createElementVNode("span",{title:"移除",onClick:e.withModifiers(f,["stop"])},[e.createVNode(i,null,{default:e.withCtx(()=>[e.createVNode(e.unref(n.Delete))]),_:1})])])])])),e.withDirectives(e.createElementVNode("div",{class:"progress",style:e.normalizeStyle(`width:${t.width}px;height:${t.height}px;`)},[e.createVNode(l,{src:o.value.progress.preview,style:e.normalizeStyle(`width:${t.width}px;height:${t.height}px;`),fit:"fill"},null,8,["src","style"]),e.createVNode(a,{type:"circle",width:Math.min(t.width,t.height)*.8,percentage:o.value.progress.percent},null,8,["width","percentage"])],4),[[e.vShow,t.url===""&&o.value.progress.percent]])]),_:1},8,["headers","action","data","name","accept","class"]),t.notip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("div",S,e.toDisplayString(t.tipText||`上传图片支持 ${r.value.join(" / ")} 格式,且图片大小不超过 ${t.size}MB,建议图片尺寸为 ${t.width}*${t.height}`),1)])),o.value.imageViewerVisible?(e.openBlock(),e.createBlock(k,{key:1,"url-list":[t.url],teleported:"",onClose:g},null,8,["url-list"])):e.createCommentVNode("",!0)],2)}}});module.exports=b;
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import { defineComponent as E, ref as O, computed as T, resolveComponent as r, openBlock as n, createElementBlock as
|
2
|
-
import { Plus as P, ZoomIn as R, Delete as Q } from "
|
1
|
+
import { defineComponent as E, ref as O, computed as T, resolveComponent as r, openBlock as n, createElementBlock as m, normalizeClass as v, unref as p, createVNode as l, withCtx as d, createBlock as w, normalizeStyle as c, createElementVNode as t, toDisplayString as y, withModifiers as $, withDirectives as I, vShow as L, createCommentVNode as k } from "vue";
|
2
|
+
import { Plus as P, ZoomIn as R, Delete as Q } from "@element-plus/icons-vue";
|
3
3
|
import { useNamespace as Z } from "../../../packages/hooks/src/use-namespace/index.js";
|
4
|
-
import { ElMessage as V } from "
|
4
|
+
import { ElMessage as V } from "element-plus";
|
5
5
|
const q = {
|
6
6
|
key: 1,
|
7
7
|
class: "image"
|
@@ -27,98 +27,97 @@ const q = {
|
|
27
27
|
beforeUpload: {}
|
28
28
|
},
|
29
29
|
emits: ["update:url", "onSuccess"],
|
30
|
-
setup(b, { emit:
|
31
|
-
const o = b,
|
30
|
+
setup(b, { emit: C }) {
|
31
|
+
const o = b, g = C, f = Z("image-upload"), s = O({
|
32
32
|
imageViewerVisible: !1,
|
33
33
|
progress: {
|
34
34
|
preview: "",
|
35
35
|
percent: 0
|
36
36
|
}
|
37
|
-
}),
|
38
|
-
function
|
39
|
-
|
37
|
+
}), h = T(() => o.accept.split(",").map((e) => e.split("/").pop()));
|
38
|
+
function _() {
|
39
|
+
s.value.imageViewerVisible = !0;
|
40
40
|
}
|
41
|
-
function
|
42
|
-
|
41
|
+
function z() {
|
42
|
+
s.value.imageViewerVisible = !1;
|
43
43
|
}
|
44
|
-
function
|
45
|
-
|
44
|
+
function B() {
|
45
|
+
g("update:url", "");
|
46
46
|
}
|
47
|
-
const
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
l.value.progress.preview = "", l.value.progress.percent = 0, f("onSuccess", ...e);
|
47
|
+
const S = (e) => {
|
48
|
+
const a = e.name.split(".").at(-1) ?? "", i = h.value.includes(a), u = e.size / 1024 / 1024 < o.size;
|
49
|
+
return i ? u ? s.value.progress.preview = URL.createObjectURL(e) : V.error(`上传图片大小不能超过 ${o.size}MB!`) : V.error(`上传图片只支持${h.value.join(" / ")}格式!`), i && u && (!o.beforeUpload || o.beforeUpload(e));
|
50
|
+
}, U = (e) => {
|
51
|
+
s.value.progress.percent = ~~e.percent;
|
52
|
+
}, N = (...e) => {
|
53
|
+
s.value.progress.preview = "", s.value.progress.percent = 0, g("onSuccess", ...e);
|
55
54
|
};
|
56
|
-
return (e,
|
57
|
-
const a = r("el-icon"), i = r("el-image"),
|
58
|
-
return n(),
|
59
|
-
class:
|
55
|
+
return (e, j) => {
|
56
|
+
const a = r("el-icon"), i = r("el-image"), u = r("el-progress"), M = r("el-upload"), D = r("el-image-viewer");
|
57
|
+
return n(), m("div", {
|
58
|
+
class: v(p(f).e("upload-container"))
|
60
59
|
}, [
|
61
|
-
|
60
|
+
l(M, {
|
62
61
|
"show-file-list": !1,
|
63
62
|
headers: e.headers,
|
64
63
|
action: e.action,
|
65
64
|
data: e.data,
|
66
65
|
name: e.name,
|
67
|
-
"before-upload":
|
68
|
-
"on-progress":
|
69
|
-
"on-success":
|
66
|
+
"before-upload": S,
|
67
|
+
"on-progress": U,
|
68
|
+
"on-success": N,
|
70
69
|
drag: "",
|
71
70
|
accept: e.accept,
|
72
|
-
class:
|
71
|
+
class: v(p(f).e("image-upload"))
|
73
72
|
}, {
|
74
73
|
default: d(() => [
|
75
|
-
e.url === "" ? (n(),
|
74
|
+
e.url === "" ? (n(), w(i, {
|
76
75
|
key: 0,
|
77
76
|
src: e.url === "" ? e.placeholder : e.url,
|
78
|
-
style:
|
77
|
+
style: c(`width:${e.width}px;height:${e.height}px;`),
|
79
78
|
fit: "fill"
|
80
79
|
}, {
|
81
80
|
error: d(() => [
|
82
81
|
t("div", {
|
83
82
|
class: "image-slot",
|
84
|
-
style:
|
83
|
+
style: c(`width:${e.width}px;height:${e.height}px;`)
|
85
84
|
}, [
|
86
|
-
|
85
|
+
l(a, null, {
|
87
86
|
default: d(() => [
|
88
|
-
|
87
|
+
l(p(P))
|
89
88
|
]),
|
90
89
|
_: 1
|
91
90
|
}),
|
92
|
-
t("p", null,
|
91
|
+
t("p", null, y(e.placeholder), 1)
|
93
92
|
], 4)
|
94
93
|
]),
|
95
94
|
_: 1
|
96
|
-
}, 8, ["src", "style"])) : (n(),
|
97
|
-
|
95
|
+
}, 8, ["src", "style"])) : (n(), m("div", q, [
|
96
|
+
l(i, {
|
98
97
|
src: e.url,
|
99
|
-
style:
|
98
|
+
style: c(`width:${e.width}px;height:${e.height}px;`),
|
100
99
|
fit: "fill"
|
101
100
|
}, null, 8, ["src", "style"]),
|
102
101
|
t("div", A, [
|
103
102
|
t("div", F, [
|
104
103
|
t("span", {
|
105
104
|
title: "预览",
|
106
|
-
onClick:
|
105
|
+
onClick: $(_, ["stop"])
|
107
106
|
}, [
|
108
|
-
|
107
|
+
l(a, null, {
|
109
108
|
default: d(() => [
|
110
|
-
|
109
|
+
l(p(R))
|
111
110
|
]),
|
112
111
|
_: 1
|
113
112
|
})
|
114
113
|
]),
|
115
114
|
t("span", {
|
116
115
|
title: "移除",
|
117
|
-
onClick:
|
116
|
+
onClick: $(B, ["stop"])
|
118
117
|
}, [
|
119
|
-
|
118
|
+
l(a, null, {
|
120
119
|
default: d(() => [
|
121
|
-
|
120
|
+
l(p(Q))
|
122
121
|
]),
|
123
122
|
_: 1
|
124
123
|
})
|
@@ -128,33 +127,33 @@ const q = {
|
|
128
127
|
])),
|
129
128
|
I(t("div", {
|
130
129
|
class: "progress",
|
131
|
-
style:
|
130
|
+
style: c(`width:${e.width}px;height:${e.height}px;`)
|
132
131
|
}, [
|
133
|
-
|
134
|
-
src:
|
135
|
-
style:
|
132
|
+
l(i, {
|
133
|
+
src: s.value.progress.preview,
|
134
|
+
style: c(`width:${e.width}px;height:${e.height}px;`),
|
136
135
|
fit: "fill"
|
137
136
|
}, null, 8, ["src", "style"]),
|
138
|
-
|
137
|
+
l(u, {
|
139
138
|
type: "circle",
|
140
139
|
width: Math.min(e.width, e.height) * 0.8,
|
141
|
-
percentage:
|
140
|
+
percentage: s.value.progress.percent
|
142
141
|
}, null, 8, ["width", "percentage"])
|
143
142
|
], 4), [
|
144
|
-
[L, e.url === "" &&
|
143
|
+
[L, e.url === "" && s.value.progress.percent]
|
145
144
|
])
|
146
145
|
]),
|
147
146
|
_: 1
|
148
147
|
}, 8, ["headers", "action", "data", "name", "accept", "class"]),
|
149
|
-
e.notip ?
|
150
|
-
t("div", H,
|
148
|
+
e.notip ? k("", !0) : (n(), m("div", G, [
|
149
|
+
t("div", H, y(e.tipText || `上传图片支持 ${h.value.join(" / ")} 格式,且图片大小不超过 ${e.size}MB,建议图片尺寸为 ${e.width}*${e.height}`), 1)
|
151
150
|
])),
|
152
|
-
|
151
|
+
s.value.imageViewerVisible ? (n(), w(D, {
|
153
152
|
key: 1,
|
154
153
|
"url-list": [e.url],
|
155
154
|
teleported: "",
|
156
|
-
onClose:
|
157
|
-
}, null, 8, ["url-list"])) :
|
155
|
+
onClose: z
|
156
|
+
}, null, 8, ["url-list"])) : k("", !0)
|
158
157
|
], 2);
|
159
158
|
};
|
160
159
|
}
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("./image-upload.vue.cjs");module.exports=e;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../withInstall.cjs"),t=require("./src/photo-crop-tool.vue.cjs"),o=e.withInstall(t);exports.QxsPhotoCropTool=o;exports.default=o;
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";
|
1
|
+
"use strict";const e=require("vue"),G=require("../../../packages/hooks/src/use-namespace/index.cjs"),M=require("../../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.6.3_/node_modules/@vueuse/core/index.cjs"),J=require("./composables.cjs"),K=["src"],Z=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(Y,{expose:j}){const a=Y;let L=0,S=0,f=0,R=0;const d=G.useNamespace("photo-crop-tool"),W=e.ref(null),s=e.ref(null),C=e.ref(null),T=e.ref(""),h=e.ref(""),F=e.ref({x:0,y:0}),t=e.ref({width:a.defaultWidth,height:a.defaultHeight,x:0,y:0}),{width:H,height:E}=M.useElementSize(W),{width:D}=M.useElementSize(C),{x:p,y:m,style:O}=M.useDraggable(W,{containerElement:s,draggingElement:W,disabled:e.computed(()=>!!h.value),exact:!0,initialValue:F}),I=e.computed(()=>a.imgFile?URL.createObjectURL(a.imgFile):"");e.watch(()=>a.imgFile,l=>{l&&!l.type.startsWith("image/")?T.value="文件类型错误":T.value=""});const P=e.computed(()=>{var l;return(((l=C.value)==null?void 0:l.naturalWidth)||0)/D.value}),c=e.computed(()=>{const l={left:0,top:0};return h.value==="bottom-right"?(l.left=t.value.x,l.top=t.value.y):h.value==="top-left"?(l.left=t.value.x-H.value,l.top=t.value.y-E.value):h.value==="top-right"?(l.top=t.value.y-E.value,l.left=t.value.x):h.value==="bottom-left"&&(l.left=t.value.x-H.value,l.top=t.value.y),l}),_=e.computed(()=>{const{aspectRatio:l}=a,i={width:`${t.value.width||a.defaultWidth}`,height:`${t.value.height||a.defaultHeight}`,"aspect-ratio":l,top:`${c.value.top}px`,left:`${c.value.left}px`};return a.zoomType==="free"?delete i["aspect-ratio"]:a.zoomType==="fixed"&&delete i.height,d.cssVarBlock(i)});function g(l){return l*P.value}async function Q(l=C.value){var k,N;let i="transparent";s.value&&(i=window.getComputedStyle(s.value).backgroundColor);const u=document.createElement("canvas");u.width=g(((k=s.value)==null?void 0:k.clientWidth)||0),u.height=g(((N=s.value)==null?void 0:N.clientHeight)||0);const{drawImage:z,cropCanvas:y,drawColor:x}=J.useCanvas(u);return x(0,0,u.width,u.height,i),z(l,g(l.offsetLeft),g(l.offsetTop),l.naturalWidth,l.naturalHeight),await y(g(p.value),g(m.value),g(H.value),g(E.value))}function w(l,i){var y,x;const u=((y=s.value)==null?void 0:y.clientWidth)||1/0,z=((x=s.value)==null?void 0:x.clientHeight)||1/0;return{width:Math.min(Math.max(l,0),u),height:Math.min(Math.max(i,0),z)}}function V(l){var z,y,x,k,N,U,q,X;const i=l.clientX-L,u=l.clientY-S;if(h.value==="bottom-right"){if(a.zoomType==="free"){const{width:n,height:o}=w(f+i,R+u);t.value.width=n,t.value.height=o}else if(a.zoomType==="fixed"){const n=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f+i,r=o/n;const{width:b,height:v}=w(o,r);v>(((z=s.value)==null?void 0:z.clientHeight)||1/0)&&(r=((y=s.value)==null?void 0:y.clientHeight)||1/0,o=r*n),t.value.width=b,t.value.height=v}}else if(h.value==="top-left"){if(a.zoomType==="free"){const{width:n,height:o}=w(f-i,R-u);t.value.width=n,t.value.height=o}else if(a.zoomType==="fixed"){const n=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f-i,r=o/n;const{width:b,height:v}=w(o,r);v>(((x=s.value)==null?void 0:x.clientHeight)||1/0)&&(r=((k=s.value)==null?void 0:k.clientHeight)||1/0,o=r*n),t.value.width=b,t.value.height=v}p.value=c.value.left,m.value=c.value.top}else if(h.value==="top-right"){if(a.zoomType==="free"){const{width:n,height:o}=w(f+i,R-u);t.value.width=n,t.value.height=o}else if(a.zoomType==="fixed"){const n=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f+i,r=o/n;const{width:b,height:v}=w(o,r);v>(((N=s.value)==null?void 0:N.clientHeight)||1/0)&&(r=((U=s.value)==null?void 0:U.clientHeight)||1/0,o=r*n),t.value.width=b,t.value.height=v}p.value=c.value.left,m.value=c.value.top}else if(h.value==="bottom-left"){if(a.zoomType==="free"){const{width:n,height:o}=w(f-i,R+u);t.value.width=n,t.value.height=o}else if(a.zoomType==="fixed"){const n=Number.parseFloat(a.aspectRatio.split(" / ")[0])/Number.parseFloat(a.aspectRatio.split(" / ")[1]);let o=f-i,r=o/n;const{width:b,height:v}=w(o,r);v>(((q=s.value)==null?void 0:q.clientHeight)||1/0)&&(r=((X=s.value)==null?void 0:X.clientHeight)||1/0,o=r*n),t.value.width=b,t.value.height=v}p.value=c.value.left,m.value=c.value.top}l.preventDefault(),l.stopPropagation()}function B(l,i){h.value=i,L=l.clientX,S=l.clientY,f=t.value.width,R=t.value.height,i==="bottom-right"?(t.value.x=p.value,t.value.y=m.value):i==="top-left"?(t.value.x=p.value+H.value,t.value.y=m.value+E.value):i==="top-right"?(t.value.x=p.value,t.value.y=m.value+E.value):i==="bottom-left"&&(t.value.x=p.value+H.value,t.value.y=m.value)}function $(){h.value=""}function A(){t.value.width=a.defaultWidth,t.value.height=a.defaultHeight,p.value=0,m.value=0}return document.addEventListener("mouseup",$),document.addEventListener("mousemove",V),e.onMounted(()=>{e.nextTick(()=>{var l,i;F.value.x=(((l=s.value)==null?void 0:l.offsetWidth)||0)/2-t.value.width/2,F.value.y=(((i=s.value)==null?void 0:i.offsetHeight)||0)/2-t.value.height/2})}),e.onUnmounted(()=>{I.value&&URL.revokeObjectURL(I.value),document.removeEventListener("mouseup",$),document.removeEventListener("mousemove",V)}),j({crop:Q,resize:A}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:s,class:e.normalizeClass([e.unref(d).e("img-box")])},[T.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(d).e("error-message")])},e.toDisplayString(T.value),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:C,class:e.normalizeClass([e.unref(d).e("image")]),src:I.value},null,10,K),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:W,class:e.normalizeClass([e.unref(d).e("crop-tool-box")]),style:e.normalizeStyle([_.value,h.value?`left: ${c.value.left}px;top: ${c.value.top}px`:e.unref(O)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(d).e("top-left")]),onMousedown:i[0]||(i[0]=u=>B(u,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(d).e("top-right")]),onMousedown:i[1]||(i[1]=u=>B(u,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(d).e("bottom-right")]),onMousedown:i[2]||(i[2]=u=>B(u,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(d).e("bottom-left")]),onMousedown:i[3]||(i[3]=u=>B(u,"bottom-left"))},null,34)],6)],64))],2))}});module.exports=Z;
|