@builder.io/sdk-vue 0.5.9 → 0.6.1-0

package/vue3/src/blocks/section/section.vue

@@ -0,0 +1,47 @@
+<template>
+  <section
+    :style="{
+      width: '100%',
+      alignSelf: 'stretch',
+      flexGrow: 1,
+      boxSizing: 'border-box',
+      maxWidth: maxWidth || 1200,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    }"
+    v-bind="filterAttrs(attributes, 'v-on:', false)"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  >
+    <slot />
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface SectionProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+  builderBlock?: any;
+}
+
+export default defineComponent({
+  name: "builder-section-component",
+
+  props: ["attributes", "maxWidth"],
+
+  data() {
+    return { filterAttrs };
+  },
+});
+</script>

package/vue3/src/blocks/select/component-info.ts

@@ -0,0 +1,44 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Select',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
+  defaultStyles: {
+    alignSelf: 'flex-start'
+  },
+  inputs: [{
+    name: 'options',
+    type: 'list',
+    required: true,
+    subFields: [{
+      name: 'value',
+      type: 'text',
+      required: true
+    }, {
+      name: 'name',
+      type: 'text'
+    }],
+    defaultValue: [{
+      value: 'option 1'
+    }, {
+      value: 'option 2'
+    }]
+  }, {
+    name: 'name',
+    type: 'string',
+    required: true,
+    helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: 'defaultValue',
+    type: 'string'
+  }, {
+    name: 'value',
+    type: 'string',
+    advanced: true
+  }, {
+    name: 'required',
+    type: 'boolean',
+    defaultValue: false
+  }],
+  static: true,
+  noWrap: true
+}

package/vue3/src/blocks/select/select.vue

@@ -0,0 +1,46 @@
+<template>
+  <select
+    :value="value"
+    :key="isEditing() && defaultValue ? defaultValue : 'default-key'"
+    :defaultValue="defaultValue"
+    :name="name"
+    v-bind="filterAttrs(attributes, 'v-on:', false)"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  >
+    <template :key="index" v-for="(option, index) in options">
+      <option :value="option.value">{{ option.name || option.value }}</option>
+    </template>
+  </select>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { isEditing } from "../../functions/is-editing.js";
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface FormSelectProps {
+  options?: {
+    name?: string;
+    value: string;
+  }[];
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+}
+
+export default defineComponent({
+  name: "builder-select-component",
+
+  props: ["attributes", "value", "defaultValue", "name", "options"],
+
+  data() {
+    return { isEditing, filterAttrs };
+  },
+});
+</script>

package/vue3/src/blocks/submit-button/component-info.ts

@@ -0,0 +1,27 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Form:SubmitButton',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
+  defaultStyles: {
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#3898EC',
+    color: 'white',
+    borderRadius: '4px',
+    cursor: 'pointer'
+  },
+  inputs: [{
+    name: 'text',
+    type: 'text',
+    defaultValue: 'Click me'
+  }],
+  static: true,
+  noWrap: true
+  // TODO: optional children? maybe as optional form input
+  // that only shows if advanced setting is flipped
+  // TODO: defaultChildren
+  // canHaveChildren: true,
+}

package/vue3/src/blocks/submit-button/submit-button.vue

@@ -0,0 +1,34 @@
+<template>
+  <button
+    type="submit"
+    v-bind="filterAttrs(attributes, 'v-on:', false)"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+}
+
+export default defineComponent({
+  name: "builder-submit-button",
+
+  props: ["attributes", "text"],
+
+  data() {
+    return { filterAttrs };
+  },
+});
+</script>

package/vue3/src/blocks/symbol/component-info.ts

@@ -0,0 +1,35 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Symbol',
+  noWrap: true,
+  static: true,
+  isRSC: true,
+  inputs: [{
+    name: 'symbol',
+    type: 'uiSymbol'
+  }, {
+    name: 'dataOnly',
+    helperText: "Make this a data symbol that doesn't display any UI",
+    type: 'boolean',
+    defaultValue: false,
+    advanced: true,
+    hideFromUI: true
+  }, {
+    name: 'inheritState',
+    helperText: 'Inherit the parent component state and data',
+    type: 'boolean',
+    defaultValue: false,
+    advanced: true
+  }, {
+    name: 'renderToLiquid',
+    helperText: 'Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting',
+    type: 'boolean',
+    defaultValue: false,
+    advanced: true,
+    hideFromUI: true
+  }, {
+    name: 'useChildren',
+    hideFromUI: true,
+    type: 'boolean'
+  }]
+}

package/vue3/src/blocks/symbol/symbol.helpers.ts

@@ -0,0 +1,47 @@
+import type { BuilderContextInterface } from '../../context/types.js';
+import { logger } from '../../helpers/logger.js';
+import { fetchOneEntry } from '../../index.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+export interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: BuilderContent;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+export const fetchSymbolContent = async ({
+  builderContextValue,
+  symbol
+}: {
+  symbol: SymbolInfo | undefined;
+  builderContextValue: BuilderContextInterface;
+}) => {
+  /**
+   * If:
+   * - we have a symbol prop
+   * - yet it does not have any content
+   * - and we have not already stored content from before
+   * - and it has a model name
+   *
+   * then we want to re-fetch the symbol content.
+   */
+  if (symbol?.model &&
+  // This is a hack, we should not need to check for this, but it is needed for Svelte.
+  builderContextValue?.apiKey) {
+    return fetchOneEntry({
+      model: symbol.model,
+      apiKey: builderContextValue.apiKey,
+      apiVersion: builderContextValue.apiVersion,
+      ...(symbol?.entry && {
+        query: {
+          id: symbol.entry
+        }
+      })
+    }).catch(err => {
+      logger.error('Could not fetch symbol content: ', err);
+      return undefined;
+    });
+  }
+  return undefined;
+}

package/vue3/src/blocks/symbol/symbol.vue

@@ -0,0 +1,134 @@
+<template>
+  <div
+    :class="_classStringToObject(className)"
+    v-bind="{ ...filterAttrs(attributes, 'v-on:', false), ...{} }"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  >
+    <content-variants
+      :__isNestedRender="true"
+      :apiVersion="builderContext.apiVersion"
+      :apiKey="builderContext.apiKey"
+      :context="builderContext.context"
+      :customComponents="Object.values(builderComponents)"
+      :data="{
+        ...symbol?.data,
+        ...builderContext.localState,
+        ...contentToUse?.data?.state,
+      }"
+      :model="symbol?.model"
+      :content="contentToUse"
+    ></content-variants>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import ContentVariants from "../../components/content-variants/content-variants.vue";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type {
+  BuilderComponentsProp,
+  PropsWithBuilderData,
+} from "../../types/builder-props.js";
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+import { fetchSymbolContent } from "./symbol.helpers.js";
+import type { Nullable } from "../../types/typescript.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: BuilderContent;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface SymbolProps extends BuilderComponentsProp {
+  symbol?: SymbolInfo;
+  dataOnly?: boolean;
+  dynamic?: boolean;
+  attributes?: any;
+  inheritState?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-symbol",
+  components: { ContentVariants: ContentVariants },
+  props: [
+    "js",
+    "attributes",
+    "symbol",
+    "dynamic",
+    "builderContext",
+    "builderComponents",
+  ],
+
+  data() {
+    return { contentToUse: this.symbol?.content, filterAttrs };
+  },
+
+  mounted() {
+    this.setContent();
+  },
+
+  watch: {
+    onUpdateHook0: {
+      handler() {
+        this.setContent();
+      },
+      immediate: true,
+    },
+  },
+
+  computed: {
+    className() {
+      return [
+        ...Object.keys(this.attributes.class),
+        "builder-symbol",
+        this.symbol?.inline ? "builder-inline-symbol" : undefined,
+        this.symbol?.dynamic || this.dynamic
+          ? "builder-dynamic-symbol"
+          : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    },
+    onUpdateHook0() {
+      return {
+        0: this.symbol,
+      };
+    },
+  },
+
+  methods: {
+    setContent() {
+      if (this.contentToUse) return;
+      fetchSymbolContent({
+        symbol: this.symbol,
+        builderContextValue: this.builderContext,
+      }).then((newContent) => {
+        if (newContent) {
+          this.contentToUse = newContent;
+        }
+      });
+    },
+    _classStringToObject(str: string) {
+      const obj: Record<string, boolean> = {};
+      if (typeof str !== "string") {
+        return obj;
+      }
+      const classNames = str.trim().split(/\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    },
+  },
+});
+</script>

package/vue3/src/blocks/text/component-info.ts

@@ -0,0 +1,20 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Text',
+  static: true,
+  isRSC: true,
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+  inputs: [{
+    name: 'text',
+    type: 'html',
+    required: true,
+    autoFocus: true,
+    bubble: true,
+    defaultValue: 'Enter some text...'
+  }],
+  defaultStyles: {
+    lineHeight: 'normal',
+    height: 'auto',
+    textAlign: 'center'
+  }
+}

package/vue3/src/blocks/text/text.vue

@@ -0,0 +1,23 @@
+<template>
+  <span
+    class="builder-text"
+    v-html="text?.toString() || ''"
+    :style="{
+      outline: 'none',
+    }"
+  ></span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export interface TextProps {
+  text?: string;
+}
+
+export default defineComponent({
+  name: "builder-text",
+
+  props: ["text"],
+});
+</script>

package/vue3/src/blocks/textarea/component-info.ts

@@ -0,0 +1,38 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Form:TextArea',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
+  inputs: [{
+    advanced: true,
+    name: 'value',
+    type: 'string'
+  }, {
+    name: 'name',
+    type: 'string',
+    required: true,
+    helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: 'defaultValue',
+    type: 'string'
+  }, {
+    name: 'placeholder',
+    type: 'string',
+    defaultValue: 'Hello there'
+  }, {
+    name: 'required',
+    type: 'boolean',
+    defaultValue: false
+  }],
+  defaultStyles: {
+    paddingTop: '10px',
+    paddingBottom: '10px',
+    paddingLeft: '10px',
+    paddingRight: '10px',
+    borderRadius: '3px',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: '#ccc'
+  },
+  static: true,
+  noWrap: true
+}

package/vue3/src/blocks/textarea/textarea.vue

@@ -0,0 +1,38 @@
+<template>
+  <textarea
+    :placeholder="placeholder"
+    :name="name"
+    :value="value"
+    :defaultValue="defaultValue"
+    v-bind="filterAttrs(attributes, 'v-on:', false)"
+    v-on="filterAttrs(attributes, 'v-on:', true)"
+  ></textarea>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+export interface TextareaProps {
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+export default defineComponent({
+  name: "builder-textarea",
+
+  props: ["attributes", "placeholder", "name", "value", "defaultValue"],
+
+  data() {
+    return { filterAttrs };
+  },
+});
+</script>

package/vue3/src/blocks/video/component-info.ts

@@ -0,0 +1,83 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Video',
+  canHaveChildren: true,
+  defaultStyles: {
+    minHeight: '20px',
+    minWidth: '20px'
+  },
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+  inputs: [{
+    name: 'video',
+    type: 'file',
+    allowedFileTypes: ['mp4'],
+    bubble: true,
+    defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+    required: true
+  }, {
+    name: 'posterImage',
+    type: 'file',
+    allowedFileTypes: ['jpeg', 'png'],
+    helperText: 'Image to show before the video plays'
+  }, {
+    name: 'autoPlay',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'controls',
+    type: 'boolean',
+    defaultValue: false
+  }, {
+    name: 'muted',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'loop',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'playsInline',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'fit',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: ['contain', 'cover', 'fill', 'auto']
+  }, {
+    name: 'preload',
+    type: 'text',
+    defaultValue: 'metadata',
+    enum: ['auto', 'metadata', 'none']
+  }, {
+    name: 'fitContent',
+    type: 'boolean',
+    helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: 'position',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'height',
+    type: 'number',
+    advanced: true
+  }, {
+    name: 'width',
+    type: 'number',
+    advanced: true
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    advanced: true,
+    defaultValue: 0.7004048582995948
+  }, {
+    name: 'lazyLoad',
+    type: 'boolean',
+    helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+    defaultValue: true,
+    advanced: true
+  }]
+}