@j-solution/components 1.6.1 → 1.8.0

package/components/atoms/JTooltip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JTooltip.vue.js","sources":["../../../../src/components/atoms/JTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, onMounted, onUnmounted } from 'vue'\r\nimport Tooltip from '@/components/shadcn/Tooltip.vue'\r\nimport TooltipContent from '@/components/shadcn/TooltipContent.vue'\r\nimport TooltipProvider from '@/components/shadcn/TooltipProvider.vue'\r\nimport TooltipTrigger from '@/components/shadcn/TooltipTrigger.vue'\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'primary'   // 강조 스타일 (파랑)\r\n  | 'success'   // 성공 스타일 (초록)\r\n  | 'warning'   // 경고 스타일 (주황)\r\n  | 'danger'    // 위험 스타일 (빨강)\r\n\r\ntype Size = 'sm' | 'md' | 'lg'\r\n\r\ntype Trigger = 'hover' | 'focus' | 'click' | 'manual'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    content?: string\r\n    side?: 'top' | 'right' | 'bottom' | 'left'\r\n    align?: 'start' | 'center' | 'end'\r\n    class?: string\r\n    /** 스타일 프리셋 */\r\n    styletype?: StyleType\r\n    /** 툴팁 크기 */\r\n    size?: Size\r\n    /** 툴팁 비활성화 */\r\n    disabled?: boolean\r\n    /** 표시 지연 시간 (ms) */\r\n    delay?: number\r\n    /** 툴팁 최대 너비 */\r\n    maxWidth?: string | number\r\n    /** 툴팁 트리거 타입 */\r\n    trigger?: Trigger\r\n  }>(),\r\n  {\r\n    side: 'top',\r\n    align: 'center',\r\n    styletype: 'default',\r\n    size: 'md',\r\n    disabled: false,\r\n    delay: 200,\r\n    maxWidth: '200px',\r\n    trigger: 'hover',\r\n  },\r\n)\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n  default: { class: '' },\r\n  primary: { \r\n    class: 'bg-blue-500 text-white border-blue-600',\r\n  },\r\n  success: { \r\n    class: 'bg-green-500 text-white border-green-600',\r\n  },\r\n  warning: { \r\n    class: 'bg-amber-500 text-white border-amber-600',\r\n  },\r\n  danger: { \r\n    class: 'bg-red-500 text-white border-red-600',\r\n  },\r\n}\r\n\r\n/**\r\n * size -> class 매핑\r\n */\r\nconst SIZE_PRESETS: Record<Size, { class: string }> = {\r\n  sm: { \r\n    class: 'text-xs px-2 py-1',\r\n  },\r\n  md: { \r\n    class: 'text-sm px-3 py-1.5',\r\n  },\r\n  lg: { \r\n    class: 'text-base px-4 py-2',\r\n  },\r\n}\r\n\r\n// click과 manual 트리거를 위한 상태 관리\r\nconst isOpen = ref(false)\r\n\r\n// 각 트리거 타입별 핸들러\r\nconst handleClick = (event: MouseEvent) => {\r\n  console.log('Click handler called, trigger:', props.trigger)\r\n  if (props.trigger === 'click') {\r\n    console.log('Toggling tooltip, current state:', isOpen.value)\r\n    isOpen.value = !isOpen.value\r\n    console.log('New state:', isOpen.value)\r\n  } else if (props.trigger === 'focus') {\r\n    // focus 트리거에서는 클릭 이벤트 무시\r\n    event.preventDefault()\r\n    event.stopPropagation()\r\n  }\r\n}\r\n\r\n// delay를 위한 타이머 관리\r\nlet hoverTimer: number | null = null\r\n\r\nconst handleMouseEnter = () => {\r\n  if (props.trigger === 'hover') {\r\n    // 기존 타이머가 있으면 취소\r\n    if (hoverTimer) {\r\n      clearTimeout(hoverTimer)\r\n    }\r\n    // delay 적용\r\n    hoverTimer = setTimeout(() => {\r\n      isOpen.value = true\r\n    }, props.delay)\r\n  }\r\n}\r\n\r\nconst handleMouseLeave = () => {\r\n  if (props.trigger === 'hover') {\r\n    // 타이머 취소\r\n    if (hoverTimer) {\r\n      clearTimeout(hoverTimer)\r\n      hoverTimer = null\r\n    }\r\n    isOpen.value = false\r\n  }\r\n}\r\n\r\nconst handleFocus = () => {\r\n  if (props.trigger === 'focus') {\r\n    isOpen.value = true\r\n  }\r\n}\r\n\r\nconst handleBlur = () => {\r\n  if (props.trigger === 'focus') {\r\n    isOpen.value = false\r\n  }\r\n}\r\n\r\n// 트리거 타입에 따른 Tooltip 설정 계산\r\nconst tooltipConfig = computed(() => {\r\n  const config: any = {\r\n    disabled: props.disabled,\r\n  }\r\n  \r\n  // 모든 트리거 타입에 대해 수동 제어\r\n  config.open = isOpen.value\r\n  \r\n  return config\r\n})\r\n\r\n// 외부 클릭 감지를 위한 핸들러\r\nconst handleOutsideClick = (event: Event) => {\r\n  if (props.trigger === 'hover' && isOpen.value) {\r\n    const target = event.target as HTMLElement\r\n    const tooltipElement = document.querySelector('[data-tooltip-trigger]')\r\n    if (tooltipElement && !tooltipElement.contains(target)) {\r\n      isOpen.value = false\r\n    }\r\n  }\r\n}\r\n\r\n// manual 트리거를 위한 메서드들\r\nconst showTooltip = () => {\r\n  if (props.trigger === 'manual') {\r\n    isOpen.value = true\r\n  }\r\n}\r\n\r\nconst hideTooltip = () => {\r\n  if (props.trigger === 'manual') {\r\n    isOpen.value = false\r\n  }\r\n}\r\n\r\n// 외부에서 사용할 수 있도록 expose\r\ndefineExpose({\r\n  showTooltip,\r\n  hideTooltip,\r\n})\r\n\r\n// 외부 클릭 감지를 위한 이벤트 리스너 등록/해제\r\nonMounted(() => {\r\n  if (props.trigger === 'hover') {\r\n    document.addEventListener('click', handleOutsideClick)\r\n  }\r\n})\r\n\r\nonUnmounted(() => {\r\n  if (props.trigger === 'hover') {\r\n    document.removeEventListener('click', handleOutsideClick)\r\n  }\r\n  \r\n  // 타이머 정리\r\n  if (hoverTimer) {\r\n    clearTimeout(hoverTimer)\r\n  }\r\n})\r\n\r\n/** 최종 바인딩: 직접 넘긴 class가 있으면 styletype과 size 기본값과 병합 */\r\nconst mapped = computed(() => {\r\n  const stylePreset = STYLE_PRESETS[props.styletype!]\r\n  const sizePreset = SIZE_PRESETS[props.size!]\r\n  const finalClass = [stylePreset.class, sizePreset.class, props.class].filter(Boolean).join(' ')\r\n  \r\n  // maxWidth 스타일 처리\r\n  const maxWidthStyle = typeof props.maxWidth === 'number' \r\n    ? `${props.maxWidth}px` \r\n    : props.maxWidth\r\n  \r\n  return {\r\n    side: props.side,\r\n    align: props.align,\r\n    class: finalClass,\r\n    style: {\r\n      maxWidth: maxWidthStyle,\r\n    },\r\n  }\r\n})\r\n</script>\r\n\r\n<template>\r\n  <TooltipProvider :delayDuration=\"props.delay\">\r\n    <Tooltip v-bind=\"tooltipConfig\">\r\n      <TooltipTrigger \r\n        as-child\r\n        :data-tooltip-trigger=\"true\"\r\n        @click=\"handleClick\"\r\n        @mouseenter=\"handleMouseEnter\"\r\n        @mouseleave=\"handleMouseLeave\"\r\n        @focus=\"handleFocus\"\r\n        @blur=\"handleBlur\"\r\n      >\r\n        <slot name=\"trigger\" />\r\n      </TooltipTrigger>\r\n      <TooltipContent v-bind=\"mapped\">\r\n        {{ props.content }}\r\n      </TooltipContent>\r\n    </Tooltip>\r\n  </TooltipProvider>\r\n</template>\r\n"],"names":["props","__props","STYLE_PRESETS","SIZE_PRESETS","isOpen","ref","handleClick","event","hoverTimer","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","tooltipConfig","computed","config","handleOutsideClick","target","tooltipElement","__expose","onMounted","onUnmounted","mapped","stylePreset","sizePreset","finalClass","maxWidthStyle","_createBlock","TooltipProvider","_createVNode","Tooltip","TooltipTrigger","_renderSlot","_ctx","TooltipContent","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"JTooltip.vue.js","sources":["../../../../src/components/atoms/JTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, onMounted, onUnmounted } from 'vue'\r\nimport Tooltip from '@/components/shadcn/Tooltip.vue'\r\nimport TooltipContent from '@/components/shadcn/TooltipContent.vue'\r\nimport TooltipProvider from '@/components/shadcn/TooltipProvider.vue'\r\nimport TooltipTrigger from '@/components/shadcn/TooltipTrigger.vue'\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'primary'   // 강조 스타일 (파랑)\r\n  | 'success'   // 성공 스타일 (초록)\r\n  | 'warning'   // 경고 스타일 (주황)\r\n  | 'danger'    // 위험 스타일 (빨강)\r\n\r\ntype Size = 'xs' | 'sm' | 'md' | 'lg'\n\r\ntype Trigger = 'hover' | 'focus' | 'click' | 'manual'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    content?: string\r\n    side?: 'top' | 'right' | 'bottom' | 'left'\r\n    align?: 'start' | 'center' | 'end'\r\n    class?: string\r\n    /** 스타일 프리셋 */\r\n    styletype?: StyleType\r\n    /** 툴팁 크기 */\r\n    size?: Size\r\n    /** 툴팁 비활성화 */\r\n    disabled?: boolean\r\n    /** 표시 지연 시간 (ms) */\r\n    delay?: number\r\n    /** 툴팁 최대 너비 */\r\n    maxWidth?: string | number\r\n    /** 툴팁 트리거 타입 */\r\n    trigger?: Trigger\r\n  }>(),\r\n  {\n    side: 'top',\n    align: 'center',\n    styletype: 'default',\n    size: 'sm',\n    disabled: false,\n    delay: 200,\n    maxWidth: '200px',\n    trigger: 'hover',\r\n  },\r\n)\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n  default: { class: '' },\r\n  primary: { \r\n    class: 'bg-blue-500 text-white border-blue-600',\r\n  },\r\n  success: { \r\n    class: 'bg-green-500 text-white border-green-600',\r\n  },\r\n  warning: { \r\n    class: 'bg-amber-500 text-white border-amber-600',\r\n  },\r\n  danger: { \r\n    class: 'bg-red-500 text-white border-red-600',\r\n  },\r\n}\r\n\r\n/**\r\n * size -> class 매핑\r\n */\r\nconst SIZE_PRESETS: Record<Size, { class: string }> = {\n  xs: { \n    class: 'text-[10px] px-1.5 py-0.5 max-w-40',\n  },\n  sm: { \n    class: 'text-xs px-2 py-1 max-w-48',\n  },\n  md: { \n    class: 'text-xs px-2.5 py-1 max-w-56',\n  },\n  lg: { \n    class: 'text-sm px-3 py-1.5 max-w-64',\n  },\n}\n\r\n// click과 manual 트리거를 위한 상태 관리\r\nconst isOpen = ref(false)\r\n\r\n// 각 트리거 타입별 핸들러\r\nconst handleClick = (event: MouseEvent) => {\r\n  console.log('Click handler called, trigger:', props.trigger)\r\n  if (props.trigger === 'click') {\r\n    console.log('Toggling tooltip, current state:', isOpen.value)\r\n    isOpen.value = !isOpen.value\r\n    console.log('New state:', isOpen.value)\r\n  } else if (props.trigger === 'focus') {\r\n    // focus 트리거에서는 클릭 이벤트 무시\r\n    event.preventDefault()\r\n    event.stopPropagation()\r\n  }\r\n}\r\n\r\n// delay를 위한 타이머 관리\r\nlet hoverTimer: number | null = null\r\n\r\nconst handleMouseEnter = () => {\r\n  if (props.trigger === 'hover') {\r\n    // 기존 타이머가 있으면 취소\r\n    if (hoverTimer) {\r\n      clearTimeout(hoverTimer)\r\n    }\r\n    // delay 적용\r\n    hoverTimer = setTimeout(() => {\r\n      isOpen.value = true\r\n    }, props.delay)\r\n  }\r\n}\r\n\r\nconst handleMouseLeave = () => {\r\n  if (props.trigger === 'hover') {\r\n    // 타이머 취소\r\n    if (hoverTimer) {\r\n      clearTimeout(hoverTimer)\r\n      hoverTimer = null\r\n    }\r\n    isOpen.value = false\r\n  }\r\n}\r\n\r\nconst handleFocus = () => {\r\n  if (props.trigger === 'focus') {\r\n    isOpen.value = true\r\n  }\r\n}\r\n\r\nconst handleBlur = () => {\r\n  if (props.trigger === 'focus') {\r\n    isOpen.value = false\r\n  }\r\n}\r\n\r\n// 트리거 타입에 따른 Tooltip 설정 계산\r\nconst tooltipConfig = computed(() => {\r\n  const config: any = {\r\n    disabled: props.disabled,\r\n  }\r\n  \r\n  // 모든 트리거 타입에 대해 수동 제어\r\n  config.open = isOpen.value\r\n  \r\n  return config\r\n})\r\n\r\n// 외부 클릭 감지를 위한 핸들러\r\nconst handleOutsideClick = (event: Event) => {\r\n  if (props.trigger === 'hover' && isOpen.value) {\r\n    const target = event.target as HTMLElement\r\n    const tooltipElement = document.querySelector('[data-tooltip-trigger]')\r\n    if (tooltipElement && !tooltipElement.contains(target)) {\r\n      isOpen.value = false\r\n    }\r\n  }\r\n}\r\n\r\n// manual 트리거를 위한 메서드들\r\nconst showTooltip = () => {\r\n  if (props.trigger === 'manual') {\r\n    isOpen.value = true\r\n  }\r\n}\r\n\r\nconst hideTooltip = () => {\r\n  if (props.trigger === 'manual') {\r\n    isOpen.value = false\r\n  }\r\n}\r\n\r\n// 외부에서 사용할 수 있도록 expose\r\ndefineExpose({\r\n  showTooltip,\r\n  hideTooltip,\r\n})\r\n\r\n// 외부 클릭 감지를 위한 이벤트 리스너 등록/해제\r\nonMounted(() => {\r\n  if (props.trigger === 'hover') {\r\n    document.addEventListener('click', handleOutsideClick)\r\n  }\r\n})\r\n\r\nonUnmounted(() => {\r\n  if (props.trigger === 'hover') {\r\n    document.removeEventListener('click', handleOutsideClick)\r\n  }\r\n  \r\n  // 타이머 정리\r\n  if (hoverTimer) {\r\n    clearTimeout(hoverTimer)\r\n  }\r\n})\r\n\r\n/** 최종 바인딩: 직접 넘긴 class가 있으면 styletype과 size 기본값과 병합 */\r\nconst mapped = computed(() => {\r\n  const stylePreset = STYLE_PRESETS[props.styletype!]\r\n  const sizePreset = SIZE_PRESETS[props.size!]\r\n  const finalClass = [stylePreset.class, sizePreset.class, props.class].filter(Boolean).join(' ')\r\n  \r\n  // maxWidth 스타일 처리\r\n  const maxWidthStyle = typeof props.maxWidth === 'number' \r\n    ? `${props.maxWidth}px` \r\n    : props.maxWidth\r\n  \r\n  return {\r\n    side: props.side,\r\n    align: props.align,\r\n    class: finalClass,\r\n    style: {\r\n      maxWidth: maxWidthStyle,\r\n    },\r\n  }\r\n})\r\n</script>\r\n\r\n<template>\r\n  <TooltipProvider :delayDuration=\"props.delay\">\r\n    <Tooltip v-bind=\"tooltipConfig\">\r\n      <TooltipTrigger \r\n        as-child\r\n        :data-tooltip-trigger=\"true\"\r\n        @click=\"handleClick\"\r\n        @mouseenter=\"handleMouseEnter\"\r\n        @mouseleave=\"handleMouseLeave\"\r\n        @focus=\"handleFocus\"\r\n        @blur=\"handleBlur\"\r\n      >\r\n        <slot name=\"trigger\" />\r\n      </TooltipTrigger>\r\n      <TooltipContent v-bind=\"mapped\">\r\n        {{ props.content }}\r\n      </TooltipContent>\r\n    </Tooltip>\r\n  </TooltipProvider>\r\n</template>\r\n"],"names":["props","__props","STYLE_PRESETS","SIZE_PRESETS","isOpen","ref","handleClick","event","hoverTimer","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","tooltipConfig","computed","config","handleOutsideClick","target","tooltipElement","__expose","onMounted","onUnmounted","mapped","stylePreset","sizePreset","finalClass","maxWidthStyle","_createBlock","TooltipProvider","_createVNode","Tooltip","TooltipTrigger","_renderSlot","_ctx","TooltipContent","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/components/examples/ExampleCrudPage.vue.cjs

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

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

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