@j-solution/components 1.6.1 → 1.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"JDynamicTabs.vue.cjs","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport type { \r\n  JDynamicTabsProps, \r\n  JDynamicTabsEmits, \r\n  JDynamicTabsMethods,\r\n  DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n *   tabsRef.value?.addTab({\r\n *     id: menuItem.id,\r\n *     label: menuItem.label,\r\n *     component: menuItem.component,\r\n *     closable: true\r\n *   })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n  initialTabs: () => [],\r\n  maxTabs: 0, // 0 = unlimited\r\n  emptyMessage: '탭을 추가해주세요.',\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n  props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n  if (!newTabs) {\r\n    tabs.value = []\r\n    return\r\n  }\r\n  \r\n  if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n    tabs.value = [...newTabs]\r\n    if (!activeTabId.value && newTabs[0]) {\r\n      activeTabId.value = newTabs[0].id\r\n    }\r\n  } else if (Array.isArray(newTabs)) {\r\n    // 빈 배열인 경우\r\n    tabs.value = []\r\n  } else {\r\n    // 배열이 아닌 경우\r\n    tabs.value = []\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n  // tabs.value가 배열이 아니면 초기화\r\n  if (!Array.isArray(tabs.value)) {\r\n    tabs.value = []\r\n  }\r\n  \r\n  // 이미 존재하는 탭인지 확인\r\n  const existingTab = tabs.value.find(t => t.id === tab.id)\r\n  \r\n  if (existingTab) {\r\n    // 이미 있으면 해당 탭 활성화\r\n    activateTab(tab.id)\r\n    return\r\n  }\r\n  \r\n  // 최대 탭 개수 체크\r\n  if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n    console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n    return\r\n  }\r\n  \r\n  // 새 탭 추가\r\n  tabs.value.push({\r\n    ...tab,\r\n    closable: tab.closable !== false, // 기본값 true\r\n  })\r\n  \r\n  // 새로 추가된 탭 활성화\r\n  activateTab(tab.id)\r\n  \r\n  // 이벤트 발생\r\n  emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  \r\n  const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n  \r\n  if (tabIndex === -1) return\r\n  \r\n  // 탭 제거\r\n  tabs.value.splice(tabIndex, 1)\r\n  \r\n  // 활성 탭 재설정\r\n  if (activeTabId.value === id) {\r\n    if (tabs.value.length > 0) {\r\n      // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n      const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n      activeTabId.value = tabs.value[newIndex]?.id || ''\r\n    } else {\r\n      activeTabId.value = ''\r\n    }\r\n  }\r\n  \r\n  // 이벤트 발생\r\n  emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const tab = tabs.value.find(t => t.id === id)\r\n  if (tab) {\r\n    activeTabId.value = id\r\n  }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return undefined\r\n  }\r\n  return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const closableTabs = tabs.value.filter(t => t.closable)\r\n  closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n  activeTabId.value = id\r\n  emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n  closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n  addTab,\r\n  closeTab,\r\n  activateTab,\r\n  findTab,\r\n  closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['w-full', 'h-full']\r\n  \r\n  if (props.className) {\r\n    classes.push(props.className)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n  const classes = []\r\n  \r\n  if (props.contentClassName) {\r\n    classes.push(props.contentClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"rootClasses\">\r\n    <!-- 탭이 있을 경우 / When there are tabs -->\r\n    <JTabs\r\n      v-if=\"hasTabs\"\r\n      :tabs=\"safeTabs\"\r\n      :active-tab-id=\"activeTabId\"\r\n      :styletype=\"props.styletype\"\r\n      :class=\"contentClasses\"\r\n      @tab-change=\"handleTabChange\"\r\n      @tab-close=\"handleTabClose\"\r\n    >\r\n      <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n      <template\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        #[`content-${tab.id}`]=\"slotProps\"\r\n      >\r\n        <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n      </template>\r\n    </JTabs>\r\n    \r\n    <!-- 탭이 없을 경우 / When there are no tabs -->\r\n    <div\r\n      v-else\r\n      class=\"flex items-center justify-center h-full w-full\"\r\n    >\r\n      <div class=\"text-center\">\r\n        <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n        <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n          메뉴를 클릭하여 탭을 추가하세요.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","classes","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":"2kBAqCA,MAAMA,EAAQC,EAORC,EAAOC,EAMPC,EAAOC,EAAAA,IAAkB,MAAM,QAAQL,EAAM,WAAW,EAAI,CAAC,GAAGA,EAAM,WAAW,EAAI,CAAA,CAAE,EAMvFM,EAAcD,EAAAA,IAClBL,EAAM,kBAAoB,MAAM,QAAQA,EAAM,WAAW,GAAKA,EAAM,YAAY,OAAS,EAAIA,EAAM,YAAY,CAAC,GAAG,GAAK,KAAO,EAAA,EAOjIO,EAAAA,MAAM,IAAMP,EAAM,YAAcQ,GAAY,CAC1C,GAAI,CAACA,EAAS,CACZJ,EAAK,MAAQ,CAAA,EACb,MACF,CAEI,MAAM,QAAQI,CAAO,GAAKA,EAAQ,OAAS,GAC7CJ,EAAK,MAAQ,CAAC,GAAGI,CAAO,EACpB,CAACF,EAAY,OAASE,EAAQ,CAAC,IACjCF,EAAY,MAAQE,EAAQ,CAAC,EAAE,KAExB,MAAM,QAAQA,CAAO,EAE9BJ,EAAK,MAAQ,CAAA,EAGbA,EAAK,MAAQ,CAAA,CAEjB,EAAG,CAAE,UAAW,GAAM,EAQtB,MAAMK,EAAUC,GAAoB,CASlC,GAPK,MAAM,QAAQN,EAAK,KAAK,IAC3BA,EAAK,MAAQ,CAAA,GAIKA,EAAK,MAAM,QAAUO,EAAE,KAAOD,EAAI,EAAE,EAEvC,CAEfE,EAAYF,EAAI,EAAE,EAClB,MACF,CAGA,GAAIV,EAAM,QAAU,GAAKI,EAAK,MAAM,QAAUJ,EAAM,QAAS,CAC3D,QAAQ,KAAK,MAAMA,EAAM,OAAO,iBAAiB,EACjD,MACF,CAGAI,EAAK,MAAM,KAAK,CACd,GAAGM,EACH,SAAUA,EAAI,WAAa,EAAA,CAC5B,EAGDE,EAAYF,EAAI,EAAE,EAGlBR,EAAK,SAAUQ,CAAG,CACpB,EAQMG,EAAYC,GAAe,CAC/B,GAAI,CAAC,MAAM,QAAQV,EAAK,KAAK,EAC3B,OAGF,MAAMW,EAAWX,EAAK,MAAM,UAAUO,GAAKA,EAAE,KAAOG,CAAE,EAEtD,GAAIC,IAAa,GAMjB,IAHAX,EAAK,MAAM,OAAOW,EAAU,CAAC,EAGzBT,EAAY,QAAUQ,EACxB,GAAIV,EAAK,MAAM,OAAS,EAAG,CAEzB,MAAMY,EAAW,KAAK,IAAID,EAAUX,EAAK,MAAM,OAAS,CAAC,EACzDE,EAAY,MAAQF,EAAK,MAAMY,CAAQ,GAAG,IAAM,EAClD,MACEV,EAAY,MAAQ,GAKxBJ,EAAK,WAAYY,CAAE,EACrB,EAQMF,EAAeE,GAAe,CAClC,GAAI,CAAC,MAAM,QAAQV,EAAK,KAAK,EAC3B,OAEUA,EAAK,MAAM,KAAKO,GAAKA,EAAE,KAAOG,CAAE,IAE1CR,EAAY,MAAQQ,EAExB,EAQMG,EAAWH,GAAuC,CACtD,GAAK,MAAM,QAAQV,EAAK,KAAK,EAG7B,OAAOA,EAAK,MAAM,KAAKO,GAAKA,EAAE,KAAOG,CAAE,CACzC,EAMMI,EAAe,IAAM,CACzB,GAAI,CAAC,MAAM,QAAQd,EAAK,KAAK,EAC3B,OAEmBA,EAAK,MAAM,OAAOO,GAAKA,EAAE,QAAQ,EACzC,QAAQD,GAAOG,EAASH,EAAI,EAAE,CAAC,CAC9C,EAMMS,EAAmBL,GAAe,CACtCR,EAAY,MAAQQ,EACpBZ,EAAK,YAAaY,CAAE,CACtB,EAMMM,EAAkBN,GAAe,CACrCD,EAASC,CAAE,CACb,EAMAO,EAAkC,CAChC,OAAAZ,EACA,SAAAI,EACA,YAAAD,EACA,QAAAK,EACA,aAAAC,CAAA,CACD,EAMD,MAAMI,EAAWC,EAAAA,SAAS,IACjB,MAAM,QAAQnB,EAAK,KAAK,EAAIA,EAAK,MAAQ,CAAA,CACjD,EAMKoB,EAAUD,EAAAA,SAAS,IAAMD,EAAS,MAAM,OAAS,CAAC,EAMlDG,EAAcF,EAAAA,SAAS,IAAM,CACjC,MAAMG,EAAU,CAAC,SAAU,QAAQ,EAEnC,OAAI1B,EAAM,WACR0B,EAAQ,KAAK1B,EAAM,SAAS,EAGvB0B,EAAQ,KAAK,GAAG,CACzB,CAAC,EAMKC,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,MAAMG,EAAU,CAAA,EAEhB,OAAI1B,EAAM,kBACR0B,EAAQ,KAAK1B,EAAM,gBAAgB,EAG9B0B,EAAQ,KAAK,GAAG,CACzB,CAAC,8BAICE,EAAAA,mBAiCM,MAAA,CAjCA,uBAAOH,EAAA,KAAW,CAAA,GAGdD,EAAA,qBADRK,EAAAA,YAiBQC,EAAAA,QAAA,OAfL,KAAMR,EAAA,MACN,gBAAehB,EAAA,MACf,UAAWN,EAAM,UACjB,uBAAO2B,EAAA,KAAc,EACrB,YAAYR,EACZ,WAAWC,CAAA,uBAIIW,EAAAA,WAAAT,EAAA,MAAPZ,KAEK,KAAA,WAAAA,EAAI,EAAE,GAElB,GAAAsB,EAAAA,QAFwBC,GAAS,CAEjCC,EAAAA,WAAuDC,EAAA,OAAA,WAA/BzB,EAAI,EAAE,yCAAYuB,CAAS,CAAA,CAAA,CAAA,6DAKvDG,EAAAA,UAAA,EAAAR,qBAUM,MAVNS,EAUM,CANJC,EAAAA,mBAKM,MALNC,EAKM,CAJJD,EAAAA,mBAA+D,IAA/DE,EAA+DC,EAAAA,gBAAnBxC,EAAA,YAAY,EAAA,CAAA,EACxDyC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAJ,EAAAA,mBAEI,IAAA,CAFD,MAAM,yCAAwC,uBAEjD,EAAA,EAAA"}
+{"version":3,"file":"JDynamicTabs.vue.cjs","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport { cn } from '@/lib/utils'\r\nimport type {\r\n  JDynamicTabsProps, \r\n  JDynamicTabsEmits, \r\n  JDynamicTabsMethods,\r\n  DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n *   tabsRef.value?.addTab({\r\n *     id: menuItem.id,\r\n *     label: menuItem.label,\r\n *     component: menuItem.component,\r\n *     closable: true\r\n *   })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n  initialTabs: () => [],\r\n  maxTabs: 0, // 0 = unlimited\r\n  emptyMessage: '탭을 추가해주세요.',\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n  props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n  if (!newTabs) {\r\n    tabs.value = []\r\n    return\r\n  }\r\n  \r\n  if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n    tabs.value = [...newTabs]\r\n    if (!activeTabId.value && newTabs[0]) {\r\n      activeTabId.value = newTabs[0].id\r\n    }\r\n  } else if (Array.isArray(newTabs)) {\r\n    // 빈 배열인 경우\r\n    tabs.value = []\r\n  } else {\r\n    // 배열이 아닌 경우\r\n    tabs.value = []\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n  // tabs.value가 배열이 아니면 초기화\r\n  if (!Array.isArray(tabs.value)) {\r\n    tabs.value = []\r\n  }\r\n  \r\n  // 이미 존재하는 탭인지 확인\r\n  const existingTab = tabs.value.find(t => t.id === tab.id)\r\n  \r\n  if (existingTab) {\r\n    // 이미 있으면 해당 탭 활성화\r\n    activateTab(tab.id)\r\n    return\r\n  }\r\n  \r\n  // 최대 탭 개수 체크\r\n  if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n    console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n    return\r\n  }\r\n  \r\n  // 새 탭 추가\r\n  tabs.value.push({\r\n    ...tab,\r\n    closable: tab.closable !== false, // 기본값 true\r\n  })\r\n  \r\n  // 새로 추가된 탭 활성화\r\n  activateTab(tab.id)\r\n  \r\n  // 이벤트 발생\r\n  emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  \r\n  const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n  \r\n  if (tabIndex === -1) return\r\n  \r\n  // 탭 제거\r\n  tabs.value.splice(tabIndex, 1)\r\n  \r\n  // 활성 탭 재설정\r\n  if (activeTabId.value === id) {\r\n    if (tabs.value.length > 0) {\r\n      // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n      const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n      activeTabId.value = tabs.value[newIndex]?.id || ''\r\n    } else {\r\n      activeTabId.value = ''\r\n    }\r\n  }\r\n  \r\n  // 이벤트 발생\r\n  emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const tab = tabs.value.find(t => t.id === id)\r\n  if (tab) {\r\n    activeTabId.value = id\r\n  }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return undefined\r\n  }\r\n  return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const closableTabs = tabs.value.filter(t => t.closable)\r\n  closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n  activeTabId.value = id\r\n  emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n  closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n  addTab,\r\n  closeTab,\r\n  activateTab,\r\n  findTab,\r\n  closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  return cn('w-full h-full', props.class)\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n  return props.contentClass || ''\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"rootClasses\">\r\n    <!-- 탭이 있을 경우 / When there are tabs -->\r\n    <JTabs\r\n      v-if=\"hasTabs\"\r\n      :tabs=\"safeTabs\"\r\n      :active-tab-id=\"activeTabId\"\r\n      :styletype=\"props.styletype\"\r\n      :class=\"contentClasses\"\r\n      @tab-change=\"handleTabChange\"\r\n      @tab-close=\"handleTabClose\"\r\n    >\r\n      <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n      <template\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        #[`content-${tab.id}`]=\"slotProps\"\r\n      >\r\n        <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n      </template>\r\n    </JTabs>\r\n    \r\n    <!-- 탭이 없을 경우 / When there are no tabs -->\r\n    <div\r\n      v-else\r\n      class=\"flex items-center justify-center h-full w-full\"\r\n    >\r\n      <div class=\"text-center\">\r\n        <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n        <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n          메뉴를 클릭하여 탭을 추가하세요.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","cn","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":"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"}

package/components/organisms/JDynamicTabs.vue.js

@@ -1,116 +1,111 @@
-import { defineComponent as $, ref as m, watch as j, computed as n, createElementBlock as b, openBlock as d, normalizeClass as y, createBlock as B, createSlots as E, renderList as M, withCtx as S, renderSlot as z, normalizeProps as D, guardReactiveProps as J, createElementVNode as f, toDisplayString as P } from "vue";
-import L from "../molecules/JTabs.vue.js";
-const R = {
+import { defineComponent as B, ref as b, watch as E, computed as i, createElementBlock as y, openBlock as d, normalizeClass as m, createBlock as M, createSlots as S, renderList as z, withCtx as D, renderSlot as J, normalizeProps as P, guardReactiveProps as j, createElementVNode as v, toDisplayString as L } from "vue";
+import N from "../molecules/JTabs.vue.js";
+import { cn as R } from "../../lib/utils.js";
+const V = {
   key: 1,
   class: "flex items-center justify-center h-full w-full"
-}, V = { class: "text-center" }, q = { class: "text-muted-foreground text-lg" }, G = /* @__PURE__ */ $({
+}, q = { class: "text-center" }, w = { class: "text-muted-foreground text-lg" }, K = /* @__PURE__ */ B({
   __name: "JDynamicTabs",
   props: {
     initialTabs: { default: () => [] },
     defaultActiveId: {},
     maxTabs: { default: 0 },
     emptyMessage: { default: "탭을 추가해주세요." },
-    className: {},
-    contentClassName: {},
+    class: {},
+    contentClass: {},
     styletype: { default: "default" }
   },
   emits: ["tabChange", "tabClose", "tabAdd"],
-  setup(v, { expose: p, emit: A }) {
-    const t = v, r = A, a = m(Array.isArray(t.initialTabs) ? [...t.initialTabs] : []), i = m(
-      t.defaultActiveId || (Array.isArray(t.initialTabs) && t.initialTabs.length > 0 ? t.initialTabs[0]?.id : "") || ""
+  setup(f, { expose: A, emit: p }) {
+    const s = f, n = p, a = b(Array.isArray(s.initialTabs) ? [...s.initialTabs] : []), r = b(
+      s.defaultActiveId || (Array.isArray(s.initialTabs) && s.initialTabs.length > 0 ? s.initialTabs[0]?.id : "") || ""
     );
-    j(() => t.initialTabs, (e) => {
+    E(() => s.initialTabs, (e) => {
       if (!e) {
         a.value = [];
         return;
       }
-      Array.isArray(e) && e.length > 0 ? (a.value = [...e], !i.value && e[0] && (i.value = e[0].id)) : Array.isArray(e) ? a.value = [] : a.value = [];
+      Array.isArray(e) && e.length > 0 ? (a.value = [...e], !r.value && e[0] && (r.value = e[0].id)) : Array.isArray(e) ? a.value = [] : a.value = [];
     }, { immediate: !0 });
-    const h = (e) => {
+    const T = (e) => {
       if (Array.isArray(a.value) || (a.value = []), a.value.find((l) => l.id === e.id)) {
         u(e.id);
         return;
       }
-      if (t.maxTabs > 0 && a.value.length >= t.maxTabs) {
-        console.warn(`최대 ${t.maxTabs}개의 탭만 열 수 있습니다.`);
+      if (s.maxTabs > 0 && a.value.length >= s.maxTabs) {
+        console.warn(`최대 ${s.maxTabs}개의 탭만 열 수 있습니다.`);
         return;
       }
       a.value.push({
         ...e,
         closable: e.closable !== !1
         // 기본값 true
-      }), u(e.id), r("tabAdd", e);
+      }), u(e.id), n("tabAdd", e);
     }, o = (e) => {
       if (!Array.isArray(a.value))
         return;
-      const s = a.value.findIndex((l) => l.id === e);
-      if (s !== -1) {
-        if (a.value.splice(s, 1), i.value === e)
+      const t = a.value.findIndex((l) => l.id === e);
+      if (t !== -1) {
+        if (a.value.splice(t, 1), r.value === e)
           if (a.value.length > 0) {
-            const l = Math.min(s, a.value.length - 1);
-            i.value = a.value[l]?.id || "";
+            const l = Math.min(t, a.value.length - 1);
+            r.value = a.value[l]?.id || "";
           } else
-            i.value = "";
-        r("tabClose", e);
+            r.value = "";
+        n("tabClose", e);
       }
     }, u = (e) => {
       if (!Array.isArray(a.value))
         return;
-      a.value.find((l) => l.id === e) && (i.value = e);
-    }, T = (e) => {
+      a.value.find((l) => l.id === e) && (r.value = e);
+    }, h = (e) => {
       if (Array.isArray(a.value))
-        return a.value.find((s) => s.id === e);
+        return a.value.find((t) => t.id === e);
     }, g = () => {
       if (!Array.isArray(a.value))
         return;
-      a.value.filter((s) => s.closable).forEach((s) => o(s.id));
+      a.value.filter((t) => t.closable).forEach((t) => o(t.id));
     }, x = (e) => {
-      i.value = e, r("tabChange", e);
+      r.value = e, n("tabChange", e);
     }, C = (e) => {
       o(e);
     };
-    p({
-      addTab: h,
+    A({
+      addTab: T,
       closeTab: o,
       activateTab: u,
-      findTab: T,
+      findTab: h,
       closeAllTabs: g
     });
-    const c = n(() => Array.isArray(a.value) ? a.value : []), _ = n(() => c.value.length > 0), N = n(() => {
-      const e = ["w-full", "h-full"];
-      return t.className && e.push(t.className), e.join(" ");
-    }), I = n(() => {
-      const e = [];
-      return t.contentClassName && e.push(t.contentClassName), e.join(" ");
-    });
-    return (e, s) => (d(), b("div", {
-      class: y(N.value)
+    const c = i(() => Array.isArray(a.value) ? a.value : []), _ = i(() => c.value.length > 0), I = i(() => R("w-full h-full", s.class)), k = i(() => s.contentClass || "");
+    return (e, t) => (d(), y("div", {
+      class: m(I.value)
     }, [
-      _.value ? (d(), B(L, {
+      _.value ? (d(), M(N, {
         key: 0,
         tabs: c.value,
-        "active-tab-id": i.value,
-        styletype: t.styletype,
-        class: y(I.value),
+        "active-tab-id": r.value,
+        styletype: s.styletype,
+        class: m(k.value),
         onTabChange: x,
         onTabClose: C
-      }, E({ _: 2 }, [
-        M(c.value, (l) => ({
+      }, S({ _: 2 }, [
+        z(c.value, (l) => ({
           name: `content-${l.id}`,
-          fn: S((k) => [
-            z(e.$slots, `content-${l.id}`, D(J(k)))
+          fn: D(($) => [
+            J(e.$slots, `content-${l.id}`, P(j($)))
           ])
         }))
-      ]), 1032, ["tabs", "active-tab-id", "styletype", "class"])) : (d(), b("div", R, [
-        f("div", V, [
-          f("p", q, P(v.emptyMessage), 1),
-          s[0] || (s[0] = f("p", { class: "text-muted-foreground/60 text-sm mt-2" }, " 메뉴를 클릭하여 탭을 추가하세요. ", -1))
+      ]), 1032, ["tabs", "active-tab-id", "styletype", "class"])) : (d(), y("div", V, [
+        v("div", q, [
+          v("p", w, L(f.emptyMessage), 1),
+          t[0] || (t[0] = v("p", { class: "text-muted-foreground/60 text-sm mt-2" }, " 메뉴를 클릭하여 탭을 추가하세요. ", -1))
         ])
       ]))
     ], 2));
   }
 });
 export {
-  G as default
+  K as default
 };
 //# sourceMappingURL=JDynamicTabs.vue.js.map

package/components/organisms/JDynamicTabs.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JDynamicTabs.vue.js","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport type { \r\n  JDynamicTabsProps, \r\n  JDynamicTabsEmits, \r\n  JDynamicTabsMethods,\r\n  DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n *   tabsRef.value?.addTab({\r\n *     id: menuItem.id,\r\n *     label: menuItem.label,\r\n *     component: menuItem.component,\r\n *     closable: true\r\n *   })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n  initialTabs: () => [],\r\n  maxTabs: 0, // 0 = unlimited\r\n  emptyMessage: '탭을 추가해주세요.',\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n  props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n  if (!newTabs) {\r\n    tabs.value = []\r\n    return\r\n  }\r\n  \r\n  if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n    tabs.value = [...newTabs]\r\n    if (!activeTabId.value && newTabs[0]) {\r\n      activeTabId.value = newTabs[0].id\r\n    }\r\n  } else if (Array.isArray(newTabs)) {\r\n    // 빈 배열인 경우\r\n    tabs.value = []\r\n  } else {\r\n    // 배열이 아닌 경우\r\n    tabs.value = []\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n  // tabs.value가 배열이 아니면 초기화\r\n  if (!Array.isArray(tabs.value)) {\r\n    tabs.value = []\r\n  }\r\n  \r\n  // 이미 존재하는 탭인지 확인\r\n  const existingTab = tabs.value.find(t => t.id === tab.id)\r\n  \r\n  if (existingTab) {\r\n    // 이미 있으면 해당 탭 활성화\r\n    activateTab(tab.id)\r\n    return\r\n  }\r\n  \r\n  // 최대 탭 개수 체크\r\n  if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n    console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n    return\r\n  }\r\n  \r\n  // 새 탭 추가\r\n  tabs.value.push({\r\n    ...tab,\r\n    closable: tab.closable !== false, // 기본값 true\r\n  })\r\n  \r\n  // 새로 추가된 탭 활성화\r\n  activateTab(tab.id)\r\n  \r\n  // 이벤트 발생\r\n  emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  \r\n  const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n  \r\n  if (tabIndex === -1) return\r\n  \r\n  // 탭 제거\r\n  tabs.value.splice(tabIndex, 1)\r\n  \r\n  // 활성 탭 재설정\r\n  if (activeTabId.value === id) {\r\n    if (tabs.value.length > 0) {\r\n      // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n      const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n      activeTabId.value = tabs.value[newIndex]?.id || ''\r\n    } else {\r\n      activeTabId.value = ''\r\n    }\r\n  }\r\n  \r\n  // 이벤트 발생\r\n  emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const tab = tabs.value.find(t => t.id === id)\r\n  if (tab) {\r\n    activeTabId.value = id\r\n  }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return undefined\r\n  }\r\n  return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const closableTabs = tabs.value.filter(t => t.closable)\r\n  closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n  activeTabId.value = id\r\n  emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n  closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n  addTab,\r\n  closeTab,\r\n  activateTab,\r\n  findTab,\r\n  closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['w-full', 'h-full']\r\n  \r\n  if (props.className) {\r\n    classes.push(props.className)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n  const classes = []\r\n  \r\n  if (props.contentClassName) {\r\n    classes.push(props.contentClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"rootClasses\">\r\n    <!-- 탭이 있을 경우 / When there are tabs -->\r\n    <JTabs\r\n      v-if=\"hasTabs\"\r\n      :tabs=\"safeTabs\"\r\n      :active-tab-id=\"activeTabId\"\r\n      :styletype=\"props.styletype\"\r\n      :class=\"contentClasses\"\r\n      @tab-change=\"handleTabChange\"\r\n      @tab-close=\"handleTabClose\"\r\n    >\r\n      <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n      <template\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        #[`content-${tab.id}`]=\"slotProps\"\r\n      >\r\n        <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n      </template>\r\n    </JTabs>\r\n    \r\n    <!-- 탭이 없을 경우 / When there are no tabs -->\r\n    <div\r\n      v-else\r\n      class=\"flex items-center justify-center h-full w-full\"\r\n    >\r\n      <div class=\"text-center\">\r\n        <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n        <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n          메뉴를 클릭하여 탭을 추가하세요.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","classes","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAORC,IAAOC,GAMPC,IAAOC,EAAkB,MAAM,QAAQL,EAAM,WAAW,IAAI,CAAC,GAAGA,EAAM,WAAW,IAAI,CAAA,CAAE,GAMvFM,IAAcD;AAAA,MAClBL,EAAM,oBAAoB,MAAM,QAAQA,EAAM,WAAW,KAAKA,EAAM,YAAY,SAAS,IAAIA,EAAM,YAAY,CAAC,GAAG,KAAK,OAAO;AAAA,IAAA;AAOjI,IAAAO,EAAM,MAAMP,EAAM,aAAa,CAACQ,MAAY;AAC1C,UAAI,CAACA,GAAS;AACZ,QAAAJ,EAAK,QAAQ,CAAA;AACb;AAAA,MACF;AAEA,MAAI,MAAM,QAAQI,CAAO,KAAKA,EAAQ,SAAS,KAC7CJ,EAAK,QAAQ,CAAC,GAAGI,CAAO,GACpB,CAACF,EAAY,SAASE,EAAQ,CAAC,MACjCF,EAAY,QAAQE,EAAQ,CAAC,EAAE,OAExB,MAAM,QAAQA,CAAO,IAE9BJ,EAAK,QAAQ,CAAA,IAGbA,EAAK,QAAQ,CAAA;AAAA,IAEjB,GAAG,EAAE,WAAW,IAAM;AAQtB,UAAMK,IAAS,CAACC,MAAoB;AASlC,UAPK,MAAM,QAAQN,EAAK,KAAK,MAC3BA,EAAK,QAAQ,CAAA,IAIKA,EAAK,MAAM,KAAK,OAAKO,EAAE,OAAOD,EAAI,EAAE,GAEvC;AAEf,QAAAE,EAAYF,EAAI,EAAE;AAClB;AAAA,MACF;AAGA,UAAIV,EAAM,UAAU,KAAKI,EAAK,MAAM,UAAUJ,EAAM,SAAS;AAC3D,gBAAQ,KAAK,MAAMA,EAAM,OAAO,iBAAiB;AACjD;AAAA,MACF;AAGA,MAAAI,EAAK,MAAM,KAAK;AAAA,QACd,GAAGM;AAAA,QACH,UAAUA,EAAI,aAAa;AAAA;AAAA,MAAA,CAC5B,GAGDE,EAAYF,EAAI,EAAE,GAGlBR,EAAK,UAAUQ,CAAG;AAAA,IACpB,GAQMG,IAAW,CAACC,MAAe;AAC/B,UAAI,CAAC,MAAM,QAAQV,EAAK,KAAK;AAC3B;AAGF,YAAMW,IAAWX,EAAK,MAAM,UAAU,CAAAO,MAAKA,EAAE,OAAOG,CAAE;AAEtD,UAAIC,MAAa,IAMjB;AAAA,YAHAX,EAAK,MAAM,OAAOW,GAAU,CAAC,GAGzBT,EAAY,UAAUQ;AACxB,cAAIV,EAAK,MAAM,SAAS,GAAG;AAEzB,kBAAMY,IAAW,KAAK,IAAID,GAAUX,EAAK,MAAM,SAAS,CAAC;AACzD,YAAAE,EAAY,QAAQF,EAAK,MAAMY,CAAQ,GAAG,MAAM;AAAA,UAClD;AACE,YAAAV,EAAY,QAAQ;AAKxB,QAAAJ,EAAK,YAAYY,CAAE;AAAA;AAAA,IACrB,GAQMF,IAAc,CAACE,MAAe;AAClC,UAAI,CAAC,MAAM,QAAQV,EAAK,KAAK;AAC3B;AAGF,MADYA,EAAK,MAAM,KAAK,CAAAO,MAAKA,EAAE,OAAOG,CAAE,MAE1CR,EAAY,QAAQQ;AAAA,IAExB,GAQMG,IAAU,CAACH,MAAuC;AACtD,UAAK,MAAM,QAAQV,EAAK,KAAK;AAG7B,eAAOA,EAAK,MAAM,KAAK,CAAAO,MAAKA,EAAE,OAAOG,CAAE;AAAA,IACzC,GAMMI,IAAe,MAAM;AACzB,UAAI,CAAC,MAAM,QAAQd,EAAK,KAAK;AAC3B;AAGF,MADqBA,EAAK,MAAM,OAAO,CAAAO,MAAKA,EAAE,QAAQ,EACzC,QAAQ,CAAAD,MAAOG,EAASH,EAAI,EAAE,CAAC;AAAA,IAC9C,GAMMS,IAAkB,CAACL,MAAe;AACtC,MAAAR,EAAY,QAAQQ,GACpBZ,EAAK,aAAaY,CAAE;AAAA,IACtB,GAMMM,IAAiB,CAACN,MAAe;AACrC,MAAAD,EAASC,CAAE;AAAA,IACb;AAMA,IAAAO,EAAkC;AAAA,MAChC,QAAAZ;AAAA,MACA,UAAAI;AAAA,MACA,aAAAD;AAAA,MACA,SAAAK;AAAA,MACA,cAAAC;AAAA,IAAA,CACD;AAMD,UAAMI,IAAWC,EAAS,MACjB,MAAM,QAAQnB,EAAK,KAAK,IAAIA,EAAK,QAAQ,CAAA,CACjD,GAMKoB,IAAUD,EAAS,MAAMD,EAAS,MAAM,SAAS,CAAC,GAMlDG,IAAcF,EAAS,MAAM;AACjC,YAAMG,IAAU,CAAC,UAAU,QAAQ;AAEnC,aAAI1B,EAAM,aACR0B,EAAQ,KAAK1B,EAAM,SAAS,GAGvB0B,EAAQ,KAAK,GAAG;AAAA,IACzB,CAAC,GAMKC,IAAiBJ,EAAS,MAAM;AACpC,YAAMG,IAAU,CAAA;AAEhB,aAAI1B,EAAM,oBACR0B,EAAQ,KAAK1B,EAAM,gBAAgB,GAG9B0B,EAAQ,KAAK,GAAG;AAAA,IACzB,CAAC;2BAICE,EAiCM,OAAA;AAAA,MAjCA,SAAOH,EAAA,KAAW;AAAA,IAAA;MAGdD,EAAA,cADRK,EAiBQC,GAAA;AAAA;QAfL,MAAMR,EAAA;AAAA,QACN,iBAAehB,EAAA;AAAA,QACf,WAAWN,EAAM;AAAA,QACjB,SAAO2B,EAAA,KAAc;AAAA,QACrB,aAAYR;AAAA,QACZ,YAAWC;AAAA,MAAA;QAIIW,EAAAT,EAAA,QAAPZ;UAEK,MAAA,WAAAA,EAAI,EAAE;AAAA,UAElB,IAAAsB,EAAA,CAFwBC,MAAS;AAAA,YAEjCC,EAAuDC,EAAA,QAAA,WAA/BzB,EAAI,EAAE,QAAYuB,CAAS,CAAA,CAAA;AAAA,UAAA;;qEAKvDG,EAAA,GAAAR,EAUM,OAVNS,GAUM;AAAA,QANJC,EAKM,OALNC,GAKM;AAAA,UAJJD,EAA+D,KAA/DE,GAA+DC,EAAnBxC,EAAA,YAAY,GAAA,CAAA;AAAA,UACxDyC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAJ,EAEI,KAAA,EAFD,OAAM,2CAAwC,wBAEjD,EAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"JDynamicTabs.vue.js","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport { cn } from '@/lib/utils'\r\nimport type {\r\n  JDynamicTabsProps, \r\n  JDynamicTabsEmits, \r\n  JDynamicTabsMethods,\r\n  DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n *   tabsRef.value?.addTab({\r\n *     id: menuItem.id,\r\n *     label: menuItem.label,\r\n *     component: menuItem.component,\r\n *     closable: true\r\n *   })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n  initialTabs: () => [],\r\n  maxTabs: 0, // 0 = unlimited\r\n  emptyMessage: '탭을 추가해주세요.',\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n  props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n  if (!newTabs) {\r\n    tabs.value = []\r\n    return\r\n  }\r\n  \r\n  if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n    tabs.value = [...newTabs]\r\n    if (!activeTabId.value && newTabs[0]) {\r\n      activeTabId.value = newTabs[0].id\r\n    }\r\n  } else if (Array.isArray(newTabs)) {\r\n    // 빈 배열인 경우\r\n    tabs.value = []\r\n  } else {\r\n    // 배열이 아닌 경우\r\n    tabs.value = []\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n  // tabs.value가 배열이 아니면 초기화\r\n  if (!Array.isArray(tabs.value)) {\r\n    tabs.value = []\r\n  }\r\n  \r\n  // 이미 존재하는 탭인지 확인\r\n  const existingTab = tabs.value.find(t => t.id === tab.id)\r\n  \r\n  if (existingTab) {\r\n    // 이미 있으면 해당 탭 활성화\r\n    activateTab(tab.id)\r\n    return\r\n  }\r\n  \r\n  // 최대 탭 개수 체크\r\n  if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n    console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n    return\r\n  }\r\n  \r\n  // 새 탭 추가\r\n  tabs.value.push({\r\n    ...tab,\r\n    closable: tab.closable !== false, // 기본값 true\r\n  })\r\n  \r\n  // 새로 추가된 탭 활성화\r\n  activateTab(tab.id)\r\n  \r\n  // 이벤트 발생\r\n  emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  \r\n  const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n  \r\n  if (tabIndex === -1) return\r\n  \r\n  // 탭 제거\r\n  tabs.value.splice(tabIndex, 1)\r\n  \r\n  // 활성 탭 재설정\r\n  if (activeTabId.value === id) {\r\n    if (tabs.value.length > 0) {\r\n      // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n      const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n      activeTabId.value = tabs.value[newIndex]?.id || ''\r\n    } else {\r\n      activeTabId.value = ''\r\n    }\r\n  }\r\n  \r\n  // 이벤트 발생\r\n  emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const tab = tabs.value.find(t => t.id === id)\r\n  if (tab) {\r\n    activeTabId.value = id\r\n  }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return undefined\r\n  }\r\n  return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const closableTabs = tabs.value.filter(t => t.closable)\r\n  closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n  activeTabId.value = id\r\n  emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n  closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n  addTab,\r\n  closeTab,\r\n  activateTab,\r\n  findTab,\r\n  closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  return cn('w-full h-full', props.class)\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n  return props.contentClass || ''\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"rootClasses\">\r\n    <!-- 탭이 있을 경우 / When there are tabs -->\r\n    <JTabs\r\n      v-if=\"hasTabs\"\r\n      :tabs=\"safeTabs\"\r\n      :active-tab-id=\"activeTabId\"\r\n      :styletype=\"props.styletype\"\r\n      :class=\"contentClasses\"\r\n      @tab-change=\"handleTabChange\"\r\n      @tab-close=\"handleTabClose\"\r\n    >\r\n      <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n      <template\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        #[`content-${tab.id}`]=\"slotProps\"\r\n      >\r\n        <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n      </template>\r\n    </JTabs>\r\n    \r\n    <!-- 탭이 없을 경우 / When there are no tabs -->\r\n    <div\r\n      v-else\r\n      class=\"flex items-center justify-center h-full w-full\"\r\n    >\r\n      <div class=\"text-center\">\r\n        <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n        <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n          메뉴를 클릭하여 탭을 추가하세요.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","cn","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,UAAMA,IAAQC,GAORC,IAAOC,GAMPC,IAAOC,EAAkB,MAAM,QAAQL,EAAM,WAAW,IAAI,CAAC,GAAGA,EAAM,WAAW,IAAI,CAAA,CAAE,GAMvFM,IAAcD;AAAA,MAClBL,EAAM,oBAAoB,MAAM,QAAQA,EAAM,WAAW,KAAKA,EAAM,YAAY,SAAS,IAAIA,EAAM,YAAY,CAAC,GAAG,KAAK,OAAO;AAAA,IAAA;AAOjI,IAAAO,EAAM,MAAMP,EAAM,aAAa,CAACQ,MAAY;AAC1C,UAAI,CAACA,GAAS;AACZ,QAAAJ,EAAK,QAAQ,CAAA;AACb;AAAA,MACF;AAEA,MAAI,MAAM,QAAQI,CAAO,KAAKA,EAAQ,SAAS,KAC7CJ,EAAK,QAAQ,CAAC,GAAGI,CAAO,GACpB,CAACF,EAAY,SAASE,EAAQ,CAAC,MACjCF,EAAY,QAAQE,EAAQ,CAAC,EAAE,OAExB,MAAM,QAAQA,CAAO,IAE9BJ,EAAK,QAAQ,CAAA,IAGbA,EAAK,QAAQ,CAAA;AAAA,IAEjB,GAAG,EAAE,WAAW,IAAM;AAQtB,UAAMK,IAAS,CAACC,MAAoB;AASlC,UAPK,MAAM,QAAQN,EAAK,KAAK,MAC3BA,EAAK,QAAQ,CAAA,IAIKA,EAAK,MAAM,KAAK,OAAKO,EAAE,OAAOD,EAAI,EAAE,GAEvC;AAEf,QAAAE,EAAYF,EAAI,EAAE;AAClB;AAAA,MACF;AAGA,UAAIV,EAAM,UAAU,KAAKI,EAAK,MAAM,UAAUJ,EAAM,SAAS;AAC3D,gBAAQ,KAAK,MAAMA,EAAM,OAAO,iBAAiB;AACjD;AAAA,MACF;AAGA,MAAAI,EAAK,MAAM,KAAK;AAAA,QACd,GAAGM;AAAA,QACH,UAAUA,EAAI,aAAa;AAAA;AAAA,MAAA,CAC5B,GAGDE,EAAYF,EAAI,EAAE,GAGlBR,EAAK,UAAUQ,CAAG;AAAA,IACpB,GAQMG,IAAW,CAACC,MAAe;AAC/B,UAAI,CAAC,MAAM,QAAQV,EAAK,KAAK;AAC3B;AAGF,YAAMW,IAAWX,EAAK,MAAM,UAAU,CAAAO,MAAKA,EAAE,OAAOG,CAAE;AAEtD,UAAIC,MAAa,IAMjB;AAAA,YAHAX,EAAK,MAAM,OAAOW,GAAU,CAAC,GAGzBT,EAAY,UAAUQ;AACxB,cAAIV,EAAK,MAAM,SAAS,GAAG;AAEzB,kBAAMY,IAAW,KAAK,IAAID,GAAUX,EAAK,MAAM,SAAS,CAAC;AACzD,YAAAE,EAAY,QAAQF,EAAK,MAAMY,CAAQ,GAAG,MAAM;AAAA,UAClD;AACE,YAAAV,EAAY,QAAQ;AAKxB,QAAAJ,EAAK,YAAYY,CAAE;AAAA;AAAA,IACrB,GAQMF,IAAc,CAACE,MAAe;AAClC,UAAI,CAAC,MAAM,QAAQV,EAAK,KAAK;AAC3B;AAGF,MADYA,EAAK,MAAM,KAAK,CAAAO,MAAKA,EAAE,OAAOG,CAAE,MAE1CR,EAAY,QAAQQ;AAAA,IAExB,GAQMG,IAAU,CAACH,MAAuC;AACtD,UAAK,MAAM,QAAQV,EAAK,KAAK;AAG7B,eAAOA,EAAK,MAAM,KAAK,CAAA,MAAK,EAAE,OAAOU,CAAE;AAAA,IACzC,GAMMI,IAAe,MAAM;AACzB,UAAI,CAAC,MAAM,QAAQd,EAAK,KAAK;AAC3B;AAGF,MADqBA,EAAK,MAAM,OAAO,CAAA,MAAK,EAAE,QAAQ,EACzC,QAAQ,CAAAM,MAAOG,EAASH,EAAI,EAAE,CAAC;AAAA,IAC9C,GAMMS,IAAkB,CAACL,MAAe;AACtC,MAAAR,EAAY,QAAQQ,GACpBZ,EAAK,aAAaY,CAAE;AAAA,IACtB,GAMMM,IAAiB,CAACN,MAAe;AACrC,MAAAD,EAASC,CAAE;AAAA,IACb;AAMA,IAAAO,EAAkC;AAAA,MAChC,QAAAZ;AAAA,MACA,UAAAI;AAAA,MACA,aAAAD;AAAA,MACA,SAAAK;AAAA,MACA,cAAAC;AAAA,IAAA,CACD;AAMD,UAAMI,IAAWC,EAAS,MACjB,MAAM,QAAQnB,EAAK,KAAK,IAAIA,EAAK,QAAQ,CAAA,CACjD,GAMKoB,IAAUD,EAAS,MAAMD,EAAS,MAAM,SAAS,CAAC,GAMlDG,IAAcF,EAAS,MACpBG,EAAG,iBAAiB1B,EAAM,KAAK,CACvC,GAMK2B,IAAiBJ,EAAS,MACvBvB,EAAM,gBAAgB,EAC9B;2BAIC4B,EAiCM,OAAA;AAAA,MAjCA,SAAOH,EAAA,KAAW;AAAA,IAAA;MAGdD,EAAA,cADRK,EAiBQC,GAAA;AAAA;QAfL,MAAMR,EAAA;AAAA,QACN,iBAAehB,EAAA;AAAA,QACf,WAAWN,EAAM;AAAA,QACjB,SAAO2B,EAAA,KAAc;AAAA,QACrB,aAAYR;AAAA,QACZ,YAAWC;AAAA,MAAA;QAIIW,EAAAT,EAAA,QAAPZ;UAEK,MAAA,WAAAA,EAAI,EAAE;AAAA,UAElB,IAAAsB,EAAA,CAFwBC,MAAS;AAAA,YAEjCC,EAAuDC,EAAA,QAAA,WAA/BzB,EAAI,EAAE,QAAYuB,CAAS,CAAA,CAAA;AAAA,UAAA;;qEAKvDG,EAAA,GAAAR,EAUM,OAVNS,GAUM;AAAA,QANJC,EAKM,OALNC,GAKM;AAAA,UAJJD,EAA+D,KAA/DE,GAA+DC,EAAnBxC,EAAA,YAAY,GAAA,CAAA;AAAA,UACxDyC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAJ,EAEI,KAAA,EAFD,OAAM,2CAAwC,wBAEjD,EAAA;AAAA,QAAA;;;;;"}

package/components/organisms/JFilterBar.vue.cjs

@@ -1,2 +1,7 @@
-"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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JFilterBar.vue2.cjs");;/* empty css                  */const t = (t_comp, t_opts) => {
+  const t_merged = t_comp.__vccOpts || t_comp;
+  for (const [t_key, t_val] of t_opts)
+    t_merged[t_key] = t_val;
+  return t_merged;
+};,r=t(e.default,[["__scopeId","data-v-88a88c37"]]);exports.default=r;
 //# 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        <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":"0/BAuHA,MAAMA,EAAQC,EAWRC,EAAOC,EASPC,EAAaC,EAAAA,SAAS,IACrBL,EAAM,YACJ,CAACA,EAAM,UADiB,EAEhC,EAGD,SAASM,EAAQC,EAAyB,CAGxC,MAFI,GAAAA,GAAU,MACV,OAAOA,GAAU,UAAYA,EAAM,KAAA,IAAW,IAC9C,MAAM,QAAQA,CAAK,GAAKA,EAAM,SAAW,EAE/C,CAGA,MAAMC,EAAgBH,EAAAA,SAA6B,IAAM,CACvD,MAAMI,EAA8B,CAAA,EAEpC,SAAW,CAACC,EAAKC,CAAM,IAAK,OAAO,QAAQX,EAAM,aAAa,EAAG,CAC/D,MAAMO,EAAQP,EAAM,aAAaU,CAAG,EACpC,GAAIJ,EAAQC,CAAK,EAAG,SAEpB,MAAMK,EAAeD,EAAO,aAAeA,EAAO,aAAaJ,CAAK,EAAI,OAAOA,CAAK,EAChFK,EAAa,KAAA,IAAW,IAE5BH,EAAQ,KAAK,CACX,IAAAC,EACA,MAAOC,EAAO,MACd,MAAOC,CAAA,CACR,CACH,CAEA,OAAOH,CACT,CAAC,EAED,SAASI,GAAkB,CACzBX,EAAK,mBAAoB,CAACF,EAAM,SAAS,CAC3C,CAEA,SAASc,GAAc,CAErB,MAAMC,EAAuC,CAAA,EAC7C,UAAWL,KAAO,OAAO,KAAKV,EAAM,YAAY,EAAG,CACjD,MAAMgB,EAAehB,EAAM,aAAaU,CAAG,EACvC,OAAOM,GAAiB,SAC1BD,EAAYL,CAAG,EAAI,GACV,MAAM,QAAQM,CAAY,EACnCD,EAAYL,CAAG,EAAI,CAAA,EAEnBK,EAAYL,CAAG,EAAI,IAEvB,CACAR,EAAK,sBAAuBa,CAAW,EACvCb,EAAK,OAAO,CACd,CAEA,SAASe,GAAe,CACtBf,EAAK,QAAQ,CACf,CAEA,SAASgB,EAAaR,EAAa,CAEjC,MAAMS,EAAY,CAAE,GAAGnB,EAAM,YAAA,EACvBgB,EAAeG,EAAUT,CAAG,EAG9B,OAAOM,GAAiB,SAC1BG,EAAUT,CAAG,EAAI,GACR,MAAM,QAAQM,CAAY,EACnCG,EAAUT,CAAG,EAAI,CAAA,EAEjBS,EAAUT,CAAG,EAAI,KAGnBR,EAAK,sBAAuBiB,CAAS,CACvC,eApNEC,YAAA,EAAAC,qBAqEM,MArENC,EAqEM,CAnEJC,EAAAA,mBA6DM,MA7DNC,EA6DM,CA5DJD,EAAAA,mBAwCM,MAxCNE,EAwCM,CAtCIxB,EAAA,2BADRoB,EAAAA,mBAYS,SAAA,OAVP,KAAK,SACL,MAAM,kHACL,QAAOR,CAAA,GAERa,cAKEC,EAAAA,MAAAC,EAAAA,WAAA,EAAA,CAJC,MAAKC,EAAAA,eAAA,gCAAkEzB,EAAA,MAAU,WAAA,YAAA,qDAQ9EH,EAAA,qBADR6B,EAAAA,YAIEC,EAAAA,QAAA,OAFC,KAAM9B,EAAA,MACP,MAAM,uCAAA,gDAGGO,EAAA,MAAc,OAAM,GAA/BY,EAAAA,YAAAC,EAAAA,mBAkBM,MAlBNW,EAkBM,kBAjBJX,EAAAA,mBAgBSY,EAAAA,SAAA,KAAAC,EAAAA,WAfU1B,EAAA,MAAV2B,kBADTL,EAAAA,YAgBSM,UAAA,CAdN,IAAKD,EAAO,IACb,QAAQ,YACR,KAAK,KACL,MAAM,wCAAA,qBAEN,IAA8D,CAA9DZ,qBAA8D,OAA9Dc,EAA8DC,EAAAA,gBAAvBH,EAAO,KAAK,EAAG,IAAC,CAAA,EACvDZ,EAAAA,mBAA+B,OAAA,KAAAe,EAAAA,gBAAtBH,EAAO,KAAK,EAAA,CAAA,EACrBZ,EAAAA,mBAMS,SAAA,CALP,KAAK,SACL,MAAM,gEACL,QAAKgB,EAAAA,cAAAC,GAAOtB,EAAaiB,EAAO,GAAG,EAAA,CAAA,MAAA,CAAA,CAAA,GAEpCT,EAAAA,YAAqBC,EAAAA,MAAAc,EAAAA,CAAA,EAAA,CAAlB,MAAM,UAAS,CAAA,6DAK1BlB,EAAAA,mBAkBM,MAlBNmB,EAkBM,CAjBJC,aAAuBC,EAAA,OAAA,SAAA,EAEf3C,EAAA,+BADR6B,EAAAA,YAOUe,EAAAA,QAAA,OALR,QAAQ,YACR,KAAK,KACJ,QAAO/B,CAAA,qBAER,IAAqB,qCAAlBb,EAAA,eAAe,EAAA,CAAA,CAAA,sCAGZA,EAAA,gCADR6B,EAAAA,YAOUe,EAAAA,QAAA,OALR,UAAU,UACV,KAAK,KACJ,QAAO5B,CAAA,qBAER,IAAsB,qCAAnBhB,EAAA,gBAAgB,EAAA,CAAA,CAAA,0CAMzB6C,iBAAAvB,EAAAA,mBAEM,MAFNwB,EAEM,CADJJ,aAAuBC,EAAA,OAAA,SAAA,CAAA,iBADZxC,EAAA,KAAU,CAAA"}
+{"version":3,"file":"JFilterBar.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/organisms/JFilterBar.vue.js

@@ -1,140 +1,13 @@
-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 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"
-}, 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: () => ({}) },
-    filterDisplay: { default: () => ({}) },
-    showResetButton: { type: Boolean, default: !1 },
-    showSearchButton: { type: Boolean, default: !1 },
-    resetButtonText: { default: "초기화" },
-    searchButtonText: { default: "조회" }
-  },
-  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 y = g(() => {
-      const e = [];
-      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: h
-        });
-      }
-      return e;
-    });
-    function _() {
-      a("update:collapsed", !r.collapsed);
-    }
-    function C() {
-      const e = {};
-      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("reset");
-    }
-    function S() {
-      a("search");
-    }
-    function A(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(), 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: _
-          }, [
-            x(v(N), {
-              class: T([
-                "h-4 w-4 transition-transform",
-                m.value ? "rotate-0" : "-rotate-90"
-              ])
-            }, null, 8, ["class"])
-          ])) : 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(() => [
-                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: E((c) => A(s.key), ["stop"])
-                }, [
-                  x(v(R), { class: "h-3 w-3" })
-                ], 8, H)
-              ]),
-              _: 2
-            }, 1024))), 128))
-          ])) : i("", !0)
-        ]),
-        n("div", I, [
-          b(e.$slots, "actions"),
-          l.showResetButton ? (o(), f(k, {
-            key: 0,
-            variant: "secondary",
-            size: "sm",
-            onClick: C
-          }, {
-            default: p(() => [
-              V(d(l.resetButtonText), 1)
-            ]),
-            _: 1
-          })) : i("", !0),
-          l.showSearchButton ? (o(), f(k, {
-            key: 1,
-            styletype: "primary",
-            size: "sm",
-            onClick: S
-          }, {
-            default: p(() => [
-              V(d(l.searchButtonText), 1)
-            ]),
-            _: 1
-          })) : i("", !0)
-        ])
-      ]),
-      D(n("div", K, [
-        b(e.$slots, "filters")
-      ], 512), [
-        [F, m.value]
-      ])
-    ]));
-  }
-});
+import o from "./JFilterBar.vue2.js";
+/* empty css                */
+const r = (r_comp, r_opts) => {
+  const r_merged = r_comp.__vccOpts || r_comp;
+  for (const [r_key, r_val] of r_opts)
+    r_merged[r_key] = r_val;
+  return r_merged;
+};
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-88a88c37"]]);
 export {
-  Z as default
+  p as default
 };
 //# sourceMappingURL=JFilterBar.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"JFilterBar.vue.js","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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"}
+{"version":3,"file":"JFilterBar.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/components/organisms/JFilterBar.vue2.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JFilterBar.vue.cjs");exports.default=e.default;
+"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"),k=require("../atoms/JLabel.vue.cjs"),v=require("../../lib/utils.cjs"),x={class:"flex items-center justify-between px-3 py-1.5"},b={class:"flex items-center gap-2"},_={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-3 pb-3"},S=e.defineComponent({__name:"JFilterBar",props:{class:{},title:{},collapsed:{type:Boolean,default:!0},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(s,{emit:p}){const o=s,n=p,c=e.computed(()=>o.collapsible?!o.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,r]of Object.entries(o.filterDisplay)){const a=o.filterValues[l];if(m(a))continue;const u=r.displayValue?r.displayValue(a):String(a);u.trim()!==""&&t.push({key:l,label:r.label,value:u})}return t});function y(){n("update:collapsed",!o.collapsed)}function h(){const t={};for(const l of Object.keys(o.filterValues)){const r=o.filterValues[l];typeof r=="string"?t[l]="":Array.isArray(r)?t[l]=[]:t[l]=null}n("update:filterValues",t),n("reset")}function V(){n("search")}function g(t){const l={...o.filterValues},r=l[t];typeof r=="string"?l[t]="":Array.isArray(r)?l[t]=[]:l[t]=null,n("update:filterValues",l)}return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(v.cn)("j-filter-bar w-full rounded-sm border bg-card text-card-foreground",o.class))},[e.createElementVNode("div",x,[e.createElementVNode("div",b,[s.collapsible?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"flex items-center justify-center h-6 w-6 rounded hover:bg-accent hover:text-accent-foreground transition-colors",onClick:y},[e.createVNode(e.unref(d.ChevronDown),{class:e.normalizeClass(["h-3.5 w-3.5 transition-transform",c.value?"rotate-0":"-rotate-90"])},null,8,["class"])])):e.createCommentVNode("",!0),s.title?(e.openBlock(),e.createBlock(k.default,{key:1,text:s.title,class:"text-sm font-semibold text-foreground"},null,8,["text"])):e.createCommentVNode("",!0),i.value.length>0?(e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,r=>(e.openBlock(),e.createBlock(B.default,{key:r.key,variant:"secondary",size:"sm",class:"flex items-center gap-1 cursor-default"},{default:e.withCtx(()=>[e.createElementVNode("span",w,e.toDisplayString(r.label)+":",1),e.createElementVNode("span",null,e.toDisplayString(r.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=>g(r.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",{},void 0,!0),s.showResetButton?(e.openBlock(),e.createBlock(f.default,{key:0,variant:"secondary",size:"sm",onClick:h},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.resetButtonText),1)]),_:1})):e.createCommentVNode("",!0),s.showSearchButton?(e.openBlock(),e.createBlock(f.default,{key:1,styletype:"primary",size:"sm",onClick:V},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.searchButtonText),1)]),_:1})):e.createCommentVNode("",!0)])]),e.withDirectives(e.createElementVNode("div",E,[e.renderSlot(t.$slots,"filters",{},void 0,!0)],512),[[e.vShow,c.value]])],2))}});exports.default=S;
 //# sourceMappingURL=JFilterBar.vue2.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"JFilterBar.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"JFilterBar.vue2.cjs","sources":["../../../../src/components/organisms/JFilterBar.vue"],"sourcesContent":["<template>\r\n  <div :class=\"cn('j-filter-bar w-full rounded-sm border bg-card text-card-foreground', props.class)\">\r\n    <!-- Row 1: toolbar -->\r\n    <div class=\"flex items-center justify-between px-3 py-1.5\">\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-6 w-6 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-3.5 w-3.5 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-3 pb-3\">\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\nimport { cn } from '@/lib/utils'\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  class?: string\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: true,\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\r\n<style scoped>\r\n/* ========================================\r\n   패턴 3: Tabs 아래 배치 시 연결 스타일\r\n   ======================================== */\r\n\r\n:deep([data-state=\"active\"]) > .j-filter-bar {\r\n  border-top: none;\r\n  border-top-left-radius: 0;\r\n  border-top-right-radius: 0;\r\n}\r\n\r\n:deep([role=\"tabpanel\"]) .j-filter-bar {\r\n  border-top: none;\r\n}\r\n</style>\r\n"],"names":["props","__props","emit","__emit","isExpanded","computed","isEmpty","value","activeFilters","filters","key","config","displayValue","toggleCollapsed","handleReset","resetValues","currentValue","handleSearch","removeFilter","newValues","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_hoisted_2","_createVNode","ChevronDown","_createBlock","JLabel","_openBlock","_hoisted_3","_Fragment","_renderList","filter","JBadge","_hoisted_4","_toDisplayString","_withModifiers","$event","X","_hoisted_6","_renderSlot","_ctx","JButton","_withDirectives","_hoisted_7"],"mappings":"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"}