@lobehub/ui 1.22.0 → 1.22.1
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.
- package/es/Avatar/index.js +3 -3
- package/es/Avatar/style.d.ts +1 -1
- package/es/ChatItem/style.js +2 -2
- package/es/Highlighter/index.d.ts +5 -0
- package/es/Highlighter/index.js +16 -6
- package/es/Highlighter/style.js +3 -3
- package/es/Markdown/CodeBlock.js +1 -0
- package/es/Spotlight/style.js +2 -2
- package/es/ThemeProvider/GlobalStyle.js +6 -3
- package/es/styles/algorithms/generateCustomStylish.js +1 -1
- package/package.json +1 -1
package/es/Avatar/index.js
CHANGED
|
@@ -17,10 +17,10 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
|
|
|
17
17
|
shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
|
|
18
18
|
background = _ref.background,
|
|
19
19
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
20
|
-
var isImage = avatar && ['/', 'http', 'data:'].some(function (i) {
|
|
20
|
+
var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (i) {
|
|
21
21
|
return avatar.startsWith(i);
|
|
22
|
-
});
|
|
23
|
-
var isEmoji = avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar);
|
|
22
|
+
}));
|
|
23
|
+
var isEmoji = Boolean(avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar));
|
|
24
24
|
var _useStyles = useStyles({
|
|
25
25
|
background: background,
|
|
26
26
|
size: size,
|
package/es/Avatar/style.d.ts
CHANGED
package/es/ChatItem/style.js
CHANGED
|
@@ -12,9 +12,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
12
12
|
primary = _ref2.primary,
|
|
13
13
|
avatarSize = _ref2.avatarSize,
|
|
14
14
|
showTitle = _ref2.showTitle;
|
|
15
|
-
var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 12px;\n background-color: ", ";\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n
|
|
15
|
+
var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 12px;\n background-color: ", ";\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
|
|
16
16
|
var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-top: ", ";\n "])), title ? 0 : '6px');
|
|
17
|
-
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n\n &:hover {\n background-color: ", ";\n }\n
|
|
17
|
+
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary);
|
|
18
18
|
var typeStylish = type === 'block' ? blockStylish : pureStylish;
|
|
19
19
|
return {
|
|
20
20
|
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n flex-direction: ", ";\n gap: 12px;\n align-items: flex-start;\n justify-content: revert;\n\n width: 100%;\n padding: 12px;\n\n .chat-item-time {\n display: none;\n }\n\n &:hover {\n .chat-item-time {\n display: inline-block;\n }\n }\n "])), placement === 'left' ? 'row' : 'row-reverse')),
|
|
@@ -21,6 +21,11 @@ export interface HighlighterProps extends DivProps {
|
|
|
21
21
|
* @default true
|
|
22
22
|
*/
|
|
23
23
|
showLanguage?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* @description Whether add spotlight background
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
spotlight?: boolean;
|
|
24
29
|
/**
|
|
25
30
|
* @description The theme of the code block
|
|
26
31
|
* @default 'light'
|
package/es/Highlighter/index.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["children", "language", "className", "style", "theme", "copyable", "showLanguage", "type", "spotlight"];
|
|
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
|
+
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; }
|
|
1
6
|
import { memo } from 'react';
|
|
2
|
-
import CopyButton from "
|
|
7
|
+
import { CopyButton, Spotlight } from "./..";
|
|
3
8
|
import SyntaxHighlighter from "./SyntaxHighlighter";
|
|
4
9
|
import { useStyles } from "./style";
|
|
5
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -16,16 +21,21 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
|
|
|
16
21
|
_ref$showLanguage = _ref.showLanguage,
|
|
17
22
|
showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
|
|
18
23
|
_ref$type = _ref.type,
|
|
19
|
-
type = _ref$type === void 0 ? 'block' : _ref$type
|
|
24
|
+
type = _ref$type === void 0 ? 'block' : _ref$type,
|
|
25
|
+
spotlight = _ref.spotlight,
|
|
26
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
20
27
|
var _useStyles = useStyles(type),
|
|
21
28
|
styles = _useStyles.styles,
|
|
22
29
|
cx = _useStyles.cx;
|
|
23
30
|
var container = cx(styles.container, className);
|
|
24
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
31
|
+
return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
|
|
25
32
|
className: container,
|
|
26
33
|
"data-code-type": "highlighter",
|
|
27
|
-
style: style
|
|
28
|
-
|
|
34
|
+
style: style
|
|
35
|
+
}, props), {}, {
|
|
36
|
+
children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {
|
|
37
|
+
size: 240
|
|
38
|
+
}), copyable && /*#__PURE__*/_jsx(CopyButton, {
|
|
29
39
|
className: styles.button,
|
|
30
40
|
content: children,
|
|
31
41
|
placement: "left"
|
|
@@ -37,6 +47,6 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
|
|
|
37
47
|
theme: theme,
|
|
38
48
|
children: children.trim()
|
|
39
49
|
})]
|
|
40
|
-
});
|
|
50
|
+
}));
|
|
41
51
|
});
|
|
42
52
|
export default Highlighter;
|
package/es/Highlighter/style.js
CHANGED
|
@@ -9,10 +9,10 @@ export var useStyles = createStyles(function (_ref, type) {
|
|
|
9
9
|
var prefix = "".concat(prefixCls, "-highlighter");
|
|
10
10
|
var buttonHoverCls = "".concat(prefix, "-hover-btn");
|
|
11
11
|
var langHoverCls = "".concat(prefix, "-hover-lang");
|
|
12
|
-
var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === '
|
|
12
|
+
var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
|
|
13
13
|
return {
|
|
14
|
-
container: cx(prefix, typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n overflow: auto;\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n\n &:hover {\n .", " {\n opacity: 1;\n }\n\n .", " {\n opacity: 1;\n }\n }\n\n .prism-code {\n background: none !important;\n }\n\n pre {\n margin: 0 !important;\n padding: ", " !important;\n background: none !important;\n }\n\n code {\n background: transparent !important;\n }\n "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
|
|
15
|
-
button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 51;\n top:
|
|
14
|
+
container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n overflow: auto;\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n\n &:hover {\n .", " {\n opacity: 1;\n }\n\n .", " {\n opacity: 1;\n }\n }\n\n .prism-code {\n background: none !important;\n }\n\n pre {\n margin: 0 !important;\n padding: ", " !important;\n background: none !important;\n }\n\n code {\n background: transparent !important;\n }\n "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
|
|
15
|
+
button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 51;\n top: ", ";\n right: ", ";\n\n opacity: 0;\n "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
|
|
16
16
|
lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 50;\n right: 8px;\n bottom: 8px;\n\n color: ", ";\n\n opacity: 0;\n\n transition: opacity 0.1s;\n "])), token.colorTextPlaceholder))
|
|
17
17
|
};
|
|
18
18
|
});
|
package/es/Markdown/CodeBlock.js
CHANGED
|
@@ -20,6 +20,7 @@ var Code = /*#__PURE__*/memo(function (props) {
|
|
|
20
20
|
return /*#__PURE__*/_jsx(Highlighter, {
|
|
21
21
|
className: styles,
|
|
22
22
|
language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
|
|
23
|
+
spotlight: true,
|
|
23
24
|
theme: theme.appearance,
|
|
24
25
|
type: "block",
|
|
25
26
|
children: children instanceof Array ? children[0] : children
|
package/es/Spotlight/style.js
CHANGED
|
@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
11
11
|
size = _ref2.size;
|
|
12
12
|
var spotlightX = ((_offset$x = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _offset$x !== void 0 ? _offset$x : 0) + 'px';
|
|
13
13
|
var spotlightY = ((_offset$y = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _offset$y !== void 0 ? _offset$y : 0) + 'px';
|
|
14
|
-
var spotlightOpacity = outside ? '0' :
|
|
14
|
+
var spotlightOpacity = outside ? '0' : '.1';
|
|
15
15
|
var spotlightSize = size + 'px';
|
|
16
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 1;\n inset: 0;\n\n opacity: ", ";\n background: radial-gradient(\n ", " circle at ", " ", ",\n ", ",\n
|
|
16
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 1;\n inset: 0;\n\n opacity: ", ";\n background: radial-gradient(\n ", " circle at ", " ", ",\n ", ",\n ", "\n );\n border-radius: inherit;\n\n transition: all 0.2s;\n "])), spotlightOpacity, spotlightSize, spotlightX, spotlightY, isDarkMode ? token.colorText : '#fff', !isDarkMode ? token.colorTextQuaternary : 'transparent');
|
|
17
17
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
var _templateObject;
|
|
3
3
|
import { createGlobalStyle } from 'antd-style';
|
|
4
|
-
var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n html,body {\n --font-settings: \"cv01\", \"tnum\", \"kern\";\n --font-variations: \"opsz\" auto, tabular-nums;\n\n overflow-x: hidden;\n\n margin: 0;\n padding: 0;\n\n font-family: ", ";\n font-size: ", "px;\n font-feature-settings: var(--font-settings);\n font-variation-settings: var(--font-variations);\n line-height: 1;\n color: ", ";\n text-size-adjust: none;\n text-rendering: optimizelegibility;\n vertical-align: baseline;\n\n color-scheme: dark;\n background-color: ", ";\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-tap-highlight-color: transparent;\n }\n
|
|
4
|
+
var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n html,body {\n --font-settings: \"cv01\", \"tnum\", \"kern\";\n --font-variations: \"opsz\" auto, tabular-nums;\n\n overflow-x: hidden;\n\n margin: 0;\n padding: 0;\n\n font-family: ", ";\n font-size: ", "px;\n font-feature-settings: var(--font-settings);\n font-variation-settings: var(--font-variations);\n line-height: 1;\n color: ", ";\n text-size-adjust: none;\n text-rendering: optimizelegibility;\n vertical-align: baseline;\n\n color-scheme: dark;\n background-color: ", ";\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-tap-highlight-color: transparent;\n }\n\n\n * {\n\t box-sizing: border-box;\n\t vertical-align: baseline;\n }\n\n ::selection {\n color: #000;\n background: ", ";\n }\n\n ::-webkit-scrollbar {\n\t width: 0;\n\t height: 4px;\n\t background-color: transparent;\n\n\t &-thumb {\n\t\t background-color: transparent;\n\t\t border-radius: 4px;\n\t\t transition: background-color 500ms ", ";\n\t }\n\n\t &-corner {\n\t\t display: none;\n\t }\n }\n\n #root {\n\t min-height: 100vh;\n }\n\n p {\n text-align: justify;\n word-wrap: break-word;\n }\n\n code {\n\t font-family: ", " !important;\n\n\t * {\n\t\t font-family: inherit !important;\n\t }\n }\n\n *:hover, *:focus {\n\t ::-webkit-scrollbar {\n\t\t &-thumb {\n\t\t\t background-color: ", ";\n\t\t }\n\t }\n }\n"])), function (_ref) {
|
|
5
5
|
var theme = _ref.theme;
|
|
6
6
|
return theme.fontFamily;
|
|
7
7
|
}, function (_ref2) {
|
|
@@ -15,12 +15,15 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
|
|
|
15
15
|
return theme.colorBgLayout;
|
|
16
16
|
}, function (_ref5) {
|
|
17
17
|
var theme = _ref5.theme;
|
|
18
|
-
return theme.
|
|
18
|
+
return theme.yellow9;
|
|
19
19
|
}, function (_ref6) {
|
|
20
20
|
var theme = _ref6.theme;
|
|
21
|
-
return theme.
|
|
21
|
+
return theme.motionEaseOut;
|
|
22
22
|
}, function (_ref7) {
|
|
23
23
|
var theme = _ref7.theme;
|
|
24
|
+
return theme.fontFamilyCode;
|
|
25
|
+
}, function (_ref8) {
|
|
26
|
+
var theme = _ref8.theme;
|
|
24
27
|
return theme.colorFill;
|
|
25
28
|
});
|
|
26
29
|
export default GlobalStyle;
|
|
@@ -6,6 +6,6 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
|
|
|
6
6
|
isDarkMode = _ref.isDarkMode;
|
|
7
7
|
return {
|
|
8
8
|
blur: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n backdrop-filter: saturate(180%) blur(10px);\n "]))),
|
|
9
|
-
markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 600;\n }\n\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n text-align: justify;\n word-wrap: break-word;\n\n + * {\n margin-block-end: 0.5em;\n }\n }\n\n blockquote {\n margin: 16px 0;\n padding: 0 12px;\n\n p {\n font-style: italic;\n color: ", ";\n }\n }\n\n p:not(:last-child) {\n margin-bottom: 1em;\n }\n\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n }\n\n img {\n max-width: 100%;\n }\n\n pre {\n border-radius: ", "px;\n }\n\n > :not([data-code-type='highlighter']) code {\n padding: 2px 6px;\n\n font-size: ", "px;\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n table {\n border-spacing: 0;\n\n width: 100%;\n margin-block-start: 1em;\n margin-block-end: 1em;\n margin-inline-start: 0;\n margin-inline-end: 0;\n padding: 8px;\n\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n th,\n td {\n padding-block-start: 10px;\n padding-block-end: 10px;\n padding-inline-start: 16px;\n padding-inline-end: 16px;\n }\n\n thead {\n tr {\n th {\n background: ", ";\n\n &:first-child {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n\n &:last-child {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n }\n\n ul li {\n line-height: 1.8;\n }\n "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
|
|
9
|
+
markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 600;\n }\n\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n text-align: justify;\n word-wrap: break-word;\n\n + * {\n margin-block-end: 0.5em;\n }\n }\n\n blockquote {\n margin: 16px 0;\n padding: 0 12px;\n\n p {\n font-style: italic;\n color: ", ";\n }\n }\n\n p:not(:last-child) {\n margin-bottom: 1em;\n }\n\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n }\n\n img {\n max-width: 100%;\n }\n\n pre {\n border: none;\n border-radius: ", "px;\n }\n\n > :not([data-code-type='highlighter']) code {\n padding: 2px 6px;\n\n font-size: ", "px;\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n table {\n border-spacing: 0;\n\n width: 100%;\n margin-block-start: 1em;\n margin-block-end: 1em;\n margin-inline-start: 0;\n margin-inline-end: 0;\n padding: 8px;\n\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n th,\n td {\n padding-block-start: 10px;\n padding-block-end: 10px;\n padding-inline-start: 16px;\n padding-inline-end: 16px;\n }\n\n thead {\n tr {\n th {\n background: ", ";\n\n &:first-child {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n\n &:last-child {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n }\n\n ul li {\n line-height: 1.8;\n }\n "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
|
|
10
10
|
};
|
|
11
11
|
};
|