@canlooks/can-ui 0.0.78 → 0.0.80

package/dist/esm/components/calendar/calendar.style.js

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

package/dist/esm/components/cascade/cascade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
-import { useControlled, useLoading, useKeyboard, joinNodes, clsx, toArray, mergeComponentProps } from '../../utils';
+import { useControlled, useLoading, useKeyboard, joinNodes, clsx, mergeComponentProps, isNoValue } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
 import { Popper } from '../popper';
@@ -56,7 +56,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setInnerOptions(await loadOptions(searchValue, parent));
     }, loading);
     useEffect(() => {
-        if (loadOptions && !searchable && !innerOpen.current && toArray(innerValue)?.length) {
+        if (loadOptions && !searchable && !innerOpen.current && !isNoValue(innerValue)) {
             // 第一次渲染就有value，需要请求数据
             innerLoadOptions(innerSearchValue.current);
         }

package/dist/esm/components/clickAway/clickAway.d.ts

@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
+    popover: "" | "auto" | "manual" | "hint";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

package/dist/esm/components/inputBase/inputBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useImperativeHandle, useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
-import { fixInputNumber, isUnset, mergeComponentProps, useControlled } from '../../utils';
+import { fixInputNumber, isNoValue, mergeComponentProps, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
@@ -54,13 +54,10 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
         }
     };
     const shouldRenderClearButton = () => {
-        if (!clearable || disabled || readOnly || isUnset(innerValue.current)) {
+        if (!clearable || disabled || readOnly) {
             return false;
         }
-        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
-            return !!innerValue.current.length;
-        }
-        return true;
+        return isNoValue(innerValue.current);
     };
     return (_jsxs("div", { ...mergeComponentProps(props, {
             ref: innerRef,

package/dist/esm/components/popper/popper.js

@@ -465,9 +465,10 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             const click = () => {
                 setOpenForce(false);
             };
-            anchorRef.current.addEventListener('click', click);
+            const anchorEl = anchorRef.current;
+            anchorEl.addEventListener('click', click);
             return () => {
-                anchorRef.current.removeEventListener('click', click);
+                anchorEl.removeEventListener('click', click);
             };
         }
     }, [clickToClose]);

package/dist/esm/components/select/select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
 import { InputBase } from '../inputBase';
-import { mergeComponentProps, toArray, useControlled } from '../../utils';
+import { isNoValue, mergeComponentProps, useControlled } from '../../utils';
 import { classes, style } from './select.style';
 import { Popper } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -112,7 +112,7 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
                 value: innerValue,
                 onClear,
                 onBlur
-            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [isNoValue(innerValue)
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder ?? '请选择' })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
                             ? _jsx(LoadingIndicator, {})

package/dist/esm/components/status/status.d.ts

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/dist/esm/components/treeSelect/treeSelect.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { Tree, TreeNode } from '../tree';
-import { useControlled, toArray, clsx, mergeComponentProps } from '../../utils';
+import { useControlled, toArray, clsx, mergeComponentProps, isNoValue } from '../../utils';
 import { InputBase } from '../inputBase';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
@@ -71,7 +71,7 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
+        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [isNoValue(innerValue)
                         ? _jsx("div", { className: classes.placeholder, children: placeholder })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
                             ? _jsx(LoadingIndicator, {})

package/dist/esm/extensions/reactiveForm/reactiveForm.d.ts

@@ -22,9 +22,9 @@
 import { FormProps, FormRef } from '../../components/form';
 import { ReactElement, Ref } from 'react';
 import { ReactiveFormItem } from './reactiveFormItem';
-export type ReactiveFormPropsRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
+export type ReactiveFormRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
 export interface ReactiveFormProps extends Omit<FormProps, 'ref' | 'initialValue' | 'onChange' | 'onFinish' | 'items'> {
-    ref?: Ref<ReactiveFormPropsRef>;
+    ref?: Ref<ReactiveFormRef>;
     onChange?(): void;
     onFinish?(): void;
 }

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

@@ -80,13 +80,18 @@ export declare function isPromise<T>(it: any): it is Promise<T>;
  * @param promise
  */
 export declare function getPromiseState(promise: Promise<any>): Promise<'pending' | 'fulfilled' | 'rejected'>;
+/**
+ * 判断表单控件是否为空值
+ * @param value
+ */
+export declare function isNoValue(value: any): boolean;
 /**
  * 将节点用某个分隔符拼接起来，通常用于渲染多选项
  * @param arr
  * @param callback
- * @param seperator
+ * @param separator
  */
-export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, separator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
 /**
  * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
  * @param value

package/dist/esm/utils/utils.js

@@ -191,16 +191,29 @@ export function getPromiseState(promise) {
         return res === s ? 'pending' : 'fulfilled';
     }).catch(() => 'rejected');
 }
+/**
+ * 判断表单控件是否为空值
+ * @param value
+ */
+export function isNoValue(value) {
+    if (isUnset(value)) {
+        return true;
+    }
+    if (Array.isArray(value) || typeof value === 'string') {
+        return !value.length;
+    }
+    return false;
+}
 /**
  * 将节点用某个分隔符拼接起来，通常用于渲染多选项
  * @param arr
  * @param callback
- * @param seperator
+ * @param separator
  */
-export function joinNodes(arr, callback, seperator = ' / ') {
+export function joinNodes(arr, callback, separator = ' / ') {
     return arr.flatMap((item, index) => {
         return index > 0
-            ? [seperator, callback(item, index)]
+            ? [separator, callback(item, index)]
             : callback(item, index);
     });
 }

package/extensions/curd.cjs

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

package/extensions/documentViewer.cjs

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

package/extensions/textFormatter.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",