@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
53 lines (52 loc) • 1.96 kB
JavaScript
import { defineComponent as p, ref as k, computed as o, openBlock as t, createElementBlock as d, createElementVNode as h, normalizeStyle as c, unref as r, normalizeClass as b, createCommentVNode as _ } from "vue";
import { genSize as a } from "../utils/genSize.js";
import { getCssColor as y } from "../utils/getCssColor.js";
import { useLazyImage as z } from "../composables/useLazyImage.js";
const I = { class: "FBackgroundImage" }, S = /* @__PURE__ */ p({
__name: "FBackgroundImage",
props: {
src: {},
height: { default: "100%" },
width: { default: "100%" },
position: { default: "initial" },
size: {},
repeat: { default: "no-repeat" },
blendMode: { default: "normal" },
color: { default: "none" },
loading: { default: "lazy" },
placeholder: { default: "" }
},
setup(i) {
const e = i, l = k(), { isInit: s, isLoaded: g } = z(l, e.src), u = o(() => e.loading !== "lazy" || s.value ? e.src : ""), n = o(
() => ({
"--fbackgroundimage--src": `url(${u.value})`,
"--fbackgroundimage--height": a(e.height),
"--fbackgroundimage--width": a(e.width),
"--fbackgroundimage--color": y(e.color),
"--fbackgroundimage--position": a(e.position),
"--fbackgroundimage--size": a(e.size),
"--fbackgroundimage--repeat": a(e.repeat),
"--fbackgroundimage--blend-mode": a(e.blendMode),
"--fbackgroundimage--placeholder": `url(${e.placeholder})`
})
), m = o(() => ({
"FBackgroundImage__placeholder--loaded": g.value
}));
return (f, B) => (t(), d("div", I, [
h("div", {
class: "FBackgroundImage__image",
ref_key: "backgroundImageRef",
ref: l,
style: c(r(n))
}, null, 4),
f.placeholder ? (t(), d("div", {
key: 0,
class: b(["FBackgroundImage__placeholder", r(m)]),
style: c(r(n))
}, null, 6)) : _("", !0)
]));
}
});
export {
S as default
};