@builder.io/sdk-vue 0.0.1-7 → 0.0.1-70

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+### 0.0.1-56
+
+- Feature: We now provide initial support for Vue 3.
+
+🧨 Breaking change: you must now explicitly import the Vue SDK version that you want (for Vue 2 or Vue 3) e.g.
+
+```ts
+// imports Vue 2 SDK
+import * as BuilderSDK from '@builder.io/sdk-vue/vue2';
+// fallback to Vue 2 SDK
+import * as BuilderSDK from '@builder.io/sdk-vue';
+
+// imports Vue 3 SDK
+import * as BuilderSDK from '@builder.io/sdk-vue/vue3';
+```
+
+### 0.0.1-54
+
+🐛 Fix: custom components were not rendering correctly
+🐛 Fix: Image component's `srcSet` was not being set correctly
+
+### 0.0.1-52
+
+🧨 Breaking change: the format of the `customComponents` prop has changed from `[{ component, info }]` to `[{ component, ...info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
+### 0.0.1-51
+
+⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated.
+To register your custom components in Builder, you must now provide a `customComponents` array to the `RenderContent` component containing `[{ component, info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
+### 0.0.1-50
+
+- feat: 🎸 export `isPreviewing()` (https://github.com/BuilderIO/builder/pull/951)
+- feat: 🎸 Add support for Symbols (https://github.com/BuilderIO/builder/pull/951)
+- feat: 🎸 Add support for Data Bindings https://github.com/BuilderIO/builder/pull/970
+
+- BREAKING CHANGE: 🧨 RenderContent must now be provided the `apiKey` as a prop (https://github.com/BuilderIO/builder/pull/951)
+
+### 0.0.1-49
+
+- Fix: show the "+ add block" button on empty pages https://github.com/BuilderIO/builder/pull/934
+- Add `getBuilderSearchParams` helper export to easily view current drafts on your production site. https://github.com/BuilderIO/builder/pull/883
+
+### 0.0.1-48
+
+Changes:
+
+- Adds support for Columns https://github.com/BuilderIO/builder/pull/717
+- Add preliminary support for Children within custom components https://github.com/BuilderIO/builder/pull/753
+- Seeds classnames to reduce variation in changes https://github.com/BuilderIO/builder/pull/703
+- Fixes `getAllContent` to traverse all symbols/references https://github.com/BuilderIO/builder/pull/718

package/README.md

@@ -0,0 +1,44 @@
+# Builder.io Vue 2.0 SDK (BETA)
+
+This is the 2.0 Vue SDK. It is currently in beta.
+
+NOTE: If you are looking for the stable 1.0 Vue SDK, you can find it [here](/packages/vue)
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Version Support
+
+Legend:
+
+- ✅: implemented
+- 🏗: currently in progress
+- ⚠️: not-yet implemented
+- N/A : does not apply
+
+| Platform | Support |
+| -------- | ------- |
+| Vue 2    | 🏗       |
+| Nuxt 2   | 🏗       |
+| Vue 3    | 🏗       |
+| Nuxt 3   | ✅      |
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-vue@dev
+```
+
+## Usage
+
+You can see examples of using Builder.io:
+
+- with Vue 2 [here](/examples/vue/vue-2/)
+- with Nuxt 2 [here](/examples/vue/nuxt-2/)
+- with Vue Storefront 2 [here](/examples/vue/vue-storefront-2)
+- with Vue 3 [here](/examples/vue/vue-3/)

package/nuxt.js

@@ -0,0 +1,24 @@
+import { join } from 'path';
+
+export default function () {
+  // Make sure components is enabled
+  if (!this.nuxt.options.components) {
+    throw new Error(
+      'Please set `components: true` inside `nuxt.config` and ensure using `nuxt >= 2.13.0`'
+    );
+  }
+
+  this.nuxt.hook('components:dirs', (dirs) => {
+    // Add ./components dir to the list
+    dirs.push({
+      path: join(__dirname, 'vue2/src/components'),
+      prefix: 'builder',
+    });
+    // Add ./blocks dir to the list
+    dirs.push({
+      path: join(__dirname, 'vue2/src/blocks'),
+      prefix: 'builder',
+      pattern: '**/index.*',
+    });
+  });
+}

package/package.json

@@ -1,9 +1,35 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-7",
-  "dependencies": {},
-  "main": "src/index.js",
+  "version": "0.0.1-70",
+  "dependencies": {
+    "node-fetch": "^2.6.1"
+  },
+  "main": "./vue2/src/index.js",
+  "module": "./vue2/src/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./vue2/src/index.js",
+      "require": "./vue2/src/index.js"
+    },
+    "./vue2": {
+      "import": "./vue2/src/index.js",
+      "require": "./vue2/src/index.js"
+    },
+    "./vue3": {
+      "import": "./vue3/src/index.js",
+      "require": "./vue3/src/index.js"
+    },
+    "./nuxt": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    },
+    "./nuxt2": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    }
+  },
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
@@ -11,6 +37,6 @@
     "vue": ">= 2"
   },
   "devDependencies": {
-    "vue": "^2.6.12"
+    "vue": "^2.7"
   }
 }

package/vue2/src/blocks/button/button.vue

@@ -0,0 +1,52 @@
+<template>
+  <a
+    v-bind="attributes"
+    role="button"
+    v-if="link"
+    :href="link"
+    :target="openLinkInNewTab ? '_blank' : undefined"
+  >
+    {{ text }}
+  </a>
+  <button v-bind="attributes" class="button-16nol0lwi20" v-else>
+    {{ text }}
+  </button>
+</template>
+<script lang="ts">
+
+
+
+
+
+
+
+    export interface ButtonProps {
+attributes?: any;
+text?: string;
+link?: string;
+openLinkInNewTab?: boolean;
+}
+
+    export default {
+      name: 'builder-button',
+
+      props: ["attributes","text","link","openLinkInNewTab"],
+
+
+
+
+
+
+
+
+
+
+
+
+    }
+</script>
+<style scoped>
+.button-16nol0lwi20 {
+  all: unset;
+}
+</style>

package/vue2/src/blocks/button/component-info.js

@@ -0,0 +1,41 @@
+const componentInfo = {
+  name: "Core:Button",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/vue2/src/blocks/columns/columns.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="builder-columns div-2fnk003dqad" :style="columnsCssVars">
+    <div
+      class="builder-column div-2fnk003dqad-2"
+      v-for="(column, index) in columns"
+      :style="{
+        width: getColumnCssWidth(index),
+        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+        ...columnCssVars,
+      }"
+      :key="index"
+    >
+      <render-blocks
+        :blocks="column.blocks"
+        :path="`component.options.columns.${index}.blocks`"
+        :parent="builderBlock.id"
+      ></render-blocks>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+
+
+  const RenderBlocks = () => import('../../components/render-blocks.vue')
+
+
+
+
+    type Column = {
+blocks: any; // TODO: Implement this when support for dynamic CSS lands
+
+width?: number;
+};
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
+export interface ColumnProps {
+columns?: Column[];
+builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
+
+space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+reverseColumnsWhenStacked?: boolean;
+}
+
+    export default {
+      name: 'builder-columns',
+      components: { 'render-blocks': RenderBlocks },
+      props: ["space","columns","stackColumnsAt","reverseColumnsWhenStacked","builderBlock"],
+
+
+
+
+
+
+
+
+
+
+
+        computed: {  columnsCssVars() {
+const flexDir = this.stackColumnsAt === 'never' ? 'inherit' : this.reverseColumnsWhenStacked ? 'column-reverse' : 'column';
+return {
+  '--flex-dir': flexDir,
+  '--flex-dir-tablet': this.maybeApplyForTablet(flexDir)
+};
+},  columnCssVars() {
+const width = '100%';
+const marginLeft = '0';
+return {
+  '--column-width': width,
+  '--column-margin-left': marginLeft,
+  '--column-width-tablet': this.maybeApplyForTablet(width),
+  '--column-margin-left-tablet': this.maybeApplyForTablet(marginLeft)
+};
+},},
+
+
+        methods: {  getGutterSize() {
+return typeof this.space === 'number' ? this.space || 0 : 20;
+},  getColumns() {
+return this.columns || [];
+},  getWidth(index) {
+const columns = this.getColumns();
+return columns[index]?.width || 100 / columns.length;
+},  getColumnCssWidth(index) {
+const columns = this.getColumns();
+const gutterSize = this.getGutterSize();
+const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+},  maybeApplyForTablet(prop) {
+const _stackColumnsAt = this.stackColumnsAt || 'tablet';
+
+return _stackColumnsAt === 'tablet' ? prop : 'inherit';
+},},
+
+    }
+</script>
+<style scoped>
+.div-2fnk003dqad {
+  display: flex;
+  align-items: stretch;
+  line-height: normal;
+}
+@media (max-width: 991px) {
+  .div-2fnk003dqad {
+    flex-direction: var(--flex-dir-tablet);
+  }
+}
+@media (max-width: 639px) {
+  .div-2fnk003dqad {
+    flex-direction: var(--flex-dir);
+  }
+}
+.div-2fnk003dqad-2 {
+  flex-grow: 1;
+}
+@media (max-width: 991px) {
+  .div-2fnk003dqad-2 {
+    width: var(--column-width-tablet) !important;
+    margin-left: var(--column-margin-left-tablet) !important;
+  }
+}
+@media (max-width: 639px) {
+  .div-2fnk003dqad-2 {
+    width: var(--column-width) !important;
+    margin-left: var(--column-margin-left) !important;
+  }
+}
+</style>

package/vue2/src/blocks/columns/component-info.js

@@ -0,0 +1,242 @@
+import { markSerializable } from "../util";
+const componentInfo = {
+  name: "Columns",
+  builtIn: true,
+  inputs: [
+    {
+      name: "columns",
+      type: "array",
+      broadcast: true,
+      subFields: [
+        {
+          name: "blocks",
+          type: "array",
+          hideFromUI: true,
+          defaultValue: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: "width",
+          type: "number",
+          hideFromUI: true,
+          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        },
+        {
+          name: "link",
+          type: "url",
+          helperText: "Optionally set a url that clicking this column will link to"
+        }
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      onChange: markSerializable((options) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      })
+    },
+    {
+      name: "space",
+      type: "number",
+      defaultValue: 20,
+      helperText: "Size of gap between columns",
+      advanced: true
+    },
+    {
+      name: "stackColumnsAt",
+      type: "string",
+      defaultValue: "tablet",
+      helperText: "Convert horizontal columns to vertical at what device size",
+      enum: ["tablet", "mobile", "never"],
+      advanced: true
+    },
+    {
+      name: "reverseColumnsWhenStacked",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "When stacking columns for mobile devices, reverse the ordering",
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/vue2/src/blocks/custom-code/component-info.js

@@ -0,0 +1,31 @@
+const componentInfo = {
+  name: "Custom Code",
+  static: true,
+  builtIn: true,
+  requiredPermissions: ["editCode"],
+  inputs: [
+    {
+      name: "code",
+      type: "html",
+      required: true,
+      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+      code: true
+    },
+    {
+      name: "replaceNodes",
+      type: "boolean",
+      helperText: "Preserve server rendered dom nodes",
+      advanced: true
+    },
+    {
+      name: "scriptsClientOnly",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};