@builder.io/sdk-vue 0.0.2 → 0.0.3-0

package/packages/_vue2/dist/src/components/render-content/render-content.vue.d.ts

@@ -16,10 +16,10 @@ import { markMutable } from "../../functions/mark-mutable.js";
 declare const _sfc_main: {
     name: string;
     components: {
-        "render-content-styles": () => Promise<{
+        RenderContentStyles: () => Promise<{
             name: string;
             components: {
-                "render-inlined-styles": () => Promise<{
+                RenderInlinedStyles: () => Promise<{
                     name: string;
                     props: string[];
                     data: () => {
@@ -42,50 +42,90 @@ declare const _sfc_main: {
                 }): any;
             };
         }>;
-        "render-blocks": () => Promise<{
+        RenderBlocks: () => Promise<{
             name: string;
             components: {
-                "render-block": () => Promise<{
+                RenderBlock: () => Promise<{
                     name: string;
                     components: {
-                        "render-component": () => Promise<{
+                        RenderRepeatedBlock: () => Promise<{
                             name: string;
                             components: {
-                                "render-block": () => Promise<any>;
-                                "block-styles": () => Promise<{
+                                RenderBlock: () => Promise<any>;
+                            };
+                            props: string[];
+                            provide(): {
+                                BuilderContext: {
+                                    readonly content: any;
+                                    readonly state: any;
+                                    readonly context: any;
+                                    readonly apiKey: any;
+                                    readonly registeredComponents: any;
+                                    readonly inheritedStyles: any;
+                                };
+                            };
+                        }>;
+                        BlockStyles: () => Promise<{
+                            name: string;
+                            components: {
+                                RenderInlinedStyles: () => Promise<{
                                     name: string;
-                                    components: {
-                                        "render-inlined-styles": () => Promise<{
-                                            name: string;
-                                            props: string[];
-                                            data: () => {
-                                                TARGET: string;
-                                            };
-                                            computed: {
-                                                injectedStyleScript(): any;
-                                                tagName(): string;
-                                            };
-                                        }>;
-                                    };
                                     props: string[];
                                     data: () => {
                                         TARGET: string;
                                     };
                                     computed: {
-                                        useBlock(): any;
-                                        css(): any;
+                                        injectedStyleScript(): any;
+                                        tagName(): string;
                                     };
                                 }>;
                             };
                             props: string[];
                             data: () => {
-                                markPropsMutable: typeof import("../../functions/mark-mutable.js").markPropsMutable;
+                                TARGET: string;
+                            };
+                            computed: {
+                                useBlock(): any;
+                                css(): any;
                             };
                         }>;
-                        "render-repeated-block": () => Promise<{
+                        RenderComponentWithContext: () => Promise<{
                             name: string;
                             components: {
-                                "render-block": () => Promise<any>;
+                                RenderComponent: () => Promise<{
+                                    name: string;
+                                    components: {
+                                        RenderBlock: () => Promise<any>;
+                                        BlockStyles: () => Promise<{
+                                            name: string;
+                                            components: {
+                                                RenderInlinedStyles: () => Promise<{
+                                                    name: string;
+                                                    props: string[];
+                                                    data: () => {
+                                                        TARGET: string;
+                                                    };
+                                                    computed: {
+                                                        injectedStyleScript(): any;
+                                                        tagName(): string;
+                                                    };
+                                                }>;
+                                            };
+                                            props: string[];
+                                            data: () => {
+                                                TARGET: string;
+                                            };
+                                            computed: {
+                                                useBlock(): any;
+                                                css(): any;
+                                            };
+                                        }>;
+                                    };
+                                    props: string[];
+                                    data: () => {
+                                        markPropsMutable: typeof import("../../functions/mark-mutable.js").markPropsMutable;
+                                    };
+                                }>;
                             };
                             props: string[];
                             provide(): {
@@ -95,58 +135,150 @@ declare const _sfc_main: {
                                     readonly context: any;
                                     readonly apiKey: any;
                                     readonly registeredComponents: any;
+                                    readonly inheritedStyles: any;
                                 };
                             };
                         }>;
-                        "block-styles": () => Promise<{
+                        RenderComponent: () => Promise<{
                             name: string;
                             components: {
-                                "render-inlined-styles": () => Promise<{
+                                RenderBlock: () => Promise<any>;
+                                BlockStyles: () => Promise<{
                                     name: string;
+                                    components: {
+                                        RenderInlinedStyles: () => Promise<{
+                                            name: string;
+                                            props: string[];
+                                            data: () => {
+                                                TARGET: string;
+                                            };
+                                            computed: {
+                                                injectedStyleScript(): any;
+                                                tagName(): string;
+                                            };
+                                        }>;
+                                    };
                                     props: string[];
                                     data: () => {
                                         TARGET: string;
                                     };
                                     computed: {
-                                        injectedStyleScript(): any;
-                                        tagName(): string;
+                                        useBlock(): any;
+                                        css(): any;
                                     };
                                 }>;
                             };
                             props: string[];
                             data: () => {
-                                TARGET: string;
-                            };
-                            computed: {
-                                useBlock(): any;
-                                css(): any;
+                                markPropsMutable: typeof import("../../functions/mark-mutable.js").markPropsMutable;
                             };
                         }>;
                     };
                     props: string[];
                     data: () => {
                         isEmptyHtmlElement: (tagName: unknown) => boolean;
-                        TARGET: string;
                     };
                     computed: {
                         component(): any;
-                        componentInfo(): {} | undefined;
-                        componentRef(): any;
                         tagName(): any;
                         useBlock(): any;
                         attributes(): any;
-                        shouldWrap(): boolean;
-                        componentOptions(): any;
+                        shouldWrap(): any;
                         renderComponentProps(): any;
                         children(): any;
-                        childrenWithoutParentComponent(): (() => any) | never[];
+                        childrenWithoutParentComponent(): any;
                         repeatItemData(): any;
+                        inheritedTextStyles(): Partial<CSSStyleDeclaration>;
+                        childrenContext(): any;
+                        renderComponentTag(): (() => Promise<{
+                            name: string;
+                            components: {
+                                RenderComponent: () => Promise<{
+                                    name: string;
+                                    components: {
+                                        RenderBlock: () => Promise<any>;
+                                        BlockStyles: () => Promise<{
+                                            name: string;
+                                            components: {
+                                                RenderInlinedStyles: () => Promise<{
+                                                    name: string;
+                                                    props: string[];
+                                                    data: () => {
+                                                        TARGET: string;
+                                                    };
+                                                    computed: {
+                                                        injectedStyleScript(): any;
+                                                        tagName(): string;
+                                                    };
+                                                }>;
+                                            };
+                                            props: string[];
+                                            data: () => {
+                                                TARGET: string;
+                                            };
+                                            computed: {
+                                                useBlock(): any;
+                                                css(): any;
+                                            };
+                                        }>;
+                                    };
+                                    props: string[];
+                                    data: () => {
+                                        markPropsMutable: typeof import("../../functions/mark-mutable.js").markPropsMutable;
+                                    };
+                                }>;
+                            };
+                            props: string[];
+                            provide(): {
+                                BuilderContext: {
+                                    readonly content: any;
+                                    readonly state: any;
+                                    readonly context: any;
+                                    readonly apiKey: any;
+                                    readonly registeredComponents: any;
+                                    readonly inheritedStyles: any;
+                                };
+                            };
+                        }>) | (() => Promise<{
+                            name: string;
+                            components: {
+                                RenderBlock: () => Promise<any>;
+                                BlockStyles: () => Promise<{
+                                    name: string;
+                                    components: {
+                                        RenderInlinedStyles: () => Promise<{
+                                            name: string;
+                                            props: string[];
+                                            data: () => {
+                                                TARGET: string;
+                                            };
+                                            computed: {
+                                                injectedStyleScript(): any;
+                                                tagName(): string;
+                                            };
+                                        }>;
+                                    };
+                                    props: string[];
+                                    data: () => {
+                                        TARGET: string;
+                                    };
+                                    computed: {
+                                        useBlock(): any;
+                                        css(): any;
+                                    };
+                                }>;
+                            };
+                            props: string[];
+                            data: () => {
+                                markPropsMutable: typeof import("../../functions/mark-mutable.js").markPropsMutable;
+                            };
+                        }>) | "RenderComponent";
                     };
                 }>;
-                "block-styles": () => Promise<{
+                BlockStyles: () => Promise<{
                     name: string;
                     components: {
-                        "render-inlined-styles": () => Promise<{
+                        RenderInlinedStyles: () => Promise<{
                             name: string;
                             props: string[];
                             data: () => {

package/packages/_vue2/dist/src/context/types.d.ts

@@ -13,4 +13,5 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     apiKey: string | null;
     registeredComponents: RegisteredComponents;
+    inheritedStyles: Record<string, unknown>;
 }

package/packages/_vue2/dist/src/functions/extract-text-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export declare const extractTextStyles: (styles: Partial<CSSStyleDeclaration>) => Partial<CSSStyleDeclaration>;

package/packages/_vue2/dist/src/functions/fast-clone.d.ts

@@ -0,0 +1,4 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export declare const fastClone: <T extends object>(obj: T) => T;

package/packages/_vue2/dist/src/functions/get-react-native-block-styles.d.ts

@@ -0,0 +1,6 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getReactNativeBlockStyles({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}): CSSStyleDeclaration | Record<string, string | undefined>;

package/packages/_vue2/dist/src/functions/sanitize-react-native-block-styles.d.ts

@@ -0,0 +1,3 @@
+declare type Styles = Record<string, string | number>;
+export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
+export {};

package/packages/_vue2/dist/src/helpers/css.d.ts

@@ -1 +1,5 @@
-export declare const convertStyleMaptoCSS: (style: Partial<CSSStyleDeclaration>) => string;
+export declare const createCssClass: ({ mediaQuery, className, styles, }: {
+    mediaQuery?: string | undefined;
+    className: string;
+    styles: Partial<CSSStyleDeclaration>;
+}) => string;

package/packages/_vue2/dist/style.css

@@ -1 +1 @@
-.div-20351ewpue7[data-v-074f8045]{display:flex;align-items:stretch;line-height:normal}@media (max-width: 991px){.div-20351ewpue7[data-v-074f8045]{flex-direction:var(--flex-dir-tablet)}}@media (max-width: 639px){.div-20351ewpue7[data-v-074f8045]{flex-direction:var(--flex-dir)}}.div-20351ewpue7-2[data-v-074f8045]{flex-grow:1}@media (max-width: 991px){.div-20351ewpue7-2[data-v-074f8045]{width:var(--column-width-tablet)!important;margin-left:var(--column-margin-left-tablet)!important}}@media (max-width: 639px){.div-20351ewpue7-2[data-v-074f8045]{width:var(--column-width)!important;margin-left:var(--column-margin-left)!important}}.div-1ifnufbde19[data-v-9208289b]{position:relative}.img-1ifnufbde19[data-v-9208289b]{opacity:1;transition:opacity .2s ease-in-out;position:absolute;height:100%;width:100%;top:0px;left:0px}.div-1ifnufbde19-2[data-v-9208289b]{width:100%;pointer-events:none;font-size:0}.div-1ifnufbde19-3[data-v-9208289b]{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:0;left:0;width:100%;height:100%}.button-4wbls88y960[data-v-e55cf307]{all:unset}.div-23e8fqt91nf[data-v-69abb8b2]{display:flex;flex-direction:column;align-items:stretch}
+.div-29wpyomtntv[data-v-28f66c93]{display:flex;align-items:stretch;line-height:normal}@media (max-width: 991px){.div-29wpyomtntv[data-v-28f66c93]{flex-direction:var(--flex-dir-tablet)}}@media (max-width: 639px){.div-29wpyomtntv[data-v-28f66c93]{flex-direction:var(--flex-dir)}}.div-29wpyomtntv-2[data-v-28f66c93]{display:flex;flex-direction:column;align-items:stretch}@media (max-width: 991px){.div-29wpyomtntv-2[data-v-28f66c93]{width:var(--column-width-tablet)!important;margin-left:var(--column-margin-left-tablet)!important}}@media (max-width: 639px){.div-29wpyomtntv-2[data-v-28f66c93]{width:var(--column-width)!important;margin-left:var(--column-margin-left)!important}}.img-1j57pcfa436[data-v-c75d9535]{opacity:1;transition:opacity .2s ease-in-out;position:absolute;height:100%;width:100%;top:0px;left:0px}.div-1j57pcfa436[data-v-c75d9535]{width:100%;pointer-events:none;font-size:0}.div-1j57pcfa436-2[data-v-c75d9535]{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:0;left:0;width:100%;height:100%}.button-1pl23ac79ld[data-v-3eed583a]{all:unset}.div-23e8fqt91nf[data-v-713efc9e]{display:flex;flex-direction:column;align-items:stretch}

package/packages/_vue3/dist/block-styles.a49e972d.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),d=require("./index.4ab36c30.cjs"),u=require("./get-processed-block.f32aca5e.cjs"),y={small:{min:320,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},i=e=>`@media (max-width: ${y[e].max}px)`,p=e=>e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),S=e=>Object.entries(e).map(([s,t])=>{if(typeof t=="string")return`${p(s)}: ${t};`}).join(`
+`),a=({mediaQuery:e,className:n,styles:s})=>{const t=`.${n} {
+    ${S(s)}
+  }`;return e?`${e} {
+      ${t}
+    }`:t},f=()=>Promise.resolve().then(()=>require("./render-inlined-styles.5b918790.cjs")).then(e=>e.default).catch(e=>{throw console.error("Error while attempting to dynamically import component RenderInlinedStyles at ../render-inlined-styles.vue",e),e}),x={name:"block-styles",components:{RenderInlinedStyles:o.defineAsyncComponent(f)},props:["block","context"],data:()=>({TARGET:d.TARGET}),computed:{useBlock(){return u.getProcessedBlock({block:this.block,state:this.context.state,context:this.context.context,shouldEvaluateBindings:!0})},css(){const e=this.useBlock.responsiveStyles,n=e==null?void 0:e.large,s=e==null?void 0:e.medium,t=e==null?void 0:e.small,c=this.useBlock.id,l=n?a({className:c,styles:n}):"",r=s?a({className:c,styles:s,mediaQuery:i("medium")}):"",m=t?a({className:c,styles:t,mediaQuery:i("small")}):"";return[l,r,m].join(" ")}}};function g(e,n,s,t,c,l){const r=o.resolveComponent("render-inlined-styles");return e.TARGET!=="reactNative"&&l.css?(o.openBlock(),o.createBlock(r,{key:0,styles:l.css},null,8,["styles"])):o.createCommentVNode("",!0)}const h=d._export_sfc(x,[["render",g]]);exports.default=h;

package/packages/_vue3/dist/block-styles.a91eeb93.js

@@ -0,0 +1,83 @@
+import { defineAsyncComponent as m, resolveComponent as d, openBlock as u, createBlock as p, createCommentVNode as y } from "vue";
+import { T as S, _ as f } from "./index.06c0f5c8.js";
+import { g as x } from "./get-processed-block.0d08be3e.js";
+const h = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+}, a = (e) => `@media (max-width: ${h[e].max}px)`, k = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), C = (e) => Object.entries(e).map(([s, t]) => {
+  if (typeof t == "string")
+    return `${k(s)}: ${t};`;
+}).join(`
+`), c = ({
+  mediaQuery: e,
+  className: n,
+  styles: s
+}) => {
+  const t = `.${n} {
+    ${C(s)}
+  }`;
+  return e ? `${e} {
+      ${t}
+    }` : t;
+}, _ = () => import("./render-inlined-styles.9ac8320c.js").then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component RenderInlinedStyles at ../render-inlined-styles.vue",
+    e
+  ), e;
+}), g = {
+  name: "block-styles",
+  components: {
+    RenderInlinedStyles: m(_)
+  },
+  props: ["block", "context"],
+  data: () => ({ TARGET: S }),
+  computed: {
+    useBlock() {
+      return x({
+        block: this.block,
+        state: this.context.state,
+        context: this.context.context,
+        shouldEvaluateBindings: !0
+      });
+    },
+    css() {
+      const e = this.useBlock.responsiveStyles, n = e == null ? void 0 : e.large, s = e == null ? void 0 : e.medium, t = e == null ? void 0 : e.small, o = this.useBlock.id, l = n ? c({
+        className: o,
+        styles: n
+      }) : "", r = s ? c({
+        className: o,
+        styles: s,
+        mediaQuery: a("medium")
+      }) : "", i = t ? c({
+        className: o,
+        styles: t,
+        mediaQuery: a("small")
+      }) : "";
+      return [l, r, i].join(" ");
+    }
+  }
+};
+function $(e, n, s, t, o, l) {
+  const r = d("render-inlined-styles");
+  return e.TARGET !== "reactNative" && l.css ? (u(), p(r, {
+    key: 0,
+    styles: l.css
+  }, null, 8, ["styles"])) : y("", !0);
+}
+const v = /* @__PURE__ */ f(g, [["render", $]]);
+export {
+  v as default
+};

package/packages/_vue3/dist/get-processed-block.0d08be3e.js

@@ -0,0 +1,40 @@
+import { f as a, e as u } from "./index.06c0f5c8.js";
+const f = (n, r, i) => {
+  if (Object(n) !== n)
+    return n;
+  const e = Array.isArray(r) ? r : r.toString().match(/[^.[\]]+/g);
+  return e.slice(0, -1).reduce(
+    (t, s, o) => Object(t[s]) === t[s] ? t[s] : t[s] = Math.abs(Number(e[o + 1])) >> 0 === +e[o + 1] ? [] : {},
+    n
+  )[e[e.length - 1]] = i, n;
+};
+const d = ({
+  block: n,
+  context: r,
+  state: i
+}) => {
+  if (!n.bindings)
+    return n;
+  const e = a(n), t = {
+    ...e,
+    properties: { ...e.properties },
+    actions: { ...e.actions }
+  };
+  for (const s in n.bindings) {
+    const o = n.bindings[s], c = u({ code: o, state: i, context: r });
+    f(t, s, c);
+  }
+  return t;
+};
+function p({
+  block: n,
+  context: r,
+  shouldEvaluateBindings: i,
+  state: e
+}) {
+  const t = n;
+  return i ? d({ block: t, state: e, context: r }) : t;
+}
+export {
+  p as g
+};

package/packages/_vue3/dist/get-processed-block.f32aca5e.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("./index.4ab36c30.cjs"),d=(e,r,i)=>{if(Object(e)!==e)return e;const n=Array.isArray(r)?r:r.toString().match(/[^.[\]]+/g);return n.slice(0,-1).reduce((t,s,c)=>Object(t[s])===t[s]?t[s]:t[s]=Math.abs(Number(n[c+1]))>>0===+n[c+1]?[]:{},e)[n[n.length-1]]=i,e};const a=({block:e,context:r,state:i})=>{if(!e.bindings)return e;const n=o.fastClone(e),t={...n,properties:{...n.properties},actions:{...n.actions}};for(const s in e.bindings){const c=e.bindings[s],u=o.evaluate({code:c,state:i,context:r});d(t,s,u)}return t};function g({block:e,context:r,shouldEvaluateBindings:i,state:n}){const t=e;return i?a({block:t,state:n,context:r}):t}exports.getProcessedBlock=g;