@j-solution/components 1.7.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +413 -415
- package/assets/jwms-portal-frontend-Ct2Tc7yj.css +1 -0
- package/assets/styles/global-utilities.css +34 -0
- package/assets/styles/j-components.css +1 -1
- package/assets/styles/themes.css +443 -443
- package/components/atoms/JButton.vue.cjs +6 -1
- package/components/atoms/JButton.vue.cjs.map +1 -1
- package/components/atoms/JButton.vue.js +10 -85
- package/components/atoms/JButton.vue.js.map +1 -1
- package/components/atoms/JButton.vue2.cjs +1 -1
- package/components/atoms/JButton.vue2.cjs.map +1 -1
- package/components/atoms/JButton.vue2.js +85 -2
- package/components/atoms/JButton.vue2.js.map +1 -1
- package/components/atoms/JGrid.vue.cjs +1 -1
- package/components/atoms/JGrid.vue.js +1 -1
- package/components/atoms/JGrid.vue2.cjs +1 -1
- package/components/atoms/JGrid.vue2.cjs.map +1 -1
- package/components/atoms/JGrid.vue2.js +39 -35
- package/components/atoms/JGrid.vue2.js.map +1 -1
- package/components/atoms/JLabel.vue.cjs +1 -1
- package/components/atoms/JLabel.vue.cjs.map +1 -1
- package/components/atoms/JLabel.vue.js +26 -22
- package/components/atoms/JLabel.vue.js.map +1 -1
- package/components/atoms/JSectionTitle.vue.cjs +7 -0
- package/components/atoms/JSectionTitle.vue.cjs.map +1 -0
- package/components/atoms/JSectionTitle.vue.js +13 -0
- package/components/atoms/JSectionTitle.vue.js.map +1 -0
- package/components/atoms/JSectionTitle.vue2.cjs +2 -0
- package/components/atoms/JSectionTitle.vue2.cjs.map +1 -0
- package/components/atoms/JSectionTitle.vue2.js +67 -0
- package/components/atoms/JSectionTitle.vue2.js.map +1 -0
- package/components/atoms/JSplitter.vue.cjs +6 -1
- package/components/atoms/JSplitter.vue.cjs.map +1 -1
- package/components/atoms/JSplitter.vue.js +10 -59
- package/components/atoms/JSplitter.vue.js.map +1 -1
- package/components/atoms/JSplitter.vue2.cjs +1 -1
- package/components/atoms/JSplitter.vue2.cjs.map +1 -1
- package/components/atoms/JSplitter.vue2.js +59 -2
- package/components/atoms/JSplitter.vue2.js.map +1 -1
- package/components/examples/ExampleCrudPage.vue.cjs +1 -1
- package/components/examples/ExampleCrudPage.vue.cjs.map +1 -1
- package/components/examples/ExampleCrudPage.vue.js +228 -208
- package/components/examples/ExampleCrudPage.vue.js.map +1 -1
- package/components/examples/ExampleTabMappingPage.vue.cjs +1 -1
- package/components/examples/ExampleTabMappingPage.vue.cjs.map +1 -1
- package/components/examples/ExampleTabMappingPage.vue.js +341 -368
- package/components/examples/ExampleTabMappingPage.vue.js.map +1 -1
- package/components/molecules/JAlert.vue.cjs +1 -1
- package/components/molecules/JAlert.vue.cjs.map +1 -1
- package/components/molecules/JAlert.vue.js +18 -16
- package/components/molecules/JAlert.vue.js.map +1 -1
- package/components/molecules/JCard.vue.cjs +1 -1
- package/components/molecules/JCard.vue.cjs.map +1 -1
- package/components/molecules/JCard.vue.js +55 -39
- package/components/molecules/JCard.vue.js.map +1 -1
- package/components/molecules/JEmptyState.vue.cjs +7 -0
- package/components/molecules/JEmptyState.vue.cjs.map +1 -0
- package/components/molecules/JEmptyState.vue.js +13 -0
- package/components/molecules/JEmptyState.vue.js.map +1 -0
- package/components/molecules/JEmptyState.vue2.cjs +2 -0
- package/components/molecules/JEmptyState.vue2.cjs.map +1 -0
- package/components/molecules/JEmptyState.vue2.js +127 -0
- package/components/molecules/JEmptyState.vue2.js.map +1 -0
- package/components/molecules/JFormField.vue.cjs +6 -1
- package/components/molecules/JFormField.vue.cjs.map +1 -1
- package/components/molecules/JFormField.vue.js +10 -264
- package/components/molecules/JFormField.vue.js.map +1 -1
- package/components/molecules/JFormField.vue2.cjs +2 -0
- package/components/molecules/JFormField.vue2.cjs.map +1 -0
- package/components/molecules/JFormField.vue2.js +271 -0
- package/components/molecules/JFormField.vue2.js.map +1 -0
- package/components/molecules/JTabs.vue.cjs +1 -1
- package/components/molecules/JTabs.vue.js +1 -1
- package/components/molecules/JTabs.vue2.cjs +1 -1
- package/components/molecules/JTabs.vue2.cjs.map +1 -1
- package/components/molecules/JTabs.vue2.js +44 -50
- package/components/molecules/JTabs.vue2.js.map +1 -1
- package/components/molecules/JTitlebar.vue.cjs +1 -1
- package/components/molecules/JTitlebar.vue.cjs.map +1 -1
- package/components/molecules/JTitlebar.vue.js +23 -20
- package/components/molecules/JTitlebar.vue.js.map +1 -1
- package/components/organisms/JDynamicForm.vue2.cjs +1 -1
- package/components/organisms/JDynamicForm.vue2.cjs.map +1 -1
- package/components/organisms/JDynamicForm.vue2.js +35 -32
- package/components/organisms/JDynamicForm.vue2.js.map +1 -1
- package/components/organisms/JDynamicTabs.vue.cjs +1 -1
- package/components/organisms/JDynamicTabs.vue.cjs.map +1 -1
- package/components/organisms/JDynamicTabs.vue.js +47 -52
- package/components/organisms/JDynamicTabs.vue.js.map +1 -1
- package/components/organisms/JFilterBar.vue.cjs +6 -1
- package/components/organisms/JFilterBar.vue.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue.js +10 -137
- package/components/organisms/JFilterBar.vue.js.map +1 -1
- package/components/organisms/JFilterBar.vue2.cjs +1 -1
- package/components/organisms/JFilterBar.vue2.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue2.js +143 -2
- package/components/organisms/JFilterBar.vue2.js.map +1 -1
- package/components/organisms/JFormModal.vue.cjs +1 -1
- package/components/organisms/JFormModal.vue.cjs.map +1 -1
- package/components/organisms/JFormModal.vue.js +54 -49
- package/components/organisms/JFormModal.vue.js.map +1 -1
- package/components/organisms/JHeader.vue.cjs +1 -1
- package/components/organisms/JHeader.vue.cjs.map +1 -1
- package/components/organisms/JHeader.vue.js +191 -190
- package/components/organisms/JHeader.vue.js.map +1 -1
- package/components/organisms/JModal.vue.cjs +1 -1
- package/components/organisms/JModal.vue.cjs.map +1 -1
- package/components/organisms/JModal.vue.js +47 -45
- package/components/organisms/JModal.vue.js.map +1 -1
- package/components/organisms/JPageContainer.vue.cjs +1 -1
- package/components/organisms/JPageContainer.vue.cjs.map +1 -1
- package/components/organisms/JPageContainer.vue.js +22 -22
- package/components/organisms/JPageContainer.vue.js.map +1 -1
- package/components/organisms/JSearchPanel.vue2.cjs +1 -1
- package/components/organisms/JSearchPanel.vue2.cjs.map +1 -1
- package/components/organisms/JSearchPanel.vue2.js +34 -32
- package/components/organisms/JSearchPanel.vue2.js.map +1 -1
- package/components/organisms/JShuttle.vue.cjs +7 -0
- package/components/organisms/JShuttle.vue.cjs.map +1 -0
- package/components/organisms/JShuttle.vue.js +13 -0
- package/components/organisms/JShuttle.vue.js.map +1 -0
- package/components/organisms/JShuttle.vue2.cjs +2 -0
- package/components/organisms/JShuttle.vue2.cjs.map +1 -0
- package/components/organisms/JShuttle.vue2.js +216 -0
- package/components/organisms/JShuttle.vue2.js.map +1 -0
- package/components/organisms/JSidebar/JSidebar.vue.cjs +2 -0
- package/components/organisms/JSidebar/JSidebar.vue.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebar.vue.js +189 -0
- package/components/organisms/JSidebar/JSidebar.vue.js.map +1 -0
- package/components/{molecules/JFormField.vue3.cjs → organisms/JSidebar/JSidebar.vue2.cjs} +2 -2
- package/components/organisms/JSidebar/JSidebar.vue2.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebar.vue2.js +5 -0
- package/components/organisms/JSidebar/JSidebar.vue2.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.js +89 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.js +5 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.js +79 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.js +5 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.js.map +1 -0
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs.map +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js +52 -52
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js.map +1 -1
- package/components/shadcn/Card.vue.cjs +1 -1
- package/components/shadcn/Card.vue.cjs.map +1 -1
- package/components/shadcn/Card.vue.js +1 -1
- package/components/shadcn/Card.vue.js.map +1 -1
- package/components/shadcn/CardContent.vue.cjs +1 -1
- package/components/shadcn/CardContent.vue.cjs.map +1 -1
- package/components/shadcn/CardContent.vue.js +4 -4
- package/components/shadcn/CardContent.vue.js.map +1 -1
- package/components/shadcn/CardHeader.vue.cjs +1 -1
- package/components/shadcn/CardHeader.vue.cjs.map +1 -1
- package/components/shadcn/CardHeader.vue.js +5 -5
- package/components/shadcn/CardHeader.vue.js.map +1 -1
- package/components/shadcn/Input.vue.cjs +1 -1
- package/components/shadcn/Input.vue.cjs.map +1 -1
- package/components/shadcn/Input.vue.js +3 -3
- package/components/shadcn/Input.vue.js.map +1 -1
- package/components/shadcn/SelectTrigger.vue.cjs +1 -1
- package/components/shadcn/SelectTrigger.vue.cjs.map +1 -1
- package/components/shadcn/SelectTrigger.vue.js +1 -1
- package/components/shadcn/SelectTrigger.vue.js.map +1 -1
- package/components/shadcn/TabsContent.vue.cjs +1 -1
- package/components/shadcn/TabsContent.vue.cjs.map +1 -1
- package/components/shadcn/TabsContent.vue.js +1 -1
- package/components/shadcn/TabsContent.vue.js.map +1 -1
- package/components/shadcn/TabsList.vue.cjs +1 -1
- package/components/shadcn/TabsList.vue.cjs.map +1 -1
- package/components/shadcn/TabsList.vue.js +10 -10
- package/components/shadcn/TabsList.vue.js.map +1 -1
- package/components/shadcn/Textarea.vue.cjs +1 -1
- package/components/shadcn/Textarea.vue.cjs.map +1 -1
- package/components/shadcn/Textarea.vue.js +1 -1
- package/components/shadcn/Textarea.vue.js.map +1 -1
- package/components/shadcn/index.cjs +1 -1
- package/components/shadcn/index.cjs.map +1 -1
- package/components/shadcn/index.js +4 -4
- package/components/shadcn/index.js.map +1 -1
- package/components/templates/JLayout.vue.cjs.map +1 -1
- package/components/templates/JLayout.vue.js.map +1 -1
- package/components/templates/JLayoutSimple.vue.cjs +1 -1
- package/components/templates/JLayoutSimple.vue.cjs.map +1 -1
- package/components/templates/JLayoutSimple.vue.js +36 -30
- package/components/templates/JLayoutSimple.vue.js.map +1 -1
- package/index.cjs +1 -1
- package/index.js +75 -67
- package/package.json +1 -1
- package/types/index.d.ts +662 -461
- package/types/sidebar.types.cjs +2 -0
- package/types/sidebar.types.cjs.map +1 -0
- package/types/sidebar.types.js +5 -0
- package/types/sidebar.types.js.map +1 -0
- package/assets/jwms-portal-frontend-CwxPfHfa.css +0 -1
- package/components/molecules/JFormField.vue3.cjs.map +0 -1
- package/components/molecules/JFormField.vue3.js +0 -6
- package/components/molecules/JFormField.vue3.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JGrid.vue2.js","sources":["../../../../src/components/atoms/JGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onUnmounted } from 'vue'\nimport { AgGridVue } from 'ag-grid-vue3'\nimport type {\n ColDef,\n GridOptions,\n RowClickedEvent,\n CellClickedEvent,\n SelectionChangedEvent,\n CellValueChangedEvent,\n RowDoubleClickedEvent,\n GridReadyEvent,\n ICellRendererParams,\n} from 'ag-grid-community'\nimport { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'\n// Enterprise 모듈 import (Grouping, Pivot, Excel Export 등)\nimport { AllEnterpriseModule } from 'ag-grid-enterprise'\n// ag-grid.css는 제거 - v34에서 Theming API와 충돌 방지\n// 테마 CSS 파일만 사용 (클래스 기반 테마)\n// v34에서는 dark 테마가 같은 CSS 파일 안에 포함되어 있음\n// 예: ag-theme-quartz.css에 .ag-theme-quartz-dark 클래스 포함\nimport 'ag-grid-community/styles/ag-theme-quartz.css'\nimport 'ag-grid-community/styles/ag-theme-alpine.css'\nimport 'ag-grid-community/styles/ag-theme-balham.css'\n\n// AG Grid 모듈 등록 (Community + Enterprise)\nModuleRegistry.registerModules([AllCommunityModule, AllEnterpriseModule])\n\n/**\n * Action Button 정의 타입\n */\nexport type ActionButton = {\n /** 버튼 아이콘 이름 (lucide) - label이 없을 때 기본 텍스트 생성에 사용 */\n icon?: string\n /** 버튼 라벨 */\n label?: string\n /** 툴팁 텍스트 */\n tooltip?: string\n /** 버튼 클릭 핸들러 (rowData 전달) */\n onClick: (rowData: any) => void\n /** 버튼 스타일 타입 */\n styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n /** 조건부 표시 함수 (rowData를 받아 boolean 반환) */\n show?: (rowData: any) => boolean\n}\n\nconst props = withDefaults(\n defineProps<{\n /** 그리드에 표시할 데이터 배열 */\n rowData: any[]\n /** 컬럼 정의 배열 */\n columnDefs: ColDef[]\n /** ag-Grid 테마 */\n theme?: string\n /** 페이지네이션 활성화 여부 */\n pagination?: boolean\n /** 체크박스 선택 활성화 여부 */\n checkbox?: boolean\n /** 행 번호 표시 여부 (Enterprise) */\n rowNumbers?: boolean\n /** 행별 액션 버튼 목록 */\n actionButtons?: ActionButton[]\n /** 다크모드 자동 감지 여부 */\n autoDetectDarkMode?: boolean\n /** 요약 컬럼 표시 여부 */\n summaryColumn?: boolean\n /** 숨김 컬럼 관리 활성화 여부 */\n hiddenColumn?: boolean\n /** 그룹핑 기능 활성화 여부 (Enterprise) */\n enableGrouping?: boolean\n /** 피벗 기능 활성화 여부 (Enterprise) */\n enablePivot?: boolean\n /** Excel 내보내기 기능 활성화 여부 (Enterprise) */\n enableExcelExport?: boolean\n /** Tree Data 기능 활성화 여부 (Enterprise) */\n enableTreeData?: boolean\n /** Tree Data 계층 경로를 반환하는 함수 */\n getDataPath?: (data: any) => (string | number)[]\n /** Tree Data 그룹 컬럼 정의 */\n autoGroupColumnDef?: ColDef\n /** 선택된 행 데이터 배열 (v-model:selected-rows) */\n selectedRows?: any[]\n /** 컬럼 호버 하이라이트 활성화 여부 */\n columnHover?: boolean\n /** Columns Tool Panel 활성화 여부 (Enterprise) */\n enableColumnsToolPanel?: boolean\n /** Status Bar 활성화 여부 (Enterprise) */\n statusBar?: boolean\n /** 간소화된 Footer 모드 (Status Bar 제거, Pagination만 표시) */\n compactFooter?: boolean\n /** Row Group Panel 표시 여부 ('always' | 'onlyWhenGrouping' | 'never') */\n rowGroupPanelShow?: 'always' | 'onlyWhenGrouping' | 'never'\n /** 그룹 기본 확장 레벨 (-1: 모두 닫힘, 0: 첫 레벨만, 1: 2레벨까지...) */\n groupDefaultExpanded?: number\n /** Pivot Mode Panel 표시 여부 */\n pivotPanelShow?: 'always' | 'onlyWhenPivoting' | 'never'\n /** Pivot Mode 활성화 여부 */\n pivotMode?: boolean\n }>(),\n {\n theme: 'ag-theme-balham',\n pagination: true,\n checkbox: false,\n rowNumbers: true,\n actionButtons: undefined,\n autoDetectDarkMode: true,\n summaryColumn: false,\n hiddenColumn: false,\n enableGrouping: true,\n enablePivot: false,\n enableExcelExport: false,\n enableTreeData: false,\n getDataPath: undefined,\n autoGroupColumnDef: undefined,\n selectedRows: () => [],\n columnHover: true,\n enableColumnsToolPanel: true,\n statusBar: true,\n compactFooter: false,\n rowGroupPanelShow: 'never',\n groupDefaultExpanded: -1,\n pivotPanelShow: 'never',\n pivotMode: false,\n },\n)\n\nconst emit = defineEmits<{\n /** 행 클릭 이벤트 */\n rowClicked: [event: RowClickedEvent]\n /** 행 더블클릭 이벤트 */\n rowDoubleClicked: [event: RowDoubleClickedEvent]\n /** 셀 클릭 이벤트 */\n cellClicked: [event: CellClickedEvent]\n /** 선택 변경 이벤트 (체크박스 등) */\n selectionChanged: [event: SelectionChangedEvent]\n /** 셀 값 변경 이벤트 */\n cellValueChanged: [event: CellValueChangedEvent]\n /** 그리드 준비 완료 이벤트 */\n gridReady: [event: GridReadyEvent]\n /** 선택된 행 변경 이벤트 (v-model:selected-rows) */\n 'update:selectedRows': [rows: any[]]\n}>()\n\n// ag-Grid 인스턴스 참조\nconst gridApi = ref<any>(null)\nconst gridColumnApi = ref<any>(null)\n\n// 다크모드 상태\nconst isDarkMode = ref(false)\n\n// 다크모드 감지 함수\nconst detectDarkMode = () => {\n isDarkMode.value = document.documentElement.classList.contains('dark')\n}\n\n// 현재 테마 계산 (다크모드 자동 전환)\nconst currentTheme = computed(() => {\n if (!props.autoDetectDarkMode) {\n return props.theme\n }\n \n const baseTheme = props.theme\n if (isDarkMode.value) {\n // 이미 dark 테마인 경우 그대로 유지, 아니면 -dark 추가\n return baseTheme.includes('-dark') ? baseTheme : `${baseTheme}-dark`\n } else {\n // dark 테마 제거\n return baseTheme.replace(/-dark$/, '')\n }\n})\n\n// Action Buttons Cell Renderer - 함수형으로 DOM 직접 생성\nconst ActionButtonsCellRenderer = (params: ICellRendererParams) => {\n const buttons = props.actionButtons || []\n const rowData = params.data\n \n // 표시할 버튼 필터링\n const visibleButtons = buttons.filter(btn => {\n if (btn.show) {\n return btn.show(rowData)\n }\n return true\n })\n \n if (visibleButtons.length === 0) {\n return ''\n }\n \n // 컨테이너 div 생성\n const container = document.createElement('div')\n container.className = 'flex items-center gap-1'\n \n // 각 버튼 생성\n visibleButtons.forEach((btn) => {\n const button = document.createElement('button')\n button.className = 'px-2 py-1 text-xs border rounded transition-colors'\n \n // styletype에 따른 클래스 추가\n if (btn.styletype === 'danger') {\n button.className += ' bg-red-50 border-red-400 text-red-700 hover:bg-red-100 dark:bg-red-950 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900'\n } else {\n button.className += ' bg-gray-50 border-gray-400 text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'\n }\n \n // tooltip\n if (btn.tooltip) {\n button.title = btn.tooltip\n }\n \n // 라벨 추가 (텍스트 버튼)\n if (btn.label) {\n button.textContent = btn.label\n } else if (btn.icon) {\n // 라벨이 없으면 기본 텍스트 생성\n if (btn.icon === 'pencil') {\n button.textContent = '수정'\n } else if (btn.icon === 'trash2' || btn.icon === 'trash') {\n button.textContent = '삭제'\n } else if (btn.icon === 'eye') {\n button.textContent = '보기'\n } else if (btn.icon === 'copy') {\n button.textContent = '복사'\n } else if (btn.icon === 'download') {\n button.textContent = '다운로드'\n } else if (btn.icon === 'circleX') {\n button.textContent = '비활성화'\n } else if (btn.icon === 'circleCheckBig') {\n button.textContent = '활성화'\n } else {\n button.textContent = btn.icon\n }\n }\n \n // 클릭 이벤트\n button.addEventListener('click', (e) => {\n e.stopPropagation()\n btn.onClick(rowData)\n })\n \n container.appendChild(button)\n })\n \n return container\n}\n\n// Action Buttons 컬럼 정의\nconst actionButtonsColumn = computed<ColDef | null>(() => {\n if (!props.actionButtons || props.actionButtons.length === 0) {\n return null\n }\n \n return {\n colId: 'actionButtons',\n headerName: '작업',\n field: '_actions',\n width: 120,\n minWidth: 80,\n maxWidth: 200,\n lockPosition: 'left' as const,\n sortable: false,\n filter: false,\n resizable: true,\n suppressNavigable: true,\n suppressHeaderMenuButton: true,\n cellRenderer: ActionButtonsCellRenderer,\n cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\n }\n})\n\n// checkbox 활성화 및 추가 컬럼 처리\nconst processedColumnDefs = computed(() => {\n const columns: ColDef[] = []\n \n // 1. Checkbox 컬럼 (최우선)\n if (props.checkbox) {\n columns.push({\n colId: 'rowSelection',\n headerName: '',\n // field와 valueGetter 제거 - AG Grid 공식 방식\n width: 50,\n minWidth: 50,\n maxWidth: 50,\n lockPosition: 'left' as const,\n checkboxSelection: true,\n headerCheckboxSelection: true,\n sortable: false,\n filter: false,\n resizable: false,\n suppressNavigable: true,\n suppressHeaderMenuButton: true,\n cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\n })\n }\n \n // 2. Action Buttons 컬럼\n if (actionButtonsColumn.value) {\n columns.push(actionButtonsColumn.value)\n }\n \n // 3. 사용자 정의 컬럼들 (Row Numbers는 AG Grid가 자동으로 추가)\n columns.push(...props.columnDefs)\n \n return columns\n})\n\n// Grid 옵션 설정\nconst gridOptions = computed<GridOptions>(() => {\n const options: GridOptions = {\n // theme 옵션 제거 - 클래스 기반 테마(:class=\"theme\") 사용\n // columnDefs와 rowData는 prop으로 전달하므로 여기서 제거\n pagination: props.pagination,\n rowSelection: props.checkbox ? 'multiple' : undefined,\n // 체크박스 모드일 때 row 클릭으로 선택이 변경되지 않도록 설정\n // 체크박스만으로 선택을 제어하도록 함\n suppressRowClickSelection: props.checkbox,\n\n // Row Numbers (Enterprise) - AG Grid 표준 방식\n rowNumbers: props.rowNumbers,\n\n // Column Hover Highlight\n columnHoverHighlight: props.columnHover,\n\n // Enterprise 기능 옵션\n sideBar: props.enableColumnsToolPanel || props.enableGrouping || props.enablePivot ? {\n toolPanels: [\n {\n id: 'columns',\n labelDefault: 'Columns',\n labelKey: 'columns',\n iconKey: 'columns',\n toolPanel: 'agColumnsToolPanel',\n toolPanelParams: {\n suppressRowGroups: !props.enableGrouping,\n suppressValues: !props.enablePivot,\n suppressPivots: !props.enablePivot,\n suppressPivotMode: !props.enablePivot,\n },\n },\n ],\n defaultToolPanel: '', // 초기에는 접힌 상태\n } : undefined,\n\n // Status Bar (Enterprise)\n // compactFooter 모드에서는 Status Bar 비활성화\n statusBar: (props.statusBar && !props.compactFooter) ? {\n statusPanels: [\n { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' as const },\n { statusPanel: 'agSelectedRowCountComponent', align: 'left' as const },\n { statusPanel: 'agAggregationComponent', align: 'right' as const },\n ],\n } : undefined,\n\n // Row Group Panel 설정 (Enterprise) - 그리드 상단에 드래그 영역 표시\n rowGroupPanelShow: props.rowGroupPanelShow !== 'never' ? props.rowGroupPanelShow : undefined,\n\n // Pivot Panel 설정 (Enterprise) - 피벗 모드용 드래그 영역\n pivotPanelShow: props.pivotPanelShow !== 'never' ? props.pivotPanelShow : undefined,\n \n // Pivot Mode 활성화\n pivotMode: props.pivotMode,\n\n // 그룹핑 기본 설정\n groupDefaultExpanded: props.groupDefaultExpanded,\n suppressAggFuncInHeader: false,\n\n // Tree Data 설정 (Enterprise)\n treeData: props.enableTreeData || undefined,\n getDataPath: props.enableTreeData\n ? (props.getDataPath || ((data: any) => data.path || []))\n : undefined,\n autoGroupColumnDef: props.enableTreeData && props.autoGroupColumnDef\n ? props.autoGroupColumnDef\n : undefined,\n }\n\n return options\n})\n\n// Excel 내보내기 함수 (외부에서 사용 가능하도록 expose)\nconst exportToExcel = () => {\n if (gridApi.value && props.enableExcelExport) {\n gridApi.value.exportDataAsExcel({\n fileName: 'grid-export.xlsx',\n })\n }\n}\n\n// 그리드 API를 외부에 노출\ndefineExpose({\n gridApi,\n gridColumnApi,\n exportToExcel,\n})\n\n// Grid ready 이벤트 핸들러\nconst onGridReady = (params: GridReadyEvent) => {\n gridApi.value = params.api\n gridColumnApi.value = params.api // v34에서 columnApi는 deprecated\n emit('gridReady', params)\n}\n\n// 행 클릭 이벤트 핸들러\nconst onRowClicked = (event: RowClickedEvent) => {\n emit('rowClicked', event)\n}\n\n// 행 더블클릭 이벤트 핸들러\nconst onRowDoubleClicked = (event: RowDoubleClickedEvent) => {\n emit('rowDoubleClicked', event)\n}\n\n// 셀 클릭 이벤트 핸들러\nconst onCellClicked = (event: CellClickedEvent) => {\n emit('cellClicked', event)\n}\n\n// 선택 변경 이벤트 핸들러\nconst onSelectionChanged = (event: SelectionChangedEvent) => {\n emit('selectionChanged', event)\n emit('update:selectedRows', event.api.getSelectedRows())\n}\n\n// 셀 값 변경 이벤트 핸들러\nconst onCellValueChanged = (event: CellValueChangedEvent) => {\n emit('cellValueChanged', event)\n}\n\n// MutationObserver로 다크모드 변경 감지\nlet darkModeObserver: MutationObserver | null = null\n\nonMounted(() => {\n if (props.autoDetectDarkMode) {\n // 초기 다크모드 상태 감지\n detectDarkMode()\n \n // MutationObserver로 class 변경 감지\n darkModeObserver = new MutationObserver(() => {\n detectDarkMode()\n })\n \n darkModeObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n })\n }\n})\n\nonUnmounted(() => {\n if (darkModeObserver) {\n darkModeObserver.disconnect()\n }\n})\n\n// columnDefs 변경 감지\nwatch(\n () => props.columnDefs,\n () => {\n if (gridApi.value) {\n gridApi.value.setGridOption('columnDefs', processedColumnDefs.value)\n }\n },\n { deep: true },\n)\n\n// rowData 변경 감지\nwatch(\n () => props.rowData,\n () => {\n if (gridApi.value) {\n gridApi.value.setGridOption('rowData', props.rowData)\n }\n },\n { deep: true },\n)\n</script>\n\n<template>\n <div class=\"ag-grid-container\">\n <AgGridVue\n :column-defs=\"processedColumnDefs\"\n :row-data=\"rowData\"\n :grid-options=\"gridOptions\"\n :class=\"currentTheme\"\n style=\"height: 100%; width: 100%\"\n @grid-ready=\"onGridReady\"\n @row-clicked=\"onRowClicked\"\n @row-double-clicked=\"onRowDoubleClicked\"\n @cell-clicked=\"onCellClicked\"\n @selection-changed=\"onSelectionChanged\"\n @cell-value-changed=\"onCellValueChanged\"\n />\n </div>\n</template>\n\n<style scoped>\n.ag-grid-container {\n width: 100%;\n height: 100%;\n}\n\n/* ============================================\n COMPACT FOOTER: Status Bar + Pagination 통합\n ============================================ */\n\n/* Status Bar 높이 줄이기 */\n:deep(.ag-status-bar) {\n min-height: 28px !important;\n height: 28px !important;\n padding: 0 12px !important;\n border-top: 1px solid var(--ag-border-color);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.8125rem;\n}\n\n/* Status Bar 컴포넌트들 높이 조정 */\n:deep(.ag-status-bar-left),\n:deep(.ag-status-bar-center),\n:deep(.ag-status-bar-right) {\n height: 28px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Status Bar 패널들 간격 조정 */\n:deep(.ag-status-panel) {\n padding: 0;\n height: 28px;\n display: flex;\n align-items: center;\n}\n\n/* Pagination Panel 높이 줄이기 */\n:deep(.ag-paging-panel) {\n min-height: 28px !important;\n height: 28px !important;\n padding: 0 12px !important;\n border-top: 1px solid var(--ag-border-color);\n font-size: 0.8125rem;\n}\n\n/* Pagination 컴포넌트들 높이 조정 */\n:deep(.ag-paging-page-size),\n:deep(.ag-paging-row-summary-panel) {\n height: 28px;\n display: flex;\n align-items: center;\n}\n\n/* Page Size Selector 높이 조정 */\n:deep(.ag-paging-page-size .ag-picker-field) {\n height: 24px;\n min-height: 24px;\n}\n\n:deep(.ag-paging-page-size .ag-picker-field-wrapper) {\n height: 24px;\n padding: 0 4px;\n}\n\n/* Pagination 버튼들 높이 조정 */\n:deep(.ag-paging-button) {\n height: 24px;\n width: 24px;\n padding: 2px;\n}\n\n/* Pagination 버튼 래퍼 */\n:deep(.ag-paging-button-wrapper) {\n height: 28px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n/* Row summary 텍스트 */\n:deep(.ag-paging-row-summary-panel-number) {\n line-height: 28px;\n}\n</style>\n"],"names":["ModuleRegistry","AllCommunityModule","AllEnterpriseModule","props","__props","emit","__emit","gridApi","ref","gridColumnApi","isDarkMode","detectDarkMode","currentTheme","computed","baseTheme","ActionButtonsCellRenderer","params","buttons","rowData","visibleButtons","btn","container","button","e","actionButtonsColumn","processedColumnDefs","columns","gridOptions","data","__expose","onGridReady","onRowClicked","event","onRowDoubleClicked","onCellClicked","onSelectionChanged","onCellValueChanged","darkModeObserver","onMounted","onUnmounted","watch","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","AgGridVue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAAA,EAAe,gBAAgB,CAACC,GAAoBC,CAAmB,CAAC;AAoBxE,UAAMC,IAAQC,GAgFRC,IAAOC,GAkBPC,IAAUC,EAAS,IAAI,GACvBC,IAAgBD,EAAS,IAAI,GAG7BE,IAAaF,EAAI,EAAK,GAGtBG,IAAiB,MAAM;AAC3B,MAAAD,EAAW,QAAQ,SAAS,gBAAgB,UAAU,SAAS,MAAM;AAAA,IACvE,GAGME,IAAeC,EAAS,MAAM;AAClC,UAAI,CAACV,EAAM;AACT,eAAOA,EAAM;AAGf,YAAMW,IAAYX,EAAM;AACxB,aAAIO,EAAW,QAENI,EAAU,SAAS,OAAO,IAAIA,IAAY,GAAGA,CAAS,UAGtDA,EAAU,QAAQ,UAAU,EAAE;AAAA,IAEzC,CAAC,GAGKC,IAA4B,CAACC,MAAgC;AACjE,YAAMC,IAAUd,EAAM,iBAAiB,CAAA,GACjCe,IAAUF,EAAO,MAGjBG,IAAiBF,EAAQ,OAAO,CAAAG,MAChCA,EAAI,OACCA,EAAI,KAAKF,CAAO,IAElB,EACR;AAED,UAAIC,EAAe,WAAW;AAC5B,eAAO;AAIT,YAAME,IAAY,SAAS,cAAc,KAAK;AAC9C,aAAAA,EAAU,YAAY,2BAGtBF,EAAe,QAAQ,CAACC,MAAQ;AAC9B,cAAME,IAAS,SAAS,cAAc,QAAQ;AAC9C,QAAAA,EAAO,YAAY,sDAGfF,EAAI,cAAc,WACpBE,EAAO,aAAa,wIAEpBA,EAAO,aAAa,+IAIlBF,EAAI,YACNE,EAAO,QAAQF,EAAI,UAIjBA,EAAI,QACNE,EAAO,cAAcF,EAAI,QAChBA,EAAI,SAETA,EAAI,SAAS,WACfE,EAAO,cAAc,OACZF,EAAI,SAAS,YAAYA,EAAI,SAAS,UAC/CE,EAAO,cAAc,OACZF,EAAI,SAAS,QACtBE,EAAO,cAAc,OACZF,EAAI,SAAS,SACtBE,EAAO,cAAc,OACZF,EAAI,SAAS,aACtBE,EAAO,cAAc,SACZF,EAAI,SAAS,YACtBE,EAAO,cAAc,SACZF,EAAI,SAAS,mBACtBE,EAAO,cAAc,QAErBA,EAAO,cAAcF,EAAI,OAK7BE,EAAO,iBAAiB,SAAS,CAACC,MAAM;AACtC,UAAAA,EAAE,gBAAA,GACFH,EAAI,QAAQF,CAAO;AAAA,QACrB,CAAC,GAEDG,EAAU,YAAYC,CAAM;AAAA,MAC9B,CAAC,GAEMD;AAAA,IACT,GAGMG,IAAsBX,EAAwB,MAC9C,CAACV,EAAM,iBAAiBA,EAAM,cAAc,WAAW,IAClD,OAGF;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,cAAc;AAAA,MACd,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,0BAA0B;AAAA,MAC1B,cAAcY;AAAA,MACd,WAAW,EAAE,SAAS,QAAQ,gBAAgB,UAAU,YAAY,SAAA;AAAA,IAAS,CAEhF,GAGKU,IAAsBZ,EAAS,MAAM;AACzC,YAAMa,IAAoB,CAAA;AAG1B,aAAIvB,EAAM,YACRuB,EAAQ,KAAK;AAAA,QACX,OAAO;AAAA,QACP,YAAY;AAAA;AAAA,QAEZ,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,cAAc;AAAA,QACd,mBAAmB;AAAA,QACnB,yBAAyB;AAAA,QACzB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB,0BAA0B;AAAA,QAC1B,WAAW,EAAE,SAAS,QAAQ,gBAAgB,UAAU,YAAY,SAAA;AAAA,MAAS,CAC9E,GAICF,EAAoB,SACtBE,EAAQ,KAAKF,EAAoB,KAAK,GAIxCE,EAAQ,KAAK,GAAGvB,EAAM,UAAU,GAEzBuB;AAAA,IACT,CAAC,GAGKC,IAAcd,EAAsB,OACX;AAAA;AAAA;AAAA,MAG3B,YAAYV,EAAM;AAAA,MAClB,cAAcA,EAAM,WAAW,aAAa;AAAA;AAAA;AAAA,MAG5C,2BAA2BA,EAAM;AAAA;AAAA,MAGjC,YAAYA,EAAM;AAAA;AAAA,MAGlB,sBAAsBA,EAAM;AAAA;AAAA,MAG5B,SAASA,EAAM,0BAA0BA,EAAM,kBAAkBA,EAAM,cAAc;AAAA,QACnF,YAAY;AAAA,UACV;AAAA,YACE,IAAI;AAAA,YACJ,cAAc;AAAA,YACd,UAAU;AAAA,YACV,SAAS;AAAA,YACT,WAAW;AAAA,YACX,iBAAiB;AAAA,cACf,mBAAmB,CAACA,EAAM;AAAA,cAC1B,gBAAgB,CAACA,EAAM;AAAA,cACvB,gBAAgB,CAACA,EAAM;AAAA,cACvB,mBAAmB,CAACA,EAAM;AAAA,YAAA;AAAA,UAC5B;AAAA,QACF;AAAA,QAEF,kBAAkB;AAAA;AAAA,MAAA,IAChB;AAAA;AAAA;AAAA,MAIJ,WAAYA,EAAM,aAAa,CAACA,EAAM,gBAAiB;AAAA,QACrD,cAAc;AAAA,UACZ,EAAE,aAAa,uCAAuC,OAAO,OAAA;AAAA,UAC7D,EAAE,aAAa,+BAA+B,OAAO,OAAA;AAAA,UACrD,EAAE,aAAa,0BAA0B,OAAO,QAAA;AAAA,QAAiB;AAAA,MACnE,IACE;AAAA;AAAA,MAGJ,mBAAmBA,EAAM,sBAAsB,UAAUA,EAAM,oBAAoB;AAAA;AAAA,MAGnF,gBAAgBA,EAAM,mBAAmB,UAAUA,EAAM,iBAAiB;AAAA;AAAA,MAG1E,WAAWA,EAAM;AAAA;AAAA,MAGjB,sBAAsBA,EAAM;AAAA,MAC5B,yBAAyB;AAAA;AAAA,MAGzB,UAAUA,EAAM,kBAAkB;AAAA,MAClC,aAAaA,EAAM,iBACdA,EAAM,gBAAgB,CAACyB,MAAcA,EAAK,QAAQ,CAAA,KACnD;AAAA,MACJ,oBAAoBzB,EAAM,kBAAkBA,EAAM,qBAC9CA,EAAM,qBACN;AAAA,IAAA,EAIP;AAYD,IAAA0B,EAAa;AAAA,MACX,SAAAtB;AAAA,MACA,eAAAE;AAAA,MACA,eAZoB,MAAM;AAC1B,QAAIF,EAAQ,SAASJ,EAAM,qBACzBI,EAAQ,MAAM,kBAAkB;AAAA,UAC9B,UAAU;AAAA,QAAA,CACX;AAAA,MAEL;AAAA,IAME,CACD;AAGD,UAAMuB,IAAc,CAACd,MAA2B;AAC9C,MAAAT,EAAQ,QAAQS,EAAO,KACvBP,EAAc,QAAQO,EAAO,KAC7BX,EAAK,aAAaW,CAAM;AAAA,IAC1B,GAGMe,IAAe,CAACC,MAA2B;AAC/C,MAAA3B,EAAK,cAAc2B,CAAK;AAAA,IAC1B,GAGMC,IAAqB,CAACD,MAAiC;AAC3D,MAAA3B,EAAK,oBAAoB2B,CAAK;AAAA,IAChC,GAGME,IAAgB,CAACF,MAA4B;AACjD,MAAA3B,EAAK,eAAe2B,CAAK;AAAA,IAC3B,GAGMG,IAAqB,CAACH,MAAiC;AAC3D,MAAA3B,EAAK,oBAAoB2B,CAAK,GAC9B3B,EAAK,uBAAuB2B,EAAM,IAAI,gBAAA,CAAiB;AAAA,IACzD,GAGMI,IAAqB,CAACJ,MAAiC;AAC3D,MAAA3B,EAAK,oBAAoB2B,CAAK;AAAA,IAChC;AAGA,QAAIK,IAA4C;AAEhD,WAAAC,EAAU,MAAM;AACd,MAAInC,EAAM,uBAERQ,EAAA,GAGA0B,IAAmB,IAAI,iBAAiB,MAAM;AAC5C,QAAA1B,EAAA;AAAA,MACF,CAAC,GAED0B,EAAiB,QAAQ,SAAS,iBAAiB;AAAA,QACjD,YAAY;AAAA,QACZ,iBAAiB,CAAC,OAAO;AAAA,MAAA,CAC1B;AAAA,IAEL,CAAC,GAEDE,EAAY,MAAM;AAChB,MAAIF,KACFA,EAAiB,WAAA;AAAA,IAErB,CAAC,GAGDG;AAAA,MACE,MAAMrC,EAAM;AAAA,MACZ,MAAM;AACJ,QAAII,EAAQ,SACVA,EAAQ,MAAM,cAAc,cAAckB,EAAoB,KAAK;AAAA,MAEvE;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK,GAIfe;AAAA,MACE,MAAMrC,EAAM;AAAA,MACZ,MAAM;AACJ,QAAII,EAAQ,SACVA,EAAQ,MAAM,cAAc,WAAWJ,EAAM,OAAO;AAAA,MAExD;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK,cAKbsC,EAAA,GAAAC,EAcM,OAdNC,GAcM;AAAA,MAbJC,EAYEC,EAAAC,CAAA,GAAA;AAAA,QAXC,eAAarB,EAAA;AAAA,QACb,YAAUrB,EAAA;AAAA,QACV,gBAAcuB,EAAA;AAAA,QACd,SAAOf,EAAA,KAAY;AAAA,QACpB,OAAA,EAAA,QAAA,QAAA,OAAA,OAAA;AAAA,QACC,aAAAkB;AAAA,QACA,cAAAC;AAAA,QACA,oBAAAE;AAAA,QACA,eAAAC;AAAA,QACA,oBAAAC;AAAA,QACA,oBAAAC;AAAA,MAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"JGrid.vue2.js","sources":["../../../../src/components/atoms/JGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onUnmounted } from 'vue'\nimport { AgGridVue } from 'ag-grid-vue3'\nimport { cn } from '@/lib/utils'\nimport type {\n ColDef,\n GridOptions,\n RowClickedEvent,\n CellClickedEvent,\n SelectionChangedEvent,\n CellValueChangedEvent,\n RowDoubleClickedEvent,\n GridReadyEvent,\n ICellRendererParams,\n} from 'ag-grid-community'\nimport { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'\n// Enterprise 모듈 import (Grouping, Pivot, Excel Export 등)\nimport { AllEnterpriseModule } from 'ag-grid-enterprise'\n// ag-grid.css는 제거 - v34에서 Theming API와 충돌 방지\n// 테마 CSS 파일만 사용 (클래스 기반 테마)\n// v34에서는 dark 테마가 같은 CSS 파일 안에 포함되어 있음\n// 예: ag-theme-quartz.css에 .ag-theme-quartz-dark 클래스 포함\nimport 'ag-grid-community/styles/ag-theme-quartz.css'\nimport 'ag-grid-community/styles/ag-theme-alpine.css'\nimport 'ag-grid-community/styles/ag-theme-balham.css'\n\n// AG Grid 모듈 등록 (Community + Enterprise)\nModuleRegistry.registerModules([AllCommunityModule, AllEnterpriseModule])\n\n/**\n * Action Button 정의 타입\n */\nexport type ActionButton = {\n /** 버튼 아이콘 이름 (lucide) - label이 없을 때 기본 텍스트 생성에 사용 */\n icon?: string\n /** 버튼 라벨 */\n label?: string\n /** 툴팁 텍스트 */\n tooltip?: string\n /** 버튼 클릭 핸들러 (rowData 전달) */\n onClick: (rowData: any) => void\n /** 버튼 스타일 타입 */\n styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n /** 조건부 표시 함수 (rowData를 받아 boolean 반환) */\n show?: (rowData: any) => boolean\n}\n\nconst props = withDefaults(\n defineProps<{\n /** 추가 클래스 (외부 커스터마이징용) */\n class?: string\n /** 그리드에 표시할 데이터 배열 */\n rowData: any[]\n /** 컬럼 정의 배열 */\n columnDefs: ColDef[]\n /** ag-Grid 테마 */\n theme?: string\n /** 페이지네이션 활성화 여부 */\n pagination?: boolean\n /** 체크박스 선택 활성화 여부 */\n checkbox?: boolean\n /** 행 번호 표시 여부 (Enterprise) */\n rowNumbers?: boolean\n /** 행별 액션 버튼 목록 */\n actionButtons?: ActionButton[]\n /** 다크모드 자동 감지 여부 */\n autoDetectDarkMode?: boolean\n /** 요약 컬럼 표시 여부 */\n summaryColumn?: boolean\n /** 숨김 컬럼 관리 활성화 여부 */\n hiddenColumn?: boolean\n /** 그룹핑 기능 활성화 여부 (Enterprise) */\n enableGrouping?: boolean\n /** 피벗 기능 활성화 여부 (Enterprise) */\n enablePivot?: boolean\n /** Excel 내보내기 기능 활성화 여부 (Enterprise) */\n enableExcelExport?: boolean\n /** Tree Data 기능 활성화 여부 (Enterprise) */\n enableTreeData?: boolean\n /** Tree Data 계층 경로를 반환하는 함수 */\n getDataPath?: (data: any) => (string | number)[]\n /** Tree Data 그룹 컬럼 정의 */\n autoGroupColumnDef?: ColDef\n /** 선택된 행 데이터 배열 (v-model:selected-rows) */\n selectedRows?: any[]\n /** 컬럼 호버 하이라이트 활성화 여부 */\n columnHover?: boolean\n /** Columns Tool Panel 활성화 여부 (Enterprise) */\n enableColumnsToolPanel?: boolean\n /** Status Bar 활성화 여부 (Enterprise) */\n statusBar?: boolean\n /** 간소화된 Footer 모드 (Status Bar 제거, Pagination만 표시) */\n compactFooter?: boolean\n /** Row Group Panel 표시 여부 ('always' | 'onlyWhenGrouping' | 'never') */\n rowGroupPanelShow?: 'always' | 'onlyWhenGrouping' | 'never'\n /** 그룹 기본 확장 레벨 (-1: 모두 닫힘, 0: 첫 레벨만, 1: 2레벨까지...) */\n groupDefaultExpanded?: number\n /** Pivot Mode Panel 표시 여부 */\n pivotPanelShow?: 'always' | 'onlyWhenPivoting' | 'never'\n /** Pivot Mode 활성화 여부 */\n pivotMode?: boolean\n }>(),\n {\n theme: 'ag-theme-balham',\n pagination: true,\n checkbox: false,\n rowNumbers: true,\n actionButtons: undefined,\n autoDetectDarkMode: true,\n summaryColumn: false,\n hiddenColumn: false,\n enableGrouping: true,\n enablePivot: false,\n enableExcelExport: false,\n enableTreeData: false,\n getDataPath: undefined,\n autoGroupColumnDef: undefined,\n selectedRows: () => [],\n columnHover: true,\n enableColumnsToolPanel: true,\n statusBar: true,\n compactFooter: false,\n rowGroupPanelShow: 'never',\n groupDefaultExpanded: -1,\n pivotPanelShow: 'never',\n pivotMode: false,\n },\n)\n\nconst emit = defineEmits<{\n /** 행 클릭 이벤트 */\n rowClicked: [event: RowClickedEvent]\n /** 행 더블클릭 이벤트 */\n rowDoubleClicked: [event: RowDoubleClickedEvent]\n /** 셀 클릭 이벤트 */\n cellClicked: [event: CellClickedEvent]\n /** 선택 변경 이벤트 (체크박스 등) */\n selectionChanged: [event: SelectionChangedEvent]\n /** 셀 값 변경 이벤트 */\n cellValueChanged: [event: CellValueChangedEvent]\n /** 그리드 준비 완료 이벤트 */\n gridReady: [event: GridReadyEvent]\n /** 선택된 행 변경 이벤트 (v-model:selected-rows) */\n 'update:selectedRows': [rows: any[]]\n}>()\n\n// ag-Grid 인스턴스 참조\nconst gridApi = ref<any>(null)\nconst gridColumnApi = ref<any>(null)\n\n// 다크모드 상태\nconst isDarkMode = ref(false)\n\n// 다크모드 감지 함수\nconst detectDarkMode = () => {\n isDarkMode.value = document.documentElement.classList.contains('dark')\n}\n\n// 현재 테마 계산 (다크모드 자동 전환)\nconst currentTheme = computed(() => {\n if (!props.autoDetectDarkMode) {\n return props.theme\n }\n \n const baseTheme = props.theme\n if (isDarkMode.value) {\n // 이미 dark 테마인 경우 그대로 유지, 아니면 -dark 추가\n return baseTheme.includes('-dark') ? baseTheme : `${baseTheme}-dark`\n } else {\n // dark 테마 제거\n return baseTheme.replace(/-dark$/, '')\n }\n})\n\n// Action Buttons Cell Renderer - 함수형으로 DOM 직접 생성\nconst ActionButtonsCellRenderer = (params: ICellRendererParams) => {\n const buttons = props.actionButtons || []\n const rowData = params.data\n \n // 표시할 버튼 필터링\n const visibleButtons = buttons.filter(btn => {\n if (btn.show) {\n return btn.show(rowData)\n }\n return true\n })\n \n if (visibleButtons.length === 0) {\n return ''\n }\n \n // 컨테이너 div 생성\n const container = document.createElement('div')\n container.className = 'flex items-center gap-1'\n \n // 각 버튼 생성\n visibleButtons.forEach((btn) => {\n const button = document.createElement('button')\n button.className = 'px-2 py-1 text-xs border rounded transition-colors'\n \n // styletype에 따른 클래스 추가\n if (btn.styletype === 'danger') {\n button.className += ' bg-red-50 border-red-400 text-red-700 hover:bg-red-100 dark:bg-red-950 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900'\n } else {\n button.className += ' bg-gray-50 border-gray-400 text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'\n }\n \n // tooltip\n if (btn.tooltip) {\n button.title = btn.tooltip\n }\n \n // 라벨 추가 (텍스트 버튼)\n if (btn.label) {\n button.textContent = btn.label\n } else if (btn.icon) {\n // 라벨이 없으면 기본 텍스트 생성\n if (btn.icon === 'pencil') {\n button.textContent = '수정'\n } else if (btn.icon === 'trash2' || btn.icon === 'trash') {\n button.textContent = '삭제'\n } else if (btn.icon === 'eye') {\n button.textContent = '보기'\n } else if (btn.icon === 'copy') {\n button.textContent = '복사'\n } else if (btn.icon === 'download') {\n button.textContent = '다운로드'\n } else if (btn.icon === 'circleX') {\n button.textContent = '비활성화'\n } else if (btn.icon === 'circleCheckBig') {\n button.textContent = '활성화'\n } else {\n button.textContent = btn.icon\n }\n }\n \n // 클릭 이벤트\n button.addEventListener('click', (e) => {\n e.stopPropagation()\n btn.onClick(rowData)\n })\n \n container.appendChild(button)\n })\n \n return container\n}\n\n// Action Buttons 컬럼 정의\nconst actionButtonsColumn = computed<ColDef | null>(() => {\n if (!props.actionButtons || props.actionButtons.length === 0) {\n return null\n }\n \n return {\n colId: 'actionButtons',\n headerName: '작업',\n field: '_actions',\n width: 120,\n minWidth: 80,\n maxWidth: 200,\n lockPosition: 'left' as const,\n sortable: false,\n filter: false,\n resizable: true,\n suppressNavigable: true,\n suppressHeaderMenuButton: true,\n cellRenderer: ActionButtonsCellRenderer,\n cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\n }\n})\n\n// checkbox 활성화 및 추가 컬럼 처리\nconst processedColumnDefs = computed(() => {\n const columns: ColDef[] = []\n \n // 1. Checkbox 컬럼 (최우선)\n if (props.checkbox) {\n columns.push({\n colId: 'rowSelection',\n headerName: '',\n // field와 valueGetter 제거 - AG Grid 공식 방식\n width: 50,\n minWidth: 50,\n maxWidth: 50,\n lockPosition: 'left' as const,\n checkboxSelection: true,\n headerCheckboxSelection: true,\n sortable: false,\n filter: false,\n resizable: false,\n suppressNavigable: true,\n suppressHeaderMenuButton: true,\n cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },\n })\n }\n \n // 2. Action Buttons 컬럼\n if (actionButtonsColumn.value) {\n columns.push(actionButtonsColumn.value)\n }\n \n // 3. 사용자 정의 컬럼들 (Row Numbers는 AG Grid가 자동으로 추가)\n columns.push(...props.columnDefs)\n \n return columns\n})\n\n// Grid 옵션 설정\nconst gridOptions = computed<GridOptions>(() => {\n const options: GridOptions = {\n // theme 옵션 제거 - 클래스 기반 테마(:class=\"theme\") 사용\n // columnDefs와 rowData는 prop으로 전달하므로 여기서 제거\n pagination: props.pagination,\n rowSelection: props.checkbox ? 'multiple' : undefined,\n // 체크박스 모드일 때 row 클릭으로 선택이 변경되지 않도록 설정\n // 체크박스만으로 선택을 제어하도록 함\n suppressRowClickSelection: props.checkbox,\n\n // Row Numbers (Enterprise) - AG Grid 표준 방식\n rowNumbers: props.rowNumbers,\n\n // Column Hover Highlight\n columnHoverHighlight: props.columnHover,\n\n // Enterprise 기능 옵션\n sideBar: props.enableColumnsToolPanel || props.enableGrouping || props.enablePivot ? {\n toolPanels: [\n {\n id: 'columns',\n labelDefault: 'Columns',\n labelKey: 'columns',\n iconKey: 'columns',\n toolPanel: 'agColumnsToolPanel',\n toolPanelParams: {\n suppressRowGroups: !props.enableGrouping,\n suppressValues: !props.enablePivot,\n suppressPivots: !props.enablePivot,\n suppressPivotMode: !props.enablePivot,\n },\n },\n ],\n defaultToolPanel: '', // 초기에는 접힌 상태\n } : undefined,\n\n // Status Bar (Enterprise)\n // compactFooter 모드에서는 Status Bar 비활성화\n statusBar: (props.statusBar && !props.compactFooter) ? {\n statusPanels: [\n { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' as const },\n { statusPanel: 'agSelectedRowCountComponent', align: 'left' as const },\n { statusPanel: 'agAggregationComponent', align: 'right' as const },\n ],\n } : undefined,\n\n // Row Group Panel 설정 (Enterprise) - 그리드 상단에 드래그 영역 표시\n rowGroupPanelShow: props.rowGroupPanelShow !== 'never' ? props.rowGroupPanelShow : undefined,\n\n // Pivot Panel 설정 (Enterprise) - 피벗 모드용 드래그 영역\n pivotPanelShow: props.pivotPanelShow !== 'never' ? props.pivotPanelShow : undefined,\n \n // Pivot Mode 활성화\n pivotMode: props.pivotMode,\n\n // 그룹핑 기본 설정\n groupDefaultExpanded: props.groupDefaultExpanded,\n suppressAggFuncInHeader: false,\n\n // Tree Data 설정 (Enterprise)\n treeData: props.enableTreeData || undefined,\n getDataPath: props.enableTreeData\n ? (props.getDataPath || ((data: any) => data.path || []))\n : undefined,\n autoGroupColumnDef: props.enableTreeData && props.autoGroupColumnDef\n ? props.autoGroupColumnDef\n : undefined,\n }\n\n return options\n})\n\n// Excel 내보내기 함수 (외부에서 사용 가능하도록 expose)\nconst exportToExcel = () => {\n if (gridApi.value && props.enableExcelExport) {\n gridApi.value.exportDataAsExcel({\n fileName: 'grid-export.xlsx',\n })\n }\n}\n\n// 그리드 API를 외부에 노출\ndefineExpose({\n gridApi,\n gridColumnApi,\n exportToExcel,\n})\n\n// Grid ready 이벤트 핸들러\nconst onGridReady = (params: GridReadyEvent) => {\n gridApi.value = params.api\n gridColumnApi.value = params.api // v34에서 columnApi는 deprecated\n emit('gridReady', params)\n}\n\n// 행 클릭 이벤트 핸들러\nconst onRowClicked = (event: RowClickedEvent) => {\n emit('rowClicked', event)\n}\n\n// 행 더블클릭 이벤트 핸들러\nconst onRowDoubleClicked = (event: RowDoubleClickedEvent) => {\n emit('rowDoubleClicked', event)\n}\n\n// 셀 클릭 이벤트 핸들러\nconst onCellClicked = (event: CellClickedEvent) => {\n emit('cellClicked', event)\n}\n\n// 선택 변경 이벤트 핸들러\nconst onSelectionChanged = (event: SelectionChangedEvent) => {\n emit('selectionChanged', event)\n emit('update:selectedRows', event.api.getSelectedRows())\n}\n\n// 셀 값 변경 이벤트 핸들러\nconst onCellValueChanged = (event: CellValueChangedEvent) => {\n emit('cellValueChanged', event)\n}\n\n// MutationObserver로 다크모드 변경 감지\nlet darkModeObserver: MutationObserver | null = null\n\nonMounted(() => {\n if (props.autoDetectDarkMode) {\n // 초기 다크모드 상태 감지\n detectDarkMode()\n \n // MutationObserver로 class 변경 감지\n darkModeObserver = new MutationObserver(() => {\n detectDarkMode()\n })\n \n darkModeObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n })\n }\n})\n\nonUnmounted(() => {\n if (darkModeObserver) {\n darkModeObserver.disconnect()\n }\n})\n\n// columnDefs 변경 감지\nwatch(\n () => props.columnDefs,\n () => {\n if (gridApi.value) {\n gridApi.value.setGridOption('columnDefs', processedColumnDefs.value)\n }\n },\n { deep: true },\n)\n\n// rowData 변경 감지\nwatch(\n () => props.rowData,\n () => {\n if (gridApi.value) {\n gridApi.value.setGridOption('rowData', props.rowData)\n }\n },\n { deep: true },\n)\n</script>\n\n<template>\n <div :class=\"cn('ag-grid-container', props.class)\">\n <AgGridVue\n :column-defs=\"processedColumnDefs\"\n :row-data=\"rowData\"\n :grid-options=\"gridOptions\"\n :class=\"currentTheme\"\n style=\"height: 100%; width: 100%\"\n @grid-ready=\"onGridReady\"\n @row-clicked=\"onRowClicked\"\n @row-double-clicked=\"onRowDoubleClicked\"\n @cell-clicked=\"onCellClicked\"\n @selection-changed=\"onSelectionChanged\"\n @cell-value-changed=\"onCellValueChanged\"\n />\n </div>\n</template>\n\n<style scoped>\n.ag-grid-container {\n width: 100%;\n height: 100%;\n}\n\n/* ============================================\n COMPACT FOOTER: Status Bar + Pagination 통합\n ============================================ */\n\n/* Status Bar 높이 줄이기 */\n:deep(.ag-status-bar) {\n min-height: 28px !important;\n height: 28px !important;\n padding: 0 12px !important;\n border-top: 1px solid var(--ag-border-color);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.8125rem;\n}\n\n/* Status Bar 컴포넌트들 높이 조정 */\n:deep(.ag-status-bar-left),\n:deep(.ag-status-bar-center),\n:deep(.ag-status-bar-right) {\n height: 28px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Status Bar 패널들 간격 조정 */\n:deep(.ag-status-panel) {\n padding: 0;\n height: 28px;\n display: flex;\n align-items: center;\n}\n\n/* Pagination Panel 높이 줄이기 */\n:deep(.ag-paging-panel) {\n min-height: 28px !important;\n height: 28px !important;\n padding: 0 12px !important;\n border-top: 1px solid var(--ag-border-color);\n font-size: 0.8125rem;\n}\n\n/* Pagination 컴포넌트들 높이 조정 */\n:deep(.ag-paging-page-size),\n:deep(.ag-paging-row-summary-panel) {\n height: 28px;\n display: flex;\n align-items: center;\n}\n\n/* Page Size Selector 높이 조정 */\n:deep(.ag-paging-page-size .ag-picker-field) {\n height: 24px;\n min-height: 24px;\n}\n\n:deep(.ag-paging-page-size .ag-picker-field-wrapper) {\n height: 24px;\n padding: 0 4px;\n}\n\n/* Pagination 버튼들 높이 조정 */\n:deep(.ag-paging-button) {\n height: 24px;\n width: 24px;\n padding: 2px;\n}\n\n/* Pagination 버튼 래퍼 */\n:deep(.ag-paging-button-wrapper) {\n height: 28px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n/* Row summary 텍스트 */\n:deep(.ag-paging-row-summary-panel-number) {\n line-height: 28px;\n}\n\n/* ========================================\n 패턴 9: AG-Grid 스타일 향상\n ======================================== */\n\n:deep(.ag-root-wrapper) {\n border: 1px solid hsl(var(--border));\n border-radius: 0.375rem;\n}\n\n:deep(.ag-header) {\n background-color: hsl(var(--muted));\n border-bottom: 1px solid hsl(var(--border));\n font-weight: 500;\n}\n\n:deep(.ag-header-cell) {\n color: hsl(var(--foreground));\n font-size: 0.75rem;\n padding: 0.5rem;\n}\n\n:deep(.ag-row) {\n transition: background-color 0.2s ease, border-left 0.2s ease;\n cursor: pointer;\n}\n\n:deep(.ag-row:hover) {\n background-color: hsl(var(--primary) / 0.05) !important;\n}\n\n:deep(.ag-row-selected) {\n background-color: hsl(var(--primary) / 0.1) !important;\n border-left: 2px solid hsl(var(--primary)) !important;\n}\n\n:deep(.ag-row-selected:hover) {\n background-color: hsl(var(--primary) / 0.15) !important;\n}\n\n:deep(.ag-cell) {\n line-height: 1.5;\n padding: 0.5rem;\n border-bottom: 1px solid hsl(var(--border) / 0.5);\n}\n\n:deep(.ag-paging-panel) {\n background-color: hsl(var(--muted) / 0.5);\n border-top: 1px solid hsl(var(--border));\n}\n</style>\n"],"names":["ModuleRegistry","AllCommunityModule","AllEnterpriseModule","props","__props","emit","__emit","gridApi","ref","gridColumnApi","isDarkMode","detectDarkMode","currentTheme","computed","baseTheme","ActionButtonsCellRenderer","params","buttons","rowData","visibleButtons","btn","container","button","e","actionButtonsColumn","processedColumnDefs","columns","gridOptions","data","__expose","onGridReady","onRowClicked","event","onRowDoubleClicked","onCellClicked","onSelectionChanged","onCellValueChanged","darkModeObserver","onMounted","onUnmounted","watch","_createElementBlock","_normalizeClass","_unref","cn","_createVNode","AgGridVue"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const u=require("../shadcn/Label.vue.cjs"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const n=require("../../lib/utils.cjs"),u=require("../shadcn/Label.vue.cjs"),d={key:0,class:"text-red-500 mr-1"},i={key:1,class:"text-red-500 mr-1"},f=e.defineComponent({__name:"JLabel",props:{text:{default:""},required:{type:Boolean,default:!1},styletype:{default:"default"},for:{},class:{}},setup(s){const t=s,l={default:{class:""},required:{class:"text-red-600"},optional:{class:"text-gray-500"},error:{class:"text-red-600"},success:{class:"text-green-600"},warning:{class:"text-amber-600"},sm:{class:"text-xs"},lg:{class:"text-base"}},a=e.computed(()=>{const r=t.styletype||"default",o=l[r]??l.default;return{for:t.for,class:o?.class||""}}),c=e.computed(()=>t.text?t.text:"");return(r,o)=>(e.openBlock(),e.createBlock(e.unref(u.default),{for:a.value.for,class:e.normalizeClass(e.unref(n.cn)("text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",a.value.class,t.class))},{default:e.withCtx(()=>[s.required&&s.styletype==="required"?(e.openBlock(),e.createElementBlock("span",d,"*")):s.required?(e.openBlock(),e.createElementBlock("span",i,"*")):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(c.value)+" ",1),e.renderSlot(r.$slots,"default")]),_:3},8,["for","class"]))}});exports.default=f;
|
|
2
2
|
//# sourceMappingURL=JLabel.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JLabel.vue.cjs","sources":["../../../../src/components/atoms/JLabel.vue"],"sourcesContent":["<!-- TODO: 컴포넌트 래핑 초안 - 스타일 및 기능 개선 필요 -->\
|
|
1
|
+
{"version":3,"file":"JLabel.vue.cjs","sources":["../../../../src/components/atoms/JLabel.vue"],"sourcesContent":["<!-- TODO: 컴포넌트 래핑 초안 - 스타일 및 기능 개선 필요 -->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Label } from '@/components/shadcn'\nimport { cn } from '@/lib/utils'\n\ntype StyleType =\n | 'default' // 기본 스타일\n | 'required' // 필수 필드 표시 (빨간 별표)\n | 'optional' // 선택 필드 표시 (회색 텍스트)\n | 'error' // 에러 상태 (빨간 텍스트)\n | 'success' // 성공 상태 (초록 텍스트)\n | 'warning' // 경고 상태 (주황 텍스트)\n | 'sm' // 작은 크기\n | 'lg' // 큰 크기\n\nconst props = withDefaults(\n defineProps<{\n /** 라벨 텍스트 */\n text?: string\n /** 필수 필드 여부 */\n required?: boolean\n /** 스타일 프리셋 */\n styletype?: StyleType\n /** HTML for 속성 (연결할 input의 id) */\n for?: string\n /** 추가 클래스 (외부 커스터마이징용) */\n class?: string\n }>(),\n {\n text: '',\n required: false,\n styletype: 'default',\n },\n)\n\n/**\n * styletype -> class 매핑\n */\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\n default: { class: '' },\n required: { \n class: 'text-red-600',\n },\n optional: { \n class: 'text-gray-500',\n },\n error: { \n class: 'text-red-600',\n },\n success: { \n class: 'text-green-600',\n },\n warning: { \n class: 'text-amber-600',\n },\n sm: { \n class: 'text-xs',\n },\n lg: { \n class: 'text-base',\n },\n}\n\n/** 최종 바인딩: styletype에 따른 클래스 적용 */\nconst mapped = computed(() => {\n const styleKey = props.styletype || 'default'\n const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\n \n return {\n for: props.for,\n class: preset?.class || '',\n }\n})\n\nconst displayText = computed(() => {\n if (props.text) {\n return props.text\n }\n return ''\n})\n</script>\n\n<template>\n <Label\n :for=\"mapped.for\"\n :class=\"cn(\n 'text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n mapped.class,\n props.class\n )\"\n >\n <span v-if=\"required && styletype === 'required'\" class=\"text-red-500 mr-1\">*</span>\n <span v-else-if=\"required\" class=\"text-red-500 mr-1\">*</span>\n {{ displayText }}\n <slot />\n </Label>\n</template>\n"],"names":["props","__props","STYLE_PRESETS","mapped","computed","styleKey","preset","displayText","_createBlock","_unref","Label","cn","_createElementBlock","_hoisted_1","_hoisted_2","_toDisplayString","_renderSlot","_ctx"],"mappings":"+cAgBA,MAAMA,EAAQC,EAuBRC,EAAsD,CAC1D,QAAS,CAAE,MAAO,EAAA,EAClB,SAAU,CACR,MAAO,cAAA,EAET,SAAU,CACR,MAAO,eAAA,EAET,MAAO,CACL,MAAO,cAAA,EAET,QAAS,CACP,MAAO,gBAAA,EAET,QAAS,CACP,MAAO,gBAAA,EAET,GAAI,CACF,MAAO,SAAA,EAET,GAAI,CACF,MAAO,WAAA,CACT,EAIIC,EAASC,EAAAA,SAAS,IAAM,CAC5B,MAAMC,EAAWL,EAAM,WAAa,UAC9BM,EAASJ,EAAcG,CAAQ,GAAKH,EAAc,QAExD,MAAO,CACL,IAAKF,EAAM,IACX,MAAOM,GAAQ,OAAS,EAAA,CAE5B,CAAC,EAEKC,EAAcH,EAAAA,SAAS,IACvBJ,EAAM,KACDA,EAAM,KAER,EACR,8BAICQ,EAAAA,YAYQC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CAXL,IAAKP,EAAA,MAAO,IACZ,uBAAOM,EAAAA,MAAAE,IAAA,+FAA8GR,EAAA,MAAO,MAAaH,EAAM,KAAA,uBAMhJ,IAAoF,CAAxEC,EAAA,UAAYA,EAAA,YAAS,0BAAjCW,EAAAA,mBAAoF,OAApFC,EAA4E,GAAC,GAC5DZ,EAAA,wBAAjBW,EAAAA,mBAA6D,OAA7DE,EAAqD,GAAC,iDAAO,IAC7DC,kBAAGR,EAAA,KAAW,EAAG,IACjB,CAAA,EAAAS,aAAQC,EAAA,OAAA,SAAA,CAAA"}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as i, computed as c, createBlock as f, openBlock as r, unref as n, normalizeClass as m, withCtx as p, createElementBlock as d, createCommentVNode as x, createTextVNode as y, renderSlot as _, toDisplayString as g } from "vue";
|
|
2
2
|
import "../shadcn/index.js";
|
|
3
|
-
import b from "
|
|
4
|
-
|
|
3
|
+
import { cn as b } from "../../lib/utils.js";
|
|
4
|
+
import k from "../shadcn/Label.vue.js";
|
|
5
|
+
const q = {
|
|
5
6
|
key: 0,
|
|
6
7
|
class: "text-red-500 mr-1"
|
|
7
|
-
},
|
|
8
|
+
}, S = {
|
|
8
9
|
key: 1,
|
|
9
10
|
class: "text-red-500 mr-1"
|
|
10
|
-
},
|
|
11
|
+
}, T = /* @__PURE__ */ i({
|
|
11
12
|
__name: "JLabel",
|
|
12
13
|
props: {
|
|
13
14
|
text: { default: "" },
|
|
14
15
|
required: { type: Boolean, default: !1 },
|
|
15
16
|
styletype: { default: "default" },
|
|
16
|
-
for: {}
|
|
17
|
+
for: {},
|
|
18
|
+
class: {}
|
|
17
19
|
},
|
|
18
|
-
setup(
|
|
19
|
-
const
|
|
20
|
+
setup(t) {
|
|
21
|
+
const e = t, a = {
|
|
20
22
|
default: { class: "" },
|
|
21
23
|
required: {
|
|
22
24
|
class: "text-red-600"
|
|
@@ -40,28 +42,30 @@ const k = {
|
|
|
40
42
|
class: "text-base"
|
|
41
43
|
}
|
|
42
44
|
}, l = c(() => {
|
|
43
|
-
const s =
|
|
45
|
+
const s = e.styletype || "default", o = a[s] ?? a.default;
|
|
44
46
|
return {
|
|
45
|
-
for:
|
|
47
|
+
for: e.for,
|
|
46
48
|
class: o?.class || ""
|
|
47
49
|
};
|
|
48
|
-
}),
|
|
49
|
-
return (s, o) => (r(),
|
|
50
|
-
|
|
50
|
+
}), u = c(() => e.text ? e.text : "");
|
|
51
|
+
return (s, o) => (r(), f(n(k), {
|
|
52
|
+
for: l.value.for,
|
|
53
|
+
class: m(n(b)(
|
|
51
54
|
"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
52
|
-
l.value.class
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
g(
|
|
55
|
+
l.value.class,
|
|
56
|
+
e.class
|
|
57
|
+
))
|
|
58
|
+
}, {
|
|
59
|
+
default: p(() => [
|
|
60
|
+
t.required && t.styletype === "required" ? (r(), d("span", q, "*")) : t.required ? (r(), d("span", S, "*")) : x("", !0),
|
|
61
|
+
y(" " + g(u.value) + " ", 1),
|
|
62
|
+
_(s.$slots, "default")
|
|
59
63
|
]),
|
|
60
64
|
_: 3
|
|
61
|
-
},
|
|
65
|
+
}, 8, ["for", "class"]));
|
|
62
66
|
}
|
|
63
67
|
});
|
|
64
68
|
export {
|
|
65
|
-
|
|
69
|
+
T as default
|
|
66
70
|
};
|
|
67
71
|
//# sourceMappingURL=JLabel.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JLabel.vue.js","sources":["../../../../src/components/atoms/JLabel.vue"],"sourcesContent":["<!-- TODO: 컴포넌트 래핑 초안 - 스타일 및 기능 개선 필요 -->\
|
|
1
|
+
{"version":3,"file":"JLabel.vue.js","sources":["../../../../src/components/atoms/JLabel.vue"],"sourcesContent":["<!-- TODO: 컴포넌트 래핑 초안 - 스타일 및 기능 개선 필요 -->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Label } from '@/components/shadcn'\nimport { cn } from '@/lib/utils'\n\ntype StyleType =\n | 'default' // 기본 스타일\n | 'required' // 필수 필드 표시 (빨간 별표)\n | 'optional' // 선택 필드 표시 (회색 텍스트)\n | 'error' // 에러 상태 (빨간 텍스트)\n | 'success' // 성공 상태 (초록 텍스트)\n | 'warning' // 경고 상태 (주황 텍스트)\n | 'sm' // 작은 크기\n | 'lg' // 큰 크기\n\nconst props = withDefaults(\n defineProps<{\n /** 라벨 텍스트 */\n text?: string\n /** 필수 필드 여부 */\n required?: boolean\n /** 스타일 프리셋 */\n styletype?: StyleType\n /** HTML for 속성 (연결할 input의 id) */\n for?: string\n /** 추가 클래스 (외부 커스터마이징용) */\n class?: string\n }>(),\n {\n text: '',\n required: false,\n styletype: 'default',\n },\n)\n\n/**\n * styletype -> class 매핑\n */\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\n default: { class: '' },\n required: { \n class: 'text-red-600',\n },\n optional: { \n class: 'text-gray-500',\n },\n error: { \n class: 'text-red-600',\n },\n success: { \n class: 'text-green-600',\n },\n warning: { \n class: 'text-amber-600',\n },\n sm: { \n class: 'text-xs',\n },\n lg: { \n class: 'text-base',\n },\n}\n\n/** 최종 바인딩: styletype에 따른 클래스 적용 */\nconst mapped = computed(() => {\n const styleKey = props.styletype || 'default'\n const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\n \n return {\n for: props.for,\n class: preset?.class || '',\n }\n})\n\nconst displayText = computed(() => {\n if (props.text) {\n return props.text\n }\n return ''\n})\n</script>\n\n<template>\n <Label\n :for=\"mapped.for\"\n :class=\"cn(\n 'text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n mapped.class,\n props.class\n )\"\n >\n <span v-if=\"required && styletype === 'required'\" class=\"text-red-500 mr-1\">*</span>\n <span v-else-if=\"required\" class=\"text-red-500 mr-1\">*</span>\n {{ displayText }}\n <slot />\n </Label>\n</template>\n"],"names":["props","__props","STYLE_PRESETS","mapped","computed","styleKey","preset","displayText","_createBlock","_unref","Label","cn","_createElementBlock","_hoisted_1","_hoisted_2","_toDisplayString","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBA,UAAMA,IAAQC,GAuBRC,IAAsD;AAAA,MAC1D,SAAS,EAAE,OAAO,GAAA;AAAA,MAClB,UAAU;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,IAAI;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,MAET,IAAI;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,IACT,GAIIC,IAASC,EAAS,MAAM;AAC5B,YAAMC,IAAWL,EAAM,aAAa,WAC9BM,IAASJ,EAAcG,CAAQ,KAAKH,EAAc;AAExD,aAAO;AAAA,QACL,KAAKF,EAAM;AAAA,QACX,OAAOM,GAAQ,SAAS;AAAA,MAAA;AAAA,IAE5B,CAAC,GAEKC,IAAcH,EAAS,MACvBJ,EAAM,OACDA,EAAM,OAER,EACR;2BAICQ,EAYQC,EAAAC,CAAA,GAAA;AAAA,MAXL,KAAKP,EAAA,MAAO;AAAA,MACZ,SAAOM,EAAAE,CAAA;AAAA;QAA8GR,EAAA,MAAO;AAAA,QAAaH,EAAM;AAAA,MAAA;;iBAMhJ,MAAoF;AAAA,QAAxEC,EAAA,YAAYA,EAAA,cAAS,mBAAjCW,EAAoF,QAApFC,GAA4E,GAAC,KAC5DZ,EAAA,iBAAjBW,EAA6D,QAA7DE,GAAqD,GAAC;UAAO,MAC7DC,EAAGR,EAAA,KAAW,IAAG,KACjB,CAAA;AAAA,QAAAS,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JSectionTitle.vue2.cjs");;/* empty css */const t = (t_comp, t_opts) => {
|
|
2
|
+
const t_merged = t_comp.__vccOpts || t_comp;
|
|
3
|
+
for (const [t_key, t_val] of t_opts)
|
|
4
|
+
t_merged[t_key] = t_val;
|
|
5
|
+
return t_merged;
|
|
6
|
+
};,u=t(e.default,[["__scopeId","data-v-7f6e5ace"]]);exports.default=u;
|
|
7
|
+
//# sourceMappingURL=JSectionTitle.vue.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSectionTitle.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import o from "./JSectionTitle.vue2.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
const t = (t_comp, t_opts) => {
|
|
4
|
+
const t_merged = t_comp.__vccOpts || t_comp;
|
|
5
|
+
for (const [t_key, t_val] of t_opts)
|
|
6
|
+
t_merged[t_key] = t_val;
|
|
7
|
+
return t_merged;
|
|
8
|
+
};
|
|
9
|
+
const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7f6e5ace"]]);
|
|
10
|
+
export {
|
|
11
|
+
c as default
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=JSectionTitle.vue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSectionTitle.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("../../lib/utils.cjs");require("lucide-vue-next");require("../shadcn/index.cjs");;/* empty css */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("./JIcon.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 */;/* empty css */;/* empty css */require("vue-sonner");const u={class:"j-section-title-content"},l={class:"j-section-title-text-wrapper"},s={class:"j-section-title-text"},a={key:0,class:"j-section-subtitle-text"},d=e.defineComponent({__name:"JSectionTitle",props:{title:{},subtitle:{},variant:{default:"default"},icon:{},class:{}},setup(t){const r=t,i={default:"border-l-border text-foreground dark:border-l-border",primary:"border-l-primary text-primary",secondary:"border-l-secondary text-secondary",accent:"border-l-accent text-accent"},n=e.computed(()=>i[r.variant]||i.default);return(q,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(c.cn)("j-section-title",n.value,r.class))},[e.createElementVNode("div",u,[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,class:"j-section-title-icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("div",l,[e.createElementVNode("h3",s,e.toDisplayString(t.title),1),t.subtitle?(e.openBlock(),e.createElementBlock("p",a,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])])],2))}});exports.default=d;
|
|
2
|
+
//# sourceMappingURL=JSectionTitle.vue2.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSectionTitle.vue2.cjs","sources":["../../../../src/components/atoms/JSectionTitle.vue"],"sourcesContent":["<template>\n <div :class=\"cn('j-section-title', variantClasses, props.class)\">\n <div class=\"j-section-title-content\">\n <JIcon v-if=\"icon\" :name=\"icon\" class=\"j-section-title-icon\" />\n <div class=\"j-section-title-text-wrapper\">\n <h3 class=\"j-section-title-text\">{{ title }}</h3>\n <p v-if=\"subtitle\" class=\"j-section-subtitle-text\">{{ subtitle }}</p>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { JIcon } from '@/components/atoms'\nimport type { JSectionTitleProps, SectionTitleVariant } from '@/types/section-title.types'\n\nconst props = withDefaults(defineProps<JSectionTitleProps>(), {\n variant: 'default',\n})\n\nconst VARIANT_STYLES: Record<SectionTitleVariant, string> = {\n default: 'border-l-border text-foreground dark:border-l-border',\n primary: 'border-l-primary text-primary',\n secondary: 'border-l-secondary text-secondary',\n accent: 'border-l-accent text-accent',\n}\n\nconst variantClasses = computed(() => {\n return VARIANT_STYLES[props.variant] || VARIANT_STYLES.default\n})\n</script>\n\n<style scoped>\n.j-section-title {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n padding: 0.75rem 1rem;\n border-left: 3px solid;\n border-radius: 0.375rem;\n background: hsl(var(--card));\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n transition: all 0.2s ease;\n overflow: hidden;\n}\n\n.j-section-title::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: currentColor;\n opacity: 0.15;\n}\n\n.j-section-title:hover {\n box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.08);\n transform: translateY(-1px);\n}\n\n.j-section-title-content {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n}\n\n.j-section-title-icon {\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n color: currentColor;\n}\n\n.j-section-title-text-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.j-section-title-text {\n font-size: 0.9375rem;\n font-weight: 600;\n color: hsl(var(--foreground));\n line-height: 1.3;\n letter-spacing: -0.01em;\n}\n\n.j-section-title-subtitle-text {\n font-size: 0.8125rem;\n color: hsl(var(--muted-foreground));\n line-height: 1.4;\n}\n</style>\n"],"names":["props","__props","VARIANT_STYLES","variantClasses","computed","_createElementBlock","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4"],"mappings":"+hDAkBA,MAAMA,EAAQC,EAIRC,EAAsD,CAC1D,QAAS,uDACT,QAAS,gCACT,UAAW,oCACX,OAAQ,6BAAA,EAGJC,EAAiBC,EAAAA,SAAS,IACvBF,EAAeF,EAAM,OAAO,GAAKE,EAAe,OACxD,8BA9BCG,EAAAA,mBAQM,MAAA,CARA,uBAAOC,EAAAA,MAAAC,IAAA,EAAE,kBAAoBJ,QAAgBH,EAAM,KAAK,CAAA,CAAA,GAC5DQ,EAAAA,mBAMM,MANNC,EAMM,CALSR,EAAA,oBAAbS,EAAAA,YAA+DJ,EAAAA,MAAAK,EAAAA,OAAA,EAAA,OAA3C,KAAMV,EAAA,KAAM,MAAM,sBAAA,gDACtCO,EAAAA,mBAGM,MAHNI,EAGM,CAFJJ,EAAAA,mBAAiD,KAAjDK,EAAiDC,EAAAA,gBAAbb,EAAA,KAAK,EAAA,CAAA,EAChCA,EAAA,wBAATI,EAAAA,mBAAqE,IAArEU,EAAqED,EAAAA,gBAAfb,EAAA,QAAQ,EAAA,CAAA"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { defineComponent as l, computed as p, createElementBlock as c, openBlock as e, normalizeClass as d, unref as n, createElementVNode as o, createBlock as u, createCommentVNode as s, toDisplayString as a } from "vue";
|
|
2
|
+
import { cn as f } from "../../lib/utils.js";
|
|
3
|
+
import "lucide-vue-next";
|
|
4
|
+
import "../shadcn/index.js";
|
|
5
|
+
/* empty css */
|
|
6
|
+
import "@internationalized/date";
|
|
7
|
+
import "md-editor-v3";
|
|
8
|
+
/* empty css */
|
|
9
|
+
/* empty css */
|
|
10
|
+
import "../shadcn/badge-variants.js";
|
|
11
|
+
import "@vueuse/core";
|
|
12
|
+
import "reka-ui";
|
|
13
|
+
/* empty css */
|
|
14
|
+
import "../shadcn/avatar-variants.js";
|
|
15
|
+
import b from "./JIcon.vue.js";
|
|
16
|
+
import "dompurify";
|
|
17
|
+
/* empty css */
|
|
18
|
+
import "ag-grid-vue3";
|
|
19
|
+
import "ag-grid-community";
|
|
20
|
+
import "ag-grid-enterprise";
|
|
21
|
+
/* empty css */
|
|
22
|
+
/* empty css */
|
|
23
|
+
/* empty css */
|
|
24
|
+
/* empty css */
|
|
25
|
+
/* empty css */
|
|
26
|
+
/* empty css */
|
|
27
|
+
import "vue-sonner";
|
|
28
|
+
const x = { class: "j-section-title-content" }, y = { class: "j-section-title-text-wrapper" }, v = { class: "j-section-title-text" }, _ = {
|
|
29
|
+
key: 0,
|
|
30
|
+
class: "j-section-subtitle-text"
|
|
31
|
+
}, Q = /* @__PURE__ */ l({
|
|
32
|
+
__name: "JSectionTitle",
|
|
33
|
+
props: {
|
|
34
|
+
title: {},
|
|
35
|
+
subtitle: {},
|
|
36
|
+
variant: { default: "default" },
|
|
37
|
+
icon: {},
|
|
38
|
+
class: {}
|
|
39
|
+
},
|
|
40
|
+
setup(t) {
|
|
41
|
+
const r = t, i = {
|
|
42
|
+
default: "border-l-border text-foreground dark:border-l-border",
|
|
43
|
+
primary: "border-l-primary text-primary",
|
|
44
|
+
secondary: "border-l-secondary text-secondary",
|
|
45
|
+
accent: "border-l-accent text-accent"
|
|
46
|
+
}, m = p(() => i[r.variant] || i.default);
|
|
47
|
+
return (h, j) => (e(), c("div", {
|
|
48
|
+
class: d(n(f)("j-section-title", m.value, r.class))
|
|
49
|
+
}, [
|
|
50
|
+
o("div", x, [
|
|
51
|
+
t.icon ? (e(), u(n(b), {
|
|
52
|
+
key: 0,
|
|
53
|
+
name: t.icon,
|
|
54
|
+
class: "j-section-title-icon"
|
|
55
|
+
}, null, 8, ["name"])) : s("", !0),
|
|
56
|
+
o("div", y, [
|
|
57
|
+
o("h3", v, a(t.title), 1),
|
|
58
|
+
t.subtitle ? (e(), c("p", _, a(t.subtitle), 1)) : s("", !0)
|
|
59
|
+
])
|
|
60
|
+
])
|
|
61
|
+
], 2));
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
export {
|
|
65
|
+
Q as default
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=JSectionTitle.vue2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSectionTitle.vue2.js","sources":["../../../../src/components/atoms/JSectionTitle.vue"],"sourcesContent":["<template>\n <div :class=\"cn('j-section-title', variantClasses, props.class)\">\n <div class=\"j-section-title-content\">\n <JIcon v-if=\"icon\" :name=\"icon\" class=\"j-section-title-icon\" />\n <div class=\"j-section-title-text-wrapper\">\n <h3 class=\"j-section-title-text\">{{ title }}</h3>\n <p v-if=\"subtitle\" class=\"j-section-subtitle-text\">{{ subtitle }}</p>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { JIcon } from '@/components/atoms'\nimport type { JSectionTitleProps, SectionTitleVariant } from '@/types/section-title.types'\n\nconst props = withDefaults(defineProps<JSectionTitleProps>(), {\n variant: 'default',\n})\n\nconst VARIANT_STYLES: Record<SectionTitleVariant, string> = {\n default: 'border-l-border text-foreground dark:border-l-border',\n primary: 'border-l-primary text-primary',\n secondary: 'border-l-secondary text-secondary',\n accent: 'border-l-accent text-accent',\n}\n\nconst variantClasses = computed(() => {\n return VARIANT_STYLES[props.variant] || VARIANT_STYLES.default\n})\n</script>\n\n<style scoped>\n.j-section-title {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n padding: 0.75rem 1rem;\n border-left: 3px solid;\n border-radius: 0.375rem;\n background: hsl(var(--card));\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n transition: all 0.2s ease;\n overflow: hidden;\n}\n\n.j-section-title::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: currentColor;\n opacity: 0.15;\n}\n\n.j-section-title:hover {\n box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.08);\n transform: translateY(-1px);\n}\n\n.j-section-title-content {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n}\n\n.j-section-title-icon {\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n color: currentColor;\n}\n\n.j-section-title-text-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.j-section-title-text {\n font-size: 0.9375rem;\n font-weight: 600;\n color: hsl(var(--foreground));\n line-height: 1.3;\n letter-spacing: -0.01em;\n}\n\n.j-section-title-subtitle-text {\n font-size: 0.8125rem;\n color: hsl(var(--muted-foreground));\n line-height: 1.4;\n}\n</style>\n"],"names":["props","__props","VARIANT_STYLES","variantClasses","computed","_createElementBlock","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAMA,IAAQC,GAIRC,IAAsD;AAAA,MAC1D,SAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA,GAGJC,IAAiBC,EAAS,MACvBF,EAAeF,EAAM,OAAO,KAAKE,EAAe,OACxD;2BA9BCG,EAQM,OAAA;AAAA,MARA,SAAOC,EAAAC,CAAA,EAAE,mBAAoBJ,SAAgBH,EAAM,KAAK,CAAA;AAAA,IAAA;MAC5DQ,EAMM,OANNC,GAMM;AAAA,QALSR,EAAA,aAAbS,EAA+DJ,EAAAK,CAAA,GAAA;AAAA;UAA3C,MAAMV,EAAA;AAAA,UAAM,OAAM;AAAA,QAAA;QACtCO,EAGM,OAHNI,GAGM;AAAA,UAFJJ,EAAiD,MAAjDK,GAAiDC,EAAbb,EAAA,KAAK,GAAA,CAAA;AAAA,UAChCA,EAAA,iBAATI,EAAqE,KAArEU,GAAqED,EAAfb,EAAA,QAAQ,GAAA,CAAA;;;;;;"}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JSplitter.vue2.cjs");;/* empty css */const t = (t_comp, t_opts) => {
|
|
2
|
+
const t_merged = t_comp.__vccOpts || t_comp;
|
|
3
|
+
for (const [t_key, t_val] of t_opts)
|
|
4
|
+
t_merged[t_key] = t_val;
|
|
5
|
+
return t_merged;
|
|
6
|
+
};,u=t(e.default,[["__scopeId","data-v-4ac249d6"]]);exports.default=u;
|
|
2
7
|
//# sourceMappingURL=JSplitter.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSplitter.vue.cjs","sources":[
|
|
1
|
+
{"version":3,"file":"JSplitter.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,62 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
minSize: { default: 20 },
|
|
11
|
-
maxSize: {},
|
|
12
|
-
secondMinSize: {},
|
|
13
|
-
secondMaxSize: {},
|
|
14
|
-
withHandle: { type: Boolean, default: !0 },
|
|
15
|
-
gap: { default: 2 },
|
|
16
|
-
class: {}
|
|
17
|
-
},
|
|
18
|
-
setup(e) {
|
|
19
|
-
const d = e, m = f(() => 100 - d.defaultSize);
|
|
20
|
-
return (a, h) => (u(), r(i(g), {
|
|
21
|
-
direction: e.direction,
|
|
22
|
-
class: l(e.class)
|
|
23
|
-
}, {
|
|
24
|
-
default: n(() => [
|
|
25
|
-
s(i(c), {
|
|
26
|
-
"default-size": e.defaultSize,
|
|
27
|
-
"min-size": e.minSize,
|
|
28
|
-
"max-size": e.maxSize,
|
|
29
|
-
class: l(e.gap > 0 ? e.direction === "horizontal" ? "pr-[calc(var(--gap)/2)]" : "pb-[calc(var(--gap)/2)]" : ""),
|
|
30
|
-
style: o(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
|
|
31
|
-
}, {
|
|
32
|
-
default: n(() => [
|
|
33
|
-
t(a.$slots, "first"),
|
|
34
|
-
t(a.$slots, "left"),
|
|
35
|
-
t(a.$slots, "top")
|
|
36
|
-
]),
|
|
37
|
-
_: 3
|
|
38
|
-
}, 8, ["default-size", "min-size", "max-size", "class", "style"]),
|
|
39
|
-
s(i(S), { "with-handle": e.withHandle }, null, 8, ["with-handle"]),
|
|
40
|
-
s(i(c), {
|
|
41
|
-
"default-size": m.value,
|
|
42
|
-
"min-size": e.secondMinSize,
|
|
43
|
-
"max-size": e.secondMaxSize,
|
|
44
|
-
class: l(e.gap > 0 ? e.direction === "horizontal" ? "pl-[calc(var(--gap)/2)]" : "pt-[calc(var(--gap)/2)]" : ""),
|
|
45
|
-
style: o(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
|
|
46
|
-
}, {
|
|
47
|
-
default: n(() => [
|
|
48
|
-
t(a.$slots, "second"),
|
|
49
|
-
t(a.$slots, "right"),
|
|
50
|
-
t(a.$slots, "bottom")
|
|
51
|
-
]),
|
|
52
|
-
_: 3
|
|
53
|
-
}, 8, ["default-size", "min-size", "max-size", "class", "style"])
|
|
54
|
-
]),
|
|
55
|
-
_: 3
|
|
56
|
-
}, 8, ["direction", "class"]));
|
|
57
|
-
}
|
|
58
|
-
});
|
|
1
|
+
import t from "./JSplitter.vue2.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
const o = (o_comp, o_opts) => {
|
|
4
|
+
const o_merged = o_comp.__vccOpts || o_comp;
|
|
5
|
+
for (const [o_key, o_val] of o_opts)
|
|
6
|
+
o_merged[o_key] = o_val;
|
|
7
|
+
return o_merged;
|
|
8
|
+
};
|
|
9
|
+
const m = /* @__PURE__ */ o(t, [["__scopeId", "data-v-4ac249d6"]]);
|
|
59
10
|
export {
|
|
60
|
-
|
|
11
|
+
m as default
|
|
61
12
|
};
|
|
62
13
|
//# sourceMappingURL=JSplitter.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSplitter.vue.js","sources":[
|
|
1
|
+
{"version":3,"file":"JSplitter.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("../shadcn/resizable/ResizableHandle.vue.cjs"),r=require("../shadcn/resizable/ResizablePanelGroup.vue.cjs"),l=require("reka-ui"),u=e.defineComponent({__name:"JSplitter",props:{direction:{default:"horizontal"},defaultSize:{default:40},minSize:{default:20},maxSize:{},secondMinSize:{},secondMaxSize:{},withHandle:{type:Boolean,default:!0},gap:{default:10},class:{}},setup(t){const i=t,n=e.computed(()=>100-i.defaultSize);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(r.default),{direction:t.direction,class:e.normalizeClass(t.class)},{default:e.withCtx(()=>[e.createVNode(e.unref(l.SplitterPanel),{"default-size":t.defaultSize,"min-size":t.minSize,"max-size":t.maxSize,class:e.normalizeClass(t.gap>0?t.direction==="horizontal"?"pr-[calc(var(--gap)/2)]":"pb-[calc(var(--gap)/2)]":""),style:e.normalizeStyle(t.gap>0?{"--gap":`${t.gap}px`}:{})},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"first",{},void 0,!0),e.renderSlot(a.$slots,"left",{},void 0,!0),e.renderSlot(a.$slots,"top",{},void 0,!0)]),_:3},8,["default-size","min-size","max-size","class","style"]),e.createVNode(e.unref(s.default),{"with-handle":t.withHandle},null,8,["with-handle"]),e.createVNode(e.unref(l.SplitterPanel),{"default-size":n.value,"min-size":t.secondMinSize,"max-size":t.secondMaxSize,class:e.normalizeClass(t.gap>0?t.direction==="horizontal"?"pl-[calc(var(--gap)/2)]":"pt-[calc(var(--gap)/2)]":""),style:e.normalizeStyle(t.gap>0?{"--gap":`${t.gap}px`}:{})},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"second",{},void 0,!0),e.renderSlot(a.$slots,"right",{},void 0,!0),e.renderSlot(a.$slots,"bottom",{},void 0,!0)]),_:3},8,["default-size","min-size","max-size","class","style"])]),_:3},8,["direction","class"]))}});exports.default=u;
|
|
2
2
|
//# sourceMappingURL=JSplitter.vue2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSplitter.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"JSplitter.vue2.cjs","sources":["../../../../src/components/atoms/JSplitter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n ResizablePanelGroup,\n ResizablePanel,\n ResizableHandle,\n} from '@/components/shadcn/resizable'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nconst props = withDefaults(\n defineProps<{\n /** 분할 방향 (horizontal: 좌우, vertical: 상하) */\n direction?: Orientation\n /** 첫 번째 패널의 기본 크기 (%) */\n defaultSize?: number\n /** 첫 번째 패널의 최소 크기 (%) */\n minSize?: number\n /** 첫 번째 패널의 최대 크기 (%) */\n maxSize?: number\n /** 두 번째 패널의 최소 크기 (%) */\n secondMinSize?: number\n /** 두 번째 패널의 최대 크기 (%) */\n secondMaxSize?: number\n /** ResizableHandle에 grip 아이콘 표시 여부 */\n withHandle?: boolean\n /** 패널 간 여백 (px) */\n gap?: number\n /** 추가 CSS 클래스 */\n class?: string\n }>(),\n {\n direction: 'horizontal',\n defaultSize: 40,\n minSize: 20,\n withHandle: true,\n gap: 10,\n },\n)\n\n// 두 번째 패널의 기본 크기 계산\nconst secondDefaultSize = computed(() => 100 - props.defaultSize)\n</script>\n\n<template>\n <ResizablePanelGroup :direction=\"direction\" :class=\"class\">\n <!-- 첫 번째 패널 (좌측/상단) -->\n <ResizablePanel \n :default-size=\"defaultSize\" \n :min-size=\"minSize\" \n :max-size=\"maxSize\"\n :class=\"gap > 0 ? (direction === 'horizontal' ? 'pr-[calc(var(--gap)/2)]' : 'pb-[calc(var(--gap)/2)]') : ''\"\n :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n >\n <slot name=\"first\" />\n <!-- direction=\"horizontal\"일 때 left, vertical일 때 top으로도 사용 가능 -->\n <slot name=\"left\" />\n <slot name=\"top\" />\n </ResizablePanel>\n\n <!-- 크기 조정 핸들 -->\n <ResizableHandle :with-handle=\"withHandle\" />\n\n <!-- 두 번째 패널 (우측/하단) -->\n <ResizablePanel\n :default-size=\"secondDefaultSize\"\n :min-size=\"secondMinSize\"\n :max-size=\"secondMaxSize\"\n :class=\"gap > 0 ? (direction === 'horizontal' ? 'pl-[calc(var(--gap)/2)]' : 'pt-[calc(var(--gap)/2)]') : ''\"\n :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n >\n <slot name=\"second\" />\n <!-- direction=\"horizontal\"일 때 right, vertical일 때 bottom으로도 사용 가능 -->\n <slot name=\"right\" />\n <slot name=\"bottom\" />\n </ResizablePanel>\n </ResizablePanelGroup>\n</template>\n\n<style scoped>\n/* ========================================\n 패턴 5: Splitter Handle 스타일\n ======================================== */\n\n:deep([data-panel-resize-handle-id]) {\n background: hsl(var(--border) / 0.8);\n transition: all 0.2s ease;\n position: relative;\n}\n\n:deep([data-panel-resize-handle-id]::before) {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: hsl(var(--muted-foreground) / 0.2);\n}\n\n:deep([data-panel-resize-handle-id]:hover) {\n background: hsl(var(--primary) / 0.6);\n}\n\n:deep([data-panel-resize-handle-id]:hover::before) {\n background: hsl(var(--primary) / 0.3);\n}\n\n:deep([data-panel-resize-handle-id]:active) {\n background: hsl(var(--primary));\n}\n\n:deep([data-panel-resize-handle-id]:active::before) {\n background: hsl(var(--primary) / 0.5);\n}\n\n:deep([data-panel-resize-handle-id][data-resize-handle-orientation=\"horizontal\"]) {\n cursor: col-resize;\n width: 6px;\n}\n\n:deep([data-panel-resize-handle-id][data-resize-handle-orientation=\"vertical\"]) {\n cursor: row-resize;\n height: 6px;\n}\n</style>\n"],"names":["props","__props","secondDefaultSize","computed","_createBlock","_unref","ResizablePanelGroup","_createVNode","ResizablePanel","_normalizeClass","_normalizeStyle","_renderSlot","_ctx","ResizableHandle"],"mappings":"kgBAUA,MAAMA,EAAQC,EA+BRC,EAAoBC,EAAAA,SAAS,IAAM,IAAMH,EAAM,WAAW,8BAI9DI,EAAAA,YA+BsBC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CA/BA,UAAWL,EAAA,UAAY,uBAAOA,EAAA,KAAK,CAAA,qBAEvD,IAWiB,CAXjBM,cAWiBF,EAAAA,MAAAG,EAAAA,aAAA,EAAA,CAVd,eAAcP,EAAA,YACd,WAAUA,EAAA,QACV,WAAUA,EAAA,QACV,MAAKQ,EAAAA,eAAER,EAAA,IAAG,EAAQA,EAAA,YAAS,aAAA,0BAAA,0BAAA,EAAA,EAC3B,MAAKS,EAAAA,eAAET,EAAA,IAAG,EAAA,CAAA,QAAA,GAAqBA,EAAA,GAAG,IAAA,EAAA,CAAA,CAAA,CAAA,qBAEnC,IAAqB,CAArBU,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,EAErBD,EAAAA,WAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,EACpBD,EAAAA,WAAmBC,EAAA,OAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kEAIrBL,EAAAA,YAA6CF,EAAAA,MAAAQ,SAAA,EAAA,CAA3B,cAAaZ,EAAA,UAAA,EAAU,KAAA,EAAA,CAAA,aAAA,CAAA,EAGzCM,cAWiBF,EAAAA,MAAAG,EAAAA,aAAA,EAAA,CAVd,eAAcN,EAAA,MACd,WAAUD,EAAA,cACV,WAAUA,EAAA,cACV,MAAKQ,EAAAA,eAAER,EAAA,IAAG,EAAQA,EAAA,YAAS,aAAA,0BAAA,0BAAA,EAAA,EAC3B,MAAKS,EAAAA,eAAET,EAAA,IAAG,EAAA,CAAA,QAAA,GAAqBA,EAAA,GAAG,IAAA,EAAA,CAAA,CAAA,CAAA,qBAEnC,IAAsB,CAAtBU,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,EAEtBD,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,EACrBD,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}
|
|
@@ -1,5 +1,62 @@
|
|
|
1
|
-
import f from "
|
|
1
|
+
import { defineComponent as u, computed as m, createBlock as z, openBlock as f, unref as i, normalizeClass as l, withCtx as n, createVNode as s, normalizeStyle as o, renderSlot as t } from "vue";
|
|
2
|
+
import S from "../shadcn/resizable/ResizableHandle.vue.js";
|
|
3
|
+
import g from "../shadcn/resizable/ResizablePanelGroup.vue.js";
|
|
4
|
+
import { SplitterPanel as d } from "reka-ui";
|
|
5
|
+
const w = /* @__PURE__ */ u({
|
|
6
|
+
__name: "JSplitter",
|
|
7
|
+
props: {
|
|
8
|
+
direction: { default: "horizontal" },
|
|
9
|
+
defaultSize: { default: 40 },
|
|
10
|
+
minSize: { default: 20 },
|
|
11
|
+
maxSize: {},
|
|
12
|
+
secondMinSize: {},
|
|
13
|
+
secondMaxSize: {},
|
|
14
|
+
withHandle: { type: Boolean, default: !0 },
|
|
15
|
+
gap: { default: 10 },
|
|
16
|
+
class: {}
|
|
17
|
+
},
|
|
18
|
+
setup(e) {
|
|
19
|
+
const c = e, r = m(() => 100 - c.defaultSize);
|
|
20
|
+
return (a, h) => (f(), z(i(g), {
|
|
21
|
+
direction: e.direction,
|
|
22
|
+
class: l(e.class)
|
|
23
|
+
}, {
|
|
24
|
+
default: n(() => [
|
|
25
|
+
s(i(d), {
|
|
26
|
+
"default-size": e.defaultSize,
|
|
27
|
+
"min-size": e.minSize,
|
|
28
|
+
"max-size": e.maxSize,
|
|
29
|
+
class: l(e.gap > 0 ? e.direction === "horizontal" ? "pr-[calc(var(--gap)/2)]" : "pb-[calc(var(--gap)/2)]" : ""),
|
|
30
|
+
style: o(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
|
|
31
|
+
}, {
|
|
32
|
+
default: n(() => [
|
|
33
|
+
t(a.$slots, "first", {}, void 0, !0),
|
|
34
|
+
t(a.$slots, "left", {}, void 0, !0),
|
|
35
|
+
t(a.$slots, "top", {}, void 0, !0)
|
|
36
|
+
]),
|
|
37
|
+
_: 3
|
|
38
|
+
}, 8, ["default-size", "min-size", "max-size", "class", "style"]),
|
|
39
|
+
s(i(S), { "with-handle": e.withHandle }, null, 8, ["with-handle"]),
|
|
40
|
+
s(i(d), {
|
|
41
|
+
"default-size": r.value,
|
|
42
|
+
"min-size": e.secondMinSize,
|
|
43
|
+
"max-size": e.secondMaxSize,
|
|
44
|
+
class: l(e.gap > 0 ? e.direction === "horizontal" ? "pl-[calc(var(--gap)/2)]" : "pt-[calc(var(--gap)/2)]" : ""),
|
|
45
|
+
style: o(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
|
|
46
|
+
}, {
|
|
47
|
+
default: n(() => [
|
|
48
|
+
t(a.$slots, "second", {}, void 0, !0),
|
|
49
|
+
t(a.$slots, "right", {}, void 0, !0),
|
|
50
|
+
t(a.$slots, "bottom", {}, void 0, !0)
|
|
51
|
+
]),
|
|
52
|
+
_: 3
|
|
53
|
+
}, 8, ["default-size", "min-size", "max-size", "class", "style"])
|
|
54
|
+
]),
|
|
55
|
+
_: 3
|
|
56
|
+
}, 8, ["direction", "class"]));
|
|
57
|
+
}
|
|
58
|
+
});
|
|
2
59
|
export {
|
|
3
|
-
|
|
60
|
+
w as default
|
|
4
61
|
};
|
|
5
62
|
//# sourceMappingURL=JSplitter.vue2.js.map
|