@canlooks/can-ui 0.0.69 → 0.0.71

package/dist/esm/extensions/reactiveForm/reactiveFormItem.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Model, RC, useReactor } from '@canlooks/reactive/react';
+import { FormItem } from '../../components/form';
+import { cloneElement, isValidElement, useRef } from 'react';
+import { cloneRef } from '../../utils';
+import { useReactiveFormContext } from './reactiveForm';
+export const ReactiveFormItem = RC(({ refer, postValue, dependencies, ...props }) => {
+    if (refer && (typeof props.children === 'function' || isValidElement(props.children))) {
+        return (_jsx(Model, { refer: refer, postValue: postValue, children: _jsx(InnerFormItem, { ...props, dependencies: dependencies }) }));
+    }
+    return _jsx(FormItem, { ...props });
+});
+function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
+    const formItemRef = useRef(null);
+    useReactor(() => dependencies?.(), () => {
+        formItemRef.current.validate().then();
+    });
+    const context = useReactiveFormContext();
+    const fieldProps = {
+        checked,
+        value,
+        onChange(e) {
+            onChange?.(e);
+            context.onChange?.();
+        }
+    };
+    return (_jsx(FormItem, { ...props, ref: cloneRef(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {
+            return typeof props.children === 'function'
+                ? props.children(fieldProps, styleProps, key)
+                : cloneElement(props.children, {
+                    key,
+                    ...fieldProps,
+                    ...styleProps
+                });
+        } }));
+}

package/dist/esm/index.d.ts

@@ -67,6 +67,7 @@ export * from './components/segmented';
 export * from './components/select';
 export * from './components/selectedList';
 export * from './components/selectionContext';
+export * from './components/serialInput';
 export * from './components/skeleton';
 export * from './components/slidableActions';
 export * from './components/slider';

package/dist/esm/index.js

@@ -67,6 +67,7 @@ export * from './components/segmented';
 export * from './components/select';
 export * from './components/selectedList';
 export * from './components/selectionContext';
+export * from './components/serialInput';
 export * from './components/skeleton';
 export * from './components/slidableActions';
 export * from './components/slider';

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ElementType, JSX, ReactElement } from 'react';
+import { ComponentProps, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
 /**
  * ----------------------------------------------------------------------------------
  * Helpers
@@ -35,7 +35,7 @@ export type ResponsiveProp<T = number> = T | ResponsiveValue<T>;
  * ----------------------------------------------------------------------------------
  * Override props
  */
-export type DivProps = JSX.IntrinsicElements['div'];
+export type DivProps = ComponentProps<'div'>;
 export type MergeProps<P, OverrideProps> = P & Omit<OverrideProps, keyof P>;
 export type OverridableProps<P, C extends ElementType> = {
     component?: C;

package/dist/esm/utils/curd.js

@@ -117,8 +117,11 @@ export function useCurdColumns({ columns, columnConfigurable }) {
             if (!isUnset(col._key) && visibleSet.has(col._key)) {
                 const symbolArr = symbolBoundToNext.current.get(col) || [];
                 // 移除DataGrid不需要的属性
-                const { filter, form, ...c } = col;
-                return [...symbolArr, { ...c }];
+                const { filterInline, filter, form, ...c } = col;
+                return [
+                    ...symbolArr,
+                    { ...c, filter: filterInline }
+                ];
             }
             return [];
         });

package/dist/esm/utils/dataGrid.d.ts

@@ -1,16 +1,17 @@
 import { Id, Obj } from '../types';
 import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
+import { CurdColumn } from '../components/curd';
 /**
  * 为列添加key
  * @param col
  * @param index
  */
-export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): string | number;
+export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): Id;
 /**
  * 索引列
  * @param columns
  */
-export declare function useColumnMap<C extends ColumnType<any>>(columns?: (C | symbol)[]): Map<Id, C>;
+export declare function useColumnMap<C extends ColumnType<any> | CurdColumn<any>>(columns?: (C | symbol)[]): Map<Id, C>;
 /**
  * 统一处理DataGrid列
  * @param param0

package/dist/esm/utils/hooks.js

@@ -5,11 +5,11 @@ import { isPromise, getPromiseState } from './utils';
  * @param value
  */
 export function usePrev(value) {
-    const v = useRef(null);
+    const prev = useRef(null);
     useEffect(() => {
-        v.current = value;
+        prev.current = value;
     });
-    return v.current;
+    return prev.current;
 }
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题

package/dist/esm/utils/index.d.ts

@@ -1,6 +1,4 @@
 export * from './bezier';
-export * from './curd';
-export * from './dataGrid';
 export * from './dnd';
 export * from './form';
 export * from './gesture';
@@ -10,3 +8,5 @@ export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';
+export * from './dataGrid';
+export * from './curd';

package/dist/esm/utils/index.js

@@ -1,6 +1,4 @@
 export * from './bezier';
-export * from './curd';
-export * from './dataGrid';
 export * from './dnd';
 export * from './form';
 export * from './gesture';
@@ -10,3 +8,5 @@ export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';
+export * from './dataGrid';
+export * from './curd';

package/dist/esm/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import { Ref, ReactNode } from 'react';
-import { Id } from '../types';
+import { Ref, ReactNode, ElementType, ComponentProps } from 'react';
+import { Id, Obj } from '../types';
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -22,10 +22,11 @@ export declare function clsx(...classes: any[]): string;
  */
 export declare function humpToSegmented(str: string, separator?: string): string;
 /**
- * 将某个值统一转换成数组或undefined
+ * 将某个值统一转换成数组或null
  * @param value
  */
-export declare function toArray<T>(value: undefined | null | T | T[]): T[] | null;
+export declare function toArray(value?: undefined | null): null;
+export declare function toArray<T>(value: T): T extends any[] ? T : T extends undefined | null ? null : T[];
 /**
  * 判断某个值是否为已选中
  * @param value 需要判断的值
@@ -102,11 +103,11 @@ export declare function fixInputNumber(value: string, { min, max, precision }: F
  */
 export declare function isChildOf(target: Element | null, container?: Element | null): boolean;
 /**
- * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * 从某个元素开始，一直向上查找
  * @param target
- * @param callback
+ * @param callback 返回true表示找到，会停止递归
  */
-export declare function findPredecessor(target: Element, callback: (el: Element) => any): HTMLElement | null;
+export declare function findPredecessor(target: Element, callback: (parent: HTMLElement) => any): HTMLElement | null;
 /**
  * 监听某个元素的所有祖先元素的滚动事件
  * @param target
@@ -123,12 +124,19 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param obj
  * @param keyPath
  * @param setValue
- * @param separator
+ * @param separator 分隔符，默认为`.`
  */
-export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], setValue?: (oldValue: any) => T, separator?: string): T;
+export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], separator?: string, setValue?: (oldValue: any) => T): T;
 /**
  * 过滤对象中值为undefined属性
  * @param obj
  * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
  */
 export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;
+/**
+ * 合并属性
+ */
+type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export {};

package/dist/esm/utils/utils.js

@@ -55,10 +55,6 @@ export function humpToSegmented(str, separator = '-') {
         return index ? separator + $1.toLowerCase() : $1;
     });
 }
-/**
- * 将某个值统一转换成数组或undefined
- * @param value
- */
 export function toArray(value) {
     return isUnset(value)
         ? null
@@ -222,9 +218,9 @@ export function isChildOf(target, container) {
     return false;
 }
 /**
- * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * 从某个元素开始，一直向上查找
  * @param target
- * @param callback
+ * @param callback 返回true表示找到，会停止递归
  */
 export function findPredecessor(target, callback) {
     while (target) {
@@ -266,18 +262,17 @@ export function listenAllPredecessorsScroll(target, listener) {
 export function range(value, min = -Infinity, max = Infinity) {
     return Math.max(min, Math.min(max, value));
 }
-/**
- * 对象深度查找，也可赋值
- * @param obj
- * @param keyPath
- * @param setValue
- * @param separator
- */
-export function queryDeep(obj, keyPath, setValue, separator = '.') {
+export function queryDeep(obj, keyPath, a, b) {
+    const setValue = typeof b === 'function' ? b
+        : typeof a === 'function' ? a
+            : void 0;
+    const separator = typeof b === 'string' ? b
+        : typeof a === 'string' ? a
+            : '.';
     if (Array.isArray(keyPath)) {
         let result = obj;
         for (let i = 0, { length } = keyPath; i < length; i++) {
-            if (typeof result !== 'object' || !result) {
+            if (typeof result !== 'object' || result === null) {
                 result = void 0;
                 break;
             }
@@ -287,7 +282,10 @@ export function queryDeep(obj, keyPath, setValue, separator = '.') {
                     result[k] = setValue(result[k]);
                 }
                 else if (!(k in result)) {
-                    result[k] = typeof keyPath[i + 1] === 'number' ? [] : {};
+                    const nextKey = keyPath[i + 1];
+                    result[k] = (typeof nextKey === 'string' && isNaN(+nextKey)) || typeof nextKey === 'symbol'
+                        ? {}
+                        : [];
                 }
             }
             result = result[k];
@@ -315,3 +313,47 @@ export function filterProperties(obj, undefinedValue) {
     }
     return obj;
 }
+export function mergeComponentProps(...props) {
+    const { length } = props;
+    if (length <= 1) {
+        return props[0];
+    }
+    const fn = (target, source) => {
+        if (!source) {
+            return;
+        }
+        for (const p in source) {
+            if (p in target) {
+                switch (p) {
+                    case 'css':
+                        target.css = [...toArray(target.css), ...toArray(source.css)];
+                        continue;
+                    case 'ref':
+                        target.ref = cloneRef(target.ref, source.ref);
+                        continue;
+                    case 'className':
+                        target.className = clsx(target.className, source.className);
+                        continue;
+                    case 'style':
+                        target.style = { ...source.style, ...target.style };
+                        continue;
+                    default:
+                        const v = source[p];
+                        if (typeof v === 'function') {
+                            target[p] = (...args) => {
+                                target[p](...args);
+                                v(...args);
+                            };
+                            continue;
+                        }
+                }
+            }
+            target[p] = source[p];
+        }
+    };
+    const merged = { ...props[0] };
+    for (let i = 1; i < length; i++) {
+        fn(merged, props[i]);
+    }
+    return merged;
+}

package/extensions/reactiveForm.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/reactiveForm"), exports);

package/extensions/reactiveForm.d.ts

@@ -0,0 +1 @@
+export * from '../dist/esm/extensions/reactiveForm'

package/extensions/reactiveForm.js

@@ -0,0 +1 @@
+export * from '../dist/esm/extensions/reactiveForm'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -64,6 +64,7 @@
   "devDependencies": {
     "@ant-design/icons": "^6.0.0",
     "@canlooks/react-router": "^1.0.11",
+    "@canlooks/reactive": "^4.2.5",
     "@emotion/styled": "^11.14.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",

package/dist/cjs/components/curd/curdFilter.d.ts

@@ -1,16 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { FormProps, FormRef, FormValue } from '../form';
-import { CurdBaseProps } from './curd';
-import { ButtonProps } from '../button';
-import { RowType } from '../dataGrid';
-export interface CurdFilterProps<R extends RowType, F extends FormValue = FormValue> extends Omit<FormProps<F>, 'variant'>, Pick<CurdBaseProps<R, F>, 'columns'> {
-    /** 筛选项是否可收起与展开，若开启此功能，需保证每项的高度一致，否则可能出现样式问题 */
-    expandable?: boolean;
-    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，默认为false */
-    showButton?: boolean;
-    /** 是否显示已生效的筛选条件 */
-    renderConditions?(filterValue: F, formInstance: FormRef<F> | null): ReactNode;
-    buttonProps?: ButtonProps;
-    onFilter?(filterValue: F): void;
-}
-export declare const CurdFilter: <R extends RowType, F extends FormValue = FormValue>(props: CurdFilterProps<R, F>) => ReactElement;

package/dist/esm/components/curd/curdFilter.d.ts

@@ -1,16 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { FormProps, FormRef, FormValue } from '../form';
-import { CurdBaseProps } from './curd';
-import { ButtonProps } from '../button';
-import { RowType } from '../dataGrid';
-export interface CurdFilterProps<R extends RowType, F extends FormValue = FormValue> extends Omit<FormProps<F>, 'variant'>, Pick<CurdBaseProps<R, F>, 'columns'> {
-    /** 筛选项是否可收起与展开，若开启此功能，需保证每项的高度一致，否则可能出现样式问题 */
-    expandable?: boolean;
-    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，默认为false */
-    showButton?: boolean;
-    /** 是否显示已生效的筛选条件 */
-    renderConditions?(filterValue: F, formInstance: FormRef<F> | null): ReactNode;
-    buttonProps?: ButtonProps;
-    onFilter?(filterValue: F): void;
-}
-export declare const CurdFilter: <R extends RowType, F extends FormValue = FormValue>(props: CurdFilterProps<R, F>) => ReactElement;

package/documentation/bootstrap.mjs

@@ -1,8 +0,0 @@
-#!/usr/bin/env node
-import { preview } from 'vite';
-import inlineConfig from './vite.config.mjs';
-(async () => {
-    const server = await preview(inlineConfig);
-    server.printUrls();
-    server.bindCLIShortcuts({ print: true });
-})();

package/documentation/vite.config.mjs

@@ -1,18 +0,0 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export default {
-    root: __dirname,
-    envDir: path.join(__dirname, 'env'),
-    resolve: {
-        alias: {
-            '@': path.join(__dirname, '../src')
-        }
-    },
-    build: {
-        emptyOutDir: true
-    },
-    preview: {
-        open: true
-    }
-};