@canlooks/can-ui 0.0.198 → 0.0.200

package/dist/cjs/components/cascade/cascade.js

@@ -32,6 +32,36 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     (0, react_1.useEffect)(() => {
         loadOptions && searchable && deferredSearchValue && innerLoadOptions();
     }, [deferredSearchValue]);
+    /**
+     * --------------------------------------------------------------------
+     * 控制选中状态
+     */
+    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
+    // 路径转单一键
+    const toStandardValue = (path) => {
+        if (!path) {
+            return;
+        }
+        if (multiple) {
+            return path.map(path => path[path.length - 1]);
+        }
+        return path[path.length - 1];
+    };
+    // 单一键转路径
+    const toPathifiedValue = (value) => {
+        if (!value) {
+            return;
+        }
+        const findParent = (v, path = []) => {
+            const node = optionsMap.get(v);
+            if (node) {
+                path.unshift(v);
+                node._parentId && findParent(node._parentId, path);
+            }
+            return path;
+        };
+        return multiple ? value.map(v => findParent(v)) : findParent(value);
+    };
     /**
      * --------------------------------------------------------------------
      * 打开的弹框与面板
@@ -41,7 +71,14 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
-    const [openedPanels, setOpenedPanels] = (0, react_1.useState)([]);
+    const [openedPanels, setOpenedPanels] = (0, react_1.useState)(() => {
+        const value = multiple ? pathifiedValue.current?.[0] : pathifiedValue.current;
+        if ((0, utils_1.isNoValue)(value)) {
+            return [];
+        }
+        console.log(142, value.slice(0, -1));
+        return value.slice(0, -1);
+    });
     const toggleOpenedPanels = (value, index) => {
         setOpenedPanels(o => {
             const newOpened = o.slice(0, index);
@@ -69,55 +106,17 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 打开下拉框时请求数据
         loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
     }, [innerOpen.current]);
-    const actualOptions = innerOptions || options;
-    /**
-     * --------------------------------------------------------------------
-     * 控制选中状态
-     */
-    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
-    // 路径转单一键
-    const toStandardValue = (path) => {
-        if (!path) {
-            return;
-        }
-        if (multiple) {
-            return path.map(path => path[path.length - 1]);
-        }
-        return path[path.length - 1];
-    };
-    // 单一键转路径
-    const toPathifiedValue = (value) => {
-        if (!value) {
-            return;
-        }
-        const findParent = (v, path = []) => {
-            const node = optionsMap.get(v);
-            if (node) {
-                path.unshift(v);
-                node._parentId && findParent(node._parentId, path);
-            }
-            return path;
-        };
-        return multiple ? value.map(v => findParent(v)) : findParent(value);
-    };
-    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
-        options: actualOptions,
-        multiple,
-        value: toStandardValue(pathifiedValue.current),
-        onChange(value) {
-            setPathifiedValue(toPathifiedValue(value));
-        },
-        primaryKey,
-        childrenKey,
-        clearable,
-        integration
-    });
     const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
     const onOptionClick = async (option, index) => {
         const optVal = option[primaryKey];
+        if (!option.children?.length) {
+            toggleSelected(option[primaryKey]);
+            !multiple && setInnerOpen(false);
+            return;
+        }
         const opened = openedPanels[index] === optVal;
         if (!opened) {
             loadOptions && await innerLoadOptions(innerSearchValue.current, option);
@@ -131,6 +130,19 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         toggleSelected(option[primaryKey]);
         onOptionClick(option, index);
     };
+    const actualOptions = innerOptions || options;
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
+        options: actualOptions,
+        multiple,
+        value: toStandardValue(pathifiedValue.current),
+        onChange(value) {
+            setPathifiedValue(toPathifiedValue(value));
+        },
+        primaryKey,
+        childrenKey,
+        clearable,
+        integration
+    });
     /**
      * --------------------------------------------------------------------
      * 键盘控制
@@ -156,13 +168,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setOpen: setInnerOpen,
         onEnter(info) {
             keyboardPressHandler(info);
-        },
-        onKeyDown(info, e) {
-            if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
-                // 在最后一个面板按右箭头，相当于按回车
-                e.preventDefault();
-                keyboardPressHandler(info);
-            }
         }
     });
     const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
@@ -185,9 +190,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         if (multiple) {
             return pathifiedValue.current?.map(path => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: (0, utils_1.joinNodes)(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
         }
-        else {
-            return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
-        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
     };
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
             css: cascade_style_1.cascadePopperStyle,

package/dist/cjs/components/cascade/cascade.style.js

@@ -61,7 +61,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-                direction: rtl;
             }
         }
     }

package/dist/cjs/components/cascade/cascadePanel.js

@@ -35,7 +35,7 @@ function CascadePanel({ options, index = 0 }) {
             if (!option || typeof option !== 'object') {
                 return option;
             }
-            const { _parentId, ...opt } = option;
+            const { _parentId, _isLast, ...opt } = option;
             const optVal = opt[primaryKey];
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;

package/dist/cjs/components/curd/curd.js

@@ -24,7 +24,7 @@ const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSqua
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
 exports.Curd = (0, react_1.memo)((props) => {
-    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, defaultSize = 'medium', onSizeChange, columnConfigurable = true, resizeBubbleProps, columnConfigBubbleProps, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, defaultSize = 'medium', onSizeChange, columnConfigurable = true, resizeBubbleProps, columnConfigBubbleProps, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref

package/dist/cjs/utils/hooks.js

@@ -187,8 +187,7 @@ function useStrictEffect(effect, deps) {
     const prevDeps = (0, react_1.useRef)(deps);
     const prevCleanup = (0, react_1.useRef)(void 0);
     (0, react_1.useEffect)(() => {
-        const isDepsChanged = !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps);
-        if (!hasRun.current || isDepsChanged) {
+        if (!hasRun.current || !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps)) {
             prevCleanup.current?.();
             prevCleanup.current = effect();
             hasRun.current = true;

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

@@ -28,6 +28,36 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     useEffect(() => {
         loadOptions && searchable && deferredSearchValue && innerLoadOptions();
     }, [deferredSearchValue]);
+    /**
+     * --------------------------------------------------------------------
+     * 控制选中状态
+     */
+    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
+    // 路径转单一键
+    const toStandardValue = (path) => {
+        if (!path) {
+            return;
+        }
+        if (multiple) {
+            return path.map(path => path[path.length - 1]);
+        }
+        return path[path.length - 1];
+    };
+    // 单一键转路径
+    const toPathifiedValue = (value) => {
+        if (!value) {
+            return;
+        }
+        const findParent = (v, path = []) => {
+            const node = optionsMap.get(v);
+            if (node) {
+                path.unshift(v);
+                node._parentId && findParent(node._parentId, path);
+            }
+            return path;
+        };
+        return multiple ? value.map(v => findParent(v)) : findParent(value);
+    };
     /**
      * --------------------------------------------------------------------
      * 打开的弹框与面板
@@ -37,7 +67,14 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
-    const [openedPanels, setOpenedPanels] = useState([]);
+    const [openedPanels, setOpenedPanels] = useState(() => {
+        const value = multiple ? pathifiedValue.current?.[0] : pathifiedValue.current;
+        if (isNoValue(value)) {
+            return [];
+        }
+        console.log(142, value.slice(0, -1));
+        return value.slice(0, -1);
+    });
     const toggleOpenedPanels = (value, index) => {
         setOpenedPanels(o => {
             const newOpened = o.slice(0, index);
@@ -65,55 +102,17 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 打开下拉框时请求数据
         loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
     }, [innerOpen.current]);
-    const actualOptions = innerOptions || options;
-    /**
-     * --------------------------------------------------------------------
-     * 控制选中状态
-     */
-    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
-    // 路径转单一键
-    const toStandardValue = (path) => {
-        if (!path) {
-            return;
-        }
-        if (multiple) {
-            return path.map(path => path[path.length - 1]);
-        }
-        return path[path.length - 1];
-    };
-    // 单一键转路径
-    const toPathifiedValue = (value) => {
-        if (!value) {
-            return;
-        }
-        const findParent = (v, path = []) => {
-            const node = optionsMap.get(v);
-            if (node) {
-                path.unshift(v);
-                node._parentId && findParent(node._parentId, path);
-            }
-            return path;
-        };
-        return multiple ? value.map(v => findParent(v)) : findParent(value);
-    };
-    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
-        options: actualOptions,
-        multiple,
-        value: toStandardValue(pathifiedValue.current),
-        onChange(value) {
-            setPathifiedValue(toPathifiedValue(value));
-        },
-        primaryKey,
-        childrenKey,
-        clearable,
-        integration
-    });
     const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
     const onOptionClick = async (option, index) => {
         const optVal = option[primaryKey];
+        if (!option.children?.length) {
+            toggleSelected(option[primaryKey]);
+            !multiple && setInnerOpen(false);
+            return;
+        }
         const opened = openedPanels[index] === optVal;
         if (!opened) {
             loadOptions && await innerLoadOptions(innerSearchValue.current, option);
@@ -127,6 +126,19 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         toggleSelected(option[primaryKey]);
         onOptionClick(option, index);
     };
+    const actualOptions = innerOptions || options;
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
+        options: actualOptions,
+        multiple,
+        value: toStandardValue(pathifiedValue.current),
+        onChange(value) {
+            setPathifiedValue(toPathifiedValue(value));
+        },
+        primaryKey,
+        childrenKey,
+        clearable,
+        integration
+    });
     /**
      * --------------------------------------------------------------------
      * 键盘控制
@@ -152,13 +164,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setOpen: setInnerOpen,
         onEnter(info) {
             keyboardPressHandler(info);
-        },
-        onKeyDown(info, e) {
-            if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
-                // 在最后一个面板按右箭头，相当于按回车
-                e.preventDefault();
-                keyboardPressHandler(info);
-            }
         }
     });
     const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
@@ -181,9 +186,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         if (multiple) {
             return pathifiedValue.current?.map(path => _jsx(Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: joinNodes(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
         }
-        else {
-            return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
-        }
+        return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
     };
     return (_jsx(Popper, { ...mergeComponentProps({
             css: cascadePopperStyle,

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

@@ -58,7 +58,6 @@ export const style = defineCss(({ spacing, text, easing }) => css `
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-                direction: rtl;
             }
         }
     }

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

@@ -32,7 +32,7 @@ export function CascadePanel({ options, index = 0 }) {
             if (!option || typeof option !== 'object') {
                 return option;
             }
-            const { _parentId, ...opt } = option;
+            const { _parentId, _isLast, ...opt } = option;
             const optVal = opt[primaryKey];
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;

package/dist/esm/components/curd/curd.js

@@ -21,7 +21,7 @@ import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 export const Curd = memo((props) => {
-    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, defaultSize = 'medium', onSizeChange, columnConfigurable = true, resizeBubbleProps, columnConfigBubbleProps, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, defaultSize = 'medium', onSizeChange, columnConfigurable = true, resizeBubbleProps, columnConfigBubbleProps, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref

package/dist/esm/utils/hooks.js

@@ -172,8 +172,7 @@ export function useStrictEffect(effect, deps) {
     const prevDeps = useRef(deps);
     const prevCleanup = useRef(void 0);
     useEffect(() => {
-        const isDepsChanged = !arrayShallowEqual(prevDeps.current, deps);
-        if (!hasRun.current || isDepsChanged) {
+        if (!hasRun.current || !arrayShallowEqual(prevDeps.current, deps)) {
             prevCleanup.current?.();
             prevCleanup.current = effect();
             hasRun.current = true;

package/package.json

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