@builder.io/sdk-vue/lib/node/block-styles-8zkB2lOv.js

Builder.io SDK for Vue

import { defineComponent as _, resolveComponent as x, openBlock as T, createBlock as w, createCommentVNode as I } from "vue";
import { _ as N, g as Q, c as a, a as m, b as z, d as A } from "./index-HR8y_fPw.js";
import { T as D, e as C } from "./should-force-browser-runtime-in-node-ikxWrCvn.js";
const E = _({
  name: "block-styles",
  components: { InlinedStyles: N },
  props: ["block", "context"],
  data() {
    return { TARGET: D };
  },
  computed: {
    canShowBlock() {
      const e = this.block;
      return C(e.hide) ? !e.hide : C(e.show) ? e.show : !0;
    },
    css() {
      var S, k, h, f, b;
      const e = this.block, s = e.responsiveStyles, t = this.context.content, l = Q(
        ((S = t == null ? void 0 : t.meta) == null ? void 0 : S.breakpoints) || {}
      ), d = !!((h = (k = t == null ? void 0 : t.meta) == null ? void 0 : k.breakpoints) != null && h.xsmall), c = s == null ? void 0 : s.large, r = s == null ? void 0 : s.medium, p = s == null ? void 0 : s.small, y = s == null ? void 0 : s.xsmall, o = e.id;
      if (!o)
        return "";
      const B = c ? a({
        className: o,
        styles: c
      }) : "", g = r ? a({
        className: o,
        styles: r,
        mediaQuery: m(
          "medium",
          l
        )
      }) : "", $ = p ? a({
        className: o,
        styles: p,
        mediaQuery: m(
          "small",
          l
        )
      }) : "", v = y && d ? a({
        className: o,
        styles: y,
        mediaQuery: m(
          "xsmall",
          l
        )
      }) : "", n = e.animations && e.animations.find((i) => i.trigger === "hover");
      let u = "";
      if (n) {
        const i = ((b = (f = n.steps) == null ? void 0 : f[1]) == null ? void 0 : b.styles) || {};
        u = a({
          className: `${o}:hover`,
          styles: {
            ...i,
            transition: `all ${n.duration}s ${z(
              n.easing
            )}`,
            transitionDelay: n.delay ? `${n.delay}s` : "0s"
          }
        }) || "";
      }
      return [
        B,
        g,
        $,
        v,
        u
      ].join(" ");
    }
  }
});
function F(e, s, t, l, d, c) {
  const r = x("InlinedStyles");
  return e.TARGET !== "reactNative" && e.css && e.canShowBlock ? (T(), w(r, {
    key: 0,
    id: "builderio-block",
    styles: e.css,
    nonce: e.context.nonce
  }, null, 8, ["styles", "nonce"])) : I("", !0);
}
const j = /* @__PURE__ */ A(E, [["render", F]]);
export {
  j as default
};