@g1cloud/page-builder-editor 1.0.0-alpha.100 → 1.0.0-alpha.101

package/dist/{PbPropertyEditorColor-CwgsFX20.js → PbPropertyEditorColor-BsPFj_3N.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-gTlPRaWE.js";
+import { P as PbColorPicker } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };

package/dist/{PbPropertyEditorCssLength-BimevQPh.js → PbPropertyEditorCssLength-s--C0dHZ.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { t as toCssLength } from "./index-gTlPRaWE.js";
+import { t as toCssLength } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorHtml-Dq5TqAEK.js → PbPropertyEditorHtml-WoyBfORQ.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-gTlPRaWE.js";
+import { u as usePageBuilderEditor } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorImage-Bn9LMbEK.js → PbPropertyEditorImage-DbbK_0WV.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
-import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-gTlPRaWE.js";
+import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-SyHEuk0H.js";
 import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-gDifsouH.js → PbPropertyEditorMultilineText-Bp2vUVha.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-gTlPRaWE.js";
+import { u as usePageBuilderEditor } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorText-C7Tr7KGc.js → PbPropertyEditorText-mWOJ1KrX.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-gTlPRaWE.js";
+import { u as usePageBuilderEditor } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorYoutube-Ci8_jXBk.js → PbPropertyEditorYoutube-BCiZmiWV.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode } from "vue";
 import { useModal, vT, BSButton } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-gTlPRaWE.js";
+import { s as selectYoutubeVideo } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = {
@@ -19,11 +19,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const modal = useModal();
     const emit = __emit;
     const clearVideo = () => {
-      emit("update-property-value", { url: "" });
+      emit("update-property-value", { url: "", aspectRatio: "" });
     };
     const selectVideo = () => {
-      selectYoutubeVideo(modal, props.value, (url) => {
-        emit("update-property-value", { url: url || "" });
+      selectYoutubeVideo(modal, props.value, (url, aspectRatio) => {
+        const properties = { url: url || "" };
+        if (aspectRatio) {
+          properties.aspectRatio = aspectRatio;
+        }
+        emit("update-property-value", properties);
       });
     };
     return (_ctx, _cache) => {

package/dist/{PbWidgetAddModal-BdTUeERo.js → PbWidgetAddModal-0p7a4pVO.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-gTlPRaWE.js";
+import { w as widgetPartDefinitions } from "./index-SyHEuk0H.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/PbYoutubeModal-BaL5gsKK.js

@@ -0,0 +1,117 @@
+import { defineComponent, ref, onMounted, openBlock, createBlock, unref, withCtx, createElementVNode, withDirectives, createVNode, normalizeStyle, createCommentVNode } from "vue";
+import { useModalHandle, BSModalFrame, vT, BSTextInput } from "@g1cloud/bluesea";
+import YouTube from "vue3-youtube";
+import { _ as _export_sfc } from "./index-SyHEuk0H.js";
+const _hoisted_1 = { class: "bs-layout-vertical flex-grow-1 h-full" };
+const _hoisted_2 = { class: "pt-8" };
+const _hoisted_3 = { class: "bs-layout-horizontal justify-content-center" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PbYoutubeModal",
+  props: {
+    url: {}
+  },
+  emits: ["selectUrl"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const modalHandle = useModalHandle();
+    const previewContainer = ref();
+    const url = ref(props.url);
+    const aspectRatio = ref();
+    const previewWidth = ref(480);
+    const previewHeight = ref(360);
+    const fetchAspectRatio = async (videoUrl) => {
+      try {
+        const oembedUrl = `https://www.youtube.com/oembed?url=${encodeURIComponent(videoUrl)}&format=json`;
+        const response = await fetch(oembedUrl);
+        if (!response.ok) return;
+        const data = await response.json();
+        if (data.width && data.height) {
+          aspectRatio.value = `${data.width}/${data.height}`;
+          previewHeight.value = Math.round(previewWidth.value * data.height / data.width);
+        }
+      } catch {
+      }
+    };
+    const updateUrl = (value) => {
+      url.value = value;
+      aspectRatio.value = void 0;
+      if (value) {
+        fetchAspectRatio(value);
+      }
+    };
+    if (props.url) {
+      fetchAspectRatio(props.url);
+    }
+    const measureContainer = () => {
+      var _a;
+      const w = (_a = previewContainer.value) == null ? void 0 : _a.clientWidth;
+      if (w && w > 0) {
+        previewWidth.value = w;
+        previewHeight.value = Math.round(w * 9 / 16);
+        return true;
+      }
+      return false;
+    };
+    onMounted(() => {
+      if (!measureContainer()) {
+        requestAnimationFrame(() => measureContainer());
+      }
+    });
+    const ok = () => {
+      emit("selectUrl", url.value, aspectRatio.value);
+      modalHandle.close();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BSModalFrame), {
+        title: { key: "pb.modal.youtube.title" },
+        class: "pb-youtube-modal"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            withDirectives(createElementVNode("div", null, null, 512), [
+              [unref(vT), { key: "pb.modal.youtube.url" }]
+            ]),
+            createVNode(unref(BSTextInput), {
+              "model-value": url.value,
+              width: "100%",
+              "onUpdate:modelValue": updateUrl
+            }, null, 8, ["model-value"]),
+            withDirectives(createElementVNode("div", _hoisted_2, null, 512), [
+              [unref(vT), { key: "pb.modal.youtube.preview" }]
+            ]),
+            createElementVNode("div", {
+              ref_key: "previewContainer",
+              ref: previewContainer,
+              class: "preview-container border-w-1 border border-gray",
+              style: normalizeStyle({ minHeight: url.value ? void 0 : "300px", overflow: "hidden" })
+            }, [
+              url.value ? (openBlock(), createBlock(unref(YouTube), {
+                key: 0,
+                ref: "youtube",
+                src: url.value,
+                width: previewWidth.value,
+                height: previewHeight.value
+              }, null, 8, ["src", "width", "height"])) : createCommentVNode("", true)
+            ], 4)
+          ])
+        ]),
+        buttons: withCtx(() => [
+          createElementVNode("div", _hoisted_3, [
+            withDirectives(createElementVNode("button", {
+              class: "mr-4",
+              onClick: ok
+            }, null, 512), [
+              [unref(vT), { key: "pb.button.ok" }]
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const PbYoutubeModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c0ba6980"]]);
+export {
+  PbYoutubeModal as default
+};

package/dist/components/modal/PbYoutubeModal.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     url?: string | undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    selectUrl: (url: string | undefined) => void;
+    selectUrl: (url: string | undefined, aspectRatio?: string | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     url?: string | undefined;
 }>>> & Readonly<{
-    onSelectUrl?: ((url: string | undefined) => any) | undefined;
+    onSelectUrl?: ((url: string | undefined, aspectRatio?: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/{index-gTlPRaWE.js → index-SyHEuk0H.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createBlock as createBlock$1, resolveDynamicComponent, withCtx, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, watch, onMounted, onBeforeUnmount, unref, provide, inject, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
+import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createBlock as createBlock$1, resolveDynamicComponent, withCtx, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, watch, onMounted, onBeforeUnmount, provide, inject, unref, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
 import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, BSSelect, showNotification, BSTree, useContextMenu, i18n, BSHorizontalLayoutResizer } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
@@ -7568,16 +7568,36 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const style = computed(() => {
+    const container = ref();
+    const containerWidth = ref(640);
+    const aspectRatio = computed(() => {
       var _a;
-      return {
-        aspectRatio: (_a = props.part.properties) == null ? void 0 : _a.aspectRatio
-      };
+      const raw = (_a = props.part.properties) == null ? void 0 : _a.aspectRatio;
+      if (!raw) return 16 / 9;
+      const parts = raw.split("/");
+      if (parts.length === 2) {
+        const w = Number(parts[0]);
+        const h = Number(parts[1]);
+        if (w > 0 && h > 0) return w / h;
+      }
+      return 16 / 9;
     });
+    const playerHeight = computed(() => Math.round(containerWidth.value / aspectRatio.value));
+    const updateWidth = () => {
+      if (container.value) {
+        containerWidth.value = container.value.clientWidth;
+      }
+    };
+    let resizeObserver;
     const onReady = () => {
     };
     const isYTReady = ref(false);
     onMounted(() => {
+      if (container.value) {
+        updateWidth();
+        resizeObserver = new ResizeObserver(updateWidth);
+        resizeObserver.observe(container.value);
+      }
       const interval = setInterval(() => {
         try {
           if (window && window.YT && window.YT.Player) {
@@ -7588,6 +7608,9 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
         }
       }, 500);
     });
+    onBeforeUnmount(() => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    });
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock(Fragment, null, [
@@ -7596,25 +7619,36 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
           class: "optanon-category-C0004",
           src: "https://www.youtube.com/iframe_api"
         })),
-        ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "container",
+          ref: container,
+          class: "youtube-container"
+        }, [
           isYTReady.value ? (openBlock(), createBlock$1(unref(YouTube), {
             key: 0,
             ref: "youtube",
             host: "https://www.youtube-nocookie.com",
             src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
-            style: normalizeStyle(style.value),
-            class: "youtube",
-            height: "100%",
-            width: "100%",
+            width: containerWidth.value,
+            height: playerHeight.value,
             onReady
-          }, null, 8, ["src", "style"])) : createCommentVNode("", true)
-        ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
+          }, null, 8, ["src", "width", "height"])) : createCommentVNode("", true)
+        ], 512)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
           createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
         ]))) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
+const _export_sfc$1 = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const PbYoutubeWidget = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$1, [["__scopeId", "data-v-675477df"]]);
 const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
@@ -7656,7 +7690,7 @@ const defaultPartDefinitions = {
     partType: "Widget",
     partName: "YoutubeWidget",
     className: "pb-youtube-widget",
-    creator: () => _sfc_main$4$1
+    creator: () => PbYoutubeWidget
   }
   /*
    * BSP에서 사용안함
@@ -8594,16 +8628,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-C7Tr7KGc.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-mWOJ1KrX.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-gDifsouH.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-Bp2vUVha.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-BimevQPh.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CwgsFX20.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-Bn9LMbEK.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Dq5TqAEK.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Ci8_jXBk.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-s--C0dHZ.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BsPFj_3N.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DbbK_0WV.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-WoyBfORQ.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BCiZmiWV.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8623,7 +8657,7 @@ const isCursorInElement = (event, element) => {
 };
 const selectYoutubeVideo = (modal, url, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbYoutubeModal-CU8sClMD.js")),
+    component: defineAsyncComponent(() => import("./PbYoutubeModal-BaL5gsKK.js")),
     style: {
       minWidth: "500px",
       minHeight: "400px"
@@ -8632,9 +8666,9 @@ const selectYoutubeVideo = (modal, url, callback) => {
       url
     },
     on: {
-      selectUrl: (url2) => {
+      selectUrl: (url2, aspectRatio) => {
         if (callback) {
-          callback(url2);
+          callback(url2, aspectRatio);
         }
       }
     }
@@ -13281,17 +13315,16 @@ const widgets = [
             propertyName: "aspectRatio",
             caption: "pb.prop.aspectRatio",
             propertyType: "text",
-            params: ""
+            params: "",
+            readonly: true
           }
         ]
       },
       ...defaultWidgetPropertyGroups()
     ],
-    initialProperties: {
-      aspectRatio: "16/9"
-    },
+    initialProperties: {},
     allowsChild: () => false,
-    creator: () => _sfc_main$4$1
+    creator: () => PbYoutubeWidget
   }
   /*
    * BSP에서 사용안함
@@ -13402,7 +13435,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BdTUeERo.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-0p7a4pVO.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -17561,41 +17594,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  providePageBuilderViewer as A,
+  providePageBuilder as A,
   BLOCK_TYPE$1 as B,
   ChangePropertyCommand as C,
-  usePageBuilder as D,
-  usePageBuilderViewer as E,
+  providePageBuilderViewer as D,
+  usePageBuilder as E,
+  usePageBuilderViewer as F,
   Model$1 as M,
   PbColorPicker as P,
   ROOT_TYPE$1 as R,
   SECTION_TYPE$1 as S,
   WIDGET_TYPE$1 as W,
-  _sfc_main as _,
-  PageBuilderEditorEvent as a,
-  Block as b,
-  PAGE_BUILDER_KEY as c,
-  PAGE_TYPE$1 as d,
-  Page as e,
-  _sfc_main$2$1 as f,
-  Part as g,
-  _sfc_main$1$1 as h,
-  _sfc_main$q as i,
-  _sfc_main$6$1 as j,
-  _sfc_main$5$1 as k,
-  _sfc_main$8$1 as l,
-  _sfc_main$7$1 as m,
-  _sfc_main$4$1 as n,
-  RootPart as o,
-  Section as p,
-  Widget as q,
-  createPageBuilderViewer as r,
+  _export_sfc as _,
+  _sfc_main as a,
+  PageBuilderEditorEvent as b,
+  Block as c,
+  PAGE_BUILDER_KEY as d,
+  PAGE_TYPE$1 as e,
+  Page as f,
+  _sfc_main$2$1 as g,
+  Part as h,
+  _sfc_main$1$1 as i,
+  _sfc_main$q as j,
+  _sfc_main$6$1 as k,
+  _sfc_main$5$1 as l,
+  _sfc_main$8$1 as m,
+  _sfc_main$7$1 as n,
+  PbYoutubeWidget as o,
+  RootPart as p,
+  Section as q,
+  Widget as r,
   selectYoutubeVideo as s,
   toCssLength as t,
   usePageBuilderEditor as u,
-  createPartComponent as v,
+  createPageBuilderViewer as v,
   widgetPartDefinitions as w,
-  createPartComponents as x,
-  getPartClassName as y,
-  providePageBuilder as z
+  createPartComponent as x,
+  createPartComponents as y,
+  getPartClassName as z
 };

package/dist/model/page-builder-util.d.ts

@@ -4,4 +4,4 @@ import { IPart, MultiLangText } from '@g1cloud/page-builder-viewer';
 export declare const getPropertyValueOfParts: (parts: IPart[], propertyName: string) => MultiLangText | undefined;
 export declare const isCursorInElement: (event: MouseEvent, element: Element) => boolean;
 export declare const extractCommonStylesFromProperties: (properties: Record<string, string>) => Record<string, unknown>;
-export declare const selectYoutubeVideo: (modal: BSModal, url?: string, callback?: (url?: string) => void) => void;
+export declare const selectYoutubeVideo: (modal: BSModal, url?: string, callback?: (url?: string, aspectRatio?: string) => void) => void;

package/dist/page-builder-editor.js

@@ -1,34 +1,34 @@
-import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, v, x, y, z, A, D, E } from "./index-gTlPRaWE.js";
+import { B, c, M, d, e, f, a, b, g, h, i, j, k, l, m, n, o, R, p, S, q, W, r, v, x, y, z, A, D, E, F } from "./index-SyHEuk0H.js";
 export {
   B as BLOCK_TYPE,
-  b as Block,
+  c as Block,
   M as Model,
-  c as PAGE_BUILDER_KEY,
-  d as PAGE_TYPE,
-  e as Page,
-  _ as PageBuilderEditor,
-  a as PageBuilderEditorEvent,
-  f as PageBuilderViewer,
-  g as Part,
-  h as PbContainerWidget,
-  i as PbCustomWidget,
-  j as PbHtmlWidget,
-  k as PbIframeWidget,
-  l as PbMediaWidget,
-  m as PbTextWidget,
-  n as PbYoutubeWidget,
+  d as PAGE_BUILDER_KEY,
+  e as PAGE_TYPE,
+  f as Page,
+  a as PageBuilderEditor,
+  b as PageBuilderEditorEvent,
+  g as PageBuilderViewer,
+  h as Part,
+  i as PbContainerWidget,
+  j as PbCustomWidget,
+  k as PbHtmlWidget,
+  l as PbIframeWidget,
+  m as PbMediaWidget,
+  n as PbTextWidget,
+  o as PbYoutubeWidget,
   R as ROOT_TYPE,
-  o as RootPart,
+  p as RootPart,
   S as SECTION_TYPE,
-  p as Section,
+  q as Section,
   W as WIDGET_TYPE,
-  q as Widget,
-  r as createPageBuilderViewer,
-  v as createPartComponent,
-  x as createPartComponents,
-  y as getPartClassName,
-  z as providePageBuilder,
-  A as providePageBuilderViewer,
-  D as usePageBuilder,
-  E as usePageBuilderViewer
+  r as Widget,
+  v as createPageBuilderViewer,
+  x as createPartComponent,
+  y as createPartComponents,
+  z as getPartClassName,
+  A as providePageBuilder,
+  D as providePageBuilderViewer,
+  E as usePageBuilder,
+  F as usePageBuilderViewer
 };

package/dist/page-builder-editor.umd.cjs

@@ -7135,7 +7135,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$7$1 = ["href", "target"];
   const _hoisted_2$3$1 = ["alt", "src"];
   const _hoisted_3$l = ["alt", "src"];
-  const _hoisted_4$f = ["alt", "src"];
+  const _hoisted_4$e = ["alt", "src"];
   const _hoisted_5$b = ["alt", "src"];
   const _hoisted_6$a = ["poster"];
   const _hoisted_7$9 = ["src"];
@@ -7231,7 +7231,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
                       style: vue.normalizeStyle(style.value),
                       class: "image"
-                    }, null, 12, _hoisted_4$f)
+                    }, null, 12, _hoisted_4$e)
                   ];
                 }),
                 _: 1
@@ -7569,16 +7569,36 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       const props = __props;
-      const style = vue.computed(() => {
+      const container = vue.ref();
+      const containerWidth = vue.ref(640);
+      const aspectRatio = vue.computed(() => {
         var _a;
-        return {
-          aspectRatio: (_a = props.part.properties) == null ? void 0 : _a.aspectRatio
-        };
+        const raw = (_a = props.part.properties) == null ? void 0 : _a.aspectRatio;
+        if (!raw) return 16 / 9;
+        const parts = raw.split("/");
+        if (parts.length === 2) {
+          const w = Number(parts[0]);
+          const h = Number(parts[1]);
+          if (w > 0 && h > 0) return w / h;
+        }
+        return 16 / 9;
       });
+      const playerHeight = vue.computed(() => Math.round(containerWidth.value / aspectRatio.value));
+      const updateWidth = () => {
+        if (container.value) {
+          containerWidth.value = container.value.clientWidth;
+        }
+      };
+      let resizeObserver;
       const onReady = () => {
       };
       const isYTReady = vue.ref(false);
       vue.onMounted(() => {
+        if (container.value) {
+          updateWidth();
+          resizeObserver = new ResizeObserver(updateWidth);
+          resizeObserver.observe(container.value);
+        }
         const interval = setInterval(() => {
           try {
             if (window && window.YT && window.YT.Player) {
@@ -7589,6 +7609,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         }, 500);
       });
+      vue.onBeforeUnmount(() => {
+        resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      });
       return (_ctx, _cache) => {
         var _a, _b;
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -7597,25 +7620,36 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             class: "optanon-category-C0004",
             src: "https://www.youtube.com/iframe_api"
           })),
-          ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            ref_key: "container",
+            ref: container,
+            class: "youtube-container"
+          }, [
             isYTReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
               key: 0,
               ref: "youtube",
               host: "https://www.youtube-nocookie.com",
               src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
-              style: vue.normalizeStyle(style.value),
-              class: "youtube",
-              height: "100%",
-              width: "100%",
+              width: containerWidth.value,
+              height: playerHeight.value,
               onReady
-            }, null, 8, ["src", "style"])) : vue.createCommentVNode("", true)
-          ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
+            }, null, 8, ["src", "width", "height"])) : vue.createCommentVNode("", true)
+          ], 512)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
             vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
           ]))) : vue.createCommentVNode("", true)
         ], 64);
       };
     }
   });
+  const _export_sfc$1 = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const PbYoutubeWidget = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$1, [["__scopeId", "data-v-675477df"]]);
   const defaultPartDefinitions = {
     "Section": {
       partType: "Section",
@@ -7657,7 +7691,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       partType: "Widget",
       partName: "YoutubeWidget",
       className: "pb-youtube-widget",
-      creator: () => _sfc_main$4$1
+      creator: () => PbYoutubeWidget
     }
     /*
      * BSP에서 사용안함
@@ -8624,7 +8658,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const selectYoutubeVideo = (modal, url, callback) => {
     modal.openModal({
-      component: vue.defineAsyncComponent(() => Promise.resolve().then(() => PbYoutubeModal)),
+      component: vue.defineAsyncComponent(() => Promise.resolve().then(() => PbYoutubeModal$1)),
       style: {
         minWidth: "500px",
         minHeight: "400px"
@@ -8633,9 +8667,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         url
       },
       on: {
-        selectUrl: (url2) => {
+        selectUrl: (url2, aspectRatio) => {
           if (callback) {
-            callback(url2);
+            callback(url2, aspectRatio);
           }
         }
       }
@@ -9826,7 +9860,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$D = { class: "group-editor group-editor-position" };
   const _hoisted_2$u = { class: "flex-align-center" };
   const _hoisted_3$k = { class: "title" };
-  const _hoisted_4$e = { class: "flex-grow-1" };
+  const _hoisted_4$d = { class: "flex-grow-1" };
   const _hoisted_5$a = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$9 = { class: "text-center" };
   const _hoisted_7$8 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
@@ -9862,7 +9896,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.position" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$e, [
+            vue.createElementVNode("div", _hoisted_4$d, [
               vue.createElementVNode("div", _hoisted_5$a, [
                 vue.createElementVNode("div", _hoisted_6$9, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -9914,7 +9948,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$C = { class: "group-editor group-editor-size" };
   const _hoisted_2$t = { class: "flex-align-center" };
   const _hoisted_3$j = { class: "title" };
-  const _hoisted_4$d = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_4$c = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_5$9 = { class: "flex-align-center mt-12" };
   const _hoisted_6$8 = { class: "title" };
   const _hoisted_7$7 = { class: "flex-grow-1 bs-layout-horizontal" };
@@ -9956,7 +9990,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.size" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$d, [
+            vue.createElementVNode("div", _hoisted_4$c, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
                 class: "flex-grow-1 mr-2",
@@ -10182,7 +10216,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     -1
     /* HOISTED */
   );
-  const _hoisted_4$c = [
+  const _hoisted_4$b = [
     _hoisted_3$i
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10217,7 +10251,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               class: "vc-alpha-pointer",
               style: vue.normalizeStyle({ left: `${$options.colors.a * 100}%` })
             },
-            _hoisted_4$c,
+            _hoisted_4$b,
             4
             /* STYLE */
           )
@@ -11294,7 +11328,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$A = { class: "vc-editable-input" };
   const _hoisted_2$r = ["aria-labelledby"];
   const _hoisted_3$h = ["id", "for"];
-  const _hoisted_4$b = { class: "vc-input__desc" };
+  const _hoisted_4$a = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
       vue.withDirectives(vue.createElementVNode("input", {
@@ -11314,7 +11348,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$h),
       vue.createElementVNode(
         "span",
-        _hoisted_4$b,
+        _hoisted_4$a,
         vue.toDisplayString($props.desc),
         1
         /* TEXT */
@@ -11412,7 +11446,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     -1
     /* HOISTED */
   );
-  const _hoisted_4$a = [
+  const _hoisted_4$9 = [
     _hoisted_3$g
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11435,7 +11469,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             class: "vc-saturation-pointer",
             style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft })
           },
-          _hoisted_4$a,
+          _hoisted_4$9,
           4
           /* STYLE */
         )
@@ -11715,7 +11749,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$x = { class: "vc-sketch-saturation-wrap" };
   const _hoisted_2$o = { class: "vc-sketch-controls" };
   const _hoisted_3$e = { class: "vc-sketch-sliders" };
-  const _hoisted_4$9 = { class: "vc-sketch-hue-wrap" };
+  const _hoisted_4$8 = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$8 = {
     key: 0,
     class: "vc-sketch-alpha-wrap"
@@ -11763,7 +11797,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         ]),
         vue.createElementVNode("div", _hoisted_2$o, [
           vue.createElementVNode("div", _hoisted_3$e, [
-            vue.createElementVNode("div", _hoisted_4$9, [
+            vue.createElementVNode("div", _hoisted_4$8, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
                 onChange: $options.childChange
@@ -11968,7 +12002,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$v = { class: "group-editor group-editor-background" };
   const _hoisted_2$m = { class: "flex-align-center" };
   const _hoisted_3$d = { class: "title" };
-  const _hoisted_4$8 = { class: "color" };
+  const _hoisted_4$7 = { class: "color" };
   const _hoisted_5$7 = { class: "image mt-4" };
   const _hoisted_6$6 = {
     key: 0,
@@ -12018,7 +12052,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ])
             ]),
             vue.createElementVNode("div", null, [
-              vue.createElementVNode("div", _hoisted_4$8, [
+              vue.createElementVNode("div", _hoisted_4$7, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.color" }]
                 ]),
@@ -12088,7 +12122,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$u = { class: "group-editor group-editor-border" };
   const _hoisted_2$l = { class: "flex-align-center" };
   const _hoisted_3$c = { class: "title" };
-  const _hoisted_4$7 = { class: "" };
+  const _hoisted_4$6 = { class: "" };
   const _hoisted_5$6 = { class: "sub-title" };
   const _hoisted_6$5 = { class: "color" };
   const _hoisted_7$5 = { class: "mt-8" };
@@ -12149,7 +12183,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.border" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$7, [
+            vue.createElementVNode("div", _hoisted_4$6, [
               vue.createElementVNode("div", _hoisted_5$6, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.borderColor" }]
@@ -12275,7 +12309,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$t = { class: "group-editor group-editor-margin" };
   const _hoisted_2$k = { class: "flex-align-center" };
   const _hoisted_3$b = { class: "title" };
-  const _hoisted_4$6 = { class: "flex-grow-1" };
+  const _hoisted_4$5 = { class: "flex-grow-1" };
   const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$4 = { class: "text-center" };
   const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
@@ -12311,7 +12345,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.margin" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$6, [
+            vue.createElementVNode("div", _hoisted_4$5, [
               vue.createElementVNode("div", _hoisted_5$5, [
                 vue.createElementVNode("div", _hoisted_6$4, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -12363,7 +12397,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$s = { class: "group-editor group-editor-padding" };
   const _hoisted_2$j = { class: "flex-align-center" };
   const _hoisted_3$a = { class: "title" };
-  const _hoisted_4$5 = { class: "flex-grow-1" };
+  const _hoisted_4$4 = { class: "flex-grow-1" };
   const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$3 = { class: "text-center" };
   const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
@@ -12399,7 +12433,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.padding" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$5, [
+            vue.createElementVNode("div", _hoisted_4$4, [
               vue.createElementVNode("div", _hoisted_5$4, [
                 vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -12834,7 +12868,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     key: 0,
     class: "title mt-12"
   };
-  const _hoisted_4$4 = { class: "url mt-8" };
+  const _hoisted_4$3 = { class: "url mt-8" };
   const _hoisted_5$3 = { class: "title mt-12" };
   const _hoisted_6$2 = { class: "title mt-12" };
   const _hoisted_7$2 = { class: "title mt-12" };
@@ -12926,7 +12960,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ]),
           ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
             _cache[4] || (_cache[4] = vue.createElementVNode("label", null, "URL", -1)),
-            vue.createElementVNode("div", _hoisted_4$4, [
+            vue.createElementVNode("div", _hoisted_4$3, [
               vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
               vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
                 class: "border-0 mb-2 px-1",
@@ -13282,17 +13316,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               propertyName: "aspectRatio",
               caption: "pb.prop.aspectRatio",
               propertyType: "text",
-              params: ""
+              params: "",
+              readonly: true
             }
           ]
         },
         ...defaultWidgetPropertyGroups()
       ],
-      initialProperties: {
-        aspectRatio: "16/9"
-      },
+      initialProperties: {},
       allowsChild: () => false,
-      creator: () => _sfc_main$4$1
+      creator: () => PbYoutubeWidget
     }
     /*
      * BSP에서 사용안함
@@ -17928,7 +17961,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     key: 0,
     class: "title mt-12"
   };
-  const _hoisted_4$3 = { class: "mt-8" };
+  const _hoisted_4$2 = { class: "mt-8" };
   const _hoisted_5$2 = { class: "title mt-12" };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorImage",
@@ -17991,7 +18024,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ]),
           ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
             _cache[0] || (_cache[0] = vue.createElementVNode("label", null, "URL", -1)),
-            vue.createElementVNode("div", _hoisted_4$3, [
+            vue.createElementVNode("div", _hoisted_4$2, [
               vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
               vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
                 class: "border-0 mb-2 px-1",
@@ -18120,11 +18153,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const modal = bluesea.useModal();
       const emit = __emit;
       const clearVideo = () => {
-        emit("update-property-value", { url: "" });
+        emit("update-property-value", { url: "", aspectRatio: "" });
       };
       const selectVideo = () => {
-        selectYoutubeVideo(modal, props.value, (url) => {
-          emit("update-property-value", { url: url || "" });
+        selectYoutubeVideo(modal, props.value, (url, aspectRatio) => {
+          const properties = { url: url || "" };
+          if (aspectRatio) {
+            properties.aspectRatio = aspectRatio;
+          }
+          emit("update-property-value", properties);
         });
       };
       return (_ctx, _cache) => {
@@ -18164,8 +18201,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$3 = { class: "bs-layout-vertical flex-grow-1 h-full" };
   const _hoisted_2$3 = { class: "pt-8" };
-  const _hoisted_3$3 = { class: "w-480 h-360 border-w-1 border border-gray" };
-  const _hoisted_4$2 = { class: "bs-layout-horizontal justify-content-center" };
+  const _hoisted_3$3 = { class: "bs-layout-horizontal justify-content-center" };
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbYoutubeModal",
     props: {
@@ -18176,12 +18212,51 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const props = __props;
       const emit = __emit;
       const modalHandle = bluesea.useModalHandle();
+      const previewContainer = vue.ref();
       const url = vue.ref(props.url);
+      const aspectRatio = vue.ref();
+      const previewWidth = vue.ref(480);
+      const previewHeight = vue.ref(360);
+      const fetchAspectRatio = async (videoUrl) => {
+        try {
+          const oembedUrl = `https://www.youtube.com/oembed?url=${encodeURIComponent(videoUrl)}&format=json`;
+          const response = await fetch(oembedUrl);
+          if (!response.ok) return;
+          const data = await response.json();
+          if (data.width && data.height) {
+            aspectRatio.value = `${data.width}/${data.height}`;
+            previewHeight.value = Math.round(previewWidth.value * data.height / data.width);
+          }
+        } catch {
+        }
+      };
       const updateUrl = (value) => {
         url.value = value;
+        aspectRatio.value = void 0;
+        if (value) {
+          fetchAspectRatio(value);
+        }
+      };
+      if (props.url) {
+        fetchAspectRatio(props.url);
+      }
+      const measureContainer = () => {
+        var _a;
+        const w = (_a = previewContainer.value) == null ? void 0 : _a.clientWidth;
+        if (w && w > 0) {
+          previewWidth.value = w;
+          previewHeight.value = Math.round(w * 9 / 16);
+          return true;
+        }
+        return false;
       };
+      vue.onMounted(() => {
+        if (!measureContainer()) {
+          requestAnimationFrame(() => measureContainer());
+        }
+      });
       const ok = () => {
-        emit("selectUrl", url.value);
+        emit("selectUrl", url.value, aspectRatio.value);
         modalHandle.close();
       };
       return (_ctx, _cache) => {
@@ -18202,20 +18277,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               vue.withDirectives(vue.createElementVNode("div", _hoisted_2$3, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.modal.youtube.preview" }]
               ]),
-              vue.createElementVNode("div", _hoisted_3$3, [
+              vue.createElementVNode("div", {
+                ref_key: "previewContainer",
+                ref: previewContainer,
+                class: "preview-container border-w-1 border border-gray",
+                style: vue.normalizeStyle({ minHeight: url.value ? void 0 : "300px", overflow: "hidden" })
+              }, [
                 url.value ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
                   key: 0,
                   ref: "youtube",
                   src: url.value,
-                  class: "youtube",
-                  height: "360",
-                  width: "480"
-                }, null, 8, ["src"])) : vue.createCommentVNode("", true)
-              ])
+                  width: previewWidth.value,
+                  height: previewHeight.value
+                }, null, 8, ["src", "width", "height"])) : vue.createCommentVNode("", true)
+              ], 4)
             ])
           ]),
           buttons: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_4$2, [
+            vue.createElementVNode("div", _hoisted_3$3, [
               vue.withDirectives(vue.createElementVNode("button", {
                 class: "mr-4",
                 onClick: ok
@@ -18229,9 +18308,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const PbYoutubeModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const PbYoutubeModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c0ba6980"]]);
+  const PbYoutubeModal$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$3
+    default: PbYoutubeModal
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$2 = { class: "bs-layout-vertical pb-part-add-modal" };
   const _hoisted_2$2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
@@ -18586,7 +18666,7 @@ ${_html.tags}` : "";
   exports2.PbIframeWidget = _sfc_main$5$1;
   exports2.PbMediaWidget = _sfc_main$8$1;
   exports2.PbTextWidget = _sfc_main$7$1;
-  exports2.PbYoutubeWidget = _sfc_main$4$1;
+  exports2.PbYoutubeWidget = PbYoutubeWidget;
   exports2.ROOT_TYPE = ROOT_TYPE$1;
   exports2.RootPart = RootPart;
   exports2.SECTION_TYPE = SECTION_TYPE$1;

package/dist/style.css

@@ -385,4 +385,9 @@
   line-height: 1;
   height: 28px;
   background-color: var(--primary);
-}
+}
+.preview-container[data-v-c0ba6980] {
+  width: 100%;
+  min-height: 300px;
+  overflow: hidden;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.100",
+  "version": "1.0.0-alpha.101",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -31,7 +31,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.100"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.101"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",

package/dist/PbYoutubeModal-CU8sClMD.js

@@ -1,73 +0,0 @@
-import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createElementVNode, withDirectives, createVNode, createCommentVNode } from "vue";
-import { useModalHandle, BSModalFrame, vT, BSTextInput } from "@g1cloud/bluesea";
-import YouTube from "vue3-youtube";
-const _hoisted_1 = { class: "bs-layout-vertical flex-grow-1 h-full" };
-const _hoisted_2 = { class: "pt-8" };
-const _hoisted_3 = { class: "w-480 h-360 border-w-1 border border-gray" };
-const _hoisted_4 = { class: "bs-layout-horizontal justify-content-center" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "PbYoutubeModal",
-  props: {
-    url: {}
-  },
-  emits: ["selectUrl"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const modalHandle = useModalHandle();
-    const url = ref(props.url);
-    const updateUrl = (value) => {
-      url.value = value;
-    };
-    const ok = () => {
-      emit("selectUrl", url.value);
-      modalHandle.close();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(BSModalFrame), {
-        title: { key: "pb.modal.youtube.title" },
-        class: "pb-youtube-modal"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            withDirectives(createElementVNode("div", null, null, 512), [
-              [unref(vT), { key: "pb.modal.youtube.url" }]
-            ]),
-            createVNode(unref(BSTextInput), {
-              "model-value": url.value,
-              width: "100%",
-              "onUpdate:modelValue": updateUrl
-            }, null, 8, ["model-value"]),
-            withDirectives(createElementVNode("div", _hoisted_2, null, 512), [
-              [unref(vT), { key: "pb.modal.youtube.preview" }]
-            ]),
-            createElementVNode("div", _hoisted_3, [
-              url.value ? (openBlock(), createBlock(unref(YouTube), {
-                key: 0,
-                ref: "youtube",
-                src: url.value,
-                class: "youtube",
-                height: "360",
-                width: "480"
-              }, null, 8, ["src"])) : createCommentVNode("", true)
-            ])
-          ])
-        ]),
-        buttons: withCtx(() => [
-          createElementVNode("div", _hoisted_4, [
-            withDirectives(createElementVNode("button", {
-              class: "mr-4",
-              onClick: ok
-            }, null, 512), [
-              [unref(vT), { key: "pb.button.ok" }]
-            ])
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-export {
-  _sfc_main as default
-};