@builder.io/sdk-vue 0.0.1-65 → 0.0.1-66

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 (6) hide show
  1. package/package.json +1 -1
  2. package/vue2/src/blocks/form/form.vue +2 -2
  3. package/vue2/src/blocks/image/image.vue +8 -8
  4. package/vue2/src/blocks/video/video.vue +38 -10
  5. package/vue3/src/blocks/form/form.vue +2 -2
  6. package/vue3/src/blocks/video/video.vue +38 -10
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-65",
4
+ "version": "0.0.1-66",
5
5
  "dependencies": {
6
6
  "node-fetch": "^2.6.1"
7
7
  },
package/vue2/src/blocks/form/form.vue CHANGED
@@ -28,7 +28,7 @@
28
28
  ></builder-blocks>
29
29
 
30
30
  <pre
31
- class="builder-form-error-text pre-1ifnufbde19"
31
+ class="builder-form-error-text pre-29wpyomtntv"
32
32
  v-if="submissionState === 'error' && responseData"
33
33
  >
34
34
  {{ JSON.stringify(responseData, null, 2) }}
@@ -301,7 +301,7 @@ export default {
301
301
  };
302
302
  </script>
303
303
  <style scoped>
304
- .pre-1ifnufbde19 {
304
+ .pre-29wpyomtntv {
305
305
  padding: 10px;
306
306
  color: red;
307
307
  text-align: center;
package/vue2/src/blocks/image/image.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="div-cvp1sc2nsao">
2
+ <div class="div-1ifnufbde19">
3
3
  <picture>
4
4
  <source type="image/webp" v-if="webpSrcSet" :srcset="webpSrcSet" />
5
5
 
@@ -15,7 +15,7 @@
15
15
  _classStringToObject(
16
16
  'builder-image' +
17
17
  (this.className ? ' ' + this.className : '') +
18
- ' img-cvp1sc2nsao'
18
+ ' img-1ifnufbde19'
19
19
  )
20
20
  "
21
21
  :src="image"
@@ -26,7 +26,7 @@
26
26
  </picture>
27
27
 
28
28
  <div
29
- class="builder-image-sizer div-cvp1sc2nsao-2"
29
+ class="builder-image-sizer div-1ifnufbde19-2"
30
30
  v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
31
31
  :style="{
32
32
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -36,7 +36,7 @@
36
36
 
37
37
  <slot></slot>
38
38
 
39
- <div class="div-cvp1sc2nsao-3" v-if="!fitContent">
39
+ <div class="div-1ifnufbde19-3" v-if="!fitContent">
40
40
  <slot></slot>
41
41
  </div>
42
42
  </div>
@@ -110,10 +110,10 @@ export default {
110
110
  };
111
111
  </script>
112
112
  <style scoped>
113
- .div-cvp1sc2nsao {
113
+ .div-1ifnufbde19 {
114
114
  position: relative;
115
115
  }
116
- .img-cvp1sc2nsao {
116
+ .img-1ifnufbde19 {
117
117
  opacity: 1;
118
118
  transition: opacity 0.2s ease-in-out;
119
119
  position: absolute;
@@ -122,12 +122,12 @@ export default {
122
122
  top: 0px;
123
123
  left: 0px;
124
124
  }
125
- .div-cvp1sc2nsao-2 {
125
+ .div-1ifnufbde19-2 {
126
126
  width: 100%;
127
127
  pointer-events: none;
128
128
  font-size: 0;
129
129
  }
130
- .div-cvp1sc2nsao-3 {
130
+ .div-1ifnufbde19-3 {
131
131
  display: flex;
132
132
  flex-direction: column;
133
133
  align-items: stretch;
package/vue2/src/blocks/video/video.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <video
3
- v-bind="attributes"
4
- preload="none"
3
+ v-bind="videoProps"
5
4
  :style="{
6
5
  width: '100%',
7
6
  height: '100%',
@@ -14,10 +13,6 @@
14
13
  }"
15
14
  :src="video || 'no-src'"
16
15
  :poster="posterImage"
17
- :autoPlay="autoPlay"
18
- :muted="muted"
19
- :controls="controls"
20
- :loop="loop"
21
16
  ></video>
22
17
  </template>
23
18
  <script>
@@ -25,15 +20,48 @@ export default {
25
20
  name: "builder-video",
26
21
 
27
22
  props: [
23
+ "autoPlay",
24
+ "muted",
25
+ "controls",
26
+ "loop",
27
+ "playsInline",
28
28
  "attributes",
29
29
  "fit",
30
30
  "position",
31
31
  "video",
32
32
  "posterImage",
33
- "autoPlay",
34
- "muted",
35
- "controls",
36
- "loop",
37
33
  ],
34
+
35
+ computed: {
36
+ videoProps() {
37
+ return {
38
+ ...(this.autoPlay === true
39
+ ? {
40
+ autoPlay: true,
41
+ }
42
+ : {}),
43
+ ...(this.muted === true
44
+ ? {
45
+ muted: true,
46
+ }
47
+ : {}),
48
+ ...(this.controls === true
49
+ ? {
50
+ controls: true,
51
+ }
52
+ : {}),
53
+ ...(this.loop === true
54
+ ? {
55
+ loop: true,
56
+ }
57
+ : {}),
58
+ ...(this.playsInline === true
59
+ ? {
60
+ playsInline: true,
61
+ }
62
+ : {}),
63
+ };
64
+ },
65
+ },
38
66
  };
39
67
  </script>
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-256wrwn33ry">
32
+ <pre class="builder-form-error-text pre-b9953mjwo3c">
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-256wrwn33ry {
309
+ .pre-b9953mjwo3c {
310
310
  padding: 10px;
311
311
  color: red;
312
312
  text-align: center;
package/vue3/src/blocks/video/video.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <video
3
- v-bind="attributes"
4
- preload="none"
3
+ v-bind="videoProps"
5
4
  :style="{
6
5
  width: '100%',
7
6
  height: '100%',
@@ -14,10 +13,6 @@
14
13
  }"
15
14
  :src="video || 'no-src'"
16
15
  :poster="posterImage"
17
- :autoPlay="autoPlay"
18
- :muted="muted"
19
- :controls="controls"
20
- :loop="loop"
21
16
  ></video>
22
17
  </template>
23
18
  <script>
@@ -27,15 +22,48 @@ export default {
27
22
  name: "builder-video",
28
23
 
29
24
  props: [
25
+ "autoPlay",
26
+ "muted",
27
+ "controls",
28
+ "loop",
29
+ "playsInline",
30
30
  "attributes",
31
31
  "fit",
32
32
  "position",
33
33
  "video",
34
34
  "posterImage",
35
- "autoPlay",
36
- "muted",
37
- "controls",
38
- "loop",
39
35
  ],
36
+
37
+ computed: {
38
+ videoProps() {
39
+ return {
40
+ ...(this.autoPlay === true
41
+ ? {
42
+ autoPlay: true,
43
+ }
44
+ : {}),
45
+ ...(this.muted === true
46
+ ? {
47
+ muted: true,
48
+ }
49
+ : {}),
50
+ ...(this.controls === true
51
+ ? {
52
+ controls: true,
53
+ }
54
+ : {}),
55
+ ...(this.loop === true
56
+ ? {
57
+ loop: true,
58
+ }
59
+ : {}),
60
+ ...(this.playsInline === true
61
+ ? {
62
+ playsInline: true,
63
+ }
64
+ : {}),
65
+ };
66
+ },
67
+ },
40
68
  };
41
69
  </script>