UNPKG

@aplus-frontend/ui

Version:

112 lines (111 loc) 3.73 kB
import { defineComponent as S, computed as l, ref as W, watchEffect as j, createBlock as h, openBlock as i, unref as o, mergeProps as b, withCtx as B, renderSlot as E, normalizeProps as F, guardReactiveProps as L, createElementVNode as v, normalizeClass as U, createElementBlock as x, Fragment as D, renderList as P, resolveDynamicComponent as R, createVNode as T } from "vue"; import { DownloadOutlined as z } from "@ant-design/icons-vue"; import { Image as V } from "@aplus-frontend/antdv"; import { omit as $ } from "lodash-unified"; import "../../config-provider/index.mjs"; import { injectLocaleToOss as G, getOssInstance as q, getSignatureUrl as H } from "./hooks/useOss.mjs"; import J from "./imgs/admin-fallback.jpg.mjs"; import K from "./imgs/user-fallback.jpg.mjs"; import Q from "./style/index.mjs"; import { useNamespace as X } from "../../config-provider/hooks/use-namespace.mjs"; import { useGlobalConfig as m } from "../../config-provider/hooks/use-global-config.mjs"; import { useLocale as Y } from "../../config-provider/hooks/use-locale.mjs"; const ue = /* @__PURE__ */ S({ __name: "ApImage", props: { getOssAccess: {}, width: {}, height: {}, alt: {}, fallback: {}, src: {}, fileName: {}, uiMode: {}, preview: { type: [Boolean, Object], default: !0 } }, setup(k) { const { b: u } = X("ap-image"), p = Q("ap-image"), e = k, d = { aplus: K, admin: J }, w = m("apImage", { uiMode: "aplus" }), C = m("apUpload"), f = m( "downloadCenterTriggerConfig" ), O = l( () => e.uiMode || w.value?.uiMode ), { t: y, lang: A } = Y(), g = l( () => e.getOssAccess || C.value?.getOssAccess ), N = l( () => d[O.value] || d.aplus ), I = l(() => e?.fallback || N.value), s = W(""); G(y, A), j(async () => { if (!e?.src) { s.value = ""; return; } if (e.src?.startsWith("http") || e.src?.startsWith("data:") || e.src?.startsWith("blob:")) { s.value = e.src; return; } try { const a = e.src?.match(/^([^:]+):(.*)$/), r = a?.[1], t = a?.[2] ?? e.src, n = await q( () => r ? g.value?.(r) : g.value?.(), r ), c = await H({ oss: n, fileName: t }); c && (s.value = c); } catch { s.value = ""; } }); async function _() { if (!e?.src) return; const a = e.src, r = e.fileName ?? e.src; if (e.src?.startsWith("http") || e.src?.startsWith("data:")) { M(a, r); return; } if (f.value?.trigger) { let t = [ { objectName: a, fileName: r } ]; await f.value?.trigger(t); } } const M = (a, r) => { const t = document.createElement("a"); t.href = a, t.rel = "noopener noreferrer", t.setAttribute("download", r), document.body.appendChild(t), t.click(), document.body.removeChild(t); }; return (a, r) => (i(), h(o(V), b({ class: [o(u)(), o(p)] }, { ...o($)(e, ["src", "getOssAccess"]), fallback: I.value, src: s.value }), { toolbarRender: B((t) => [ E(a.$slots, "toolbarRender", F(L({ ...t })), () => [ v("div", { class: U([o(u)("toolbar"), o(p)]) }, [ (i(!0), x(D, null, P(t.originalNodes, (n, c) => (i(), h(R(n), b({ ref_for: !0 }, e, { key: c }), null, 16))), 128)), v("div", { class: "ant-image-preview-operations-operation", onClick: _ }, [ T(o(z)) ]) ], 2) ]) ]), _: 3 }, 16, ["class"])); } }); export { ue as default };