Merge pull request #32 from vue-pivottable/feat/filterbox-count

Feat/filterbox count

Author: hyemyn2

src/components/pivottable-ui/VFilterBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="pvtFilterBox"
-    :style="{ display: block, cursor: initial, zIndex: props.zIndex}"
+    :style="{ display: 'block', cursor: 'initial', zIndex: props.zIndex}"
     @click="moveFilterBoxToTop"
   >
     <div
@@ -51,7 +51,8 @@
           type="checkbox"
           :checked="!(x in unselectedValues)"
         >
-        <template v-html="x"></template>
+        {{ x }}
+        <span>({{ filterBoxValues[x] }})</span>
         <a
           class="pvtOnly"
           @click="selectOnly($event, x)"
@@ -68,10 +69,8 @@
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue'
-const sorters = inject('sorters')
-const menuLimit = inject('menuLimit')
-const localeStrings = inject('localeStrings')
+import { ref, computed } from 'vue'
+import { useProvideFilterBox } from '../../composables'
 const props = defineProps({
   unselectedFilterValues: {
     type: Object,
@@ -90,10 +89,12 @@ const props = defineProps({
     default: () => ({})
   }
 })
+const { localeStrings, sorter, menuLimit } = useProvideFilterBox()
+console.log(localeStrings)
 const filterBoxValuesList = Object.keys(props.filterBoxValues)
 const filterText = ref('')
 const showMenu = ref(filterBoxValuesList.length < menuLimit)
-const sortedList = [...filterBoxValuesList].sort(sorters(props.filterBoxKey))
+const sortedList = [...filterBoxValuesList].sort(sorter(props.filterBoxKey))
 const filteredList = computed(() => sortedList.filter(matchesFilter))
 const unselectedValues = ref(props.unselectedFilterValues)
 const emit = defineEmits([

src/composables/useProvideFilterbox.js

@@ -3,7 +3,7 @@ import { getSort } from '../helper/utilities'
 const filterBoxKey = Symbol('filterBox')
 
 export function provideFilterBox (props) {
-  const localeStrings = props.languagePack[props.locale]
+  const localeStrings = props.languagePack[props.locale].localeStrings
   const sorter = (x) => getSort(props.sorters, x)
   const menuLimit = props.menuLimit