@builder.io/sdk-vue
Version:
Builder.io SDK for Vue
211 lines (210 loc) • 6.39 kB
JavaScript
import { defineComponent as E, resolveComponent as x, openBlock as y, createBlock as $, createCommentVNode as Q, createElementBlock as z, Fragment as G } from "vue";
import { T as w, e as C } from "./should-force-browser-runtime-in-node-ikxWrCvn.js";
import { c as A, d as N, f as l, h as u, i as j, _ as I, j as H, b as R } from "./index--XgB-AgN.js";
import { f as U } from "./find-block-3Ig0kVVe.js";
const W = E({
name: "block-styles",
components: { InlinedStyles: A },
props: ["block", "context"],
data() {
return { TARGET: w };
},
computed: {
canShowBlock() {
const e = this.block;
return C(e.hide) ? !e.hide : C(e.show) ? e.show : !0;
},
css() {
var h, B, f, v, b;
const e = this.block, s = e.responsiveStyles, t = this.context.content, o = N(
((h = t == null ? void 0 : t.meta) == null ? void 0 : h.breakpoints) || {}
), p = !!((f = (B = t == null ? void 0 : t.meta) == null ? void 0 : B.breakpoints) != null && f.xsmall), i = s == null ? void 0 : s.large, n = s == null ? void 0 : s.medium, a = s == null ? void 0 : s.small, r = s == null ? void 0 : s.xsmall, d = e.id;
if (!d)
return "";
const g = i ? l({
className: d,
styles: i
}) : "", P = n ? l({
className: d,
styles: n,
mediaQuery: u(
"medium",
o
)
}) : "", T = a ? l({
className: d,
styles: a,
mediaQuery: u(
"small",
o
)
}) : "", m = r && p ? l({
className: d,
styles: r,
mediaQuery: u(
"xsmall",
o
)
}) : "", c = e.animations && e.animations.find((k) => k.trigger === "hover");
let S = "";
if (c) {
const k = ((b = (v = c.steps) == null ? void 0 : v[1]) == null ? void 0 : b.styles) || {};
S = l({
className: `${d}:hover`,
styles: {
...k,
transition: `all ${c.duration}s ${j(
c.easing
)}`,
transitionDelay: c.delay ? `${c.delay}s` : "0s"
}
}) || "";
}
return [
g,
P,
T,
m,
S
].join(" ");
}
}
});
function D(e, s, t, o, p, i) {
const n = x("InlinedStyles");
return e.TARGET !== "reactNative" && e.css && e.canShowBlock ? (y(), $(n, {
key: 0,
id: "builderio-block",
styles: e.css,
nonce: e.context.nonce
}, null, 8, ["styles", "nonce"])) : Q("", !0);
}
const F = /* @__PURE__ */ I(W, [["render", D]]), L = E({
name: "live-edit-block-styles",
components: { InlinedStyles: A },
props: ["contextProvider", "id"],
data() {
return { TARGET: w };
},
computed: {
block() {
return U(this.contextProvider.content, this.id);
},
processedBlock() {
var t;
const e = this.block;
return e ? (t = e.repeat) != null && t.collection ? e : H({
block: e,
localState: this.contextProvider.localState,
rootState: this.contextProvider.rootState,
rootSetState: this.contextProvider.rootSetState,
context: this.contextProvider.context
}) : null;
},
canShowBlock() {
var e, s, t, o;
return C((e = this.processedBlock) == null ? void 0 : e.hide) ? !((s = this.processedBlock) != null && s.hide) : C((t = this.processedBlock) == null ? void 0 : t.show) ? (o = this.processedBlock) == null ? void 0 : o.show : !0;
},
css() {
var S, h, B, f, v, b, k;
const e = (S = this.processedBlock) == null ? void 0 : S.responsiveStyles, s = this.contextProvider.content, t = N(
((h = s == null ? void 0 : s.meta) == null ? void 0 : h.breakpoints) || {}
), o = !!((f = (B = s == null ? void 0 : s.meta) == null ? void 0 : B.breakpoints) != null && f.xsmall), p = e == null ? void 0 : e.large, i = e == null ? void 0 : e.medium, n = e == null ? void 0 : e.small, a = e == null ? void 0 : e.xsmall, r = (v = this.processedBlock) == null ? void 0 : v.id;
if (!r)
return "";
const d = p ? l({
className: r,
styles: p
}) : "", g = i ? l({
className: r,
styles: i,
mediaQuery: u(
"medium",
t
)
}) : "", P = n ? l({
className: r,
styles: n,
mediaQuery: u(
"small",
t
)
}) : "", T = a && o ? l({
className: r,
styles: a,
mediaQuery: u(
"xsmall",
t
)
}) : "", m = this.processedBlock.animations && this.processedBlock.animations.find((_) => _.trigger === "hover");
let c = "";
if (m) {
const _ = ((k = (b = m.steps) == null ? void 0 : b[1]) == null ? void 0 : k.styles) || {};
c = l({
className: `${r}:hover`,
styles: {
..._,
transition: `all ${m.duration}s ${j(
m.easing
)}`,
transitionDelay: m.delay ? `${m.delay}s` : "0s"
}
}) || "";
}
return [
d,
g,
P,
T,
c
].join(" ");
}
}
});
function X(e, s, t, o, p, i) {
const n = x("InlinedStyles");
return e.TARGET === "rsc" && e.css && e.canShowBlock ? (y(), $(n, {
key: 0,
id: "builderio-block",
styles: e.css,
nonce: e.contextProvider.nonce
}, null, 8, ["styles", "nonce"])) : Q("", !0);
}
const K = /* @__PURE__ */ I(L, [["render", X]]), M = E({
name: "style-wrapper",
components: {
BlockStyles: F,
LiveEditBlockStyles: K
},
props: ["block", "context"],
data() {
return { isClientEditing: !1, isHydrated: !1, TARGET: w };
},
inject: {
contextProvider: R.key
},
mounted() {
}
});
function V(e, s, t, o, p, i) {
const n = x("LiveEditBlockStyles"), a = x("BlockStyles");
return e.isHydrated ? (y(), z(G, { key: 0 }, [
e.TARGET === "rsc" && e.isClientEditing ? (y(), $(n, {
key: 0,
id: e.block.id,
contextProvider: e.contextProvider
}, null, 8, ["id", "contextProvider"])) : (y(), $(a, {
key: 1,
block: e.block,
context: e.context
}, null, 8, ["block", "context"]))
], 64)) : (y(), $(a, {
key: 1,
block: e.block,
context: e.context
}, null, 8, ["block", "context"]));
}
const Z = /* @__PURE__ */ I(M, [["render", V]]);
export {
Z as default
};