@g1cloud/bluesea 5.0.0-alpha.80 → 5.0.0-alpha.81

package/css/component.scss

@@ -31,6 +31,7 @@
     margin-right: 4px;
     margin-left: 4px;
     background-color: $color-gray-200;
+    color: $color-body-text;
     padding: 2px 4px;
     border-radius: 2px;
     line-height: 1;
@@ -51,6 +52,17 @@
   }
 }
 
+[data-theme="dark"] {
+  .bs-input-wrap {
+    .suffix,
+    .prefix {
+      img {
+        filter: invert(1);
+      }
+    }
+  }
+}
+
 .bs-input-base {
   @extend .bs-box-component-base;
   border: 1px solid $color-border;

package/css/variable.scss

@@ -143,6 +143,7 @@ $gray-100: $gray-100;
 $gray-200: $gray-200;
 $gray-400: $gray-400;
 $gray-500: $gray-500;
+$primary-100: $primary-100;
 $primary-200: $primary-200;
 $primary-300: $primary-300;
 $black: $black;
@@ -179,6 +180,7 @@ $gray-100-dark: $gray-800;
 $gray-200-dark: $gray-700;
 $gray-400-dark: $gray-600;
 $gray-500-dark: $gray-400;
+$primary-100-dark: $primary-600;
 $primary-200-dark: $primary-600;
 $primary-300-dark: $primary-500;
 $black-dark: $gray-200;
@@ -216,6 +218,7 @@ $gray-bg-dark: $gray-500;
   $gray-200,
   $gray-400,
   $gray-500,
+  $primary-100,
   $primary-200,
   $primary-300,
   $black,
@@ -252,6 +255,7 @@ $gray-bg-dark: $gray-500;
   --gray-200: #{$gray-200};
   --gray-400: #{$gray-400};
   --gray-500: #{$gray-500};
+  --primary-100: #{$primary-100};
   --primary-200: #{$primary-200};
   --primary-300: #{$primary-300};
   --black: #{$black};
@@ -291,6 +295,7 @@ $gray-bg-dark: $gray-500;
                   $gray-200,
                   $gray-400,
                   $gray-500,
+                  $primary-100,
                   $primary-200,
                   $primary-300,
                   $black,
@@ -331,6 +336,7 @@ $gray-bg-dark: $gray-500;
                   $gray-200-dark,
                   $gray-400-dark,
                   $gray-500-dark,
+                  $primary-100-dark,
                   $primary-200-dark,
                   $primary-300-dark,
                   $black-dark,
@@ -369,6 +375,7 @@ $color-gray-100: var(--gray-100);
 $color-gray-200: var(--gray-200);
 $color-gray-400: var(--gray-400);
 $color-gray-500: var(--gray-500);
+$color-primary-100: var(--primary-100);
 $color-primary-200: var(--primary-200);
 $color-primary-300: var(--primary-300);
 $color-black: var(--black);

package/dist/{BSAlertModal-hE2DZjma.js → BSAlertModal-D2Jjrlkw.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, withDirectives, createVNode, unref } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, v as vFocusOnLoad, i as vT } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, v as vFocusOnLoad, i as vT } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "text-right" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BSAlertModal",

package/dist/{BSGridColumnSettingModal-DA-7eX5k.js → BSGridColumnSettingModal-BXSquaY_.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onMounted, openBlock, createBlock, withCtx, createVNode, mergeProps, unref, toHandlers, createElementVNode, nextTick } from "vue";
-import { d as createInputGridHandler, u as useModalHandle, _ as _sfc_main$1, f as _sfc_main$2, g as _sfc_main$3, h as _sfc_main$4, B as BSButton, n as notNull } from "./index-Be-CeEVk.js";
+import { d as createInputGridHandler, u as useModalHandle, _ as _sfc_main$1, f as _sfc_main$2, g as _sfc_main$3, h as _sfc_main$4, B as BSButton, n as notNull } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "text-center" };
 const _hoisted_2 = { class: "text-center" };
 const _hoisted_3 = { class: "bs-layout-horizontal" };

package/dist/{BSYesNoModal-DTy54Jpi.js → BSYesNoModal-D9sD-VwJ.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, withDirectives, unref } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, i as vT } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, i as vT } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "text-right" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BSYesNoModal",

package/dist/{BSYoutubeInputModal-CTXZnA-K.js → BSYoutubeInputModal-BpZkgfto.js}

@@ -1,5 +1,5 @@
 import { defineComponent, useModel, ref, openBlock, createBlock, withCtx, createElementVNode, createVNode, unref, createCommentVNode } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, B as BSButton, e as extractYoutubeVideoId } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, B as BSButton, e as extractYoutubeVideoId } from "./index-BAXbOtz2.js";
 import YouTube from "vue3-youtube";
 const _hoisted_1 = { class: "bs-layout-vertical gap-16" };
 const _hoisted_2 = { class: "bs-layout-horizontal align-items-center" };

package/dist/{ImageInsertModal-DcVUeFpY.js → ImageInsertModal-DnvIwftS.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, openBlock, createBlock, withCtx, createVNode, withDirectives, createElementVNode, vShow } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, a as _sfc_main$2, b as _sfc_main$3, c as _sfc_main$4, B as BSButton } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, a as _sfc_main$2, b as _sfc_main$3, c as _sfc_main$4, B as BSButton } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "bs-layout-form title-w-8" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "title" };

package/dist/{ImagePropertiesModal-Ctn7Gpt4.js → ImagePropertiesModal-BuJMvpfv.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onMounted, useTemplateRef, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, createCommentVNode } from "vue";
-import { j as findImageNode, u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, B as BSButton, k as numberToPixel, l as formValidator } from "./index-Be-CeEVk.js";
+import { j as findImageNode, u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, B as BSButton, k as numberToPixel, l as formValidator } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "title" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "title" };

package/dist/{LinkPropertiesModal-B82TISWQ.js → LinkPropertiesModal-BA-98ovK.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onMounted, openBlock, createBlock, withCtx, createElementVNode, createVNode } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, B as BSButton } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, B as BSButton } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "bs-layout-form title-w-8" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "title" };

package/dist/{TableInsertModal-OexXM9kA.js → TableInsertModal-B8JAu3Az.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, openBlock, createBlock, withCtx, createElementVNode, createVNode } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, h as _sfc_main$3, B as BSButton } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, h as _sfc_main$3, B as BSButton } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "bs-layout-form" };
 const _hoisted_2 = { class: "bs-form-label" };
 const _hoisted_3 = { class: "bs-form-label" };

package/dist/{YoutubeInsertModal-DjRrpAYh.js → YoutubeInsertModal-c0PxK-rJ.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, openBlock, createBlock, withCtx, createElementVNode, createVNode } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, h as _sfc_main$4, B as BSButton } from "./index-Be-CeEVk.js";
+import { u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, h as _sfc_main$4, B as BSButton } from "./index-BAXbOtz2.js";
 const _hoisted_1 = { class: "bs-layout-form" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "title" };

package/dist/{YoutubePropertiesModal-Dmxcch4n.js → YoutubePropertiesModal-d1WWm7Uf.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onMounted, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, createCommentVNode } from "vue";
-import { N as NodeSelection, u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, h as _sfc_main$4, B as BSButton } from "./index-Be-CeEVk.js";
+import { N as NodeSelection, u as useModalHandle, _ as _sfc_main$1, b as _sfc_main$2, c as _sfc_main$3, h as _sfc_main$4, B as BSButton } from "./index-BAXbOtz2.js";
 const findYoutubeNode = (selection) => {
   if (selection instanceof NodeSelection) {
     const node = selection.node;

package/dist/bluesea.js

@@ -1,4 +1,4 @@
-import { ar, as, bi, bj, m, ac, ah, B, y, z, $, g, G, ae, C, s, ai, bT, w, D, E, Y, Z, F, b, f, W, V, ad, S, q, a1, a0, t, a9, bD, af, _, T, a7, a8, a6, a5, a4, L, aa, ag, h, x, p, P, U, A, r, H, I, R, K, a, ab, Q, X, c, a2, a3, O, M, J, o, bq, bp, aA, ak, bX, aj, aH, aF, aC, bo, aJ, aI, b$, ax, bg, bm, aG, bn, aK, ao, ap, an, aq, bl, bk, aE, bh, b6, bA, aO, ay, aU, bz, c8, bJ, br, by, bx, av, b9, bL, aw, bW, bY, d, bG, aD, aR, at, aS, au, bw, b3, b4, b5, b0, b2, b1, e, a$, aY, l, c1, az, bR, bO, c0, bu, am, c9, c6, ca, ba, c7, bc, aV, bv, aX, cb, aB, bt, n, bH, bs, c5, bZ, bB, bF, b7, aL, aP, bf, bb, bd, be, bK, bQ, bP, bI, bN, aW, aT, bM, c4, bU, bV, b_, bC, bE, u, b8, aM, aN, aQ, al, i, aZ, a_, c3, c2, bS } from "./index-Be-CeEVk.js";
+import { ar, as, bi, bj, m, ac, ah, B, y, z, $, g, G, ae, C, s, ai, bT, w, D, E, Y, Z, F, b, f, W, V, ad, S, q, a1, a0, t, a9, bD, af, _, T, a7, a8, a6, a5, a4, L, aa, ag, h, x, p, P, U, A, r, H, I, R, K, a, ab, Q, X, c, a2, a3, O, M, J, o, bq, bp, aA, ak, bX, aj, aH, aF, aC, bo, aJ, aI, b$, ax, bg, bm, aG, bn, aK, ao, ap, an, aq, bl, bk, aE, bh, b6, bA, aO, ay, aU, bz, c8, bJ, br, by, bx, av, b9, bL, aw, bW, bY, d, bG, aD, aR, at, aS, au, bw, b3, b4, b5, b0, b2, b1, e, a$, aY, l, c1, az, bR, bO, c0, bu, am, c9, c6, ca, ba, c7, bc, aV, bv, aX, cb, aB, bt, n, bH, bs, c5, bZ, bB, bF, b7, aL, aP, bf, bb, bd, be, bK, bQ, bP, bI, bN, aW, aT, bM, c4, bU, bV, b_, bC, bE, u, b8, aM, aN, aQ, al, i, aZ, a_, c3, c2, bS } from "./index-BAXbOtz2.js";
 export {
   ar as ADDRESS_COUNTRY_CONFIGS,
   as as ADDRESS_COUNTRY_CONFIG_DEFAULT,

package/dist/bluesea.umd.cjs

@@ -34388,20 +34388,23 @@ img.ProseMirror-separator {
             class: vue.normalizeClass([_ctx.column.cellStyleClass, "text-nowrap text-ellipsis"]),
             style: vue.normalizeStyle(_ctx.column.cellStyleCss)
           }, [
-            _ctx.editing ? vue.renderSlot(_ctx.$slots, `${_ctx.column.propertyId}Edit`, {
+            _ctx.editing ? vue.renderSlot(_ctx.$slots, `${_ctx.column.templateId}Edit`, {
               key: 0,
               cell: cellValue.value,
+              propertyId: _ctx.column.propertyId,
               row: _ctx.row
             }, () => [
-              vue.renderSlot(_ctx.$slots, _ctx.column.propertyId, {
+              vue.renderSlot(_ctx.$slots, _ctx.column.templateId, {
                 cell: cellValue.value,
+                propertyId: _ctx.column.propertyId,
                 row: _ctx.row
               }, () => [
                 vue.createTextVNode(vue.toDisplayString(formattedCellValue.value), 1)
               ])
-            ]) : vue.renderSlot(_ctx.$slots, _ctx.column.propertyId, {
+            ]) : vue.renderSlot(_ctx.$slots, _ctx.column.templateId, {
               key: 1,
               cell: cellValue.value,
+              propertyId: _ctx.column.propertyId,
               row: _ctx.row
             }, () => [
               vue.createTextVNode(vue.toDisplayString(formattedCellValue.value), 1)
@@ -34711,15 +34714,17 @@ img.ProseMirror-separator {
               "select-on-click": _ctx.selectOnClick,
               onToggleSelection: toggleSelection
             }, {
-              [column.propertyId]: vue.withCtx(({ row, cell }) => [
-                vue.renderSlot(_ctx.$slots, column.propertyId, {
+              [column.templateId]: vue.withCtx(({ row, cell, propertyId }) => [
+                vue.renderSlot(_ctx.$slots, column.templateId, {
                   cell,
+                  propertyId,
                   row
                 })
               ]),
-              [`${column.propertyId}Edit`]: vue.withCtx(({ row, cell }) => [
-                vue.renderSlot(_ctx.$slots, `${column.propertyId}Edit`, {
+              [`${column.templateId}Edit`]: vue.withCtx(({ row, cell, propertyId }) => [
+                vue.renderSlot(_ctx.$slots, `${column.templateId}Edit`, {
                   cell,
+                  propertyId,
                   row
                 })
               ]),
@@ -34786,6 +34791,8 @@ img.ProseMirror-separator {
         }).filter((col) => col.propertyId) : props.columns;
         return visibleColumns.map((col, index) => ({
           ...col,
+          templateId: col.templateId || col.propertyId,
+          // templateId 가 없으면 propertyId 를 사용한다.
           render: vue.reactive({
             width: col.width || DEFAULT_GRID_COLUMN_WIDTH,
             fixed: index < props.fixedColumnCount
@@ -35066,9 +35073,10 @@ img.ProseMirror-separator {
                     vue.renderList(Object.keys(_ctx.$slots), (slot, index2) => {
                       return {
                         name: slot,
-                        fn: vue.withCtx(({ row: row2, cell }) => [
+                        fn: vue.withCtx(({ row: row2, cell, propertyId }) => [
                           vue.renderSlot(_ctx.$slots, slot, {
                             cell,
+                            propertyId,
                             row: row2
                           })
                         ])

package/dist/component/grid/BSGrid.vue.d.ts

@@ -40,6 +40,7 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
     attrs: any;
     slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>>;
     emit: {
@@ -91,6 +92,7 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
     attrs: any;
     slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>>;
     emit: {
@@ -145,6 +147,7 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
         attrs: any;
         slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
             cell: any;
+            propertyId: string;
             row: T;
         }) => any>>;
         emit: {

package/dist/component/grid/BSGridCell.vue.d.ts

@@ -13,12 +13,15 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
     attrs: any;
     slots: Partial<Record<`${string}Edit`, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>> & Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>> & Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>>;
     emit: (e: 'toggleSelection', column: Column) => void;
@@ -36,12 +39,15 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
     attrs: any;
     slots: Partial<Record<`${string}Edit`, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>> & Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>> & Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>>;
     emit: (e: 'toggleSelection', column: Column) => void;
@@ -62,12 +68,15 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
         attrs: any;
         slots: Partial<Record<`${string}Edit`, (_: {
             cell: any;
+            propertyId: string;
             row: T;
         }) => any>> & Partial<Record<string, (_: {
             cell: any;
+            propertyId: string;
             row: T;
         }) => any>> & Partial<Record<string, (_: {
             cell: any;
+            propertyId: string;
             row: T;
         }) => any>>;
         emit: (e: 'toggleSelection', column: Column) => void;

package/dist/component/grid/BSGridRow.vue.d.ts

@@ -31,9 +31,11 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
     attrs: any;
     slots: Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>> & Partial<Record<`${string}Edit`, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>>;
     emit: {
@@ -73,9 +75,11 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
     attrs: any;
     slots: Partial<Record<string, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>> & Partial<Record<`${string}Edit`, (_: {
         cell: any;
+        propertyId: string;
         row: T;
     }) => any>>;
     emit: {
@@ -118,9 +122,11 @@ declare const _default: <T extends GridRowData>(__VLS_props: {
         attrs: any;
         slots: Partial<Record<string, (_: {
             cell: any;
+            propertyId: string;
             row: T;
         }) => any>> & Partial<Record<`${string}Edit`, (_: {
             cell: any;
+            propertyId: string;
             row: T;
         }) => any>>;
         emit: {

package/dist/component/grid/GridLib.d.ts

@@ -6,6 +6,7 @@ export type ColumnRender = {
     hidden?: boolean;
 };
 export type InternalColumn = Column & {
+    templateId: string;
     render: ColumnRender;
 };
 export declare const setFixedCellLeftStyle: (table?: HTMLTableElement) => Promise<void>;

package/dist/component/grid/GridModel.d.ts

@@ -10,6 +10,7 @@ export declare const DEFAULT_GRID_COLUMN_WIDTH = 100;
 export type GridCellType = 'TEXT' | 'NUMBER' | 'DATE' | 'PERCENTAGE' | 'BOOL' | 'MULTI_LANG_STRING' | 'NAME' | 'TEL' | 'ADDRESS' | 'MONEY';
 export type Column = {
     propertyId: string;
+    templateId?: string;
     caption: MultiLangText;
     cellType?: GridCellType;
     dateFormat?: string | DisplayDateResolution;

package/dist/{index-Be-CeEVk.js → index-BAXbOtz2.js}

@@ -61,7 +61,7 @@ const defaultAddressInputComponentConfig = {
   countryConfigs: ADDRESS_COUNTRY_CONFIGS
 };
 const defaultRichTextComponentConfig = {
-  imageInsertModal: defineAsyncComponent(() => import("./ImageInsertModal-DcVUeFpY.js"))
+  imageInsertModal: defineAsyncComponent(() => import("./ImageInsertModal-DnvIwftS.js"))
 };
 class BlueseaConfig {
   constructor() {
@@ -5077,7 +5077,7 @@ class BSModal {
   }
   openAlert(title, message, clickHandler2) {
     const option = {
-      component: defineAsyncComponent(() => import("./BSAlertModal-hE2DZjma.js")),
+      component: defineAsyncComponent(() => import("./BSAlertModal-D2Jjrlkw.js")),
       bind: {
         title,
         message
@@ -5090,7 +5090,7 @@ class BSModal {
   }
   openYesNo(title, message, yesHandler, noHandler) {
     const option = {
-      component: defineAsyncComponent(() => import("./BSYesNoModal-DTy54Jpi.js")),
+      component: defineAsyncComponent(() => import("./BSYesNoModal-D9sD-VwJ.js")),
       bind: {
         title,
         message
@@ -29937,7 +29937,7 @@ const tableContextMenus = (_modal, editor) => {
 };
 const insertTable = (modal, editor) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./TableInsertModal-OexXM9kA.js")),
+    component: defineAsyncComponent(() => import("./TableInsertModal-B8JAu3Az.js")),
     bind: { editor }
   });
 };
@@ -30102,7 +30102,7 @@ const insertImage = (modal, editor) => {
   const component = (_a2 = blueseaConfig.componentConfig.richText) == null ? void 0 : _a2.imageInsertModal;
   if (component) {
     modal.openModal({
-      component: defineAsyncComponent(() => import("./ImageInsertModal-DcVUeFpY.js")),
+      component: defineAsyncComponent(() => import("./ImageInsertModal-DnvIwftS.js")),
       bind: { editor },
       on: {
         insertImage: (image) => {
@@ -30125,7 +30125,7 @@ const insertImage = (modal, editor) => {
 };
 const showImageProperties = (modal, editor) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./ImagePropertiesModal-Ctn7Gpt4.js")),
+    component: defineAsyncComponent(() => import("./ImagePropertiesModal-BuJMvpfv.js")),
     bind: { editor }
   });
 };
@@ -30397,13 +30397,13 @@ const youtubeContextMenu = (modal, editor) => {
 };
 const insertYoutube = (modal, editor) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./YoutubeInsertModal-DjRrpAYh.js")),
+    component: defineAsyncComponent(() => import("./YoutubeInsertModal-c0PxK-rJ.js")),
     bind: { editor }
   });
 };
 const showYoutubeProperties = (modal, editor) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./YoutubePropertiesModal-Dmxcch4n.js")),
+    component: defineAsyncComponent(() => import("./YoutubePropertiesModal-d1WWm7Uf.js")),
     bind: { editor }
   });
 };
@@ -30447,7 +30447,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     const showLinkProperties = () => {
       if (!props.disabled) {
         modal.openModal({
-          component: defineAsyncComponent(() => import("./LinkPropertiesModal-B82TISWQ.js")),
+          component: defineAsyncComponent(() => import("./LinkPropertiesModal-BA-98ovK.js")),
           bind: {
             editor: props.editor
           }
@@ -32816,7 +32816,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const modal = useModal();
     const enterYoutubeUrl = () => {
       modal.openModal({
-        component: defineAsyncComponent(() => import("./BSYoutubeInputModal-CTXZnA-K.js")),
+        component: defineAsyncComponent(() => import("./BSYoutubeInputModal-BpZkgfto.js")),
         on: {
           "update:modelValue": (url) => {
             emit("update:modelValue", {
@@ -34387,20 +34387,23 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           class: normalizeClass([_ctx.column.cellStyleClass, "text-nowrap text-ellipsis"]),
           style: normalizeStyle(_ctx.column.cellStyleCss)
         }, [
-          _ctx.editing ? renderSlot(_ctx.$slots, `${_ctx.column.propertyId}Edit`, {
+          _ctx.editing ? renderSlot(_ctx.$slots, `${_ctx.column.templateId}Edit`, {
             key: 0,
             cell: cellValue.value,
+            propertyId: _ctx.column.propertyId,
             row: _ctx.row
           }, () => [
-            renderSlot(_ctx.$slots, _ctx.column.propertyId, {
+            renderSlot(_ctx.$slots, _ctx.column.templateId, {
               cell: cellValue.value,
+              propertyId: _ctx.column.propertyId,
               row: _ctx.row
             }, () => [
               createTextVNode(toDisplayString(formattedCellValue.value), 1)
             ])
-          ]) : renderSlot(_ctx.$slots, _ctx.column.propertyId, {
+          ]) : renderSlot(_ctx.$slots, _ctx.column.templateId, {
             key: 1,
             cell: cellValue.value,
+            propertyId: _ctx.column.propertyId,
             row: _ctx.row
           }, () => [
             createTextVNode(toDisplayString(formattedCellValue.value), 1)
@@ -34710,15 +34713,17 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             "select-on-click": _ctx.selectOnClick,
             onToggleSelection: toggleSelection
           }, {
-            [column.propertyId]: withCtx(({ row, cell }) => [
-              renderSlot(_ctx.$slots, column.propertyId, {
+            [column.templateId]: withCtx(({ row, cell, propertyId }) => [
+              renderSlot(_ctx.$slots, column.templateId, {
                 cell,
+                propertyId,
                 row
               })
             ]),
-            [`${column.propertyId}Edit`]: withCtx(({ row, cell }) => [
-              renderSlot(_ctx.$slots, `${column.propertyId}Edit`, {
+            [`${column.templateId}Edit`]: withCtx(({ row, cell, propertyId }) => [
+              renderSlot(_ctx.$slots, `${column.templateId}Edit`, {
                 cell,
+                propertyId,
                 row
               })
             ]),
@@ -34785,6 +34790,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       }).filter((col) => col.propertyId) : props.columns;
       return visibleColumns.map((col, index) => ({
         ...col,
+        templateId: col.templateId || col.propertyId,
+        // templateId 가 없으면 propertyId 를 사용한다.
         render: reactive({
           width: col.width || DEFAULT_GRID_COLUMN_WIDTH,
           fixed: index < props.fixedColumnCount
@@ -35065,9 +35072,10 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   renderList(Object.keys(_ctx.$slots), (slot, index2) => {
                     return {
                       name: slot,
-                      fn: withCtx(({ row: row2, cell }) => [
+                      fn: withCtx(({ row: row2, cell, propertyId }) => [
                         renderSlot(_ctx.$slots, slot, {
                           cell,
+                          propertyId,
                           row: row2
                         })
                       ])
@@ -35591,7 +35599,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const modal = useModal();
     const openSettingModal = () => {
       modal.openModal({
-        component: defineAsyncComponent(() => import("./BSGridColumnSettingModal-DA-7eX5k.js")),
+        component: defineAsyncComponent(() => import("./BSGridColumnSettingModal-BXSquaY_.js")),
         bind: {
           columns: props.columns,
           columnSettings: props.columnSettings,