@canlooks/can-ui 0.0.64 → 0.0.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/upload/dropArea.js +1 -2
  2. package/dist/cjs/components/upload/dropArea.style.js +12 -18
  3. package/dist/esm/components/upload/dropArea.js +1 -2
  4. package/dist/esm/components/upload/dropArea.style.js +12 -18
  5. package/package.json +1 -1
package/dist/cjs/components/upload/dropArea.js CHANGED
@@ -7,7 +7,6 @@ const dropArea_style_1 = require("./dropArea.style");
7
7
  const utils_1 = require("../../utils");
8
8
  const __1 = require("../..");
9
9
  const faInbox_1 = require("@fortawesome/free-solid-svg-icons/faInbox");
10
- const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
11
10
  exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
12
11
  const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
13
12
  (0, react_1.useEffect)(() => {
@@ -34,5 +33,5 @@ exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或
34
33
  }, onDragLeave: e => {
35
34
  props.onDragLeave?.(e);
36
35
  setDraggingOver(false);
37
- }, 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 })] }));
36
+ }, 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 })] }));
38
37
  });
package/dist/cjs/components/upload/dropArea.style.js CHANGED
@@ -7,7 +7,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload-drop-area', [
7
7
  'icon',
8
8
  'description'
9
9
  ]);
10
- exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors }) => (0, react_1.css) `
10
+ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors, easing }) => (0, react_1.css) `
11
11
  height: 100px;
12
12
  display: flex;
13
13
  gap: ${spacing[1]}px;
@@ -15,10 +15,20 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
15
15
  align-items: center;
16
16
  justify-content: center;
17
17
  border: 1px dashed ${divider};
18
- background-color: ${gray(.1)};
19
18
  border-radius: ${borderRadius}px;
20
19
  color: ${text.disabled};
21
20
  cursor: pointer;
21
+ background-color: ${gray(.1)};
22
+ transition: background-color .25s ${easing.easeOut};
23
+
24
+ &:hover {
25
+ background-color: ${gray(.15)};
26
+ }
27
+
28
+ &:active {
29
+ background-color: ${gray(.08)};
30
+ transition: background-color 0s;
31
+ }
22
32
 
23
33
  .${exports.classes.icon}, .${exports.classes.description} {
24
34
  pointer-events: none;
@@ -26,22 +36,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
26
36
 
27
37
  .${exports.classes.icon} {
28
38
  font-size: ${30 / 14}em;
29
-
30
- &[data-hover="true"] {
31
- display: none;
32
- }
33
- }
34
-
35
- &:hover {
36
- .${exports.classes.icon} {
37
- &[data-hover="false"] {
38
- display: none;
39
- }
40
-
41
- &[data-hover="true"] {
42
- display: block;
43
- }
44
- }
45
39
  }
46
40
 
47
41
  &[data-over=true] {
package/dist/esm/components/upload/dropArea.js CHANGED
@@ -4,7 +4,6 @@ import { classes, style } from './dropArea.style';
4
4
  import { clsx } from '../../utils';
5
5
  import { Icon } from '../..';
6
6
  import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
7
- import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
8
7
  export const DropArea = memo(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
9
8
  const [draggingOver, setDraggingOver] = useState(false);
10
9
  useEffect(() => {
@@ -31,5 +30,5 @@ export const DropArea = memo(({ description = '点击选择文件，或将文件
31
30
  }, onDragLeave: e => {
32
31
  props.onDragLeave?.(e);
33
32
  setDraggingOver(false);
34
- }, 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 })] }));
33
+ }, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
35
34
  });
package/dist/esm/components/upload/dropArea.style.js CHANGED
@@ -4,7 +4,7 @@ export const classes = defineInnerClasses('upload-drop-area', [
4
4
  'icon',
5
5
  'description'
6
6
  ]);
7
- export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors }) => css `
7
+ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors, easing }) => css `
8
8
  height: 100px;
9
9
  display: flex;
10
10
  gap: ${spacing[1]}px;
@@ -12,10 +12,20 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  border: 1px dashed ${divider};
15
- background-color: ${gray(.1)};
16
15
  border-radius: ${borderRadius}px;
17
16
  color: ${text.disabled};
18
17
  cursor: pointer;
18
+ background-color: ${gray(.1)};
19
+ transition: background-color .25s ${easing.easeOut};
20
+
21
+ &:hover {
22
+ background-color: ${gray(.15)};
23
+ }
24
+
25
+ &:active {
26
+ background-color: ${gray(.08)};
27
+ transition: background-color 0s;
28
+ }
19
29
 
20
30
  .${classes.icon}, .${classes.description} {
21
31
  pointer-events: none;
@@ -23,22 +33,6 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
23
33
 
24
34
  .${classes.icon} {
25
35
  font-size: ${30 / 14}em;
26
-
27
- &[data-hover="true"] {
28
- display: none;
29
- }
30
- }
31
-
32
- &:hover {
33
- .${classes.icon} {
34
- &[data-hover="false"] {
35
- display: none;
36
- }
37
-
38
- &[data-hover="true"] {
39
- display: block;
40
- }
41
- }
42
36
  }
43
37
 
44
38
  &[data-over=true] {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.64",
3
+ "version": "0.0.65",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",