@j-solution/components 1.7.0 → 1.9.0

package/components/examples/ExampleTabMappingPage.vue.js

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