@j-solution/components 1.5.0 → 1.6.0

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

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

package/components/molecules/JTitlebar.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as k, computed as w, createElementBlock as a, openBlock as i, normalizeClass as l, unref as s, createElementVNode as c, createCommentVNode as o, renderSlot as _, createBlock as m, createVNode as x, withCtx as d, toDisplayString as b, Fragment as z, renderList as I } from "vue";
-import $ from "../atoms/JButton.vue.js";
+import { defineComponent as w, computed as _, createElementBlock as c, openBlock as l, normalizeClass as o, unref as t, createElementVNode as m, createCommentVNode as i, renderSlot as z, createBlock as n, createVNode as y, withCtx as f, toDisplayString as g, Fragment as I, renderList as $ } from "vue";
+import j from "../atoms/JButton.vue.js";
 import "../shadcn/index.js";
 import "lucide-vue-next";
-import { cn as f } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 import "@internationalized/date";
 import "md-editor-v3";
 /* empty css                                                                                                               */
@@ -13,7 +13,7 @@ import "reka-ui";
 /* empty css                      */
 import "../shadcn/avatar-variants.js";
 import u from "../atoms/JIcon.vue.js";
-import j from "../atoms/JLabel.vue.js";
+import B from "../atoms/JLabel.vue.js";
 import E from "../atoms/JPopover.vue.js";
 import "dompurify";
 /* empty css                     */
@@ -25,21 +25,22 @@ import "ag-grid-enterprise";
 /* empty css                                                                                                          */
 /* empty css                  */
 import "vue-sonner";
-const S = { class: "flex items-center gap-3 flex-1" }, B = { class: "flex items-center gap-2" }, N = { class: "p-2" }, T = { class: "text-sm text-muted-foreground whitespace-normal break-words" }, V = {
+const S = { class: "flex items-center gap-3 flex-1" }, N = { class: "flex items-center gap-2" }, T = { class: "p-2" }, V = { class: "text-sm text-muted-foreground whitespace-normal break-words" }, H = {
   key: 0,
   class: "flex items-center gap-2"
-}, L = { key: 1 }, de = /* @__PURE__ */ k({
+}, L = { key: 1 }, de = /* @__PURE__ */ w({
   __name: "JTitlebar",
   props: {
     styletype: { default: "default" },
     icon: {},
     title: {},
     description: {},
+    showHelp: { type: Boolean },
     buttons: { default: () => [] }
   },
-  emits: ["buttonClick"],
-  setup(t, { emit: y }) {
-    const g = t, p = {
+  emits: ["buttonClick", "help"],
+  setup(s, { emit: h }) {
+    const C = s, p = {
       default: {
         // 기본: 흰 배경 + 얇은 보더 (가장 일반적)
         class: "flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background",
@@ -78,69 +79,76 @@ const S = { class: "flex items-center gap-3 flex-1" }, B = { class: "flex items-
         titleClass: "text-foreground font-semibold",
         infoIconClass: "text-muted-foreground hover:text-primary"
       }
-    }, r = w(() => p[g.styletype] ?? p.default), h = y, C = (n) => {
-      n.onClick?.(), h("buttonClick", n);
+    }, r = _(() => p[C.styletype] ?? p.default), x = h, k = (a) => {
+      a.onClick?.(), x("buttonClick", a);
     };
-    return (n, D) => (i(), a("div", {
-      class: l(s(f)(r.value.class))
+    return (a, b) => (l(), c("div", {
+      class: o(t(d)(r.value.class))
     }, [
-      c("div", S, [
-        t.icon ? (i(), m(s(u), {
+      m("div", S, [
+        s.icon ? (l(), n(t(u), {
           key: 0,
-          name: t.icon,
+          name: s.icon,
           size: "md",
-          class: l(r.value.iconClass)
-        }, null, 8, ["name", "class"])) : o("", !0),
-        c("div", B, [
-          x(s(j), {
-            text: t.title || "",
-            class: l(s(f)("text-lg font-semibold", r.value.titleClass))
+          class: o(r.value.iconClass)
+        }, null, 8, ["name", "class"])) : i("", !0),
+        m("div", N, [
+          y(t(B), {
+            text: s.title || "",
+            class: o(t(d)("text-lg font-semibold", r.value.titleClass))
           }, null, 8, ["text", "class"]),
-          t.description ? (i(), m(s(E), {
+          s.description ? (l(), n(t(E), {
             key: 0,
             position: "bottom",
             align: "center",
             "side-offset": 8
           }, {
-            trigger: d(() => [
-              x(s(u), {
+            trigger: f(() => [
+              y(t(u), {
                 name: "info",
                 size: "sm",
-                class: l(s(f)("cursor-help transition-colors inline-flex", r.value.infoIconClass))
+                class: o(t(d)("cursor-help transition-colors inline-flex", r.value.infoIconClass))
               }, null, 8, ["class"])
             ]),
-            default: d(() => [
-              c("div", N, [
-                c("p", T, b(t.description), 1)
+            default: f(() => [
+              m("div", T, [
+                m("p", V, g(s.description), 1)
               ])
             ]),
             _: 1
-          })) : o("", !0)
+          })) : i("", !0),
+          s.showHelp ? (l(), n(t(u), {
+            key: 1,
+            name: "circleQuestionMark",
+            size: "sm",
+            class: o(t(d)("cursor-pointer transition-colors inline-flex", r.value.infoIconClass)),
+            onClick: b[0] || (b[0] = (e) => x("help"))
+          }, null, 8, ["class"])) : i("", !0)
         ])
       ]),
-      t.buttons && t.buttons.length > 0 ? (i(), a("div", V, [
-        (i(!0), a(z, null, I(t.buttons, (e, v) => (i(), m(s($), {
+      s.buttons && s.buttons.length > 0 ? (l(), c("div", H, [
+        (l(!0), c(I, null, $(s.buttons, (e, v) => (l(), n(t(j), {
           key: v,
           variant: e.variant,
           styletype: e.styletype,
           disabled: e.disabled,
           loading: e.loading,
-          class: l(e.size === "sm" ? "h-8" : e.size === "lg" ? "h-11" : "h-9"),
-          onClick: (F) => C(e)
+          class: o(e.size === "sm" ? "h-8" : e.size === "lg" ? "h-11" : "h-9"),
+          onClick: (D) => k(e)
         }, {
-          default: d(() => [
-            e.icon ? (i(), m(s(u), {
+          default: f(() => [
+            e.icon ? (l(), n(t(u), {
               key: 0,
               name: e.icon,
               size: "sm",
               class: "mr-1.5"
-            }, null, 8, ["name"])) : o("", !0),
-            e.text ? (i(), a("span", L, b(e.text), 1)) : o("", !0)
+            }, null, 8, ["name"])) : i("", !0),
+            e.text ? (l(), c("span", L, g(e.text), 1)) : i("", !0)
           ]),
           _: 2
         }, 1032, ["variant", "styletype", "disabled", "loading", "class", "onClick"]))), 128))
-      ])) : o("", !0),
-      _(n.$slots, "buttons")
+      ])) : i("", !0),
+      z(a.$slots, "buttons")
     ], 2));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"JTitlebar.vue.js","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        size=\"md\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('text-lg font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-sm text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :class=\"button.size === 'sm' ? 'h-8' : button.size === 'lg' ? 'h-11' : 'h-9'\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"JTitlebar.vue.js","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 help 이벤트 emit */\n    showHelp?: boolean\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n  /** 도움말 아이콘 클릭 이벤트 */\n  help: []\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        size=\"md\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('text-lg font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-sm text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n\n        <!-- 도움말 아이콘 (showHelp일 때 표시, 클릭 시 help 이벤트) -->\n        <JIcon\n          v-if=\"showHelp\"\n          name=\"circleQuestionMark\"\n          size=\"sm\"\n          :class=\"cn('cursor-pointer transition-colors inline-flex', preset.infoIconClass)\"\n          @click=\"emit('help')\"\n        />\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :class=\"button.size === 'sm' ? 'h-8' : button.size === 'lg' ? 'h-11' : 'h-9'\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}

package/components/organisms/JFilterBar.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("lucide-vue-next"),B=require("../atoms/JBadge.vue.cjs"),f=require("../atoms/JButton.vue.cjs"),_={class:"w-full rounded-lg border bg-card text-card-foreground"},v={class:"flex items-center justify-between px-4 py-2"},k={class:"flex items-center gap-2"},x={key:1,class:"flex items-center gap-1 flex-wrap"},b={class:"text-muted-foreground"},w=["onClick"],C={class:"flex items-center gap-2"},N={class:"px-4 pb-4"},E=e.defineComponent({__name:"JFilterBar",props:{collapsed:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},filterValues:{default:()=>({})},filterConfig:{default:()=>({})},showResetButton:{type:Boolean,default:!1},showSearchButton:{type:Boolean,default:!1},resetButtonText:{default:"초기화"},searchButtonText:{default:"조회"}},emits:["update:collapsed","update:filterValues","search"],setup(n,{emit:p}){const r=n,s=p,c=e.computed(()=>r.collapsible?!r.collapsed:!0);function m(t){return!!(t==null||typeof t=="string"&&t.trim()===""||Array.isArray(t)&&t.length===0)}const i=e.computed(()=>{const t=[];for(const[l,o]of Object.entries(r.filterConfig)){const a=r.filterValues[l];if(m(a))continue;const u=o.displayValue?o.displayValue(a):String(a);u.trim()!==""&&t.push({key:l,label:o.label,value:u})}return t});function y(){s("update:collapsed",!r.collapsed)}function h(){const t={};for(const l of Object.keys(r.filterValues)){const o=r.filterValues[l];typeof o=="string"?t[l]="":Array.isArray(o)?t[l]=[]:t[l]=null}s("update:filterValues",t)}function g(){s("search")}function V(t){const l={...r.filterValues},o=l[t];typeof o=="string"?l[t]="":Array.isArray(o)?l[t]=[]:l[t]=null,s("update:filterValues",l)}return(t,l)=>(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",v,[e.createElementVNode("div",k,[n.collapsible?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors",onClick:y},[e.createVNode(e.unref(d.ChevronDown),{class:e.normalizeClass(["h-4 w-4 transition-transform",c.value?"rotate-0":"-rotate-90"])},null,8,["class"])])):e.createCommentVNode("",!0),i.value.length>0?(e.openBlock(),e.createElementBlock("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,o=>(e.openBlock(),e.createBlock(B.default,{key:o.key,variant:"secondary",size:"sm",class:"flex items-center gap-1 cursor-default"},{default:e.withCtx(()=>[e.createElementVNode("span",b,e.toDisplayString(o.label)+":",1),e.createElementVNode("span",null,e.toDisplayString(o.value),1),e.createElementVNode("button",{type:"button",class:"ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors",onClick:e.withModifiers(a=>V(o.key),["stop"])},[e.createVNode(e.unref(d.X),{class:"h-3 w-3"})],8,w)]),_:2},1024))),128))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"actions"),n.showResetButton?(e.openBlock(),e.createBlock(f.default,{key:0,variant:"outline",size:"sm",onClick:h},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.resetButtonText),1)]),_:1})):e.createCommentVNode("",!0),n.showSearchButton?(e.openBlock(),e.createBlock(f.default,{key:1,styletype:"primary",size:"sm",onClick:g},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.searchButtonText),1)]),_:1})):e.createCommentVNode("",!0)])]),e.withDirectives(e.createElementVNode("div",N,[e.renderSlot(t.$slots,"filters")],512),[[e.vShow,c.value]])]))}});exports.default=E;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("lucide-vue-next"),_=require("../atoms/JBadge.vue.cjs"),f=require("../atoms/JButton.vue.cjs"),B=require("../atoms/JLabel.vue.cjs"),k={class:"w-full rounded-lg border bg-card text-card-foreground"},v={class:"flex items-center justify-between px-4 py-2"},x={class:"flex items-center gap-2"},b={key:2,class:"flex items-center gap-1 flex-wrap"},w={class:"text-muted-foreground"},C=["onClick"],N={class:"flex items-center gap-2"},E={class:"px-4 pb-4"},S=e.defineComponent({__name:"JFilterBar",props:{title:{},collapsed:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},filterValues:{default:()=>({})},filterDisplay:{default:()=>({})},showResetButton:{type:Boolean,default:!1},showSearchButton:{type:Boolean,default:!1},resetButtonText:{default:"초기화"},searchButtonText:{default:"조회"}},emits:["update:collapsed","update:filterValues","search","reset"],setup(r,{emit:p}){const s=r,n=p,c=e.computed(()=>s.collapsible?!s.collapsed:!0);function m(t){return!!(t==null||typeof t=="string"&&t.trim()===""||Array.isArray(t)&&t.length===0)}const u=e.computed(()=>{const t=[];for(const[l,o]of Object.entries(s.filterDisplay)){const a=s.filterValues[l];if(m(a))continue;const i=o.displayValue?o.displayValue(a):String(a);i.trim()!==""&&t.push({key:l,label:o.label,value:i})}return t});function y(){n("update:collapsed",!s.collapsed)}function h(){const t={};for(const l of Object.keys(s.filterValues)){const o=s.filterValues[l];typeof o=="string"?t[l]="":Array.isArray(o)?t[l]=[]:t[l]=null}n("update:filterValues",t),n("reset")}function g(){n("search")}function V(t){const l={...s.filterValues},o=l[t];typeof o=="string"?l[t]="":Array.isArray(o)?l[t]=[]:l[t]=null,n("update:filterValues",l)}return(t,l)=>(e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",v,[e.createElementVNode("div",x,[r.collapsible?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors",onClick:y},[e.createVNode(e.unref(d.ChevronDown),{class:e.normalizeClass(["h-4 w-4 transition-transform",c.value?"rotate-0":"-rotate-90"])},null,8,["class"])])):e.createCommentVNode("",!0),r.title?(e.openBlock(),e.createBlock(B.default,{key:1,text:r.title,class:"text-sm font-semibold text-foreground"},null,8,["text"])):e.createCommentVNode("",!0),u.value.length>0?(e.openBlock(),e.createElementBlock("div",b,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,o=>(e.openBlock(),e.createBlock(_.default,{key:o.key,variant:"secondary",size:"sm",class:"flex items-center gap-1 cursor-default"},{default:e.withCtx(()=>[e.createElementVNode("span",w,e.toDisplayString(o.label)+":",1),e.createElementVNode("span",null,e.toDisplayString(o.value),1),e.createElementVNode("button",{type:"button",class:"ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors",onClick:e.withModifiers(a=>V(o.key),["stop"])},[e.createVNode(e.unref(d.X),{class:"h-3 w-3"})],8,C)]),_:2},1024))),128))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",N,[e.renderSlot(t.$slots,"actions"),r.showResetButton?(e.openBlock(),e.createBlock(f.default,{key:0,variant:"secondary",size:"sm",onClick:h},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.resetButtonText),1)]),_:1})):e.createCommentVNode("",!0),r.showSearchButton?(e.openBlock(),e.createBlock(f.default,{key:1,styletype:"primary",size:"sm",onClick:g},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.searchButtonText),1)]),_:1})):e.createCommentVNode("",!0)])]),e.withDirectives(e.createElementVNode("div",E,[e.renderSlot(t.$slots,"filters")],512),[[e.vShow,c.value]])]))}});exports.default=S;
 //# sourceMappingURL=JFilterBar.vue.cjs.map

package/components/organisms/JFilterBar.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JFilterBar.vue.cjs","sources":["../../../../src/components/organisms/JFilterBar.vue"],"sourcesContent":["<template>\r\n  <div class=\"w-full rounded-lg border bg-card text-card-foreground\">\r\n    <!-- Row 1: toolbar -->\r\n    <div class=\"flex items-center justify-between px-4 py-2\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <button\r\n          v-if=\"collapsible\"\r\n          type=\"button\"\r\n          class=\"flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors\"\r\n          @click=\"toggleCollapsed\"\r\n        >\r\n          <ChevronDown\r\n            :class=\"[\r\n              'h-4 w-4 transition-transform',\r\n              isExpanded ? 'rotate-0' : '-rotate-90',\r\n            ]\"\r\n          />\r\n        </button>\r\n        <!-- 선택된 필터 뱃지 표시 -->\r\n        <div v-if=\"activeFilters.length > 0\" class=\"flex items-center gap-1 flex-wrap\">\r\n          <JBadge\r\n            v-for=\"filter in activeFilters\"\r\n            :key=\"filter.key\"\r\n            variant=\"secondary\"\r\n            size=\"sm\"\r\n            class=\"flex items-center gap-1 cursor-default\"\r\n          >\r\n            <span class=\"text-muted-foreground\">{{ filter.label }}:</span>\r\n            <span>{{ filter.value }}</span>\r\n            <button\r\n              type=\"button\"\r\n              class=\"ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors\"\r\n              @click.stop=\"removeFilter(filter.key)\"\r\n            >\r\n              <X class=\"h-3 w-3\" />\r\n            </button>\r\n          </JBadge>\r\n        </div>\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <slot name=\"actions\" />\r\n        <JButton\r\n          v-if=\"showResetButton\"\r\n          variant=\"outline\"\r\n          size=\"sm\"\r\n          @click=\"handleReset\"\r\n        >\r\n          {{ resetButtonText }}\r\n        </JButton>\r\n        <JButton\r\n          v-if=\"showSearchButton\"\r\n          styletype=\"primary\"\r\n          size=\"sm\"\r\n          @click=\"handleSearch\"\r\n        >\r\n          {{ searchButtonText }}\r\n        </JButton>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Row 2: filters -->\r\n    <div v-show=\"isExpanded\" class=\"px-4 pb-4\">\r\n      <slot name=\"filters\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { ChevronDown, X } from 'lucide-vue-next'\r\nimport JBadge from '@/components/atoms/JBadge.vue'\r\nimport JButton from '@/components/atoms/JButton.vue'\r\n\r\n/** 활성 필터 아이템 타입 */\r\nexport interface ActiveFilterItem {\r\n  /** 필터 식별 키 */\r\n  key: string\r\n  /** 표시할 라벨 (필터명) */\r\n  label: string\r\n  /** 표시할 값 */\r\n  value: string\r\n}\r\n\r\n/** 필터 설정 타입 */\r\nexport interface FilterConfigItem {\r\n  /** 표시할 라벨 */\r\n  label: string\r\n  /** 값을 표시용 문자열로 변환 (예: combo value -> label) */\r\n  displayValue?: (value: unknown) => string\r\n}\r\n\r\nexport interface JFilterBarProps {\r\n  /** 필터 접힘 상태 (v-model 지원) */\r\n  collapsed?: boolean\r\n  /** 접기/펼치기 가능 여부. false면 토글 버튼 숨김 & 필터 항상 표시 */\r\n  collapsible?: boolean\r\n  /** 필터 값 객체 (v-model:filterValues 지원) */\r\n  filterValues?: Record<string, unknown>\r\n  /** 필터 설정 (label, displayValue 등) */\r\n  filterConfig?: Record<string, FilterConfigItem>\r\n  /** 초기화 버튼 표시 여부 */\r\n  showResetButton?: boolean\r\n  /** 조회 버튼 표시 여부 */\r\n  showSearchButton?: boolean\r\n  /** 초기화 버튼 텍스트 */\r\n  resetButtonText?: string\r\n  /** 조회 버튼 텍스트 */\r\n  searchButtonText?: string\r\n}\r\n\r\nconst props = withDefaults(defineProps<JFilterBarProps>(), {\r\n  collapsed: false,\r\n  collapsible: true,\r\n  filterValues: () => ({}),\r\n  filterConfig: () => ({}),\r\n  showResetButton: false,\r\n  showSearchButton: false,\r\n  resetButtonText: '초기화',\r\n  searchButtonText: '조회',\r\n})\r\n\r\nconst emit = defineEmits<{\r\n  'update:collapsed': [value: boolean]\r\n  'update:filterValues': [value: Record<string, unknown>]\r\n  /** 조회 버튼 클릭 */\r\n  search: []\r\n}>()\r\n\r\nconst isExpanded = computed(() => {\r\n  if (!props.collapsible) return true\r\n  return !props.collapsed\r\n})\r\n\r\n/** 값이 비어있는지 확인 */\r\nfunction isEmpty(value: unknown): boolean {\r\n  if (value === null || value === undefined) return true\r\n  if (typeof value === 'string' && value.trim() === '') return true\r\n  if (Array.isArray(value) && value.length === 0) return true\r\n  return false\r\n}\r\n\r\n/** filterValues + filterConfig 기반으로 활성 필터 목록 자동 생성 */\r\nconst activeFilters = computed<ActiveFilterItem[]>(() => {\r\n  const filters: ActiveFilterItem[] = []\r\n\r\n  for (const [key, config] of Object.entries(props.filterConfig)) {\r\n    const value = props.filterValues[key]\r\n    if (isEmpty(value)) continue\r\n\r\n    const displayValue = config.displayValue ? config.displayValue(value) : String(value)\r\n    if (displayValue.trim() === '') continue\r\n\r\n    filters.push({\r\n      key,\r\n      label: config.label,\r\n      value: displayValue,\r\n    })\r\n  }\r\n\r\n  return filters\r\n})\r\n\r\nfunction toggleCollapsed() {\r\n  emit('update:collapsed', !props.collapsed)\r\n}\r\n\r\nfunction handleReset() {\r\n  // filterValues의 모든 값을 초기화\r\n  const resetValues: Record<string, unknown> = {}\r\n  for (const key of Object.keys(props.filterValues)) {\r\n    const currentValue = props.filterValues[key]\r\n    if (typeof currentValue === 'string') {\r\n      resetValues[key] = ''\r\n    } else if (Array.isArray(currentValue)) {\r\n      resetValues[key] = []\r\n    } else {\r\n      resetValues[key] = null\r\n    }\r\n  }\r\n  emit('update:filterValues', resetValues)\r\n}\r\n\r\nfunction handleSearch() {\r\n  emit('search')\r\n}\r\n\r\nfunction removeFilter(key: string) {\r\n  // filterValues 업데이트 (해당 키 값을 초기화)\r\n  const newValues = { ...props.filterValues }\r\n  const currentValue = newValues[key]\r\n\r\n  // 타입에 따라 적절한 초기값으로 설정\r\n  if (typeof currentValue === 'string') {\r\n    newValues[key] = ''\r\n  } else if (Array.isArray(currentValue)) {\r\n    newValues[key] = []\r\n  } else {\r\n    newValues[key] = null\r\n  }\r\n\r\n  emit('update:filterValues', newValues)\r\n}\r\n</script>\r\n"],"names":["props","__props","emit","__emit","isExpanded","computed","isEmpty","value","activeFilters","filters","key","config","displayValue","toggleCollapsed","handleReset","resetValues","currentValue","handleSearch","removeFilter","newValues","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_createVNode","_unref","ChevronDown","_normalizeClass","_hoisted_4","_Fragment","_renderList","filter","_createBlock","JBadge","_hoisted_5","_toDisplayString","_withModifiers","$event","X","_hoisted_7","_renderSlot","_ctx","JButton","_withDirectives","_hoisted_8"],"mappings":"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"}
+{"version":3,"file":"JFilterBar.vue.cjs","sources":["../../../../src/components/organisms/JFilterBar.vue"],"sourcesContent":["<template>\r\n  <div class=\"w-full rounded-lg border bg-card text-card-foreground\">\r\n    <!-- Row 1: toolbar -->\r\n    <div class=\"flex items-center justify-between px-4 py-2\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <button\r\n          v-if=\"collapsible\"\r\n          type=\"button\"\r\n          class=\"flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors\"\r\n          @click=\"toggleCollapsed\"\r\n        >\r\n          <ChevronDown\r\n            :class=\"[\r\n              'h-4 w-4 transition-transform',\r\n              isExpanded ? 'rotate-0' : '-rotate-90',\r\n            ]\"\r\n          />\r\n        </button>\r\n        <!-- 타이틀 -->\r\n        <JLabel\r\n          v-if=\"title\"\r\n          :text=\"title\"\r\n          class=\"text-sm font-semibold text-foreground\"\r\n        />\r\n        <!-- 선택된 필터 뱃지 표시 -->\r\n        <div v-if=\"activeFilters.length > 0\" class=\"flex items-center gap-1 flex-wrap\">\r\n          <JBadge\r\n            v-for=\"filter in activeFilters\"\r\n            :key=\"filter.key\"\r\n            variant=\"secondary\"\r\n            size=\"sm\"\r\n            class=\"flex items-center gap-1 cursor-default\"\r\n          >\r\n            <span class=\"text-muted-foreground\">{{ filter.label }}:</span>\r\n            <span>{{ filter.value }}</span>\r\n            <button\r\n              type=\"button\"\r\n              class=\"ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors\"\r\n              @click.stop=\"removeFilter(filter.key)\"\r\n            >\r\n              <X class=\"h-3 w-3\" />\r\n            </button>\r\n          </JBadge>\r\n        </div>\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <slot name=\"actions\" />\r\n        <JButton\r\n          v-if=\"showResetButton\"\r\n          variant=\"secondary\"\r\n          size=\"sm\"\r\n          @click=\"handleReset\"\r\n        >\r\n          {{ resetButtonText }}\r\n        </JButton>\r\n        <JButton\r\n          v-if=\"showSearchButton\"\r\n          styletype=\"primary\"\r\n          size=\"sm\"\r\n          @click=\"handleSearch\"\r\n        >\r\n          {{ searchButtonText }}\r\n        </JButton>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Row 2: filters -->\r\n    <div v-show=\"isExpanded\" class=\"px-4 pb-4\">\r\n      <slot name=\"filters\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { ChevronDown, X } from 'lucide-vue-next'\r\nimport JBadge from '@/components/atoms/JBadge.vue'\r\nimport JButton from '@/components/atoms/JButton.vue'\r\nimport JLabel from '@/components/atoms/JLabel.vue'\r\n\r\n/** 활성 필터 아이템 타입 */\r\nexport interface ActiveFilterItem {\r\n  /** 필터 식별 키 */\r\n  key: string\r\n  /** 표시할 라벨 (필터명) */\r\n  label: string\r\n  /** 표시할 값 */\r\n  value: string\r\n}\r\n\r\n/** 필터 설정 타입 */\r\nexport interface FilterDisplayItem {\r\n  /** 표시할 라벨 */\r\n  label: string\r\n  /** 값을 표시용 문자열로 변환 (예: combo value -> label) */\r\n  displayValue?: (value: unknown) => string\r\n}\r\n\r\nexport interface JFilterBarProps {\r\n  /** 필터바 타이틀 */\r\n  title?: string\r\n  /** 필터 접힘 상태 (v-model 지원) */\r\n  collapsed?: boolean\r\n  /** 접기/펼치기 가능 여부. false면 토글 버튼 숨김 & 필터 항상 표시 */\r\n  collapsible?: boolean\r\n  /** 필터 값 객체 (v-model:filterValues 지원) */\r\n  filterValues?: Record<string, unknown>\r\n  /** 필터 표시 설정 (label, displayValue 등) */\r\n  filterDisplay?: Record<string, FilterDisplayItem>\r\n  /** 초기화 버튼 표시 여부 */\r\n  showResetButton?: boolean\r\n  /** 조회 버튼 표시 여부 */\r\n  showSearchButton?: boolean\r\n  /** 초기화 버튼 텍스트 */\r\n  resetButtonText?: string\r\n  /** 조회 버튼 텍스트 */\r\n  searchButtonText?: string\r\n}\r\n\r\nconst props = withDefaults(defineProps<JFilterBarProps>(), {\r\n  collapsed: false,\r\n  collapsible: true,\r\n  filterValues: () => ({}),\r\n  filterDisplay: () => ({}),\r\n  showResetButton: false,\r\n  showSearchButton: false,\r\n  resetButtonText: '초기화',\r\n  searchButtonText: '조회',\r\n})\r\n\r\nconst emit = defineEmits<{\r\n  'update:collapsed': [value: boolean]\r\n  'update:filterValues': [value: Record<string, unknown>]\r\n  /** 조회 버튼 클릭 */\r\n  search: []\r\n  /** 초기화 버튼 클릭 */\r\n  reset: []\r\n}>()\r\n\r\nconst isExpanded = computed(() => {\r\n  if (!props.collapsible) return true\r\n  return !props.collapsed\r\n})\r\n\r\n/** 값이 비어있는지 확인 */\r\nfunction isEmpty(value: unknown): boolean {\r\n  if (value === null || value === undefined) return true\r\n  if (typeof value === 'string' && value.trim() === '') return true\r\n  if (Array.isArray(value) && value.length === 0) return true\r\n  return false\r\n}\r\n\r\n/** filterValues + filterDisplay 기반으로 활성 필터 목록 자동 생성 */\r\nconst activeFilters = computed<ActiveFilterItem[]>(() => {\r\n  const filters: ActiveFilterItem[] = []\r\n\r\n  for (const [key, config] of Object.entries(props.filterDisplay)) {\r\n    const value = props.filterValues[key]\r\n    if (isEmpty(value)) continue\r\n\r\n    const displayValue = config.displayValue ? config.displayValue(value) : String(value)\r\n    if (displayValue.trim() === '') continue\r\n\r\n    filters.push({\r\n      key,\r\n      label: config.label,\r\n      value: displayValue,\r\n    })\r\n  }\r\n\r\n  return filters\r\n})\r\n\r\nfunction toggleCollapsed() {\r\n  emit('update:collapsed', !props.collapsed)\r\n}\r\n\r\nfunction handleReset() {\r\n  // filterValues의 모든 값을 초기화\r\n  const resetValues: Record<string, unknown> = {}\r\n  for (const key of Object.keys(props.filterValues)) {\r\n    const currentValue = props.filterValues[key]\r\n    if (typeof currentValue === 'string') {\r\n      resetValues[key] = ''\r\n    } else if (Array.isArray(currentValue)) {\r\n      resetValues[key] = []\r\n    } else {\r\n      resetValues[key] = null\r\n    }\r\n  }\r\n  emit('update:filterValues', resetValues)\r\n  emit('reset')\r\n}\r\n\r\nfunction handleSearch() {\r\n  emit('search')\r\n}\r\n\r\nfunction removeFilter(key: string) {\r\n  // filterValues 업데이트 (해당 키 값을 초기화)\r\n  const newValues = { ...props.filterValues }\r\n  const currentValue = newValues[key]\r\n\r\n  // 타입에 따라 적절한 초기값으로 설정\r\n  if (typeof currentValue === 'string') {\r\n    newValues[key] = ''\r\n  } else if (Array.isArray(currentValue)) {\r\n    newValues[key] = []\r\n  } else {\r\n    newValues[key] = null\r\n  }\r\n\r\n  emit('update:filterValues', newValues)\r\n}\r\n</script>\r\n"],"names":["props","__props","emit","__emit","isExpanded","computed","isEmpty","value","activeFilters","filters","key","config","displayValue","toggleCollapsed","handleReset","resetValues","currentValue","handleSearch","removeFilter","newValues","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_createVNode","_unref","ChevronDown","_normalizeClass","_createBlock","JLabel","_hoisted_4","_Fragment","_renderList","filter","JBadge","_hoisted_5","_toDisplayString","_withModifiers","$event","X","_hoisted_7","_renderSlot","_ctx","JButton","_withDirectives","_hoisted_8"],"mappings":"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"}

package/components/organisms/JFilterBar.vue.js

@@ -1,133 +1,140 @@
-import { defineComponent as T, computed as g, createElementBlock as c, openBlock as o, createElementVNode as r, withDirectives as $, createCommentVNode as u, createVNode as v, unref as x, normalizeClass as j, Fragment as z, renderList as E, createBlock as d, withCtx as p, toDisplayString as f, withModifiers as F, renderSlot as V, createTextVNode as b, vShow as N } from "vue";
-import { ChevronDown as D, X as R } from "lucide-vue-next";
+import { defineComponent as $, computed as g, createElementBlock as u, openBlock as o, createElementVNode as n, withDirectives as D, createCommentVNode as i, createBlock as f, createVNode as x, unref as v, normalizeClass as T, Fragment as j, renderList as z, withCtx as p, toDisplayString as d, withModifiers as E, renderSlot as b, createTextVNode as V, vShow as F } from "vue";
+import { ChevronDown as N, X as R } from "lucide-vue-next";
 import O from "../atoms/JBadge.vue.js";
-import _ from "../atoms/JButton.vue.js";
-const J = { class: "w-full rounded-lg border bg-card text-card-foreground" }, L = { class: "flex items-center justify-between px-4 py-2" }, M = { class: "flex items-center gap-2" }, X = {
-  key: 1,
+import k from "../atoms/JButton.vue.js";
+import J from "../atoms/JLabel.vue.js";
+const L = { class: "w-full rounded-lg border bg-card text-card-foreground" }, M = { class: "flex items-center justify-between px-4 py-2" }, X = { class: "flex items-center gap-2" }, q = {
+  key: 2,
   class: "flex items-center gap-1 flex-wrap"
-}, q = { class: "text-muted-foreground" }, G = ["onClick"], H = { class: "flex items-center gap-2" }, I = { class: "px-4 pb-4" }, W = /* @__PURE__ */ T({
+}, G = { class: "text-muted-foreground" }, H = ["onClick"], I = { class: "flex items-center gap-2" }, K = { class: "px-4 pb-4" }, Z = /* @__PURE__ */ $({
   __name: "JFilterBar",
   props: {
+    title: {},
     collapsed: { type: Boolean, default: !1 },
     collapsible: { type: Boolean, default: !0 },
     filterValues: { default: () => ({}) },
-    filterConfig: { default: () => ({}) },
+    filterDisplay: { default: () => ({}) },
     showResetButton: { type: Boolean, default: !1 },
     showSearchButton: { type: Boolean, default: !1 },
     resetButtonText: { default: "초기화" },
     searchButtonText: { default: "조회" }
   },
-  emits: ["update:collapsed", "update:filterValues", "search"],
-  setup(n, { emit: w }) {
-    const l = n, a = w, m = g(() => l.collapsible ? !l.collapsed : !0);
+  emits: ["update:collapsed", "update:filterValues", "search", "reset"],
+  setup(l, { emit: w }) {
+    const r = l, a = w, m = g(() => r.collapsible ? !r.collapsed : !0);
     function B(e) {
       return !!(e == null || typeof e == "string" && e.trim() === "" || Array.isArray(e) && e.length === 0);
     }
-    const h = g(() => {
+    const y = g(() => {
       const e = [];
-      for (const [t, s] of Object.entries(l.filterConfig)) {
-        const i = l.filterValues[t];
-        if (B(i)) continue;
-        const y = s.displayValue ? s.displayValue(i) : String(i);
-        y.trim() !== "" && e.push({
+      for (const [t, s] of Object.entries(r.filterDisplay)) {
+        const c = r.filterValues[t];
+        if (B(c)) continue;
+        const h = s.displayValue ? s.displayValue(c) : String(c);
+        h.trim() !== "" && e.push({
           key: t,
           label: s.label,
-          value: y
+          value: h
         });
       }
       return e;
     });
-    function k() {
-      a("update:collapsed", !l.collapsed);
+    function _() {
+      a("update:collapsed", !r.collapsed);
     }
     function C() {
       const e = {};
-      for (const t of Object.keys(l.filterValues)) {
-        const s = l.filterValues[t];
+      for (const t of Object.keys(r.filterValues)) {
+        const s = r.filterValues[t];
         typeof s == "string" ? e[t] = "" : Array.isArray(s) ? e[t] = [] : e[t] = null;
       }
-      a("update:filterValues", e);
+      a("update:filterValues", e), a("reset");
     }
     function S() {
       a("search");
     }
     function A(e) {
-      const t = { ...l.filterValues }, s = t[e];
+      const t = { ...r.filterValues }, s = t[e];
       typeof s == "string" ? t[e] = "" : Array.isArray(s) ? t[e] = [] : t[e] = null, a("update:filterValues", t);
     }
-    return (e, t) => (o(), c("div", J, [
-      r("div", L, [
-        r("div", M, [
-          n.collapsible ? (o(), c("button", {
+    return (e, t) => (o(), u("div", L, [
+      n("div", M, [
+        n("div", X, [
+          l.collapsible ? (o(), u("button", {
             key: 0,
             type: "button",
             class: "flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors",
-            onClick: k
+            onClick: _
           }, [
-            v(x(D), {
-              class: j([
+            x(v(N), {
+              class: T([
                 "h-4 w-4 transition-transform",
                 m.value ? "rotate-0" : "-rotate-90"
               ])
             }, null, 8, ["class"])
-          ])) : u("", !0),
-          h.value.length > 0 ? (o(), c("div", X, [
-            (o(!0), c(z, null, E(h.value, (s) => (o(), d(O, {
+          ])) : i("", !0),
+          l.title ? (o(), f(J, {
+            key: 1,
+            text: l.title,
+            class: "text-sm font-semibold text-foreground"
+          }, null, 8, ["text"])) : i("", !0),
+          y.value.length > 0 ? (o(), u("div", q, [
+            (o(!0), u(j, null, z(y.value, (s) => (o(), f(O, {
               key: s.key,
               variant: "secondary",
               size: "sm",
               class: "flex items-center gap-1 cursor-default"
             }, {
               default: p(() => [
-                r("span", q, f(s.label) + ":", 1),
-                r("span", null, f(s.value), 1),
-                r("button", {
+                n("span", G, d(s.label) + ":", 1),
+                n("span", null, d(s.value), 1),
+                n("button", {
                   type: "button",
                   class: "ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors",
-                  onClick: F((i) => A(s.key), ["stop"])
+                  onClick: E((c) => A(s.key), ["stop"])
                 }, [
-                  v(x(R), { class: "h-3 w-3" })
-                ], 8, G)
+                  x(v(R), { class: "h-3 w-3" })
+                ], 8, H)
               ]),
               _: 2
             }, 1024))), 128))
-          ])) : u("", !0)
+          ])) : i("", !0)
         ]),
-        r("div", H, [
-          V(e.$slots, "actions"),
-          n.showResetButton ? (o(), d(_, {
+        n("div", I, [
+          b(e.$slots, "actions"),
+          l.showResetButton ? (o(), f(k, {
             key: 0,
-            variant: "outline",
+            variant: "secondary",
             size: "sm",
             onClick: C
           }, {
             default: p(() => [
-              b(f(n.resetButtonText), 1)
+              V(d(l.resetButtonText), 1)
             ]),
             _: 1
-          })) : u("", !0),
-          n.showSearchButton ? (o(), d(_, {
+          })) : i("", !0),
+          l.showSearchButton ? (o(), f(k, {
             key: 1,
             styletype: "primary",
             size: "sm",
             onClick: S
           }, {
             default: p(() => [
-              b(f(n.searchButtonText), 1)
+              V(d(l.searchButtonText), 1)
             ]),
             _: 1
-          })) : u("", !0)
+          })) : i("", !0)
         ])
       ]),
-      $(r("div", I, [
-        V(e.$slots, "filters")
+      D(n("div", K, [
+        b(e.$slots, "filters")
       ], 512), [
-        [N, m.value]
+        [F, m.value]
       ])
     ]));
   }
 });
 export {
-  W as default
+  Z as default
 };
 //# sourceMappingURL=JFilterBar.vue.js.map