Merge pull request #40 from vue-pivottable/refactor/dragndrop

fix: unselectedFilterValues 오타 수정 #39

Author: gingerbeerlime

src/components/pivottable-ui/VDragAndDropCell.vue

@@ -13,11 +13,11 @@
       :key="item"
       :fixed="fixedFromDragDrop.includes(item)"
       :restricted="restrictedFromDragDrop.includes(item)"
-      :open="openStatus?.[item]"
-      :unSelectedFilterValues="valueFilter?.[item]"
+      :open="openStatus[item]"
+      :unselectedFilterValues="valueFilter[item]"
       :attributeName="item"
-      :attributeValues="allFilters?.[item]"
-      :zIndex="zIndices?.[item]"
+      :attributeValues="allFilters[item]"
+      :zIndex="zIndices[item] || maxZIndex"
       :hideDropDownForUnused="hideDropDownForUnused"
       @update:zIndexOfFilterBox="$emit('update:zIndexOfFilterBox', $event)"
       @update:unselectedFilterValues="
@@ -85,6 +85,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  maxZIndex: {
+    type: Number,
+    default: 1000
+  },
   openStatus: {
     type: Object,
     default: () => ({})

src/components/pivottable-ui/VPivottableUi.vue

@@ -16,8 +16,11 @@
           :valueFilter="state.valueFilter"
           :restrictedFromDragDrop="state.restrictedFromDragDrop"
           :fixedFromDragDrop="state.fixedFromDragDrop"
-          :hideFilterBoxOfUnusedAttributes="state.hideFilterBoxOfUnusedAttributes"
+          :hideFilterBoxOfUnusedAttributes="
+            state.hideFilterBoxOfUnusedAttributes
+          "
           :zIndices="pivotUiState.zIndices"
+          :maxZIndex="pivotUiState.maxZIndex"
           :openStatus="pivotUiState.openStatus"
           @update:zIndexOfFilterBox="onMoveFilterBoxToTop"
           @update:unselectedFilterValues="onUpdateValueFilter"
@@ -54,8 +57,11 @@
           :valueFilter="state.valueFilter"
           :restrictedFromDragDrop="state.restrictedFromDragDrop"
           :fixedFromDragDrop="state.fixedFromDragDrop"
-          :hideFilterBoxOfUnusedAttributes="state.hideFilterBoxOfUnusedAttributes"
+          :hideFilterBoxOfUnusedAttributes="
+            state.hideFilterBoxOfUnusedAttributes
+          "
           :zIndices="pivotUiState.zIndices"
+          :maxZIndex="pivotUiState.maxZIndex"
           :openStatus="pivotUiState.openStatus"
           @update:zIndexOfFilterBox="onMoveFilterBoxToTop"
           @update:unselectedFilterValues="onUpdateValueFilter"
@@ -76,8 +82,11 @@
           :valueFilter="state.valueFilter"
           :restrictedFromDragDrop="state.restrictedFromDragDrop"
           :fixedFromDragDrop="state.fixedFromDragDrop"
-          :hideFilterBoxOfUnusedAttributes="state.hideFilterBoxOfUnusedAttributes"
+          :hideFilterBoxOfUnusedAttributes="
+            state.hideFilterBoxOfUnusedAttributes
+          "
           :zIndices="pivotUiState.zIndices"
+          :maxZIndex="pivotUiState.maxZIndex"
           :openStatus="pivotUiState.openStatus"
           @update:zIndexOfFilterBox="onMoveFilterBoxToTop"
           @update:unselectedFilterValues="onUpdateValueFilter"
@@ -96,22 +105,22 @@
       </tr>
     </tbody>
   </table>
-    <div>
+  <div>
     <h4>State</h4>
-    rows: {{ state.rows }} <br>
-    cols: {{ state.cols }} <br>
-    aggregatorName: {{ state.aggregatorName }} <br>
-    rendererName: {{ state.rendererName }} <br>
-    vals: {{ state.vals }} <br>
+    rows: {{ state.rows }} <br />
+    cols: {{ state.cols }} <br />
+    aggregatorName: {{ state.aggregatorName }} <br />
+    rendererName: {{ state.rendererName }} <br />
+    vals: {{ state.vals }} <br />
     attributeNames: {{ attributeNames }}
     <h4>UI State</h4>
-    unusedOrder: {{ pivotUiState.unusedOrder }} <br>
-    zIndices: {{ pivotUiState.zIndices }} <br>
-    maxZIndex: {{ pivotUiState.maxZIndex }} <br>
-    openStatus: {{ pivotUiState.openStatus }} <br>
+    unusedOrder: {{ pivotUiState.unusedOrder }} <br />
+    zIndices: {{ pivotUiState.zIndices }} <br />
+    maxZIndex: {{ pivotUiState.maxZIndex }} <br />
+    openStatus: {{ pivotUiState.openStatus }} <br />
     allFilters:
     <textarea
-      style="height: 500px; margin: 10px; width: 100%;"
+      style="height: 500px; margin: 10px; width: 100%"
       readonly
       :value="JSON.stringify(allFilters, undefined, 2)"
     />
@@ -125,7 +134,12 @@ import VAggregatorCell from './VAggregatorCell.vue'
 import VDragAndDropCell from './VDragAndDropCell.vue'
 import { VPivottable } from '@/'
 import { computed, watch } from 'vue'
-import { usePropsState, useMaterializeInput, usePivotUiState, provideFilterBox } from '@/composables'
+import {
+  usePropsState,
+  useMaterializeInput,
+  usePivotUiState,
+  provideFilterBox
+} from '@/composables'
 import TableRenderer from '../pivottable/renderer'
 
 const props = defineProps({
@@ -182,20 +196,15 @@ const {
   onUpdateUnusedOrder
 } = usePivotUiState()
 
-const {
-  allFilters,
-  materializedInput
-} = useMaterializeInput(
+const { allFilters, materializedInput } = useMaterializeInput(
   computed(() => props.data),
   {
     derivedAttributes: computed(() => props.derivedAttributes)
   }
 )
 
 const rendererItems = computed(() =>
-  Object.keys(state.renderers).length
-    ? state.renderers
-    : TableRenderer
+  Object.keys(state.renderers).length ? state.renderers : TableRenderer
 )
 const aggregatorItems = computed(() => state.aggregators)
 const rowAttrs = computed(() => {
@@ -245,15 +254,16 @@ watch(
       allFilters: allFilters.value,
       materializedInput: materializedInput.value
     })
-  }, {
+  },
+  {
     deep: true
-  })
+  }
+)
 </script>
 
 <style>
 .pvtUi {
   border-collapse: collapse;
   width: 100%;
 }
-
 </style>