@lobehub/ui 1.43.0 → 1.44.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.
- package/es/ChatHeader/style.d.ts +1 -1
- package/es/ChatHeader/style.js +5 -2
- package/es/ChatItem/style.js +4 -2
- package/es/DraggablePanel/index.d.ts +1 -0
- package/es/DraggablePanel/index.js +4 -2
- package/es/DraggablePanel/style.d.ts +1 -1
- package/es/DraggablePanel/style.js +5 -5
- package/es/styles/algorithms/generateCustomStylish.js +7 -6
- package/es/types/customStylish.d.ts +1 -0
- package/package.json +1 -1
package/es/ChatHeader/style.d.ts
CHANGED
package/es/ChatHeader/style.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
var _templateObject;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
|
+
import { rgba } from 'polished';
|
|
4
5
|
export var useStyles = createStyles(function (_ref) {
|
|
5
6
|
var css = _ref.css,
|
|
6
|
-
token = _ref.token
|
|
7
|
+
token = _ref.token,
|
|
8
|
+
stylish = _ref.stylish,
|
|
9
|
+
cx = _ref.cx;
|
|
7
10
|
return {
|
|
8
|
-
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
11
|
+
container: cx(stylish.blurStrong, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 10;\n\n grid-area: header;\n align-self: stretch;\n\n width: 100%;\n height: 64px;\n\n background: linear-gradient(\n to bottom,\n ", ",\n ", "\n );\n border-bottom: 1px solid ", ";\n "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorSplit))
|
|
9
12
|
};
|
|
10
13
|
});
|
package/es/ChatItem/style.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
|
+
import { rgba } from 'polished';
|
|
4
5
|
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
5
6
|
var cx = _ref.cx,
|
|
6
7
|
css = _ref.css,
|
|
7
|
-
token = _ref.token
|
|
8
|
+
token = _ref.token,
|
|
9
|
+
isDarkMode = _ref.isDarkMode;
|
|
8
10
|
var placement = _ref2.placement,
|
|
9
11
|
type = _ref2.type,
|
|
10
12
|
title = _ref2.title,
|
|
11
13
|
primary = _ref2.primary,
|
|
12
14
|
avatarSize = _ref2.avatarSize,
|
|
13
15
|
showTitle = _ref2.showTitle;
|
|
14
|
-
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
|
+
var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 12px;\n background-color: ", ";\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n "])), primary ? isDarkMode ? token.colorFillSecondary : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillTertiary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
|
|
15
17
|
var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-top: ", ";\n "])), title ? 0 : '6px');
|
|
16
18
|
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n transition: background-color 100ms ", ";\n "])), token.motionEaseOut);
|
|
17
19
|
var typeStylish = type === 'block' ? blockStylish : pureStylish;
|
|
@@ -15,7 +15,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
15
15
|
var DEFAULT_HEIGHT = 180;
|
|
16
16
|
var DEFAULT_WIDTH = 280;
|
|
17
17
|
var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
|
|
18
|
-
var
|
|
18
|
+
var _ref$headerHeight = _ref.headerHeight,
|
|
19
|
+
headerHeight = _ref$headerHeight === void 0 ? 0 : _ref$headerHeight,
|
|
20
|
+
fullscreen = _ref.fullscreen,
|
|
19
21
|
maxHeight = _ref.maxHeight,
|
|
20
22
|
_ref$pin = _ref.pin,
|
|
21
23
|
pin = _ref$pin === void 0 ? 'true' : _ref$pin,
|
|
@@ -48,7 +50,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
|
|
|
48
50
|
var reference = useRef();
|
|
49
51
|
var isHovering = useHover(reference);
|
|
50
52
|
var isVertical = placement === 'top' || placement === 'bottom';
|
|
51
|
-
var _useStyles = useStyles(),
|
|
53
|
+
var _useStyles = useStyles(headerHeight),
|
|
52
54
|
styles = _useStyles.styles,
|
|
53
55
|
cx = _useStyles.cx;
|
|
54
56
|
var _useControlledState = useControlledState(defaultExpand, {
|
|
@@ -5,7 +5,7 @@ var offset = 16;
|
|
|
5
5
|
var toggleLength = 40;
|
|
6
6
|
var toggleShort = 16;
|
|
7
7
|
var prefix = 'draggable-panel';
|
|
8
|
-
export var useStyles = createStyles(function (_ref) {
|
|
8
|
+
export var useStyles = createStyles(function (_ref, headerHeight) {
|
|
9
9
|
var token = _ref.token;
|
|
10
10
|
var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n z-index: 50;\n transition: all 0.2s ", ";\n }\n\n &:hover,\n &:active {\n &::before {\n background: ", " !important;\n }\n }\n "])), token.motionEaseOut, token.colorPrimary);
|
|
11
11
|
var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 101;\n opacity: 0;\n transition: all 0.2s ", ";\n\n &:hover {\n opacity: 1 !important;\n }\n\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n cursor: pointer;\n\n position: absolute;\n\n color: ", ";\n\n background: ", ";\n border-color: ", ";\n border-style: solid;\n border-width: 1px;\n border-radius: 4px;\n\n transition: all 0.2s ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
|
|
@@ -15,18 +15,18 @@ export var useStyles = createStyles(function (_ref) {
|
|
|
15
15
|
bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n bottom: 50%;\n width: 100%;\n height: 2px;\n }\n "])), commonHandle)),
|
|
16
16
|
container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex-shrink: 0;\n border: 0 solid ", ";\n\n &:hover {\n .", "-toggle {\n opacity: 1;\n }\n }\n "])), token.colorBorderSecondary, prefix)),
|
|
17
17
|
fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n "]))),
|
|
18
|
-
fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100
|
|
18
|
+
fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n inset: ", "px 0 0 0;\n\n width: 100%;\n height: calc(100% - ", "px);\n\n background: ", ";\n "])), headerHeight, headerHeight, token.colorBgLayout),
|
|
19
19
|
handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ", ";\n "])), token.motionEaseOut),
|
|
20
|
-
leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n top:
|
|
20
|
+
leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n top: ", "px;\n bottom: 0;\n left: 0;\n height: calc(100% - ", "px);\n "])), headerHeight, headerHeight)),
|
|
21
21
|
leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n left: 50%;\n width: 2px;\n height: 100%;\n }\n "])), commonHandle), "".concat(prefix, "-left-handle")),
|
|
22
22
|
panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n overflow: hidden;\n transition: all 0.2s ", ";\n "])), token.motionEaseOut)),
|
|
23
|
-
rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n top:
|
|
23
|
+
rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n top: ", "px;\n right: 0;\n bottom: 0;\n height: calc(100% - ", "px);\n "])), headerHeight, headerHeight)),
|
|
24
24
|
rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n ", ";\n &::before {\n right: 50%;\n width: 2px;\n height: 100%;\n }\n "])), commonHandle), "".concat(prefix, "-right-handle")),
|
|
25
25
|
toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n bottom: -", "px;\n width: 100%;\n height: ", "px;\n\n > div {\n left: 50%;\n\n width: ", "px;\n height: 16px;\n margin-left: -20px;\n\n border-radius: 0 0 4px 4px;\n }\n "])), offset, toggleShort, toggleLength)),
|
|
26
26
|
toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n left: -", "px;\n width: ", "px;\n height: 100%;\n\n > div {\n top: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-top: -20px;\n\n border-radius: 4px 0 0 4px;\n }\n "])), offset, toggleShort, toggleShort, toggleLength)),
|
|
27
27
|
toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n right: -", "px;\n width: ", "px;\n height: 100%;\n\n > div {\n top: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-top: -20px;\n\n border-radius: 0 4px 4px 0;\n }\n "])), offset, toggleShort, toggleShort, toggleLength)),
|
|
28
28
|
toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n top: -", "px;\n width: 100%;\n height: ", "px;\n\n > div {\n left: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-left: -20px;\n\n border-radius: 4px 4px 0 0;\n }\n "])), offset, toggleShort, toggleLength, toggleShort)),
|
|
29
|
-
topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n top:
|
|
29
|
+
topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n top: ", "px;\n right: 0;\n left: 0;\n width: 100%;\n "])), headerHeight)),
|
|
30
30
|
topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n top: 50%;\n width: 100%;\n height: 2px;\n }\n "])), commonHandle))
|
|
31
31
|
};
|
|
32
32
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
3
3
|
import { keyframes } from 'antd-style';
|
|
4
4
|
export var generateCustomStylish = function generateCustomStylish(_ref) {
|
|
5
5
|
var css = _ref.css,
|
|
@@ -8,10 +8,11 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
|
|
|
8
8
|
var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n "])));
|
|
9
9
|
return {
|
|
10
10
|
blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n backdrop-filter: saturate(180%) blur(10px);\n "]))),
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n backdrop-filter: blur(36px);\n "]))),
|
|
12
|
+
bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n width: 0;\n height: 4px;\n background-color: transparent;\n\n &-thumb {\n background-color: ", ";\n border-radius: 4px;\n transition: background-color 500ms ", ";\n }\n\n &-corner {\n display: none;\n width: 0;\n height: 0;\n }\n }\n "])), token.colorFill, token.motionEaseOut),
|
|
13
|
+
gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-image: linear-gradient(\n -45deg,\n ", ",\n ", ",\n ", ",\n ", "\n );\n background-size: 400% 400%;\n border-radius: inherit;\n animation: 5s ", " 5s ease infinite;\n "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
|
|
14
|
+
markdown: css(_templateObject6 || (_templateObject6 = _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-break: break-all;\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 li {\n line-height: 1.8;\n\n &::marker {\n color: ", ";\n }\n }\n\n details {\n margin-bottom: 1em;\n padding: 12px 16px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n\n transition: all 400ms ", ";\n }\n\n details[open] {\n summary {\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n }\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, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
|
|
15
|
+
noScrollbar: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n display: none;\n width: 0;\n height: 0;\n background-color: transparent;\n }\n "]))),
|
|
16
|
+
resetLinkColor: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n cursor: pointer;\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n "])), token.colorTextSecondary, token.colorText)
|
|
16
17
|
};
|
|
17
18
|
};
|