@j-solution/components 2.0.4 → 2.0.6

package/components/templates/JLayoutAdvanced.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),A=require("./JLayout.vue.cjs"),k=require("../organisms/JHeader.vue.cjs"),S=require("../organisms/JSidebarAdvanced.vue.cjs"),x=require("../organisms/JDynamicTabs.vue.cjs"),f=require("vue-router"),P={key:1,class:"flex-1 p-6"},w={class:"text-muted-foreground"},B={key:0,class:"text-xs text-gray-400 mt-2"},R=e.defineComponent({__name:"JLayoutAdvanced",props:{styletype:{default:"minimal"},contentScroll:{type:Boolean,default:!0},class:{},menuItems:{default:()=>[]},favorites:{default:()=>[]},permissions:{default:()=>[]}},emits:["menuClick","tabAdd","tabChange","tabClose","favoriteChange"],setup(m,{emit:b}){const o=m,s=b,u=e.ref(!0),y=()=>{u.value=!u.value},d=e.ref(null),l=e.ref([]),n=e.ref(void 0),h=t=>t?`tab-${t.replace(/^\/+|\/+$/g,"").replace(/\//g,"-")}`:"";let i=null;try{i=f.useRouter()}catch{i=null}const g=async t=>{const a=t.menuItem;if(!a||a.menuType!=="L"){s("menuClick",t);return}if(!a.path){s("menuClick",t);return}const r=h(a.path);if(await e.nextTick(),await e.nextTick(),d.value&&typeof d.value.addTab=="function")try{d.value.addTab({id:r,label:a.label||"제목 없음",icon:a.icon,closable:!0,meta:{path:a.path,menuKey:a.menuKey}}),s("tabAdd",{id:r,label:a.label||"제목 없음",icon:a.icon,closable:!0}),i&&i.push({path:a.path});return}catch(p){console.error("탭 추가 실패:",p)}const c={id:r,label:a.label||"제목 없음",icon:a.icon,closable:!0,meta:{path:a.path,menuKey:a.menuKey}};Array.isArray(l.value)||(l.value=[]),l.value.find(p=>p.id===r)?n.value=r:(l.value=[...l.value,c],n.value=r,s("tabAdd",c)),i&&i.push({path:a.path})},_=t=>{Array.isArray(l.value)||(l.value=[]),l.value.find(r=>r.id===t.id)||l.value.push(t),n.value=t.id,s("tabAdd",t)},C=t=>{!l.value||!Array.isArray(l.value)||l.value.length===0||(l.value=l.value.filter(a=>a.id!==t),n.value===t&&Array.isArray(l.value)&&l.value.length>0&&l.value[0]?n.value=l.value[0].id:Array.isArray(l.value)&&l.value.length===0&&(n.value=void 0),s("tabClose",t))},T=t=>{n.value=t,s("tabChange",t)},v=e.computed(()=>Array.isArray(l.value)?l.value:[]);return(t,a)=>(e.openBlock(),e.createBlock(A.default,e.normalizeProps(e.guardReactiveProps(o)),{header:e.withCtx(()=>[e.renderSlot(t.$slots,"header",{isSidebarOpen:u.value,onSidebarToggle:y},()=>[e.createVNode(k.default,{"logo-text":"JWMS Portal",styletype:o.styletype,"show-sidebar-toggle":!0,"is-sidebar-open":u.value,onSidebarToggle:y},null,8,["styletype","is-sidebar-open"])])]),sidebar:e.withCtx(()=>[e.renderSlot(t.$slots,"sidebar",{isSidebarOpen:u.value},()=>[e.createVNode(S.default,{"menu-items":o.menuItems,favorites:o.favorites,permissions:o.permissions,styletype:o.styletype,"is-visible":u.value,onMenuClick:g,onFavoriteChange:a[0]||(a[0]=(r,c)=>s("favoriteChange",r,c))},null,8,["menu-items","favorites","permissions","styletype","is-visible"])])]),content:e.withCtx(()=>[e.renderSlot(t.$slots,"content",{tabs:v.value,activeTabId:n.value,tabsRef:d.value},()=>[e.createVNode(x.default,{ref_key:"tabsRef",ref:d,"initial-tabs":v.value,"default-active-id":n.value,styletype:o.styletype||"minimal",onTabAdd:_,onTabClose:C,onTabChange:T},e.createSlots({_:2},[e.renderList(v.value,r=>({name:`content-${r.id}`,fn:e.withCtx(c=>[e.renderSlot(t.$slots,`content-${r.id}`,e.normalizeProps(e.guardReactiveProps(c)),()=>[r.meta?.path&&e.unref(i)?(e.openBlock(),e.createBlock(e.unref(f.RouterView),{key:r.id})):(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",w,"콘텐츠를 배치해주세요. (Path: "+e.toDisplayString(r.meta?.path||"N/A")+")",1),e.unref(i)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",B," Router가 없어서 슬롯으로 콘텐츠를 제공해야 합니다. "))]))])])}))]),1032,["initial-tabs","default-active-id","styletype"])])]),_:3},16))}});exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),A=require("./JLayout.vue.cjs"),k=require("../organisms/JHeader.vue.cjs"),S=require("../organisms/JSidebarAdvanced.vue.cjs"),x=require("../organisms/JDynamicTabs.vue.cjs"),y=require("vue-router"),P={key:1,class:"flex-1 p-6"},w={class:"text-muted-foreground"},B={key:0,class:"text-xs text-gray-400 mt-2"},R=e.defineComponent({__name:"JLayoutAdvanced",props:{styletype:{default:"minimal"},contentScroll:{type:Boolean,default:!0},class:{},menuItems:{default:()=>[]},favorites:{default:()=>[]},permissions:{default:()=>[]}},emits:["menuClick","tabAdd","tabChange","tabClose","favoriteChange"],setup(m,{emit:b}){const o=m,s=b,u=e.ref(!0),f=()=>{u.value=!u.value},c=e.ref(null),l=e.ref([]),n=e.ref(void 0),h=t=>t?`tab-${t.replace(/^\/+|\/+$/g,"").replace(/\//g,"-")}`:"";let i=null;try{i=y.useRouter()}catch{i=null}const g=async t=>{const a=t.menuItem;if(!a||a.menuType!=="L"){s("menuClick",t);return}if(!a.path){s("menuClick",t);return}const r=h(a.path);if(await e.nextTick(),await e.nextTick(),c.value&&typeof c.value.addTab=="function")try{c.value.addTab({id:r,label:a.label||"제목 없음",icon:a.icon,closable:!0,meta:{path:a.path,menuKey:a.menuKey}}),s("tabAdd",{id:r,label:a.label||"제목 없음",icon:a.icon,closable:!0}),i&&i.push({path:a.path});return}catch(p){console.error("탭 추가 실패:",p)}const d={id:r,label:a.label||"제목 없음",icon:a.icon,closable:!0,meta:{path:a.path,menuKey:a.menuKey}};Array.isArray(l.value)||(l.value=[]),l.value.find(p=>p.id===r)?n.value=r:(l.value=[...l.value,d],n.value=r,s("tabAdd",d)),i&&i.push({path:a.path})},_=t=>{Array.isArray(l.value)||(l.value=[]),l.value.find(r=>r.id===t.id)||l.value.push(t),n.value=t.id,s("tabAdd",t)},C=t=>{!l.value||!Array.isArray(l.value)||l.value.length===0||(l.value=l.value.filter(a=>a.id!==t),n.value===t&&Array.isArray(l.value)&&l.value.length>0&&l.value[0]?n.value=l.value[0].id:Array.isArray(l.value)&&l.value.length===0&&(n.value=void 0),s("tabClose",t))},T=t=>{n.value=t,s("tabChange",t)},v=e.computed(()=>Array.isArray(l.value)?l.value:[]);return(t,a)=>(e.openBlock(),e.createBlock(A.default,e.normalizeProps(e.guardReactiveProps(o)),{header:e.withCtx(()=>[e.renderSlot(t.$slots,"header",{isSidebarOpen:u.value,onSidebarToggle:f},()=>[e.createVNode(k.default,{"logo-text":"JWMS Portal",styletype:o.styletype,"show-sidebar-toggle":!0,"is-sidebar-open":u.value,onSidebarToggle:f},null,8,["styletype","is-sidebar-open"])])]),sidebar:e.withCtx(()=>[e.renderSlot(t.$slots,"sidebar",{isSidebarOpen:u.value},()=>[e.createVNode(S.default,{"menu-items":o.menuItems,favorites:o.favorites,permissions:o.permissions,styletype:o.styletype,"is-visible":u.value,onMenuClick:g,onFavoriteChange:a[0]||(a[0]=(r,d)=>s("favoriteChange",r,d))},null,8,["menu-items","favorites","permissions","styletype","is-visible"])])]),content:e.withCtx(()=>[e.renderSlot(t.$slots,"content",{tabs:v.value,activeTabId:n.value,tabsRef:c.value},()=>[e.createVNode(x.default,{ref_key:"tabsRef",ref:c,"initial-tabs":v.value,"default-active-id":n.value,styletype:o.styletype||"minimal",onTabAdd:_,onTabClose:C,onTabChange:T},e.createSlots({_:2},[e.renderList(v.value,r=>({name:`content-${r.id}`,fn:e.withCtx(d=>[e.renderSlot(t.$slots,`content-${r.id}`,e.normalizeProps(e.guardReactiveProps(d)),()=>[r.meta?.path&&e.unref(i)?(e.openBlock(),e.createBlock(e.unref(y.RouterView),{key:r.id})):(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",w,"콘텐츠를 배치해주세요. (Path: "+e.toDisplayString(r.meta?.path||"N/A")+")",1),e.unref(i)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",B," Router가 없어서 슬롯으로 콘텐츠를 제공해야 합니다. "))]))])])}))]),1032,["initial-tabs","default-active-id","styletype"])])]),_:3},16))}});exports.default=R;
 //# sourceMappingURL=JLayoutAdvanced.vue.cjs.map

package/components/templates/JLayoutAdvanced.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as B, ref as c, computed as K, createBlock as A, openBlock as m, normalizeProps as C, guardReactiveProps as T, withCtx as v, renderSlot as p, createVNode as b, createSlots as N, renderList as V, createElementBlock as _, unref as h, createElementVNode as J, createCommentVNode as L, toDisplayString as M, nextTick as k } from "vue";
+import { defineComponent as B, ref as c, computed as J, createBlock as A, openBlock as m, normalizeProps as C, guardReactiveProps as T, withCtx as v, renderSlot as p, createVNode as b, createSlots as K, renderList as L, createElementBlock as k, unref as h, createElementVNode as N, createCommentVNode as V, toDisplayString as M, nextTick as _ } from "vue";
 import O from "./JLayout.vue.js";
 import E from "../organisms/JHeader.vue.js";
 import F from "../organisms/JSidebarAdvanced.vue.js";
@@ -21,10 +21,10 @@ const j = {
     permissions: { default: () => [] }
   },
   emits: ["menuClick", "tabAdd", "tabChange", "tabClose", "favoriteChange"],
-  setup(S, { emit: $ }) {
-    const r = S, s = $, o = c(!0), g = () => {
+  setup(S, { emit: x }) {
+    const r = S, s = x, o = c(!0), g = () => {
       o.value = !o.value;
-    }, d = c(null), t = c([]), n = c(void 0), x = (e) => e ? `tab-${e.replace(/^\/+|\/+$/g, "").replace(/\//g, "-")}` : "";
+    }, d = c(null), t = c([]), n = c(void 0), $ = (e) => e ? `tab-${e.replace(/^\/+|\/+$/g, "").replace(/\//g, "-")}` : "";
     let i = null;
     try {
       i = D();
@@ -41,8 +41,8 @@ const j = {
         s("menuClick", e);
         return;
       }
-      const l = x(a.path);
-      if (await k(), await k(), d.value && typeof d.value.addTab == "function")
+      const l = $(a.path);
+      if (await _(), await _(), d.value && typeof d.value.addTab == "function")
         try {
           d.value.addTab({
             id: l,
@@ -75,7 +75,7 @@ const j = {
       !t.value || !Array.isArray(t.value) || t.value.length === 0 || (t.value = t.value.filter((a) => a.id !== e), n.value === e && Array.isArray(t.value) && t.value.length > 0 && t.value[0] ? n.value = t.value[0].id : Array.isArray(t.value) && t.value.length === 0 && (n.value = void 0), s("tabClose", e));
     }, w = (e) => {
       n.value = e, s("tabChange", e);
-    }, f = K(() => Array.isArray(t.value) ? t.value : []);
+    }, f = J(() => Array.isArray(t.value) ? t.value : []);
     return (e, a) => (m(), A(O, C(T(r)), {
       header: v(() => [
         p(e.$slots, "header", {
@@ -119,16 +119,16 @@ const j = {
             onTabAdd: P,
             onTabClose: R,
             onTabChange: w
-          }, N({ _: 2 }, [
-            V(f.value, (l) => ({
+          }, K({ _: 2 }, [
+            L(f.value, (l) => ({
               name: `content-${l.id}`,
               fn: v((u) => [
                 p(e.$slots, `content-${l.id}`, C(T(u)), () => [
                   l.meta?.path && h(i) ? (m(), A(h(W), {
                     key: l.id
-                  })) : (m(), _("div", j, [
-                    J("p", q, "콘텐츠를 배치해주세요. (Path: " + M(l.meta?.path || "N/A") + ")", 1),
-                    h(i) ? L("", !0) : (m(), _("p", G, " Router가 없어서 슬롯으로 콘텐츠를 제공해야 합니다. "))
+                  })) : (m(), k("div", j, [
+                    N("p", q, "콘텐츠를 배치해주세요. (Path: " + M(l.meta?.path || "N/A") + ")", 1),
+                    h(i) ? V("", !0) : (m(), k("p", G, " Router가 없어서 슬롯으로 콘텐츠를 제공해야 합니다. "))
                   ]))
                 ])
               ])

package/components/templates/JLayoutSimple.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("./JLayout.vue.cjs"),c=require("../organisms/JHeader.vue.cjs"),_=require("../organisms/JSidebar/JSidebar.vue.cjs"),v=require("../organisms/JPageContainer.vue.cjs"),g=e.defineComponent({__name:"JLayoutSimple",props:{styletype:{default:"default"},contentScroll:{type:Boolean,default:!0},class:{},menuItems:{default:()=>[]},activePath:{},storageKey:{}},emits:["menu-click"],setup(s,{emit:u}){const o=s,n=u,t=e.ref(!1),r=()=>{t.value=!t.value},i=(l,a)=>{n("menu-click",l,a)};return(l,a)=>(e.openBlock(),e.createBlock(p.default,e.normalizeProps(e.guardReactiveProps(o)),{header:e.withCtx(()=>[e.renderSlot(l.$slots,"header",{isSidebarCollapsed:t.value,onSidebarToggle:r},()=>[e.createVNode(c.default,{"logo-text":"JWMS Portal",styletype:o.styletype,"show-sidebar-toggle":!0,"is-sidebar-open":!t.value,onSidebarToggle:r},null,8,["styletype","is-sidebar-open"])])]),sidebar:e.withCtx(()=>[e.renderSlot(l.$slots,"sidebar",{isSidebarCollapsed:t.value},()=>[e.createVNode(_.default,{collapsed:t.value,"onUpdate:collapsed":a[0]||(a[0]=d=>t.value=d),items:o.menuItems,"active-path":o.activePath,"storage-key":o.storageKey,onMenuClick:i},null,8,["collapsed","items","active-path","storage-key"])])]),content:e.withCtx(()=>[e.renderSlot(l.$slots,"content",{},()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createVNode(v.default,{title:"페이지 제목"},{default:e.withCtx(()=>[...a[1]||(a[1]=[e.createElementVNode("div",{class:"p-6"},[e.createElementVNode("p",{class:"text-muted-foreground"},"콘텐츠를 배치해주세요.")],-1)])]),_:1})])])]),_:3},16))}});exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("./JLayout.vue.cjs"),_=require("../organisms/JHeader.vue.cjs"),g=require("../organisms/JSidebar/JSidebar.vue.cjs"),m=require("../organisms/JPageContainer.vue.cjs"),f=require("../../composables/useBreakpoint.cjs"),y=e.defineComponent({__name:"JLayoutSimple",props:{styletype:{default:"default"},contentScroll:{type:Boolean,default:!0},class:{},menuItems:{default:()=>[]},activePath:{},storageKey:{}},emits:["menu-click"],setup(u,{emit:n}){const o=u,i=n,{isMobile:r}=f.useBreakpoint(),t=e.ref(!1);e.watch(r,a=>{a&&(t.value=!0)});const s=()=>{t.value=!t.value},d=(a,l)=>{i("menu-click",a,l),r.value&&(t.value=!0)},c=()=>{t.value=!0};return(a,l)=>(e.openBlock(),e.createBlock(v.default,e.mergeProps(o,{"sidebar-open":!t.value,onBackdropClick:c}),{header:e.withCtx(()=>[e.renderSlot(a.$slots,"header",{isSidebarCollapsed:t.value,onSidebarToggle:s},()=>[e.createVNode(_.default,{"logo-text":"JWMS Portal",styletype:o.styletype,"show-sidebar-toggle":!0,"is-sidebar-open":!t.value,onSidebarToggle:s},null,8,["styletype","is-sidebar-open"])])]),sidebar:e.withCtx(()=>[e.renderSlot(a.$slots,"sidebar",{isSidebarCollapsed:t.value},()=>[e.createVNode(g.default,{collapsed:t.value,"onUpdate:collapsed":l[0]||(l[0]=p=>t.value=p),items:o.menuItems,"active-path":o.activePath,"storage-key":o.storageKey,onMenuClick:d},null,8,["collapsed","items","active-path","storage-key"])])]),content:e.withCtx(()=>[e.renderSlot(a.$slots,"content",{},()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createVNode(m.default,{title:"페이지 제목"},{default:e.withCtx(()=>[...l[1]||(l[1]=[e.createElementVNode("div",{class:"p-6"},[e.createElementVNode("p",{class:"text-muted-foreground"},"콘텐츠를 배치해주세요.")],-1)])]),_:1})])])]),_:3},16,["sidebar-open"]))}});exports.default=y;
 //# sourceMappingURL=JLayoutSimple.vue.cjs.map

package/components/templates/JLayoutSimple.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JLayoutSimple.vue.cjs","sources":["../../../../src/components/templates/JLayoutSimple.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport JLayout from './JLayout.vue'\nimport JHeader from '@/components/organisms/JHeader.vue'\nimport JSidebar from '@/components/organisms/JSidebar/JSidebar.vue'\nimport JPageContainer from '@/components/organisms/JPageContainer.vue'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\n\n/**\n * JLayoutSimple - JSidebar + 일반 PageContainer 조합 템플릿\n *\n * @example\n * ```vue\n * <JLayoutSimple :menu-items=\"menuItems\" storage-key=\"my-app-favorites\">\n *   <template #content>\n *     <RouterView />\n *   </template>\n * </JLayoutSimple>\n * ```\n */\n\nconst props = withDefaults(\n  defineProps<{\n    /** 레이아웃 스타일 타입 */\n    styletype?: 'default' | 'minimal'\n    /** 콘텐츠 영역 스크롤 가능 여부 */\n    contentScroll?: boolean\n    /** 추가 CSS 클래스 */\n    class?: string\n    /** 메뉴 아이템 목록 */\n    menuItems?: SidebarMenuItem[]\n    /** 현재 활성 경로 */\n    activePath?: string\n    /** 즐겨찾기 localStorage 키 */\n    storageKey?: string\n  }>(),\n  {\n    styletype: 'default',\n    contentScroll: true,\n    menuItems: () => [],\n  }\n)\n\nconst emit = defineEmits<{\n  'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst isSidebarCollapsed = ref(false)\n\nconst handleSidebarToggle = () => {\n  isSidebarCollapsed.value = !isSidebarCollapsed.value\n}\n\nconst handleMenuClick = (item: SidebarMenuItem, event: MouseEvent) => {\n  emit('menu-click', item, event)\n}\n</script>\n\n<template>\n  <JLayout v-bind=\"props\">\n    <template #header>\n      <slot name=\"header\" :is-sidebar-collapsed=\"isSidebarCollapsed\" :on-sidebar-toggle=\"handleSidebarToggle\">\n        <JHeader\n          logo-text=\"JWMS Portal\"\n          :styletype=\"props.styletype\"\n          :show-sidebar-toggle=\"true\"\n          :is-sidebar-open=\"!isSidebarCollapsed\"\n          @sidebar-toggle=\"handleSidebarToggle\"\n        />\n      </slot>\n    </template>\n    <template #sidebar>\n      <slot name=\"sidebar\" :is-sidebar-collapsed=\"isSidebarCollapsed\">\n        <JSidebar\n          v-model:collapsed=\"isSidebarCollapsed\"\n          :items=\"props.menuItems\"\n          :active-path=\"props.activePath\"\n          :storage-key=\"props.storageKey\"\n          @menu-click=\"handleMenuClick\"\n        />\n      </slot>\n    </template>\n    <template #content>\n      <slot name=\"content\">\n        <slot>\n          <!-- 기본 콘텐츠 예시 -->\n          <JPageContainer title=\"페이지 제목\">\n            <div class=\"p-6\">\n              <p class=\"text-muted-foreground\">콘텐츠를 배치해주세요.</p>\n            </div>\n          </JPageContainer>\n        </slot>\n      </slot>\n    </template>\n  </JLayout>\n</template>\n"],"names":["props","__props","emit","__emit","isSidebarCollapsed","ref","handleSidebarToggle","handleMenuClick","item","event","_openBlock","_createBlock","JLayout","_renderSlot","_ctx","_createVNode","JHeader","JSidebar","$event","JPageContainer","_cache","_createElementVNode"],"mappings":"khBAqBA,MAAMA,EAAQC,EAsBRC,EAAOC,EAIPC,EAAqBC,EAAAA,IAAI,EAAK,EAE9BC,EAAsB,IAAM,CAChCF,EAAmB,MAAQ,CAACA,EAAmB,KACjD,EAEMG,EAAkB,CAACC,EAAuBC,IAAsB,CACpEP,EAAK,aAAcM,EAAMC,CAAK,CAChC,gBAIEC,EAAAA,UAAA,EAAAC,cAmCUC,EAAAA,8CAnCOZ,CAAK,CAAA,EAAA,CACT,iBACT,IAQO,CARPa,aAQOC,EAAA,OAAA,SAAA,CARc,mBAAsBV,EAAA,MAAqB,gBAAmBE,CAAA,EAAnF,IAQO,CAPLS,EAAAA,YAMEC,EAAAA,QAAA,CALA,YAAU,cACT,UAAWhB,EAAM,UACjB,sBAAqB,GACrB,mBAAkBI,EAAA,MAClB,gBAAgBE,CAAA,8CAIZ,kBACT,IAQO,CARPO,aAQOC,EAAA,OAAA,UAAA,CARe,mBAAsBV,EAAA,KAAA,EAA5C,IAQO,CAPLW,EAAAA,YAMEE,EAAAA,QAAA,CALQ,UAAWb,EAAA,0CAAAA,EAAkB,MAAAc,GACpC,MAAOlB,EAAM,UACb,cAAaA,EAAM,WACnB,cAAaA,EAAM,WACnB,YAAYO,CAAA,gEAIR,kBACT,IASO,CATPM,EAAAA,WASOC,sBATP,IASO,CARLD,EAAAA,WAOOC,sBAPP,IAOO,CALLC,EAAAA,YAIiBI,EAAAA,QAAA,CAJD,MAAM,UAAQ,mBAC5B,IAEM,CAAA,GAAAC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAFNC,EAAAA,mBAEM,MAAA,CAFD,MAAM,OAAK,CACdA,EAAAA,mBAAiD,IAAA,CAA9C,MAAM,uBAAA,EAAwB,cAAY,CAAA"}
+{"version":3,"file":"JLayoutSimple.vue.cjs","sources":["../../../../src/components/templates/JLayoutSimple.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport JLayout from './JLayout.vue'\nimport JHeader from '@/components/organisms/JHeader.vue'\nimport JSidebar from '@/components/organisms/JSidebar/JSidebar.vue'\nimport JPageContainer from '@/components/organisms/JPageContainer.vue'\nimport { useBreakpoint } from '@/composables/useBreakpoint'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\n\n/**\n * JLayoutSimple - JSidebar + 일반 PageContainer 조합 템플릿\n *\n * 모바일에서는 사이드바가 오버레이 드로어로 전환되며,\n * 메뉴 클릭 시 자동으로 닫힙니다.\n *\n * @example\n * ```vue\n * <JLayoutSimple :menu-items=\"menuItems\" storage-key=\"my-app-favorites\">\n *   <template #content>\n *     <RouterView />\n *   </template>\n * </JLayoutSimple>\n * ```\n */\n\nconst props = withDefaults(\n  defineProps<{\n    /** 레이아웃 스타일 타입 */\n    styletype?: 'default' | 'minimal'\n    /** 콘텐츠 영역 스크롤 가능 여부 */\n    contentScroll?: boolean\n    /** 추가 CSS 클래스 */\n    class?: string\n    /** 메뉴 아이템 목록 */\n    menuItems?: SidebarMenuItem[]\n    /** 현재 활성 경로 */\n    activePath?: string\n    /** 즐겨찾기 localStorage 키 */\n    storageKey?: string\n  }>(),\n  {\n    styletype: 'default',\n    contentScroll: true,\n    menuItems: () => [],\n  }\n)\n\nconst emit = defineEmits<{\n  'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst { isMobile } = useBreakpoint()\nconst isSidebarCollapsed = ref(false)\n\n// 모바일 전환 시 사이드바 자동 닫기\nwatch(isMobile, (mobile) => {\n  if (mobile) isSidebarCollapsed.value = true\n})\n\nconst handleSidebarToggle = () => {\n  isSidebarCollapsed.value = !isSidebarCollapsed.value\n}\n\nconst handleMenuClick = (item: SidebarMenuItem, event: MouseEvent) => {\n  emit('menu-click', item, event)\n  // 모바일에서 메뉴 클릭 시 사이드바 자동 닫기\n  if (isMobile.value) isSidebarCollapsed.value = true\n}\n\nconst handleBackdropClick = () => {\n  isSidebarCollapsed.value = true\n}\n</script>\n\n<template>\n  <JLayout\n    v-bind=\"props\"\n    :sidebar-open=\"!isSidebarCollapsed\"\n    @backdrop-click=\"handleBackdropClick\"\n  >\n    <template #header>\n      <slot name=\"header\" :is-sidebar-collapsed=\"isSidebarCollapsed\" :on-sidebar-toggle=\"handleSidebarToggle\">\n        <JHeader\n          logo-text=\"JWMS Portal\"\n          :styletype=\"props.styletype\"\n          :show-sidebar-toggle=\"true\"\n          :is-sidebar-open=\"!isSidebarCollapsed\"\n          @sidebar-toggle=\"handleSidebarToggle\"\n        />\n      </slot>\n    </template>\n    <template #sidebar>\n      <slot name=\"sidebar\" :is-sidebar-collapsed=\"isSidebarCollapsed\">\n        <JSidebar\n          v-model:collapsed=\"isSidebarCollapsed\"\n          :items=\"props.menuItems\"\n          :active-path=\"props.activePath\"\n          :storage-key=\"props.storageKey\"\n          @menu-click=\"handleMenuClick\"\n        />\n      </slot>\n    </template>\n    <template #content>\n      <slot name=\"content\">\n        <slot>\n          <!-- 기본 콘텐츠 예시 -->\n          <JPageContainer title=\"페이지 제목\">\n            <div class=\"p-6\">\n              <p class=\"text-muted-foreground\">콘텐츠를 배치해주세요.</p>\n            </div>\n          </JPageContainer>\n        </slot>\n      </slot>\n    </template>\n  </JLayout>\n</template>\n"],"names":["props","__props","emit","__emit","isMobile","useBreakpoint","isSidebarCollapsed","ref","watch","mobile","handleSidebarToggle","handleMenuClick","item","event","handleBackdropClick","_createBlock","JLayout","_mergeProps","_renderSlot","_ctx","_createVNode","JHeader","JSidebar","$event","JPageContainer","_cache","_createElementVNode"],"mappings":"mkBAyBA,MAAMA,EAAQC,EAsBRC,EAAOC,EAIP,CAAE,SAAAC,CAAA,EAAaC,gBAAA,EACfC,EAAqBC,EAAAA,IAAI,EAAK,EAGpCC,QAAMJ,EAAWK,GAAW,CACtBA,MAA2B,MAAQ,GACzC,CAAC,EAED,MAAMC,EAAsB,IAAM,CAChCJ,EAAmB,MAAQ,CAACA,EAAmB,KACjD,EAEMK,EAAkB,CAACC,EAAuBC,IAAsB,CACpEX,EAAK,aAAcU,EAAMC,CAAK,EAE1BT,EAAS,QAAOE,EAAmB,MAAQ,GACjD,EAEMQ,EAAsB,IAAM,CAChCR,EAAmB,MAAQ,EAC7B,8BAIES,EAAAA,YAuCUC,EAAAA,QAvCVC,EAAAA,WAuCUjB,EAtCK,CACZ,gBAAeM,EAAA,MACf,gBAAgBQ,CAAA,IAEN,iBACT,IAQO,CARPI,aAQOC,EAAA,OAAA,SAAA,CARc,mBAAsBb,EAAA,MAAqB,gBAAmBI,CAAA,EAAnF,IAQO,CAPLU,EAAAA,YAMEC,EAAAA,QAAA,CALA,YAAU,cACT,UAAWrB,EAAM,UACjB,sBAAqB,GACrB,mBAAkBM,EAAA,MAClB,gBAAgBI,CAAA,8CAIZ,kBACT,IAQO,CARPQ,aAQOC,EAAA,OAAA,UAAA,CARe,mBAAsBb,EAAA,KAAA,EAA5C,IAQO,CAPLc,EAAAA,YAMEE,EAAAA,QAAA,CALQ,UAAWhB,EAAA,0CAAAA,EAAkB,MAAAiB,GACpC,MAAOvB,EAAM,UACb,cAAaA,EAAM,WACnB,cAAaA,EAAM,WACnB,YAAYW,CAAA,gEAIR,kBACT,IASO,CATPO,EAAAA,WASOC,sBATP,IASO,CARLD,EAAAA,WAOOC,sBAPP,IAOO,CALLC,EAAAA,YAIiBI,EAAAA,QAAA,CAJD,MAAM,UAAQ,mBAC5B,IAEM,CAAA,GAAAC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAFNC,EAAAA,mBAEM,MAAA,CAFD,MAAM,OAAK,CACdA,EAAAA,mBAAiD,IAAA,CAA9C,MAAM,uBAAA,EAAwB,cAAY,CAAA"}

package/components/templates/JLayoutSimple.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as f, ref as g, createBlock as y, openBlock as v, normalizeProps as b, guardReactiveProps as S, withCtx as l, renderSlot as s, createVNode as r, createElementVNode as n } from "vue";
-import k from "./JLayout.vue.js";
-import _ from "../organisms/JHeader.vue.js";
-import $ from "../organisms/JSidebar/JSidebar.vue.js";
-import h from "../organisms/JPageContainer.vue.js";
-const w = /* @__PURE__ */ f({
+import { defineComponent as g, ref as y, watch as b, createBlock as k, openBlock as S, mergeProps as h, withCtx as l, renderSlot as s, createVNode as r, createElementVNode as d } from "vue";
+import C from "./JLayout.vue.js";
+import $ from "../organisms/JHeader.vue.js";
+import B from "../organisms/JSidebar/JSidebar.vue.js";
+import _ from "../organisms/JPageContainer.vue.js";
+import { useBreakpoint as M } from "../../composables/useBreakpoint.js";
+const L = /* @__PURE__ */ g({
   __name: "JLayoutSimple",
   props: {
     styletype: { default: "default" },
@@ -14,46 +15,55 @@ const w = /* @__PURE__ */ f({
     storageKey: {}
   },
   emits: ["menu-click"],
-  setup(d, { emit: p }) {
-    const a = d, m = p, e = g(!1), i = () => {
+  setup(u, { emit: p }) {
+    const a = u, c = p, { isMobile: i } = M(), e = y(!1);
+    b(i, (t) => {
+      t && (e.value = !0);
+    });
+    const n = () => {
       e.value = !e.value;
-    }, u = (t, o) => {
-      m("menu-click", t, o);
+    }, m = (t, o) => {
+      c("menu-click", t, o), i.value && (e.value = !0);
+    }, f = () => {
+      e.value = !0;
     };
-    return (t, o) => (v(), y(k, b(S(a)), {
+    return (t, o) => (S(), k(C, h(a, {
+      "sidebar-open": !e.value,
+      onBackdropClick: f
+    }), {
       header: l(() => [
         s(t.$slots, "header", {
           isSidebarCollapsed: e.value,
-          onSidebarToggle: i
+          onSidebarToggle: n
         }, () => [
-          r(_, {
+          r($, {
             "logo-text": "JWMS Portal",
             styletype: a.styletype,
             "show-sidebar-toggle": !0,
             "is-sidebar-open": !e.value,
-            onSidebarToggle: i
+            onSidebarToggle: n
           }, null, 8, ["styletype", "is-sidebar-open"])
         ])
       ]),
       sidebar: l(() => [
         s(t.$slots, "sidebar", { isSidebarCollapsed: e.value }, () => [
-          r($, {
+          r(B, {
             collapsed: e.value,
-            "onUpdate:collapsed": o[0] || (o[0] = (c) => e.value = c),
+            "onUpdate:collapsed": o[0] || (o[0] = (v) => e.value = v),
             items: a.menuItems,
             "active-path": a.activePath,
             "storage-key": a.storageKey,
-            onMenuClick: u
+            onMenuClick: m
           }, null, 8, ["collapsed", "items", "active-path", "storage-key"])
         ])
       ]),
       content: l(() => [
         s(t.$slots, "content", {}, () => [
           s(t.$slots, "default", {}, () => [
-            r(h, { title: "페이지 제목" }, {
+            r(_, { title: "페이지 제목" }, {
               default: l(() => [...o[1] || (o[1] = [
-                n("div", { class: "p-6" }, [
-                  n("p", { class: "text-muted-foreground" }, "콘텐츠를 배치해주세요.")
+                d("div", { class: "p-6" }, [
+                  d("p", { class: "text-muted-foreground" }, "콘텐츠를 배치해주세요.")
                 ], -1)
               ])]),
               _: 1
@@ -62,10 +72,10 @@ const w = /* @__PURE__ */ f({
         ])
       ]),
       _: 3
-    }, 16));
+    }, 16, ["sidebar-open"]));
   }
 });
 export {
-  w as default
+  L as default
 };
 //# sourceMappingURL=JLayoutSimple.vue.js.map

package/components/templates/JLayoutSimple.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JLayoutSimple.vue.js","sources":["../../../../src/components/templates/JLayoutSimple.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport JLayout from './JLayout.vue'\nimport JHeader from '@/components/organisms/JHeader.vue'\nimport JSidebar from '@/components/organisms/JSidebar/JSidebar.vue'\nimport JPageContainer from '@/components/organisms/JPageContainer.vue'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\n\n/**\n * JLayoutSimple - JSidebar + 일반 PageContainer 조합 템플릿\n *\n * @example\n * ```vue\n * <JLayoutSimple :menu-items=\"menuItems\" storage-key=\"my-app-favorites\">\n *   <template #content>\n *     <RouterView />\n *   </template>\n * </JLayoutSimple>\n * ```\n */\n\nconst props = withDefaults(\n  defineProps<{\n    /** 레이아웃 스타일 타입 */\n    styletype?: 'default' | 'minimal'\n    /** 콘텐츠 영역 스크롤 가능 여부 */\n    contentScroll?: boolean\n    /** 추가 CSS 클래스 */\n    class?: string\n    /** 메뉴 아이템 목록 */\n    menuItems?: SidebarMenuItem[]\n    /** 현재 활성 경로 */\n    activePath?: string\n    /** 즐겨찾기 localStorage 키 */\n    storageKey?: string\n  }>(),\n  {\n    styletype: 'default',\n    contentScroll: true,\n    menuItems: () => [],\n  }\n)\n\nconst emit = defineEmits<{\n  'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst isSidebarCollapsed = ref(false)\n\nconst handleSidebarToggle = () => {\n  isSidebarCollapsed.value = !isSidebarCollapsed.value\n}\n\nconst handleMenuClick = (item: SidebarMenuItem, event: MouseEvent) => {\n  emit('menu-click', item, event)\n}\n</script>\n\n<template>\n  <JLayout v-bind=\"props\">\n    <template #header>\n      <slot name=\"header\" :is-sidebar-collapsed=\"isSidebarCollapsed\" :on-sidebar-toggle=\"handleSidebarToggle\">\n        <JHeader\n          logo-text=\"JWMS Portal\"\n          :styletype=\"props.styletype\"\n          :show-sidebar-toggle=\"true\"\n          :is-sidebar-open=\"!isSidebarCollapsed\"\n          @sidebar-toggle=\"handleSidebarToggle\"\n        />\n      </slot>\n    </template>\n    <template #sidebar>\n      <slot name=\"sidebar\" :is-sidebar-collapsed=\"isSidebarCollapsed\">\n        <JSidebar\n          v-model:collapsed=\"isSidebarCollapsed\"\n          :items=\"props.menuItems\"\n          :active-path=\"props.activePath\"\n          :storage-key=\"props.storageKey\"\n          @menu-click=\"handleMenuClick\"\n        />\n      </slot>\n    </template>\n    <template #content>\n      <slot name=\"content\">\n        <slot>\n          <!-- 기본 콘텐츠 예시 -->\n          <JPageContainer title=\"페이지 제목\">\n            <div class=\"p-6\">\n              <p class=\"text-muted-foreground\">콘텐츠를 배치해주세요.</p>\n            </div>\n          </JPageContainer>\n        </slot>\n      </slot>\n    </template>\n  </JLayout>\n</template>\n"],"names":["props","__props","emit","__emit","isSidebarCollapsed","ref","handleSidebarToggle","handleMenuClick","item","event","_openBlock","_createBlock","JLayout","_renderSlot","_ctx","_createVNode","JHeader","JSidebar","$event","JPageContainer","_cache","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAQC,GAsBRC,IAAOC,GAIPC,IAAqBC,EAAI,EAAK,GAE9BC,IAAsB,MAAM;AAChC,MAAAF,EAAmB,QAAQ,CAACA,EAAmB;AAAA,IACjD,GAEMG,IAAkB,CAACC,GAAuBC,MAAsB;AACpE,MAAAP,EAAK,cAAcM,GAAMC,CAAK;AAAA,IAChC;sBAIEC,EAAA,GAAAC,EAmCUC,OAnCOZ,CAAK,CAAA,GAAA;AAAA,MACT,UACT,MAQO;AAAA,QARPa,EAQOC,EAAA,QAAA,UAAA;AAAA,UARc,oBAAsBV,EAAA;AAAA,UAAqB,iBAAmBE;AAAA,QAAA,GAAnF,MAQO;AAAA,UAPLS,EAMEC,GAAA;AAAA,YALA,aAAU;AAAA,YACT,WAAWhB,EAAM;AAAA,YACjB,uBAAqB;AAAA,YACrB,oBAAkBI,EAAA;AAAA,YAClB,iBAAgBE;AAAA,UAAA;;;MAIZ,WACT,MAQO;AAAA,QARPO,EAQOC,EAAA,QAAA,WAAA,EARe,oBAAsBV,EAAA,MAAA,GAA5C,MAQO;AAAA,UAPLW,EAMEE,GAAA;AAAA,YALQ,WAAWb,EAAA;AAAA,yDAAAA,EAAkB,QAAAc;AAAA,YACpC,OAAOlB,EAAM;AAAA,YACb,eAAaA,EAAM;AAAA,YACnB,eAAaA,EAAM;AAAA,YACnB,aAAYO;AAAA,UAAA;;;MAIR,WACT,MASO;AAAA,QATPM,EASOC,yBATP,MASO;AAAA,UARLD,EAOOC,yBAPP,MAOO;AAAA,YALLC,EAIiBI,GAAA,EAJD,OAAM,YAAQ;AAAA,yBAC5B,MAEM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,gBAFNC,EAEM,OAAA,EAFD,OAAM,SAAK;AAAA,kBACdA,EAAiD,KAAA,EAA9C,OAAM,wBAAA,GAAwB,cAAY;AAAA,gBAAA;;;;;;;;;;;"}
+{"version":3,"file":"JLayoutSimple.vue.js","sources":["../../../../src/components/templates/JLayoutSimple.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport JLayout from './JLayout.vue'\nimport JHeader from '@/components/organisms/JHeader.vue'\nimport JSidebar from '@/components/organisms/JSidebar/JSidebar.vue'\nimport JPageContainer from '@/components/organisms/JPageContainer.vue'\nimport { useBreakpoint } from '@/composables/useBreakpoint'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\n\n/**\n * JLayoutSimple - JSidebar + 일반 PageContainer 조합 템플릿\n *\n * 모바일에서는 사이드바가 오버레이 드로어로 전환되며,\n * 메뉴 클릭 시 자동으로 닫힙니다.\n *\n * @example\n * ```vue\n * <JLayoutSimple :menu-items=\"menuItems\" storage-key=\"my-app-favorites\">\n *   <template #content>\n *     <RouterView />\n *   </template>\n * </JLayoutSimple>\n * ```\n */\n\nconst props = withDefaults(\n  defineProps<{\n    /** 레이아웃 스타일 타입 */\n    styletype?: 'default' | 'minimal'\n    /** 콘텐츠 영역 스크롤 가능 여부 */\n    contentScroll?: boolean\n    /** 추가 CSS 클래스 */\n    class?: string\n    /** 메뉴 아이템 목록 */\n    menuItems?: SidebarMenuItem[]\n    /** 현재 활성 경로 */\n    activePath?: string\n    /** 즐겨찾기 localStorage 키 */\n    storageKey?: string\n  }>(),\n  {\n    styletype: 'default',\n    contentScroll: true,\n    menuItems: () => [],\n  }\n)\n\nconst emit = defineEmits<{\n  'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst { isMobile } = useBreakpoint()\nconst isSidebarCollapsed = ref(false)\n\n// 모바일 전환 시 사이드바 자동 닫기\nwatch(isMobile, (mobile) => {\n  if (mobile) isSidebarCollapsed.value = true\n})\n\nconst handleSidebarToggle = () => {\n  isSidebarCollapsed.value = !isSidebarCollapsed.value\n}\n\nconst handleMenuClick = (item: SidebarMenuItem, event: MouseEvent) => {\n  emit('menu-click', item, event)\n  // 모바일에서 메뉴 클릭 시 사이드바 자동 닫기\n  if (isMobile.value) isSidebarCollapsed.value = true\n}\n\nconst handleBackdropClick = () => {\n  isSidebarCollapsed.value = true\n}\n</script>\n\n<template>\n  <JLayout\n    v-bind=\"props\"\n    :sidebar-open=\"!isSidebarCollapsed\"\n    @backdrop-click=\"handleBackdropClick\"\n  >\n    <template #header>\n      <slot name=\"header\" :is-sidebar-collapsed=\"isSidebarCollapsed\" :on-sidebar-toggle=\"handleSidebarToggle\">\n        <JHeader\n          logo-text=\"JWMS Portal\"\n          :styletype=\"props.styletype\"\n          :show-sidebar-toggle=\"true\"\n          :is-sidebar-open=\"!isSidebarCollapsed\"\n          @sidebar-toggle=\"handleSidebarToggle\"\n        />\n      </slot>\n    </template>\n    <template #sidebar>\n      <slot name=\"sidebar\" :is-sidebar-collapsed=\"isSidebarCollapsed\">\n        <JSidebar\n          v-model:collapsed=\"isSidebarCollapsed\"\n          :items=\"props.menuItems\"\n          :active-path=\"props.activePath\"\n          :storage-key=\"props.storageKey\"\n          @menu-click=\"handleMenuClick\"\n        />\n      </slot>\n    </template>\n    <template #content>\n      <slot name=\"content\">\n        <slot>\n          <!-- 기본 콘텐츠 예시 -->\n          <JPageContainer title=\"페이지 제목\">\n            <div class=\"p-6\">\n              <p class=\"text-muted-foreground\">콘텐츠를 배치해주세요.</p>\n            </div>\n          </JPageContainer>\n        </slot>\n      </slot>\n    </template>\n  </JLayout>\n</template>\n"],"names":["props","__props","emit","__emit","isMobile","useBreakpoint","isSidebarCollapsed","ref","watch","mobile","handleSidebarToggle","handleMenuClick","item","event","handleBackdropClick","_createBlock","JLayout","_mergeProps","_renderSlot","_ctx","_createVNode","JHeader","JSidebar","$event","JPageContainer","_cache","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,UAAMA,IAAQC,GAsBRC,IAAOC,GAIP,EAAE,UAAAC,EAAA,IAAaC,EAAA,GACfC,IAAqBC,EAAI,EAAK;AAGpC,IAAAC,EAAMJ,GAAU,CAACK,MAAW;AAC1B,MAAIA,QAA2B,QAAQ;AAAA,IACzC,CAAC;AAED,UAAMC,IAAsB,MAAM;AAChC,MAAAJ,EAAmB,QAAQ,CAACA,EAAmB;AAAA,IACjD,GAEMK,IAAkB,CAACC,GAAuBC,MAAsB;AACpE,MAAAX,EAAK,cAAcU,GAAMC,CAAK,GAE1BT,EAAS,UAAOE,EAAmB,QAAQ;AAAA,IACjD,GAEMQ,IAAsB,MAAM;AAChC,MAAAR,EAAmB,QAAQ;AAAA,IAC7B;2BAIES,EAuCUC,GAvCVC,EAuCUjB,GAtCK;AAAA,MACZ,iBAAeM,EAAA;AAAA,MACf,iBAAgBQ;AAAA,IAAA;MAEN,UACT,MAQO;AAAA,QARPI,EAQOC,EAAA,QAAA,UAAA;AAAA,UARc,oBAAsBb,EAAA;AAAA,UAAqB,iBAAmBI;AAAA,QAAA,GAAnF,MAQO;AAAA,UAPLU,EAMEC,GAAA;AAAA,YALA,aAAU;AAAA,YACT,WAAWrB,EAAM;AAAA,YACjB,uBAAqB;AAAA,YACrB,oBAAkBM,EAAA;AAAA,YAClB,iBAAgBI;AAAA,UAAA;;;MAIZ,WACT,MAQO;AAAA,QARPQ,EAQOC,EAAA,QAAA,WAAA,EARe,oBAAsBb,EAAA,MAAA,GAA5C,MAQO;AAAA,UAPLc,EAMEE,GAAA;AAAA,YALQ,WAAWhB,EAAA;AAAA,yDAAAA,EAAkB,QAAAiB;AAAA,YACpC,OAAOvB,EAAM;AAAA,YACb,eAAaA,EAAM;AAAA,YACnB,eAAaA,EAAM;AAAA,YACnB,aAAYW;AAAA,UAAA;;;MAIR,WACT,MASO;AAAA,QATPO,EASOC,yBATP,MASO;AAAA,UARLD,EAOOC,yBAPP,MAOO;AAAA,YALLC,EAIiBI,GAAA,EAJD,OAAM,YAAQ;AAAA,yBAC5B,MAEM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,gBAFNC,EAEM,OAAA,EAFD,OAAM,SAAK;AAAA,kBACdA,EAAiD,KAAA,EAA9C,OAAM,wBAAA,GAAwB,cAAY;AAAA,gBAAA;;;;;;;;;;;"}

package/index.cjs

@@ -1,4 +1,4 @@
 require('./assets/styles/j-components.css');
 require('./assets/styles/themes.css');
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                         */;/* empty css                           */;/* empty css                                     */;/* empty css                                                                            */const e=require("./components/atoms/JButton.vue.cjs"),t=require("./components/atoms/JInput.vue.cjs"),u=require("./components/atoms/JTextarea.vue.cjs"),r=require("./components/atoms/JCheckbox.vue.cjs"),_=require("./components/atoms/JCombo.vue.cjs"),a=require("./components/atoms/JSearchCombo.vue.cjs"),i=require("./components/atoms/JRadio.vue.cjs"),p=require("./components/atoms/JSwitch.vue.cjs"),s=require("./components/atoms/JDatepicker.vue.cjs"),n=require("./components/atoms/JDivider.vue.cjs"),l=require("./components/atoms/JEditor.vue.cjs"),o=require("./components/atoms/JLink.vue.cjs"),c=require("./components/atoms/JImage.vue.cjs"),J=require("./components/atoms/JBadge.vue.cjs"),d=require("./components/atoms/JProgress.vue.cjs");;/* empty css                                  */const v=require("./components/atoms/JSpinner.vue.cjs"),q=require("./components/atoms/JAvatar.vue.cjs"),f=require("./components/atoms/JKbd.vue.cjs"),g=require("./components/atoms/JTooltip.vue.cjs"),y=require("./components/atoms/JIcon.vue.cjs"),b=require("./components/atoms/JLabel.vue.cjs"),m=require("./components/atoms/JPopover.vue.cjs"),S=require("./components/atoms/JPreview.vue.cjs"),T=require("./components/atoms/JGrid.vue.cjs"),C=require("./components/atoms/JSplitter.vue.cjs"),P=require("./components/atoms/JSectionTitle.vue.cjs"),h=require("vue-sonner"),A=require("./components/atoms/JToast.vue.cjs"),x=require("./components/molecules/JFormField.vue.cjs"),B=require("./components/molecules/JGroupCombo.vue.cjs"),F=require("./components/molecules/JTabs.vue.cjs"),L=require("./components/molecules/JSearchAddr.vue.cjs"),M=require("./components/molecules/JContextMenu.vue.cjs"),D=require("./components/molecules/JCard.vue.cjs"),E=require("./components/molecules/JAlert.vue.cjs"),k=require("./components/molecules/JAccordion.vue.cjs"),G=require("./components/molecules/JTitlebar.vue.cjs"),I=require("./components/molecules/JButtonGroup.vue.cjs"),w=require("./components/molecules/JBreadcrumb.vue.cjs"),j=require("./components/molecules/JEmptyState.vue.cjs"),H=require("./components/organisms/JDynamicTabs.vue.cjs"),K=require("./components/organisms/JModal.vue.cjs"),O=require("./components/organisms/JFormModal.vue.cjs"),R=require("./components/organisms/JDynamicForm.vue.cjs"),z=require("./components/organisms/JSearchPanel.vue.cjs"),N=require("./components/organisms/JFilterBar.vue.cjs"),Q=require("./components/organisms/JHeader.vue.cjs"),U=require("./components/organisms/JSidebar/JSidebar.vue.cjs"),V=require("./components/organisms/JSidebarSimple.vue.cjs"),W=require("./components/organisms/JSidebarAdvanced.vue.cjs"),X=require("./components/organisms/JPageContainer.vue.cjs"),Y=require("./components/organisms/JTree.vue.cjs"),Z=require("./components/organisms/JShuttle.vue.cjs"),$=require("./components/templates/JLayout.vue.cjs"),ee=require("./components/templates/JLayoutSimple.vue.cjs"),te=require("./components/templates/JLayoutAdvanced.vue.cjs"),ue=require("./components/examples/ExampleCrudPage.vue.cjs"),re=require("./components/examples/ExampleTabMappingPage.vue.cjs");exports.JButton=e.default;exports.JInput=t.default;exports.JTextarea=u.default;exports.JCheckbox=r.default;exports.JCombo=_.default;exports.JSearchCombo=a.default;exports.JRadio=i.default;exports.JSwitch=p.default;exports.JDatepicker=s.default;exports.JDivider=n.default;exports.JEditor=l.default;exports.JLink=o.default;exports.JImage=c.default;exports.JBadge=J.default;exports.JProgress=d.default;exports.JSpinner=v.default;exports.JAvatar=q.default;exports.JKbd=f.default;exports.JTooltip=g.default;exports.JIcon=y.default;exports.JLabel=b.default;exports.JPopover=m.default;exports.JPreview=S.default;exports.JGrid=T.default;exports.JSplitter=C.default;exports.JSectionTitle=P.default;Object.defineProperty(exports,"JToast",{enumerable:!0,get:()=>h.toast});exports.JToaster=A.default;exports.JFormField=x.default;exports.JGroupCombo=B.default;exports.JTabs=F.default;exports.JSearchAddr=L.default;exports.JContextMenu=M.default;exports.JCard=D.default;exports.JAlert=E.default;exports.JAccordion=k.default;exports.JTitlebar=G.default;exports.JButtonGroup=I.default;exports.JBreadcrumb=w.default;exports.JEmptyState=j.default;exports.JDynamicTabs=H.default;exports.JModal=K.default;exports.JFormModal=O.default;exports.JDynamicForm=R.default;exports.JSearchPanel=z.default;exports.JFilterBar=N.default;exports.JHeader=Q.default;exports.JSidebar=U.default;exports.JSidebarSimple=V.default;exports.JSidebarAdvanced=W.default;exports.JPageContainer=X.default;exports.JTree=Y.default;exports.JShuttle=Z.default;exports.JLayout=$.default;exports.JLayoutSimple=ee.default;exports.JLayoutAdvanced=te.default;exports.ExampleCrudPage=ue.default;exports.ExampleTabMappingPage=re.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                         */;/* empty css                           */;/* empty css                                     */;/* empty css                                                                            */const e=require("./components/atoms/JButton.vue.cjs"),t=require("./components/atoms/JInput.vue.cjs"),u=require("./components/atoms/JTextarea.vue.cjs"),r=require("./components/atoms/JCheckbox.vue.cjs"),_=require("./components/atoms/JCombo.vue.cjs"),a=require("./components/atoms/JSearchCombo.vue.cjs"),i=require("./components/atoms/JRadio.vue.cjs"),s=require("./components/atoms/JSwitch.vue.cjs"),p=require("./components/atoms/JDatepicker.vue.cjs"),n=require("./components/atoms/JDivider.vue.cjs"),o=require("./components/atoms/JEditor.vue.cjs"),l=require("./components/atoms/JLink.vue.cjs"),c=require("./components/atoms/JImage.vue.cjs"),J=require("./components/atoms/JBadge.vue.cjs"),d=require("./components/atoms/JProgress.vue.cjs");;/* empty css                                  */const v=require("./components/atoms/JSpinner.vue.cjs"),q=require("./components/atoms/JAvatar.vue.cjs"),f=require("./components/atoms/JKbd.vue.cjs"),g=require("./components/atoms/JTooltip.vue.cjs"),y=require("./components/atoms/JIcon.vue.cjs"),b=require("./components/atoms/JLabel.vue.cjs"),m=require("./components/atoms/JPopover.vue.cjs"),S=require("./components/atoms/JPreview.vue.cjs"),T=require("./components/atoms/JGrid.vue.cjs"),C=require("./components/atoms/JSplitter.vue.cjs"),P=require("./components/atoms/JSectionTitle.vue.cjs"),B=require("vue-sonner"),h=require("./components/atoms/JToast.vue.cjs"),A=require("./components/molecules/JFormField.vue.cjs"),x=require("./components/molecules/JGroupCombo.vue.cjs"),F=require("./components/molecules/JTabs.vue.cjs"),L=require("./components/molecules/JSearchAddr.vue.cjs"),k=require("./components/molecules/JContextMenu.vue.cjs"),M=require("./components/molecules/JCard.vue.cjs"),D=require("./components/molecules/JAlert.vue.cjs"),E=require("./components/molecules/JAccordion.vue.cjs"),G=require("./components/molecules/JTitlebar.vue.cjs"),I=require("./components/molecules/JButtonGroup.vue.cjs"),w=require("./components/molecules/JBreadcrumb.vue.cjs"),j=require("./components/molecules/JEmptyState.vue.cjs"),H=require("./components/organisms/JDynamicTabs.vue.cjs"),K=require("./components/organisms/JModal.vue.cjs"),O=require("./components/organisms/JFormModal.vue.cjs"),R=require("./components/organisms/JDynamicForm.vue.cjs"),z=require("./components/organisms/JSearchPanel.vue.cjs"),N=require("./components/organisms/JFilterBar.vue.cjs"),Q=require("./components/organisms/JHeader.vue.cjs"),U=require("./components/organisms/JSidebar/JSidebar.vue.cjs"),V=require("./components/organisms/JSidebarSimple.vue.cjs"),W=require("./components/organisms/JSidebarAdvanced.vue.cjs"),X=require("./components/organisms/JPageContainer.vue.cjs"),Y=require("./components/organisms/JTree.vue.cjs"),Z=require("./components/organisms/JShuttle.vue.cjs"),$=require("./components/templates/JLayout.vue.cjs"),ee=require("./components/templates/JLayoutSimple.vue.cjs"),te=require("./components/templates/JLayoutAdvanced.vue.cjs"),ue=require("./components/examples/ExampleCrudPage.vue.cjs"),re=require("./components/examples/ExampleTabMappingPage.vue.cjs"),_e=require("./composables/useBreakpoint.cjs");exports.JButton=e.default;exports.JInput=t.default;exports.JTextarea=u.default;exports.JCheckbox=r.default;exports.JCombo=_.default;exports.JSearchCombo=a.default;exports.JRadio=i.default;exports.JSwitch=s.default;exports.JDatepicker=p.default;exports.JDivider=n.default;exports.JEditor=o.default;exports.JLink=l.default;exports.JImage=c.default;exports.JBadge=J.default;exports.JProgress=d.default;exports.JSpinner=v.default;exports.JAvatar=q.default;exports.JKbd=f.default;exports.JTooltip=g.default;exports.JIcon=y.default;exports.JLabel=b.default;exports.JPopover=m.default;exports.JPreview=S.default;exports.JGrid=T.default;exports.JSplitter=C.default;exports.JSectionTitle=P.default;Object.defineProperty(exports,"JToast",{enumerable:!0,get:()=>B.toast});exports.JToaster=h.default;exports.JFormField=A.default;exports.JGroupCombo=x.default;exports.JTabs=F.default;exports.JSearchAddr=L.default;exports.JContextMenu=k.default;exports.JCard=M.default;exports.JAlert=D.default;exports.JAccordion=E.default;exports.JTitlebar=G.default;exports.JButtonGroup=I.default;exports.JBreadcrumb=w.default;exports.JEmptyState=j.default;exports.JDynamicTabs=H.default;exports.JModal=K.default;exports.JFormModal=O.default;exports.JDynamicForm=R.default;exports.JSearchPanel=z.default;exports.JFilterBar=N.default;exports.JHeader=Q.default;exports.JSidebar=U.default;exports.JSidebarSimple=V.default;exports.JSidebarAdvanced=W.default;exports.JPageContainer=X.default;exports.JTree=Y.default;exports.JShuttle=Z.default;exports.JLayout=$.default;exports.JLayoutSimple=ee.default;exports.JLayoutAdvanced=te.default;exports.ExampleCrudPage=ue.default;exports.ExampleTabMappingPage=re.default;exports.useBreakpoint=_e.useBreakpoint;
 //# sourceMappingURL=index.cjs.map

package/index.js

@@ -4,7 +4,7 @@ import './assets/styles/themes.css';
 /* empty css                         */
 /* empty css                                   */
 /* empty css                                                                          */
-import { default as m } from "./components/atoms/JButton.vue.js";
+import { default as p } from "./components/atoms/JButton.vue.js";
 import { default as l } from "./components/atoms/JInput.vue.js";
 import { default as s } from "./components/atoms/JTextarea.vue.js";
 import { default as J } from "./components/atoms/JCheckbox.vue.js";
@@ -16,8 +16,8 @@ import { default as h } from "./components/atoms/JDatepicker.vue.js";
 import { default as y } from "./components/atoms/JDivider.vue.js";
 import { default as B } from "./components/atoms/JEditor.vue.js";
 import { default as L } from "./components/atoms/JLink.vue.js";
-import { default as E } from "./components/atoms/JImage.vue.js";
-import { default as k } from "./components/atoms/JBadge.vue.js";
+import { default as D } from "./components/atoms/JImage.vue.js";
+import { default as M } from "./components/atoms/JBadge.vue.js";
 import { default as I } from "./components/atoms/JProgress.vue.js";
 /* empty css                                */
 import { default as H } from "./components/atoms/JSpinner.vue.js";
@@ -29,10 +29,10 @@ import { default as V } from "./components/atoms/JLabel.vue.js";
 import { default as X } from "./components/atoms/JPopover.vue.js";
 import { default as Z } from "./components/atoms/JPreview.vue.js";
 import { default as $ } from "./components/atoms/JGrid.vue.js";
-import { default as ae } from "./components/atoms/JSplitter.vue.js";
+import { default as re } from "./components/atoms/JSplitter.vue.js";
 import { default as oe } from "./components/atoms/JSectionTitle.vue.js";
 import { toast as fe } from "vue-sonner";
-import { default as me } from "./components/atoms/JToast.vue.js";
+import { default as pe } from "./components/atoms/JToast.vue.js";
 import { default as le } from "./components/molecules/JFormField.vue.js";
 import { default as se } from "./components/molecules/JGroupCombo.vue.js";
 import { default as Je } from "./components/molecules/JTabs.vue.js";
@@ -44,8 +44,8 @@ import { default as he } from "./components/molecules/JAccordion.vue.js";
 import { default as ye } from "./components/molecules/JTitlebar.vue.js";
 import { default as Be } from "./components/molecules/JButtonGroup.vue.js";
 import { default as Le } from "./components/molecules/JBreadcrumb.vue.js";
-import { default as Ee } from "./components/molecules/JEmptyState.vue.js";
-import { default as ke } from "./components/organisms/JDynamicTabs.vue.js";
+import { default as De } from "./components/molecules/JEmptyState.vue.js";
+import { default as Me } from "./components/organisms/JDynamicTabs.vue.js";
 import { default as Ie } from "./components/organisms/JModal.vue.js";
 import { default as He } from "./components/organisms/JFormModal.vue.js";
 import { default as Re } from "./components/organisms/JDynamicForm.vue.js";
@@ -56,22 +56,23 @@ import { default as Ve } from "./components/organisms/JSidebar/JSidebar.vue.js";
 import { default as Xe } from "./components/organisms/JSidebarSimple.vue.js";
 import { default as Ze } from "./components/organisms/JSidebarAdvanced.vue.js";
 import { default as $e } from "./components/organisms/JPageContainer.vue.js";
-import { default as aa } from "./components/organisms/JTree.vue.js";
-import { default as oa } from "./components/organisms/JShuttle.vue.js";
-import { default as fa } from "./components/templates/JLayout.vue.js";
-import { default as ma } from "./components/templates/JLayoutSimple.vue.js";
-import { default as la } from "./components/templates/JLayoutAdvanced.vue.js";
-import { default as sa } from "./components/examples/ExampleCrudPage.vue.js";
-import { default as Ja } from "./components/examples/ExampleTabMappingPage.vue.js";
+import { default as rr } from "./components/organisms/JTree.vue.js";
+import { default as or } from "./components/organisms/JShuttle.vue.js";
+import { default as fr } from "./components/templates/JLayout.vue.js";
+import { default as pr } from "./components/templates/JLayoutSimple.vue.js";
+import { default as lr } from "./components/templates/JLayoutAdvanced.vue.js";
+import { default as sr } from "./components/examples/ExampleCrudPage.vue.js";
+import { default as Jr } from "./components/examples/ExampleTabMappingPage.vue.js";
+import { useBreakpoint as nr } from "./composables/useBreakpoint.js";
 export {
-  sa as ExampleCrudPage,
-  Ja as ExampleTabMappingPage,
+  sr as ExampleCrudPage,
+  Jr as ExampleTabMappingPage,
   he as JAccordion,
   ge as JAlert,
   R as JAvatar,
-  k as JBadge,
+  M as JBadge,
   Le as JBreadcrumb,
-  m as JButton,
+  p as JButton,
   Be as JButtonGroup,
   Te as JCard,
   J as JCheckbox,
@@ -80,9 +81,9 @@ export {
   h as JDatepicker,
   y as JDivider,
   Re as JDynamicForm,
-  ke as JDynamicTabs,
+  Me as JDynamicTabs,
   B as JEditor,
-  Ee as JEmptyState,
+  De as JEmptyState,
   Ne as JFilterBar,
   le as JFormField,
   He as JFormModal,
@@ -90,13 +91,13 @@ export {
   se as JGroupCombo,
   Qe as JHeader,
   Q as JIcon,
-  E as JImage,
+  D as JImage,
   l as JInput,
   q as JKbd,
   V as JLabel,
-  fa as JLayout,
-  la as JLayoutAdvanced,
-  ma as JLayoutSimple,
+  fr as JLayout,
+  lr as JLayoutAdvanced,
+  pr as JLayoutSimple,
   L as JLink,
   Ie as JModal,
   $e as JPageContainer,
@@ -108,19 +109,20 @@ export {
   b as JSearchCombo,
   qe as JSearchPanel,
   oe as JSectionTitle,
-  oa as JShuttle,
+  or as JShuttle,
   Ve as JSidebar,
   Ze as JSidebarAdvanced,
   Xe as JSidebarSimple,
   H as JSpinner,
-  ae as JSplitter,
+  re as JSplitter,
   g as JSwitch,
   Je as JTabs,
   s as JTextarea,
   ye as JTitlebar,
   fe as JToast,
-  me as JToaster,
+  pe as JToaster,
   N as JTooltip,
-  aa as JTree
+  rr as JTree,
+  nr as useBreakpoint
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@j-solution/components",
   "description": "Vue 3 Atomic Design component kit for enterprise dashboards",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/types/index.d.ts

@@ -21,6 +21,7 @@ import { RowClickedEvent } from 'ag-grid-community';
 import { RowDoubleClickedEvent } from 'ag-grid-community';
 import { SelectionChangedEvent } from 'ag-grid-community';
 import { ToasterProps } from 'vue-sonner';
+import { useBreakpoint } from './composables/useBreakpoint';
 import { VariantProps } from 'class-variance-authority';
 
 declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -299,9 +300,15 @@ showTitlebar: boolean;
 contentScroll: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_24: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{}>, {
+declare const __VLS_component_24: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"backdrop-click": () => any;
+}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
+"onBackdrop-click"?: (() => any) | undefined;
+}>, {
 styletype: StyleType_29;
 contentScroll: boolean;
+sidebarOverlay: boolean;
+sidebarOpen: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_25: DefineComponent<__VLS_Props_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -369,6 +376,7 @@ styletype: StyleType_20;
 
 declare const __VLS_component_9: DefineComponent<__VLS_Props_25, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_25> & Readonly<{}>, {
 direction: Orientation;
+responsive: boolean;
 gap: number;
 withHandle: boolean;
 defaultSize: number;
@@ -682,6 +690,8 @@ declare type __VLS_Props_25 = {
     gap?: number;
     /** 추가 CSS 클래스 */
     class?: string;
+    /** 모바일에서 자동 수직 전환 (기본: true) */
+    responsive?: boolean;
 };
 
 declare type __VLS_Props_26 = {
@@ -987,11 +997,18 @@ declare type __VLS_Props_40 = {
     contentScroll?: boolean;
     /** 추가 CSS 클래스 */
     class?: string;
+    /** 모바일에서 사이드바를 오버레이 드로어로 표시 */
+    sidebarOverlay?: boolean;
+    /** 사이드바 오버레이 열림 상태 (sidebarOverlay=true일 때만 사용) */
+    sidebarOpen?: boolean;
 };
 
 /**
  * JLayoutSimple - JSidebar + 일반 PageContainer 조합 템플릿
  *
+ * 모바일에서는 사이드바가 오버레이 드로어로 전환되며,
+ * 메뉴 클릭 시 자동으로 닫힙니다.
+ *
  * @example
  * ```vue
  * <JLayoutSimple :menu-items="menuItems" storage-key="my-app-favorites">
@@ -1299,6 +1316,7 @@ declare function __VLS_template_24(): {
     slots: {
         header?(_: {}): any;
         sidebar?(_: {}): any;
+        sidebar?(_: {}): any;
         content?(_: {}): any;
         default?(_: {}): any;
     };
@@ -3730,6 +3748,7 @@ declare type StyleType_28 = 'default' | 'minimal';
  * @description
  * 공통 레이아웃 구조를 제공하는 기본 컴포넌트입니다.
  * Header, Sidebar, Content 영역을 슬롯으로 제공하여 유연한 레이아웃 구성이 가능합니다.
+ * 모바일에서는 사이드바가 오버레이 드로어로 전환됩니다.
  *
  * 레이아웃 구조:
  * - header: 상단 헤더 영역 (슬롯)
@@ -3750,13 +3769,6 @@ declare type StyleType_28 = 'default' | 'minimal';
  *   </template>
  * </JLayout>
  * ```
- *
- * @example 기본 슬롯 사용
- * ```vue
- * <JLayout>
- *   <div>기본 콘텐츠</div>
- * </JLayout>
- * ```
  */
 declare type StyleType_29 = 'default' | 'minimal';
 
@@ -3795,6 +3807,8 @@ declare type TitlebarButton = {
 
 declare type Trigger = 'hover' | 'focus' | 'click' | 'manual';
 
+export { useBreakpoint }
+
 declare type VariantType = 'linear' | 'circular';
 
 export { }