@j-solution/components 1.6.1 → 1.8.0

package/components/examples/ExampleCrudPage.vue.js

@@ -1,6 +1,5 @@
-import { defineComponent as U, ref as s, createElementBlock as R, openBlock as g, createVNode as i, unref as a, withCtx as r, createElementVNode as d, createTextVNode as c, toDisplayString as h, createBlock as D, createCommentVNode as E } from "vue";
-import m from "../molecules/JFormField.vue.js";
-/* empty css                           */
+import { defineComponent as $, ref as s, createBlock as v, openBlock as f, withCtx as r, createVNode as i, unref as o, createElementVNode as m, createTextVNode as p, createCommentVNode as h } from "vue";
+import d from "../molecules/JFormField.vue.js";
 import "../shadcn/index.js";
 import "@vueuse/core";
 import "reka-ui";
@@ -10,7 +9,8 @@ import "lucide-vue-next";
 /* empty css                      */
 /* empty css                            */
 /* empty css                             */
-import p from "../atoms/JButton.vue.js";
+import J from "../molecules/JCard.vue.js";
+import c from "../atoms/JButton.vue.js";
 import "@internationalized/date";
 import "md-editor-v3";
 /* empty css                                                                                                               */
@@ -21,65 +21,98 @@ import "../shadcn/avatar-variants.js";
 import "dompurify";
 /* empty css                     */
 import S from "../atoms/JGrid.vue.js";
-import H from "../atoms/JSplitter.vue.js";
+import G from "../atoms/JSplitter.vue.js";
+/* empty css                          */
 import "vue-sonner";
-import O from "../molecules/JTitlebar.vue.js";
+import _ from "../molecules/JEmptyState.vue.js";
 /* empty css                             */
 /* empty css                             */
-import j from "../organisms/JFilterBar.vue.js";
+import D from "../organisms/JFilterBar.vue.js";
 import "vue-router";
 /* empty css                               */
 /* empty css                                 */
-const G = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }, J = { class: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" }, L = { class: "h-full overflow-auto bg-background" }, P = { class: "h-full flex flex-col gap-4 overflow-y-auto p-4 border-l rounded-lg bg-card" }, T = { class: "text-lg font-semibold mb-2" }, X = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, Z = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, q = { class: "flex justify-end gap-2 mt-4" }, Ye = /* @__PURE__ */ U({
+import E from "../organisms/JPageContainer.vue.js";
+/* empty css                         */
+const F = { class: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2" }, H = { class: "h-full overflow-auto bg-background" }, O = { class: "h-full overflow-y-auto bg-muted/30" }, T = { class: "grid grid-cols-1 md:grid-cols-2 gap-2" }, W = { class: "grid grid-cols-1 md:grid-cols-2 gap-2 mt-2" }, L = { class: "grid grid-cols-1 gap-2 mt-2" }, Be = /* @__PURE__ */ $({
   __name: "ExampleCrudPage",
-  setup(F, { expose: y }) {
-    const f = s(!1), n = s({
+  setup(X, { expose: k }) {
+    const y = s(!1), n = s({
       isActive: "",
       keyword: ""
-    }), k = {
+    }), V = {
       isActive: {
         label: "활성여부",
-        displayValue: (o) => o === "Y" ? "Y:활성" : o === "N" ? "N:비활성" : ""
+        displayValue: (t) => t === "Y" ? "Y:활성" : t === "N" ? "N:비활성" : ""
       },
       keyword: {
         label: "검색어"
       }
-    }, b = [
+    }, A = [
       { value: "Y", label: "Y:활성" },
       { value: "N", label: "N:비활성" }
-    ], V = [
+    ], C = [
       { value: "A", label: "A등급" },
       { value: "B", label: "B등급" },
       { value: "C", label: "C등급" }
-    ], v = s(), A = s([
+    ], g = s(), w = s([
       { code: "C001", name: "제이솔루션", category: "A", isActive: "Y", remark: "주력 고객사" },
       { code: "C002", name: "ABC물류", category: "B", isActive: "Y", remark: "" },
       { code: "C003", name: "XYZ유통", category: "A", isActive: "N", remark: "비활성" },
       { code: "C004", name: "대한물류", category: "B", isActive: "Y", remark: "" },
       { code: "C005", name: "글로벌이커머스", category: "A", isActive: "Y", remark: "신규 고객사" }
-    ]), C = s([
-      { field: "code", headerName: "코드", width: 120 },
-      { field: "name", headerName: "이름", width: 200 },
-      { field: "category", headerName: "분류", width: 100 },
+    ]), x = s([
+      {
+        field: "code",
+        headerName: "코드",
+        width: 120,
+        enableValue: !0
+        // 집계 가능 (count)
+      },
+      {
+        field: "name",
+        headerName: "이름",
+        width: 200,
+        enableValue: !0
+        // 집계 가능 (count)
+      },
+      {
+        field: "category",
+        headerName: "분류",
+        width: 100,
+        enableRowGroup: !0,
+        // Row Group으로 사용 가능
+        enablePivot: !0
+        // Pivot Column으로 사용 가능
+      },
       {
         field: "isActive",
         headerName: "활성",
         width: 100,
-        cellRenderer: (o) => o.value === "Y" ? "✓" : ""
+        cellRenderer: (t) => t.value === "Y" ? "✓" : "",
+        enableRowGroup: !0,
+        // Row Group으로 사용 가능
+        enablePivot: !0
+        // Pivot Column으로 사용 가능
       },
-      { field: "remark", headerName: "비고", flex: 1 }
-    ]), x = [
+      {
+        field: "remark",
+        headerName: "비고",
+        flex: 1,
+        enableValue: !0
+        // 집계 가능 (count)
+      }
+    ]), N = [
       {
         icon: "pencil",
         label: "수정",
         tooltip: "편집",
-        onClick: (o) => {
+        onClick: (t) => {
           u.value = !1, l.value = {
-            code: o.code,
-            name: o.name,
-            category: o.category,
-            isActive: o.isActive,
-            remark: o.remark
+            code: t.code,
+            name: t.name,
+            category: t.category,
+            isActive: t.isActive,
+            remark: t.remark
           };
         }
       },
@@ -88,8 +121,8 @@ const G = { class: "flex flex-col h-full gap-4 bg-background text-foreground" },
         label: "삭제",
         tooltip: "삭제",
         styletype: "danger",
-        onClick: (o) => {
-          confirm(`${o.name}을(를) 삭제하시겠습니까?`) && (console.log("삭제:", o.code), alert(`삭제되었습니다: ${o.name}`));
+        onClick: (t) => {
+          confirm(`${t.name}을(를) 삭제하시겠습니까?`) && (console.log("삭제:", t.code), alert(`삭제되었습니다: ${t.name}`));
         }
       }
     ], u = s(!1), l = s({
@@ -99,9 +132,9 @@ const G = { class: "flex flex-col h-full gap-4 bg-background text-foreground" },
       isActive: "Y",
       remark: ""
     });
-    function N(o) {
+    function z(t) {
       u.value = !1;
-      const e = o.data;
+      const e = t.data;
       l.value = {
         code: e.code,
         name: e.name,
@@ -110,7 +143,7 @@ const G = { class: "flex flex-col h-full gap-4 bg-background text-foreground" },
         remark: e.remark
       };
     }
-    function w() {
+    function Y() {
       u.value = !0, l.value = {
         code: "",
         name: "",
@@ -119,186 +152,227 @@ const G = { class: "flex flex-col h-full gap-4 bg-background text-foreground" },
         remark: ""
       };
     }
-    function _() {
+    function B() {
       console.log("저장:", l.value), alert(`저장되었습니다: ${l.value.name}`);
     }
-    function Y() {
+    function U() {
       confirm(`${l.value.name}을(를) 삭제하시겠습니까?`) && (console.log("삭제:", l.value.code), alert(`삭제되었습니다: ${l.value.name}`));
     }
-    function z() {
+    function b() {
       n.value = {
         isActive: "",
         keyword: ""
       }, console.log("필터 초기화");
     }
-    function $() {
+    function P() {
       console.log("조회 조건:", n.value);
     }
-    function B() {
+    function R() {
       alert("고객사 관리 페이지 도움말");
     }
-    return y({ gridRef: v }), (o, e) => (g(), R("div", G, [
-      i(a(O), {
-        icon: "building",
-        title: "고객사 관리",
-        description: "고객사 정보를 조회하고 관리합니다",
-        showHelp: !0,
-        onHelp: B
-      }),
-      i(a(j), {
-        collapsed: f.value,
-        "onUpdate:collapsed": e[2] || (e[2] = (t) => f.value = t),
-        filterValues: n.value,
-        "onUpdate:filterValues": e[3] || (e[3] = (t) => n.value = t),
-        filterDisplay: k,
-        collapsible: !0,
-        title: "고객사 목록"
-      }, {
-        actions: r(() => [
-          i(a(p), {
-            size: "sm",
-            variant: "outline",
-            onClick: z
-          }, {
-            default: r(() => [...e[9] || (e[9] = [
-              c("초기화", -1)
-            ])]),
-            _: 1
-          }),
-          i(a(p), {
-            size: "sm",
-            styletype: "primary",
-            onClick: $
-          }, {
-            default: r(() => [...e[10] || (e[10] = [
-              c("조회", -1)
-            ])]),
-            _: 1
-          }),
-          i(a(p), {
-            size: "sm",
-            styletype: "primary",
-            onClick: w
-          }, {
-            default: r(() => [...e[11] || (e[11] = [
-              c("신규", -1)
-            ])]),
-            _: 1
-          })
-        ]),
-        filters: r(() => [
-          d("div", J, [
-            i(a(m), {
-              type: "combo",
-              label: "활성여부",
-              modelValue: n.value.isActive,
-              "onUpdate:modelValue": e[0] || (e[0] = (t) => n.value.isActive = t),
-              options: b
-            }, null, 8, ["modelValue"]),
-            i(a(m), {
-              type: "input",
-              label: "검색어",
-              modelValue: n.value.keyword,
-              "onUpdate:modelValue": e[1] || (e[1] = (t) => n.value.keyword = t)
-            }, null, 8, ["modelValue"])
-          ])
-        ]),
-        _: 1
-      }, 8, ["collapsed", "filterValues"]),
-      i(a(H), {
-        direction: "horizontal",
-        "default-size": 60,
-        "min-size": 30,
-        "second-min-size": 20,
-        "second-max-size": 60,
-        class: "flex-1"
-      }, {
-        left: r(() => [
-          d("div", L, [
-            i(a(S), {
-              ref_key: "gridRef",
-              ref: v,
-              columnDefs: C.value,
-              rowData: A.value,
-              "action-buttons": x,
-              onRowClicked: N
-            }, null, 8, ["columnDefs", "rowData"])
-          ])
-        ]),
-        right: r(() => [
-          d("div", P, [
-            d("h3", T, h(u.value ? "신규 등록" : "상세 정보"), 1),
-            d("div", X, [
-              i(a(m), {
-                type: "input",
-                label: "코드",
-                modelValue: l.value.code,
-                "onUpdate:modelValue": e[4] || (e[4] = (t) => l.value.code = t),
-                readonly: !u.value,
-                placeholder: "고객사 코드"
-              }, null, 8, ["modelValue", "readonly"]),
-              i(a(m), {
-                type: "input",
-                label: "이름",
-                modelValue: l.value.name,
-                "onUpdate:modelValue": e[5] || (e[5] = (t) => l.value.name = t),
-                placeholder: "고객사 이름"
-              }, null, 8, ["modelValue"])
-            ]),
-            d("div", Z, [
-              i(a(m), {
+    return k({ gridRef: g }), (t, e) => (f(), v(E, {
+      title: "고객사 관리",
+      icon: "building",
+      description: "고객사 정보를 조회하고 관리합니다",
+      showHelp: !0,
+      onHelp: R,
+      "content-scroll": !1
+    }, {
+      default: r(() => [
+        i(o(D), {
+          collapsed: y.value,
+          "onUpdate:collapsed": e[2] || (e[2] = (a) => y.value = a),
+          filterValues: n.value,
+          "onUpdate:filterValues": e[3] || (e[3] = (a) => n.value = a),
+          filterDisplay: V,
+          collapsible: !0,
+          title: "고객사 목록"
+        }, {
+          actions: r(() => [
+            i(o(c), {
+              size: "xs",
+              variant: "outline",
+              onClick: b
+            }, {
+              default: r(() => [...e[9] || (e[9] = [
+                p("초기화", -1)
+              ])]),
+              _: 1
+            }),
+            i(o(c), {
+              size: "xs",
+              styletype: "primary",
+              onClick: P
+            }, {
+              default: r(() => [...e[10] || (e[10] = [
+                p("조회", -1)
+              ])]),
+              _: 1
+            }),
+            i(o(c), {
+              size: "xs",
+              styletype: "primary",
+              onClick: Y
+            }, {
+              default: r(() => [...e[11] || (e[11] = [
+                p("신규", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          filters: r(() => [
+            m("div", F, [
+              i(o(d), {
                 type: "combo",
-                label: "분류",
-                modelValue: l.value.category,
-                "onUpdate:modelValue": e[6] || (e[6] = (t) => l.value.category = t),
-                options: V
-              }, null, 8, ["modelValue"]),
-              i(a(m), {
-                type: "checkbox",
                 label: "활성여부",
-                modelValue: l.value.isActive,
-                "onUpdate:modelValue": e[7] || (e[7] = (t) => l.value.isActive = t),
-                inlineLabel: "활성"
+                modelValue: n.value.isActive,
+                "onUpdate:modelValue": e[0] || (e[0] = (a) => n.value.isActive = a),
+                options: A,
+                orientation: "horizontal",
+                labelWidth: "30%"
+              }, null, 8, ["modelValue"]),
+              i(o(d), {
+                type: "input",
+                label: "검색어",
+                modelValue: n.value.keyword,
+                "onUpdate:modelValue": e[1] || (e[1] = (a) => n.value.keyword = a),
+                orientation: "horizontal",
+                labelWidth: "30%"
               }, null, 8, ["modelValue"])
-            ]),
-            i(a(m), {
-              type: "textarea",
-              label: "비고",
-              modelValue: l.value.remark,
-              "onUpdate:modelValue": e[8] || (e[8] = (t) => l.value.remark = t),
-              placeholder: "비고"
-            }, null, 8, ["modelValue"]),
-            d("div", q, [
-              i(a(p), {
-                styletype: "primary",
-                size: "sm",
-                onClick: _
-              }, {
-                default: r(() => [...e[12] || (e[12] = [
-                  c("저장", -1)
-                ])]),
-                _: 1
-              }),
-              u.value ? E("", !0) : (g(), D(a(p), {
+            ])
+          ]),
+          _: 1
+        }, 8, ["collapsed", "filterValues"]),
+        i(o(G), {
+          direction: "horizontal",
+          "default-size": 60,
+          "min-size": 30,
+          "second-min-size": 20,
+          "second-max-size": 60,
+          class: "flex-1"
+        }, {
+          left: r(() => [
+            m("div", H, [
+              i(o(S), {
+                ref_key: "gridRef",
+                ref: g,
+                columnDefs: x.value,
+                rowData: w.value,
+                "action-buttons": N,
+                enableGrouping: !0,
+                enablePivot: !0,
+                enableColumnsToolPanel: !0,
+                rowGroupPanelShow: "always",
+                pivotPanelShow: "always",
+                groupDefaultExpanded: 1,
+                compactFooter: !0,
+                onRowClicked: z
+              }, null, 8, ["columnDefs", "rowData"])
+            ])
+          ]),
+          right: r(() => [
+            m("div", O, [
+              !l.value.code && !u.value ? (f(), v(o(_), {
                 key: 0,
-                variant: "outline",
-                size: "sm",
-                onClick: Y
+                variant: "simple",
+                icon: "mousePointerClick",
+                title: "항목을 선택하거나 신규 버튼을 클릭하세요",
+                class: "h-full"
+              })) : (f(), v(o(J), {
+                key: 1,
+                class: "h-full",
+                title: u.value ? "신규 등록" : "상세 정보",
+                variant: "elevated"
               }, {
-                default: r(() => [...e[13] || (e[13] = [
-                  c("삭제", -1)
-                ])]),
+                actions: r(() => [
+                  i(o(c), {
+                    size: "xs",
+                    styletype: "primary",
+                    onClick: B
+                  }, {
+                    default: r(() => [...e[12] || (e[12] = [
+                      p("저장", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  u.value ? h("", !0) : (f(), v(o(c), {
+                    key: 0,
+                    size: "xs",
+                    variant: "destructive",
+                    onClick: U
+                  }, {
+                    default: r(() => [...e[13] || (e[13] = [
+                      p("삭제", -1)
+                    ])]),
+                    _: 1
+                  })),
+                  i(o(c), {
+                    size: "xs",
+                    variant: "outline",
+                    onClick: b
+                  }, {
+                    default: r(() => [...e[14] || (e[14] = [
+                      p("취소", -1)
+                    ])]),
+                    _: 1
+                  })
+                ]),
+                default: r(() => [
+                  m("div", T, [
+                    i(o(d), {
+                      type: "input",
+                      label: "코드",
+                      modelValue: l.value.code,
+                      "onUpdate:modelValue": e[4] || (e[4] = (a) => l.value.code = a),
+                      readonly: !u.value,
+                      placeholder: "고객사 코드"
+                    }, null, 8, ["modelValue", "readonly"]),
+                    i(o(d), {
+                      type: "input",
+                      label: "이름",
+                      modelValue: l.value.name,
+                      "onUpdate:modelValue": e[5] || (e[5] = (a) => l.value.name = a),
+                      placeholder: "고객사 이름"
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  m("div", W, [
+                    i(o(d), {
+                      type: "combo",
+                      label: "분류",
+                      modelValue: l.value.category,
+                      "onUpdate:modelValue": e[6] || (e[6] = (a) => l.value.category = a),
+                      options: C
+                    }, null, 8, ["modelValue"]),
+                    i(o(d), {
+                      type: "checkbox",
+                      label: "활성여부",
+                      modelValue: l.value.isActive,
+                      "onUpdate:modelValue": e[7] || (e[7] = (a) => l.value.isActive = a),
+                      inlineLabel: "활성"
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  m("div", L, [
+                    i(o(d), {
+                      type: "textarea",
+                      label: "비고",
+                      modelValue: l.value.remark,
+                      "onUpdate:modelValue": e[8] || (e[8] = (a) => l.value.remark = a),
+                      placeholder: "비고"
+                    }, null, 8, ["modelValue"])
+                  ])
+                ]),
                 _: 1
-              }))
+              }, 8, ["title"]))
             ])
-          ])
-        ]),
-        _: 1
-      })
-    ]));
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }));
   }
 });
 export {
-  Ye as default
+  Be as default
 };
 //# sourceMappingURL=ExampleCrudPage.vue.js.map

package/components/examples/ExampleCrudPage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleCrudPage.vue.js","sources":["../../../../src/components/examples/ExampleCrudPage.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col h-full gap-4 bg-background text-foreground\">\n    <!-- ==================== 타이틀바 ==================== -->\n    <JTitlebar \n      icon=\"building\" \n      title=\"고객사 관리\" \n      description=\"고객사 정보를 조회하고 관리합니다\"\n      :showHelp=\"true\" \n      @help=\"onHelp\" \n    />\n\n    <!-- ==================== 필터바 ==================== -->\n    <JFilterBar\n      v-model:collapsed=\"filterCollapsed\"\n      v-model:filterValues=\"filterValues\"\n      :filterDisplay=\"filterDisplay\"\n      :collapsible=\"true\"\n      title=\"고객사 목록\"\n    >\n      <!-- 액션 버튼 -->\n      <template #actions>\n        <JButton size=\"sm\" variant=\"outline\" @click=\"onReset\">초기화</JButton>\n        <JButton size=\"sm\" styletype=\"primary\" @click=\"onSearch\">조회</JButton>\n        <JButton size=\"sm\" styletype=\"primary\" @click=\"onNew\">신규</JButton>\n      </template>\n\n      <!-- 필터 필드 - 다중 열 배치 -->\n      <template #filters>\n        <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n          <JFormField\n            type=\"combo\"\n            label=\"활성여부\"\n            v-model=\"filterValues.isActive\"\n            :options=\"activeOptions\"\n          />\n          <JFormField type=\"input\" label=\"검색어\" v-model=\"filterValues.keyword\" />\n        </div>\n      </template>\n    </JFilterBar>\n\n    <!-- ==================== 그리드 + 상세 영역 (Resizable) ==================== -->\n    <JSplitter\n      direction=\"horizontal\"\n      :default-size=\"60\"\n      :min-size=\"30\"\n      :second-min-size=\"20\"\n      :second-max-size=\"60\"\n      class=\"flex-1\"\n    >\n      <!-- 좌측: 그리드 -->\n      <template #left>\n        <div class=\"h-full overflow-auto bg-background\">\n          <JGrid\n            ref=\"gridRef\"\n            :columnDefs=\"columnDefs\"\n            :rowData=\"rowData\"\n            :action-buttons=\"actionButtons\"\n            @row-clicked=\"onRowClicked\"\n          />\n        </div>\n      </template>\n\n      <!-- 우측: 상세 영역 -->\n      <template #right>\n        <div class=\"h-full flex flex-col gap-4 overflow-y-auto p-4 border-l rounded-lg bg-card\">\n          <h3 class=\"text-lg font-semibold mb-2\">{{ isNew ? '신규 등록' : '상세 정보' }}</h3>\n\n          <!-- 2열 그리드: 코드, 이름 -->\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <JFormField\n              type=\"input\"\n              label=\"코드\"\n              v-model=\"detail.code\"\n              :readonly=\"!isNew\"\n              placeholder=\"고객사 코드\"\n            />\n            <JFormField\n              type=\"input\"\n              label=\"이름\"\n              v-model=\"detail.name\"\n              placeholder=\"고객사 이름\"\n            />\n          </div>\n\n          <!-- 2열 그리드: 분류, 활성여부 -->\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <JFormField\n              type=\"combo\"\n              label=\"분류\"\n              v-model=\"detail.category\"\n              :options=\"categoryOptions\"\n            />\n            <JFormField\n              type=\"checkbox\"\n              label=\"활성여부\"\n              v-model=\"detail.isActive\"\n              inlineLabel=\"활성\"\n            />\n          </div>\n\n          <!-- 전체 너비: 비고 -->\n          <JFormField type=\"textarea\" label=\"비고\" v-model=\"detail.remark\" placeholder=\"비고\" />\n\n          <!-- 액션 버튼 -->\n          <div class=\"flex justify-end gap-2 mt-4\">\n            <JButton styletype=\"primary\" size=\"sm\" @click=\"onSave\">저장</JButton>\n            <JButton variant=\"outline\" size=\"sm\" @click=\"onDelete\" v-if=\"!isNew\">삭제</JButton>\n          </div>\n        </div>\n      </template>\n    </JSplitter>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { JTitlebar } from '@/components/molecules'\nimport { JFilterBar } from '@/components/organisms'\nimport { JGrid, JButton, JSplitter, type ActionButton } from '@/components/atoms'\nimport { JFormField } from '@/components/molecules'\n\n// ==================== 필터 상태 ====================\nconst filterCollapsed = ref(false)\n\n// 필터 값 (v-model:filterValues)\nconst filterValues = ref({\n  isActive: '',\n  keyword: '',\n})\n\n// 필터 표시 설정 (배지에 표시될 라벨 및 값 변환 함수)\nconst filterDisplay = {\n  isActive: {\n    label: '활성여부',\n    displayValue: (val: unknown) => {\n      if (val === 'Y') return 'Y:활성'\n      if (val === 'N') return 'N:비활성'\n      return ''\n    },\n  },\n  keyword: {\n    label: '검색어',\n  },\n}\n\n// ==================== 옵션 데이터 ====================\nconst activeOptions = [\n  { value: 'Y', label: 'Y:활성' },\n  { value: 'N', label: 'N:비활성' },\n]\n\nconst categoryOptions = [\n  { value: 'A', label: 'A등급' },\n  { value: 'B', label: 'B등급' },\n  { value: 'C', label: 'C등급' },\n]\n\n// ==================== 그리드 설정 ====================\nconst gridRef = ref()\n\n// Mock 데이터 - 실제 백엔드 응답 구조\nconst rowData = ref([\n  { code: 'C001', name: '제이솔루션', category: 'A', isActive: 'Y', remark: '주력 고객사' },\n  { code: 'C002', name: 'ABC물류', category: 'B', isActive: 'Y', remark: '' },\n  { code: 'C003', name: 'XYZ유통', category: 'A', isActive: 'N', remark: '비활성' },\n  { code: 'C004', name: '대한물류', category: 'B', isActive: 'Y', remark: '' },\n  { code: 'C005', name: '글로벌이커머스', category: 'A', isActive: 'Y', remark: '신규 고객사' },\n])\n\nconst columnDefs = ref([\n  { field: 'code', headerName: '코드', width: 120 },\n  { field: 'name', headerName: '이름', width: 200 },\n  { field: 'category', headerName: '분류', width: 100 },\n  {\n    field: 'isActive',\n    headerName: '활성',\n    width: 100,\n    cellRenderer: (params: any) => (params.value === 'Y' ? '✓' : ''),\n  },\n  { field: 'remark', headerName: '비고', flex: 1 },\n])\n\n// 행별 액션 버튼\nconst actionButtons: ActionButton[] = [\n  {\n    icon: 'pencil',\n    label: '수정',\n    tooltip: '편집',\n    onClick: (rowData: any) => {\n      isNew.value = false\n      detail.value = {\n        code: rowData.code,\n        name: rowData.name,\n        category: rowData.category,\n        isActive: rowData.isActive,\n        remark: rowData.remark,\n      }\n    },\n  },\n  {\n    icon: 'trash2',\n    label: '삭제',\n    tooltip: '삭제',\n    styletype: 'danger',\n    onClick: (rowData: any) => {\n      if (confirm(`${rowData.name}을(를) 삭제하시겠습니까?`)) {\n        console.log('삭제:', rowData.code)\n        alert(`삭제되었습니다: ${rowData.name}`)\n      }\n    },\n  },\n]\n\n// ==================== 상세 영역 상태 ====================\nconst isNew = ref(false)\nconst detail = ref({\n  code: '',\n  name: '',\n  category: '',\n  isActive: 'Y',\n  remark: '',\n})\n\n// ==================== 이벤트 핸들러 ====================\n\n/**\n * 그리드 행 클릭 핸들러\n */\nfunction onRowClicked(event: any) {\n  isNew.value = false\n  const rowData = event.data\n\n  // 선택된 행 데이터를 상세 영역에 바인딩\n  detail.value = {\n    code: rowData.code,\n    name: rowData.name,\n    category: rowData.category,\n    isActive: rowData.isActive,\n    remark: rowData.remark,\n  }\n}\n\n/**\n * 신규 버튼 클릭\n */\nfunction onNew() {\n  isNew.value = true\n  // 상세 영역 초기화\n  detail.value = {\n    code: '',\n    name: '',\n    category: '',\n    isActive: 'Y',\n    remark: '',\n  }\n}\n\n/**\n * 저장 버튼 클릭\n */\nfunction onSave() {\n  console.log('저장:', detail.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n  // if (isNew.value) {\n  //   await api.createCustomer(detail.value)\n  // } else {\n  //   await api.updateCustomer(detail.value.code, detail.value)\n  // }\n  // 성공 시 그리드 데이터 갱신\n  alert(`저장되었습니다: ${detail.value.name}`)\n}\n\n/**\n * 삭제 버튼 클릭\n */\nfunction onDelete() {\n  if (confirm(`${detail.value.name}을(를) 삭제하시겠습니까?`)) {\n    console.log('삭제:', detail.value.code)\n    // TODO: 실제 구현 시 API 호출로 대체\n    // await api.deleteCustomer(detail.value.code)\n    // 성공 시 그리드에서 해당 행 제거\n    alert(`삭제되었습니다: ${detail.value.name}`)\n  }\n}\n\n/**\n * 초기화 버튼 클릭\n */\nfunction onReset() {\n  filterValues.value = {\n    isActive: '',\n    keyword: '',\n  }\n  console.log('필터 초기화')\n}\n\n/**\n * 조회 버튼 클릭\n */\nfunction onSearch() {\n  console.log('조회 조건:', filterValues.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n  // const result = await api.searchCustomers(filterValues.value)\n  // rowData.value = result.data\n}\n\n/**\n * 도움말 아이콘 클릭\n */\nfunction onHelp() {\n  alert('고객사 관리 페이지 도움말')\n}\n\ndefineExpose({ gridRef })\n</script>\n"],"names":["filterCollapsed","ref","filterValues","filterDisplay","val","activeOptions","categoryOptions","gridRef","rowData","columnDefs","params","actionButtons","isNew","detail","onRowClicked","event","onNew","onSave","onDelete","onReset","onSearch","onHelp","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","JTitlebar","JFilterBar","$event","JButton","_cache","_createElementVNode","_hoisted_2","JFormField","JSplitter","_hoisted_3","JGrid","_hoisted_4","_hoisted_5","_toDisplayString","_hoisted_6","_hoisted_7","_hoisted_8","_createBlock"],"mappings":"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"}
+{"version":3,"file":"ExampleCrudPage.vue.js","sources":["../../../../src/components/examples/ExampleCrudPage.vue"],"sourcesContent":["<template>\n  <JPageContainer title=\"고객사 관리\" icon=\"building\" description=\"고객사 정보를 조회하고 관리합니다\" :showHelp=\"true\" @help=\"onHelp\" :content-scroll=\"false\">\n\n      <!-- ==================== 필터바 ==================== -->\n      <JFilterBar\n        v-model:collapsed=\"filterCollapsed\"\n        v-model:filterValues=\"filterValues\"\n        :filterDisplay=\"filterDisplay\"\n        :collapsible=\"true\"\n        title=\"고객사 목록\"\n      >\n        <!-- 액션 버튼 -->\n        <template #actions>\n          <JButton size=\"xs\" variant=\"outline\" @click=\"onReset\">초기화</JButton>\n          <JButton size=\"xs\" styletype=\"primary\" @click=\"onSearch\">조회</JButton>\n          <JButton size=\"xs\" styletype=\"primary\" @click=\"onNew\">신규</JButton>\n        </template>\n\n        <!-- 필터 필드 - 다중 열 배치 -->\n        <template #filters>\n          <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2\">\n            <JFormField\n              type=\"combo\"\n              label=\"활성여부\"\n              v-model=\"filterValues.isActive\"\n              :options=\"activeOptions\"\n              orientation=\"horizontal\"\n              labelWidth=\"30%\"\n            />\n            <JFormField type=\"input\" label=\"검색어\" v-model=\"filterValues.keyword\"\n              orientation=\"horizontal\"\n              labelWidth=\"30%\" />\n          </div>\n        </template>\n      </JFilterBar>\n\n      <!-- ==================== 그리드 + 상세 영역 (Resizable) ==================== -->\n      <JSplitter\n        direction=\"horizontal\"\n        :default-size=\"60\"\n        :min-size=\"30\"\n        :second-min-size=\"20\"\n        :second-max-size=\"60\"\n        class=\"flex-1\"\n      >\n        <!-- 좌측: 그리드 -->\n        <template #left>\n          <div class=\"h-full overflow-auto bg-background\">\n            <JGrid\n              ref=\"gridRef\"\n              :columnDefs=\"columnDefs\"\n              :rowData=\"rowData\"\n              :action-buttons=\"actionButtons\"\n              :enableGrouping=\"true\"\n              :enablePivot=\"true\"\n              :enableColumnsToolPanel=\"true\"\n              rowGroupPanelShow=\"always\"\n              pivotPanelShow=\"always\"\n              :groupDefaultExpanded=\"1\"\n              :compactFooter=\"true\"\n              @row-clicked=\"onRowClicked\"\n            />\n          </div>\n        </template>\n\n        <!-- 우측: 상세 영역 -->\n        <template #right>\n          <div class=\"h-full overflow-y-auto bg-muted/30\">\n            <!-- 선택된 항목이 없을 때: EmptyState -->\n            <JEmptyState\n              v-if=\"!detail.code && !isNew\"\n              variant=\"simple\"\n              icon=\"mousePointerClick\"\n              title=\"항목을 선택하거나 신규 버튼을 클릭하세요\"\n              class=\"h-full\"\n            />\n            \n            <!-- 선택된 항목이 있거나 신규일 때: 상세 폼 -->\n            <JCard \n              v-else\n              class=\"h-full\" \n              :title=\"isNew ? '신규 등록' : '상세 정보'\"\n              variant=\"elevated\"\n            >\n              <!-- actions 슬롯 (header 우측 버튼) -->\n              <template #actions>\n                <JButton size=\"xs\" styletype=\"primary\" @click=\"onSave\">저장</JButton>\n                <JButton size=\"xs\" variant=\"destructive\" v-if=\"!isNew\" @click=\"onDelete\">삭제</JButton>\n                <JButton size=\"xs\" variant=\"outline\" @click=\"onReset\">취소</JButton>\n              </template>\n\n            <!-- 2열 그리드: 코드, 이름 -->\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <JFormField\n                type=\"input\"\n                label=\"코드\"\n                v-model=\"detail.code\"\n                :readonly=\"!isNew\"\n                placeholder=\"고객사 코드\"\n              />\n              <JFormField\n                type=\"input\"\n                label=\"이름\"\n                v-model=\"detail.name\"\n                placeholder=\"고객사 이름\"\n              />\n            </div>\n\n            <!-- 2열 그리드: 분류, 활성여부 -->\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2 mt-2\">\n              <JFormField\n                type=\"combo\"\n                label=\"분류\"\n                v-model=\"detail.category\"\n                :options=\"categoryOptions\"\n              />\n              <JFormField\n                type=\"checkbox\"\n                label=\"활성여부\"\n                v-model=\"detail.isActive\"\n                inlineLabel=\"활성\"\n              />\n            </div>\n            <div class=\"grid grid-cols-1 gap-2 mt-2\">\n              <!-- 전체 너비: 비고 -->\n              <JFormField type=\"textarea\" label=\"비고\" v-model=\"detail.remark\" placeholder=\"비고\" />\n\n            </div>\n\n            </JCard>\n          </div>\n        </template>\n      </JSplitter>\n  </JPageContainer> \n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { JTitlebar, JCard, JEmptyState } from '@/components/molecules'\nimport { JFilterBar } from '@/components/organisms'\nimport { JGrid, JButton, JSplitter, type ActionButton } from '@/components/atoms'\nimport { JFormField } from '@/components/molecules'\nimport JPageContainer from '../organisms/JPageContainer.vue'\n\n// ==================== 필터 상태 ====================\nconst filterCollapsed = ref(false)\n\n// 필터 값 (v-model:filterValues)\nconst filterValues = ref({\n  isActive: '',\n  keyword: '',\n})\n\n// 필터 표시 설정 (배지에 표시될 라벨 및 값 변환 함수)\nconst filterDisplay = {\n  isActive: {\n    label: '활성여부',\n    displayValue: (val: unknown) => {\n      if (val === 'Y') return 'Y:활성'\n      if (val === 'N') return 'N:비활성'\n      return ''\n    },\n  },\n  keyword: {\n    label: '검색어',\n  },\n}\n\n// ==================== 옵션 데이터 ====================\nconst activeOptions = [\n  { value: 'Y', label: 'Y:활성' },\n  { value: 'N', label: 'N:비활성' },\n]\n\nconst categoryOptions = [\n  { value: 'A', label: 'A등급' },\n  { value: 'B', label: 'B등급' },\n  { value: 'C', label: 'C등급' },\n]\n\n// ==================== 그리드 설정 ====================\nconst gridRef = ref()\n\n// Mock 데이터 - 실제 백엔드 응답 구조\nconst rowData = ref([\n  { code: 'C001', name: '제이솔루션', category: 'A', isActive: 'Y', remark: '주력 고객사' },\n  { code: 'C002', name: 'ABC물류', category: 'B', isActive: 'Y', remark: '' },\n  { code: 'C003', name: 'XYZ유통', category: 'A', isActive: 'N', remark: '비활성' },\n  { code: 'C004', name: '대한물류', category: 'B', isActive: 'Y', remark: '' },\n  { code: 'C005', name: '글로벌이커머스', category: 'A', isActive: 'Y', remark: '신규 고객사' },\n])\n\nconst columnDefs = ref([\n  { \n    field: 'code', \n    headerName: '코드', \n    width: 120,\n    enableValue: true,  // 집계 가능 (count)\n  },\n  { \n    field: 'name', \n    headerName: '이름', \n    width: 200,\n    enableValue: true,  // 집계 가능 (count)\n  },\n  { \n    field: 'category', \n    headerName: '분류', \n    width: 100,\n    enableRowGroup: true,  // Row Group으로 사용 가능\n    enablePivot: true,     // Pivot Column으로 사용 가능\n  },\n  {\n    field: 'isActive',\n    headerName: '활성',\n    width: 100,\n    cellRenderer: (params: any) => (params.value === 'Y' ? '✓' : ''),\n    enableRowGroup: true,  // Row Group으로 사용 가능\n    enablePivot: true,     // Pivot Column으로 사용 가능\n  },\n  { \n    field: 'remark', \n    headerName: '비고', \n    flex: 1,\n    enableValue: true,  // 집계 가능 (count)\n  },\n])\n\n// 행별 액션 버튼\nconst actionButtons: ActionButton[] = [\n  {\n    icon: 'pencil',\n    label: '수정',\n    tooltip: '편집',\n    onClick: (rowData: any) => {\n      isNew.value = false\n      detail.value = {\n        code: rowData.code,\n        name: rowData.name,\n        category: rowData.category,\n        isActive: rowData.isActive,\n        remark: rowData.remark,\n      }\n    },\n  },\n  {\n    icon: 'trash2',\n    label: '삭제',\n    tooltip: '삭제',\n    styletype: 'danger',\n    onClick: (rowData: any) => {\n      if (confirm(`${rowData.name}을(를) 삭제하시겠습니까?`)) {\n        console.log('삭제:', rowData.code)\n        alert(`삭제되었습니다: ${rowData.name}`)\n      }\n    },\n  },\n]\n\n// ==================== 상세 영역 상태 ====================\nconst isNew = ref(false)\nconst detail = ref({\n  code: '',\n  name: '',\n  category: '',\n  isActive: 'Y',\n  remark: '',\n})\n\n// ==================== 이벤트 핸들러 ====================\n\n/**\n * 그리드 행 클릭 핸들러\n */\nfunction onRowClicked(event: any) {\n  isNew.value = false\n  const rowData = event.data\n\n  // 선택된 행 데이터를 상세 영역에 바인딩\n  detail.value = {\n    code: rowData.code,\n    name: rowData.name,\n    category: rowData.category,\n    isActive: rowData.isActive,\n    remark: rowData.remark,\n  }\n}\n\n/**\n * 신규 버튼 클릭\n */\nfunction onNew() {\n  isNew.value = true\n  // 상세 영역 초기화\n  detail.value = {\n    code: '',\n    name: '',\n    category: '',\n    isActive: 'Y',\n    remark: '',\n  }\n}\n\n/**\n * 저장 버튼 클릭\n */\nfunction onSave() {\n  console.log('저장:', detail.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n  // if (isNew.value) {\n  //   await api.createCustomer(detail.value)\n  // } else {\n  //   await api.updateCustomer(detail.value.code, detail.value)\n  // }\n  // 성공 시 그리드 데이터 갱신\n  alert(`저장되었습니다: ${detail.value.name}`)\n}\n\n/**\n * 삭제 버튼 클릭\n */\nfunction onDelete() {\n  if (confirm(`${detail.value.name}을(를) 삭제하시겠습니까?`)) {\n    console.log('삭제:', detail.value.code)\n    // TODO: 실제 구현 시 API 호출로 대체\n    // await api.deleteCustomer(detail.value.code)\n    // 성공 시 그리드에서 해당 행 제거\n    alert(`삭제되었습니다: ${detail.value.name}`)\n  }\n}\n\n/**\n * 초기화 버튼 클릭\n */\nfunction onReset() {\n  filterValues.value = {\n    isActive: '',\n    keyword: '',\n  }\n  console.log('필터 초기화')\n}\n\n/**\n * 조회 버튼 클릭\n */\nfunction onSearch() {\n  console.log('조회 조건:', filterValues.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n  // const result = await api.searchCustomers(filterValues.value)\n  // rowData.value = result.data\n}\n\n/**\n * 도움말 아이콘 클릭\n */\nfunction onHelp() {\n  alert('고객사 관리 페이지 도움말')\n}\n\ndefineExpose({ gridRef })\n</script>\n"],"names":["filterCollapsed","ref","filterValues","filterDisplay","val","activeOptions","categoryOptions","gridRef","rowData","columnDefs","params","actionButtons","isNew","detail","onRowClicked","event","onNew","onSave","onDelete","onReset","onSearch","onHelp","__expose","_createBlock","JPageContainer","_createVNode","_unref","JFilterBar","$event","JButton","_cache","_createElementVNode","_hoisted_1","JFormField","JSplitter","_hoisted_2","JGrid","_hoisted_3","JEmptyState","JCard","_hoisted_4","_hoisted_5","_hoisted_6"],"mappings":"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"}