@dcodegroup-au/page-builder 0.8.0 → 0.8.2

package/dist/page-builder.umd.js

@@ -451,11 +451,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_9$n = { class: "font-semibold text-gray-900" };
   const _hoisted_10$j = { class: "text-sm text-gray-600" };
   const _hoisted_11$g = ["disabled"];
-  const _hoisted_12$d = { class: "flex flex-col gap-3" };
+  const _hoisted_12$e = { class: "flex flex-col gap-3" };
   const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
-  const _hoisted_15$7 = { class: "text-xs text-gray-600" };
-  const _hoisted_16$4 = { class: "text-sm font-medium text-gray-900" };
+  const _hoisted_15$8 = { class: "text-xs text-gray-600" };
+  const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
   const _sfc_main$Q = {
     __name: "Items",
     props: {
@@ -529,7 +529,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     ], 10, _hoisted_11$g)
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_12$d, [
+                vue.createElementVNode("div", _hoisted_12$e, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dataRef.value.data, (item, index) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       class: vue.normalizeClass(["flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg", { "bg-gray-200 hover:bg-gray-200": openItemStates.value[index] }])
@@ -544,8 +544,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           class: "flex flex-1 flex-col cursor-pointer",
                           onClick: ($event) => edit(item, index)
                         }, [
-                          vue.createElementVNode("div", _hoisted_15$7, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
-                          vue.createElementVNode("div", _hoisted_16$4, vue.toDisplayString(item.title), 1)
+                          vue.createElementVNode("div", _hoisted_15$8, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
+                          vue.createElementVNode("div", _hoisted_16$5, vue.toDisplayString(item.title), 1)
                         ], 8, _hoisted_14$9),
                         vue.createVNode(_sfc_main$S, {
                           onRemoveItem: ($event) => handleDeleteItem(index),
@@ -11704,7 +11704,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_9$m = ["href"];
   const _hoisted_10$i = { class: "file-upload-title" };
   const _hoisted_11$f = { class: "file-upload-file-remove" };
-  const _hoisted_12$c = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
+  const _hoisted_12$d = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
   const _sfc_main$O = {
     __name: "FileUpload",
     props: {
@@ -11825,7 +11825,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ref_key: "dropzone",
               ref: dropzone2
             }, null, 512),
-            vue.createElementVNode("div", _hoisted_12$c, [
+            vue.createElementVNode("div", _hoisted_12$d, [
               vue.createElementVNode("div", null, [
                 vue.createVNode(vue.unref(UploadCloud), { class: "w-6 h-6" })
               ]),
@@ -45227,17 +45227,17 @@ ${escapeText(this.code(index, length))}
   const _hoisted_9$k = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_10$g = { class: "relative flex items-end" };
   const _hoisted_11$e = { class: "flex flex-col gap-6" };
-  const _hoisted_12$b = {
+  const _hoisted_12$c = {
     key: 0,
     class: "flex gap-4"
   };
   const _hoisted_13$a = { class: "flex items-center gap-2 cursor-pointer" };
   const _hoisted_14$8 = ["name", "value", "onUpdate:modelValue", "onChange"];
-  const _hoisted_15$6 = {
+  const _hoisted_15$7 = {
     key: 1,
     class: "flex flex-col gap-1.5"
   };
-  const _hoisted_16$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
@@ -45367,7 +45367,7 @@ ${escapeText(this.code(index, length))}
                     ])
                   ]),
                   vue.createElementVNode("div", _hoisted_11$e, [
-                    !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$b, [
+                    !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$c, [
                       (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
                         return vue.createElementVNode("label", _hoisted_13$a, [
                           vue.withDirectives(vue.createElementVNode("input", {
@@ -45384,7 +45384,7 @@ ${escapeText(this.code(index, length))}
                         ]);
                       }), 64))
                     ])) : vue.createCommentVNode("", true),
-                    !item.hasOwnProperty("content_type") || item.content_type === "content" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
+                    !item.hasOwnProperty("content_type") || item.content_type === "content" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$7, [
                       ["feature_items", "faqs", "pricing"].includes(componentData.value.type) ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                         key: 0,
                         data: item
@@ -45408,7 +45408,7 @@ ${escapeText(this.code(index, length))}
                               placeholder: "Title",
                               maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_16$3)), [
+                            }, null, 8, _hoisted_16$4)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true),
                             isBulletPoint.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
@@ -45482,7 +45482,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_9$j = { class: "relative flex items-end" };
   const _hoisted_10$f = { class: "flex flex-col gap-6" };
   const _hoisted_11$d = { class: "flex flex-col gap-1.5" };
-  const _hoisted_12$a = ["onUpdate:modelValue"];
+  const _hoisted_12$b = ["onUpdate:modelValue"];
   const _sfc_main$B = {
     __name: "Logos",
     props: {
@@ -45584,7 +45584,7 @@ ${escapeText(this.code(index, length))}
                             type: "text",
                             placeholder: "Enter your url",
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_12$a), [
+                          }, null, 8, _hoisted_12$b), [
                             [vue.vModelText, item.url]
                           ])
                         ]),
@@ -45768,8 +45768,9 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$j = { class: "flex items-center justify-between" };
   const _hoisted_8$i = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_9$i = { class: "relative flex items-end" };
-  const _hoisted_10$e = { class: "flex flex-col gap-6" };
-  const _hoisted_11$c = { class: "flex flex-col gap-1.5" };
+  const _hoisted_10$e = ["onUpdate:modelValue"];
+  const _hoisted_11$c = { class: "flex flex-col gap-6" };
+  const _hoisted_12$a = { class: "flex flex-col gap-1.5" };
   const _sfc_main$y = {
     __name: "VideoGrid",
     props: {
@@ -45844,8 +45845,29 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$e, [
-                    vue.createElementVNode("div", _hoisted_11$c, [
+                  vue.createVNode(_sfc_main$P, {
+                    "is-vertical": "",
+                    field: "line.title",
+                    "label-text": "Youtube URL",
+                    class: "w-full",
+                    value: item.youtube_url
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.withDirectives(vue.createElementVNode("input", {
+                        "onUpdate:modelValue": ($event) => item.youtube_url = $event,
+                        name: "youtube_url.youtube_url",
+                        type: "text",
+                        placeholder: "Url",
+                        class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                      }, null, 8, _hoisted_10$e), [
+                        [vue.vModelText, item.youtube_url]
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]),
+                  _cache[1] || (_cache[1] = vue.createElementVNode("p", null, "OR", -1)),
+                  vue.createElementVNode("div", _hoisted_11$c, [
+                    vue.createElementVNode("div", _hoisted_12$a, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
                         type: "video",
@@ -46170,11 +46192,11 @@ ${escapeText(this.code(index, length))}
   const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
   const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
   const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
-  const _hoisted_15$5 = {
+  const _hoisted_15$6 = {
     key: 0,
     class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
   };
-  const _hoisted_16$2 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+  const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
   const _hoisted_17$1 = ["value"];
   const _hoisted_18$1 = {
     key: 1,
@@ -46315,9 +46337,9 @@ ${escapeText(this.code(index, length))}
               }), 256))
             ]),
             vue.createElementVNode("div", _hoisted_14$7, [
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
                 _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-                vue.createElementVNode("div", _hoisted_16$2, [
+                vue.createElementVNode("div", _hoisted_16$3, [
                   vue.createVNode(_sfc_main$P, {
                     field: "breadcrumb",
                     "label-text": "Breadcrumb section",
@@ -47829,15 +47851,15 @@ ${escapeText(this.code(index, length))}
       };
     }
   });
-  const _hoisted_1$M = { class: "flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10" };
+  const _hoisted_1$M = { class: "flex h-[494px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-[24px] lg:rounded-[48px] z-10" };
   const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
-  const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
+  const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]" };
   const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
   const _hoisted_5$i = ["onClick"];
   const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
   const _hoisted_7$h = { class: "max-md:flex-1" };
   const _hoisted_8$g = ["innerHTML"];
-  const _hoisted_9$g = { class: "flex gap-3 md:mt-8 max-sm:flex-col" };
+  const _hoisted_9$g = { class: "flex gap-3 mt-4 md:mt-8" };
   const _hoisted_10$c = ["href", "target"];
   const _hoisted_11$a = ["href", "target"];
   const _hoisted_12$8 = ["src"];
@@ -47886,14 +47908,14 @@ ${escapeText(this.code(index, length))}
                         vue.createElementVNode("h3", _hoisted_6$i, vue.toDisplayString(slide == null ? void 0 : slide.title), 1),
                         vue.createElementVNode("div", _hoisted_7$h, [
                           vue.createElementVNode("p", {
-                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3",
                             innerHTML: slide == null ? void 0 : slide.description
                           }, null, 8, _hoisted_8$g)
                         ]),
                         vue.createElementVNode("div", _hoisted_9$g, [
                           slide.secondary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
-                            class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
+                            class: "text-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
                             href: vue.unref(formatUrl)(slide.secondary_button.url),
                             target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                           }, [
@@ -47901,7 +47923,7 @@ ${escapeText(this.code(index, length))}
                           ], 8, _hoisted_10$c)) : vue.createCommentVNode("", true),
                           slide.primary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 1,
-                            class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50",
+                            class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-50",
                             href: vue.unref(formatUrl)(slide.primary_button.url),
                             target: slide.primary_button.open_in_new_tab ? "_blank" : ""
                           }, [
@@ -47931,7 +47953,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
+  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-37e27419"]]);
   const _hoisted_1$L = ["target", "href"];
   const _sfc_main$r = {
     __name: "LinkPresenter",
@@ -48458,11 +48480,11 @@ ${escapeText(this.code(index, length))}
   const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
   const _hoisted_13$7 = ["href"];
   const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 lg:right-4 flex gap-4" };
-  const _hoisted_15$4 = {
+  const _hoisted_15$5 = {
     key: 0,
     class: "flex sm:justify-center mb-6 lg:mb-10"
   };
-  const _hoisted_16$1 = ["href", "target"];
+  const _hoisted_16$2 = ["href", "target"];
   const _sfc_main$j = {
     __name: "CarouselPresenter",
     props: {
@@ -48608,7 +48630,7 @@ ${escapeText(this.code(index, length))}
               vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
             ], 2)
           ]),
-          ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
+          ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(__props.component.button.url),
@@ -48616,7 +48638,7 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(__props.component.button.title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_16$1)
+            ], 8, _hoisted_16$2)
           ])) : vue.createCommentVNode("", true)
         ]);
       };
@@ -48683,31 +48705,36 @@ ${escapeText(this.code(index, length))}
   const _hoisted_1$v = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 w-full" };
   const _hoisted_2$f = {
     key: 0,
-    class: "relative group"
+    class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
+  };
+  const _hoisted_3$f = {
+    key: 0,
+    class: "w-full h-[281px] md:rounded-2xl"
   };
-  const _hoisted_3$f = ["onClick"];
   const _hoisted_4$f = ["src"];
-  const _hoisted_5$f = ["src"];
-  const _hoisted_6$f = {
+  const _hoisted_5$f = ["onClick"];
+  const _hoisted_6$f = ["src"];
+  const _hoisted_7$e = ["src"];
+  const _hoisted_8$d = {
     key: 2,
     class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4",
     alt: "No Available",
     src: _imports_0
   };
-  const _hoisted_7$e = { class: "flex flex-col gap-2 items-start text-left w-full" };
-  const _hoisted_8$d = {
+  const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
+  const _hoisted_10$9 = {
     key: 0,
     class: "flex gap-2"
   };
-  const _hoisted_9$d = ["href"];
-  const _hoisted_10$9 = { class: "flex justify-between" };
-  const _hoisted_11$8 = ["innerHTML"];
-  const _hoisted_12$6 = { class: "text-gray-500 text-sm mb-4" };
-  const _hoisted_13$6 = {
+  const _hoisted_11$8 = ["href"];
+  const _hoisted_12$6 = { class: "flex justify-between" };
+  const _hoisted_13$6 = ["innerHTML"];
+  const _hoisted_14$5 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_15$4 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_14$5 = ["href", "target"];
+  const _hoisted_16$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48744,6 +48771,13 @@ ${escapeText(this.code(index, length))}
           videoRefs.value[index] = el;
         }
       };
+      const getEmbedUrl = (item) => {
+        if (!item.youtube_url) return null;
+        const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+        const id = m ? m[1] : null;
+        if (!id) return null;
+        return `https://www.youtube.com/embed/${id}`;
+      };
       return (_ctx, _cache) => {
         var _a2, _b2;
         return vue.openBlock(), vue.createElementBlock("div", {
@@ -48753,35 +48787,45 @@ ${escapeText(this.code(index, length))}
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (card, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
-                class: "card bg-white sm:p-0 px-4"
+                class: "card bg-white sm:p-0 px-4 w-full"
               }, [
                 __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
-                  vue.createElementVNode("video", {
-                    onClick: ($event) => togglePlayPause(index),
-                    ref_for: true,
-                    ref: (el) => setVideoRef(el, index),
-                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
-                    width: "640",
-                    height: "360",
-                    preload: "metadata"
-                  }, [
-                    vue.createElementVNode("source", {
-                      src: `${card.video}#t=2`
+                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f, [
+                    vue.createElementVNode("iframe", {
+                      src: getEmbedUrl(card),
+                      frameborder: "0",
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowfullscreen: "",
+                      class: "w-full h-full"
                     }, null, 8, _hoisted_4$f)
-                  ], 8, _hoisted_3$f),
-                  !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
-                    key: 0,
-                    class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
-                    onClick: ($event) => togglePlayPause(index)
-                  }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                  ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    vue.createElementVNode("video", {
+                      onClick: ($event) => togglePlayPause(index),
+                      ref_for: true,
+                      ref: (el) => setVideoRef(el, index),
+                      class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                      width: "640",
+                      height: "360",
+                      preload: "metadata"
+                    }, [
+                      vue.createElementVNode("source", {
+                        src: `${card.video}#t=2`
+                      }, null, 8, _hoisted_6$f)
+                    ], 8, _hoisted_5$f),
+                    !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
+                      key: 0,
+                      class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
+                      onClick: ($event) => togglePlayPause(index)
+                    }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                  ], 64))
                 ])) : card.image ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 1,
                   src: card.image,
                   alt: "Card Image",
                   class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-                }, null, 8, _hoisted_5$f)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_6$f)),
-                vue.createElementVNode("div", _hoisted_7$e, [
-                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$d, [
+                }, null, 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_8$d)),
+                vue.createElementVNode("div", _hoisted_9$d, [
+                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$9, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
                       return vue.openBlock(), vue.createElementBlock("span", {
                         key: tag,
@@ -48800,20 +48844,20 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_10$9, [
+                    vue.createElementVNode("div", _hoisted_12$6, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_11$8),
+                      }, null, 8, _hoisted_13$6),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                     ])
-                  ], 8, _hoisted_9$d)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("p", _hoisted_12$6, vue.toDisplayString(card.dateTime), 1)
+                  ], 8, _hoisted_11$8)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_14$5, vue.toDisplayString(card.dateTime), 1)
                 ])
               ]);
             }), 128))
           ]),
-          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$6, [
+          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(vue.unref(button).url),
@@ -48821,13 +48865,13 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(vue.unref(button).title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_14$5)
+            ], 8, _hoisted_16$1)
           ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b6625ed3"]]);
+  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",
@@ -49101,7 +49145,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_13$5 = ["src"];
   const _hoisted_14$4 = {
     key: 0,
-    class: "w-full md:w-[560px] flex"
+    class: "w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]"
   };
   const _hoisted_15$3 = ["src", "alt"];
   const _sfc_main$d = {
@@ -49229,7 +49273,7 @@ ${escapeText(this.code(index, length))}
                   vue.createElementVNode("img", {
                     src: imageComponent.value.featured_image,
                     alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
-                    class: "rounded-br-[24px] rounded-tl-[24px] w-full object-cover"
+                    class: "w-full h-full object-cover max-lg:absolute inset-0"
                   }, null, 8, _hoisted_15$3)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
@@ -49602,14 +49646,18 @@ ${escapeText(this.code(index, length))}
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["pb-container my-[40px]", { "flex gap-8 flex-col lg:flex-row": (_c = headerComponent.value) == null ? void 0 : _c.featured_image, "flex-col-reverse lg:flex-row-reverse justify-between": (_d = headerComponent.value) == null ? void 0 : _d.revert }])
             }, [
-              ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.createElementBlock("img", {
+              ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
-                src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-                class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
                 ref_key: "leftColumn",
                 ref: leftColumn,
-                alt: "Feature"
-              }, null, 8, _hoisted_2$8)) : vue.createCommentVNode("", true),
+                class: "w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+              }, [
+                vue.createElementVNode("img", {
+                  src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
+                  class: "w-full h-full object-cover max-lg:absolute inset-0",
+                  alt: "Feature"
+                }, null, 8, _hoisted_2$8)
+              ], 512)) : vue.createCommentVNode("", true),
               headerComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 1,
                 class: vue.normalizeClass(["h-fit flex flex-col gap-4 lg:gap-8", { "xl:py-[48px]": (_g = headerComponent.value) == null ? void 0 : _g.featured_image, "[&]:grid lg:grid-cols-2": (_h = section.value) == null ? void 0 : _h.two_column }]),

package/example/src/pages/AboutUs.js

@@ -79,7 +79,7 @@ export const AboutUs = {
           type: "header",
           title: "Support Services",
           icon: "AlertCircle",
-          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/untitled-design-30.png"
+          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/kinglakeselects-final-02684.jpg"
        },
         {
           name: "Bullet Points",
@@ -127,4 +127,4 @@ export const AboutUs = {
       ]
     },
   ]
-};
+};

package/example/src/pages/BestLife.js

@@ -192,6 +192,7 @@ export const BestLife = {
           data: [
             {
               video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
+              youtube_url: "https://www.youtube.com/watch?v=cEpTYBuR7vY",
             },
             {
               video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/builders/VideoGrid.vue

@@ -37,6 +37,22 @@
             <ActionMenu @removeItem="handleDeleteItem(index)"/>
           </div>
         </div>
+        <InputWrapper
+            is-vertical
+            field="line.title"
+            label-text="Youtube URL"
+            class="w-full"
+            :value="item.youtube_url"
+        >
+          <input
+              v-model="item.youtube_url"
+              name="youtube_url.youtube_url"
+              type="text"
+              placeholder="Url"
+              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+          />
+        </InputWrapper>
+        <p>OR</p>
         <div class="flex flex-col gap-6">
           <div class="flex flex-col gap-1.5">
             <VFileUpload
@@ -59,6 +75,7 @@ import {defaultProps} from "@/components/helpers/defaultProps";
 import ActionMenu from "@/components/common/ActionMenu.vue";
 import VModal from "@/components/common/Modal.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -1,24 +1,35 @@
 <template>
   <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
-      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4">
-        <div v-if="component.type === 'video_grid'" class="relative group">
-          <video
-              @click="togglePlayPause(index)"
-              :ref="(el) => setVideoRef(el, index)"
-              class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
-              width="640"
-              height="360"
-              preload="metadata"
-          >
-            <source :src="`${card.video}#t=2`" />
-          </video>
-          <PlayButton
-              v-if="!isPlaying[index]"
-              class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
-              @click="togglePlayPause(index)">
+      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4 w-full">
+        <div v-if="component.type === 'video_grid'" class="relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden">
+          <div v-if="card?.youtube_url && getEmbedUrl(card)" class="w-full h-[281px] md:rounded-2xl">
+            <iframe
+                :src="getEmbedUrl(card)"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+                class="w-full h-full"
+            ></iframe>
+          </div>
+          <template v-else>
+            <video
+                @click="togglePlayPause(index)"
+                :ref="(el) => setVideoRef(el, index)"
+                class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
+                width="640"
+                height="360"
+                preload="metadata"
+            >
+              <source :src="`${card.video}#t=2`" />
+            </video>
+            <PlayButton
+                v-if="!isPlaying[index]"
+                class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
+                @click="togglePlayPause(index)">
 
-          </PlayButton>
+            </PlayButton>
+          </template>
         </div>
         <img
             v-else-if="card.image"
@@ -114,6 +125,16 @@ const setVideoRef = (el, index) => {
     videoRefs.value[index] = el;
   }
 };
+
+const getEmbedUrl = (item) => {
+  if (!item.youtube_url) return null;
+  // match common YouTube URL formats and extract the 11-char id
+  const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+  const id = m ? m[1] : null;
+  if (!id) return null;
+  return `https://www.youtube.com/embed/${id}`;
+};
+
 </script>
 
 <style scoped>