plain-design 1.0.0-beta.131 → 1.0.0-beta.132

package/src/packages/components/Table/table/Table.tsx

@@ -245,14 +245,18 @@ export const Table = designComponent({
       ),
     });
 
-    hooks.onClickCell.use(({ e, node }) => {
-      event.emit.onClickCell(node, e);
-      hooks.onClickRow.exec({ e, node });
+    hooks.onClickCell.use((val) => {
+      event.emit.onClickCell(val.node, val.e, val.plc);
+      hooks.onClickRow.exec({ e: val.e, node: val.node });
     });
 
-    hooks.onDblclickCell.use(({ e, node }) => {
-      event.emit.onDblclickCell(node, e);
-      hooks.onDblclickRow.exec({ e, node });
+    hooks.onDblclickCell.use((val) => {
+      event.emit.onDblclickCell(val.node, val.e, val.plc);
+      hooks.onDblclickRow.exec({ e: val.e, node: val.node });
+    });
+
+    hooks.onContextmenuCell.use((val) => {
+      event.emit.onContextmenuCell(val.node, val.e, val.plc);
     });
 
     hooks.onClickHeadCell.use(({ e, plc }) => {!plc.props.disableAutoEmitClickTitle && event.emit.onClickHead(plc, e);});

package/src/packages/components/Table/table/body/cell.tsx

@@ -10,6 +10,7 @@ import {useCellValue} from "./useCellValue";
 import {createTooltip} from "../../../useTooltip";
 import {createEffects} from "@peryl/utils/createEffects";
 import {usePopup} from "../../../usePopup";
+import {injectTableAutoSpan} from "../../plc/use/useTableAutoSpan";
 
 export const PltCell = designComponent({
   name: 'plt-cell',
@@ -23,6 +24,9 @@ export const PltCell = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLElement });
 
     const popup = usePopup();
+
+    const tableAutoSpan = injectTableAutoSpan();
+
     /**
      * 单元格校验
      * @author  韦胜健
@@ -51,6 +55,11 @@ export const PltCell = designComponent({
       props.table.hooks.onDblclickCell.exec({ e, node: props.node, plc: props.plc });
     };
 
+    const onContextmenu = (e: iMouseEvent) => {
+      // if (bodyCell.value().editable) {return;}
+      props.table.hooks.onContextmenuCell.exec({ e, node: props.node, plc: props.plc });
+    };
+
     /**
      * 鼠标进入单元格
      * @author  韦胜健
@@ -70,7 +79,9 @@ export const PltCell = designComponent({
      * @author  韦胜健
      * @date    2022/12/5 20:35
      */
-    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false });
+    const { effects: cellValueEffects } = createEffects();
+    onBeforeUnmount(() => cellValueEffects.clear());
+    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false, effects: cellValueEffects });
 
     /**
      * 单元格样式类名
@@ -143,7 +154,7 @@ export const PltCell = designComponent({
              * 则不显示overflowTooltip
              */
             if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
-              return emptyOverflowTooltipOption
+              return emptyOverflowTooltipOption;
             } else {
               return {
                 reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
@@ -182,14 +193,32 @@ export const PltCell = designComponent({
       return { update };
     })();
 
+    /*每次渲染都记录上一次的span，某次渲染在offsetData中找不到自己的offsetIndex时，就用上一次的span*/
+    let prevSpan = { rowspan: 1, colspan: 1 };
+
     return {
       render: () => {
         const { node, plc } = props;
         const { body, editable } = bodyCell.value();
-        const span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
+        let span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
         if (plc.props.editColSpan != null && node.state.edit) {
           span.colspan = typeof plc.props.editColSpan === "function" ? plc.props.editColSpan(node) : plc.props.editColSpan;
         }
+        if (!!tableAutoSpan.value && (plc.props.autoRowSpan || plc.props.autoColSpan)) {
+          const { spans, data: offsetData } = tableAutoSpan.value;
+          /*要用offsetIndex，而不是props.node.state.index,这个是行数据在所有数据中的真实索引，而不是在虚拟列表数据中的索引*/
+          /*计算的spans仅含有虚拟数据的合并结果*/
+          const offsetIndex = offsetData.indexOf(props.node.data);
+          if (offsetIndex > -1) {
+            const rowSpan = !plc.props.field ? null : spans[offsetIndex].row?.[plc.props.field];
+            if (rowSpan != null) {span.rowspan = rowSpan;}
+            const colSpan = !plc.props.field ? null : spans[offsetIndex].col?.[plc.props.field];
+            if (colSpan != null) {span.colspan = colSpan;}
+          } else {
+            span = prevSpan;
+          }
+        }
+        prevSpan = span;
         if (span.rowspan === 0 || span.colspan === 0) {
           /*rowspan为0时，不会正确合并单元格，如果要合并单元格则不渲染这个td*/
           return null;
@@ -201,6 +230,7 @@ export const PltCell = designComponent({
         // console.log('cell', props.plc.props.title);
         return (
           <td
+            data-span={String(span.rowspan != 1 || span.colspan != 1)}
             ref={onRef.el}
             rowSpan={span.rowspan}
             colSpan={span.colspan}
@@ -208,6 +238,7 @@ export const PltCell = designComponent({
             style={styles.value}
             onClick={onClick}
             onDoubleClick={onDblclick}
+            onContextMenu={onContextmenu}
             onMouseEnter={onEnter}
             onMouseLeave={onLeave}
           >

package/src/packages/components/Table/table/body/useCellValue.tsx

@@ -1,11 +1,13 @@
 import {iTableNode} from "../utils/table.utils";
 import {tPlc} from "../../plc/utils/plc.utils";
-import {computed, reactive, toRaw} from "@peryl/react-compose";
+import {globalComputed, reactive, toRaw} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {LoadingText} from "../../../../utils/LoadingText";
 import {AsyncFormatter} from "../../../AsyncFormatter";
 import {Formatter} from "../../../Formatter";
 import {renderBodyCell} from "../../plc/utils/plc.render";
+import {iEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * 计算cell渲染所需要的内容
@@ -16,9 +18,11 @@ export function useCellValue(
   {
     optionGetter,
     formEdit,
+    effects,
   }: {
     optionGetter: () => { node: iTableNode, plc: tPlc },
     formEdit: boolean,
+    effects: iEffects,
   }
 ) {
   /**
@@ -26,20 +30,22 @@ export function useCellValue(
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const row = computed(() => {
+  const row = globalComputed(() => {
     const { node } = optionGetter();
     return node.state.edit ? node.state.editRow : node.data;
   });
+  effects.push(() => row.effect.stop());
 
   /**
    * 当前单元格的目标数据
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const sourceValue = computed(() => {
+  const sourceValue = globalComputed(() => {
     const { plc } = optionGetter();
     return !!plc.props.field ? row.value[plc.props.field] : null;
   });
+  effects.push(() => sourceValue.effect.stop());
 
   /**
    * 异步格式化的状态
@@ -58,8 +64,9 @@ export function useCellValue(
       loading: boolean,
     }
   });
+  effects.push(() => delay().then(() => {asyncState.asyncValue = null;}));
 
-  const targetValue = computed(() => {
+  const targetValue = globalComputed(() => {
     const { plc, node } = optionGetter();
     const { formatter, asyncFormatter, formatterOptions } = plc.props;
     const cellRenderScope = { plc: plc, node: node, row: row.value };
@@ -125,12 +132,14 @@ export function useCellValue(
       return sourceValue.value;
     }
   });
+  effects.push(() => targetValue.effect.stop());
 
-  const bodyCell = computed(() => {
+  const bodyCell = globalComputed(() => {
     const { node, plc } = optionGetter();
     const bc = renderBodyCell({ node, plc, formEdit, targetValue: targetValue.value });
     return () => bc;
   });
+  effects.push(() => bodyCell.effect.stop());
 
   return { bodyCell, targetValue };
 }

package/src/packages/components/Table/table/head/head-cell.tsx

@@ -7,6 +7,8 @@ import {PlainScroll} from "../../../Scroll";
 import {Icon} from "../../../Icon";
 import {renderHeadCell} from "../../plc/utils/plc.render";
 import {useTooltip} from "../../../useTooltip";
+import Tooltip from "../../../Tooltip";
+import {getFunctionValue} from '@peryl/utils/getFunctionValue';
 
 export const PltHeadCell = designComponent({
   name: 'plt-head-cell',
@@ -77,6 +79,10 @@ export const PltHeadCell = designComponent({
             onMouseLeave={handler.onLeave}
           >
             {content}
+            {!!props.tablePlc.props.tip && <Tooltip v-slots={{
+              default: () => <Icon icon="pi-info-circle" className="plt-head-cell-tip"/>,
+              popper: () => getFunctionValue(props.tablePlc.props.tip)
+            }}/>}
             <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
             {sort.value != null && (
               <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>

package/src/packages/components/Table/table/table.scss

@@ -24,6 +24,10 @@
       font-weight: 500;
       letter-spacing: 1px;
 
+      .plt-head-cell-tip {
+        color: plv(text-3);
+      }
+
       .plt-head-cell-indicator {
         position: absolute;
         top: 0;

package/src/packages/components/Table/table/use/useTableFormEditor.tsx

@@ -53,10 +53,13 @@ export function useTableFormEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
+    cellBodyArrayEffects.clear();
     if (!state.optionGetter) {return [];}
     const { node } = state.optionGetter();
-    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true }));
+    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -136,6 +139,7 @@ export function useTableFormEditor(
                         required={plc.props.required}
                         rules={plc.props.rules}
                         validator={plc.props.validator}
+                        tip={plc.props.tip}
                         disabled={!editable}
                         {...validateAttrs}
                       >

package/src/packages/components/Table/table/use/useTableModifyEditor.tsx

@@ -3,7 +3,7 @@ import {iTableHooks} from "../utils/createTableHooks";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
 import {createEffects} from "@peryl/utils/createEffects";
 import {PlainObject} from "@peryl/utils/event";
-import {computed, reactive, RenderNode, useRefs} from "@peryl/react-compose";
+import {computed, onBeforeUnmount, reactive, RenderNode, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../../../Dialog";
 import {delay} from "@peryl/utils/delay";
 import {Table} from "../Table";
@@ -64,11 +64,13 @@ export function useTableModifyEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
     if (!state.optionGetter) {return [];}
     const { node } = state;
     if (!node) {return [];}
-    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true }));
+    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -124,6 +126,7 @@ export function useTableModifyEditor(
                   required={plc.props.required}
                   rules={plc.props.rules}
                   validator={plc.props.validator}
+                  tip={plc.props.tip}
                   disabled={!editable}
                   {...validateAttrs}
                 >
@@ -142,6 +145,7 @@ export function useTableModifyEditor(
     initialize: (() => {
       let hasInitialized = false;
       return () => {
+        /*已经初始化过就不用再初始化了*/
         if (hasInitialized) {return;}
         hasInitialized = true;
         effects.push(hooks.onRender.use(
@@ -187,6 +191,8 @@ export function useTableModifyEditor(
     },
   };
 
+  onBeforeUnmount(() => effects.clear());
+
   return { methods, state };
 }
 

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -1,5 +1,5 @@
 import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
-import {tPlcType} from "../../plc/utils/plc.utils";
+import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
 import {iTableMessyData, iTableNode} from "./table.utils";
 import {PlainObject} from "@peryl/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
@@ -25,9 +25,11 @@ export const createTableHooks = () => {
     /*双击行动作*/
     onDblclickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
     /*单击单元格动作*/
-    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*双击单元格动作*/
-    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*右击单元格动作*/
+    onContextmenuCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*鼠标进入单元格*/
     onEnterCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
     /*鼠标离开单元格*/

package/src/packages/components/Table/table/utils/table.utils.ts

@@ -93,8 +93,9 @@ export const TableEmitsOptions = {
 
   onClickRow: (node: iTableNode, e: iMouseEvent) => true,
   onDblclickRow: (node: iTableNode, e: iMouseEvent) => true,
-  onClickCell: (node: iTableNode, e: iMouseEvent) => true,
-  onDblclickCell: (node: iTableNode, e: iMouseEvent) => true,
+  onClickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onDblclickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onContextmenuCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
   onClickHead: (plc: tPlcType, e: iMouseEvent) => true,
 
   onConfigPlc: (data: { plcList: tPlcType[], stateData: tPlcCacheStateData }) => true,

package/src/packages/components/VirtualTable/index.tsx

@@ -7,6 +7,8 @@ import './virtual-table.scss';
 import i18n from "../i18n";
 import {doNothing} from "@peryl/utils/doNothing";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {useTableAutoSpan} from "../Table/plc/use/useTableAutoSpan";
+import {iTableNode} from "../Table/table/utils/table.utils";
 
 export const VirtualTable = designComponent({
   name: 'virtual-table',
@@ -55,6 +57,8 @@ export const VirtualTable = designComponent({
     /*虚拟滚动时让出顶部距离显示表头*/
     const { virtual } = useVirtualList({ dataModel, props, refs: refs as any, emit, transform: false });
 
+    const tableAutoSpan = useTableAutoSpan(() => ({ data: virtual.offsetData.value.list.map(i => (i.item as iTableNode).data) }));
+
     /*---------------------------------------computed-------------------------------------------*/
     const styles = useStyles(style => {
       style.height = unit(props.height);
@@ -154,6 +158,8 @@ export const VirtualTable = designComponent({
       },
       render: () => {
         const { list } = virtual.offsetData.value;
+        /*触发响应式计算*/
+        doNothing(tableAutoSpan.value?.spans);
         return (
           <div style={styles.value} className={classes.value}>
             <Scroll

package/src/packages/components/VirtualTable/virtual-table.scss

@@ -81,19 +81,19 @@ $scrollbarSize: 12px;
       }
 
       &:hover {
-        td {
+        td:not([data-span=true]) {
           background-color: plv(table-row-hover-color);
         }
       }
 
       &.plt-row-current {
-        td {
+        td:not([data-span=true]) {
           background-color: plv(table-row-current-color);
         }
       }
 
       &.plt-row-checked {
-        td {
+        td:not([data-span=true]) {
           background-color: plv(primary-light-1);
           border-bottom-color: plv(primary-light-2);
         }

package/src/packages/components/createSimpleDate/index.ts

@@ -0,0 +1,49 @@
+export function createSimpleDate(_date?: Date) {
+  const date = _date || new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+
+  const YYYY = String(year);
+  const MM = String(month).padStart(2, '0');
+  const DD = String(day).padStart(2, '0');
+  const HH = String(hour).padStart(2, '0');
+  const mm = String(minute).padStart(2, '0');
+  const ss = String(second).padStart(2, '0');
+
+  return {
+    'YYYY-MM-DD HH:mm:ss': `${YYYY}-${MM}-${DD} ${HH}:${mm}:${ss}`,
+    'YYYY-MM-DD': `${YYYY}-${MM}-${DD}`,
+    'HH:mm:ss': `${HH}:${mm}:${ss}`,
+    YMDHms: Number(`${YYYY}${MM}${DD}${HH}${mm}${ss}`),
+    YMD: Number(`${YYYY}${MM}${DD}`),
+  };
+}
+
+export const parseDateString = (dateString: string): Date | null => {
+  const match = /(\d\d\d\d)-(\d\d)-(\d\d)/.exec(dateString);
+  if (!match) {return null;}
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const date = Number(match[3]);
+  return new Date(year, month - 1, date);
+};
+
+export const parseDatetimeString = (datetimeString: string) => {
+  const match = /(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)/.exec(datetimeString);
+  if (!match) {return null;}
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const date = Number(match[3]);
+  const hour = Number(match[4]);
+  const minute = Number(match[5]);
+  const second = Number(match[6]);
+  return new Date(year, month - 1, date, hour, minute, second);
+};
+
+export const nowDate = () => createSimpleDate()['YYYY-MM-DD'];
+export const nowTime = () => createSimpleDate()['HH:mm:ss'];
+export const nowDatetime = () => createSimpleDate()['YYYY-MM-DD HH:mm:ss'];

package/src/packages/components/useContextmenuOptions/index.tsx

@@ -0,0 +1,40 @@
+import {usePopup} from "../usePopup";
+import {ListPanel} from "../ListPanel";
+import {ListOption} from "../ListOption";
+import {iMouseEvent} from "@peryl/react-compose";
+import {getFunctionValue} from "@peryl/utils/getFunctionValue";
+
+export const useContextmenuOptions = () => {
+
+  const { $popup } = usePopup();
+
+  const open = ({ x, y ,options}: { x: number, y: number, options: iContextmenuOption[]}) => {
+    const pop = $popup.absolute({
+      x, y,
+      noArrow: true,
+      noPadding: true,
+      type: 'contextmenu-option',
+      placement: 'bottom-start',
+      trigger: 'contextmenu',
+      render: () => (
+        <ListPanel>
+          {options.map((option, index) => (
+            <ListOption key={index} label="管理该类型" onClick={async (e) => {
+              const flag = await option.handler(e);
+              if (flag != false) {pop.hide();}
+            }}>
+              {getFunctionValue(option.label)}
+            </ListOption>
+          ))}
+        </ListPanel>
+      )
+    });
+  };
+
+  return { open };
+};
+
+export interface iContextmenuOption {
+  label: string | (() => any);
+  handler: (e: iMouseEvent) => void | boolean | Promise<void | boolean>,
+}

package/src/packages/components/useTableFilter/index.ts

@@ -0,0 +1,73 @@
+import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import {computed, reactive, RenderNode} from "@peryl/react-compose";
+import {iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
+
+export function useTableFilter<T>(
+  {
+    modelValue,
+    option,
+    defaultValue,
+    display,
+    handleClickTip,
+    handleClear,
+    getQueryParam,
+    noClear,
+  }: {
+    option: TableOptionSpace.iTableOption,
+    display: (val: T) => RenderNode,
+    getQueryParam: (val: T) => iFilterQueryParam,
+    modelValue?: { set: (newVal: T | null) => void, get: () => T | null },
+    defaultValue?: T,
+    handleClickTip?: (val: T) => void,
+    handleClear?: (val: T) => void,
+    noClear?: boolean,
+  }) {
+
+  const model = (() => {
+    const _modelValue = modelValue || (() => {
+      const state = reactive({ value: defaultValue });
+      return { get: (): T | null => state.value as any, set: (newVal: T | null) => {state.value = newVal as any;} };
+    })();
+    return {
+      get: () => _modelValue.get(),
+      set: (newVal: T | null) => {_modelValue.set(newVal);}
+    };
+  })();
+
+  const clear = (val: T) => {
+    if (noClear) {return;}
+    !!handleClear ? handleClear(val) : model.set(null);
+  };
+
+  const tips = computed((): TableOptionSpace.iTableOptionTipMeta | null => {
+    const val = model.get();
+    if (val == null) {return null;}
+    return {
+      noClear,
+      display: () => display(val),
+      onClear: () => {
+        clear(val);
+        reload();
+      },
+      onClick: () => {handleClickTip?.(val);},
+    };
+  });
+
+  option.hooks.onClearFilter.use(() => {
+    const val = model.get();
+    if (val == null) {return;}
+    clear(val);
+  });
+
+  option.hooks.onTips.use((list) => {!!tips.value && list.unshift(tips.value);});
+
+  option.hooks.onQueryParam.use(async () => {
+    const val = model.get();
+    if (val == null) {return;}
+    return getQueryParam(val);
+  });
+
+  const reload = () => option.methods.pageMethods.reload();
+
+  return { model, reload };
+}

package/src/packages/entry.tsx

@@ -16,6 +16,8 @@ export {useDialog} from "./components/useDialog";
 export {$dialog} from "./components/$dialog";
 export {List} from "./components/List";
 // export {Item} from "./components/Item";
+export {ListPanel} from './components/ListPanel';
+export {ListOption} from './components/ListOption';
 export {useMessage} from "./components/useMessage";
 export {$message} from "./components/$message";
 export {useNotice} from "./components/useNotice";
@@ -131,6 +133,8 @@ export {Paragraph} from './components/Paragraph';
 export {ParagraphItem} from './components/ParagraphItem';
 export {ImagePreviewer} from './components/ImagePreviewer/ImagePreviewer';
 export {Corner} from './components/Corner';
+export {useContextmenuOptions} from './components/useContextmenuOptions';
+export type {iContextmenuOption} from './components/useContextmenuOptions';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -284,6 +288,8 @@ export {createWebDraggier} from './components/createWebDraggier';
 export {createScrollDraggier} from './components/createScrollDraggier';
 export {loadFile} from './components/loadFile';
 export {getDeviceInfo, clearDeviceInfo, eDeviceType} from './utils/getDeviceInfo';
+export {useTableFilter} from './components/useTableFilter';
+export {createSimpleDate} from './components/createSimpleDate';
 
 // @ts-ignore
 setComponentPrefix(globalComponentPrefix);