@builder.io/sdk-vue 0.0.1-57 → 0.0.1-58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +7 -15
  2. package/package.json +1 -1
  3. package/vue2/src/blocks/form/form.vue +2 -2
  4. package/vue2/src/blocks/image/image.vue +9 -11
  5. package/vue2/src/components/render-block/block-styles.vue +1 -1
  6. package/vue3/src/blocks/columns/columns.vue +8 -8
  7. package/vue3/src/blocks/form/form.vue +2 -2
  8. package/vue3/src/blocks/image/image.vue +9 -11
  9. package/vue3/src/components/render-block/block-styles.vue +3 -1
  10. package/vue3/src/components/render-blocks.vue +2 -2
  11. package/vue2/src/components/error-boundary.vue +0 -6
  12. package/vue3/src/components/error-boundary.vue +0 -8
package/README.md CHANGED
@@ -25,8 +25,8 @@ Legend:
25
25
  | -------- | ------- |
26
26
  | Vue 2 | 🏗 |
27
27
  | Nuxt 2 | 🏗 |
28
- | Vue 3 | ⚠️ |
29
- | Nuxt 3 | ⚠️ |
28
+ | Vue 3 | 🏗 |
29
+ | Nuxt 3 | ✅ |
30
30
 
31
31
  ## Getting Started
32
32
 
@@ -34,19 +34,11 @@ Legend:
34
34
  npm install @builder.io/sdk-vue@dev
35
35
  ```
36
36
 
37
- ## Usage with Nuxt
38
-
39
- > Requires nuxt >= @2.15
40
-
41
- Add to your `nuxt.config.js`:
42
-
43
- ```js
44
- buildModules: ['@builder.io/sdk-vue/nuxt'];
45
- ```
46
-
47
- Then register built in and custom components as seen [here](/examples/vue/nuxt-2/scripts/register-builder-components.js)
37
+ ## Usage
48
38
 
49
39
  You can see examples of using Builder.io:
50
40
 
51
- - with Nuxt [here](/examples/vue/nuxt-2/)
52
- - with Vue Storefront [here](/examples/vue/vue-storefront-2)
41
+ - with Vue 2 [here](/examples/vue/vue-2/)
42
+ - with Nuxt 2 [here](/examples/vue/nuxt-2/)
43
+ - with Vue Storefront 2 [here](/examples/vue/vue-storefront-2)
44
+ - with Vue 3 [here](/examples/vue/vue-3/)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-vue",
3
3
  "description": "Builder.io SDK for Vue",
4
- "version": "0.0.1-57",
4
+ "version": "0.0.1-58",
5
5
  "dependencies": {
6
6
  "node-fetch": "^2.6.1"
7
7
  },
package/vue2/src/blocks/form/form.vue CHANGED
@@ -27,7 +27,7 @@
27
27
  ></builder-blocks>
28
28
 
29
29
  <pre
30
- class="builder-form-error-text pre-20351ewpue7"
30
+ class="builder-form-error-text pre-4wbls88y960"
31
31
  v-if="submissionState === 'error' && responseData"
32
32
  >
33
33
  {{ JSON.stringify(responseData, null, 2) }}
@@ -300,7 +300,7 @@ export default {
300
300
  };
301
301
  </script>
302
302
  <style scoped>
303
- .pre-20351ewpue7 {
303
+ .pre-4wbls88y960 {
304
304
  padding: 10px;
305
305
  color: red;
306
306
  text-align: center;
package/vue2/src/blocks/image/image.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="div-29wpyomtntv">
2
+ <div class="div-1pl23ac79ld">
3
3
  <picture>
4
4
  <img
5
5
  loading="lazy"
@@ -13,7 +13,7 @@
13
13
  _classStringToObject(
14
14
  'builder-image' +
15
15
  (this.className ? ' ' + this.className : '') +
16
- 'img-29wpyomtntv'
16
+ 'img-1pl23ac79ld'
17
17
  )
18
18
  "
19
19
  :src="image"
@@ -24,18 +24,16 @@
24
24
  </picture>
25
25
 
26
26
  <div
27
- class="builder-image-sizer div-29wpyomtntv-2"
27
+ class="builder-image-sizer div-1pl23ac79ld-2"
28
28
  v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
29
29
  :style="{
30
30
  paddingTop: aspectRatio * 100 + '%',
31
31
  }"
32
- >
33
- {{ " " }}
34
- </div>
32
+ ></div>
35
33
 
36
34
  <slot></slot>
37
35
 
38
- <div class="div-29wpyomtntv-3" v-if="!fitContent">
36
+ <div class="div-1pl23ac79ld-3" v-if="!fitContent">
39
37
  <slot></slot>
40
38
  </div>
41
39
  </div>
@@ -72,10 +70,10 @@ export default {
72
70
  };
73
71
  </script>
74
72
  <style scoped>
75
- .div-29wpyomtntv {
73
+ .div-1pl23ac79ld {
76
74
  position: relative;
77
75
  }
78
- .img-29wpyomtntv {
76
+ .img-1pl23ac79ld {
79
77
  opacity: 1;
80
78
  transition: opacity 0.2s ease-in-out;
81
79
  position: absolute;
@@ -84,12 +82,12 @@ export default {
84
82
  top: 0px;
85
83
  left: 0px;
86
84
  }
87
- .div-29wpyomtntv-2 {
85
+ .div-1pl23ac79ld-2 {
88
86
  width: 100%;
89
87
  pointer-events: none;
90
88
  font-size: 0;
91
89
  }
92
- .div-29wpyomtntv-3 {
90
+ .div-1pl23ac79ld-3 {
93
91
  display: flex;
94
92
  flex-direction: column;
95
93
  align-items: stretch;
package/vue2/src/components/render-block/block-styles.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <render-inlined-styles
3
- v-if="TARGET === 'vue' || TARGET === 'svelte'"
3
+ v-if="TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte'"
4
4
  :styles="css"
5
5
  ></render-inlined-styles>
6
6
  </template>
package/vue3/src/blocks/columns/columns.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
- <div class="builder-columns div-4o9pb21oca6" :style="columnsCssVars">
2
+ <div class="builder-columns div-1hjwvu3r5mj" :style="columnsCssVars">
3
3
  <template :key="index" v-for="(column, index) in columns">
4
4
  <div
5
- class="builder-column div-4o9pb21oca6-2"
5
+ class="builder-column div-1hjwvu3r5mj-2"
6
6
  :style="{
7
7
  width: getColumnCssWidth(index),
8
8
  marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -76,32 +76,32 @@ export default {
76
76
  };
77
77
  </script>
78
78
  <style scoped>
79
- .div-4o9pb21oca6 {
79
+ .div-1hjwvu3r5mj {
80
80
  display: flex;
81
81
  align-items: stretch;
82
82
  line-height: normal;
83
83
  }
84
84
  @media (max-width: 999px) {
85
- .div-4o9pb21oca6 {
85
+ .div-1hjwvu3r5mj {
86
86
  flex-direction: var(--flex-dir-tablet);
87
87
  }
88
88
  }
89
89
  @media (max-width: 639px) {
90
- .div-4o9pb21oca6 {
90
+ .div-1hjwvu3r5mj {
91
91
  flex-direction: var(--flex-dir);
92
92
  }
93
93
  }
94
- .div-4o9pb21oca6-2 {
94
+ .div-1hjwvu3r5mj-2 {
95
95
  flex-grow: 1;
96
96
  }
97
97
  @media (max-width: 999px) {
98
- .div-4o9pb21oca6-2 {
98
+ .div-1hjwvu3r5mj-2 {
99
99
  width: var(--column-width-tablet) !important;
100
100
  margin-left: var(--column-margin-left-tablet) !important;
101
101
  }
102
102
  }
103
103
  @media (max-width: 639px) {
104
- .div-4o9pb21oca6-2 {
104
+ .div-1hjwvu3r5mj-2 {
105
105
  width: var(--column-width) !important;
106
106
  margin-left: var(--column-margin-left) !important;
107
107
  }
package/vue3/src/blocks/form/form.vue CHANGED
@@ -29,7 +29,7 @@
29
29
  </template>
30
30
 
31
31
  <template v-if="submissionState === 'error' && responseData">
32
- <pre class="builder-form-error-text pre-2btisl9m7v3">
32
+ <pre class="builder-form-error-text pre-1yj9n7yt24z">
33
33
  {{ JSON.stringify(responseData, null, 2) }}
34
34
  </pre>
35
35
  </template>
@@ -306,7 +306,7 @@ export default {
306
306
  };
307
307
  </script>
308
308
  <style scoped>
309
- .pre-2btisl9m7v3 {
309
+ .pre-1yj9n7yt24z {
310
310
  padding: 10px;
311
311
  color: red;
312
312
  text-align: center;
package/vue3/src/blocks/image/image.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="div-20vehov4ay6">
2
+ <div class="div-1eih9th5ow6">
3
3
  <picture>
4
4
  <img
5
5
  loading="lazy"
@@ -13,7 +13,7 @@
13
13
  _classStringToObject(
14
14
  'builder-image' +
15
15
  (this.className ? ' ' + this.className : '') +
16
- 'img-20vehov4ay6'
16
+ 'img-1eih9th5ow6'
17
17
  )
18
18
  "
19
19
  :src="image"
@@ -27,13 +27,11 @@
27
27
  v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
28
28
  >
29
29
  <div
30
- class="builder-image-sizer div-20vehov4ay6-2"
30
+ class="builder-image-sizer div-1eih9th5ow6-2"
31
31
  :style="{
32
32
  paddingTop: aspectRatio * 100 + '%',
33
33
  }"
34
- >
35
- {{ " " }}
36
- </div>
34
+ ></div>
37
35
  </template>
38
36
 
39
37
  <template v-if="((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length) && fitContent">
@@ -41,7 +39,7 @@
41
39
  </template>
42
40
 
43
41
  <template v-if="!fitContent">
44
- <div class="div-20vehov4ay6-3">
42
+ <div class="div-1eih9th5ow6-3">
45
43
  <slot></slot>
46
44
  </div>
47
45
  </template>
@@ -81,10 +79,10 @@ export default {
81
79
  };
82
80
  </script>
83
81
  <style scoped>
84
- .div-20vehov4ay6 {
82
+ .div-1eih9th5ow6 {
85
83
  position: relative;
86
84
  }
87
- .img-20vehov4ay6 {
85
+ .img-1eih9th5ow6 {
88
86
  opacity: 1;
89
87
  transition: opacity 0.2s ease-in-out;
90
88
  position: absolute;
@@ -93,12 +91,12 @@ export default {
93
91
  top: 0px;
94
92
  left: 0px;
95
93
  }
96
- .div-20vehov4ay6-2 {
94
+ .div-1eih9th5ow6-2 {
97
95
  width: 100%;
98
96
  pointer-events: none;
99
97
  font-size: 0;
100
98
  }
101
- .div-20vehov4ay6-3 {
99
+ .div-1eih9th5ow6-3 {
102
100
  display: flex;
103
101
  flex-direction: column;
104
102
  align-items: stretch;
package/vue3/src/components/render-block/block-styles.vue CHANGED
@@ -1,5 +1,7 @@
1
1
  <template>
2
- <template v-if="TARGET === 'vue' || TARGET === 'svelte'">
2
+ <template
3
+ v-if="TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte'"
4
+ >
3
5
  <render-inlined-styles :styles="css"></render-inlined-styles>
4
6
  </template>
5
7
  </template>
package/vue3/src/components/render-blocks.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div
3
- :class="_classStringToObject(this.className + 'div-1hjwvu3r5mj')"
3
+ :class="_classStringToObject(this.className + 'div-4o9pb21oca6')"
4
4
  :builder-path="path"
5
5
  :builder-parent-id="parent"
6
6
  :dataSet="{
@@ -93,7 +93,7 @@ export default {
93
93
  };
94
94
  </script>
95
95
  <style scoped>
96
- .div-1hjwvu3r5mj {
96
+ .div-4o9pb21oca6 {
97
97
  display: flex;
98
98
  flex-direction: column;
99
99
  align-items: stretch;
package/vue2/src/components/error-boundary.vue DELETED
@@ -1,6 +0,0 @@
1
- <template></template>
2
- <script>
3
- export default {
4
- name: "error-boundary",
5
- };
6
- </script>
package/vue3/src/components/error-boundary.vue DELETED
@@ -1,8 +0,0 @@
1
- <template></template>
2
- <script>
3
- import { defineAsyncComponent } from "vue";
4
-
5
- export default {
6
- name: "error-boundary",
7
- };
8
- </script>