@j-solution/components 1.6.1 → 1.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"JFormField.vue.js","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker } from '@/components/atoms'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n  'label',\n  'description',\n  'errorMsg',\n  'type',\n  'inlineLabel',\n  'orientation',\n  'labelAlign',\n  'labelWidth',\n  'radioDirection',\n] as const\n\nconst props = withDefaults(\n  defineProps<{\n    // ============ FormField 자체 props (레이아웃만) ============\n    /** 필드 레이블 */\n    label?: string\n    /** 필드 설명 (레이블 아래 표시) */\n    description?: string\n    /** 에러 메시지 */\n    errorMsg?: string\n    /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n    type?: ComponentType\n    /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n    inlineLabel?: string\n    /** 레이블과 컨트롤의 배치 방향 */\n    orientation?: 'vertical' | 'horizontal' | 'responsive'\n    /** 레이블 텍스트 정렬 */\n    labelAlign?: 'left' | 'middle' | 'right'\n    /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n    labelWidth?: string\n\n    // ============ 내부 컴포넌트로 전달할 공통 props ============\n    /** Input 요소의 id (label for와 연결) */\n    id?: string\n    /** v-model로 양방향 데이터 바인딩 */\n    modelValue?: any\n    /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n    placeholder?: string\n    /** 비활성화 상태 (전체) */\n    disabled?: boolean\n    /** 읽기 전용 상태 (Input/Textarea) */\n    readonly?: boolean\n    /** 필수 입력/선택 여부 (전체) */\n    required?: boolean\n    /** form 데이터 전송 시 키 이름 (전체) */\n    name?: string\n    /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n    styleType?: string\n\n    // ============ Input 전용 props ============\n    /** Input 타입 (text, email, password 등) */\n    inputType?: string\n\n\n    // ============ Select/Combobox/Radio 전용 props ============\n    /** 선택 가능한 항목 배열 */\n    options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n    \n    // ============ Select/Combobox 전용 props ============\n    /** 다중 선택 허용 여부 */\n    multiple?: boolean\n\n\n    // ============ Radio 전용 props ============\n    /** Radio 옵션 나열 방향 */\n    radioDirection?: 'horizontal' | 'vertical'\n  }>(),\n  {\n    type: 'input',\n    orientation: 'vertical',\n    labelAlign: 'left',\n    labelWidth: '8rem',\n    radioDirection: 'horizontal',\n  }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'change': [value: any]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n  const result: Record<string, any> = {}\n  const propsObj = props as Record<string, any>\n  \n  for (const key in propsObj) {\n    // FormField 자체 props는 제외\n    if (!FORM_FIELD_PROPS.includes(key as any)) {\n      result[key] = propsObj[key]\n    }\n  }\n  \n  // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n  if (props.inputType && props.type === 'input') {\n    result.type = props.inputType\n    delete result.inputType // inputType은 제거\n    \n    // placeholder가 없으면 inputType에 따라 기본값 설정\n    if (!props.placeholder) {\n      const defaultPlaceholders: Record<string, string> = {\n        'text': '텍스트를 입력하세요',\n        'email': '이메일을 입력하세요',\n        'password': '비밀번호를 입력하세요',\n        'tel': '전화번호를 입력하세요',\n        'url': 'URL을 입력하세요',\n        'number': '숫자를 입력하세요',\n        'search': '검색어를 입력하세요',\n        'date': '날짜를 선택하세요',\n        'time': '시간을 선택하세요',\n        'datetime-local': '날짜와 시간을 선택하세요',\n        'month': '월을 선택하세요',\n        'week': '주를 선택하세요',\n      }\n      \n      result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n    }\n  }\n  \n  // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n  if (props.radioDirection && props.type === 'radio') {\n    result.styletype = props.radioDirection\n    delete result.radioDirection // radioDirection은 제거\n  }\n  \n  return result\n})\n\n  // Built-in validation\n  const validateField = (currentValue?: any) => {\n    if (!props.required) return\n\n    internalError.value = ''\n\n    // 현재 값 또는 props.modelValue 사용\n    const value = currentValue !== undefined ? currentValue : props.modelValue\n\n    // Required 체크\n    if (props.type === 'checkbox' || props.type === 'switch') {\n      if (value !== 'Y') {\n        internalError.value = '필수 항목입니다.'\n      }\n    } else {\n      if (value === null || value === undefined || value === '') {\n        internalError.value = '필수 입력 항목입니다.'\n      }\n    }\n  }\n\n  // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n  const shouldValidateOnMount = computed(() => {\n    // Storybook에서 초기값이 있는 경우 validation 스킵\n    if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n      return false\n    }\n    return true\n  })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n  emit('update:modelValue', value)\n  \n  // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleChange = (value: any) => {\n  emit('change', value)\n  \n  // change 이벤트에서도 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n  const handleBlur = (event: FocusEvent) => {\n    // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n    if (shouldValidateOnMount.value) {\n      validateField()\n    }\n    emit('blur', event)\n  }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n  // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n  const mapHorizontal = { \n    left: 'justify-start',    // 레이블 영역의 왼쪽에 레이블 위치\n    middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n    right: 'justify-end'      // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n  }\n  // vertical일 때는 텍스트 정렬만 제어\n  const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n  return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n  switch (props.styleType) {\n    case 'sm': return 'form-density-sm'\n    case 'lg': return 'form-density-lg'\n    default:   return 'form-density-md'\n  }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n  const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n  \n  if (props.type === 'datepicker') {\n    return `${baseClass} max-w-xs`\n  }\n  \n  // Radio vertical일 때는 높이 제한 없음\n  if (props.type === 'radio' && props.radioDirection === 'vertical') {\n    return ''\n  }\n  \n  return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n  input: JInput,\n  textarea: JTextarea,\n  checkbox: JCheckbox,\n  switch: JSwitch,\n  combo: JCombo,\n  radio: JRadio,\n  searchCombo: JSearchCombo,\n  datepicker: JDatepicker,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n  return componentMap[props.type!] || JInput\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n  clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n  <div :class=\"['space-y-2 flex-1 min-w-0', densityClass]\">\n    <FieldGroup >\n      <Field :class=\"[\n          orientation === 'horizontal'\n            ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n            : 'space-y-1 gap-1'\n        ]\"\n        :style=\"orientation === 'horizontal' ? `--label-w:${labelWidth};` : ''\"\n      >\n        <!-- 메인 라벨 (필수표기 포함) -->\n        <FieldLabel \n          :for=\"id\" \n          :class=\"[\n            orientation === 'horizontal'\n              ? 'flex items-center h-[var(--ctl-h)] w-full'\n              : 'flex items-center',\n            labelAlignClass\n          ]\"\n        >\n          {{ label }}\n          <span v-if=\"required\" class=\"text-destructive ml-1\">*</span>\n        </FieldLabel>\n\n        <FieldContent \n          :class=\"[\n            orientation === 'horizontal'\n            ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n            : 'space-y-2 gap-0'\n          ]\"\n        >\n          <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n          <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n            <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n            <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n              <component\n                :is=\"resolvedComponent\"\n                v-bind=\"controlProps\"\n                @update:modelValue=\"handleUpdateModelValue\"\n                @change=\"handleChange\"\n                @focus=\"handleFocus\"\n                @blur=\"handleBlur\"\n              />\n              <FieldLabel\n                v-if=\"inlineLabel\"\n                :for=\"id\"\n                class=\"font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n              >\n                {{ inlineLabel }}\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n\n          <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n          <FieldGroup v-else-if=\"type === 'radio'\">\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n\n          <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n          <FieldGroup v-else>\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n          \n          <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n          <FieldContent v-if=\"description || finalError\">\n            <FieldDescription v-if=\"description\">\n              {{ description }}\n            </FieldDescription>\n            <FieldError v-if=\"finalError\">\n              {{ finalError }}\n            </FieldError>\n          </FieldContent>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  </div>\n</template>\n\n\n\n<style>\n/* ⬇⬇ 높이 토큰(밀도) — 프로젝트 전역/레이아웃에 한 번 정의해두고 재사용하세요 */\n.form-density-sm { --ctl-h: 2rem;    /* 32px */ }\n.form-density-md { --ctl-h: 2.25rem; /* 36px (shadcn 기본에 근접) */ }\n.form-density-lg { --ctl-h: 2.5rem;  /* 40px */ }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","resolvedComponent","__expose","_createElementBlock","_createVNode","_unref","FieldGroup","Field","_normalizeClass","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}
+{"version":3,"file":"JFormField.vue.js","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker } from '@/components/atoms'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n  'label',\n  'description',\n  'errorMsg',\n  'type',\n  'inlineLabel',\n  'orientation',\n  'labelAlign',\n  'labelWidth',\n  'radioDirection',\n] as const\n\nconst props = withDefaults(\n  defineProps<{\n    // ============ FormField 자체 props (레이아웃만) ============\n    /** 필드 레이블 */\n    label?: string\n    /** 필드 설명 (레이블 아래 표시) */\n    description?: string\n    /** 에러 메시지 */\n    errorMsg?: string\n    /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n    type?: ComponentType\n    /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n    inlineLabel?: string\n    /** 레이블과 컨트롤의 배치 방향 */\n    orientation?: 'vertical' | 'horizontal' | 'responsive'\n    /** 레이블 텍스트 정렬 */\n    labelAlign?: 'left' | 'middle' | 'right'\n    /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n    labelWidth?: string\n\n    // ============ 내부 컴포넌트로 전달할 공통 props ============\n    /** Input 요소의 id (label for와 연결) */\n    id?: string\n    /** v-model로 양방향 데이터 바인딩 */\n    modelValue?: any\n    /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n    placeholder?: string\n    /** 비활성화 상태 (전체) */\n    disabled?: boolean\n    /** 읽기 전용 상태 (Input/Textarea) */\n    readonly?: boolean\n    /** 필수 입력/선택 여부 (전체) */\n    required?: boolean\n    /** form 데이터 전송 시 키 이름 (전체) */\n    name?: string\n    /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n    styleType?: string\n\n    // ============ Input 전용 props ============\n    /** Input 타입 (text, email, password 등) */\n    inputType?: string\n\n\n    // ============ Select/Combobox/Radio 전용 props ============\n    /** 선택 가능한 항목 배열 */\n    options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n    \n    // ============ Select/Combobox 전용 props ============\n    /** 다중 선택 허용 여부 */\n    multiple?: boolean\n\n\n    // ============ Radio 전용 props ============\n    /** Radio 옵션 나열 방향 */\n    radioDirection?: 'horizontal' | 'vertical'\n  }>(),\n  {\n    type: 'input',\n    orientation: 'vertical',\n    labelAlign: 'left',\n    labelWidth: '8rem',\n    radioDirection: 'horizontal',\n  }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'change': [value: any]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n  const result: Record<string, any> = {}\n  const propsObj = props as Record<string, any>\n  \n  for (const key in propsObj) {\n    // FormField 자체 props는 제외\n    if (!FORM_FIELD_PROPS.includes(key as any)) {\n      result[key] = propsObj[key]\n    }\n  }\n  \n  // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n  if (props.inputType && props.type === 'input') {\n    result.type = props.inputType\n    delete result.inputType // inputType은 제거\n    \n    // placeholder가 없으면 inputType에 따라 기본값 설정\n    if (!props.placeholder) {\n      const defaultPlaceholders: Record<string, string> = {\n        'text': '텍스트를 입력하세요',\n        'email': '이메일을 입력하세요',\n        'password': '비밀번호를 입력하세요',\n        'tel': '전화번호를 입력하세요',\n        'url': 'URL을 입력하세요',\n        'number': '숫자를 입력하세요',\n        'search': '검색어를 입력하세요',\n        'date': '날짜를 선택하세요',\n        'time': '시간을 선택하세요',\n        'datetime-local': '날짜와 시간을 선택하세요',\n        'month': '월을 선택하세요',\n        'week': '주를 선택하세요',\n      }\n      \n      result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n    }\n  }\n  \n  // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n  if (props.radioDirection && props.type === 'radio') {\n    result.styletype = props.radioDirection\n    delete result.radioDirection // radioDirection은 제거\n  }\n  \n  return result\n})\n\n  // Built-in validation\n  const validateField = (currentValue?: any) => {\n    if (!props.required) return\n\n    internalError.value = ''\n\n    // 현재 값 또는 props.modelValue 사용\n    const value = currentValue !== undefined ? currentValue : props.modelValue\n\n    // Required 체크\n    if (props.type === 'checkbox' || props.type === 'switch') {\n      if (value !== 'Y') {\n        internalError.value = '필수 항목입니다.'\n      }\n    } else {\n      if (value === null || value === undefined || value === '') {\n        internalError.value = '필수 입력 항목입니다.'\n      }\n    }\n  }\n\n  // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n  const shouldValidateOnMount = computed(() => {\n    // Storybook에서 초기값이 있는 경우 validation 스킵\n    if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n      return false\n    }\n    return true\n  })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n  emit('update:modelValue', value)\n  \n  // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleChange = (value: any) => {\n  emit('change', value)\n  \n  // change 이벤트에서도 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n  const handleBlur = (event: FocusEvent) => {\n    // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n    if (shouldValidateOnMount.value) {\n      validateField()\n    }\n    emit('blur', event)\n  }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n  // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n  const mapHorizontal = { \n    left: 'justify-start',    // 레이블 영역의 왼쪽에 레이블 위치\n    middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n    right: 'justify-end'      // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n  }\n  // vertical일 때는 텍스트 정렬만 제어\n  const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n  return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n  switch (props.styleType) {\n    case 'md': return 'form-density-md'\n    case 'lg': return 'form-density-lg'\n    default:   return 'form-density-sm'  // 기본값 변경: md → sm (컴팩트 디자인)\n  }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n  const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n  \n  if (props.type === 'datepicker') {\n    return `${baseClass} max-w-xs`\n  }\n  \n  // Radio vertical일 때는 높이 제한 없음\n  if (props.type === 'radio' && props.radioDirection === 'vertical') {\n    return ''\n  }\n  \n  return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n  input: JInput,\n  textarea: JTextarea,\n  checkbox: JCheckbox,\n  switch: JSwitch,\n  combo: JCombo,\n  radio: JRadio,\n  searchCombo: JSearchCombo,\n  datepicker: JDatepicker,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n  return componentMap[props.type!] || JInput\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n  clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n  <div :class=\"['space-y-2 flex-1 min-w-0', densityClass]\">\n    <FieldGroup >\n      <Field :class=\"[\n          orientation === 'horizontal'\n            ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n            : 'space-y-1 gap-1'\n        ]\"\n        :style=\"orientation === 'horizontal' ? `--label-w:${labelWidth};` : ''\"\n      >\n        <!-- 메인 라벨 (필수표기 포함) -->\n        <FieldLabel \n          :for=\"id\" \n          :class=\"[\n            'text-xs',  // 컴팩트 디자인을 위해 폰트 크기 축소\n            orientation === 'horizontal'\n              ? 'flex items-center h-[var(--ctl-h)] w-full'\n              : 'flex items-center',\n            labelAlignClass\n          ]\"\n        >\n          {{ label }}\n          <span v-if=\"required\" class=\"text-destructive ml-1\">*</span>\n        </FieldLabel>\n\n        <FieldContent \n          :class=\"[\n            orientation === 'horizontal'\n            ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n            : 'space-y-2 gap-0'\n          ]\"\n        >\n          <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n          <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n            <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n            <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n              <component\n                :is=\"resolvedComponent\"\n                v-bind=\"controlProps\"\n                @update:modelValue=\"handleUpdateModelValue\"\n                @change=\"handleChange\"\n                @focus=\"handleFocus\"\n                @blur=\"handleBlur\"\n              />\n              <FieldLabel\n                v-if=\"inlineLabel\"\n                :for=\"id\"\n                class=\"text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n              >\n                {{ inlineLabel }}\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n\n          <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n          <FieldGroup v-else-if=\"type === 'radio'\">\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n\n          <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n          <FieldGroup v-else>\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n          \n          <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n          <FieldContent v-if=\"description || finalError\">\n            <FieldDescription v-if=\"description\">\n              {{ description }}\n            </FieldDescription>\n            <FieldError v-if=\"finalError\">\n              {{ finalError }}\n            </FieldError>\n          </FieldContent>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  </div>\n</template>\n\n\n\n<style>\n/* ⬇⬇ 높이 토큰(밀도) — 프로젝트 전역/레이아웃에 한 번 정의해두고 재사용하세요 */\n.form-density-sm { --ctl-h: 2rem;    /* 32px */ }\n.form-density-md { --ctl-h: 2.25rem; /* 36px (shadcn 기본에 근접) */ }\n.form-density-lg { --ctl-h: 2.5rem;  /* 40px */ }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","resolvedComponent","__expose","_createElementBlock","_createVNode","_unref","FieldGroup","Field","_normalizeClass","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}

package/components/molecules/JTabs.vue.cjs

@@ -3,5 +3,5 @@
   for (const [t_key, t_val] of t_opts)
     t_merged[t_key] = t_val;
   return t_merged;
-};,u=t(e.default,[["__scopeId","data-v-0b269232"]]);exports.default=u;
+};,u=t(e.default,[["__scopeId","data-v-587d4336"]]);exports.default=u;
 //# sourceMappingURL=JTabs.vue.cjs.map

package/components/molecules/JTabs.vue.js

@@ -6,7 +6,7 @@ const t = (t_comp, t_opts) => {
     t_merged[t_key] = t_val;
   return t_merged;
 };
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0b269232"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-587d4336"]]);
 export {
   p as default
 };

package/components/molecules/JTabs.vue2.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const k=require("lucide-vue-next"),h=require("../../lib/utils.cjs"),x=require("../atoms/JIcon.vue.cjs"),y=require("../shadcn/Tabs.vue.cjs"),T=require("../shadcn/TabsList.vue.cjs"),b=require("../shadcn/TabsTrigger.vue.cjs"),B=require("../shadcn/TabsContent.vue.cjs"),N={class:"flex-1 truncate"},S=["aria-label","onClick"],E={class:"flex-1 w-full overflow-auto"},P={key:1,class:"p-4"},q={class:"text-muted-foreground"},V=e.defineComponent({__name:"JTabs",props:{tabs:{},activeTabId:{},className:{},listClassName:{},styletype:{default:"default"}},emits:["tabChange","tabClose","update:activeTabId"],setup(p,{emit:f}){const a=p,r=f,c=e.computed(()=>Array.isArray(a.tabs)?a.tabs:[]),s=e.ref(a.activeTabId||(c.value.length>0?c.value[0]?.id:"")||"");let o=!1;e.watch(()=>a.activeTabId,t=>{t!==void 0&&t!==s.value&&(s.value=t)},{immediate:!0}),e.watch(c,t=>{!a.activeTabId&&t.length>0&&!t.find(n=>n.id===s.value)&&t[0]&&(s.value=t[0].id)});const v=t=>{if(o)return;const n=String(t);n!==s.value&&(o=!0,s.value=n,r("update:activeTabId",n),r("tabChange",n),e.nextTick(()=>{o=!1}))},_=t=>{o||t===s.value||(o=!0,s.value=t,r("update:activeTabId",t),r("tabChange",t),e.nextTick(()=>{o=!1}))},m=(t,n)=>{t.stopPropagation(),r("tabClose",n)},C=e.computed(()=>{const t=["flex","flex-col","w-full","h-full"];return a.className&&t.push(a.className),t.join(" ")}),i={default:{tabPaddingClass:"px-3 py-2",tabTextSizeClass:"text-sm",listPaddingClass:"p-2"},minimal:{tabPaddingClass:"px-2 py-1",tabTextSizeClass:"text-xs",listPaddingClass:"p-1"}},u=e.computed(()=>i[a.styletype]??i.default),g=e.computed(()=>{const t=["w-full","justify-start",u.value.listPaddingClass];return a.listClassName&&t.push(a.listClassName),t.join(" ")});return(t,n)=>(e.openBlock(),e.createBlock(e.unref(y.default),{"model-value":s.value,"onUpdate:modelValue":v,orientation:"horizontal",class:e.normalizeClass(C.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(T.default),{class:e.normalizeClass(g.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(b.default),{key:l.id,value:l.id,onClick:d=>_(l.id),class:e.normalizeClass(e.unref(h.cn)("!flex !items-center !gap-2",u.value.tabPaddingClass,u.value.tabTextSizeClass))},{default:e.withCtx(()=>[l.icon?(e.openBlock(),e.createBlock(x.default,{key:0,name:l.icon,size:"sm",class:"flex-shrink-0"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",N,e.toDisplayString(l.label),1),l.closable?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center","aria-label":`${l.label} 탭 닫기`,onClick:d=>m(d,l.id)},[e.createVNode(e.unref(k.X),{class:"h-3 w-3"})],8,S)):e.createCommentVNode("",!0)]),_:2},1032,["value","onClick","class"]))),128))]),_:1},8,["class"]),e.createElementVNode("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(B.default),{key:`content-${l.id}`,value:l.id,class:"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,`content-${l.id}`,{tab:l},()=>[l.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.component),e.mergeProps({key:0,ref_for:!0},l.props||{}),null,16)):(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",q,e.toDisplayString(l.label)+" 콘텐츠",1)]))],!0)]),_:2},1032,["value"]))),128))])]),_:3},8,["model-value","class"]))}});exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const k=require("lucide-vue-next"),h=require("../../lib/utils.cjs"),x=require("../atoms/JIcon.vue.cjs"),y=require("../shadcn/Tabs.vue.cjs"),T=require("../shadcn/TabsList.vue.cjs"),b=require("../shadcn/TabsTrigger.vue.cjs"),B=require("../shadcn/TabsContent.vue.cjs"),N={class:"flex-1 truncate"},S=["aria-label","onClick"],E={class:"flex-1 w-full overflow-auto"},P={key:1,class:"p-4"},q={class:"text-muted-foreground"},V=e.defineComponent({__name:"JTabs",props:{tabs:{},activeTabId:{},className:{},listClassName:{},styletype:{default:"default"}},emits:["tabChange","tabClose","update:activeTabId"],setup(p,{emit:f}){const a=p,r=f,c=e.computed(()=>Array.isArray(a.tabs)?a.tabs:[]),s=e.ref(a.activeTabId||(c.value.length>0?c.value[0]?.id:"")||"");let o=!1;e.watch(()=>a.activeTabId,t=>{t!==void 0&&t!==s.value&&(s.value=t)},{immediate:!0}),e.watch(c,t=>{!a.activeTabId&&t.length>0&&!t.find(n=>n.id===s.value)&&t[0]&&(s.value=t[0].id)});const v=t=>{if(o)return;const n=String(t);n!==s.value&&(o=!0,s.value=n,r("update:activeTabId",n),r("tabChange",n),e.nextTick(()=>{o=!1}))},_=t=>{o||t===s.value||(o=!0,s.value=t,r("update:activeTabId",t),r("tabChange",t),e.nextTick(()=>{o=!1}))},m=(t,n)=>{t.stopPropagation(),r("tabClose",n)},C=e.computed(()=>{const t=["flex","flex-col","w-full","h-full"];return a.className&&t.push(a.className),t.join(" ")}),i={default:{tabPaddingClass:"px-2.5 py-1",tabTextSizeClass:"text-xs",listPaddingClass:"p-0.5"},minimal:{tabPaddingClass:"px-2 py-0.5",tabTextSizeClass:"text-xs",listPaddingClass:"p-0.5"}},u=e.computed(()=>i[a.styletype]??i.default),g=e.computed(()=>{const t=["w-full","justify-start",u.value.listPaddingClass];return a.listClassName&&t.push(a.listClassName),t.join(" ")});return(t,n)=>(e.openBlock(),e.createBlock(e.unref(y.default),{"model-value":s.value,"onUpdate:modelValue":v,orientation:"horizontal",class:e.normalizeClass(C.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(T.default),{class:e.normalizeClass(g.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(b.default),{key:l.id,value:l.id,onClick:d=>_(l.id),class:e.normalizeClass(e.unref(h.cn)("!flex !items-center !gap-2",u.value.tabPaddingClass,u.value.tabTextSizeClass))},{default:e.withCtx(()=>[l.icon?(e.openBlock(),e.createBlock(x.default,{key:0,name:l.icon,size:"sm",class:"flex-shrink-0"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",N,e.toDisplayString(l.label),1),l.closable?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center","aria-label":`${l.label} 탭 닫기`,onClick:d=>m(d,l.id)},[e.createVNode(e.unref(k.X),{class:"h-2.5 w-2.5"})],8,S)):e.createCommentVNode("",!0)]),_:2},1032,["value","onClick","class"]))),128))]),_:1},8,["class"]),e.createElementVNode("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(B.default),{key:`content-${l.id}`,value:l.id,class:"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,`content-${l.id}`,{tab:l},()=>[l.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.component),e.mergeProps({key:0,ref_for:!0},l.props||{}),null,16)):(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",q,e.toDisplayString(l.label)+" 콘텐츠",1)]))],!0)]),_:2},1032,["value"]))),128))])]),_:3},8,["model-value","class"]))}});exports.default=V;
 //# sourceMappingURL=JTabs.vue2.cjs.map

package/components/molecules/JTabs.vue2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JTabs.vue2.cjs","sources":["../../../../src/components/molecules/JTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/shadcn'\r\nimport type { JTabsProps, JTabsEmits } from '@/types/dynamic-tabs.types'\r\nimport { X } from 'lucide-vue-next'\r\nimport { cn } from '@/lib/utils'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\n\r\n/**\r\n * JTabs - 기본 탭 UI 컴포넌트 (molecules)\r\n * Basic Tabs UI Component\r\n * \r\n * @description\r\n * 정적인 탭 목록을 렌더링하는 기본 탭 컴포넌트입니다.\r\n * 닫기 버튼, 아이콘 등을 지원합니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JTabs \r\n *   :tabs=\"tabs\"\r\n *   :active-tab-id=\"activeId\"\r\n *   @tab-change=\"handleChange\"\r\n *   @tab-close=\"handleClose\"\r\n * />\r\n * ```\r\n */\r\n\r\ntype StyleType = 'default' | 'minimal'\r\n\r\nconst props = withDefaults(defineProps<JTabsProps>(), {\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JTabsEmits>()\r\n\r\n/**\r\n * 안전한 tabs 배열 (undefined/null 체크)\r\n * Safe tabs array (undefined/null check)\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(props.tabs) ? props.tabs : []\r\n})\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst internalActiveId = ref<string>(\r\n  props.activeTabId || (safeTabs.value.length > 0 ? safeTabs.value[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * 이벤트 처리 중 플래그 (중복 이벤트 방지)\r\n * Flag to prevent duplicate events\r\n */\r\nlet isHandlingEvent = false\r\n\r\n/**\r\n * props.activeTabId가 변경되면 내부 상태 동기화\r\n * Sync internal state when props.activeTabId changes\r\n */\r\nwatch(() => props.activeTabId, (newValue) => {\r\n  if (newValue !== undefined && newValue !== internalActiveId.value) {\r\n    internalActiveId.value = newValue\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * props.tabs가 변경되고 activeTabId가 없으면 첫 번째 탭 활성화\r\n * Activate first tab when tabs change and no activeTabId\r\n */\r\nwatch(safeTabs, (newTabs) => {\r\n  if (!props.activeTabId && newTabs.length > 0 && !newTabs.find(t => t.id === internalActiveId.value) && newTabs[0]) {\r\n    internalActiveId.value = newTabs[0].id\r\n  }\r\n})\r\n\r\n/**\r\n * 탭 값 변경 핸들러 (reka-ui TabsRoot에서 직접 호출됨)\r\n * Tab value change handler (called directly from reka-ui TabsRoot)\r\n */\r\nconst handleTabValueChange = (value: string | number) => {\r\n  if (isHandlingEvent) return\r\n  \r\n  const stringValue = String(value)\r\n  if (stringValue !== internalActiveId.value) {\r\n    isHandlingEvent = true\r\n    internalActiveId.value = stringValue\r\n    emit('update:activeTabId', stringValue)\r\n    emit('tabChange', stringValue)\r\n    // 다음 tick에서 플래그 리셋\r\n    nextTick(() => {\r\n      isHandlingEvent = false\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 탭 클릭 핸들러 (백업 방안 - reka-ui 이벤트가 작동하지 않을 경우)\r\n * Tab click handler (backup - in case reka-ui events don't work)\r\n */\r\nconst handleTabClick = (tabId: string) => {\r\n  // reka-ui 이벤트가 작동하지 않을 경우 직접 처리\r\n  // handleTabValueChange가 이미 처리했으면 중복 방지\r\n  if (isHandlingEvent || tabId === internalActiveId.value) return\r\n  \r\n  isHandlingEvent = true\r\n  internalActiveId.value = tabId\r\n  emit('update:activeTabId', tabId)\r\n  emit('tabChange', tabId)\r\n  // 다음 tick에서 플래그 리셋\r\n  nextTick(() => {\r\n    isHandlingEvent = false\r\n  })\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleCloseTab = (e: Event, tabId: string) => {\r\n  e.stopPropagation() // 탭 클릭 이벤트 전파 방지\r\n  emit('tabClose', tabId)\r\n}\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['flex', 'flex-col', '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 */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  tabPaddingClass: string\r\n  tabTextSizeClass: string\r\n  listPaddingClass: string\r\n}> = {\r\n  default: {\r\n    tabPaddingClass: 'px-3 py-2',\r\n    tabTextSizeClass: 'text-sm',\r\n    listPaddingClass: 'p-2',\r\n  },\r\n  minimal: {\r\n    tabPaddingClass: 'px-2 py-1',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-1',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 탭 리스트 클래스\r\n * Tabs list classes\r\n */\r\nconst listClasses = computed(() => {\r\n  const classes = ['w-full', 'justify-start', preset.value.listPaddingClass]\r\n  \r\n  if (props.listClassName) {\r\n    classes.push(props.listClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Tabs\r\n    :model-value=\"internalActiveId\"\r\n    @update:model-value=\"handleTabValueChange\"\r\n    orientation=\"horizontal\"\r\n    :class=\"rootClasses\"\r\n  >\r\n    <!-- 탭 헤더 영역 / Tab Headers -->\r\n    <TabsList :class=\"listClasses\">\r\n      <TabsTrigger\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        :value=\"tab.id\"\r\n        @click=\"handleTabClick(tab.id)\"\r\n        :class=\"cn('!flex !items-center !gap-2', preset.tabPaddingClass, preset.tabTextSizeClass)\"\r\n      >\r\n        <!-- 탭 아이콘 (있을 경우) / Tab Icon -->\r\n        <JIcon \r\n          v-if=\"tab.icon\" \r\n          :name=\"tab.icon\" \r\n          size=\"sm\"\r\n          class=\"flex-shrink-0\"\r\n        />\r\n        \r\n        <!-- 탭 레이블 / Tab Label -->\r\n        <span class=\"flex-1 truncate\">{{ tab.label }}</span>\r\n        \r\n        <!-- 닫기 버튼 / Close Button (항상 표시) -->\r\n        <button\r\n          v-if=\"tab.closable\"\r\n          type=\"button\"\r\n          class=\"flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center\"\r\n          :aria-label=\"`${tab.label} 탭 닫기`\"\r\n          @click=\"(e) => handleCloseTab(e, tab.id)\"\r\n        >\r\n          <X class=\"h-3 w-3\" />\r\n        </button>\r\n      </TabsTrigger>\r\n    </TabsList>\r\n\r\n    <!-- 탭 콘텐츠 영역 / Tab Contents -->\r\n    <div class=\"flex-1 w-full overflow-auto\">\r\n      <TabsContent\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"`content-${tab.id}`\"\r\n        :value=\"tab.id\"\r\n        class=\"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col\"\r\n      >\r\n        <!-- 슬롯 우선 / Slot First -->\r\n        <slot :name=\"`content-${tab.id}`\" :tab=\"tab\">\r\n          <!-- 동적 컴포넌트 렌더링 / Dynamic Component Rendering -->\r\n          <component\r\n            v-if=\"tab.component\"\r\n            :is=\"tab.component\"\r\n            v-bind=\"tab.props || {}\"\r\n          />\r\n          \r\n          <!-- 기본 콘텐츠 / Default Content -->\r\n          <div v-else class=\"p-4\">\r\n            <p class=\"text-muted-foreground\">{{ tab.label }} 콘텐츠</p>\r\n          </div>\r\n        </slot>\r\n      </TabsContent>\r\n    </div>\r\n  </Tabs>\r\n</template>\r\n\r\n<style scoped>\r\n/**\r\n * 탭 리스트 스타일 - 하단 보더 제거\r\n * Tab list styles without bottom border\r\n */\r\n:deep([role=\"tablist\"]) {\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\r\n  background: hsl(var(--background));\r\n  padding: 0 0.5rem;\r\n  padding-top: 0.5rem;\r\n  gap: 0.25rem;\r\n  border-bottom: none;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar) {\r\n  height: 6px;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-track) {\r\n  background: transparent;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 다크모드에서 스크롤바 스타일\r\n * Scrollbar styles in dark mode\r\n */\r\n.dark :deep([role=\"tablist\"]::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]) {\r\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\r\n}\r\n\r\n/**\r\n * 탭 버튼 스타일 - 명확한 구분\r\n * Tab button styles - clear distinction\r\n */\r\n:deep([role=\"tab\"]) {\r\n  position: relative;\r\n  padding: 0.625rem 1rem;\r\n  border-radius: 0.375rem 0.375rem 0 0;\r\n  transition: all 0.2s ease;\r\n  border: 1px solid transparent;\r\n  border-bottom: none;\r\n}\r\n\r\n/**\r\n * Minimal 스타일 탭 버튼 - JSidebarAdvanced와 높이 맞춤\r\n */\r\n:deep([role=\"tablist\"][class*=\"p-1\"] [role=\"tab\"]) {\r\n  padding: 0.625rem 0.5rem;\r\n}\r\n\r\n/**\r\n * 비활성 탭 - 명확하게 구분\r\n * Inactive tabs - clear distinction\r\n */\r\n:deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--muted) / 0.2);\r\n  color: hsl(var(--muted-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.4);\r\n  border-left: 1px solid hsl(var(--border) / 0.4);\r\n  border-right: 1px solid hsl(var(--border) / 0.4);\r\n}\r\n\r\n:deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted) / 0.4);\r\n  color: hsl(var(--foreground));\r\n}\r\n\r\n/**\r\n * 다크모드에서 비활성 탭 - 다크 배경색 사용\r\n * Inactive tabs in dark mode - use dark background\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--secondary));\r\n  color: hsl(var(--secondary-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.5);\r\n  border-left: 1px solid hsl(var(--border) / 0.5);\r\n  border-right: 1px solid hsl(var(--border) / 0.5);\r\n}\r\n\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted));\r\n  color: hsl(var(--muted-foreground));\r\n}\r\n\r\n/**\r\n * 활성 탭 - 강조된 스타일\r\n * Active tab - emphasized style\r\n */\r\n:deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--background));\r\n  color: hsl(var(--foreground));\r\n  font-weight: 500;\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n  z-index: 1;\r\n}\r\n\r\n/**\r\n * 다크모드에서 활성 탭 - 배경색 명확히 구분\r\n * Active tab in dark mode - clear background distinction\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--card));\r\n  color: hsl(var(--card-foreground));\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 콘텐츠 영역에 상단 보더 추가\r\n * Add top border to content area\r\n */\r\n:deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border));\r\n}\r\n\r\n/**\r\n * 다크모드에서 콘텐츠 영역 보더 - 더 부드러운 구분\r\n * Content area border in dark mode - subtler separation\r\n */\r\n.dark :deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border) / 0.6);\r\n}\r\n</style>\r\n\r\n"],"names":["props","__props","emit","__emit","safeTabs","computed","internalActiveId","ref","isHandlingEvent","watch","newValue","newTabs","t","handleTabValueChange","value","stringValue","nextTick","handleTabClick","tabId","handleCloseTab","e","rootClasses","classes","STYLE_PRESETS","preset","listClasses","_createBlock","_unref","Tabs","_createVNode","TabsList","_createElementBlock","_Fragment","_renderList","tab","TabsTrigger","$event","_normalizeClass","JIcon","_createElementVNode","_hoisted_1","_toDisplayString","X","_hoisted_3","TabsContent","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent","_mergeProps","_hoisted_4","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"JTabs.vue2.cjs","sources":["../../../../src/components/molecules/JTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/shadcn'\r\nimport type { JTabsProps, JTabsEmits } from '@/types/dynamic-tabs.types'\r\nimport { X } from 'lucide-vue-next'\r\nimport { cn } from '@/lib/utils'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\n\r\n/**\r\n * JTabs - 기본 탭 UI 컴포넌트 (molecules)\r\n * Basic Tabs UI Component\r\n * \r\n * @description\r\n * 정적인 탭 목록을 렌더링하는 기본 탭 컴포넌트입니다.\r\n * 닫기 버튼, 아이콘 등을 지원합니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JTabs \r\n *   :tabs=\"tabs\"\r\n *   :active-tab-id=\"activeId\"\r\n *   @tab-change=\"handleChange\"\r\n *   @tab-close=\"handleClose\"\r\n * />\r\n * ```\r\n */\r\n\r\ntype StyleType = 'default' | 'minimal'\r\n\r\nconst props = withDefaults(defineProps<JTabsProps>(), {\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JTabsEmits>()\r\n\r\n/**\r\n * 안전한 tabs 배열 (undefined/null 체크)\r\n * Safe tabs array (undefined/null check)\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(props.tabs) ? props.tabs : []\r\n})\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst internalActiveId = ref<string>(\r\n  props.activeTabId || (safeTabs.value.length > 0 ? safeTabs.value[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * 이벤트 처리 중 플래그 (중복 이벤트 방지)\r\n * Flag to prevent duplicate events\r\n */\r\nlet isHandlingEvent = false\r\n\r\n/**\r\n * props.activeTabId가 변경되면 내부 상태 동기화\r\n * Sync internal state when props.activeTabId changes\r\n */\r\nwatch(() => props.activeTabId, (newValue) => {\r\n  if (newValue !== undefined && newValue !== internalActiveId.value) {\r\n    internalActiveId.value = newValue\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * props.tabs가 변경되고 activeTabId가 없으면 첫 번째 탭 활성화\r\n * Activate first tab when tabs change and no activeTabId\r\n */\r\nwatch(safeTabs, (newTabs) => {\r\n  if (!props.activeTabId && newTabs.length > 0 && !newTabs.find(t => t.id === internalActiveId.value) && newTabs[0]) {\r\n    internalActiveId.value = newTabs[0].id\r\n  }\r\n})\r\n\r\n/**\r\n * 탭 값 변경 핸들러 (reka-ui TabsRoot에서 직접 호출됨)\r\n * Tab value change handler (called directly from reka-ui TabsRoot)\r\n */\r\nconst handleTabValueChange = (value: string | number) => {\r\n  if (isHandlingEvent) return\r\n  \r\n  const stringValue = String(value)\r\n  if (stringValue !== internalActiveId.value) {\r\n    isHandlingEvent = true\r\n    internalActiveId.value = stringValue\r\n    emit('update:activeTabId', stringValue)\r\n    emit('tabChange', stringValue)\r\n    // 다음 tick에서 플래그 리셋\r\n    nextTick(() => {\r\n      isHandlingEvent = false\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 탭 클릭 핸들러 (백업 방안 - reka-ui 이벤트가 작동하지 않을 경우)\r\n * Tab click handler (backup - in case reka-ui events don't work)\r\n */\r\nconst handleTabClick = (tabId: string) => {\r\n  // reka-ui 이벤트가 작동하지 않을 경우 직접 처리\r\n  // handleTabValueChange가 이미 처리했으면 중복 방지\r\n  if (isHandlingEvent || tabId === internalActiveId.value) return\r\n  \r\n  isHandlingEvent = true\r\n  internalActiveId.value = tabId\r\n  emit('update:activeTabId', tabId)\r\n  emit('tabChange', tabId)\r\n  // 다음 tick에서 플래그 리셋\r\n  nextTick(() => {\r\n    isHandlingEvent = false\r\n  })\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleCloseTab = (e: Event, tabId: string) => {\r\n  e.stopPropagation() // 탭 클릭 이벤트 전파 방지\r\n  emit('tabClose', tabId)\r\n}\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['flex', 'flex-col', '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 */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  tabPaddingClass: string\r\n  tabTextSizeClass: string\r\n  listPaddingClass: string\r\n}> = {\r\n  default: {\r\n    tabPaddingClass: 'px-2.5 py-1',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-0.5',\r\n  },\r\n  minimal: {\r\n    tabPaddingClass: 'px-2 py-0.5',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-0.5',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 탭 리스트 클래스\r\n * Tabs list classes\r\n */\r\nconst listClasses = computed(() => {\r\n  const classes = ['w-full', 'justify-start', preset.value.listPaddingClass]\r\n  \r\n  if (props.listClassName) {\r\n    classes.push(props.listClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Tabs\r\n    :model-value=\"internalActiveId\"\r\n    @update:model-value=\"handleTabValueChange\"\r\n    orientation=\"horizontal\"\r\n    :class=\"rootClasses\"\r\n  >\r\n    <!-- 탭 헤더 영역 / Tab Headers -->\r\n    <TabsList :class=\"listClasses\">\r\n      <TabsTrigger\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        :value=\"tab.id\"\r\n        @click=\"handleTabClick(tab.id)\"\r\n        :class=\"cn('!flex !items-center !gap-2', preset.tabPaddingClass, preset.tabTextSizeClass)\"\r\n      >\r\n        <!-- 탭 아이콘 (있을 경우) / Tab Icon -->\r\n        <JIcon \r\n          v-if=\"tab.icon\" \r\n          :name=\"tab.icon\" \r\n          size=\"sm\"\r\n          class=\"flex-shrink-0\"\r\n        />\r\n        \r\n        <!-- 탭 레이블 / Tab Label -->\r\n        <span class=\"flex-1 truncate\">{{ tab.label }}</span>\r\n        \r\n        <!-- 닫기 버튼 / Close Button (항상 표시) -->\r\n        <button\r\n          v-if=\"tab.closable\"\r\n          type=\"button\"\r\n          class=\"flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center\"\r\n          :aria-label=\"`${tab.label} 탭 닫기`\"\r\n          @click=\"(e) => handleCloseTab(e, tab.id)\"\r\n        >\r\n          <X class=\"h-2.5 w-2.5\" />\r\n        </button>\r\n      </TabsTrigger>\r\n    </TabsList>\r\n\r\n    <!-- 탭 콘텐츠 영역 / Tab Contents -->\r\n    <div class=\"flex-1 w-full overflow-auto\">\r\n      <TabsContent\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"`content-${tab.id}`\"\r\n        :value=\"tab.id\"\r\n        class=\"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col\"\r\n      >\r\n        <!-- 슬롯 우선 / Slot First -->\r\n        <slot :name=\"`content-${tab.id}`\" :tab=\"tab\">\r\n          <!-- 동적 컴포넌트 렌더링 / Dynamic Component Rendering -->\r\n          <component\r\n            v-if=\"tab.component\"\r\n            :is=\"tab.component\"\r\n            v-bind=\"tab.props || {}\"\r\n          />\r\n          \r\n          <!-- 기본 콘텐츠 / Default Content -->\r\n          <div v-else class=\"p-4\">\r\n            <p class=\"text-muted-foreground\">{{ tab.label }} 콘텐츠</p>\r\n          </div>\r\n        </slot>\r\n      </TabsContent>\r\n    </div>\r\n  </Tabs>\r\n</template>\r\n\r\n<style scoped>\r\n/**\r\n * 탭 리스트 스타일 - 하단 보더 제거\r\n * Tab list styles without bottom border\r\n */\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)) {\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\r\n  background: hsl(var(--background));\r\n  padding: 0 0.5rem;\r\n  padding-top: 0.25rem;\r\n  gap: 0.25rem;\r\n  border-bottom: none;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar) {\r\n  height: 6px;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-track) {\r\n  background: transparent;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 다크모드에서 스크롤바 스타일\r\n * Scrollbar styles in dark mode\r\n */\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)) {\r\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\r\n}\r\n\r\n/**\r\n  * 탭 버튼 스타일 - 명확한 구분\r\n  * Tab button styles - clear distinction\r\n  */\r\n:deep([role=\"tab\"]) {\r\n  position: relative;\r\n  padding: 0.375rem 0.75rem;\r\n  border-radius: 0.375rem 0.375rem 0 0;\r\n  transition: all 0.2s ease;\r\n  border: 1px solid transparent;\r\n  border-bottom: none;\r\n}\r\n\r\n/**\r\n  * Minimal 스타일 탭 버튼 - JSidebarAdvanced와 높이 맞춤\r\n  */\r\n:deep([role=\"tablist\"][class*=\"p-0.5\"] [role=\"tab\"]) {\r\n  padding: 0.25rem 0.5rem;\r\n}\r\n\r\n/**\r\n * 비활성 탭 - 명확하게 구분\r\n * Inactive tabs - clear distinction\r\n */\r\n:deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--muted) / 0.2);\r\n  color: hsl(var(--muted-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.4);\r\n  border-left: 1px solid hsl(var(--border) / 0.4);\r\n  border-right: 1px solid hsl(var(--border) / 0.4);\r\n}\r\n\r\n:deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted) / 0.4);\r\n  color: hsl(var(--foreground));\r\n}\r\n\r\n/**\r\n * 다크모드에서 비활성 탭 - 다크 배경색 사용\r\n * Inactive tabs in dark mode - use dark background\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--secondary));\r\n  color: hsl(var(--secondary-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.5);\r\n  border-left: 1px solid hsl(var(--border) / 0.5);\r\n  border-right: 1px solid hsl(var(--border) / 0.5);\r\n}\r\n\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted));\r\n  color: hsl(var(--muted-foreground));\r\n}\r\n\r\n/**\r\n * 활성 탭 - 강조된 스타일\r\n * Active tab - emphasized style\r\n */\r\n:deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--background));\r\n  color: hsl(var(--foreground));\r\n  font-weight: 500;\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n  z-index: 1;\r\n}\r\n\r\n/**\r\n * 다크모드에서 활성 탭 - 배경색 명확히 구분\r\n * Active tab in dark mode - clear background distinction\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--card));\r\n  color: hsl(var(--card-foreground));\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 콘텐츠 영역에 상단 보더 추가\r\n * Add top border to content area\r\n */\r\n:deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border));\r\n}\r\n\r\n/**\r\n * 다크모드에서 콘텐츠 영역 보더 - 더 부드러운 구분\r\n * Content area border in dark mode - subtler separation\r\n */\r\n.dark :deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border) / 0.6);\r\n}\r\n</style>\r\n\r\n"],"names":["props","__props","emit","__emit","safeTabs","computed","internalActiveId","ref","isHandlingEvent","watch","newValue","newTabs","t","handleTabValueChange","value","stringValue","nextTick","handleTabClick","tabId","handleCloseTab","e","rootClasses","classes","STYLE_PRESETS","preset","listClasses","_createBlock","_unref","Tabs","_createVNode","TabsList","_createElementBlock","_Fragment","_renderList","tab","TabsTrigger","$event","_normalizeClass","JIcon","_createElementVNode","_hoisted_1","_toDisplayString","X","_hoisted_3","TabsContent","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent","_mergeProps","_hoisted_4","_hoisted_5"],"mappings":"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"}

package/components/molecules/JTabs.vue2.js

@@ -47,14 +47,14 @@ const Y = { class: "flex-1 truncate" }, q = ["aria-label", "onClick"], G = { cla
       return s.className && e.push(s.className), e.join(" ");
     }), _ = {
       default: {
-        tabPaddingClass: "px-3 py-2",
-        tabTextSizeClass: "text-sm",
-        listPaddingClass: "p-2"
+        tabPaddingClass: "px-2.5 py-1",
+        tabTextSizeClass: "text-xs",
+        listPaddingClass: "p-0.5"
       },
       minimal: {
-        tabPaddingClass: "px-2 py-1",
+        tabPaddingClass: "px-2 py-0.5",
         tabTextSizeClass: "text-xs",
-        listPaddingClass: "p-1"
+        listPaddingClass: "p-0.5"
       }
     }, p = d(() => _[s.styletype] ?? _.default), j = d(() => {
       const e = ["w-full", "justify-start", p.value.listPaddingClass];
@@ -88,11 +88,11 @@ const Y = { class: "flex-1 truncate" }, q = ["aria-label", "onClick"], G = { cla
                 t.closable ? (n(), m("button", {
                   key: 1,
                   type: "button",
-                  class: "flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center",
+                  class: "flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center",
                   "aria-label": `${t.label} 탭 닫기`,
                   onClick: (h) => E(h, t.id)
                 }, [
-                  x(o(L), { class: "h-3 w-3" })
+                  x(o(L), { class: "h-2.5 w-2.5" })
                 ], 8, q)) : T("", !0)
               ]),
               _: 2

package/components/molecules/JTabs.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"JTabs.vue2.js","sources":["../../../../src/components/molecules/JTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/shadcn'\r\nimport type { JTabsProps, JTabsEmits } from '@/types/dynamic-tabs.types'\r\nimport { X } from 'lucide-vue-next'\r\nimport { cn } from '@/lib/utils'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\n\r\n/**\r\n * JTabs - 기본 탭 UI 컴포넌트 (molecules)\r\n * Basic Tabs UI Component\r\n * \r\n * @description\r\n * 정적인 탭 목록을 렌더링하는 기본 탭 컴포넌트입니다.\r\n * 닫기 버튼, 아이콘 등을 지원합니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JTabs \r\n *   :tabs=\"tabs\"\r\n *   :active-tab-id=\"activeId\"\r\n *   @tab-change=\"handleChange\"\r\n *   @tab-close=\"handleClose\"\r\n * />\r\n * ```\r\n */\r\n\r\ntype StyleType = 'default' | 'minimal'\r\n\r\nconst props = withDefaults(defineProps<JTabsProps>(), {\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JTabsEmits>()\r\n\r\n/**\r\n * 안전한 tabs 배열 (undefined/null 체크)\r\n * Safe tabs array (undefined/null check)\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(props.tabs) ? props.tabs : []\r\n})\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst internalActiveId = ref<string>(\r\n  props.activeTabId || (safeTabs.value.length > 0 ? safeTabs.value[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * 이벤트 처리 중 플래그 (중복 이벤트 방지)\r\n * Flag to prevent duplicate events\r\n */\r\nlet isHandlingEvent = false\r\n\r\n/**\r\n * props.activeTabId가 변경되면 내부 상태 동기화\r\n * Sync internal state when props.activeTabId changes\r\n */\r\nwatch(() => props.activeTabId, (newValue) => {\r\n  if (newValue !== undefined && newValue !== internalActiveId.value) {\r\n    internalActiveId.value = newValue\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * props.tabs가 변경되고 activeTabId가 없으면 첫 번째 탭 활성화\r\n * Activate first tab when tabs change and no activeTabId\r\n */\r\nwatch(safeTabs, (newTabs) => {\r\n  if (!props.activeTabId && newTabs.length > 0 && !newTabs.find(t => t.id === internalActiveId.value) && newTabs[0]) {\r\n    internalActiveId.value = newTabs[0].id\r\n  }\r\n})\r\n\r\n/**\r\n * 탭 값 변경 핸들러 (reka-ui TabsRoot에서 직접 호출됨)\r\n * Tab value change handler (called directly from reka-ui TabsRoot)\r\n */\r\nconst handleTabValueChange = (value: string | number) => {\r\n  if (isHandlingEvent) return\r\n  \r\n  const stringValue = String(value)\r\n  if (stringValue !== internalActiveId.value) {\r\n    isHandlingEvent = true\r\n    internalActiveId.value = stringValue\r\n    emit('update:activeTabId', stringValue)\r\n    emit('tabChange', stringValue)\r\n    // 다음 tick에서 플래그 리셋\r\n    nextTick(() => {\r\n      isHandlingEvent = false\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 탭 클릭 핸들러 (백업 방안 - reka-ui 이벤트가 작동하지 않을 경우)\r\n * Tab click handler (backup - in case reka-ui events don't work)\r\n */\r\nconst handleTabClick = (tabId: string) => {\r\n  // reka-ui 이벤트가 작동하지 않을 경우 직접 처리\r\n  // handleTabValueChange가 이미 처리했으면 중복 방지\r\n  if (isHandlingEvent || tabId === internalActiveId.value) return\r\n  \r\n  isHandlingEvent = true\r\n  internalActiveId.value = tabId\r\n  emit('update:activeTabId', tabId)\r\n  emit('tabChange', tabId)\r\n  // 다음 tick에서 플래그 리셋\r\n  nextTick(() => {\r\n    isHandlingEvent = false\r\n  })\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleCloseTab = (e: Event, tabId: string) => {\r\n  e.stopPropagation() // 탭 클릭 이벤트 전파 방지\r\n  emit('tabClose', tabId)\r\n}\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['flex', 'flex-col', '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 */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  tabPaddingClass: string\r\n  tabTextSizeClass: string\r\n  listPaddingClass: string\r\n}> = {\r\n  default: {\r\n    tabPaddingClass: 'px-3 py-2',\r\n    tabTextSizeClass: 'text-sm',\r\n    listPaddingClass: 'p-2',\r\n  },\r\n  minimal: {\r\n    tabPaddingClass: 'px-2 py-1',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-1',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 탭 리스트 클래스\r\n * Tabs list classes\r\n */\r\nconst listClasses = computed(() => {\r\n  const classes = ['w-full', 'justify-start', preset.value.listPaddingClass]\r\n  \r\n  if (props.listClassName) {\r\n    classes.push(props.listClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Tabs\r\n    :model-value=\"internalActiveId\"\r\n    @update:model-value=\"handleTabValueChange\"\r\n    orientation=\"horizontal\"\r\n    :class=\"rootClasses\"\r\n  >\r\n    <!-- 탭 헤더 영역 / Tab Headers -->\r\n    <TabsList :class=\"listClasses\">\r\n      <TabsTrigger\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        :value=\"tab.id\"\r\n        @click=\"handleTabClick(tab.id)\"\r\n        :class=\"cn('!flex !items-center !gap-2', preset.tabPaddingClass, preset.tabTextSizeClass)\"\r\n      >\r\n        <!-- 탭 아이콘 (있을 경우) / Tab Icon -->\r\n        <JIcon \r\n          v-if=\"tab.icon\" \r\n          :name=\"tab.icon\" \r\n          size=\"sm\"\r\n          class=\"flex-shrink-0\"\r\n        />\r\n        \r\n        <!-- 탭 레이블 / Tab Label -->\r\n        <span class=\"flex-1 truncate\">{{ tab.label }}</span>\r\n        \r\n        <!-- 닫기 버튼 / Close Button (항상 표시) -->\r\n        <button\r\n          v-if=\"tab.closable\"\r\n          type=\"button\"\r\n          class=\"flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center\"\r\n          :aria-label=\"`${tab.label} 탭 닫기`\"\r\n          @click=\"(e) => handleCloseTab(e, tab.id)\"\r\n        >\r\n          <X class=\"h-3 w-3\" />\r\n        </button>\r\n      </TabsTrigger>\r\n    </TabsList>\r\n\r\n    <!-- 탭 콘텐츠 영역 / Tab Contents -->\r\n    <div class=\"flex-1 w-full overflow-auto\">\r\n      <TabsContent\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"`content-${tab.id}`\"\r\n        :value=\"tab.id\"\r\n        class=\"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col\"\r\n      >\r\n        <!-- 슬롯 우선 / Slot First -->\r\n        <slot :name=\"`content-${tab.id}`\" :tab=\"tab\">\r\n          <!-- 동적 컴포넌트 렌더링 / Dynamic Component Rendering -->\r\n          <component\r\n            v-if=\"tab.component\"\r\n            :is=\"tab.component\"\r\n            v-bind=\"tab.props || {}\"\r\n          />\r\n          \r\n          <!-- 기본 콘텐츠 / Default Content -->\r\n          <div v-else class=\"p-4\">\r\n            <p class=\"text-muted-foreground\">{{ tab.label }} 콘텐츠</p>\r\n          </div>\r\n        </slot>\r\n      </TabsContent>\r\n    </div>\r\n  </Tabs>\r\n</template>\r\n\r\n<style scoped>\r\n/**\r\n * 탭 리스트 스타일 - 하단 보더 제거\r\n * Tab list styles without bottom border\r\n */\r\n:deep([role=\"tablist\"]) {\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\r\n  background: hsl(var(--background));\r\n  padding: 0 0.5rem;\r\n  padding-top: 0.5rem;\r\n  gap: 0.25rem;\r\n  border-bottom: none;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar) {\r\n  height: 6px;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-track) {\r\n  background: transparent;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 다크모드에서 스크롤바 스타일\r\n * Scrollbar styles in dark mode\r\n */\r\n.dark :deep([role=\"tablist\"]::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]) {\r\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\r\n}\r\n\r\n/**\r\n * 탭 버튼 스타일 - 명확한 구분\r\n * Tab button styles - clear distinction\r\n */\r\n:deep([role=\"tab\"]) {\r\n  position: relative;\r\n  padding: 0.625rem 1rem;\r\n  border-radius: 0.375rem 0.375rem 0 0;\r\n  transition: all 0.2s ease;\r\n  border: 1px solid transparent;\r\n  border-bottom: none;\r\n}\r\n\r\n/**\r\n * Minimal 스타일 탭 버튼 - JSidebarAdvanced와 높이 맞춤\r\n */\r\n:deep([role=\"tablist\"][class*=\"p-1\"] [role=\"tab\"]) {\r\n  padding: 0.625rem 0.5rem;\r\n}\r\n\r\n/**\r\n * 비활성 탭 - 명확하게 구분\r\n * Inactive tabs - clear distinction\r\n */\r\n:deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--muted) / 0.2);\r\n  color: hsl(var(--muted-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.4);\r\n  border-left: 1px solid hsl(var(--border) / 0.4);\r\n  border-right: 1px solid hsl(var(--border) / 0.4);\r\n}\r\n\r\n:deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted) / 0.4);\r\n  color: hsl(var(--foreground));\r\n}\r\n\r\n/**\r\n * 다크모드에서 비활성 탭 - 다크 배경색 사용\r\n * Inactive tabs in dark mode - use dark background\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--secondary));\r\n  color: hsl(var(--secondary-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.5);\r\n  border-left: 1px solid hsl(var(--border) / 0.5);\r\n  border-right: 1px solid hsl(var(--border) / 0.5);\r\n}\r\n\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted));\r\n  color: hsl(var(--muted-foreground));\r\n}\r\n\r\n/**\r\n * 활성 탭 - 강조된 스타일\r\n * Active tab - emphasized style\r\n */\r\n:deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--background));\r\n  color: hsl(var(--foreground));\r\n  font-weight: 500;\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n  z-index: 1;\r\n}\r\n\r\n/**\r\n * 다크모드에서 활성 탭 - 배경색 명확히 구분\r\n * Active tab in dark mode - clear background distinction\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--card));\r\n  color: hsl(var(--card-foreground));\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 콘텐츠 영역에 상단 보더 추가\r\n * Add top border to content area\r\n */\r\n:deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border));\r\n}\r\n\r\n/**\r\n * 다크모드에서 콘텐츠 영역 보더 - 더 부드러운 구분\r\n * Content area border in dark mode - subtler separation\r\n */\r\n.dark :deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border) / 0.6);\r\n}\r\n</style>\r\n\r\n"],"names":["props","__props","emit","__emit","safeTabs","computed","internalActiveId","ref","isHandlingEvent","watch","newValue","newTabs","t","handleTabValueChange","value","stringValue","nextTick","handleTabClick","tabId","handleCloseTab","rootClasses","classes","STYLE_PRESETS","preset","listClasses","_createBlock","_unref","Tabs","_createVNode","TabsList","_createElementBlock","_Fragment","_renderList","tab","TabsTrigger","$event","_normalizeClass","JIcon","_createElementVNode","_hoisted_1","_toDisplayString","e","X","_hoisted_3","TabsContent","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent","_mergeProps","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,UAAMA,IAAQC,GAIRC,IAAOC,GAMPC,IAAWC,EAAS,MACjB,MAAM,QAAQL,EAAM,IAAI,IAAIA,EAAM,OAAO,CAAA,CACjD,GAMKM,IAAmBC;AAAA,MACvBP,EAAM,gBAAgBI,EAAS,MAAM,SAAS,IAAIA,EAAS,MAAM,CAAC,GAAG,KAAK,OAAO;AAAA,IAAA;AAOnF,QAAII,IAAkB;AAMtB,IAAAC,EAAM,MAAMT,EAAM,aAAa,CAACU,MAAa;AAC3C,MAAIA,MAAa,UAAaA,MAAaJ,EAAiB,UAC1DA,EAAiB,QAAQI;AAAA,IAE7B,GAAG,EAAE,WAAW,IAAM,GAMtBD,EAAML,GAAU,CAACO,MAAY;AAC3B,MAAI,CAACX,EAAM,eAAeW,EAAQ,SAAS,KAAK,CAACA,EAAQ,KAAK,CAAAC,MAAKA,EAAE,OAAON,EAAiB,KAAK,KAAKK,EAAQ,CAAC,MAC9GL,EAAiB,QAAQK,EAAQ,CAAC,EAAE;AAAA,IAExC,CAAC;AAMD,UAAME,IAAuB,CAACC,MAA2B;AACvD,UAAIN,EAAiB;AAErB,YAAMO,IAAc,OAAOD,CAAK;AAChC,MAAIC,MAAgBT,EAAiB,UACnCE,IAAkB,IAClBF,EAAiB,QAAQS,GACzBb,EAAK,sBAAsBa,CAAW,GACtCb,EAAK,aAAaa,CAAW,GAE7BC,EAAS,MAAM;AACb,QAAAR,IAAkB;AAAA,MACpB,CAAC;AAAA,IAEL,GAMMS,IAAiB,CAACC,MAAkB;AAGxC,MAAIV,KAAmBU,MAAUZ,EAAiB,UAElDE,IAAkB,IAClBF,EAAiB,QAAQY,GACzBhB,EAAK,sBAAsBgB,CAAK,GAChChB,EAAK,aAAagB,CAAK,GAEvBF,EAAS,MAAM;AACb,QAAAR,IAAkB;AAAA,MACpB,CAAC;AAAA,IACH,GAMMW,IAAiB,CAAC,GAAUD,MAAkB;AAClD,QAAE,gBAAA,GACFhB,EAAK,YAAYgB,CAAK;AAAA,IACxB,GAMME,IAAcf,EAAS,MAAM;AACjC,YAAMgB,IAAU,CAAC,QAAQ,YAAY,UAAU,QAAQ;AAEvD,aAAIrB,EAAM,aACRqB,EAAQ,KAAKrB,EAAM,SAAS,GAGvBqB,EAAQ,KAAK,GAAG;AAAA,IACzB,CAAC,GAKKC,IAID;AAAA,MACH,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,MAAA;AAAA,IACpB,GAGIC,IAASlB,EAAS,MACfiB,EAActB,EAAM,SAAS,KAAKsB,EAAc,OACxD,GAMKE,IAAcnB,EAAS,MAAM;AACjC,YAAMgB,IAAU,CAAC,UAAU,iBAAiBE,EAAO,MAAM,gBAAgB;AAEzE,aAAIvB,EAAM,iBACRqB,EAAQ,KAAKrB,EAAM,aAAa,GAG3BqB,EAAQ,KAAK,GAAG;AAAA,IACzB,CAAC;2BAICI,EA+DOC,EAAAC,CAAA,GAAA;AAAA,MA9DJ,eAAarB,EAAA;AAAA,MACb,uBAAoBO;AAAA,MACrB,aAAY;AAAA,MACX,SAAOO,EAAA,KAAW;AAAA,IAAA;iBAGnB,MA8BW;AAAA,QA9BXQ,EA8BWF,EAAAG,CAAA,GAAA;AAAA,UA9BA,SAAOL,EAAA,KAAW;AAAA,QAAA;qBAEzB,MAAuB;AAAA,oBADzBM,EA4BcC,GAAA,MAAAC,EA3BE5B,EAAA,OAAQ,CAAf6B,YADTR,EA4BcC,EAAAQ,CAAA,GAAA;AAAA,cA1BX,KAAKD,EAAI;AAAA,cACT,OAAOA,EAAI;AAAA,cACX,SAAK,CAAAE,MAAElB,EAAegB,EAAI,EAAE;AAAA,cAC5B,OAAKG,EAAEV,KAAE,8BAA+BH,EAAA,MAAO,iBAAiBA,EAAA,MAAO,gBAAgB,CAAA;AAAA,YAAA;yBAGxF,MAKE;AAAA,gBAJMU,EAAI,aADZR,EAKEY,GAAA;AAAA;kBAHC,MAAMJ,EAAI;AAAA,kBACX,MAAK;AAAA,kBACL,OAAM;AAAA,gBAAA;gBAIRK,EAAoD,QAApDC,GAAoDC,EAAnBP,EAAI,KAAK,GAAA,CAAA;AAAA,gBAIlCA,EAAI,iBADZH,EAQS,UAAA;AAAA;kBANP,MAAK;AAAA,kBACL,OAAM;AAAA,kBACL,cAAU,GAAKG,EAAI,KAAK;AAAA,kBACxB,SAAK,CAAGQ,MAAMtB,EAAesB,GAAGR,EAAI,EAAE;AAAA,gBAAA;kBAEvCL,EAAqBF,EAAAgB,CAAA,GAAA,EAAlB,OAAM,WAAS;AAAA,gBAAA;;;;;;;QAMxBJ,EAsBM,OAtBNK,GAsBM;AAAA,kBArBJb,EAoBcC,GAAA,MAAAC,EAnBE5B,EAAA,OAAQ,CAAf6B,YADTR,EAoBcC,EAAAkB,CAAA,GAAA;AAAA,YAlBX,KAAG,WAAaX,EAAI,EAAE;AAAA,YACtB,OAAOA,EAAI;AAAA,YACZ,OAAM;AAAA,UAAA;uBAGN,MAYO;AAAA,cAZPY,EAYOC,EAAA,QAAA,WAZiBb,EAAI,EAAE,MAAK,KAAAA,EAAA,GAAnC,MAYO;AAAA,gBATGA,EAAI,aADZc,KAAAtB,EAIEuB,EAFKf,EAAI,SAAS,GAFpBgB,EAIE;AAAA;;mBADQhB,EAAI,SAAK,CAAA,CAAA,GAAA,MAAA,EAAA,MAInBc,EAAA,GAAAjB,EAEM,OAFNoB,GAEM;AAAA,kBADJZ,EAAwD,KAAxDa,GAAwDX,EAApBP,EAAI,KAAK,IAAG,QAAI,CAAA;AAAA,gBAAA;;;;;;;;;;;"}
+{"version":3,"file":"JTabs.vue2.js","sources":["../../../../src/components/molecules/JTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/shadcn'\r\nimport type { JTabsProps, JTabsEmits } from '@/types/dynamic-tabs.types'\r\nimport { X } from 'lucide-vue-next'\r\nimport { cn } from '@/lib/utils'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\n\r\n/**\r\n * JTabs - 기본 탭 UI 컴포넌트 (molecules)\r\n * Basic Tabs UI Component\r\n * \r\n * @description\r\n * 정적인 탭 목록을 렌더링하는 기본 탭 컴포넌트입니다.\r\n * 닫기 버튼, 아이콘 등을 지원합니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JTabs \r\n *   :tabs=\"tabs\"\r\n *   :active-tab-id=\"activeId\"\r\n *   @tab-change=\"handleChange\"\r\n *   @tab-close=\"handleClose\"\r\n * />\r\n * ```\r\n */\r\n\r\ntype StyleType = 'default' | 'minimal'\r\n\r\nconst props = withDefaults(defineProps<JTabsProps>(), {\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JTabsEmits>()\r\n\r\n/**\r\n * 안전한 tabs 배열 (undefined/null 체크)\r\n * Safe tabs array (undefined/null check)\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(props.tabs) ? props.tabs : []\r\n})\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst internalActiveId = ref<string>(\r\n  props.activeTabId || (safeTabs.value.length > 0 ? safeTabs.value[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * 이벤트 처리 중 플래그 (중복 이벤트 방지)\r\n * Flag to prevent duplicate events\r\n */\r\nlet isHandlingEvent = false\r\n\r\n/**\r\n * props.activeTabId가 변경되면 내부 상태 동기화\r\n * Sync internal state when props.activeTabId changes\r\n */\r\nwatch(() => props.activeTabId, (newValue) => {\r\n  if (newValue !== undefined && newValue !== internalActiveId.value) {\r\n    internalActiveId.value = newValue\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * props.tabs가 변경되고 activeTabId가 없으면 첫 번째 탭 활성화\r\n * Activate first tab when tabs change and no activeTabId\r\n */\r\nwatch(safeTabs, (newTabs) => {\r\n  if (!props.activeTabId && newTabs.length > 0 && !newTabs.find(t => t.id === internalActiveId.value) && newTabs[0]) {\r\n    internalActiveId.value = newTabs[0].id\r\n  }\r\n})\r\n\r\n/**\r\n * 탭 값 변경 핸들러 (reka-ui TabsRoot에서 직접 호출됨)\r\n * Tab value change handler (called directly from reka-ui TabsRoot)\r\n */\r\nconst handleTabValueChange = (value: string | number) => {\r\n  if (isHandlingEvent) return\r\n  \r\n  const stringValue = String(value)\r\n  if (stringValue !== internalActiveId.value) {\r\n    isHandlingEvent = true\r\n    internalActiveId.value = stringValue\r\n    emit('update:activeTabId', stringValue)\r\n    emit('tabChange', stringValue)\r\n    // 다음 tick에서 플래그 리셋\r\n    nextTick(() => {\r\n      isHandlingEvent = false\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 탭 클릭 핸들러 (백업 방안 - reka-ui 이벤트가 작동하지 않을 경우)\r\n * Tab click handler (backup - in case reka-ui events don't work)\r\n */\r\nconst handleTabClick = (tabId: string) => {\r\n  // reka-ui 이벤트가 작동하지 않을 경우 직접 처리\r\n  // handleTabValueChange가 이미 처리했으면 중복 방지\r\n  if (isHandlingEvent || tabId === internalActiveId.value) return\r\n  \r\n  isHandlingEvent = true\r\n  internalActiveId.value = tabId\r\n  emit('update:activeTabId', tabId)\r\n  emit('tabChange', tabId)\r\n  // 다음 tick에서 플래그 리셋\r\n  nextTick(() => {\r\n    isHandlingEvent = false\r\n  })\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleCloseTab = (e: Event, tabId: string) => {\r\n  e.stopPropagation() // 탭 클릭 이벤트 전파 방지\r\n  emit('tabClose', tabId)\r\n}\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['flex', 'flex-col', '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 */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  tabPaddingClass: string\r\n  tabTextSizeClass: string\r\n  listPaddingClass: string\r\n}> = {\r\n  default: {\r\n    tabPaddingClass: 'px-2.5 py-1',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-0.5',\r\n  },\r\n  minimal: {\r\n    tabPaddingClass: 'px-2 py-0.5',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-0.5',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 탭 리스트 클래스\r\n * Tabs list classes\r\n */\r\nconst listClasses = computed(() => {\r\n  const classes = ['w-full', 'justify-start', preset.value.listPaddingClass]\r\n  \r\n  if (props.listClassName) {\r\n    classes.push(props.listClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Tabs\r\n    :model-value=\"internalActiveId\"\r\n    @update:model-value=\"handleTabValueChange\"\r\n    orientation=\"horizontal\"\r\n    :class=\"rootClasses\"\r\n  >\r\n    <!-- 탭 헤더 영역 / Tab Headers -->\r\n    <TabsList :class=\"listClasses\">\r\n      <TabsTrigger\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        :value=\"tab.id\"\r\n        @click=\"handleTabClick(tab.id)\"\r\n        :class=\"cn('!flex !items-center !gap-2', preset.tabPaddingClass, preset.tabTextSizeClass)\"\r\n      >\r\n        <!-- 탭 아이콘 (있을 경우) / Tab Icon -->\r\n        <JIcon \r\n          v-if=\"tab.icon\" \r\n          :name=\"tab.icon\" \r\n          size=\"sm\"\r\n          class=\"flex-shrink-0\"\r\n        />\r\n        \r\n        <!-- 탭 레이블 / Tab Label -->\r\n        <span class=\"flex-1 truncate\">{{ tab.label }}</span>\r\n        \r\n        <!-- 닫기 버튼 / Close Button (항상 표시) -->\r\n        <button\r\n          v-if=\"tab.closable\"\r\n          type=\"button\"\r\n          class=\"flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center\"\r\n          :aria-label=\"`${tab.label} 탭 닫기`\"\r\n          @click=\"(e) => handleCloseTab(e, tab.id)\"\r\n        >\r\n          <X class=\"h-2.5 w-2.5\" />\r\n        </button>\r\n      </TabsTrigger>\r\n    </TabsList>\r\n\r\n    <!-- 탭 콘텐츠 영역 / Tab Contents -->\r\n    <div class=\"flex-1 w-full overflow-auto\">\r\n      <TabsContent\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"`content-${tab.id}`\"\r\n        :value=\"tab.id\"\r\n        class=\"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col\"\r\n      >\r\n        <!-- 슬롯 우선 / Slot First -->\r\n        <slot :name=\"`content-${tab.id}`\" :tab=\"tab\">\r\n          <!-- 동적 컴포넌트 렌더링 / Dynamic Component Rendering -->\r\n          <component\r\n            v-if=\"tab.component\"\r\n            :is=\"tab.component\"\r\n            v-bind=\"tab.props || {}\"\r\n          />\r\n          \r\n          <!-- 기본 콘텐츠 / Default Content -->\r\n          <div v-else class=\"p-4\">\r\n            <p class=\"text-muted-foreground\">{{ tab.label }} 콘텐츠</p>\r\n          </div>\r\n        </slot>\r\n      </TabsContent>\r\n    </div>\r\n  </Tabs>\r\n</template>\r\n\r\n<style scoped>\r\n/**\r\n * 탭 리스트 스타일 - 하단 보더 제거\r\n * Tab list styles without bottom border\r\n */\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)) {\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\r\n  background: hsl(var(--background));\r\n  padding: 0 0.5rem;\r\n  padding-top: 0.25rem;\r\n  gap: 0.25rem;\r\n  border-bottom: none;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar) {\r\n  height: 6px;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-track) {\r\n  background: transparent;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 다크모드에서 스크롤바 스타일\r\n * Scrollbar styles in dark mode\r\n */\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)) {\r\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\r\n}\r\n\r\n/**\r\n  * 탭 버튼 스타일 - 명확한 구분\r\n  * Tab button styles - clear distinction\r\n  */\r\n:deep([role=\"tab\"]) {\r\n  position: relative;\r\n  padding: 0.375rem 0.75rem;\r\n  border-radius: 0.375rem 0.375rem 0 0;\r\n  transition: all 0.2s ease;\r\n  border: 1px solid transparent;\r\n  border-bottom: none;\r\n}\r\n\r\n/**\r\n  * Minimal 스타일 탭 버튼 - JSidebarAdvanced와 높이 맞춤\r\n  */\r\n:deep([role=\"tablist\"][class*=\"p-0.5\"] [role=\"tab\"]) {\r\n  padding: 0.25rem 0.5rem;\r\n}\r\n\r\n/**\r\n * 비활성 탭 - 명확하게 구분\r\n * Inactive tabs - clear distinction\r\n */\r\n:deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--muted) / 0.2);\r\n  color: hsl(var(--muted-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.4);\r\n  border-left: 1px solid hsl(var(--border) / 0.4);\r\n  border-right: 1px solid hsl(var(--border) / 0.4);\r\n}\r\n\r\n:deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted) / 0.4);\r\n  color: hsl(var(--foreground));\r\n}\r\n\r\n/**\r\n * 다크모드에서 비활성 탭 - 다크 배경색 사용\r\n * Inactive tabs in dark mode - use dark background\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--secondary));\r\n  color: hsl(var(--secondary-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.5);\r\n  border-left: 1px solid hsl(var(--border) / 0.5);\r\n  border-right: 1px solid hsl(var(--border) / 0.5);\r\n}\r\n\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted));\r\n  color: hsl(var(--muted-foreground));\r\n}\r\n\r\n/**\r\n * 활성 탭 - 강조된 스타일\r\n * Active tab - emphasized style\r\n */\r\n:deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--background));\r\n  color: hsl(var(--foreground));\r\n  font-weight: 500;\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n  z-index: 1;\r\n}\r\n\r\n/**\r\n * 다크모드에서 활성 탭 - 배경색 명확히 구분\r\n * Active tab in dark mode - clear background distinction\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--card));\r\n  color: hsl(var(--card-foreground));\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 콘텐츠 영역에 상단 보더 추가\r\n * Add top border to content area\r\n */\r\n:deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border));\r\n}\r\n\r\n/**\r\n * 다크모드에서 콘텐츠 영역 보더 - 더 부드러운 구분\r\n * Content area border in dark mode - subtler separation\r\n */\r\n.dark :deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border) / 0.6);\r\n}\r\n</style>\r\n\r\n"],"names":["props","__props","emit","__emit","safeTabs","computed","internalActiveId","ref","isHandlingEvent","watch","newValue","newTabs","t","handleTabValueChange","value","stringValue","nextTick","handleTabClick","tabId","handleCloseTab","rootClasses","classes","STYLE_PRESETS","preset","listClasses","_createBlock","_unref","Tabs","_createVNode","TabsList","_createElementBlock","_Fragment","_renderList","tab","TabsTrigger","$event","_normalizeClass","JIcon","_createElementVNode","_hoisted_1","_toDisplayString","e","X","_hoisted_3","TabsContent","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent","_mergeProps","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,UAAMA,IAAQC,GAIRC,IAAOC,GAMPC,IAAWC,EAAS,MACjB,MAAM,QAAQL,EAAM,IAAI,IAAIA,EAAM,OAAO,CAAA,CACjD,GAMKM,IAAmBC;AAAA,MACvBP,EAAM,gBAAgBI,EAAS,MAAM,SAAS,IAAIA,EAAS,MAAM,CAAC,GAAG,KAAK,OAAO;AAAA,IAAA;AAOnF,QAAII,IAAkB;AAMtB,IAAAC,EAAM,MAAMT,EAAM,aAAa,CAACU,MAAa;AAC3C,MAAIA,MAAa,UAAaA,MAAaJ,EAAiB,UAC1DA,EAAiB,QAAQI;AAAA,IAE7B,GAAG,EAAE,WAAW,IAAM,GAMtBD,EAAML,GAAU,CAACO,MAAY;AAC3B,MAAI,CAACX,EAAM,eAAeW,EAAQ,SAAS,KAAK,CAACA,EAAQ,KAAK,CAAAC,MAAKA,EAAE,OAAON,EAAiB,KAAK,KAAKK,EAAQ,CAAC,MAC9GL,EAAiB,QAAQK,EAAQ,CAAC,EAAE;AAAA,IAExC,CAAC;AAMD,UAAME,IAAuB,CAACC,MAA2B;AACvD,UAAIN,EAAiB;AAErB,YAAMO,IAAc,OAAOD,CAAK;AAChC,MAAIC,MAAgBT,EAAiB,UACnCE,IAAkB,IAClBF,EAAiB,QAAQS,GACzBb,EAAK,sBAAsBa,CAAW,GACtCb,EAAK,aAAaa,CAAW,GAE7BC,EAAS,MAAM;AACb,QAAAR,IAAkB;AAAA,MACpB,CAAC;AAAA,IAEL,GAMMS,IAAiB,CAACC,MAAkB;AAGxC,MAAIV,KAAmBU,MAAUZ,EAAiB,UAElDE,IAAkB,IAClBF,EAAiB,QAAQY,GACzBhB,EAAK,sBAAsBgB,CAAK,GAChChB,EAAK,aAAagB,CAAK,GAEvBF,EAAS,MAAM;AACb,QAAAR,IAAkB;AAAA,MACpB,CAAC;AAAA,IACH,GAMMW,IAAiB,CAAC,GAAUD,MAAkB;AAClD,QAAE,gBAAA,GACFhB,EAAK,YAAYgB,CAAK;AAAA,IACxB,GAMME,IAAcf,EAAS,MAAM;AACjC,YAAMgB,IAAU,CAAC,QAAQ,YAAY,UAAU,QAAQ;AAEvD,aAAIrB,EAAM,aACRqB,EAAQ,KAAKrB,EAAM,SAAS,GAGvBqB,EAAQ,KAAK,GAAG;AAAA,IACzB,CAAC,GAKKC,IAID;AAAA,MACH,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,MAAA;AAAA,IACpB,GAGIC,IAASlB,EAAS,MACfiB,EAActB,EAAM,SAAS,KAAKsB,EAAc,OACxD,GAMKE,IAAcnB,EAAS,MAAM;AACjC,YAAMgB,IAAU,CAAC,UAAU,iBAAiBE,EAAO,MAAM,gBAAgB;AAEzE,aAAIvB,EAAM,iBACRqB,EAAQ,KAAKrB,EAAM,aAAa,GAG3BqB,EAAQ,KAAK,GAAG;AAAA,IACzB,CAAC;2BAICI,EA+DOC,EAAAC,CAAA,GAAA;AAAA,MA9DJ,eAAarB,EAAA;AAAA,MACb,uBAAoBO;AAAA,MACrB,aAAY;AAAA,MACX,SAAOO,EAAA,KAAW;AAAA,IAAA;iBAGnB,MA8BW;AAAA,QA9BXQ,EA8BWF,EAAAG,CAAA,GAAA;AAAA,UA9BA,SAAOL,EAAA,KAAW;AAAA,QAAA;qBAEzB,MAAuB;AAAA,oBADzBM,EA4BcC,GAAA,MAAAC,EA3BE5B,EAAA,OAAQ,CAAf6B,YADTR,EA4BcC,EAAAQ,CAAA,GAAA;AAAA,cA1BX,KAAKD,EAAI;AAAA,cACT,OAAOA,EAAI;AAAA,cACX,SAAK,CAAAE,MAAElB,EAAegB,EAAI,EAAE;AAAA,cAC5B,OAAKG,EAAEV,KAAE,8BAA+BH,EAAA,MAAO,iBAAiBA,EAAA,MAAO,gBAAgB,CAAA;AAAA,YAAA;yBAGxF,MAKE;AAAA,gBAJMU,EAAI,aADZR,EAKEY,GAAA;AAAA;kBAHC,MAAMJ,EAAI;AAAA,kBACX,MAAK;AAAA,kBACL,OAAM;AAAA,gBAAA;gBAIRK,EAAoD,QAApDC,GAAoDC,EAAnBP,EAAI,KAAK,GAAA,CAAA;AAAA,gBAIlCA,EAAI,iBADZH,EAQS,UAAA;AAAA;kBANP,MAAK;AAAA,kBACL,OAAM;AAAA,kBACL,cAAU,GAAKG,EAAI,KAAK;AAAA,kBACxB,SAAK,CAAGQ,MAAMtB,EAAesB,GAAGR,EAAI,EAAE;AAAA,gBAAA;kBAEvCL,EAAyBF,EAAAgB,CAAA,GAAA,EAAtB,OAAM,eAAa;AAAA,gBAAA;;;;;;;QAM5BJ,EAsBM,OAtBNK,GAsBM;AAAA,kBArBJb,EAoBcC,GAAA,MAAAC,EAnBE5B,EAAA,OAAQ,CAAf6B,YADTR,EAoBcC,EAAAkB,CAAA,GAAA;AAAA,YAlBX,KAAG,WAAaX,EAAI,EAAE;AAAA,YACtB,OAAOA,EAAI;AAAA,YACZ,OAAM;AAAA,UAAA;uBAGN,MAYO;AAAA,cAZPY,EAYOC,EAAA,QAAA,WAZiBb,EAAI,EAAE,MAAK,KAAAA,EAAA,GAAnC,MAYO;AAAA,gBATGA,EAAI,aADZc,KAAAtB,EAIEuB,EAFKf,EAAI,SAAS,GAFpBgB,EAIE;AAAA;;mBADQhB,EAAI,SAAK,CAAA,CAAA,GAAA,MAAA,EAAA,MAInBc,EAAA,GAAAjB,EAEM,OAFNoB,GAEM;AAAA,kBADJZ,EAAwD,KAAxDa,GAAwDX,EAApBP,EAAI,KAAK,IAAG,QAAI,CAAA;AAAA,gBAAA;;;;;;;;;;;"}

package/components/molecules/JTitlebar.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("../atoms/JButton.vue.cjs");require("../shadcn/index.cjs");require("lucide-vue-next");const n=require("../../lib/utils.cjs");require("@internationalized/date");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");const o=require("../atoms/JIcon.vue.cjs"),b=require("../atoms/JLabel.vue.cjs"),x=require("../atoms/JPopover.vue.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const C={class:"flex items-center gap-3 flex-1"},y={class:"flex items-center gap-2"},g={class:"p-2"},k={class:"text-sm text-muted-foreground whitespace-normal break-words"},h={key:0,class:"flex items-center gap-2"},v={key:1},_=e.defineComponent({__name:"JTitlebar",props:{styletype:{default:"default"},icon:{},title:{},description:{},showHelp:{type:Boolean},buttons:{default:()=>[]}},emits:["buttonClick","help"],setup(r,{emit:u}){const d=r,i={default:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background",iconClass:"text-primary",titleClass:"text-foreground",infoIconClass:"text-muted-foreground hover:text-primary"},primary:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500",iconClass:"text-white",titleClass:"text-white font-semibold",infoIconClass:"text-white/80 hover:text-white"},accent:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50",iconClass:"text-blue-600",titleClass:"text-blue-700 font-semibold",infoIconClass:"text-blue-600/70 hover:text-blue-700"},neutral:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100",iconClass:"text-gray-600",titleClass:"text-gray-700",infoIconClass:"text-gray-500 hover:text-gray-700"},elevated:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md",iconClass:"text-primary",titleClass:"text-foreground font-semibold",infoIconClass:"text-muted-foreground hover:text-primary"}},l=e.computed(()=>i[d.styletype]??i.default),a=u,m=s=>{s.onClick?.(),a("buttonClick",s)};return(s,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(l.value.class))},[e.createElementVNode("div",C,[r.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:r.icon,size:"md",class:e.normalizeClass(l.value.iconClass)},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("div",y,[e.createVNode(e.unref(b.default),{text:r.title||"",class:e.normalizeClass(e.unref(n.cn)("text-lg font-semibold",l.value.titleClass))},null,8,["text","class"]),r.description?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,position:"bottom",align:"center","side-offset":8},{trigger:e.withCtx(()=>[e.createVNode(e.unref(o.default),{name:"info",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-help transition-colors inline-flex",l.value.infoIconClass))},null,8,["class"])]),default:e.withCtx(()=>[e.createElementVNode("div",g,[e.createElementVNode("p",k,e.toDisplayString(r.description),1)])]),_:1})):e.createCommentVNode("",!0),r.showHelp?(e.openBlock(),e.createBlock(e.unref(o.default),{key:1,name:"circleQuestionMark",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-pointer transition-colors inline-flex",l.value.infoIconClass)),onClick:c[0]||(c[0]=t=>a("help"))},null,8,["class"])):e.createCommentVNode("",!0)])]),r.buttons&&r.buttons.length>0?(e.openBlock(),e.createElementBlock("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.buttons,(t,f)=>(e.openBlock(),e.createBlock(e.unref(p.default),{key:f,variant:t.variant,styletype:t.styletype,disabled:t.disabled,loading:t.loading,class:e.normalizeClass(t.size==="sm"?"h-8":t.size==="lg"?"h-11":"h-9"),onClick:q=>m(t)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,size:"sm",class:"mr-1.5"},null,8,["name"])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),_:2},1032,["variant","styletype","disabled","loading","class","onClick"]))),128))])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"buttons")],2))}});exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("../atoms/JButton.vue.cjs");require("../shadcn/index.cjs");require("lucide-vue-next");const n=require("../../lib/utils.cjs");require("@internationalized/date");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");const o=require("../atoms/JIcon.vue.cjs"),p=require("../atoms/JLabel.vue.cjs"),b=require("../atoms/JPopover.vue.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const y={class:"flex items-center gap-3 flex-1"},C={class:"flex items-center gap-2"},g={class:"p-2"},k={class:"text-xs text-muted-foreground whitespace-normal break-words"},v={key:0,class:"flex items-center gap-2"},h={key:1},_=e.defineComponent({__name:"JTitlebar",props:{styletype:{default:"default"},icon:{},title:{},description:{},showHelp:{type:Boolean},buttons:{default:()=>[]}},emits:["buttonClick","help"],setup(r,{emit:u}){const d=r,i={default:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background",iconClass:"text-primary",titleClass:"text-foreground text-md",infoIconClass:"text-muted-foreground hover:text-primary"},primary:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-blue-400/30 bg-blue-500",iconClass:"text-white",titleClass:"text-white font-semibold text-md",infoIconClass:"text-white/80 hover:text-white"},accent:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-blue-200 bg-blue-50",iconClass:"text-blue-600",titleClass:"text-blue-700 font-semibold text-md",infoIconClass:"text-blue-600/70 hover:text-blue-700"},neutral:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-gray-300 bg-gray-100",iconClass:"text-gray-600",titleClass:"text-gray-700 text-md",infoIconClass:"text-gray-500 hover:text-gray-700"},elevated:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background shadow-md",iconClass:"text-primary",titleClass:"text-foreground font-semibold text-md",infoIconClass:"text-muted-foreground hover:text-primary"}},l=e.computed(()=>i[d.styletype]??i.default),a=u,m=s=>{s.onClick?.(),a("buttonClick",s)};return(s,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(l.value.class))},[e.createElementVNode("div",y,[r.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:r.icon,class:e.normalizeClass(l.value.iconClass)},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.createVNode(e.unref(p.default),{text:r.title||"",class:e.normalizeClass(e.unref(n.cn)("font-semibold",l.value.titleClass))},null,8,["text","class"]),r.description?(e.openBlock(),e.createBlock(e.unref(b.default),{key:0,position:"bottom",align:"center","side-offset":8},{trigger:e.withCtx(()=>[e.createVNode(e.unref(o.default),{name:"info",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-help transition-colors inline-flex",l.value.infoIconClass))},null,8,["class"])]),default:e.withCtx(()=>[e.createElementVNode("div",g,[e.createElementVNode("p",k,e.toDisplayString(r.description),1)])]),_:1})):e.createCommentVNode("",!0),r.showHelp?(e.openBlock(),e.createBlock(e.unref(o.default),{key:1,name:"circleQuestionMark",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-pointer transition-colors inline-flex",l.value.infoIconClass)),onClick:c[0]||(c[0]=t=>a("help"))},null,8,["class"])):e.createCommentVNode("",!0)])]),r.buttons&&r.buttons.length>0?(e.openBlock(),e.createElementBlock("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.buttons,(t,f)=>(e.openBlock(),e.createBlock(e.unref(x.default),{key:f,variant:t.variant,styletype:t.styletype,disabled:t.disabled,loading:t.loading,size:t.size,onClick:q=>m(t)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,size:"sm",class:"mr-1.5"},null,8,["name"])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",h,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),_:2},1032,["variant","styletype","disabled","loading","size","onClick"]))),128))])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"buttons")],2))}});exports.default=_;
 //# sourceMappingURL=JTitlebar.vue.cjs.map

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    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 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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"}
+{"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-8 px-3 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground text-md',\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-8 px-3 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold text-md',\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-8 px-3 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold text-md',\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-8 px-3 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700 text-md',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold text-md',\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        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('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-xs 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        :size=\"button.size\"\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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"}