diff --git a/src/assets/style.css b/src/assets/style.css
index c7d1f7a..8547ab7 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -166,11 +166,6 @@ table.pvtTable tbody tr td {
height: 35px;
}
-/* 수민 추가 */
-.pvtAxisContainer {
- border: 0;
-}
-
.pvtAxisContainer li {
padding: 8px 6px;
list-style-type: none;
diff --git a/src/components/pivottable-ui/VDragAndDropCell.vue b/src/components/pivottable-ui/VDragAndDropCell.vue
index 0cf59b2..cb1ab2b 100644
--- a/src/components/pivottable-ui/VDragAndDropCell.vue
+++ b/src/components/pivottable-ui/VDragAndDropCell.vue
@@ -1,39 +1,37 @@
- |
-
+
-
-
- {{ attrName }}
-
-
-
- |
+
+ {{ attrName }}
+
+
+
diff --git a/src/composables/index.js b/src/composables/index.js
index 608b3d0..deb4db6 100644
--- a/src/composables/index.js
+++ b/src/composables/index.js
@@ -1,3 +1,5 @@
export { useProvidePivotData, providePivotData } from './useProvidePivotData'
-export { usePropsState } from './usePropsState'
+export { useProvideFilterBox, provideFilterBox } from './useProvideFilterbox'
export { useMaterializeInput } from './useMaterializeInput'
+export { usePropsState } from './usePropsState'
+export { usePivotUiState } from './usePivotUiState'
diff --git a/src/composables/usePivotUiState.js b/src/composables/usePivotUiState.js
new file mode 100644
index 0000000..d9d20f3
--- /dev/null
+++ b/src/composables/usePivotUiState.js
@@ -0,0 +1,30 @@
+import { reactive } from 'vue'
+
+export function usePivotUiState () {
+ const pivotUiState = reactive({
+ unusedOrder: [],
+ zIndices: {},
+ maxZIndex: 1000,
+ openStatus: {}
+ })
+
+ const onMoveFilterBoxToTop = ({ key }) => {
+ pivotUiState.maxZIndex++
+ pivotUiState.zIndices[key] = pivotUiState.maxZIndex
+ }
+
+ const onUpdateOpenStatus = ({ key, value }) => {
+ pivotUiState.openStatus[key] = value
+ }
+
+ const onUpdateUnusedOrder = (newOrder) => {
+ pivotUiState.unusedOrder = newOrder
+ }
+
+ return {
+ state: pivotUiState,
+ onMoveFilterBoxToTop,
+ onUpdateOpenStatus,
+ onUpdateUnusedOrder
+ }
+}
diff --git a/src/composables/usePropsState.js b/src/composables/usePropsState.js
index d50e5d9..0008d88 100644
--- a/src/composables/usePropsState.js
+++ b/src/composables/usePropsState.js
@@ -1,77 +1,67 @@
-import { ref, watch } from 'vue'
+import { reactive } from 'vue'
-export function usePropsState(initialProps) {
- const state = ref({ ...initialProps })
-
- watch(
- () => initialProps,
- newProps => {
- // console.log('props 변경 감지:', newProps)
- state.value = { ...newProps }
- },
- {
- deep: true,
- immediate: true
- }
- )
-
- const logStateChange = (key, oldVal, newVal) => {
- // console.log(`상태 변경: ${key}`, { 이전: oldVal, 새값: newVal })
- }
+export function usePropsState (initialProps) {
+ const state = reactive({
+ ...initialProps
+ })
const updateState = (key, value) => {
- if (key in state.value) {
- const oldVal = state.value[key]
-
- if (typeof value === 'object' && value !== null) {
- if (Array.isArray(value)) {
- state.value[key] = [...value]
- } else {
- state.value[key] = { ...value }
- }
- } else {
- state.value[key] = value
- }
-
- logStateChange(key, oldVal, state.value[key])
- state.value = { ...state.value }
+ if (key in state) {
+ state[key] = value
}
}
const updateMultiple = updates => {
- const oldState = { ...state.value }
- let changed = false
-
Object.entries(updates).forEach(([key, value]) => {
- if (key in state.value) {
- if (typeof value === 'object' && value !== null) {
- if (Array.isArray(value)) {
- state.value[key] = [...value]
- } else {
- state.value[key] = { ...value }
- }
- } else {
- state.value[key] = value
- }
- changed = true
+ if (key in state) {
+ state[key] = value
}
})
+ }
+ const onUpdateValueFilter = ({ key, value }) => {
+ updateState('valueFilter', {
+ ...state.valueFilter,
+ [key]: value
+ })
+ }
- if (changed) {
- // console.log('여러 상태 동시 업데이트:', { 이전: oldState, 새값: state.value })
- state.value = { ...state.value }
+ const onUpdateRendererName = rendererName => {
+ updateState('rendererName', rendererName)
+ if (rendererName === 'Table Heatmap') {
+ updateState('heatmapMode', 'full')
+ } else if (rendererName === 'Table Row Heatmap') {
+ updateState('heatmapMode', 'row')
+ } else if (rendererName === 'Table Col Heatmap') {
+ updateState('heatmapMode', 'col')
}
}
- const resetState = () => {
- // console.log('상태 초기화')
- state.value = { ...initialProps }
+ const onUpdateAggregatorName = aggregatorName => {
+ updateState('aggregatorName', aggregatorName)
+ }
+ const onUpdateRowOrder = rowOrder => {
+ updateState('rowOrder', rowOrder)
+ }
+ const onUpdateColOrder = colOrder => {
+ updateState('colOrder', colOrder)
+ }
+ const onUpdateVals = vals => {
+ updateState('vals', vals)
+ }
+ const onDraggedAttribute = ({ key, value }) => {
+ updateState(key, value)
}
return {
state,
updateState,
updateMultiple,
- resetState
+ onUpdateValueFilter,
+ onUpdateRendererName,
+ onUpdateAggregatorName,
+ onUpdateRowOrder,
+ onUpdateColOrder,
+ onUpdateVals,
+ onDraggedAttribute
}
}
diff --git a/src/composables/useProvideFilterbox.js b/src/composables/useProvideFilterbox.js
new file mode 100644
index 0000000..c96aa1e
--- /dev/null
+++ b/src/composables/useProvideFilterbox.js
@@ -0,0 +1,19 @@
+import { inject, provide } from 'vue'
+import { getSort } from '../helper/utilities'
+const filterBoxKey = Symbol('filterBox')
+
+export function provideFilterBox (props) {
+ const localeStrings = props.languagePack[props.locale]
+ const sorter = (x) => getSort(props.sorters, x)
+ const menuLimit = props.menuLimit
+
+ provide(filterBoxKey, {
+ localeStrings,
+ sorter,
+ menuLimit
+ })
+}
+
+export function useProvideFilterBox () {
+ return inject(filterBoxKey)
+}