@builder.io/sdk-vue 0.0.1-72 → 0.0.1-73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-72",
+  "version": "0.0.1-73",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },

package/vue2/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}

package/vue2/README.md

@@ -1,40 +0,0 @@
-# .
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```

package/vue2/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/vue2/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "@builder.io/sdk-vue-2",
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check build-only",
-    "preview": "vite preview --port 4173",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
-    "copy": "cp -r dist ../dist/vue-2"
-  },
-  "dependencies": {
-    "vue": "^2.7.7"
-  },
-  "devDependencies": {
-    "@types/node": "^16.11.45",
-    "@vitejs/plugin-legacy": "^2.0.0",
-    "@vitejs/plugin-vue2": "^1.1.2",
-    "@vue/tsconfig": "^0.1.3",
-    "npm-run-all": "^4.1.5",
-    "terser": "^5.14.2",
-    "typescript": "~4.7.4",
-    "vite": "^3.0.2",
-    "vue-tsc": "^0.38.8"
-  }
-}

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

@@ -1,52 +0,0 @@
-<template>
-  <a
-    v-bind="attributes"
-    role="button"
-    v-if="link"
-    :href="link"
-    :target="openLinkInNewTab ? '_blank' : undefined"
-  >
-    {{ text }}
-  </a>
-  <button v-bind="attributes" class="button-1be3j8m9ewb" 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-1be3j8m9ewb {
-  all: unset;
-}
-</style>

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

@@ -1,41 +0,0 @@
-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

@@ -1,131 +0,0 @@
-<template>
-  <div class="builder-columns div-20351ewpue7" :style="columnsCssVars">
-    <div
-      class="builder-column div-20351ewpue7-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')
-
-
-
-
-    import type { BuilderBlock } from '../../types/builder-block';
-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-20351ewpue7 {
-  display: flex;
-  align-items: stretch;
-  line-height: normal;
-}
-@media (max-width: 991px) {
-  .div-20351ewpue7 {
-    flex-direction: var(--flex-dir-tablet);
-  }
-}
-@media (max-width: 639px) {
-  .div-20351ewpue7 {
-    flex-direction: var(--flex-dir);
-  }
-}
-.div-20351ewpue7-2 {
-  flex-grow: 1;
-}
-@media (max-width: 991px) {
-  .div-20351ewpue7-2 {
-    width: var(--column-width-tablet) !important;
-    margin-left: var(--column-margin-left-tablet) !important;
-  }
-}
-@media (max-width: 639px) {
-  .div-20351ewpue7-2 {
-    width: var(--column-width) !important;
-    margin-left: var(--column-margin-left) !important;
-  }
-}
-</style>

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

@@ -1,242 +0,0 @@
-import { markSerializable } from "../util.js";
-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

@@ -1,31 +0,0 @@
-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
-};

package/vue2/src/blocks/custom-code/custom-code.vue

@@ -1,88 +0,0 @@
-<template>
-  <div
-    ref="elem"
-    :class="
-      _classStringToObject(
-        'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
-      )
-    "
-    v-html="code"
-  ></div>
-</template>
-<script lang="ts">
-
-
-
-
-
-
-
-    export interface CustomCodeProps {
-code: string;
-replaceNodes?: boolean;
-}
-
-    export default {
-      name: 'builder-custom-code',
-
-      props: ["replaceNodes","code"],
-
-      data: () => ({ scriptsInserted: [], scriptsRun: [],}),
-
-
-
-
-
-      mounted() {
-              this.findAndRunScripts()
-            },
-
-
-
-
-
-
-        methods: {  findAndRunScripts() {
-// TODO: Move this function to standalone one in '@builder.io/utils'
-if (this.$refs.elem && typeof window !== 'undefined') {
-  const scripts = this.$refs.elem.getElementsByTagName('script');
-
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
-
-    if (script.src) {
-      if (this.scriptsInserted.includes(script.src)) {
-        continue;
-      }
-
-      this.scriptsInserted.push(script.src);
-      const newScript = document.createElement('script');
-      newScript.async = true;
-      newScript.src = script.src;
-      document.head.appendChild(newScript);
-    } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
-      if (this.scriptsRun.includes(script.innerText)) {
-        continue;
-      }
-
-      try {
-        this.scriptsRun.push(script.innerText);
-        new Function(script.innerText)();
-      } catch (error) {
-        console.warn('`CustomCode`: Error running script:', error);
-      }
-    }
-  }
-}
-},_classStringToObject(str) {
-      const obj = {};
-      if (typeof str !== 'string') { return obj }
-      const classNames = str.trim().split(/\s+/);
-      for (const name of classNames) {
-        obj[name] = true;
-      }
-      return obj;
-    }  },
-
-    }
-</script>