@tmagic/form 1.7.3 → 1.7.5

package/dist/tmagic-form.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, withCtx, createVNode, inject, ref, computed, watchEffect, watch, resolveComponent, normalizeStyle, normalizeClass, mergeProps, resolveDynamicComponent, Fragment, renderList, createTextVNode, toDisplayString, toRaw, readonly, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, onUnmounted, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
+import { readonly, defineComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, withCtx, createVNode, inject, ref, computed, watchEffect, watch, resolveComponent, normalizeStyle, normalizeClass, mergeProps, resolveDynamicComponent, Fragment, renderList, createTextVNode, toDisplayString, toRaw, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, onUnmounted, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, DocumentCopy, CaretTop, Position, Grid, Plus, Sort, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
 import { TMagicTooltip, TMagicIcon, TMagicFormItem, TMagicButton, TMagicCheckbox, TMagicCard, TMagicPopover, TMagicInputNumber, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessage, tMagicMessageBox, TMagicDialog, TMagicRadioButton, TMagicRadio, TMagicRadioGroup, TMagicSelect, TMagicSwitch, TMagicTimePicker, useZIndex, TMagicTable, TMagicUpload, TMagicPagination, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
@@ -9,14 +9,23 @@ import { createPopper } from '@popperjs/core';
 import Sortable from 'sortablejs';
 export * from '@tmagic/form-schema';
 
-const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
+const TABLE_SELECT_TYPES = /* @__PURE__ */ new Set(["table-select", "tableSelect"]);
+const isTableSelect = (type) => typeof type === "string" && TABLE_SELECT_TYPES.has(type);
 const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
   if (type === "html" && typeof asyncLoad === "object" && typeof name !== "undefined") {
     asyncLoad.name = name;
     value.asyncLoad = typeof initValue2.asyncLoad === "object" ? initValue2.asyncLoad : asyncLoad;
   }
 };
-const isMultipleValue = (type) => typeof type === "string" && ["checkbox-group", "checkboxGroup", "table", "cascader", "group-list", "groupList"].includes(type);
+const MULTIPLE_VALUE_TYPES = /* @__PURE__ */ new Set([
+  "checkbox-group",
+  "checkboxGroup",
+  "table",
+  "cascader",
+  "group-list",
+  "groupList"
+]);
+const isMultipleValue = (type) => typeof type === "string" && MULTIPLE_VALUE_TYPES.has(type);
 const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) => {
   if (Array.isArray(initValue2[name])) {
     value[name] = initValue2[name].map((v, index) => createValues(mForm, items, v, value[name]?.[index]));
@@ -50,22 +59,18 @@ const initValueItem = function(mForm, item, initValue2, value) {
   const { names } = item;
   const { type, name } = item;
   if (isTableSelect(type) && name) {
-    value[name] = initValue2[name] || "";
+    value[name] = initValue2[name] ?? "";
     return value;
   }
   asyncLoadConfig(value, initValue2, item);
   if (name && !items && typeof initValue2?.[name] !== "undefined") {
     if (typeof value[name] === "undefined") {
-      if (type === "number") {
-        value[name] = Number(initValue2[name]);
-      } else {
-        value[name] = typeof initValue2[name] === "object" ? initValue2[name] : initValue2[name];
-      }
+      value[name] = type === "number" ? Number(initValue2[name]) : initValue2[name];
     }
     return value;
   }
   if (names) {
-    return names.forEach((n) => value[n] = initValue2[n] || "");
+    return names.forEach((n) => value[n] = initValue2[n] ?? "");
   }
   if (!name) {
     return createValues(mForm, items, initValue2, value);
@@ -91,7 +96,7 @@ const createValues = function(mForm, config = [], initValue2 = {}, value = {}) {
   }
   return value;
 };
-const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }) {
+const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple, names }) {
   if (typeof defaultValue === "function") {
     return defaultValue(mForm);
   }
@@ -110,15 +115,18 @@ const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }
   if (multiple || type === "number-range") {
     return [];
   }
+  if (type === "daterange" && !names) {
+    return [];
+  }
   return "";
 };
 const filterFunction = (mForm, config, props) => {
   if (typeof config === "function") {
     return config(mForm, {
-      values: mForm?.initValues || {},
-      model: props.model,
-      parent: mForm?.parentValues || {},
-      formValue: mForm?.values || props.model,
+      values: readonly(mForm?.initValues || {}),
+      model: readonly(props.model),
+      parent: readonly(mForm?.parentValues || {}),
+      formValue: readonly(mForm?.values || props.model),
       prop: props.prop,
       config: props.config,
       index: props.index,
@@ -187,7 +195,7 @@ const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss"
     let time;
     if (["x", "timestamp"].includes(format)) {
       time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
-    } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+    } else if (typeof v === "string" && v.includes("Z") || v instanceof Date) {
       dayjs.extend(utc);
       time = dayjs(v).utcOffset(8).format(format);
     } else {
@@ -200,9 +208,10 @@ const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss"
   }
   return defaultValue;
 };
-const getDataByPage = (data = [], pagecontext, pagesize) => data.filter(
-  (item, index) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize
-);
+const getDataByPage = (data = [], pagecontext, pagesize) => {
+  const start = pagecontext * pagesize;
+  return data.slice(start, start + pagesize);
+};
 const sortArray = (data, newIndex, oldIndex, sortKey) => {
   if (newIndex === oldIndex) {
     return data;
@@ -210,7 +219,8 @@ const sortArray = (data, newIndex, oldIndex, sortKey) => {
   if (newIndex < 0 || newIndex >= data.length || oldIndex < 0 || oldIndex >= data.length) {
     return data;
   }
-  const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+  const item = data[oldIndex];
+  const newData = data.toSpliced(oldIndex, 1).toSpliced(newIndex, 0, item);
   if (sortKey) {
     for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
       newData[v][sortKey] = i;
@@ -220,9 +230,9 @@ const sortArray = (data, newIndex, oldIndex, sortKey) => {
 };
 const sortChange = (data, { prop, order }) => {
   if (order === "ascending") {
-    data = data.sort((a, b) => a[prop] - b[prop]);
+    data.sort((a, b) => a[prop] - b[prop]);
   } else if (order === "descending") {
-    data = data.sort((a, b) => b[prop] - a[prop]);
+    data.sort((a, b) => b[prop] - a[prop]);
   }
 };
 
@@ -2629,15 +2639,22 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const mForm = inject("mForm");
     if (props.config.initValue && props.model) {
       props.model[props.name] = props.config.initValue;
     }
+    const text = computed(() => {
+      if (props.config.displayText) {
+        return filterFunction(mForm, props.config.displayText, props);
+      }
+      return props.model[props.name];
+    });
     useAddField(props.prop);
     return (_ctx, _cache) => {
       return __props.model ? (openBlock(), createElementBlock(
         "span",
         _hoisted_1$8,
-        toDisplayString(__props.model[__props.name]),
+        toDisplayString(text.value),
         1
         /* TEXT */
       )) : createCommentVNode("v-if", true);

package/dist/tmagic-form.umd.cjs

@@ -1695,7 +1695,7 @@
   var Promise$1 = getNative(root, 'Promise');
 
   /* Built-in method references that are verified to be native. */
-  var Set = getNative(root, 'Set');
+  var Set$1 = getNative(root, 'Set');
 
   /** `Object#toString` result references. */
   var mapTag$5 = '[object Map]',
@@ -1710,7 +1710,7 @@
   var dataViewCtorString = toSource(DataView),
       mapCtorString = toSource(Map$1),
       promiseCtorString = toSource(Promise$1),
-      setCtorString = toSource(Set),
+      setCtorString = toSource(Set$1),
       weakMapCtorString = toSource(WeakMap);
 
   /**
@@ -1726,7 +1726,7 @@
   if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3) ||
       (Map$1 && getTag(new Map$1) != mapTag$5) ||
       (Promise$1 && getTag(Promise$1.resolve()) != promiseTag) ||
-      (Set && getTag(new Set) != setTag$5) ||
+      (Set$1 && getTag(new Set$1) != setTag$5) ||
       (WeakMap && getTag(new WeakMap) != weakMapTag$1)) {
     getTag = function(value) {
       var result = baseGetTag(value),
@@ -2939,14 +2939,23 @@
     return baseIsEqual(value, other);
   }
 
-  const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
+  const TABLE_SELECT_TYPES = /* @__PURE__ */ new Set(["table-select", "tableSelect"]);
+  const isTableSelect = (type) => typeof type === "string" && TABLE_SELECT_TYPES.has(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
     if (type === "html" && typeof asyncLoad === "object" && typeof name !== "undefined") {
       asyncLoad.name = name;
       value.asyncLoad = typeof initValue2.asyncLoad === "object" ? initValue2.asyncLoad : asyncLoad;
     }
   };
-  const isMultipleValue = (type) => typeof type === "string" && ["checkbox-group", "checkboxGroup", "table", "cascader", "group-list", "groupList"].includes(type);
+  const MULTIPLE_VALUE_TYPES = /* @__PURE__ */ new Set([
+    "checkbox-group",
+    "checkboxGroup",
+    "table",
+    "cascader",
+    "group-list",
+    "groupList"
+  ]);
+  const isMultipleValue = (type) => typeof type === "string" && MULTIPLE_VALUE_TYPES.has(type);
   const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) => {
     if (Array.isArray(initValue2[name])) {
       value[name] = initValue2[name].map((v, index) => createValues(mForm, items, v, value[name]?.[index]));
@@ -2980,22 +2989,18 @@
     const { names } = item;
     const { type, name } = item;
     if (isTableSelect(type) && name) {
-      value[name] = initValue2[name] || "";
+      value[name] = initValue2[name] ?? "";
       return value;
     }
     asyncLoadConfig(value, initValue2, item);
     if (name && !items && typeof initValue2?.[name] !== "undefined") {
       if (typeof value[name] === "undefined") {
-        if (type === "number") {
-          value[name] = Number(initValue2[name]);
-        } else {
-          value[name] = typeof initValue2[name] === "object" ? initValue2[name] : initValue2[name];
-        }
+        value[name] = type === "number" ? Number(initValue2[name]) : initValue2[name];
       }
       return value;
     }
     if (names) {
-      return names.forEach((n) => value[n] = initValue2[n] || "");
+      return names.forEach((n) => value[n] = initValue2[n] ?? "");
     }
     if (!name) {
       return createValues(mForm, items, initValue2, value);
@@ -3021,7 +3026,7 @@
     }
     return value;
   };
-  const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }) {
+  const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple, names }) {
     if (typeof defaultValue === "function") {
       return defaultValue(mForm);
     }
@@ -3040,15 +3045,18 @@
     if (multiple || type === "number-range") {
       return [];
     }
+    if (type === "daterange" && !names) {
+      return [];
+    }
     return "";
   };
   const filterFunction = (mForm, config, props) => {
     if (typeof config === "function") {
       return config(mForm, {
-        values: mForm?.initValues || {},
-        model: props.model,
-        parent: mForm?.parentValues || {},
-        formValue: mForm?.values || props.model,
+        values: vue.readonly(mForm?.initValues || {}),
+        model: vue.readonly(props.model),
+        parent: vue.readonly(mForm?.parentValues || {}),
+        formValue: vue.readonly(mForm?.values || props.model),
         prop: props.prop,
         config: props.config,
         index: props.index,
@@ -3117,7 +3125,7 @@
       let time;
       if (["x", "timestamp"].includes(format)) {
         time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
-      } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+      } else if (typeof v === "string" && v.includes("Z") || v instanceof Date) {
         dayjs.extend(utc);
         time = dayjs(v).utcOffset(8).format(format);
       } else {
@@ -3130,9 +3138,10 @@
     }
     return defaultValue;
   };
-  const getDataByPage = (data = [], pagecontext, pagesize) => data.filter(
-    (item, index) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize
-  );
+  const getDataByPage = (data = [], pagecontext, pagesize) => {
+    const start = pagecontext * pagesize;
+    return data.slice(start, start + pagesize);
+  };
   const sortArray = (data, newIndex, oldIndex, sortKey) => {
     if (newIndex === oldIndex) {
       return data;
@@ -3140,7 +3149,8 @@
     if (newIndex < 0 || newIndex >= data.length || oldIndex < 0 || oldIndex >= data.length) {
       return data;
     }
-    const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+    const item = data[oldIndex];
+    const newData = data.toSpliced(oldIndex, 1).toSpliced(newIndex, 0, item);
     if (sortKey) {
       for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
         newData[v][sortKey] = i;
@@ -3150,9 +3160,9 @@
   };
   const sortChange = (data, { prop, order }) => {
     if (order === "ascending") {
-      data = data.sort((a, b) => a[prop] - b[prop]);
+      data.sort((a, b) => a[prop] - b[prop]);
     } else if (order === "descending") {
-      data = data.sort((a, b) => b[prop] - a[prop]);
+      data.sort((a, b) => b[prop] - a[prop]);
     }
   };
 
@@ -5559,15 +5569,22 @@
     },
     setup(__props) {
       const props = __props;
+      const mForm = vue.inject("mForm");
       if (props.config.initValue && props.model) {
         props.model[props.name] = props.config.initValue;
       }
+      const text = vue.computed(() => {
+        if (props.config.displayText) {
+          return filterFunction(mForm, props.config.displayText, props);
+        }
+        return props.model[props.name];
+      });
       useAddField(props.prop);
       return (_ctx, _cache) => {
         return __props.model ? (vue.openBlock(), vue.createElementBlock(
           "span",
           _hoisted_1$8,
-          vue.toDisplayString(__props.model[__props.name]),
+          vue.toDisplayString(text.value),
           1
           /* TEXT */
         )) : vue.createCommentVNode("v-if", true);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.3",
+  "version": "1.7.5",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -51,9 +51,9 @@
   "peerDependencies": {
     "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.3",
-    "@tmagic/utils": "1.7.3",
-    "@tmagic/form-schema": "1.7.3"
+    "@tmagic/design": "1.7.5",
+    "@tmagic/form-schema": "1.7.5",
+    "@tmagic/utils": "1.7.5"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/Display.vue

@@ -1,9 +1,12 @@
 <template>
-  <span v-if="model">{{ model[name] }}</span>
+  <span v-if="model">{{ text }}</span>
 </template>
 
 <script setup lang="ts">
-import type { DisplayConfig, FieldProps } from '../schema';
+import { computed, inject } from 'vue';
+
+import type { DisplayConfig, FieldProps, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -12,9 +15,19 @@ defineOptions({
 
 const props = defineProps<FieldProps<DisplayConfig>>();
 
+const mForm = inject<FormState | undefined>('mForm');
+
 if (props.config.initValue && props.model) {
   props.model[props.name] = props.config.initValue;
 }
 
+const text = computed(() => {
+  if (props.config.displayText) {
+    return filterFunction<string>(mForm, props.config.displayText, props);
+  }
+
+  return props.model[props.name];
+});
+
 useAddField(props.prop);
 </script>

package/src/utils/form.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { readonly } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
@@ -42,10 +43,11 @@ interface DefaultItem {
   type: string;
   filter: string;
   multiple: boolean;
+  names?: string[];
 }
 
-const isTableSelect = (type?: string | TypeFunction) =>
-  typeof type === 'string' && ['table-select', 'tableSelect'].includes(type);
+const TABLE_SELECT_TYPES = new Set(['table-select', 'tableSelect']);
+const isTableSelect = (type?: string | TypeFunction) => typeof type === 'string' && TABLE_SELECT_TYPES.has(type);
 
 const asyncLoadConfig = (value: FormValue, initValue: FormValue, { asyncLoad, name, type }: HtmlField) => {
   // 富文本配置了异步加载
@@ -55,9 +57,15 @@ const asyncLoadConfig = (value: FormValue, initValue: FormValue, { asyncLoad, na
   }
 };
 
-const isMultipleValue = (type?: string | TypeFunction) =>
-  typeof type === 'string' &&
-  ['checkbox-group', 'checkboxGroup', 'table', 'cascader', 'group-list', 'groupList'].includes(type);
+const MULTIPLE_VALUE_TYPES = new Set([
+  'checkbox-group',
+  'checkboxGroup',
+  'table',
+  'cascader',
+  'group-list',
+  'groupList',
+]);
+const isMultipleValue = (type?: string | TypeFunction) => typeof type === 'string' && MULTIPLE_VALUE_TYPES.has(type);
 
 const initItemsValue = (
   mForm: FormState | undefined,
@@ -113,7 +121,7 @@ const initValueItem = function (
   const { type, name } = item as ChildConfig;
 
   if (isTableSelect(type) && name) {
-    value[name] = initValue[name] || '';
+    value[name] = initValue[name] ?? '';
     return value;
   }
 
@@ -122,18 +130,14 @@ const initValueItem = function (
   // 这种情况比较多，提前结束
   if (name && !items && typeof initValue?.[name] !== 'undefined') {
     if (typeof value[name] === 'undefined') {
-      if (type === 'number') {
-        value[name] = Number(initValue[name]);
-      } else {
-        value[name] = typeof initValue[name] === 'object' ? initValue[name] : initValue[name];
-      }
+      value[name] = type === 'number' ? Number(initValue[name]) : initValue[name];
     }
 
     return value;
   }
 
   if (names) {
-    return names.forEach((n: string) => (value[n] = initValue[n] || ''));
+    return names.forEach((n: string) => (value[n] = initValue[n] ?? ''));
   }
 
   if (!name) {
@@ -173,7 +177,10 @@ export const createValues = function (
   return value;
 };
 
-const getDefaultValue = function (mForm: FormState | undefined, { defaultValue, type, filter, multiple }: DefaultItem) {
+const getDefaultValue = function (
+  mForm: FormState | undefined,
+  { defaultValue, type, filter, multiple, names }: DefaultItem,
+) {
   if (typeof defaultValue === 'function') {
     return defaultValue(mForm);
   }
@@ -199,6 +206,10 @@ const getDefaultValue = function (mForm: FormState | undefined, { defaultValue,
     return [];
   }
 
+  if (type === 'daterange' && !names) {
+    return [];
+  }
+
   return '';
 };
 
@@ -209,10 +220,10 @@ export const filterFunction = <T = any>(
 ) => {
   if (typeof config === 'function') {
     return (config as FilterFunction<T>)(mForm, {
-      values: mForm?.initValues || {},
-      model: props.model,
-      parent: mForm?.parentValues || {},
-      formValue: mForm?.values || props.model,
+      values: readonly(mForm?.initValues || {}),
+      model: readonly(props.model),
+      parent: readonly(mForm?.parentValues || {}),
+      formValue: readonly(mForm?.values || props.model),
       prop: props.prop,
       config: props.config,
       index: props.index,
@@ -304,7 +315,8 @@ export const datetimeFormatter = (
     let time: string | number;
     if (['x', 'timestamp'].includes(format)) {
       time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
-    } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
+    } else if ((typeof v === 'string' && v.includes('Z')) || v instanceof Date) {
+      // dayjs.extend 内部有防重复机制 (plugin.$i)，无需额外判断
       dayjs.extend(utc);
       // UTC字符串时间或Date对象格式化为北京时间
       time = dayjs(v).utcOffset(8).format(format);
@@ -320,10 +332,10 @@ export const datetimeFormatter = (
   return defaultValue;
 };
 
-export const getDataByPage = (data: any[] = [], pagecontext: number, pagesize: number) =>
-  data.filter(
-    (item: any, index: number) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize,
-  );
+export const getDataByPage = (data: any[] = [], pagecontext: number, pagesize: number) => {
+  const start = pagecontext * pagesize;
+  return data.slice(start, start + pagesize);
+};
 
 export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortKey?: string) => {
   if (newIndex === oldIndex) {
@@ -334,7 +346,9 @@ export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortK
     return data;
   }
 
-  const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+  // 先取出要移动的元素，再使用 toSpliced 避免修改原数组
+  const item = data[oldIndex];
+  const newData = data.toSpliced(oldIndex, 1).toSpliced(newIndex, 0, item);
 
   if (sortKey) {
     for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
@@ -347,8 +361,8 @@ export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortK
 
 export const sortChange = (data: any[], { prop, order }: SortProp) => {
   if (order === 'ascending') {
-    data = data.sort((a: any, b: any) => a[prop] - b[prop]);
+    data.sort((a: any, b: any) => a[prop] - b[prop]);
   } else if (order === 'descending') {
-    data = data.sort((a: any, b: any) => b[prop] - a[prop]);
+    data.sort((a: any, b: any) => b[prop] - a[prop]);
   }
 };