@canlooks/can-ui 0.0.62 → 0.0.64

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
+const loading_style_1 = require("../loading/loading.style");
 exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
     'container',
     'title',
@@ -20,6 +21,11 @@ exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, easing }) => (0, react_1.css) `
     max-height: 100%;
     min-height: 0;
+    
+    .${loading_style_1.classes.container} {
+        display: flex;
+        flex-direction: column;
+    }
 
     .${exports.classes.container} {
         flex: 1;

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -17,7 +17,6 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
         variant, size, color, disabled, readOnly
     };
     const showTimer = /[Hms]/.test(format);
-    console.log(innerValue.current?.[1].date());
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.clsx)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'start' : 'closed');

package/dist/cjs/components/popper/popper.js

@@ -38,6 +38,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const unmounted = (0, utils_1.useUnmounted)();
     const openHolding = (0, react_1.useRef)(0);
     const hold = (open) => {
+        console.log('hold', open);
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
                 : openHolding.current;

package/dist/cjs/components/upload/dropArea.js

@@ -7,7 +7,8 @@ const dropArea_style_1 = require("./dropArea.style");
 const utils_1 = require("../../utils");
 const __1 = require("../..");
 const faInbox_1 = require("@fortawesome/free-solid-svg-icons/faInbox");
-exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
+const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
+exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         const fn = (e) => e.preventDefault();
@@ -33,5 +34,5 @@ exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里'
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
-        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
+        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon, "data-hover": "false" }), (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus, className: dropArea_style_1.classes.icon, "data-hover": "true" }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
 });

package/dist/cjs/components/upload/dropArea.style.js

@@ -18,13 +18,30 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
     background-color: ${gray(.1)};
     border-radius: ${borderRadius}px;
     color: ${text.disabled};
-
+    cursor: pointer;
+    
     .${exports.classes.icon}, .${exports.classes.description} {
         pointer-events: none;
     }
 
     .${exports.classes.icon} {
         font-size: ${30 / 14}em;
+        
+        &[data-hover="true"] {
+            display: none;
+        }
+    }
+
+    &:hover {
+        .${exports.classes.icon} {
+            &[data-hover="false"] {
+                display: none;
+            }
+
+            &[data-hover="true"] {
+                display: block;
+            }
+        }
     }
 
     &[data-over=true] {

package/dist/cjs/components/upload/upload.js

@@ -96,8 +96,10 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         newValue && setInnerValue(newValue);
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
-                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showButton &&
-                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
+                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
+                                    ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                    : showButton &&
+                                        (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
                                                 r
                                                     ? itemRefs.current.set(file.id, r)
                                                     : itemRefs.current.delete(file.id);

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
+import { classes as loadingClasses } from '../loading/loading.style';
 export const classes = defineInnerClasses('data-grid', [
     'container',
     'title',
@@ -17,6 +18,11 @@ export const classes = defineInnerClasses('data-grid', [
 export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) => css `
     max-height: 100%;
     min-height: 0;
+    
+    .${loadingClasses.container} {
+        display: flex;
+        flex-direction: column;
+    }
 
     .${classes.container} {
         flex: 1;

package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -14,7 +14,6 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
         variant, size, color, disabled, readOnly
     };
     const showTimer = /[Hms]/.test(format);
-    console.log(innerValue.current?.[1].date());
     return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'start' : 'closed');

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

@@ -35,6 +35,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const unmounted = useUnmounted();
     const openHolding = useRef(0);
     const hold = (open) => {
+        console.log('hold', open);
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
                 : openHolding.current;

package/dist/esm/components/upload/dropArea.js

@@ -4,7 +4,8 @@ import { classes, style } from './dropArea.style';
 import { clsx } from '../../utils';
 import { Icon } from '../..';
 import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
-export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+export const DropArea = memo(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = useState(false);
     useEffect(() => {
         const fn = (e) => e.preventDefault();
@@ -30,5 +31,5 @@ export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
-        }, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
+        }, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon, "data-hover": "false" }), _jsx(Icon, { icon: faPlus, className: classes.icon, "data-hover": "true" }), _jsx("div", { className: classes.description, children: description })] }));
 });

package/dist/esm/components/upload/dropArea.style.js

@@ -15,13 +15,30 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
     background-color: ${gray(.1)};
     border-radius: ${borderRadius}px;
     color: ${text.disabled};
-
+    cursor: pointer;
+    
     .${classes.icon}, .${classes.description} {
         pointer-events: none;
     }
 
     .${classes.icon} {
         font-size: ${30 / 14}em;
+        
+        &[data-hover="true"] {
+            display: none;
+        }
+    }
+
+    &:hover {
+        .${classes.icon} {
+            &[data-hover="false"] {
+                display: none;
+            }
+
+            &[data-hover="true"] {
+                display: block;
+            }
+        }
     }
 
     &[data-over=true] {

package/dist/esm/components/upload/upload.js

@@ -93,8 +93,10 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
         newValue && setInnerValue(newValue);
     };
     return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
-                        ? _jsxs(_Fragment, { children: [showButton &&
-                                    _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => {
+                        ? _jsxs(_Fragment, { children: [droppable
+                                    ? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                    : showButton &&
+                                        _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => {
                                                 r
                                                     ? itemRefs.current.set(file.id, r)
                                                     : itemRefs.current.delete(file.id);

package/package.json

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