@builder.io/sdk-vue/lib/browser/component-ref-8g4g9kyF.js

Builder.io SDK for Vue

import "./style.css";
import { defineComponent as b, defineAsyncComponent as u, resolveComponent as d, openBlock as o, createBlock as p, withCtx as i, renderSlot as m, createElementBlock as h, Fragment as w, resolveDynamicComponent as C, mergeProps as P, normalizeProps as B, renderList as E, createCommentVNode as k } from "vue";
import { T as y, i as $, _ as g, B as R, w as A } from "./index-EQdaCBDB.js";
import { a as v, g as S } from "./get-block-properties-dmm_DIxo.js";
const L = () => import("./awaiter-5WjT5CVy.js").then((e) => e.default).catch((e) => {
  throw console.error(
    "Error while attempting to dynamically import component Awaiter at ../../awaiter.vue",
    e
  ), e;
}), I = () => import("./live-edit-tO-V6Sv7.js").then((e) => e.default).catch((e) => {
  throw console.error(
    "Error while attempting to dynamically import component LiveEdit at ../../live-edit.vue",
    e
  ), e;
}), T = b({
  name: "interactive-element",
  components: {
    LiveEdit: u(I),
    Awaiter: u(L)
  },
  props: ["wrapperProps", "block", "includeBlockProps", "context", "Wrapper"],
  data() {
    return { forceRenderCount: 0, TARGET: y, isEditing: $ };
  },
  watch: {
    onUpdateHook0: { handler() {
    }, immediate: !0 }
  },
  computed: {
    attributes() {
      return this.includeBlockProps ? {
        ...v({
          block: this.block,
          context: this.context
        }),
        ...S({
          block: this.block,
          rootState: this.context.rootState,
          rootSetState: this.context.rootSetState,
          localState: this.context.localState,
          context: this.context.context
        })
      } : {};
    },
    targetWrapperProps() {
      return {
        ...this.wrapperProps,
        ...Object.keys(this.attributes).length > 0 ? {
          attributes: this.attributes
        } : {}
      };
    },
    onUpdateHook0() {
      var e, t;
      return {
        0: this.wrapperProps,
        1: (t = (e = this.block) == null ? void 0 : e.component) == null ? void 0 : t.options
      };
    }
  }
});
function O(e, t, s, l, a, c) {
  const n = d("Awaiter"), r = d("LiveEdit");
  return e.Wrapper.load ? (o(), p(n, {
    key: 0,
    load: e.Wrapper.load,
    fallback: e.Wrapper.fallback,
    props: e.wrapperProps,
    attributes: e.attributes
  }, {
    default: i(() => [
      m(e.$slots, "default")
    ]),
    _: 3
  }, 8, ["load", "fallback", "props", "attributes"])) : (o(), h(w, { key: 1 }, [
    e.TARGET === "rsc" && e.isEditing() ? (o(), p(r, {
      key: 0,
      Wrapper: e.Wrapper,
      id: e.block.id || "",
      attributes: e.attributes
    }, {
      default: i(() => [
        m(e.$slots, "default")
      ]),
      _: 3
    }, 8, ["Wrapper", "id", "attributes"])) : (o(), p(C(e.Wrapper), P({
      key: 1,
      attributes: e.attributes
    }, e.targetWrapperProps), {
      default: i(() => [
        m(e.$slots, "default")
      ]),
      _: 3
    }, 16, ["attributes"]))
  ], 64));
}
const f = /* @__PURE__ */ g(T, [["render", O]]), U = ({
  componentOptions: e,
  builderBlock: t,
  context: s,
  componentRef: l,
  includeBlockProps: a,
  isInteractive: c,
  contextValue: n
}) => {
  const r = {
    ...e,
    /**
     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
     * component itself directly. Otherwise, they are provided to the wrapper element.
     */
    ...a ? {
      attributes: v({
        block: t,
        context: n
      })
    } : {}
  };
  return c ? {
    Wrapper: l,
    block: t,
    context: s,
    wrapperProps: e,
    includeBlockProps: a
  } : r;
}, G = b({
  name: "component-ref",
  components: { Block: R, InteractiveElement: f },
  props: [
    "isInteractive",
    "componentRef",
    "componentOptions",
    "builderBlock",
    "context",
    "linkComponent",
    "includeBlockProps",
    "blockChildren",
    "registeredComponents"
  ],
  data() {
    return {
      shouldUpdate: !1,
      Wrapper: this.isInteractive ? A(f) : this.componentRef,
      getWrapperProps: U
    };
  }
});
function H(e, t, s, l, a, c) {
  const n = d("Block");
  return e.componentRef ? (o(), p(C(e.Wrapper), B(P(
    { key: 0 },
    e.getWrapperProps({
      componentOptions: e.componentOptions,
      builderBlock: e.builderBlock,
      context: e.context,
      componentRef: e.componentRef,
      linkComponent: e.linkComponent,
      includeBlockProps: e.includeBlockProps,
      isInteractive: e.isInteractive,
      contextValue: e.context
    })
  )), {
    default: i(() => [
      e.componentRef ? (o(!0), h(w, { key: 0 }, E(e.blockChildren, (r, W) => (o(), p(n, {
        key: r.id,
        block: r,
        context: e.context,
        registeredComponents: e.registeredComponents,
        linkComponent: e.linkComponent
      }, null, 8, ["block", "context", "registeredComponents", "linkComponent"]))), 128)) : k("", !0)
    ]),
    _: 1
  }, 16)) : k("", !0);
}
const F = /* @__PURE__ */ g(G, [["render", H]]);
export {
  F as default
};