@j-solution/components 1.5.0 → 1.6.1

package/components/examples/ExampleTabMappingPage.vue.js

@@ -0,0 +1,479 @@
+import { defineComponent as oe, ref as r, computed as A, createElementBlock as te, openBlock as R, createVNode as a, unref as t, withCtx as i, createElementVNode as s, createTextVNode as d, toDisplayString as ae, createBlock as ie, createCommentVNode as se } from "vue";
+import b from "../molecules/JFormField.vue.js";
+/* empty css                           */
+import "../shadcn/index.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import "lucide-vue-next";
+import re from "../molecules/JTabs.vue.js";
+/* empty css                            */
+/* empty css                             */
+import u from "../atoms/JButton.vue.js";
+import "@internationalized/date";
+import "md-editor-v3";
+/* empty css                                                                                                               */
+/* empty css                    */
+import "../shadcn/badge-variants.js";
+/* empty css                      */
+import "../shadcn/avatar-variants.js";
+import "dompurify";
+/* empty css                     */
+import y from "../atoms/JGrid.vue.js";
+import h from "../atoms/JSplitter.vue.js";
+import "vue-sonner";
+import ne from "../molecules/JTitlebar.vue.js";
+/* empty css                             */
+/* empty css                             */
+import z from "../organisms/JFilterBar.vue.js";
+import "vue-router";
+/* empty css                               */
+/* empty css                                 */
+const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }, de = { class: "flex flex-col h-full gap-4 p-4" }, ue = { class: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" }, pe = { class: "h-full overflow-auto bg-background" }, ce = { class: "h-full flex flex-col gap-4 overflow-y-auto p-4 border-l rounded-lg bg-card" }, fe = { class: "text-lg font-semibold mb-2" }, ve = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, be = { class: "flex justify-end gap-2 mt-4" }, ge = { class: "flex flex-col h-full gap-4 p-4" }, ye = { class: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" }, ke = { class: "h-full overflow-auto bg-background" }, xe = { class: "h-full flex gap-2 overflow-hidden items-stretch p-2 bg-background" }, Ce = { class: "flex-1 flex flex-col overflow-hidden" }, we = { class: "flex-1 overflow-auto bg-background" }, Ne = { class: "flex flex-col justify-center gap-2 px-2" }, Ve = { class: "flex-1 flex flex-col overflow-hidden" }, De = { class: "flex-1 overflow-auto bg-background" }, il = /* @__PURE__ */ oe({
+  __name: "ExampleTabMappingPage",
+  setup(_e, { expose: U }) {
+    const k = r("master"), Y = [
+      { id: "master", label: "회원사 기본정보" },
+      { id: "mapping-customer", label: "고객사 매핑" }
+    ];
+    function $(l) {
+      console.log("탭 변경:", l);
+    }
+    const G = [
+      { value: "Y", label: "Y:활성" },
+      { value: "N", label: "N:비활성" }
+    ], x = r(!1), p = r({
+      isActive: "",
+      keyword: ""
+    }), T = {
+      isActive: {
+        label: "활성여부",
+        displayValue: (l) => l === "Y" ? "Y:활성" : l === "N" ? "N:비활성" : ""
+      },
+      keyword: {
+        label: "검색어"
+      }
+    }, C = r([
+      { memberId: "M001", memberName: "제이솔루션", isActive: "Y" },
+      { memberId: "M002", memberName: "ABC물류", isActive: "Y" },
+      { memberId: "M003", memberName: "XYZ유통", isActive: "N" }
+    ]), B = r([
+      { field: "memberId", headerName: "회원사코드", width: 150 },
+      { field: "memberName", headerName: "회원사명", flex: 1 },
+      {
+        field: "isActive",
+        headerName: "활성",
+        width: 100,
+        cellRenderer: (l) => l.value === "Y" ? "✓" : ""
+      }
+    ]), F = [
+      {
+        icon: "pencil",
+        label: "수정",
+        tooltip: "편집",
+        onClick: (l) => {
+          f.value = !1, n.value = {
+            memberId: l.memberId,
+            memberName: l.memberName,
+            isActive: l.isActive
+          };
+        }
+      },
+      {
+        icon: "trash2",
+        label: "삭제",
+        tooltip: "삭제",
+        styletype: "danger",
+        onClick: (l) => {
+          confirm(`${l.memberName}을(를) 삭제하시겠습니까?`) && (console.log("회원사 삭제:", l.memberId), alert(`삭제되었습니다: ${l.memberName}`));
+        }
+      }
+    ], w = r(), f = r(!1), n = r({
+      memberId: "",
+      memberName: "",
+      isActive: "Y"
+    });
+    function S(l) {
+      f.value = !1, n.value = {
+        memberId: l.data.memberId,
+        memberName: l.data.memberName,
+        isActive: l.data.isActive
+      };
+    }
+    function E() {
+      f.value = !0, n.value = {
+        memberId: "",
+        memberName: "",
+        isActive: "Y"
+      };
+    }
+    function j() {
+      console.log("회원사 저장:", n.value), alert(`저장되었습니다: ${n.value.memberName}`);
+    }
+    function H() {
+      confirm(`${n.value.memberName}을(를) 삭제하시겠습니까?`) && (console.log("회원사 삭제:", n.value.memberId), alert(`삭제되었습니다: ${n.value.memberName}`));
+    }
+    function J() {
+      p.value = {
+        isActive: "",
+        keyword: ""
+      };
+    }
+    function K() {
+      console.log("회원사 조회:", p.value);
+    }
+    function L() {
+      alert("회원사 관리 페이지 도움말");
+    }
+    const N = r(!1), v = r({
+      keyword: ""
+    }), O = {
+      keyword: {
+        label: "검색어"
+      }
+    }, V = r(), D = r(), _ = r(), P = r([
+      { field: "memberId", headerName: "회원사코드", width: 150 },
+      { field: "memberName", headerName: "회원사명", flex: 1 }
+    ]), m = r(""), c = r({
+      M001: ["C001", "C002"],
+      // 제이솔루션에 매핑된 고객사
+      M002: ["C003"],
+      // ABC물류에 매핑된 고객사
+      M003: []
+      // XYZ유통에 매핑된 고객사 없음
+    }), M = [
+      { code: "C001", name: "고객A" },
+      { code: "C002", name: "고객B" },
+      { code: "C003", name: "고객C" },
+      { code: "C004", name: "고객D" },
+      { code: "C005", name: "고객E" }
+    ], I = r([
+      { field: "code", headerName: "코드", width: 120 },
+      { field: "name", headerName: "이름", flex: 1 }
+    ]), X = A(() => {
+      if (!m.value) return [];
+      const l = c.value[m.value] || [];
+      return M.filter((e) => !l.includes(e.code));
+    }), Z = A(() => {
+      if (!m.value) return [];
+      const l = c.value[m.value] || [];
+      return M.filter((e) => l.includes(e.code));
+    });
+    function q(l) {
+      m.value = l.data.memberId, console.log("선택된 회원사:", l.data.memberName);
+    }
+    function Q() {
+      if (!m.value) {
+        alert("회원사를 먼저 선택해주세요.");
+        return;
+      }
+      const l = D.value?.getSelectedRows() || [];
+      if (l.length === 0) {
+        alert("매핑할 고객사를 선택해주세요.");
+        return;
+      }
+      const e = l.map((g) => g.code), o = m.value;
+      c.value[o] || (c.value[o] = []), c.value[o].push(...e), console.log("매핑:", e);
+    }
+    function W() {
+      if (!m.value) {
+        alert("회원사를 먼저 선택해주세요.");
+        return;
+      }
+      const l = _.value?.getSelectedRows() || [];
+      if (l.length === 0) {
+        alert("해제할 고객사를 선택해주세요.");
+        return;
+      }
+      const e = l.map((g) => g.code), o = m.value;
+      c.value[o] = (c.value[o] || []).filter(
+        (g) => !e.includes(g)
+      ), console.log("해제:", e);
+    }
+    function ee() {
+      v.value = {
+        keyword: ""
+      };
+    }
+    function le() {
+      console.log("매핑 조회:", v.value);
+    }
+    return U({ masterGridRef: w, mappingMasterGridRef: V }), (l, e) => (R(), te("div", me, [
+      a(t(ne), {
+        icon: "users",
+        title: "회원사 관리",
+        description: "회원사 정보 및 고객사 매핑을 관리합니다",
+        showHelp: !0,
+        onHelp: L
+      }),
+      a(t(re), {
+        activeTabId: k.value,
+        "onUpdate:activeTabId": e[10] || (e[10] = (o) => k.value = o),
+        tabs: Y,
+        onTabChange: $
+      }, {
+        "content-master": i(() => [
+          s("div", de, [
+            a(t(z), {
+              collapsed: x.value,
+              "onUpdate:collapsed": e[2] || (e[2] = (o) => x.value = o),
+              filterValues: p.value,
+              "onUpdate:filterValues": e[3] || (e[3] = (o) => p.value = o),
+              filterDisplay: T,
+              collapsible: !0,
+              title: "회원사 목록"
+            }, {
+              actions: i(() => [
+                a(t(u), {
+                  size: "sm",
+                  variant: "outline",
+                  onClick: J
+                }, {
+                  default: i(() => [...e[11] || (e[11] = [
+                    d("초기화", -1)
+                  ])]),
+                  _: 1
+                }),
+                a(t(u), {
+                  size: "sm",
+                  styletype: "primary",
+                  onClick: K
+                }, {
+                  default: i(() => [...e[12] || (e[12] = [
+                    d("조회", -1)
+                  ])]),
+                  _: 1
+                }),
+                a(t(u), {
+                  size: "sm",
+                  styletype: "primary",
+                  onClick: E
+                }, {
+                  default: i(() => [...e[13] || (e[13] = [
+                    d("신규", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              filters: i(() => [
+                s("div", ue, [
+                  a(t(b), {
+                    type: "combo",
+                    label: "활성여부",
+                    modelValue: p.value.isActive,
+                    "onUpdate:modelValue": e[0] || (e[0] = (o) => p.value.isActive = o),
+                    options: G
+                  }, null, 8, ["modelValue"]),
+                  a(t(b), {
+                    type: "input",
+                    label: "검색어",
+                    modelValue: p.value.keyword,
+                    "onUpdate:modelValue": e[1] || (e[1] = (o) => p.value.keyword = o)
+                  }, null, 8, ["modelValue"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["collapsed", "filterValues"]),
+            a(t(h), {
+              direction: "horizontal",
+              "default-size": 60,
+              "min-size": 30,
+              "second-min-size": 20,
+              "second-max-size": 60,
+              class: "flex-1"
+            }, {
+              left: i(() => [
+                s("div", pe, [
+                  a(t(y), {
+                    ref_key: "masterGridRef",
+                    ref: w,
+                    columnDefs: B.value,
+                    rowData: C.value,
+                    "action-buttons": F,
+                    onRowClicked: S
+                  }, null, 8, ["columnDefs", "rowData"])
+                ])
+              ]),
+              right: i(() => [
+                s("div", ce, [
+                  s("h3", fe, ae(f.value ? "신규 등록" : "상세 정보"), 1),
+                  s("div", ve, [
+                    a(t(b), {
+                      type: "input",
+                      label: "회원사코드",
+                      modelValue: n.value.memberId,
+                      "onUpdate:modelValue": e[4] || (e[4] = (o) => n.value.memberId = o),
+                      readonly: !f.value,
+                      placeholder: "회원사 코드"
+                    }, null, 8, ["modelValue", "readonly"]),
+                    a(t(b), {
+                      type: "input",
+                      label: "회원사명",
+                      modelValue: n.value.memberName,
+                      "onUpdate:modelValue": e[5] || (e[5] = (o) => n.value.memberName = o),
+                      placeholder: "회원사 이름"
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  a(t(b), {
+                    type: "checkbox",
+                    label: "활성여부",
+                    modelValue: n.value.isActive,
+                    "onUpdate:modelValue": e[6] || (e[6] = (o) => n.value.isActive = o),
+                    inlineLabel: "활성"
+                  }, null, 8, ["modelValue"]),
+                  s("div", be, [
+                    a(t(u), {
+                      styletype: "primary",
+                      size: "sm",
+                      onClick: j
+                    }, {
+                      default: i(() => [...e[14] || (e[14] = [
+                        d("저장", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    f.value ? se("", !0) : (R(), ie(t(u), {
+                      key: 0,
+                      variant: "outline",
+                      size: "sm",
+                      onClick: H
+                    }, {
+                      default: i(() => [...e[15] || (e[15] = [
+                        d("삭제", -1)
+                      ])]),
+                      _: 1
+                    }))
+                  ])
+                ])
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        "content-mapping-customer": i(() => [
+          s("div", ge, [
+            a(t(z), {
+              collapsed: N.value,
+              "onUpdate:collapsed": e[8] || (e[8] = (o) => N.value = o),
+              filterValues: v.value,
+              "onUpdate:filterValues": e[9] || (e[9] = (o) => v.value = o),
+              filterDisplay: O,
+              collapsible: !0,
+              title: "회원사별 고객사 매핑"
+            }, {
+              actions: i(() => [
+                a(t(u), {
+                  size: "sm",
+                  variant: "outline",
+                  onClick: ee
+                }, {
+                  default: i(() => [...e[16] || (e[16] = [
+                    d("초기화", -1)
+                  ])]),
+                  _: 1
+                }),
+                a(t(u), {
+                  size: "sm",
+                  styletype: "primary",
+                  onClick: le
+                }, {
+                  default: i(() => [...e[17] || (e[17] = [
+                    d("조회", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              filters: i(() => [
+                s("div", ye, [
+                  a(t(b), {
+                    type: "input",
+                    label: "검색어",
+                    modelValue: v.value.keyword,
+                    "onUpdate:modelValue": e[7] || (e[7] = (o) => v.value.keyword = o)
+                  }, null, 8, ["modelValue"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["collapsed", "filterValues"]),
+            a(t(h), {
+              direction: "vertical",
+              "default-size": 30,
+              "min-size": 20,
+              "second-min-size": 40,
+              class: "flex-1"
+            }, {
+              top: i(() => [
+                s("div", ke, [
+                  a(t(y), {
+                    ref_key: "mappingMasterGridRef",
+                    ref: V,
+                    columnDefs: P.value,
+                    rowData: C.value,
+                    onRowClicked: q
+                  }, null, 8, ["columnDefs", "rowData"])
+                ])
+              ]),
+              bottom: i(() => [
+                s("div", xe, [
+                  s("div", Ce, [
+                    e[18] || (e[18] = s("h4", { class: "text-sm font-semibold mb-2 px-2" }, "미매핑 고객사", -1)),
+                    s("div", we, [
+                      a(t(y), {
+                        ref_key: "unmappedGridRef",
+                        ref: D,
+                        columnDefs: I.value,
+                        rowData: X.value,
+                        checkbox: ""
+                      }, null, 8, ["columnDefs", "rowData"])
+                    ])
+                  ]),
+                  s("div", Ne, [
+                    a(t(u), {
+                      styletype: "primary",
+                      size: "sm",
+                      onClick: Q
+                    }, {
+                      default: i(() => [...e[19] || (e[19] = [
+                        d("매핑 ▶", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    a(t(u), {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: W
+                    }, {
+                      default: i(() => [...e[20] || (e[20] = [
+                        d("◀ 해제", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  s("div", Ve, [
+                    e[21] || (e[21] = s("h4", { class: "text-sm font-semibold mb-2 px-2" }, "매핑된 고객사", -1)),
+                    s("div", De, [
+                      a(t(y), {
+                        ref_key: "mappedGridRef",
+                        ref: _,
+                        columnDefs: I.value,
+                        rowData: Z.value,
+                        checkbox: ""
+                      }, null, 8, ["columnDefs", "rowData"])
+                    ])
+                  ])
+                ])
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["activeTabId"])
+    ]));
+  }
+});
+export {
+  il as default
+};
+//# sourceMappingURL=ExampleTabMappingPage.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleTabMappingPage.vue.js","sources":["../../../../src/components/examples/ExampleTabMappingPage.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col h-full gap-4 bg-background text-foreground\">\n    <!-- ==================== 타이틀바 ==================== -->\n    <JTitlebar \n      icon=\"users\" \n      title=\"회원사 관리\" \n      description=\"회원사 정보 및 고객사 매핑을 관리합니다\"\n      :showHelp=\"true\" \n      @help=\"onHelp\" \n    />\n\n    <!-- ==================== 탭 ==================== -->\n    <JTabs v-model:activeTabId=\"activeTabId\" :tabs=\"tabs\" @tab-change=\"handleTabChange\">\n      <!-- ==================== Tab 1: 마스터 (회원사 기본정보) ==================== -->\n      <template #content-master>\n        <div class=\"flex flex-col h-full gap-4 p-4\">\n          <!-- 필터바 -->\n          <JFilterBar\n            v-model:collapsed=\"masterFilterCollapsed\"\n            v-model:filterValues=\"masterFilterValues\"\n            :filterDisplay=\"masterFilterDisplay\"\n            :collapsible=\"true\"\n            title=\"회원사 목록\"\n          >\n            <template #actions>\n              <JButton size=\"sm\" variant=\"outline\" @click=\"onMasterReset\">초기화</JButton>\n              <JButton size=\"sm\" styletype=\"primary\" @click=\"onMasterSearch\">조회</JButton>\n              <JButton size=\"sm\" styletype=\"primary\" @click=\"onMasterNew\">신규</JButton>\n            </template>\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=\"masterFilterValues.isActive\"\n                  :options=\"activeOptions\"\n                />\n                <JFormField type=\"input\" label=\"검색어\" v-model=\"masterFilterValues.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=\"masterGridRef\"\n                  :columnDefs=\"masterColumnDefs\"\n                  :rowData=\"masterRowData\"\n                  :action-buttons=\"masterActionButtons\"\n                  @row-clicked=\"onMasterRowClicked\"\n                />\n              </div>\n            </template>\n\n            <!-- 우측: 상세 영역 -->\n            <template #right>\n              <div\n                class=\"h-full flex flex-col gap-4 overflow-y-auto p-4 border-l rounded-lg bg-card\"\n              >\n                <h3 class=\"text-lg font-semibold mb-2\">\n                  {{ isMasterNew ? '신규 등록' : '상세 정보' }}\n                </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=\"masterDetail.memberId\"\n                    :readonly=\"!isMasterNew\"\n                    placeholder=\"회원사 코드\"\n                  />\n                  <JFormField\n                    type=\"input\"\n                    label=\"회원사명\"\n                    v-model=\"masterDetail.memberName\"\n                    placeholder=\"회원사 이름\"\n                  />\n                </div>\n\n                <!-- 활성여부 -->\n                <JFormField\n                  type=\"checkbox\"\n                  label=\"활성여부\"\n                  v-model=\"masterDetail.isActive\"\n                  inlineLabel=\"활성\"\n                />\n\n                <div class=\"flex justify-end gap-2 mt-4\">\n                  <JButton styletype=\"primary\" size=\"sm\" @click=\"onMasterSave\">저장</JButton>\n                  <JButton variant=\"outline\" size=\"sm\" @click=\"onMasterDelete\" v-if=\"!isMasterNew\"\n                    >삭제</JButton\n                  >\n                </div>\n              </div>\n            </template>\n          </JSplitter>\n        </div>\n      </template>\n\n      <!-- ==================== Tab 2: 매핑 (고객사 매핑) ==================== -->\n      <template #content-mapping-customer>\n        <div class=\"flex flex-col h-full gap-4 p-4\">\n          <!-- 필터바 -->\n          <JFilterBar\n            v-model:collapsed=\"mappingFilterCollapsed\"\n            v-model:filterValues=\"mappingFilterValues\"\n            :filterDisplay=\"mappingFilterDisplay\"\n            :collapsible=\"true\"\n            title=\"회원사별 고객사 매핑\"\n          >\n            <template #actions>\n              <JButton size=\"sm\" variant=\"outline\" @click=\"onMappingReset\">초기화</JButton>\n              <JButton size=\"sm\" styletype=\"primary\" @click=\"onMappingSearch\">조회</JButton>\n            </template>\n\n            <template #filters>\n              <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n                <JFormField type=\"input\" label=\"검색어\" v-model=\"mappingFilterValues.keyword\" />\n              </div>\n            </template>\n          </JFilterBar>\n\n          <!-- Vertical Splitter: 상단(마스터 그리드) / 하단(매핑 영역) -->\n          <JSplitter\n            direction=\"vertical\"\n            :default-size=\"30\"\n            :min-size=\"20\"\n            :second-min-size=\"40\"\n            class=\"flex-1\"\n          >\n            <!-- 상단: 마스터 그리드 -->\n            <template #top>\n              <div class=\"h-full overflow-auto bg-background\">\n                <JGrid\n                  ref=\"mappingMasterGridRef\"\n                  :columnDefs=\"mappingMasterColumnDefs\"\n                  :rowData=\"masterRowData\"\n                  @row-clicked=\"onMappingMasterRowClicked\"\n                />\n              </div>\n            </template>\n\n            <!-- 하단: 매핑 영역 (미매핑 - 버튼 - 매핑) -->\n            <template #bottom>\n              <div class=\"h-full flex gap-2 overflow-hidden items-stretch p-2 bg-background\">\n                <!-- 좌측: 미매핑 그리드 -->\n                <div class=\"flex-1 flex flex-col overflow-hidden\">\n                  <h4 class=\"text-sm font-semibold mb-2 px-2\">미매핑 고객사</h4>\n                  <div class=\"flex-1 overflow-auto bg-background\">\n                    <JGrid\n                      ref=\"unmappedGridRef\"\n                      :columnDefs=\"customerColumnDefs\"\n                      :rowData=\"unmappedCustomers\"\n                      checkbox\n                    />\n                  </div>\n                </div>\n\n                <!-- 중앙: 매핑/해제 버튼 -->\n                <div class=\"flex flex-col justify-center gap-2 px-2\">\n                  <JButton styletype=\"primary\" size=\"sm\" @click=\"onMap\">매핑 ▶</JButton>\n                  <JButton variant=\"outline\" size=\"sm\" @click=\"onUnmap\">◀ 해제</JButton>\n                </div>\n\n                <!-- 우측: 매핑 그리드 -->\n                <div class=\"flex-1 flex flex-col overflow-hidden\">\n                  <h4 class=\"text-sm font-semibold mb-2 px-2\">매핑된 고객사</h4>\n                  <div class=\"flex-1 overflow-auto bg-background\">\n                    <JGrid\n                      ref=\"mappedGridRef\"\n                      :columnDefs=\"customerColumnDefs\"\n                      :rowData=\"mappedCustomers\"\n                      checkbox\n                    />\n                  </div>\n                </div>\n              </div>\n            </template>\n          </JSplitter>\n        </div>\n      </template>\n    </JTabs>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed } 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'\nimport { JTabs } from '@/components/molecules'\n\n// ==================== 탭 상태 ====================\nconst activeTabId = ref('master')\n\nconst tabs = [\n  { id: 'master', label: '회원사 기본정보' },\n  { id: 'mapping-customer', label: '고객사 매핑' },\n]\n\nfunction handleTabChange(tabId: string) {\n  console.log('탭 변경:', tabId)\n}\n\n// ==================== 공통 옵션 ====================\nconst activeOptions = [\n  { value: 'Y', label: 'Y:활성' },\n  { value: 'N', label: 'N:비활성' },\n]\n\n// ==================== Tab 1: 마스터 (회원사) ====================\n\nconst masterFilterCollapsed = ref(false)\nconst masterFilterValues = ref({\n  isActive: '',\n  keyword: '',\n})\n\nconst masterFilterDisplay = {\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// Mock 데이터 - 회원사 목록\nconst masterRowData = ref([\n  { memberId: 'M001', memberName: '제이솔루션', isActive: 'Y' },\n  { memberId: 'M002', memberName: 'ABC물류', isActive: 'Y' },\n  { memberId: 'M003', memberName: 'XYZ유통', isActive: 'N' },\n])\n\nconst masterColumnDefs = ref([\n  { field: 'memberId', headerName: '회원사코드', width: 150 },\n  { field: 'memberName', headerName: '회원사명', flex: 1 },\n  {\n    field: 'isActive',\n    headerName: '활성',\n    width: 100,\n    cellRenderer: (params: any) => (params.value === 'Y' ? '✓' : ''),\n  },\n])\n\n// 마스터 탭 행별 액션 버튼\nconst masterActionButtons: ActionButton[] = [\n  {\n    icon: 'pencil',\n    label: '수정',\n    tooltip: '편집',\n    onClick: (rowData: any) => {\n      isMasterNew.value = false\n      masterDetail.value = {\n        memberId: rowData.memberId,\n        memberName: rowData.memberName,\n        isActive: rowData.isActive,\n      }\n    },\n  },\n  {\n    icon: 'trash2',\n    label: '삭제',\n    tooltip: '삭제',\n    styletype: 'danger',\n    onClick: (rowData: any) => {\n      if (confirm(`${rowData.memberName}을(를) 삭제하시겠습니까?`)) {\n        console.log('회원사 삭제:', rowData.memberId)\n        alert(`삭제되었습니다: ${rowData.memberName}`)\n      }\n    },\n  },\n]\n\nconst masterGridRef = ref()\nconst isMasterNew = ref(false)\nconst masterDetail = ref({\n  memberId: '',\n  memberName: '',\n  isActive: 'Y',\n})\n\nfunction onMasterRowClicked(event: any) {\n  isMasterNew.value = false\n  masterDetail.value = {\n    memberId: event.data.memberId,\n    memberName: event.data.memberName,\n    isActive: event.data.isActive,\n  }\n}\n\nfunction onMasterNew() {\n  isMasterNew.value = true\n  masterDetail.value = {\n    memberId: '',\n    memberName: '',\n    isActive: 'Y',\n  }\n}\n\nfunction onMasterSave() {\n  console.log('회원사 저장:', masterDetail.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n  alert(`저장되었습니다: ${masterDetail.value.memberName}`)\n}\n\nfunction onMasterDelete() {\n  if (confirm(`${masterDetail.value.memberName}을(를) 삭제하시겠습니까?`)) {\n    console.log('회원사 삭제:', masterDetail.value.memberId)\n    // TODO: 실제 구현 시 API 호출로 대체\n    alert(`삭제되었습니다: ${masterDetail.value.memberName}`)\n  }\n}\n\nfunction onMasterReset() {\n  masterFilterValues.value = {\n    isActive: '',\n    keyword: '',\n  }\n}\n\nfunction onMasterSearch() {\n  console.log('회원사 조회:', masterFilterValues.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n}\n\nfunction onHelp() {\n  alert('회원사 관리 페이지 도움말')\n}\n\n// ==================== Tab 2: 매핑 (고객사) ====================\n\nconst mappingFilterCollapsed = ref(false)\nconst mappingFilterValues = ref({\n  keyword: '',\n})\n\nconst mappingFilterDisplay = {\n  keyword: {\n    label: '검색어',\n  },\n}\n\nconst mappingMasterGridRef = ref()\nconst unmappedGridRef = ref()\nconst mappedGridRef = ref()\n\nconst mappingMasterColumnDefs = ref([\n  { field: 'memberId', headerName: '회원사코드', width: 150 },\n  { field: 'memberName', headerName: '회원사명', flex: 1 },\n])\n\n// Mock 데이터 - 전체 고객사 (매핑 여부 포함)\nconst selectedMemberId = ref<string>('')\n\n// Mock 데이터 - 회원사별 매핑 정보\nconst mappingData = ref<Record<string, string[]>>({\n  M001: ['C001', 'C002'], // 제이솔루션에 매핑된 고객사\n  M002: ['C003'], // ABC물류에 매핑된 고객사\n  M003: [], // XYZ유통에 매핑된 고객사 없음\n})\n\nconst allCustomersData = [\n  { code: 'C001', name: '고객A' },\n  { code: 'C002', name: '고객B' },\n  { code: 'C003', name: '고객C' },\n  { code: 'C004', name: '고객D' },\n  { code: 'C005', name: '고객E' },\n]\n\nconst customerColumnDefs = ref([\n  { field: 'code', headerName: '코드', width: 120 },\n  { field: 'name', headerName: '이름', flex: 1 },\n])\n\n// 매핑/미매핑 고객사 계산\nconst unmappedCustomers = computed(() => {\n  if (!selectedMemberId.value) return []\n  const mappedCodes = mappingData.value[selectedMemberId.value] || []\n  return allCustomersData.filter((c) => !mappedCodes.includes(c.code))\n})\n\nconst mappedCustomers = computed(() => {\n  if (!selectedMemberId.value) return []\n  const mappedCodes = mappingData.value[selectedMemberId.value] || []\n  return allCustomersData.filter((c) => mappedCodes.includes(c.code))\n})\n\nfunction onMappingMasterRowClicked(event: any) {\n  selectedMemberId.value = event.data.memberId\n  console.log('선택된 회원사:', event.data.memberName)\n  // TODO: 실제 구현 시 API 호출로 매핑/미매핑 데이터 로드\n}\n\n/**\n * 매핑 버튼 클릭 (좌측 → 우측)\n */\nfunction onMap() {\n  if (!selectedMemberId.value) {\n    alert('회원사를 먼저 선택해주세요.')\n    return\n  }\n\n  const selectedRows = unmappedGridRef.value?.getSelectedRows() || []\n  if (selectedRows.length === 0) {\n    alert('매핑할 고객사를 선택해주세요.')\n    return\n  }\n\n  // 선택된 고객사 코드 추출\n  const selectedCodes = selectedRows.map((row: any) => row.code)\n\n  // 매핑 데이터 업데이트\n  const key = selectedMemberId.value\n  if (!mappingData.value[key]) {\n    mappingData.value[key] = []\n  }\n  mappingData.value[key]!.push(...selectedCodes)\n\n  console.log('매핑:', selectedCodes)\n  // TODO: 실제 구현 시 API 호출로 매핑 처리\n  // await api.mapCustomers(selectedMemberId.value, selectedCodes)\n}\n\n/**\n * 해제 버튼 클릭 (우측 → 좌측)\n */\nfunction onUnmap() {\n  if (!selectedMemberId.value) {\n    alert('회원사를 먼저 선택해주세요.')\n    return\n  }\n\n  const selectedRows = mappedGridRef.value?.getSelectedRows() || []\n  if (selectedRows.length === 0) {\n    alert('해제할 고객사를 선택해주세요.')\n    return\n  }\n\n  // 선택된 고객사 코드 추출\n  const selectedCodes = selectedRows.map((row: any) => row.code)\n\n  // 매핑 데이터에서 제거\n  const unmapKey = selectedMemberId.value\n  mappingData.value[unmapKey] = (mappingData.value[unmapKey] || []).filter(\n    (code) => !selectedCodes.includes(code)\n  )\n\n  console.log('해제:', selectedCodes)\n  // TODO: 실제 구현 시 API 호출로 매핑 해제 처리\n  // await api.unmapCustomers(selectedMemberId.value, selectedCodes)\n}\n\nfunction onMappingReset() {\n  mappingFilterValues.value = {\n    keyword: '',\n  }\n}\n\nfunction onMappingSearch() {\n  console.log('매핑 조회:', mappingFilterValues.value)\n  // TODO: 실제 구현 시 API 호출로 대체\n}\n\ndefineExpose({ masterGridRef, mappingMasterGridRef })\n</script>\n"],"names":["activeTabId","ref","tabs","handleTabChange","tabId","activeOptions","masterFilterCollapsed","masterFilterValues","masterFilterDisplay","val","masterRowData","masterColumnDefs","params","masterActionButtons","rowData","isMasterNew","masterDetail","masterGridRef","onMasterRowClicked","event","onMasterNew","onMasterSave","onMasterDelete","onMasterReset","onMasterSearch","onHelp","mappingFilterCollapsed","mappingFilterValues","mappingFilterDisplay","mappingMasterGridRef","unmappedGridRef","mappedGridRef","mappingMasterColumnDefs","selectedMemberId","mappingData","allCustomersData","customerColumnDefs","unmappedCustomers","computed","mappedCodes","c","mappedCustomers","onMappingMasterRowClicked","onMap","selectedRows","selectedCodes","row","key","onUnmap","unmapKey","code","onMappingReset","onMappingSearch","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","JTitlebar","JTabs","$event","_createElementVNode","_hoisted_2","JFilterBar","JButton","_cache","_hoisted_3","JFormField","JSplitter","_hoisted_4","JGrid","_hoisted_5","_hoisted_6","_toDisplayString","_hoisted_7","_hoisted_8","_createBlock","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17"],"mappings":"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"}

package/components/examples/ExampleTabMappingPage.vue2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ExampleTabMappingPage.vue.cjs");exports.default=e.default;
+//# sourceMappingURL=ExampleTabMappingPage.vue2.cjs.map

package/components/examples/ExampleTabMappingPage.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleTabMappingPage.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/examples/ExampleTabMappingPage.vue2.js

@@ -0,0 +1,5 @@
+import f from "./ExampleTabMappingPage.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=ExampleTabMappingPage.vue2.js.map

package/components/examples/ExampleTabMappingPage.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleTabMappingPage.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/molecules/JTitlebar.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../atoms/JButton.vue.cjs");require("../shadcn/index.cjs");require("lucide-vue-next");const n=require("../../lib/utils.cjs");require("@internationalized/date");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");const o=require("../atoms/JIcon.vue.cjs"),b=require("../atoms/JLabel.vue.cjs"),x=require("../atoms/JPopover.vue.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const p={class:"flex items-center gap-3 flex-1"},g={class:"flex items-center gap-2"},y={class:"p-2"},C={class:"text-sm text-muted-foreground whitespace-normal break-words"},_={key:0,class:"flex items-center gap-2"},h={key:1},k=e.defineComponent({__name:"JTitlebar",props:{styletype:{default:"default"},icon:{},title:{},description:{},buttons:{default:()=>[]}},emits:["buttonClick"],setup(r,{emit:a}){const c=r,i={default:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background",iconClass:"text-primary",titleClass:"text-foreground",infoIconClass:"text-muted-foreground hover:text-primary"},primary:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500",iconClass:"text-white",titleClass:"text-white font-semibold",infoIconClass:"text-white/80 hover:text-white"},accent:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50",iconClass:"text-blue-600",titleClass:"text-blue-700 font-semibold",infoIconClass:"text-blue-600/70 hover:text-blue-700"},neutral:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100",iconClass:"text-gray-600",titleClass:"text-gray-700",infoIconClass:"text-gray-500 hover:text-gray-700"},elevated:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md",iconClass:"text-primary",titleClass:"text-foreground font-semibold",infoIconClass:"text-muted-foreground hover:text-primary"}},l=e.computed(()=>i[c.styletype]??i.default),u=a,d=s=>{s.onClick?.(),u("buttonClick",s)};return(s,v)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(l.value.class))},[e.createElementVNode("div",p,[r.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:r.icon,size:"md",class:e.normalizeClass(l.value.iconClass)},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("div",g,[e.createVNode(e.unref(b.default),{text:r.title||"",class:e.normalizeClass(e.unref(n.cn)("text-lg font-semibold",l.value.titleClass))},null,8,["text","class"]),r.description?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,position:"bottom",align:"center","side-offset":8},{trigger:e.withCtx(()=>[e.createVNode(e.unref(o.default),{name:"info",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-help transition-colors inline-flex",l.value.infoIconClass))},null,8,["class"])]),default:e.withCtx(()=>[e.createElementVNode("div",y,[e.createElementVNode("p",C,e.toDisplayString(r.description),1)])]),_:1})):e.createCommentVNode("",!0)])]),r.buttons&&r.buttons.length>0?(e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.buttons,(t,m)=>(e.openBlock(),e.createBlock(e.unref(f.default),{key:m,variant:t.variant,styletype:t.styletype,disabled:t.disabled,loading:t.loading,class:e.normalizeClass(t.size==="sm"?"h-8":t.size==="lg"?"h-11":"h-9"),onClick:q=>d(t)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,size:"sm",class:"mr-1.5"},null,8,["name"])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",h,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),_:2},1032,["variant","styletype","disabled","loading","class","onClick"]))),128))])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"buttons")],2))}});exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("../atoms/JButton.vue.cjs");require("../shadcn/index.cjs");require("lucide-vue-next");const n=require("../../lib/utils.cjs");require("@internationalized/date");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");const o=require("../atoms/JIcon.vue.cjs"),b=require("../atoms/JLabel.vue.cjs"),x=require("../atoms/JPopover.vue.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const C={class:"flex items-center gap-3 flex-1"},y={class:"flex items-center gap-2"},g={class:"p-2"},k={class:"text-sm text-muted-foreground whitespace-normal break-words"},h={key:0,class:"flex items-center gap-2"},v={key:1},_=e.defineComponent({__name:"JTitlebar",props:{styletype:{default:"default"},icon:{},title:{},description:{},showHelp:{type:Boolean},buttons:{default:()=>[]}},emits:["buttonClick","help"],setup(r,{emit:u}){const d=r,i={default:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background",iconClass:"text-primary",titleClass:"text-foreground",infoIconClass:"text-muted-foreground hover:text-primary"},primary:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500",iconClass:"text-white",titleClass:"text-white font-semibold",infoIconClass:"text-white/80 hover:text-white"},accent:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50",iconClass:"text-blue-600",titleClass:"text-blue-700 font-semibold",infoIconClass:"text-blue-600/70 hover:text-blue-700"},neutral:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100",iconClass:"text-gray-600",titleClass:"text-gray-700",infoIconClass:"text-gray-500 hover:text-gray-700"},elevated:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md",iconClass:"text-primary",titleClass:"text-foreground font-semibold",infoIconClass:"text-muted-foreground hover:text-primary"}},l=e.computed(()=>i[d.styletype]??i.default),a=u,m=s=>{s.onClick?.(),a("buttonClick",s)};return(s,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(l.value.class))},[e.createElementVNode("div",C,[r.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:r.icon,size:"md",class:e.normalizeClass(l.value.iconClass)},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("div",y,[e.createVNode(e.unref(b.default),{text:r.title||"",class:e.normalizeClass(e.unref(n.cn)("text-lg font-semibold",l.value.titleClass))},null,8,["text","class"]),r.description?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,position:"bottom",align:"center","side-offset":8},{trigger:e.withCtx(()=>[e.createVNode(e.unref(o.default),{name:"info",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-help transition-colors inline-flex",l.value.infoIconClass))},null,8,["class"])]),default:e.withCtx(()=>[e.createElementVNode("div",g,[e.createElementVNode("p",k,e.toDisplayString(r.description),1)])]),_:1})):e.createCommentVNode("",!0),r.showHelp?(e.openBlock(),e.createBlock(e.unref(o.default),{key:1,name:"circleQuestionMark",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-pointer transition-colors inline-flex",l.value.infoIconClass)),onClick:c[0]||(c[0]=t=>a("help"))},null,8,["class"])):e.createCommentVNode("",!0)])]),r.buttons&&r.buttons.length>0?(e.openBlock(),e.createElementBlock("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.buttons,(t,f)=>(e.openBlock(),e.createBlock(e.unref(p.default),{key:f,variant:t.variant,styletype:t.styletype,disabled:t.disabled,loading:t.loading,class:e.normalizeClass(t.size==="sm"?"h-8":t.size==="lg"?"h-11":"h-9"),onClick:q=>m(t)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,size:"sm",class:"mr-1.5"},null,8,["name"])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),_:2},1032,["variant","styletype","disabled","loading","class","onClick"]))),128))])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"buttons")],2))}});exports.default=_;
 //# sourceMappingURL=JTitlebar.vue.cjs.map

package/components/molecules/JTitlebar.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JTitlebar.vue.cjs","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        size=\"md\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('text-lg font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-sm text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :class=\"button.size === 'sm' ? 'h-8' : button.size === 'lg' ? 'h-11' : 'h-9'\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"2sDAgCA,MAAMA,EAAQC,EAsBRC,EAKD,CACH,QAAS,CAEP,MAAO,0FACP,UAAW,eACX,WAAY,kBACZ,cAAe,0CAAA,EAEjB,QAAS,CAGP,MAAO,6FACP,UAAW,aACX,WAAY,2BACZ,cAAe,gCAAA,EAEjB,OAAQ,CAGN,MAAO,yFACP,UAAW,gBACX,WAAY,8BACZ,cAAe,sCAAA,EAEjB,QAAS,CAGP,MAAO,0FACP,UAAW,gBACX,WAAY,gBACZ,cAAe,mCAAA,EAEjB,SAAU,CAER,MAAO,oGACP,UAAW,eACX,WAAY,gCACZ,cAAe,0CAAA,CACjB,EAGIC,EAASC,EAAAA,SAAS,IACfF,EAAcF,EAAM,SAAS,GAAKE,EAAc,OACxD,EAEKG,EAAOC,EAKPC,EAAqBC,GAA2B,CAKpDA,EAAO,UAAA,EACPH,EAAK,cAAeG,CAAM,CAC5B,8BAIEC,EAAAA,mBAgEM,MAAA,CAhEA,MAAKC,EAAAA,eAAEC,QAAAC,EAAAA,EAAA,EAAGT,EAAA,MAAO,KAAK,CAAA,CAAA,GAE1BU,EAAAA,mBAoCM,MApCNC,EAoCM,CAjCIb,EAAA,oBADRc,EAAAA,YAKEJ,EAAAA,MAAAK,EAAAA,OAAA,EAAA,OAHC,KAAMf,EAAA,KACP,KAAK,KACJ,MAAKS,EAAAA,eAAEP,EAAA,MAAO,SAAS,CAAA,wDAI1BU,EAAAA,mBAyBM,MAzBNI,EAyBM,CAvBJC,cAGEP,EAAAA,MAAAQ,EAAAA,OAAA,EAAA,CAFC,KAAMlB,EAAA,OAAK,GACX,MAAKS,EAAAA,eAAEC,EAAAA,MAAAC,EAAAA,EAAA,EAAE,wBAA0BT,EAAA,MAAO,UAAU,CAAA,CAAA,2BAK/CF,EAAA,2BADRc,EAAAA,YAgBWJ,EAAAA,MAAAS,EAAAA,OAAA,EAAA,OAdT,SAAS,SACT,MAAM,SACL,cAAa,CAAA,GAEH,kBACT,IAIE,CAJFF,cAIEP,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAHA,KAAK,OACL,KAAK,KACJ,MAAKN,EAAAA,eAAEC,EAAAA,MAAAC,EAAAA,EAAA,EAAE,4CAA8CT,EAAA,MAAO,aAAa,CAAA,CAAA,wCAGhF,IAEM,CAFNU,EAAAA,mBAEM,MAFNQ,EAEM,CADJR,EAAAA,mBAA4F,IAA5FS,EAA4FC,EAAAA,gBAAlBtB,EAAA,WAAW,EAAA,CAAA,CAAA,4CAQlFA,EAAA,SAAWA,EAAA,QAAQ,OAAM,GAApCuB,EAAAA,YAAAf,EAAAA,mBAcM,MAdNgB,EAcM,EAbJD,EAAAA,UAAA,EAAA,EAAAf,EAAAA,mBAYUiB,WAAA,KAAAC,EAAAA,WAXkB1B,EAAA,QAAO,CAAzBO,EAAQoB,mBADlBb,EAAAA,YAYUJ,EAAAA,MAAAkB,EAAAA,OAAA,EAAA,CAVP,IAAKD,EACL,QAASpB,EAAO,QAChB,UAAWA,EAAO,UAClB,SAAUA,EAAO,SACjB,QAASA,EAAO,QAChB,uBAAOA,EAAO,OAAI,KAAA,MAAoBA,EAAO,OAAI,KAAA,OAAA,KAAA,EACjD,QAAKsB,GAAEvB,EAAkBC,CAAM,CAAA,qBAEhC,IAAyE,CAA5DA,EAAO,oBAApBO,EAAAA,YAAyEJ,EAAAA,MAAAK,EAAAA,OAAA,EAAA,OAA9C,KAAMR,EAAO,KAAM,KAAK,KAAK,MAAM,QAAA,gDAClDA,EAAO,oBAAnBC,EAAAA,mBAAiD,OAAAsB,EAAAR,EAAAA,gBAArBf,EAAO,IAAI,EAAA,CAAA,kJAS3CwB,aAAuBC,EAAA,OAAA,SAAA,CAAA"}
+{"version":3,"file":"JTitlebar.vue.cjs","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 help 이벤트 emit */\n    showHelp?: boolean\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n  /** 도움말 아이콘 클릭 이벤트 */\n  help: []\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        size=\"md\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('text-lg font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-sm text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n\n        <!-- 도움말 아이콘 (showHelp일 때 표시, 클릭 시 help 이벤트) -->\n        <JIcon\n          v-if=\"showHelp\"\n          name=\"circleQuestionMark\"\n          size=\"sm\"\n          :class=\"cn('cursor-pointer transition-colors inline-flex', preset.infoIconClass)\"\n          @click=\"emit('help')\"\n        />\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :class=\"button.size === 'sm' ? 'h-8' : button.size === 'lg' ? 'h-11' : 'h-9'\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}