@dative-gpi/foundation-shared-components 1.0.27 → 1.0.28-remove-deprecated2

package/components/lists/FSDataTableUI.vue

@@ -1,9 +1,11 @@
 <template>
   <FSCol
     gap="16px"
+    style="position: relative;"
   >
     <FSRow
-      align="bottom-center"
+      v-if="$props.showSearch || (!isExtraSmall && ($slots.prependToolbar || $slots.toolbar )) || (!$props.disableTable && !$props.disableIterator)"
+      align="bottom-left"
       :wrap="isExtraSmall ? false : true"
       width="fill"
     >
@@ -15,16 +17,14 @@
         v-if="$props.showSearch"
       >
         <FSSearchField
-          prependInnerIcon="mdi-magnify"
           :hideHeader="true"
           v-model="innerSearch"
         />
         <FSButton
           v-if="filterableHeaders.length > 0"
           prependIcon="mdi-filter-variant"
-          padding="0 7px"
-          :variant="showFilters ? 'full' : 'standard'"
-          @click="showFilters = !showFilters"
+          :variant="innerShowFilters ? 'full' : 'standard'"
+          @click="innerShowFilters = !innerShowFilters"
         />
       </template>
       <slot
@@ -34,7 +34,6 @@
       <template
         v-if="!$props.disableTable && !$props.disableIterator"
       >
-        <v-spacer />
         <FSRow
           align="center-right"
         >
@@ -42,6 +41,7 @@
             :values="modeOptions"
             :singleColor="true"
             :required="true"
+            variant="slide"
             v-model="innerMode"
           />
         </FSRow>
@@ -61,7 +61,7 @@
       gap="16px"
     >
       <FSCol
-        v-if="showFilters && hasVisibleFilters"
+        v-if="innerShowFilters && hasVisibleFilters"
         width="hug"
       >
         <FSRow
@@ -95,9 +95,9 @@
           gap="8px"
         >
           <FSChip
-            v-if="showFilters && resetable"
+            v-if="innerShowFilters && resetable"
             variant="standard"
-            :label="$tr('ui.data-table.reset-filters', 'Reset')"
+            :label="$tr('data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
             :color="ColorEnum.Error"
             :editable="true"
@@ -149,7 +149,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -291,25 +291,29 @@
               <slot
                 :name="`${header.slotName}-append`"
               />
-              <v-spacer />
-              <slot
-                :name="`${header.slotName}-configuration`"
+              <FSRow
+                align="center-right"
+                :wrap="false"
               >
-                <FSHeaderButton
-                  :first="index === 0"
-                  :last="index === headersSlots.length - 1"
-                  @update:hide="updateHeader(header, 'hidden', !header.hidden)"
-                  @update:left="updateHeader(header, 'index', -1)"
-                  @update:right="updateHeader(header, 'index', 1)"
-                />
-                <FSButton
-                  v-if="header.sortable"
-                  variant="icon"
-                  :color="sortColor(header, props)"
-                  :icon="sortIcon(header, props)"
-                  @click="toggleSort(header)"
-                />
-              </slot>
+                <slot
+                  :name="`${header.slotName}-configuration`"
+                >
+                  <FSHeaderButton
+                    :first="index === 0"
+                    :last="index === headersSlots.length - 1"
+                    @update:hide="updateHeader(header, 'hidden', !header.hidden)"
+                    @update:left="updateHeader(header, 'index', -1)"
+                    @update:right="updateHeader(header, 'index', 1)"
+                  />
+                  <FSButton
+                    v-if="header.sortable"
+                    variant="icon"
+                    :color="sortColor(header, props)"
+                    :icon="sortIcon(header, props)"
+                    @click="toggleSort(header)"
+                  />
+                </slot>
+              </FSRow>
             </FSRow>
           </slot>
         </template>
@@ -357,22 +361,23 @@
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                    {{ $tr("data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
-                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                    {{ $tr("data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
               <template
                 v-else
               >
-                <FSText>
-                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-                </FSText>
+                <FSRow>
+                  <FSText>
+                    {{ $tr("data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
+                  </FSText>
+                </FSRow>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               width="hug"
@@ -381,7 +386,7 @@
               <FSText
                 font="text-overline"
               >
-                {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
+                {{ $tr("data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSSelectField
                 class="fs-data-table-rows-per-page fs-small-input"
@@ -433,7 +438,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -447,7 +452,7 @@
               v-for="(item, index) in items"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -531,22 +536,23 @@
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                    {{ $tr("data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
-                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                    {{ $tr("data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
               <template
                 v-else
               >
-                <FSText>
-                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-                </FSText>
+                <FSRow>
+                  <FSText>
+                    {{ $tr("data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
+                  </FSText>
+                </FSRow>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               :wrap="false"
@@ -554,7 +560,7 @@
               <FSText
                 font="text-overline"
               >
-                {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
+                {{ $tr("data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSRow
                 width="120px"
@@ -603,7 +609,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -618,7 +624,7 @@
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -685,7 +691,7 @@
     <div
       class="fs-data-table-intersection"
       :id="elementId"
-    />
+    /> 
   </FSCol>
 </template>
 
@@ -696,9 +702,10 @@ import { useRouter } from "vue-router";
 import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
 
-import { alphanumericSort, sizeToVar } from "../../utils";
+import { alphanumericSort, containsSearchTerm, sizeToVar } from "../../utils";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -746,6 +753,11 @@ export default defineComponent({
       type: Array as PropType<FSDataTableColumn[]>,
       required: true
     },
+    showFilters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     filters: {
       type: Object as PropType<{ [key: string]: FSDataTableFilter[] }>,
       required: false,
@@ -815,6 +827,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    noSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     singleSelect: {
       type: Boolean,
       required: false,
@@ -881,8 +898,9 @@ export default defineComponent({
       default: "12px"
     },
   },
-  emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
+  emits: ["update:modelValue", "update:headers", "update:search", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
+    const { handleRoutingEvent } = useRouting();
     const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
@@ -895,9 +913,9 @@ export default defineComponent({
     const innerSearch: Ref<string | null> = ref(null);
     const innerRowsPerPage = ref(props.rowsPerPage);
     const innerSortBy = ref(props.sortBy);
-    const innerMode = ref(props.mode);
+    const innerMode = ref(props.disableTable ? "iterator" : props.disableIterator ? "table" : props.mode);
     const innerPage = ref(props.page);
-    const showFilters = ref(true);
+    const innerShowFilters = ref(props.showFilters);
     const resetable = ref(false);
 
     const intersectionObserver = ref<IntersectionObserver | null>(null);
@@ -906,19 +924,26 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const modeOptions: FSToggle[] = [
-      { id: "table", prependIcon: "mdi-table" },
-      { id: "iterator", prependIcon: "mdi-apps" }
+      { id: "iterator", prependIcon: "mdi-view-grid-outline" },
+      { id: "table", prependIcon: "mdi-format-list-bulleted" }
     ];
 
     const rowsPerPageOptions: { id: number, label: string }[] = [
       { id: 5, label: "5" },
       { id: 10, label: "10" },
       { id: 30, label: "30" },
-      { id: -1, label: $tr("ui.data-table.all-rows", "All") }
+      { id: -1, label: $tr("ui.common.all", "All") }
     ];
 
     const showFiltersRow = computed((): boolean => {
-      return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+      switch (innerMode.value) {
+        case "iterator": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0);
+        }
+        case "table": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+        }
+      }
     });
 
     const hasVisibleFilters = computed((): boolean => {
@@ -926,7 +951,15 @@ export default defineComponent({
     });
 
     const showFiltersDivider = computed((): boolean => {
-      return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+      switch (innerMode.value) {
+        case "iterator": {
+          return resetable.value;
+        }
+        case "table": {
+          return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+        }
+      }
+      
     });
 
     const hasToolbar = computed((): boolean => {
@@ -1021,21 +1054,24 @@ export default defineComponent({
     });
 
     const innerItems = computed((): any[] => {
-      const activeFilters: { key: string, filter: FSDataTableFilter }[] = Object.keys(filters.value).reduce((acc, key) => {
-        return acc.concat(filters.value[key].filter((filter) => filter.hidden).map((filter) => ({ key, filter })));
-      }, [] as { key: string, filter: FSDataTableFilter }[]);
+      const activeFilters: { [key: string]: FSDataTableFilter[] } = {};
+      for (const property in filters.value) {
+        activeFilters[property] = filters.value[property].filter((filter) => !filter.hidden);
+      }
+
       if (props.items && props.items.length) {
+        const innerSearchFormatted = innerSearch.value ? innerSearch.value.toLowerCase() : null;
         return props.items.filter((item) => {
           if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
-          if (innerSearch.value) {
-            if (!JSON.stringify(item).toLowerCase().includes(innerSearch.value.toString().toLowerCase())) {
+          for (const property in activeFilters) {
+            if (!activeFilters[property].some((filter) => filter.filter && filter.filter(filter.value, item[property], item))) {
               return false;
             }
           }
-          if (activeFilters.some(af => af.filter.filter && af.filter.filter(af.filter.value, item[af.key], item))) {
-            return false;
+          if (!props.noSearch && innerSearchFormatted) {
+            return containsSearchTerm(item, innerSearchFormatted);
           }
           return true;
         });
@@ -1084,12 +1120,7 @@ export default defineComponent({
           clickable: true,
           row: (event: PointerEvent, row: any) => {
             if (props.itemTo && router) {
-              if (event.metaKey || event.ctrlKey || event.button === 1) {
-                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
-              }
-              else {
-                router.push(props.itemTo(row.item));
-              }
+              handleRoutingEvent(event, props.itemTo(row.item), true);
             }
             else {
               emit("click:row", row.item);
@@ -1214,39 +1245,52 @@ export default defineComponent({
         const key = header.value!;
         const currentFilters = filters.value[key];
 
+        const getPath = (object: any, keys: string[]) => keys.reduce((acc, key) => acc[key] ?? null, object);
+
         let value: FSDataTableFilter[] = [];
 
         if (header.fixedFilters) {
           value = header.fixedFilters.map((ff): FSDataTableFilter => ({
             hidden: currentFilters?.find((cf) => cf.value == (ff.value || null))?.hidden ?? false,
             text: ff.text?.toString() ?? "—",
-            value: ff.value || null,
-            filter: header.methodFilter ?? ((value, property) => {
-              property = [property].flat();
-              return Array.isArray(property) ? property.includes(value) || (!value && property.length == 0) : (!value && !property) || value == property;
+            value: ff.value ?? null,
+            filter: header.methodFilter ?? ((_, property, item) => {
+              if (header.methodFilterRaw) {
+                return header.methodFilterRaw(ff.value, item);
+              }
+              const flat = property = [property].flat();
+              return (!ff.value && flat.length == 0) || flat.some(f => f == ff.value);
             })
           }));
+          filterDictionary[key] = value;
         }
         else {
           if (props.items && props.items.length) {
             const mapToInnerValue = header.innerValue ? header.innerValue : (i: any) => i;
-            const itemValues = props.items.flatMap((item) => Array.isArray(item[key]) && item[key].length == 0 ? undefined : item[key]).map(mapToInnerValue);
+            const itemValues = props.items.flatMap((item) => {
+              return Array.isArray(getPath(item, key.split("."))) && getPath(item, key.split(".")).length == 0 ? undefined : getPath(item, key.split("."))
+            }).map(mapToInnerValue);
             const distinctValues = [...new Set(itemValues)];
 
-            value = distinctValues.map((dv): FSDataTableFilter => ({
-              hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
-              text: dv?.toString() ?? "—",
-              value: dv || null,
-              filter: header.methodFilter ?? ((_, property) => {
-                property = [property].flat().map(mapToInnerValue);
-                return Array.isArray(property) ? property.includes(dv) || (!dv && property.length == 0) : (!dv && !property) || dv == property;
-              })
-            }));
+            value = distinctValues.map((dv): FSDataTableFilter => {
+              return {
+                hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
+                text: dv?.toString() ?? "—",
+                value: dv || null,
+                filter: header.methodFilter ?? ((_, property, item) => {
+                  if (header.methodFilterRaw) {
+                    return header.methodFilterRaw(dv, item);
+                  }
+                  const flat = [property].flat().map(mapToInnerValue);
+                  return (!dv && flat.length == 0) || flat.some(f => f == dv);
+                })
+              }
+            });
           }
+          filterDictionary[key] = value.sort((v1, v2) => {
+            return v1.text.localeCompare(v2.text, undefined, { numeric: true });
+          });
         }
-        filterDictionary[key] = value.sort((v1, v2) => {
-          return v1.text.localeCompare(v2.text, undefined, { numeric: true });
-        });
       }
       for (const [key, filters] of Object.entries(props.filters)) {
         for (const filter of filters) {
@@ -1313,6 +1357,7 @@ export default defineComponent({
             }, { threshold: [0.9] });
           }
           if (document.querySelector(`#${elementId}`)) {
+            intersectionObserver.value.unobserve(document.querySelector(`#${elementId}`)!);
             intersectionObserver.value.observe(document.querySelector(`#${elementId}`)!);
           }
           return;
@@ -1349,10 +1394,10 @@ export default defineComponent({
     };
 
     const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
+      if (initialIndex > currentIndex && tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
       }
-      else {
+      else if(tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
       }
     };
@@ -1468,8 +1513,17 @@ export default defineComponent({
       }
     });
 
+    watch(() => props.showFilters, () => {
+      innerShowFilters.value = props.showFilters;
+    });
+
     watch(innerSearch, () => {
       innerPage.value = 1;
+      emit("update:search", innerSearch.value);
+    });
+
+    watch(innerShowFilters, () => {
+      emit("update:showFilters", innerShowFilters.value);
     });
 
     watch(filters, () => {
@@ -1477,6 +1531,10 @@ export default defineComponent({
         .some((key) => filters.value[key].some((filter) => filter.hidden));
     }, { deep: true });
 
+    watch(size, () => {
+      observeIntersection();
+    });
+
     watch(innerMode, () => {
       emit("update:mode", innerMode.value);
       size.value = props.sizeIterator;
@@ -1501,6 +1559,7 @@ export default defineComponent({
 
     watch(() => props.items, async () => {
       computeFilters();
+      observeIntersection();
       if (innerPage.value !== 1) {
         const formerPage = innerPage.value;
         innerPage.value = 1;
@@ -1520,7 +1579,7 @@ export default defineComponent({
       innerPage,
       hasToolbar,
       pageOptions,
-      showFilters,
+      innerShowFilters,
       showFiltersRow,
       showFiltersDivider,
       hasVisibleFilters,

package/components/lists/FSDraggable.vue

@@ -74,7 +74,7 @@ export default defineComponent({
           const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
           dragged.classList.add("fs-draggable-dragging");
           dragged.classList.add("fs-draggable-dragging-grabbegin");
-          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          dragged.dataset.initialIndex = props.item.index;
           event.preventDefault();
         }
       }, mobileGrabThreshold);
@@ -171,7 +171,7 @@ export default defineComponent({
         return;
       }
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      dragged.dataset.initialIndex = props.item.index;
       event.dataTransfer?.setDragImage(dragged, 25, 25);
       
       if (event.dataTransfer) {

package/components/lists/FSFilterButton.vue

@@ -7,10 +7,10 @@
       #activator="{ props }"
     >
       <FSChip
+        prependIcon="mdi-filter-variant"
         class="fs-filter-button"
         variant="standard"
-        prependIcon="mdi-filter-variant"
-        :height="[30, 24]"
+        :height="['30px', '24px']"
         :color="ColorEnum.Dark"
         :editable="true"
         :label="label"
@@ -23,39 +23,35 @@
       :border="false"
     >
       <FSCol
+        padding="20px"
         gap="12px"
-        padding="16px 0 24px 16px"
       >
         <FSCol
           gap="12px"
-          padding="0 16px 0 0"
         >
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.data-table.filter", "Filter") }}
+            {{ $tr("ui.common.filter", "Filter") }}
           </FSSpan>
           <FSChip
             class="fs-filter-button-chip"
-            :height="[30, 24]"
-            :editable="true"
-            :color="$props.color"
+            :label="$tr('ui.common.all-values', 'All values')"
+            :height="['30px', '24px']"
             :variant="getAllVariant()"
-            :label="$tr('ui.data-table.all-values', 'All values')"
+            :color="$props.color"
+            :editable="true"
             @click="onToggleAll"
           />
-          <FSDivider
-            padding="0 8px 0 0"
-          />
+          <FSDivider />
           <FSSearchField
+            :hideHeader="true"
             class="fs-filter-button-search"
-            prependInnerIcon="mdi-magnify"
             v-model="search"
           />
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -63,12 +59,12 @@
             <FSChip
               v-for="(filter, index) in searchedFilters"
               class="fs-filter-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="filter.text"
-              :color="$props.color"
               :variant="getVariant(filter)"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="filter.text"
+              :editable="true"
+              :key="index"
               @click="() => onToggle(filter)"
             >
               <template
@@ -89,8 +85,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -141,10 +136,10 @@ export default defineComponent({
         if (props.filters) {
           const hidden = props.filters.filter(f => f.hidden).length;
           if (hidden > 0) {
-            return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
+            return $tr("filter-button.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
           }
         }
-        return $tr("ui.data-table.all-filters-visible", "{0}: All visible", props.header.text);
+        return $tr("filter-button.all-filters-visible", "{0}: All visible", props.header.text);
       }
       return null;
     });
@@ -195,15 +190,15 @@ export default defineComponent({
 
     return {
       searchedFilters,
+      singlePick,
       ColorEnum,
       expanded,
       search,
       label,
-      singlePick,
-      getVariant,
       getAllVariant,
-      onToggle,
-      onToggleAll
+      onToggleAll,
+      getVariant,
+      onToggle
     };
   }
 });