@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
299 lines (298 loc) • 13.4 kB
JavaScript
import { isImageUrl as h, urlPrependBasePath as E, isBase64ImageUrl as S, getCustomClass as R, getCustomStyle as D, withInstall as T } from "../common/index.esm.js";
import { computed as B, defineComponent as I, ref as Q, watch as P, createVNode as d } from "vue";
import { resolveAppearance as j, createPropsResolver as F } from "../dynamic-resolver/index.esm.js";
import { LocaleService as p } from "../locale/index.esm.js";
import { FNotifyService as x } from "../notify/index.esm.js";
function w(A, o, r) {
return o;
}
function N(A, o) {
return o ? typeof o == "string" ? { imageType: o.split(",") } : { imageType: o } : { imageType: [] };
}
const V = /* @__PURE__ */ new Map([
["appearance", j],
["imageType", N]
]), k = "https://json-schema.org/draft/2020-12/schema", U = "https://farris-design.gitee.io/avatar.schema.json", b = "avatar", q = "A Farris Component", J = "object", Z = {
id: {
description: "The unique identifier for avatar",
type: "string"
},
type: {
description: "The type string of avatar",
type: "string",
default: "avatar"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
type: "boolean",
default: !1
},
avatarWidth: {
description: "",
type: "number",
default: 100
},
title: {
description: "",
type: "string"
},
avatarHeight: {
description: "",
type: "number",
default: 100
},
readonly: {
description: "",
type: "boolean",
default: !1
},
cover: {
description: "",
type: "string"
},
visible: {
description: "",
type: "boolean",
default: !0
},
required: {
description: "",
type: "boolean",
default: !1
},
shape: {
description: "",
type: "string",
default: "circle"
},
maxSize: {
description: "允许头像上传的大小，单位MB",
type: "number",
default: 2
},
imageType: {
description: "支持的头像类型",
type: "array",
default: []
},
onImageChange: {
description: "",
type: "string"
}
}, W = [
"id",
"type"
], M = [
"id",
"appearance",
"binding",
"visible"
], Y = {
onImageChange: "头像变化后事件"
}, z = {
$schema: k,
$id: U,
title: b,
description: q,
type: J,
properties: Z,
required: W,
ignore: M,
events: Y
}, v = {
/** 组件自定义样式 */
customClass: { type: String, default: "" },
customStyle: { type: String, default: "" },
/**
* 头像宽度
*/
avatarWidth: { type: Number, default: 100 },
/**
* 头像高度
*/
avatarHeight: { type: Number, default: 100 },
/**
* 组件标识
*/
cover: { type: String },
/**
* 只读
*/
readonly: { type: Boolean, default: !1 },
visible: { type: Boolean, default: !0 },
required: { type: Boolean, default: !1 },
/**
* 头像形状
*/
shape: { type: String, default: "circle" },
/**
* 允许头像上传大小, 单位MB
*/
maxSize: { type: Number, default: 2 },
/**
* 组件值
*/
modelValue: { type: String, default: "" },
/**
* 头像标题
*/
title: { type: String, default: "" },
/**
* 支持的头像类型
*/
imageType: { type: Array, default: [] }
}, tA = F(v, z, V, w);
function G(A, o, r, g) {
const l = ["webp", "png", "svg", "gif", "jpg", "jpeg", "bmp"];
function c(e) {
return e ? "data:image/jpeg;base64," + e : "";
}
const y = B(() => {
var a;
if (!A.imageType || !A.imageType.length)
return l.map((t) => `.${t}`).join(",");
const e = (a = A.imageType) == null ? void 0 : a.map((t) => `.${t}`);
return !e || !e.length ? "image/*" : e.join(",");
}), u = B(() => {
const e = g.value;
return e ? h(e) ? E(e) : S(e) ? e : c(e) : "";
}), n = B(() => A.readonly ? "" : A.title);
function f() {
A.readonly || r && r.value && r.value.click();
}
return { acceptTypes: y, imageSource: u, imageTitle: n, onClickImage: f };
}
function L(A, o, r, g, l) {
const c = new x();
function y(e) {
g.value = e;
}
function u(e) {
return new Promise((t, s) => {
const i = new FileReader();
i.readAsDataURL(e), i.onload = () => {
t({ state: "done", content: i.result });
}, i.onerror = function() {
s({ state: "error", content: i.result });
};
});
}
function n(e) {
const a = {
size: e.size,
name: e.name,
type: e.type,
lastModified: String(e.lastModified)
};
u(e).then((t) => {
t.state === "done" && (y(t.content), a.state = t.state, a.base64 = t.content, o.emit("update:modelValue", a.base64), o.emit("imageChange", a)), l.value = !1;
}).catch((t) => {
l.value = !1;
const s = p.getLocaleValue("avatar.uploadError");
c.error({ message: s, position: "top-center" });
});
}
function f(e) {
if (A.readonly)
return;
const a = e.target, t = a.files;
if (!t || !t[0])
return;
const s = A.maxSize <= 0 ? 2 : A.maxSize, i = t[0].name || "", m = i.lastIndexOf("."), K = m > 0 ? i.substring(m).toLowerCase() : "", H = t[0].size / 1024 / 1024 < s;
if (r.value && r.value.split(",").indexOf(K) < 0) {
const C = p.getLocaleValue("avatar.typeError");
c.error({ message: C, position: "top-center" }), a.value = "";
return;
}
if (!H) {
const C = p.getLocaleValue("avatar.sizeError") + s + "MB!";
c.error({ message: C, position: "top-center" }), a.value = "";
return;
}
l.value = !0, n(t[0]), a.value = "";
}
return { onFileChange: f };
}
const X = /* @__PURE__ */ I({
name: "FAvatar",
props: v,
emits: ["imageChange", "update:modelValue"],
setup(A, o) {
const r = Q(), g = "data:image/jpeg;base64,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", l = "data:image/jpeg;base64,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", c = B(() => {
const i = {
"f-avatar": !0,
"f-avatar-readonly": A.readonly,
"f-avatar-circle": A.shape === "circle",
"f-avatar-square": A.shape === "square"
};
return R(i, A.customClass);
}), y = B(() => {
const i = {
width: (A.avatarWidth > 0 ? A.avatarWidth : 100) + "px",
height: (A.avatarHeight > 0 ? A.avatarHeight : 100) + "px"
};
return D(i, A.customStyle);
}), u = Q(!1), n = Q(A.modelValue || A.cover || g), {
acceptTypes: f,
imageSource: e,
onClickImage: a
} = G(A, o, r, n), {
onFileChange: t
} = L(A, o, f, n, u);
P(() => A.modelValue, (i) => {
n.value = i || A.cover || g;
});
function s() {
n.value = l;
}
return () => A.visible ? d("div", {
class: c.value,
style: y.value,
onClick: a
}, [u.value && d("div", {
class: "f-avatar-upload-loading"
}, [d("div", {
class: "loading-inner"
}, [p.getLocaleValue("avatar.loading")])]), d("img", {
title: A.title,
class: "f-avatar-image",
src: e.value,
onError: s
}, null), !A.readonly && d("div", {
class: "f-avatar-icon"
}, [d("span", {
class: "f-icon f-icon-camera"
}, null)]), !A.readonly && d("input", {
ref: r,
name: "file-input",
type: "file",
class: "f-avatar-upload",
accept: f.value,
onChange: t,
style: "display: none;"
}, null)]) : null;
}
}), aA = T(X);
export {
X as FAvatar,
v as avatarProps,
aA as default,
tA as propsResolver
};