@j-solution/components 1.6.1 → 1.7.0

package/components/examples/ExampleTabMappingPage.vue.js

@@ -1,4 +1,4 @@
-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 { 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 "../shadcn/index.js";
@@ -7,9 +7,10 @@ import "reka-ui";
 import "clsx";
 import "tailwind-merge";
 import "lucide-vue-next";
-import re from "../molecules/JTabs.vue.js";
+import se from "../molecules/JTabs.vue.js";
 /* empty css                            */
 /* empty css                             */
+import re from "../molecules/JCard.vue.js";
 import u from "../atoms/JButton.vue.js";
 import "@internationalized/date";
 import "md-editor-v3";
@@ -21,7 +22,7 @@ import "../shadcn/avatar-variants.js";
 import "dompurify";
 /* empty css                     */
 import y from "../atoms/JGrid.vue.js";
-import h from "../atoms/JSplitter.vue.js";
+import A from "../atoms/JSplitter.vue.js";
 import "vue-sonner";
 import ne from "../molecules/JTitlebar.vue.js";
 /* empty css                             */
@@ -30,23 +31,23 @@ 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({
+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({
   __name: "ExampleTabMappingPage",
-  setup(_e, { expose: U }) {
-    const k = r("master"), Y = [
+  setup(De, { expose: G }) {
+    const w = r("master"), U = [
       { id: "master", label: "회원사 기본정보" },
       { id: "mapping-customer", label: "고객사 매핑" }
     ];
     function $(l) {
       console.log("탭 변경:", l);
     }
-    const G = [
+    const T = [
       { value: "Y", label: "Y:활성" },
       { value: "N", label: "N:비활성" }
-    ], x = r(!1), p = r({
+    ], k = r(!1), p = r({
       isActive: "",
       keyword: ""
-    }), T = {
+    }), Y = {
       isActive: {
         label: "활성여부",
         displayValue: (l) => l === "Y" ? "Y:활성" : l === "N" ? "N:비활성" : ""
@@ -58,16 +59,32 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
       { 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 },
+    ]), F = r([
+      {
+        field: "memberId",
+        headerName: "회원사코드",
+        width: 150,
+        enableValue: !0
+        // 집계 가능 (count)
+      },
+      {
+        field: "memberName",
+        headerName: "회원사명",
+        flex: 1,
+        enableValue: !0
+        // 집계 가능 (count)
+      },
       {
         field: "isActive",
         headerName: "활성",
         width: 100,
-        cellRenderer: (l) => l.value === "Y" ? "✓" : ""
+        cellRenderer: (l) => l.value === "Y" ? "✓" : "",
+        enableRowGroup: !0,
+        // Row Group으로 사용 가능
+        enablePivot: !0
+        // Pivot Column으로 사용 가능
       }
-    ]), F = [
+    ]), S = [
       {
         icon: "pencil",
         label: "수정",
@@ -89,50 +106,50 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
           confirm(`${l.memberName}을(를) 삭제하시겠습니까?`) && (console.log("회원사 삭제:", l.memberId), alert(`삭제되었습니다: ${l.memberName}`));
         }
       }
-    ], w = r(), f = r(!1), n = r({
+    ], x = r(), f = r(!1), n = r({
       memberId: "",
       memberName: "",
       isActive: "Y"
     });
-    function S(l) {
+    function B(l) {
       f.value = !1, n.value = {
         memberId: l.data.memberId,
         memberName: l.data.memberName,
         isActive: l.data.isActive
       };
     }
-    function E() {
+    function P() {
       f.value = !0, n.value = {
         memberId: "",
         memberName: "",
         isActive: "Y"
       };
     }
-    function j() {
+    function E() {
       console.log("회원사 저장:", n.value), alert(`저장되었습니다: ${n.value.memberName}`);
     }
-    function H() {
+    function j() {
       confirm(`${n.value.memberName}을(를) 삭제하시겠습니까?`) && (console.log("회원사 삭제:", n.value.memberId), alert(`삭제되었습니다: ${n.value.memberName}`));
     }
-    function J() {
+    function H() {
       p.value = {
         isActive: "",
         keyword: ""
       };
     }
-    function K() {
+    function J() {
       console.log("회원사 조회:", p.value);
     }
-    function L() {
+    function W() {
       alert("회원사 관리 페이지 도움말");
     }
     const N = r(!1), v = r({
       keyword: ""
-    }), O = {
+    }), K = {
       keyword: {
         label: "검색어"
       }
-    }, V = r(), D = r(), _ = r(), P = r([
+    }, V = r(), _ = r(), D = r(), L = r([
       { field: "memberId", headerName: "회원사코드", width: 150 },
       { field: "memberName", headerName: "회원사명", flex: 1 }
     ]), m = r(""), c = r({
@@ -142,33 +159,33 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
       // ABC물류에 매핑된 고객사
       M003: []
       // XYZ유통에 매핑된 고객사 없음
-    }), M = [
+    }), h = [
       { code: "C001", name: "고객A" },
       { code: "C002", name: "고객B" },
       { code: "C003", name: "고객C" },
       { code: "C004", name: "고객D" },
       { code: "C005", name: "고객E" }
-    ], I = r([
+    ], M = r([
       { field: "code", headerName: "코드", width: 120 },
       { field: "name", headerName: "이름", flex: 1 }
-    ]), X = A(() => {
+    ]), O = I(() => {
       if (!m.value) return [];
       const l = c.value[m.value] || [];
-      return M.filter((e) => !l.includes(e.code));
-    }), Z = A(() => {
+      return h.filter((e) => !l.includes(e.code));
+    }), X = I(() => {
       if (!m.value) return [];
       const l = c.value[m.value] || [];
-      return M.filter((e) => l.includes(e.code));
+      return h.filter((e) => l.includes(e.code));
     });
-    function q(l) {
+    function Z(l) {
       m.value = l.data.memberId, console.log("선택된 회원사:", l.data.memberName);
     }
-    function Q() {
+    function q() {
       if (!m.value) {
         alert("회원사를 먼저 선택해주세요.");
         return;
       }
-      const l = D.value?.getSelectedRows() || [];
+      const l = _.value?.getSelectedRows() || [];
       if (l.length === 0) {
         alert("매핑할 고객사를 선택해주세요.");
         return;
@@ -176,12 +193,12 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
       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() {
+    function Q() {
       if (!m.value) {
         alert("회원사를 먼저 선택해주세요.");
         return;
       }
-      const l = _.value?.getSelectedRows() || [];
+      const l = D.value?.getSelectedRows() || [];
       if (l.length === 0) {
         alert("해제할 고객사를 선택해주세요.");
         return;
@@ -199,28 +216,28 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
     function le() {
       console.log("매핑 조회:", v.value);
     }
-    return U({ masterGridRef: w, mappingMasterGridRef: V }), (l, e) => (R(), te("div", me, [
+    return G({ masterGridRef: x, mappingMasterGridRef: V }), (l, e) => (R(), te("div", me, [
       a(t(ne), {
         icon: "users",
         title: "회원사 관리",
         description: "회원사 정보 및 고객사 매핑을 관리합니다",
         showHelp: !0,
-        onHelp: L
+        onHelp: W
       }),
-      a(t(re), {
-        activeTabId: k.value,
-        "onUpdate:activeTabId": e[10] || (e[10] = (o) => k.value = o),
-        tabs: Y,
+      a(t(se), {
+        activeTabId: w.value,
+        "onUpdate:activeTabId": e[10] || (e[10] = (o) => w.value = o),
+        tabs: U,
         onTabChange: $
       }, {
         "content-master": i(() => [
           s("div", de, [
             a(t(z), {
-              collapsed: x.value,
-              "onUpdate:collapsed": e[2] || (e[2] = (o) => x.value = o),
+              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: T,
+              filterDisplay: Y,
               collapsible: !0,
               title: "회원사 목록"
             }, {
@@ -228,7 +245,7 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                 a(t(u), {
                   size: "sm",
                   variant: "outline",
-                  onClick: J
+                  onClick: H
                 }, {
                   default: i(() => [...e[11] || (e[11] = [
                     d("초기화", -1)
@@ -238,7 +255,7 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                 a(t(u), {
                   size: "sm",
                   styletype: "primary",
-                  onClick: K
+                  onClick: J
                 }, {
                   default: i(() => [...e[12] || (e[12] = [
                     d("조회", -1)
@@ -248,7 +265,7 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                 a(t(u), {
                   size: "sm",
                   styletype: "primary",
-                  onClick: E
+                  onClick: P
                 }, {
                   default: i(() => [...e[13] || (e[13] = [
                     d("신규", -1)
@@ -263,88 +280,111 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                     label: "활성여부",
                     modelValue: p.value.isActive,
                     "onUpdate:modelValue": e[0] || (e[0] = (o) => p.value.isActive = o),
-                    options: G
+                    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)
+                    "onUpdate:modelValue": e[1] || (e[1] = (o) => p.value.keyword = o),
+                    orientation: "horizontal",
+                    labelWidth: "30%"
                   }, null, 8, ["modelValue"])
                 ])
               ]),
               _: 1
             }, 8, ["collapsed", "filterValues"]),
-            a(t(h), {
+            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: w,
-                    columnDefs: B.value,
+                    ref: x,
+                    columnDefs: F.value,
                     rowData: C.value,
-                    "action-buttons": F,
-                    onRowClicked: S
+                    "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, [
-                  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
-                    }))
-                  ])
+                  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
@@ -358,7 +398,7 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
               "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,
+              filterDisplay: K,
               collapsible: !0,
               title: "회원사별 고객사 매핑"
             }, {
@@ -396,34 +436,36 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
               ]),
               _: 1
             }, 8, ["collapsed", "filterValues"]),
-            a(t(h), {
+            a(t(A), {
               direction: "vertical",
               "default-size": 30,
               "min-size": 20,
               "second-min-size": 40,
+              gap: 2,
               class: "flex-1"
             }, {
               top: i(() => [
-                s("div", ke, [
+                s("div", we, [
                   a(t(y), {
                     ref_key: "mappingMasterGridRef",
                     ref: V,
-                    columnDefs: P.value,
+                    columnDefs: L.value,
                     rowData: C.value,
-                    onRowClicked: q
+                    onRowClicked: Z
                   }, null, 8, ["columnDefs", "rowData"])
                 ])
               ]),
               bottom: i(() => [
-                s("div", xe, [
+                s("div", ke, [
                   s("div", Ce, [
                     e[18] || (e[18] = s("h4", { class: "text-sm font-semibold mb-2 px-2" }, "미매핑 고객사", -1)),
-                    s("div", we, [
+                    s("div", xe, [
                       a(t(y), {
                         ref_key: "unmappedGridRef",
-                        ref: D,
-                        columnDefs: I.value,
-                        rowData: X.value,
+                        ref: _,
+                        columnDefs: M.value,
+                        rowData: O.value,
+                        pagination: !1,
                         checkbox: ""
                       }, null, 8, ["columnDefs", "rowData"])
                     ])
@@ -432,7 +474,7 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                     a(t(u), {
                       styletype: "primary",
                       size: "sm",
-                      onClick: Q
+                      onClick: q
                     }, {
                       default: i(() => [...e[19] || (e[19] = [
                         d("매핑 ▶", -1)
@@ -442,7 +484,7 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                     a(t(u), {
                       variant: "outline",
                       size: "sm",
-                      onClick: W
+                      onClick: Q
                     }, {
                       default: i(() => [...e[20] || (e[20] = [
                         d("◀ 해제", -1)
@@ -452,12 +494,13 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
                   ]),
                   s("div", Ve, [
                     e[21] || (e[21] = s("h4", { class: "text-sm font-semibold mb-2 px-2" }, "매핑된 고객사", -1)),
-                    s("div", De, [
+                    s("div", _e, [
                       a(t(y), {
                         ref_key: "mappedGridRef",
-                        ref: _,
-                        columnDefs: I.value,
-                        rowData: Z.value,
+                        ref: D,
+                        columnDefs: M.value,
+                        rowData: X.value,
+                        pagination: !1,
                         checkbox: ""
                       }, null, 8, ["columnDefs", "rowData"])
                     ])
@@ -474,6 +517,6 @@ const me = { class: "flex flex-col h-full gap-4 bg-background text-foreground" }
   }
 });
 export {
-  il as default
+  sl as default
 };
 //# sourceMappingURL=ExampleTabMappingPage.vue.js.map