@lobehub/ui 1.90.0 → 1.91.0
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.
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DivProps } from "../types";
|
|
3
|
-
|
|
3
|
+
export interface SpotlightCardItemProps extends DivProps {
|
|
4
|
+
borderRadius: number;
|
|
5
|
+
size: number;
|
|
6
|
+
}
|
|
7
|
+
declare const SpotlightCardItem: import("react").NamedExoticComponent<SpotlightCardItemProps>;
|
|
4
8
|
export default SpotlightCardItem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "className"];
|
|
3
|
+
var _excluded = ["children", "className", "style", "borderRadius", "size"];
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
import { memo } from 'react';
|
|
@@ -10,12 +10,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
10
10
|
var SpotlightCardItem = /*#__PURE__*/memo(function (_ref) {
|
|
11
11
|
var children = _ref.children,
|
|
12
12
|
className = _ref.className,
|
|
13
|
+
style = _ref.style,
|
|
14
|
+
borderRadius = _ref.borderRadius,
|
|
15
|
+
size = _ref.size,
|
|
13
16
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
14
|
-
var _useStyles = useStyles(
|
|
17
|
+
var _useStyles = useStyles({
|
|
18
|
+
borderRadius: borderRadius,
|
|
19
|
+
size: size
|
|
20
|
+
}),
|
|
15
21
|
styles = _useStyles.styles,
|
|
16
22
|
cx = _useStyles.cx;
|
|
17
23
|
return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
|
|
18
|
-
className: cx(className, styles.itemContainer)
|
|
24
|
+
className: cx(className, styles.itemContainer),
|
|
25
|
+
style: _objectSpread({
|
|
26
|
+
borderRadius: borderRadius
|
|
27
|
+
}, style)
|
|
19
28
|
}, props), {}, {
|
|
20
29
|
children: /*#__PURE__*/_jsx(Flexbox, {
|
|
21
30
|
className: styles.content,
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { DivProps } from "../types";
|
|
3
3
|
export interface SpotlightCardProps<T = any> extends DivProps {
|
|
4
|
+
borderRadius?: number;
|
|
4
5
|
columns?: string;
|
|
5
6
|
gap?: number;
|
|
6
7
|
items: T[];
|
|
7
8
|
renderItem: (item: T) => ReactNode;
|
|
9
|
+
size?: number;
|
|
8
10
|
}
|
|
9
11
|
declare const SpotlightCard: import("react").NamedExoticComponent<SpotlightCardProps<any>>;
|
|
10
12
|
export default SpotlightCard;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["items", "renderItem", "className", "columns", "gap", "style"];
|
|
3
|
+
var _excluded = ["items", "renderItem", "className", "columns", "gap", "style", "size", "borderRadius"];
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
@@ -19,8 +19,15 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
|
|
|
19
19
|
_ref$gap = _ref.gap,
|
|
20
20
|
gap = _ref$gap === void 0 ? 12 : _ref$gap,
|
|
21
21
|
style = _ref.style,
|
|
22
|
+
_ref$size = _ref.size,
|
|
23
|
+
size = _ref$size === void 0 ? 800 : _ref$size,
|
|
24
|
+
_ref$borderRadius = _ref.borderRadius,
|
|
25
|
+
borderRadius = _ref$borderRadius === void 0 ? 12 : _ref$borderRadius,
|
|
22
26
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
var _useStyles = useStyles(
|
|
27
|
+
var _useStyles = useStyles({
|
|
28
|
+
borderRadius: borderRadius,
|
|
29
|
+
size: size
|
|
30
|
+
}),
|
|
24
31
|
styles = _useStyles.styles,
|
|
25
32
|
cx = _useStyles.cx;
|
|
26
33
|
var ref = useRef(null);
|
|
@@ -61,7 +68,9 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
|
|
|
61
68
|
children: items.map(function (item, index) {
|
|
62
69
|
var children = renderItem(item);
|
|
63
70
|
return /*#__PURE__*/_jsx(SpotlightCardItem, {
|
|
71
|
+
borderRadius: borderRadius,
|
|
64
72
|
className: CHILDREN_CLASSNAME,
|
|
73
|
+
size: size,
|
|
65
74
|
children: children
|
|
66
75
|
}, index);
|
|
67
76
|
})
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export declare const CHILDREN_CLASSNAME = "hover-card";
|
|
2
|
-
export declare const useStyles: (props?:
|
|
2
|
+
export declare const useStyles: (props?: {
|
|
3
|
+
borderRadius: number;
|
|
4
|
+
size: number;
|
|
5
|
+
} | undefined) => import("antd-style").ReturnStyles<{
|
|
3
6
|
container: import("antd-style").SerializedStyles;
|
|
4
7
|
content: import("antd-style").SerializedStyles;
|
|
5
8
|
grid: import("antd-style").SerializedStyles;
|
|
@@ -2,17 +2,18 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
|
|
|
2
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
4
|
import { rgba } from 'polished';
|
|
5
|
-
var BORDER_RADIUS = 12;
|
|
6
5
|
export var CHILDREN_CLASSNAME = 'hover-card';
|
|
7
|
-
export var useStyles = createStyles(function (_ref) {
|
|
6
|
+
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
8
7
|
var css = _ref.css,
|
|
9
8
|
responsive = _ref.responsive,
|
|
10
9
|
token = _ref.token,
|
|
11
10
|
isDarkMode = _ref.isDarkMode;
|
|
11
|
+
var size = _ref2.size,
|
|
12
|
+
borderRadius = _ref2.borderRadius;
|
|
12
13
|
return {
|
|
13
|
-
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
14
|
-
content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
15
|
-
grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
16
|
-
itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
14
|
+
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &:hover > .", "::after {\n opacity: 1;\n }\n "])), CHILDREN_CLASSNAME),
|
|
15
|
+
content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n z-index: 2;\n\n flex-grow: 1;\n\n height: 100%;\n margin: 1px;\n\n background: ", ";\n border-radius: ", "px;\n "])), token.colorBgContainer, borderRadius - 1),
|
|
16
|
+
grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: grid;\n\n ", " {\n display: flex;\n flex-direction: column;\n }\n "])), responsive.mobile),
|
|
17
|
+
itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n cursor: pointer;\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n\n width: 100%;\n\n background: ", ";\n border-radius: ", "px;\n\n &::before,\n &::after {\n content: '';\n\n position: absolute;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n\n opacity: 0;\n border-radius: inherit;\n\n transition: opacity 500ms;\n }\n\n &::before {\n pointer-events: none;\n user-select: none;\n z-index: 3;\n background: radial-gradient(\n ", "px circle at var(--mouse-x) var(--mouse-y),\n ", ",\n transparent 40%\n );\n }\n\n &::after {\n z-index: 1;\n background: radial-gradient(\n ", "px circle at var(--mouse-x) var(--mouse-y),\n ", ",\n transparent 40%\n );\n }\n\n :hover::before {\n opacity: 1;\n }\n "])), rgba(token.colorBorder, 0.5), borderRadius, size, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), size * 0.75, rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
|
|
17
18
|
};
|
|
18
19
|
});
|