@lobehub/ui 5.23.4 → 5.24.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/Accordion/Accordion.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/Accordion/ArrowIcon.mjs.map +1 -1
- package/es/ActionIcon/ActionIcon.mjs.map +1 -1
- package/es/ActionIconGroup/ActionIconGroup.mjs.map +1 -1
- package/es/Alert/Alert.mjs.map +1 -1
- package/es/Avatar/Avatar.mjs.map +1 -1
- package/es/Avatar/AvatarGroup/index.mjs.map +1 -1
- package/es/Burger/Burger.mjs.map +1 -1
- package/es/Checkbox/Checkbox.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeDiff/DiffPanel.mjs.map +1 -1
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/Collapse/Collapse.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/ConfigProvider/index.mjs.map +1 -1
- package/es/ContextMenu/index.d.mts +2 -2
- package/es/ContextMenu/index.mjs +2 -2
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/Drawer/Drawer.mjs.map +1 -1
- package/es/Dropdown/Dropdown.mjs.map +1 -1
- package/es/EditableText/ControlInput.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EditorSlashMenu/EditorSlashMenu.mjs.map +1 -1
- package/es/EditorSlashMenu/MenuItemRenderer.mjs.map +1 -1
- package/es/EmojiPicker/AvatarUploader.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/Empty/Empty.mjs.map +1 -1
- package/es/FileTypeIcon/FileTypeIcon.mjs.map +1 -1
- package/es/FileTypeIcon/components/FileIcon.mjs.map +1 -1
- package/es/FileTypeIcon/components/FolderIcon.mjs.map +1 -1
- package/es/FluentEmoji/FluentEmoji.mjs.map +1 -1
- package/es/Footer/Footer.mjs.map +1 -1
- package/es/Form/Form.mjs.map +1 -1
- package/es/Form/components/FormGroup.mjs.map +1 -1
- package/es/Form/components/FormSubmitFooter.mjs.map +1 -1
- package/es/Form/components/FormTitle.mjs.map +1 -1
- package/es/FormModal/FormModal.mjs.map +1 -1
- package/es/Freeze/Freeze.mjs.map +1 -1
- package/es/GroupAvatar/GroupAvatar.mjs.map +1 -1
- package/es/GuideCard/GuideCard.mjs.map +1 -1
- package/es/Header/Header.mjs.map +1 -1
- package/es/Highlighter/FullFeatured.mjs.map +1 -1
- package/es/Highlighter/Highlighter.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/style.mjs +2 -2
- package/es/Highlighter/SyntaxHighlighter/style.mjs.map +1 -1
- package/es/Hotkey/Hotkey.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/HtmlPreview/HtmlPreview.mjs.map +1 -1
- package/es/HtmlPreview/Iframe.mjs.map +1 -1
- package/es/Icon/Icon.mjs.map +1 -1
- package/es/Image/Image.mjs.map +1 -1
- package/es/Image/components/Toolbar.mjs.map +1 -1
- package/es/Image/components/usePreview.mjs.map +1 -1
- package/es/Image/components/usePreviewGroup.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/Layout/Layout.mjs.map +1 -1
- package/es/List/List.mjs.map +1 -1
- package/es/List/ListItem/index.mjs.map +1 -1
- package/es/Markdown/Markdown.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/MarkdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/style.mjs.map +1 -1
- package/es/Markdown/components/CodeBlock.mjs.map +1 -1
- package/es/Markdown/components/Footnotes.mjs.map +1 -1
- package/es/Markdown/components/MarkdownTable/index.mjs.map +1 -1
- package/es/Markdown/components/SearchResultCards/SearchResultCard.mjs.map +1 -1
- package/es/Markdown/components/SearchResultCards/index.mjs.map +1 -1
- package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.mjs.map +1 -1
- package/es/Menu/Menu.mjs.map +1 -1
- package/es/Mermaid/FullFeatured.mjs.map +1 -1
- package/es/Mermaid/Mermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs +35 -0
- package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs +52 -0
- package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs +13 -42
- package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs +13 -43
- package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs +52 -0
- package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs +20 -0
- package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/style.mjs +11 -0
- package/es/Mermaid/SyntaxMermaid/style.mjs.map +1 -1
- package/es/Mermaid/const.mjs +10 -31
- package/es/Mermaid/const.mjs.map +1 -1
- package/es/Mermaid/index.d.mts +2 -1
- package/es/Mermaid/index.mjs +2 -1
- package/es/Mermaid/type.d.mts +2 -2
- package/es/Modal/Modal.mjs.map +1 -1
- package/es/Modal/ModalStackItem.mjs.map +1 -1
- package/es/Modal/RawModalStackItem.mjs.map +1 -1
- package/es/Modal/imperative.mjs.map +1 -1
- package/es/Modal/style.mjs.map +1 -1
- package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs.map +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/SideNav/SideNav.mjs.map +1 -1
- package/es/Skeleton/Skeleton.mjs.map +1 -1
- package/es/Skeleton/SkeletonParagraph.mjs.map +1 -1
- package/es/Skeleton/SkeletonTags.mjs.map +1 -1
- package/es/SliderWithInput/SliderWithInput.mjs.map +1 -1
- package/es/Snippet/Snippet.mjs.map +1 -1
- package/es/SortableList/SortableList.mjs.map +1 -1
- package/es/SortableList/components/SortableItem.mjs.map +1 -1
- package/es/Text/Text.mjs.map +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs.map +1 -1
- package/es/ThemeSwitch/ThemeSwitch.mjs.map +1 -1
- package/es/Toc/Toc.mjs.map +1 -1
- package/es/Toc/TocMobile.mjs.map +1 -1
- package/es/Video/index.mjs.map +1 -1
- package/es/awesome/AuroraBackground/AuroraBackground.mjs.map +1 -1
- package/es/awesome/Features/FeatureItem.mjs.map +1 -1
- package/es/awesome/Giscus/Giscus.mjs.map +1 -1
- package/es/awesome/GradientButton/GradientButton.mjs.map +1 -1
- package/es/awesome/GridBackground/GridBackground.mjs.map +1 -1
- package/es/awesome/GridBackground/GridShowcase.mjs.map +1 -1
- package/es/awesome/GridBackground/components/Grid.mjs.map +1 -1
- package/es/awesome/Hero/Hero.mjs.map +1 -1
- package/es/awesome/Spline/ParentSize.mjs.map +1 -1
- package/es/awesome/Spline/Spine.mjs.map +1 -1
- package/es/awesome/SpotlightCard/SpotlightCard.mjs.map +1 -1
- package/es/awesome/SpotlightCard/SpotlightCardItem.mjs.map +1 -1
- package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map +1 -1
- package/es/base-ui/AutoComplete/AutoComplete.mjs.map +1 -1
- package/es/base-ui/Button/Button.mjs.map +1 -1
- package/es/base-ui/Button/SplitButton.mjs.map +1 -1
- package/es/base-ui/Checkbox/Checkbox.mjs.map +1 -1
- package/es/base-ui/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/base-ui/ContextMenu/imperative.d.mts +2 -2
- package/es/base-ui/ContextMenu/index.d.mts +2 -2
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/ContextMenu/store.d.mts +13 -1
- package/es/base-ui/ContextMenu/store.mjs +29 -4
- package/es/base-ui/ContextMenu/store.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/sharedStyle.mjs +3 -0
- package/es/base-ui/DropdownMenu/sharedStyle.mjs.map +1 -1
- package/es/base-ui/FloatingPanel/FloatingPanel.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheet.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheetHeader.mjs.map +1 -1
- package/es/base-ui/Form/Form.mjs.map +1 -1
- package/es/base-ui/Form/components/FormField.mjs.map +1 -1
- package/es/base-ui/Form/components/FormGroup.mjs.map +1 -1
- package/es/base-ui/Form/components/FormSubmitFooter.mjs.map +1 -1
- package/es/base-ui/Form/components/FormTitle.mjs.map +1 -1
- package/es/base-ui/Input/Input.mjs.map +1 -1
- package/es/base-ui/Input/InputNumber.mjs.map +1 -1
- package/es/base-ui/Input/InputOTP.mjs.map +1 -1
- package/es/base-ui/Input/InputPassword.mjs.map +1 -1
- package/es/base-ui/Input/TextArea.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Modal/Modal.mjs.map +1 -1
- package/es/base-ui/Modal/atoms.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Popover/ArrowIcon.mjs.map +1 -1
- package/es/base-ui/Popover/PopoverGroup.mjs.map +1 -1
- package/es/base-ui/Popover/PopoverStandalone.mjs.map +1 -1
- package/es/base-ui/Popover/atoms.mjs.map +1 -1
- package/es/base-ui/Radio/Radio.mjs.map +1 -1
- package/es/base-ui/Radio/RadioGroup.mjs.map +1 -1
- package/es/base-ui/ScrollArea/ScrollArea.mjs.map +1 -1
- package/es/base-ui/Segmented/Segmented.mjs.map +1 -1
- package/es/base-ui/Select/Select.mjs.map +1 -1
- package/es/base-ui/Select/parts.mjs.map +1 -1
- package/es/base-ui/Select/renderOptions.mjs.map +1 -1
- package/es/base-ui/Slider/Slider.mjs.map +1 -1
- package/es/base-ui/Slider/SliderWithInput.mjs.map +1 -1
- package/es/base-ui/SubmenuArrowIcon.mjs.map +1 -1
- package/es/base-ui/Switch/Switch.mjs.map +1 -1
- package/es/base-ui/Switch/atoms.d.mts +3 -3
- package/es/base-ui/Switch/atoms.mjs +99 -50
- package/es/base-ui/Switch/atoms.mjs.map +1 -1
- package/es/base-ui/Switch/style.mjs +44 -1
- package/es/base-ui/Switch/style.mjs.map +1 -1
- package/es/base-ui/Switch/type.d.mts +3 -7
- package/es/base-ui/Tabs/Tabs.mjs.map +1 -1
- package/es/base-ui/Tabs/atoms.mjs.map +1 -1
- package/es/base-ui/Toast/Toast.mjs.map +1 -1
- package/es/base-ui/Toast/imperative.mjs.map +1 -1
- package/es/base-ui/Tooltip/ArrowIcon.mjs.map +1 -1
- package/es/base-ui/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/base-ui/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/base-ui/index.d.mts +2 -2
- package/es/base-ui/index.mjs +2 -2
- package/es/brand/LobeChat/index.mjs.map +1 -1
- package/es/brand/LobeChatText/index.mjs.map +1 -1
- package/es/brand/LobeHub/index.mjs.map +1 -1
- package/es/brand/LobeHubText/index.mjs.map +1 -1
- package/es/brand/LogoThree/Loading.mjs.map +1 -1
- package/es/brand/LogoThree/LogoSpline.mjs.map +1 -1
- package/es/brand/LogoThree/index.mjs.map +1 -1
- package/es/brand/components/Divider.mjs.map +1 -1
- package/es/chat/BackBottom/BackBottom.mjs.map +1 -1
- package/es/chat/ChatHeader/ChatHeader.mjs.map +1 -1
- package/es/chat/ChatHeader/ChatHeaderTitle.mjs.map +1 -1
- package/es/chat/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs.map +1 -1
- package/es/chat/ChatInputArea/components/ChatSendButton.mjs.map +1 -1
- package/es/chat/ChatItem/ChatItem.mjs.map +1 -1
- package/es/chat/ChatItem/components/Actions.mjs.map +1 -1
- package/es/chat/ChatItem/components/Avatar.mjs.map +1 -1
- package/es/chat/ChatItem/components/ErrorContent.mjs.map +1 -1
- package/es/chat/ChatItem/components/Loading.mjs.map +1 -1
- package/es/chat/ChatItem/components/MessageContent.mjs.map +1 -1
- package/es/chat/ChatItem/components/Title.mjs.map +1 -1
- package/es/chat/ChatList/ChatList.mjs.map +1 -1
- package/es/chat/ChatList/components/HistoryDivider.mjs.map +1 -1
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
- package/es/chat/LoadingDots/LoadingDots.mjs.map +1 -1
- package/es/chat/MessageInput/MessageInput.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/color/ColorScales/ScaleRow.mjs.map +1 -1
- package/es/color/ColorScales/index.mjs.map +1 -1
- package/es/color/CssVar/ScaleRow.mjs.map +1 -1
- package/es/color/CssVar/VarRow.mjs.map +1 -1
- package/es/color/CssVar/index.mjs.map +1 -1
- package/es/hooks/useMarkdown/latex.mjs.map +1 -1
- package/es/hooks/useMarkdown/useMarkdownContent.mjs.map +1 -1
- package/es/hooks/useMermaid.mjs +80 -116
- package/es/hooks/useMermaid.mjs.map +1 -1
- package/es/hooks/useMermaidCdn.d.mts +10 -0
- package/es/hooks/useMermaidCdn.mjs +97 -0
- package/es/hooks/useMermaidCdn.mjs.map +1 -0
- package/es/hooks/useStreamMermaid.mjs +19 -70
- package/es/hooks/useStreamMermaid.mjs.map +1 -1
- package/es/icons/Auth0/components/Mono.mjs.map +1 -1
- package/es/icons/Authelia/components/Color.mjs.map +1 -1
- package/es/icons/Authelia/components/Mono.mjs.map +1 -1
- package/es/icons/Authentik/components/Color.mjs.map +1 -1
- package/es/icons/Authentik/components/Mono.mjs.map +1 -1
- package/es/icons/Casdoor/components/Color.mjs.map +1 -1
- package/es/icons/Casdoor/components/Mono.mjs.map +1 -1
- package/es/icons/Clerk/components/Color.mjs.map +1 -1
- package/es/icons/Clerk/components/Mono.mjs.map +1 -1
- package/es/icons/DingTalk/components/Color.mjs.map +1 -1
- package/es/icons/DingTalk/components/Mono.mjs.map +1 -1
- package/es/icons/Discord/components/Color.mjs.map +1 -1
- package/es/icons/Discord/components/Mono.mjs.map +1 -1
- package/es/icons/GoogleChat/components/Color.mjs.map +1 -1
- package/es/icons/GoogleChat/components/Mono.mjs.map +1 -1
- package/es/icons/IMessage/components/Color.mjs.map +1 -1
- package/es/icons/IMessage/components/Inner.mjs.map +1 -1
- package/es/icons/IMessage/components/Mono.mjs.map +1 -1
- package/es/icons/Lark/components/Color.mjs.map +1 -1
- package/es/icons/Lark/components/Mono.mjs.map +1 -1
- package/es/icons/Line/components/Color.mjs.map +1 -1
- package/es/icons/Line/components/Mono.mjs.map +1 -1
- package/es/icons/Logto/components/Color.mjs.map +1 -1
- package/es/icons/Logto/components/Mono.mjs.map +1 -1
- package/es/icons/MicrosoftEntra/components/Color.mjs.map +1 -1
- package/es/icons/MicrosoftEntra/components/Mono.mjs.map +1 -1
- package/es/icons/MicrosoftTeams/components/Color.mjs.map +1 -1
- package/es/icons/MicrosoftTeams/components/Mono.mjs.map +1 -1
- package/es/icons/NextAuth/components/Color.mjs.map +1 -1
- package/es/icons/NextAuth/components/Mono.mjs.map +1 -1
- package/es/icons/QQ/components/Color.mjs.map +1 -1
- package/es/icons/QQ/components/Mono.mjs.map +1 -1
- package/es/icons/Slack/components/Color.mjs.map +1 -1
- package/es/icons/Slack/components/Mono.mjs.map +1 -1
- package/es/icons/Telegram/components/Color.mjs.map +1 -1
- package/es/icons/Telegram/components/Inner.mjs.map +1 -1
- package/es/icons/Telegram/components/Mono.mjs.map +1 -1
- package/es/icons/WeChat/components/Color.mjs.map +1 -1
- package/es/icons/WeChat/components/Mono.mjs.map +1 -1
- package/es/icons/WhatsApp/components/Color.mjs.map +1 -1
- package/es/icons/WhatsApp/components/Mono.mjs.map +1 -1
- package/es/icons/Zitadel/components/Color.mjs.map +1 -1
- package/es/icons/Zitadel/components/Mono.mjs.map +1 -1
- package/es/index.d.mts +2 -2
- package/es/index.mjs +2 -2
- package/es/mdx/Callout/index.mjs.map +1 -1
- package/es/mdx/Cards/Card.mjs.map +1 -1
- package/es/mdx/FileTree/File.mjs.map +1 -1
- package/es/mdx/FileTree/Folder.mjs.map +1 -1
- package/es/mdx/Mdx/index.mjs.map +1 -1
- package/es/mdx/Tabs/Tab.mjs.map +1 -1
- package/es/mdx/Tabs/index.mjs.map +1 -1
- package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs.map +1 -1
- package/es/mdx/mdxComponents/Citation/index.mjs.map +1 -1
- package/es/mdx/mdxComponents/CodeBlock.mjs.map +1 -1
- package/es/mdx/mdxComponents/Link.mjs.map +1 -1
- package/es/mobile/ChatHeader/ChatHeader.mjs.map +1 -1
- package/es/mobile/ChatHeader/ChatHeaderTitle.mjs.map +1 -1
- package/es/mobile/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/es/storybook/StoryBook/index.mjs.map +1 -1
- package/package.json +3 -4
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import Image from "../../Image/index.mjs";
|
|
3
2
|
import { mermaidThemes } from "../const.mjs";
|
|
3
|
+
import MermaidFallback from "./MermaidFallback.mjs";
|
|
4
|
+
import MermaidSvg from "./MermaidSvg.mjs";
|
|
4
5
|
import { useStreamMermaid } from "../../hooks/useStreamMermaid.mjs";
|
|
5
|
-
import { memo,
|
|
6
|
+
import { memo, useMemo } from "react";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import { kebabCase } from "es-toolkit/compat";
|
|
8
8
|
//#region src/Mermaid/SyntaxMermaid/StreamMermaid.tsx
|
|
9
9
|
const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
|
|
10
10
|
const safeChildren = children ?? "";
|
|
@@ -13,40 +13,10 @@ const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style
|
|
|
13
13
|
if (isDefaultTheme) return;
|
|
14
14
|
return mermaidThemes.find((item) => item.id === customTheme)?.background;
|
|
15
15
|
}, [isDefaultTheme, customTheme]);
|
|
16
|
-
const
|
|
16
|
+
const { svg, error, loading } = useStreamMermaid(safeChildren, {
|
|
17
17
|
enabled: true,
|
|
18
|
-
id: kebabCase(`mermaid-${useId()}`),
|
|
19
18
|
theme: isDefaultTheme ? void 0 : customTheme
|
|
20
19
|
});
|
|
21
|
-
const isLoading = !data;
|
|
22
|
-
const [blobUrl, setBlobUrl] = useState();
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
return () => {
|
|
25
|
-
if (blobUrl) URL.revokeObjectURL(blobUrl);
|
|
26
|
-
};
|
|
27
|
-
}, [blobUrl]);
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
if (isLoading || !data) {
|
|
30
|
-
setBlobUrl(void 0);
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
let finalSvgString = data;
|
|
34
|
-
if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
|
|
35
|
-
const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
|
|
36
|
-
const svgElement = svgDoc.documentElement;
|
|
37
|
-
if (svgElement && svgElement.hasAttribute("viewBox")) {
|
|
38
|
-
const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
|
|
39
|
-
if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
|
|
40
|
-
svgElement.setAttribute("width", viewBoxParts[2]);
|
|
41
|
-
svgElement.setAttribute("height", viewBoxParts[3]);
|
|
42
|
-
}
|
|
43
|
-
finalSvgString = new XMLSerializer().serializeToString(svgDoc);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
|
|
47
|
-
const url = URL.createObjectURL(svgBlob);
|
|
48
|
-
setBlobUrl(url);
|
|
49
|
-
}, [isLoading, data]);
|
|
50
20
|
const containerStyle = {
|
|
51
21
|
background: variant === "filled" ? background : void 0,
|
|
52
22
|
margin: 0,
|
|
@@ -56,7 +26,13 @@ const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style
|
|
|
56
26
|
width: "100%",
|
|
57
27
|
...style
|
|
58
28
|
};
|
|
59
|
-
if (!
|
|
29
|
+
if (error && !loading) return /* @__PURE__ */ jsx(MermaidFallback, {
|
|
30
|
+
className: fallbackClassName,
|
|
31
|
+
message: error,
|
|
32
|
+
style,
|
|
33
|
+
children: safeChildren
|
|
34
|
+
});
|
|
35
|
+
if (!svg) return /* @__PURE__ */ jsx("div", {
|
|
60
36
|
className: fallbackClassName,
|
|
61
37
|
style,
|
|
62
38
|
children: /* @__PURE__ */ jsx("div", {
|
|
@@ -64,17 +40,11 @@ const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style
|
|
|
64
40
|
children: "Rendering..."
|
|
65
41
|
})
|
|
66
42
|
});
|
|
67
|
-
return /* @__PURE__ */ jsx(
|
|
68
|
-
alt: "mermaid",
|
|
43
|
+
return /* @__PURE__ */ jsx(MermaidSvg, {
|
|
69
44
|
className,
|
|
70
|
-
maxHeight: 480,
|
|
71
|
-
minWidth: 300,
|
|
72
|
-
objectFit: "contain",
|
|
73
45
|
ref,
|
|
74
|
-
src: blobUrl,
|
|
75
46
|
style: containerStyle,
|
|
76
|
-
|
|
77
|
-
width: "100%"
|
|
47
|
+
svg
|
|
78
48
|
});
|
|
79
49
|
});
|
|
80
50
|
StreamMermaid.displayName = "StreamMermaid";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StreamMermaid.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"StreamMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StreamMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { type Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useStreamMermaid } from '@/hooks/useStreamMermaid';\n\nimport { mermaidThemes } from '../const';\nimport { type SyntaxMermaidProps } from '../type';\nimport MermaidFallback from './MermaidFallback';\nimport MermaidSvg from './MermaidSvg';\n\ninterface StreamMermaidProps {\n children: string;\n className?: string;\n fallbackClassName?: string;\n ref?: Ref<HTMLDivElement>;\n style?: SyntaxMermaidProps['style'];\n theme?: SyntaxMermaidProps['theme'];\n variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StreamMermaid = memo<StreamMermaidProps>(\n ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n const safeChildren = children ?? '';\n const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n const background = useMemo(() => {\n if (isDefaultTheme) return;\n return mermaidThemes.find((item) => item.id === customTheme)?.background;\n }, [isDefaultTheme, customTheme]);\n\n const { svg, error, loading } = useStreamMermaid(safeChildren, {\n enabled: true,\n theme: isDefaultTheme ? undefined : customTheme,\n });\n\n const containerStyle = {\n background: variant === 'filled' ? background : undefined,\n margin: 0,\n minWidth: 300,\n padding: variant === 'borderless' ? 0 : 16,\n position: 'relative' as const,\n width: '100%',\n ...style,\n };\n\n if (error && !loading) {\n return (\n <MermaidFallback className={fallbackClassName} message={error} style={style}>\n {safeChildren}\n </MermaidFallback>\n );\n }\n\n if (!svg) {\n return (\n <div className={fallbackClassName} style={style}>\n <div style={{ padding: 16 }}>Rendering...</div>\n </div>\n );\n }\n\n return <MermaidSvg className={className} ref={ref} style={containerStyle} svg={svg} />;\n },\n);\n\nStreamMermaid.displayName = 'StreamMermaid';\n\nexport default StreamMermaid;\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAEhC,MAAM,EAAE,KAAK,OAAO,YAAY,iBAAiB,cAAc;EAC7D,SAAS;EACT,OAAO,iBAAiB,KAAA,IAAY;CACtC,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,SAAS,CAAC,SACZ,OACE,oBAAC,iBAAD;EAAiB,WAAW;EAAmB,SAAS;EAAc;EACnE,UAAA;CACc,CAAA;CAIrB,IAAI,CAAC,KACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;EACxC,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;GAAG,UAAA;EAAiB,CAAA;CAC3C,CAAA;CAIT,OAAO,oBAAC,YAAD;EAAuB;EAAgB;EAAK,OAAO;EAAqB;CAAM,CAAA;AACvF,CACF;AAEA,cAAc,cAAc"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
//#region src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts
|
|
2
|
+
/**
|
|
3
|
+
* Root custom properties beautiful-mermaid reads; everything else in its
|
|
4
|
+
* stylesheet is derived from these via color-mix().
|
|
5
|
+
*/
|
|
6
|
+
const MERMAID_ROOT_VARS = [
|
|
7
|
+
"--bg",
|
|
8
|
+
"--fg",
|
|
9
|
+
"--line",
|
|
10
|
+
"--accent",
|
|
11
|
+
"--muted",
|
|
12
|
+
"--surface",
|
|
13
|
+
"--border"
|
|
14
|
+
];
|
|
15
|
+
const styleBlockPattern = /<style>([\s\S]*?)<\/style>/;
|
|
16
|
+
const scopeCssSelectors = (css, scope) => css.replaceAll(/(^|})([^{}@]+)\{/g, (_match, tail, selectors) => {
|
|
17
|
+
return `${tail}\n${selectors.split(",").map((selector) => selector.trim()).filter(Boolean).map((selector) => selector === "svg" ? scope : `${scope} ${selector}`).join(", ")} {`;
|
|
18
|
+
});
|
|
19
|
+
/**
|
|
20
|
+
* A <style> element inside inline SVG applies to the whole document, so the
|
|
21
|
+
* generated rules must be scoped to this diagram before being injected. The
|
|
22
|
+
* font @import is dropped because inline rendering would actually issue the
|
|
23
|
+
* Google Fonts request that an <img>-loaded SVG silently blocks, and the bare
|
|
24
|
+
* `text` rule is dropped so page CSS can supply the theme font instead.
|
|
25
|
+
*/
|
|
26
|
+
const prepareInlineMermaidSvg = (svg, scopeId) => {
|
|
27
|
+
if (!svg) return svg;
|
|
28
|
+
return svg.replace(/<svg\b/, `<svg id="${scopeId}"`).replace(styleBlockPattern, (_match, css) => {
|
|
29
|
+
const withoutFontRule = css.replaceAll(/@import[^;]*;/g, "").replaceAll(/(^|})\s*text\s*\{[^{}]*\}/g, "$1");
|
|
30
|
+
return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an
|
|
35
|
+
* isolated document with no access to them, so the root variables are baked in
|
|
36
|
+
* as literal values before serializing for preview or download.
|
|
37
|
+
*/
|
|
38
|
+
const toStandaloneSvgString = (element) => {
|
|
39
|
+
const clone = element.cloneNode(true);
|
|
40
|
+
const computed = globalThis.getComputedStyle(element);
|
|
41
|
+
for (const name of MERMAID_ROOT_VARS) {
|
|
42
|
+
const value = computed.getPropertyValue(name).trim();
|
|
43
|
+
if (value) clone.style.setProperty(name, value);
|
|
44
|
+
}
|
|
45
|
+
const fontFamily = computed.fontFamily;
|
|
46
|
+
if (fontFamily) clone.style.setProperty("font-family", fontFamily);
|
|
47
|
+
return new XMLSerializer().serializeToString(clone);
|
|
48
|
+
};
|
|
49
|
+
//#endregion
|
|
50
|
+
export { MERMAID_ROOT_VARS, prepareInlineMermaidSvg, toStandaloneSvgString };
|
|
51
|
+
|
|
52
|
+
//# sourceMappingURL=prepareInlineSvg.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prepareInlineSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts"],"sourcesContent":["/**\n * Root custom properties beautiful-mermaid reads; everything else in its\n * stylesheet is derived from these via color-mix().\n */\nexport const MERMAID_ROOT_VARS = [\n '--bg',\n '--fg',\n '--line',\n '--accent',\n '--muted',\n '--surface',\n '--border',\n];\n\nconst styleBlockPattern = /<style>([\\s\\S]*?)<\\/style>/;\n\nconst scopeCssSelectors = (css: string, scope: string): string =>\n css.replaceAll(/(^|})([^{}@]+)\\{/g, (_match, tail: string, selectors: string) => {\n const scoped = selectors\n .split(',')\n .map((selector) => selector.trim())\n .filter(Boolean)\n // The generated sheet targets `svg` for the root itself, not a descendant\n .map((selector) => (selector === 'svg' ? scope : `${scope} ${selector}`))\n .join(', ');\n\n return `${tail}\\n${scoped} {`;\n });\n\n/**\n * A <style> element inside inline SVG applies to the whole document, so the\n * generated rules must be scoped to this diagram before being injected. The\n * font @import is dropped because inline rendering would actually issue the\n * Google Fonts request that an <img>-loaded SVG silently blocks, and the bare\n * `text` rule is dropped so page CSS can supply the theme font instead.\n */\nexport const prepareInlineMermaidSvg = (svg: string, scopeId: string): string => {\n if (!svg) return svg;\n\n const withId = svg.replace(/<svg\\b/, `<svg id=\"${scopeId}\"`);\n\n return withId.replace(styleBlockPattern, (_match, css: string) => {\n const withoutImports = css.replaceAll(/@import[^;]*;/g, '');\n const withoutFontRule = withoutImports.replaceAll(/(^|})\\s*text\\s*\\{[^{}]*\\}/g, '$1');\n\n return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;\n });\n};\n\n/**\n * Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an\n * isolated document with no access to them, so the root variables are baked in\n * as literal values before serializing for preview or download.\n */\nexport const toStandaloneSvgString = (element: SVGElement): string => {\n const clone = element.cloneNode(true) as SVGElement;\n const computed = globalThis.getComputedStyle(element);\n\n for (const name of MERMAID_ROOT_VARS) {\n const value = computed.getPropertyValue(name).trim();\n if (value) clone.style.setProperty(name, value);\n }\n\n const fontFamily = computed.fontFamily;\n if (fontFamily) clone.style.setProperty('font-family', fontFamily);\n\n return new XMLSerializer().serializeToString(clone);\n};\n"],"mappings":";;;;;AAIA,MAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB,KAAa,UACtC,IAAI,WAAW,sBAAsB,QAAQ,MAAc,cAAsB;CAS/E,OAAO,GAAG,KAAK,IARA,UACZ,MAAM,GAAG,CAAC,CACV,KAAK,aAAa,SAAS,KAAK,CAAC,CAAC,CAClC,OAAO,OAAO,CAAC,CAEf,KAAK,aAAc,aAAa,QAAQ,QAAQ,GAAG,MAAM,GAAG,UAAW,CAAC,CACxE,KAAK,IAEgB,EAAE;AAC5B,CAAC;;;;;;;;AASH,MAAa,2BAA2B,KAAa,YAA4B;CAC/E,IAAI,CAAC,KAAK,OAAO;CAIjB,OAFe,IAAI,QAAQ,UAAU,YAAY,QAAQ,EAE7C,CAAC,CAAC,QAAQ,oBAAoB,QAAQ,QAAgB;EAEhE,MAAM,kBADiB,IAAI,WAAW,kBAAkB,EACnB,CAAC,CAAC,WAAW,8BAA8B,IAAI;EAEpF,OAAO,UAAU,kBAAkB,iBAAiB,IAAI,SAAS,EAAE;CACrE,CAAC;AACH;;;;;;AAOA,MAAa,yBAAyB,YAAgC;CACpE,MAAM,QAAQ,QAAQ,UAAU,IAAI;CACpC,MAAM,WAAW,WAAW,iBAAiB,OAAO;CAEpD,KAAK,MAAM,QAAQ,mBAAmB;EACpC,MAAM,QAAQ,SAAS,iBAAiB,IAAI,CAAC,CAAC,KAAK;EACnD,IAAI,OAAO,MAAM,MAAM,YAAY,MAAM,KAAK;CAChD;CAEA,MAAM,aAAa,SAAS;CAC5B,IAAI,YAAY,MAAM,MAAM,YAAY,eAAe,UAAU;CAEjE,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;AACpD"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
//#region src/Mermaid/SyntaxMermaid/prepareMermaidSvg.ts
|
|
2
|
+
const voidElementPattern = new RegExp(`<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)((?:\\s[^>]*?)?)\\s*/?>`, "gi");
|
|
3
|
+
const ensureXmlSafeVoidElements = (svg) => svg.replaceAll(voidElementPattern, "<$1$2/>");
|
|
4
|
+
const applyFirefoxSizeFix = (svg) => {
|
|
5
|
+
if (typeof window === "undefined" || typeof navigator === "undefined" || !navigator.userAgent.includes("Firefox") || typeof DOMParser === "undefined") return svg;
|
|
6
|
+
const svgDoc = new DOMParser().parseFromString(svg, "image/svg+xml");
|
|
7
|
+
if (svgDoc.querySelector("parsererror")) return svg;
|
|
8
|
+
const svgElement = svgDoc.documentElement;
|
|
9
|
+
if (!svgElement || svgElement.localName !== "svg" || !svgElement.hasAttribute("viewBox")) return svg;
|
|
10
|
+
const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
|
|
11
|
+
if (viewBoxParts.length !== 4) return svg;
|
|
12
|
+
svgElement.setAttribute("width", viewBoxParts[2]);
|
|
13
|
+
svgElement.setAttribute("height", viewBoxParts[3]);
|
|
14
|
+
return new XMLSerializer().serializeToString(svgDoc);
|
|
15
|
+
};
|
|
16
|
+
const prepareMermaidSvgString = (svg) => applyFirefoxSizeFix(ensureXmlSafeVoidElements(svg));
|
|
17
|
+
//#endregion
|
|
18
|
+
export { prepareMermaidSvgString };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=prepareMermaidSvg.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prepareMermaidSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/prepareMermaidSvg.ts"],"sourcesContent":["const VOID_ELEMENTS = 'area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr';\nconst voidElementPattern = new RegExp(`<(${VOID_ELEMENTS})((?:\\\\s[^>]*?)?)\\\\s*/?>`, 'gi');\n\n// Mermaid serializes HTML labels (foreignObject) with HTML rules, leaving void elements\n// like <br> unclosed. When that SVG string is loaded as a standalone image/svg+xml Blob,\n// the browser parses it as strict XML, rejects the unclosed tag, and fails the whole image.\nconst ensureXmlSafeVoidElements = (svg: string): string =>\n svg.replaceAll(voidElementPattern, '<$1$2/>');\n\nconst applyFirefoxSizeFix = (svg: string): string => {\n if (\n typeof window === 'undefined' ||\n typeof navigator === 'undefined' ||\n !navigator.userAgent.includes('Firefox') ||\n typeof DOMParser === 'undefined'\n ) {\n return svg;\n }\n\n const svgDoc = new DOMParser().parseFromString(svg, 'image/svg+xml');\n if (svgDoc.querySelector('parsererror')) return svg;\n\n const svgElement = svgDoc.documentElement;\n if (!svgElement || svgElement.localName !== 'svg' || !svgElement.hasAttribute('viewBox')) {\n return svg;\n }\n\n const viewBoxParts = svgElement.getAttribute('viewBox')!.split(' ');\n if (viewBoxParts.length !== 4) return svg;\n\n svgElement.setAttribute('width', viewBoxParts[2]!);\n svgElement.setAttribute('height', viewBoxParts[3]!);\n return new XMLSerializer().serializeToString(svgDoc);\n};\n\nexport const prepareMermaidSvgString = (svg: string): string =>\n applyFirefoxSizeFix(ensureXmlSafeVoidElements(svg));\n"],"mappings":";AACA,MAAM,qBAAqB,IAAI,OAAO,kGAA8C,IAAI;AAKxF,MAAM,6BAA6B,QACjC,IAAI,WAAW,oBAAoB,SAAS;AAE9C,MAAM,uBAAuB,QAAwB;CACnD,IACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,CAAC,UAAU,UAAU,SAAS,SAAS,KACvC,OAAO,cAAc,aAErB,OAAO;CAGT,MAAM,SAAS,IAAI,UAAU,CAAC,CAAC,gBAAgB,KAAK,eAAe;CACnE,IAAI,OAAO,cAAc,aAAa,GAAG,OAAO;CAEhD,MAAM,aAAa,OAAO;CAC1B,IAAI,CAAC,cAAc,WAAW,cAAc,SAAS,CAAC,WAAW,aAAa,SAAS,GACrF,OAAO;CAGT,MAAM,eAAe,WAAW,aAAa,SAAS,CAAC,CAAE,MAAM,GAAG;CAClE,IAAI,aAAa,WAAW,GAAG,OAAO;CAEtC,WAAW,aAAa,SAAS,aAAa,EAAG;CACjD,WAAW,aAAa,UAAU,aAAa,EAAG;CAClD,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,MAAM;AACrD;AAEA,MAAa,2BAA2B,QACtC,oBAAoB,0BAA0B,GAAG,CAAC"}
|
|
@@ -23,6 +23,17 @@ const styles = createStaticStyles(({ css, cssVar }) => {
|
|
|
23
23
|
width: 100%;
|
|
24
24
|
height: auto;
|
|
25
25
|
}
|
|
26
|
+
|
|
27
|
+
svg {
|
|
28
|
+
display: block;
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: auto;
|
|
31
|
+
max-height: 480px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
svg text {
|
|
35
|
+
font-family: ${cssVar.fontFamily};
|
|
36
|
+
}
|
|
26
37
|
`),
|
|
27
38
|
noBackground: css`
|
|
28
39
|
img {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n animated: css`\n img {\n opacity: 1;\n animation: ${fadeIn} 0.5s ease-in-out;\n }\n `,\n\n mermaid: cx(\n 'ant-mermaid-mermaid',\n css`\n img {\n display: block;\n width: 100%;\n height: auto;\n }\n `,\n ),\n\n noBackground: css`\n img {\n background: transparent !important;\n }\n `,\n\n noPadding: css`\n padding: 0;\n `,\n\n padding: css`\n padding: 16px;\n `,\n\n root: css`\n direction: ltr;\n margin: 0;\n padding: 0;\n text-align: start;\n `,\n\n unmermaid: css`\n color: ${cssVar.colorTextDescription};\n `,\n };\n});\n\nexport const variants = cva(styles.root, {\n defaultVariants: {\n animated: false,\n mermaid: true,\n showBackground: false,\n variant: 'borderless',\n },\n\n variants: {\n mermaid: {\n false: styles.unmermaid,\n true: styles.mermaid,\n },\n showBackground: {\n false: styles.noBackground,\n true: null,\n },\n animated: {\n true: styles.animated,\n false: null,\n },\n variant: {\n filled: styles.padding,\n outlined: styles.padding,\n borderless: styles.noPadding,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,UAAU,GAAG;;;qBAGI,OAAO;;;EAIxB,SAAS,GACP,uBACA,GAAG
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n animated: css`\n img {\n opacity: 1;\n animation: ${fadeIn} 0.5s ease-in-out;\n }\n `,\n\n mermaid: cx(\n 'ant-mermaid-mermaid',\n css`\n img {\n display: block;\n width: 100%;\n height: auto;\n }\n\n svg {\n display: block;\n width: 100%;\n height: auto;\n max-height: 480px;\n }\n\n svg text {\n font-family: ${cssVar.fontFamily};\n }\n `,\n ),\n\n noBackground: css`\n img {\n background: transparent !important;\n }\n `,\n\n noPadding: css`\n padding: 0;\n `,\n\n padding: css`\n padding: 16px;\n `,\n\n root: css`\n direction: ltr;\n margin: 0;\n padding: 0;\n text-align: start;\n `,\n\n unmermaid: css`\n color: ${cssVar.colorTextDescription};\n `,\n };\n});\n\nexport const variants = cva(styles.root, {\n defaultVariants: {\n animated: false,\n mermaid: true,\n showBackground: false,\n variant: 'borderless',\n },\n\n variants: {\n mermaid: {\n false: styles.unmermaid,\n true: styles.mermaid,\n },\n showBackground: {\n false: styles.noBackground,\n true: null,\n },\n animated: {\n true: styles.animated,\n false: null,\n },\n variant: {\n filled: styles.padding,\n outlined: styles.padding,\n borderless: styles.noPadding,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,UAAU,GAAG;;;qBAGI,OAAO;;;EAIxB,SAAS,GACP,uBACA,GAAG;;;;;;;;;;;;;;;yBAegB,OAAO,WAAW;;OAGvC;EAEA,cAAc,GAAG;;;;;EAMjB,WAAW,GAAG;;;EAId,SAAS,GAAG;;;EAIZ,MAAM,GAAG;;;;;;EAOT,WAAW,GAAG;eACH,OAAO,qBAAqB;;CAEzC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,gBAAgB;EAChB,SAAS;CACX;CAEA,UAAU;EACR,SAAS;GACP,OAAO,OAAO;GACd,MAAM,OAAO;EACf;EACA,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;EACR;EACA,UAAU;GACR,MAAM,OAAO;GACb,OAAO;EACT;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;CACF;AACF,CAAC"}
|
package/es/Mermaid/const.mjs
CHANGED
|
@@ -1,35 +1,14 @@
|
|
|
1
|
+
import { THEMES } from "beautiful-mermaid";
|
|
1
2
|
//#region src/Mermaid/const.ts
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
background: "#fffcf8",
|
|
14
|
-
displayName: "Mermaid Base",
|
|
15
|
-
id: "base"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
background: "#000",
|
|
19
|
-
displayName: "Mermaid Dark",
|
|
20
|
-
id: "dark"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
background: "#f9ffeb",
|
|
24
|
-
displayName: "Mermaid Forest",
|
|
25
|
-
id: "forest"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
background: "#fff",
|
|
29
|
-
displayName: "Mermaid Neutral",
|
|
30
|
-
id: "neutral"
|
|
31
|
-
}
|
|
32
|
-
];
|
|
3
|
+
const toDisplayName = (id) => id.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
|
|
4
|
+
const mermaidThemes = [{
|
|
5
|
+
displayName: "Lobe Theme",
|
|
6
|
+
id: "lobe-theme"
|
|
7
|
+
}, ...Object.entries(THEMES).map(([id, colors]) => ({
|
|
8
|
+
background: colors.bg,
|
|
9
|
+
displayName: toDisplayName(id),
|
|
10
|
+
id
|
|
11
|
+
}))];
|
|
33
12
|
//#endregion
|
|
34
13
|
export { mermaidThemes };
|
|
35
14
|
|
package/es/Mermaid/const.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.mjs","names":[],"sources":["../../src/Mermaid/const.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"const.mjs","names":[],"sources":["../../src/Mermaid/const.ts"],"sourcesContent":["import { THEMES } from 'beautiful-mermaid';\n\ninterface MermaidThemeItem {\n background?: string;\n displayName: string;\n id: string;\n}\n\nconst toDisplayName = (id: string) =>\n id\n .split('-')\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n\nexport const mermaidThemes: MermaidThemeItem[] = [\n {\n displayName: 'Lobe Theme',\n id: 'lobe-theme',\n },\n ...Object.entries(THEMES).map(([id, colors]) => ({\n background: colors.bg,\n displayName: toDisplayName(id),\n id,\n })),\n];\n"],"mappings":";;AAQA,MAAM,iBAAiB,OACrB,GACG,MAAM,GAAG,CAAC,CACV,KAAK,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3D,KAAK,GAAG;AAEb,MAAa,gBAAoC,CAC/C;CACE,aAAa;CACb,IAAI;AACN,GACA,GAAG,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,IAAI,aAAa;CAC/C,YAAY,OAAO;CACnB,aAAa,cAAc,EAAE;CAC7B;AACF,EAAE,CACJ"}
|
package/es/Mermaid/index.d.mts
CHANGED
|
@@ -2,4 +2,5 @@ import { mermaidThemes } from "./const.mjs";
|
|
|
2
2
|
import { MermaidProps, SyntaxMermaidProps } from "./type.mjs";
|
|
3
3
|
import Mermaid from "./Mermaid.mjs";
|
|
4
4
|
import SyntaxMermaid from "./SyntaxMermaid/index.mjs";
|
|
5
|
-
|
|
5
|
+
import { getMermaidCdnUrl, setMermaidCdnUrl } from "../hooks/useMermaidCdn.mjs";
|
|
6
|
+
export { type MermaidProps, SyntaxMermaid, type SyntaxMermaidProps, Mermaid as default, getMermaidCdnUrl, mermaidThemes, setMermaidCdnUrl };
|
package/es/Mermaid/index.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { mermaidThemes } from "./const.mjs";
|
|
2
|
+
import { getMermaidCdnUrl, setMermaidCdnUrl } from "../hooks/useMermaidCdn.mjs";
|
|
2
3
|
import SyntaxMermaid from "./SyntaxMermaid/index.mjs";
|
|
3
4
|
import Mermaid from "./Mermaid.mjs";
|
|
4
|
-
export { SyntaxMermaid, Mermaid as default, mermaidThemes };
|
|
5
|
+
export { SyntaxMermaid, Mermaid as default, getMermaidCdnUrl, mermaidThemes, setMermaidCdnUrl };
|
package/es/Mermaid/type.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import { DivProps } from "../types/index.mjs";
|
|
|
2
2
|
import { ActionIconProps } from "../ActionIcon/type.mjs";
|
|
3
3
|
import "../ActionIcon/index.mjs";
|
|
4
4
|
import { CSSProperties, ReactNode, Ref } from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { ThemeName } from "beautiful-mermaid";
|
|
6
6
|
//#region src/Mermaid/type.d.ts
|
|
7
7
|
interface SyntaxMermaidProps {
|
|
8
8
|
animated?: boolean;
|
|
@@ -45,7 +45,7 @@ interface MermaidProps extends DivProps {
|
|
|
45
45
|
content?: CSSProperties;
|
|
46
46
|
header?: CSSProperties;
|
|
47
47
|
};
|
|
48
|
-
theme?: 'lobe-theme' |
|
|
48
|
+
theme?: 'lobe-theme' | ThemeName;
|
|
49
49
|
variant?: 'filled' | 'outlined' | 'borderless';
|
|
50
50
|
}
|
|
51
51
|
//#endregion
|
package/es/Modal/Modal.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.mjs","names":["Modal","AntModal"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { Button, ConfigProvider, Drawer, type DrawerProps, Modal as AntModal } from 'antd';\nimport { cssVar, cx, useResponsive } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { memo, type ReactNode, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type ModalProps } from './type';\n\n/**\n * @deprecated Use `Modal` from `@lobehub/ui/base-ui` instead.\n */\nconst Modal = memo<ModalProps>(\n ({\n panelRef,\n allowFullscreen,\n children,\n title = ' ',\n className,\n classNames,\n width = 700,\n onCancel,\n open,\n destroyOnHidden,\n paddings,\n height = '75dvh',\n enableResponsive = true,\n footer,\n styles: customStyles,\n okText,\n onOk,\n cancelText,\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n ...rest\n }) => {\n const [fullscreen, setFullscreen] = useState(false);\n const { mobile } = useResponsive();\n const hideFooter = footer === false || footer === null;\n if (enableResponsive && mobile)\n return (\n <ConfigProvider\n theme={{\n token: {\n colorBgElevated: cssVar.colorBgContainer,\n },\n }}\n >\n <Drawer\n className={cx(styles.drawerContent, className)}\n closeIcon={<ActionIcon icon={X} />}\n destroyOnHidden={destroyOnHidden}\n height={fullscreen ? 'calc(100% - env(safe-area-inset-top))' : height}\n open={open}\n panelRef={panelRef}\n placement={'bottom'}\n title={title}\n classNames={\n (typeof classNames === 'function'\n ? classNames\n : {\n ...classNames,\n wrapper: cx(styles.wrap, classNames?.wrapper),\n }) as DrawerProps['classNames']\n }\n extra={\n allowFullscreen && (\n <ActionIcon\n icon={fullscreen ? Minimize2 : Maximize2}\n onClick={() => setFullscreen(!fullscreen)}\n />\n )\n }\n footer={\n hideFooter\n ? null\n : (footer as ReactNode) || (\n <>\n <Button\n color={'default'}\n variant={'filled'}\n onClick={onCancel as any}\n {...cancelButtonProps}\n >\n {cancelText || 'Cancel'}\n </Button>\n <Button\n loading={confirmLoading}\n type=\"primary\"\n onClick={onOk as any}\n {...okButtonProps}\n style={{\n marginInlineStart: 8,\n ...okButtonProps?.style,\n }}\n >\n {okText || 'OK'}\n </Button>\n </>\n )\n }\n styles={\n (typeof customStyles === 'function'\n ? customStyles\n : {\n ...customStyles,\n body: {\n paddingBlock: `16px ${footer ? 0 : '16px'}`,\n paddingInline: paddings?.desktop ?? 16,\n ...customStyles?.body,\n },\n }) as DrawerProps['styles']\n }\n onClose={onCancel as any}\n {...rest}\n >\n {children}\n </Drawer>\n </ConfigProvider>\n );\n\n return (\n <ConfigProvider\n theme={{\n token: {\n colorBgElevated: cssVar.colorBgContainer,\n },\n }}\n >\n <AntModal\n closable\n cancelText={cancelText}\n className={cx(styles.content, className)}\n closeIcon={<Icon icon={X} size={20} />}\n confirmLoading={confirmLoading}\n destroyOnHidden={destroyOnHidden}\n footer={hideFooter ? null : footer}\n mask={{ closable: true }}\n okButtonProps={okButtonProps}\n okText={okText}\n open={open}\n panelRef={panelRef}\n title={title}\n width={width}\n cancelButtonProps={{\n color: 'default',\n variant: 'filled',\n ...cancelButtonProps,\n }}\n classNames={\n typeof classNames === 'function'\n ? classNames\n : {\n ...classNames,\n wrapper: cx(styles.wrap, classNames?.wrapper),\n }\n }\n styles={\n typeof customStyles === 'function'\n ? customStyles\n : {\n ...customStyles,\n body: {\n maxHeight: height,\n overflow: 'hidden auto',\n paddingBlock: `0 ${footer === null ? '16px' : 0}`,\n paddingInline: paddings?.desktop ?? 16,\n ...customStyles?.body,\n },\n }\n }\n onCancel={onCancel}\n onOk={onOk}\n {...rest}\n >\n {children}\n </AntModal>\n </ConfigProvider>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,UAAQ,MACX,EACC,UACA,iBACA,UACA,QAAQ,KACR,WACA,YACA,QAAQ,KACR,UACA,MACA,iBACA,UACA,SAAS,SACT,mBAAmB,MACnB,QACA,QAAQ,cACR,QACA,MACA,YACA,eACA,mBACA,gBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,aAAa,WAAW,SAAS,WAAW;CAClD,IAAI,oBAAoB,QACtB,OACE,oBAAC,gBAAD;EACE,OAAO,EACL,OAAO,EACL,iBAAiB,OAAO,iBAC1B,EACF;
|
|
1
|
+
{"version":3,"file":"Modal.mjs","names":["Modal","AntModal"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { Button, ConfigProvider, Drawer, type DrawerProps, Modal as AntModal } from 'antd';\nimport { cssVar, cx, useResponsive } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { memo, type ReactNode, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type ModalProps } from './type';\n\n/**\n * @deprecated Use `Modal` from `@lobehub/ui/base-ui` instead.\n */\nconst Modal = memo<ModalProps>(\n ({\n panelRef,\n allowFullscreen,\n children,\n title = ' ',\n className,\n classNames,\n width = 700,\n onCancel,\n open,\n destroyOnHidden,\n paddings,\n height = '75dvh',\n enableResponsive = true,\n footer,\n styles: customStyles,\n okText,\n onOk,\n cancelText,\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n ...rest\n }) => {\n const [fullscreen, setFullscreen] = useState(false);\n const { mobile } = useResponsive();\n const hideFooter = footer === false || footer === null;\n if (enableResponsive && mobile)\n return (\n <ConfigProvider\n theme={{\n token: {\n colorBgElevated: cssVar.colorBgContainer,\n },\n }}\n >\n <Drawer\n className={cx(styles.drawerContent, className)}\n closeIcon={<ActionIcon icon={X} />}\n destroyOnHidden={destroyOnHidden}\n height={fullscreen ? 'calc(100% - env(safe-area-inset-top))' : height}\n open={open}\n panelRef={panelRef}\n placement={'bottom'}\n title={title}\n classNames={\n (typeof classNames === 'function'\n ? classNames\n : {\n ...classNames,\n wrapper: cx(styles.wrap, classNames?.wrapper),\n }) as DrawerProps['classNames']\n }\n extra={\n allowFullscreen && (\n <ActionIcon\n icon={fullscreen ? Minimize2 : Maximize2}\n onClick={() => setFullscreen(!fullscreen)}\n />\n )\n }\n footer={\n hideFooter\n ? null\n : (footer as ReactNode) || (\n <>\n <Button\n color={'default'}\n variant={'filled'}\n onClick={onCancel as any}\n {...cancelButtonProps}\n >\n {cancelText || 'Cancel'}\n </Button>\n <Button\n loading={confirmLoading}\n type=\"primary\"\n onClick={onOk as any}\n {...okButtonProps}\n style={{\n marginInlineStart: 8,\n ...okButtonProps?.style,\n }}\n >\n {okText || 'OK'}\n </Button>\n </>\n )\n }\n styles={\n (typeof customStyles === 'function'\n ? customStyles\n : {\n ...customStyles,\n body: {\n paddingBlock: `16px ${footer ? 0 : '16px'}`,\n paddingInline: paddings?.desktop ?? 16,\n ...customStyles?.body,\n },\n }) as DrawerProps['styles']\n }\n onClose={onCancel as any}\n {...rest}\n >\n {children}\n </Drawer>\n </ConfigProvider>\n );\n\n return (\n <ConfigProvider\n theme={{\n token: {\n colorBgElevated: cssVar.colorBgContainer,\n },\n }}\n >\n <AntModal\n closable\n cancelText={cancelText}\n className={cx(styles.content, className)}\n closeIcon={<Icon icon={X} size={20} />}\n confirmLoading={confirmLoading}\n destroyOnHidden={destroyOnHidden}\n footer={hideFooter ? null : footer}\n mask={{ closable: true }}\n okButtonProps={okButtonProps}\n okText={okText}\n open={open}\n panelRef={panelRef}\n title={title}\n width={width}\n cancelButtonProps={{\n color: 'default',\n variant: 'filled',\n ...cancelButtonProps,\n }}\n classNames={\n typeof classNames === 'function'\n ? classNames\n : {\n ...classNames,\n wrapper: cx(styles.wrap, classNames?.wrapper),\n }\n }\n styles={\n typeof customStyles === 'function'\n ? customStyles\n : {\n ...customStyles,\n body: {\n maxHeight: height,\n overflow: 'hidden auto',\n paddingBlock: `0 ${footer === null ? '16px' : 0}`,\n paddingInline: paddings?.desktop ?? 16,\n ...customStyles?.body,\n },\n }\n }\n onCancel={onCancel}\n onOk={onOk}\n {...rest}\n >\n {children}\n </AntModal>\n </ConfigProvider>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,UAAQ,MACX,EACC,UACA,iBACA,UACA,QAAQ,KACR,WACA,YACA,QAAQ,KACR,UACA,MACA,iBACA,UACA,SAAS,SACT,mBAAmB,MACnB,QACA,QAAQ,cACR,QACA,MACA,YACA,eACA,mBACA,gBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,aAAa,WAAW,SAAS,WAAW;CAClD,IAAI,oBAAoB,QACtB,OACE,oBAAC,gBAAD;EACE,OAAO,EACL,OAAO,EACL,iBAAiB,OAAO,iBAC1B,EACF;EAEA,UAAA,oBAAC,QAAD;GACE,WAAW,GAAG,OAAO,eAAe,SAAS;GAC7C,WAAW,oBAAC,YAAD,EAAY,MAAM,EAAI,CAAA;GAChB;GACjB,QAAQ,aAAa,0CAA0C;GACzD;GACI;GACV,WAAW;GACJ;GACP,YACG,OAAO,eAAe,aACnB,aACA;IACE,GAAG;IACH,SAAS,GAAG,OAAO,MAAM,YAAY,OAAO;GAC9C;GAEN,OACE,mBACE,oBAAC,YAAD;IACE,MAAM,aAAa,YAAY;IAC/B,eAAe,cAAc,CAAC,UAAU;GACzC,CAAA;GAGL,QACE,aACI,OACC,UACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,OAAO;IACP,SAAS;IACT,SAAS;IACT,GAAI;IAEH,UAAA,cAAc;GACT,CAAA,GACR,oBAAC,QAAD;IACE,SAAS;IACT,MAAK;IACL,SAAS;IACT,GAAI;IACJ,OAAO;KACL,mBAAmB;KACnB,GAAG,eAAe;IACpB;IAEC,UAAA,UAAU;GACL,CAAA,CACR,EAAA,CAAA;GAGV,QACG,OAAO,iBAAiB,aACrB,eACA;IACE,GAAG;IACH,MAAM;KACJ,cAAc,QAAQ,SAAS,IAAI;KACnC,eAAe,UAAU,WAAW;KACpC,GAAG,cAAc;IACnB;GACF;GAEN,SAAS;GACT,GAAI;GAEH;EACK,CAAA;CACM,CAAA;CAGpB,OACE,oBAAC,gBAAD;EACE,OAAO,EACL,OAAO,EACL,iBAAiB,OAAO,iBAC1B,EACF;EAEA,UAAA,oBAACC,OAAD;GACE,UAAA;GACY;GACZ,WAAW,GAAG,OAAO,SAAS,SAAS;GACvC,WAAW,oBAAC,MAAD;IAAM,MAAM;IAAG,MAAM;GAAK,CAAA;GACrB;GACC;GACjB,QAAQ,aAAa,OAAO;GAC5B,MAAM,EAAE,UAAU,KAAK;GACR;GACP;GACF;GACI;GACH;GACA;GACP,mBAAmB;IACjB,OAAO;IACP,SAAS;IACT,GAAG;GACL;GACA,YACE,OAAO,eAAe,aAClB,aACA;IACE,GAAG;IACH,SAAS,GAAG,OAAO,MAAM,YAAY,OAAO;GAC9C;GAEN,QACE,OAAO,iBAAiB,aACpB,eACA;IACE,GAAG;IACH,MAAM;KACJ,WAAW;KACX,UAAU;KACV,cAAc,KAAK,WAAW,OAAO,SAAS;KAC9C,eAAe,UAAU,WAAW;KACpC,GAAG,cAAc;IACnB;GACF;GAEI;GACJ;GACN,GAAI;GAEH;EACO,CAAA;CACI,CAAA;AAEpB,CACF;AAEA,QAAM,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalStackItem.mjs","names":[],"sources":["../../src/Modal/ModalStackItem.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport Modal from './Modal';\nimport { ModalProvider } from './ModalProvider';\nimport type { ImperativeModalProps } from './type';\n\nexport type ModalStackItemProps = {\n id: string;\n onClose: (id: string) => void;\n onDestroy: (id: string) => void;\n onUpdate: (id: string, nextProps: Partial<ImperativeModalProps>) => void;\n props: ImperativeModalProps;\n};\n\nconst noop = () => {};\nexport const ModalStackItem = memo(\n ({ id, props, onClose, onUpdate, onDestroy }: ModalStackItemProps) => {\n const { afterClose, afterOpenChange, children, onCancel, open, ...rest } = props;\n const stableAfterClose = useEventCallback(afterClose ?? noop);\n const stableAfterOpenChange = useEventCallback(afterOpenChange ?? noop);\n const stableOnCancel = useEventCallback(onCancel ?? noop);\n const close = useEventCallback(() => onClose(id));\n const setCanDismissByClickOutside = useEventCallback((value: boolean) =>\n onUpdate(id, { mask: { closable: value } }),\n );\n const stableContextValue = useMemo(\n () => ({ close, setCanDismissByClickOutside }),\n [close, setCanDismissByClickOutside],\n );\n\n return (\n <Modal\n {...rest}\n open={open ?? true}\n afterClose={useCallback(() => {\n stableAfterClose?.();\n onDestroy(id);\n }, [stableAfterClose, onDestroy, id])}\n afterOpenChange={useCallback(\n (nextOpen: boolean) => {\n stableAfterOpenChange?.(nextOpen);\n if (!nextOpen) onDestroy(id);\n },\n [stableAfterOpenChange, onDestroy, id],\n )}\n onCancel={useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>) => {\n stableOnCancel?.(e);\n close();\n },\n [stableOnCancel, close],\n )}\n >\n <ModalProvider value={stableContextValue}>{children}</ModalProvider>\n </Modal>\n );\n },\n);\n\nModalStackItem.displayName = 'ModalStackItem';\n"],"mappings":";;;;;;;AAkBA,MAAM,aAAa,CAAC;AACpB,MAAa,iBAAiB,MAC3B,EAAE,IAAI,OAAO,SAAS,UAAU,gBAAqC;CACpE,MAAM,EAAE,YAAY,iBAAiB,UAAU,UAAU,MAAM,GAAG,SAAS;CAC3E,MAAM,mBAAmB,iBAAiB,cAAc,IAAI;CAC5D,MAAM,wBAAwB,iBAAiB,mBAAmB,IAAI;CACtE,MAAM,iBAAiB,iBAAiB,YAAY,IAAI;CACxD,MAAM,QAAQ,uBAAuB,QAAQ,EAAE,CAAC;CAChD,MAAM,8BAA8B,kBAAkB,UACpD,SAAS,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE,CAAC,CAC5C;CACA,MAAM,qBAAqB,eAClB;EAAE;EAAO;CAA4B,IAC5C,CAAC,OAAO,2BAA2B,CACrC;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,YAAY,kBAAkB;GAC5B,mBAAmB;GACnB,UAAU,EAAE;EACd,GAAG;GAAC;GAAkB;GAAW;EAAE,CAAC;EACpC,iBAAiB,aACd,aAAsB;GACrB,wBAAwB,QAAQ;GAChC,IAAI,CAAC,UAAU,UAAU,EAAE;EAC7B,GACA;GAAC;GAAuB;GAAW;EAAE,CACvC;EACA,UAAU,aACP,MAA8E;GAC7E,iBAAiB,CAAC;GAClB,MAAM;EACR,GACA,CAAC,gBAAgB,KAAK,CACxB;
|
|
1
|
+
{"version":3,"file":"ModalStackItem.mjs","names":[],"sources":["../../src/Modal/ModalStackItem.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport Modal from './Modal';\nimport { ModalProvider } from './ModalProvider';\nimport type { ImperativeModalProps } from './type';\n\nexport type ModalStackItemProps = {\n id: string;\n onClose: (id: string) => void;\n onDestroy: (id: string) => void;\n onUpdate: (id: string, nextProps: Partial<ImperativeModalProps>) => void;\n props: ImperativeModalProps;\n};\n\nconst noop = () => {};\nexport const ModalStackItem = memo(\n ({ id, props, onClose, onUpdate, onDestroy }: ModalStackItemProps) => {\n const { afterClose, afterOpenChange, children, onCancel, open, ...rest } = props;\n const stableAfterClose = useEventCallback(afterClose ?? noop);\n const stableAfterOpenChange = useEventCallback(afterOpenChange ?? noop);\n const stableOnCancel = useEventCallback(onCancel ?? noop);\n const close = useEventCallback(() => onClose(id));\n const setCanDismissByClickOutside = useEventCallback((value: boolean) =>\n onUpdate(id, { mask: { closable: value } }),\n );\n const stableContextValue = useMemo(\n () => ({ close, setCanDismissByClickOutside }),\n [close, setCanDismissByClickOutside],\n );\n\n return (\n <Modal\n {...rest}\n open={open ?? true}\n afterClose={useCallback(() => {\n stableAfterClose?.();\n onDestroy(id);\n }, [stableAfterClose, onDestroy, id])}\n afterOpenChange={useCallback(\n (nextOpen: boolean) => {\n stableAfterOpenChange?.(nextOpen);\n if (!nextOpen) onDestroy(id);\n },\n [stableAfterOpenChange, onDestroy, id],\n )}\n onCancel={useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>) => {\n stableOnCancel?.(e);\n close();\n },\n [stableOnCancel, close],\n )}\n >\n <ModalProvider value={stableContextValue}>{children}</ModalProvider>\n </Modal>\n );\n },\n);\n\nModalStackItem.displayName = 'ModalStackItem';\n"],"mappings":";;;;;;;AAkBA,MAAM,aAAa,CAAC;AACpB,MAAa,iBAAiB,MAC3B,EAAE,IAAI,OAAO,SAAS,UAAU,gBAAqC;CACpE,MAAM,EAAE,YAAY,iBAAiB,UAAU,UAAU,MAAM,GAAG,SAAS;CAC3E,MAAM,mBAAmB,iBAAiB,cAAc,IAAI;CAC5D,MAAM,wBAAwB,iBAAiB,mBAAmB,IAAI;CACtE,MAAM,iBAAiB,iBAAiB,YAAY,IAAI;CACxD,MAAM,QAAQ,uBAAuB,QAAQ,EAAE,CAAC;CAChD,MAAM,8BAA8B,kBAAkB,UACpD,SAAS,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE,CAAC,CAC5C;CACA,MAAM,qBAAqB,eAClB;EAAE;EAAO;CAA4B,IAC5C,CAAC,OAAO,2BAA2B,CACrC;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,YAAY,kBAAkB;GAC5B,mBAAmB;GACnB,UAAU,EAAE;EACd,GAAG;GAAC;GAAkB;GAAW;EAAE,CAAC;EACpC,iBAAiB,aACd,aAAsB;GACrB,wBAAwB,QAAQ;GAChC,IAAI,CAAC,UAAU,UAAU,EAAE;EAC7B,GACA;GAAC;GAAuB;GAAW;EAAE,CACvC;EACA,UAAU,aACP,MAA8E;GAC7E,iBAAiB,CAAC;GAClB,MAAM;EACR,GACA,CAAC,gBAAgB,KAAK,CACxB;EAEA,UAAA,oBAAC,eAAD;GAAe,OAAO;GAAqB;EAAwB,CAAA;CAC9D,CAAA;AAEX,CACF;AAEA,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RawModalStackItem.mjs","names":[],"sources":["../../src/Modal/RawModalStackItem.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentType } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { ModalProvider } from './ModalProvider';\nimport type { ModalContextValue, RawModalOptions } from './type';\n\nexport type RawModalStackItemProps = {\n component: ComponentType<any>;\n id: string;\n onClose: (id: string) => void;\n onUpdate: (id: string, nextProps: Record<string, unknown>) => void;\n open: boolean;\n options?: RawModalOptions<PropertyKey, PropertyKey>;\n props: Record<string, unknown>;\n};\n\nexport const RawModalStackItem = memo(\n ({\n component: Component,\n id,\n onClose,\n onUpdate,\n open,\n options,\n props,\n }: RawModalStackItemProps) => {\n const stableOnClose = useEventCallback(onClose);\n const close = useEventCallback(() => stableOnClose(id));\n\n const setCanDismissByClickOutside = useEventCallback((value: boolean) => {\n onUpdate(id, { mask: { closable: value } });\n });\n const contextValue: ModalContextValue = useMemo(\n () => ({ close, setCanDismissByClickOutside }),\n [close, setCanDismissByClickOutside],\n );\n const openKey = options?.openKey ?? 'open';\n const onCloseKey = options?.onCloseKey ?? 'onClose';\n const injectedProps = {\n ...props,\n [onCloseKey]: close,\n [openKey]: open,\n };\n\n return (\n <ModalProvider value={contextValue}>\n <Component {...injectedProps} />\n </ModalProvider>\n );\n },\n);\n\nRawModalStackItem.displayName = 'RawModalStackItem';\n"],"mappings":";;;;;;AAoBA,MAAa,oBAAoB,MAC9B,EACC,WAAW,WACX,IACA,SACA,UACA,MACA,SACA,YAC4B;CAC5B,MAAM,gBAAgB,iBAAiB,OAAO;CAC9C,MAAM,QAAQ,uBAAuB,cAAc,EAAE,CAAC;CAEtD,MAAM,8BAA8B,kBAAkB,UAAmB;EACvE,SAAS,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE,CAAC;CAC5C,CAAC;CACD,MAAM,eAAkC,eAC/B;EAAE;EAAO;CAA4B,IAC5C,CAAC,OAAO,2BAA2B,CACrC;CACA,MAAM,UAAU,SAAS,WAAW;CACpC,MAAM,aAAa,SAAS,cAAc;CAO1C,OACE,oBAAC,eAAD;EAAe,OAAO;
|
|
1
|
+
{"version":3,"file":"RawModalStackItem.mjs","names":[],"sources":["../../src/Modal/RawModalStackItem.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentType } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { ModalProvider } from './ModalProvider';\nimport type { ModalContextValue, RawModalOptions } from './type';\n\nexport type RawModalStackItemProps = {\n component: ComponentType<any>;\n id: string;\n onClose: (id: string) => void;\n onUpdate: (id: string, nextProps: Record<string, unknown>) => void;\n open: boolean;\n options?: RawModalOptions<PropertyKey, PropertyKey>;\n props: Record<string, unknown>;\n};\n\nexport const RawModalStackItem = memo(\n ({\n component: Component,\n id,\n onClose,\n onUpdate,\n open,\n options,\n props,\n }: RawModalStackItemProps) => {\n const stableOnClose = useEventCallback(onClose);\n const close = useEventCallback(() => stableOnClose(id));\n\n const setCanDismissByClickOutside = useEventCallback((value: boolean) => {\n onUpdate(id, { mask: { closable: value } });\n });\n const contextValue: ModalContextValue = useMemo(\n () => ({ close, setCanDismissByClickOutside }),\n [close, setCanDismissByClickOutside],\n );\n const openKey = options?.openKey ?? 'open';\n const onCloseKey = options?.onCloseKey ?? 'onClose';\n const injectedProps = {\n ...props,\n [onCloseKey]: close,\n [openKey]: open,\n };\n\n return (\n <ModalProvider value={contextValue}>\n <Component {...injectedProps} />\n </ModalProvider>\n );\n },\n);\n\nRawModalStackItem.displayName = 'RawModalStackItem';\n"],"mappings":";;;;;;AAoBA,MAAa,oBAAoB,MAC9B,EACC,WAAW,WACX,IACA,SACA,UACA,MACA,SACA,YAC4B;CAC5B,MAAM,gBAAgB,iBAAiB,OAAO;CAC9C,MAAM,QAAQ,uBAAuB,cAAc,EAAE,CAAC;CAEtD,MAAM,8BAA8B,kBAAkB,UAAmB;EACvE,SAAS,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE,CAAC;CAC5C,CAAC;CACD,MAAM,eAAkC,eAC/B;EAAE;EAAO;CAA4B,IAC5C,CAAC,OAAO,2BAA2B,CACrC;CACA,MAAM,UAAU,SAAS,WAAW;CACpC,MAAM,aAAa,SAAS,cAAc;CAO1C,OACE,oBAAC,eAAD;EAAe,OAAO;EACpB,UAAA,oBAAC,WAAD;GAPF,GAAG;IACF,aAAa;IACb,UAAU;EAKsB,CAAA;CAClB,CAAA;AAEnB,CACF;AAEA,kBAAkB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../src/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { ModalStackItem } from './ModalStackItem';\nimport { RawModalStackItem } from './RawModalStackItem';\nimport type {\n ImperativeModalProps,\n ModalInstance,\n RawModalComponent,\n RawModalComponentProps,\n RawModalInstance,\n RawModalKeyOptions,\n RawModalOptions,\n} from './type';\n\ntype ModalStackItemBase = {\n id: string;\n};\n\ntype ModalStackItemModal = ModalStackItemBase & {\n kind: 'modal';\n props: ImperativeModalProps;\n};\n\ntype ModalStackItemRaw = ModalStackItemBase & {\n component: RawModalComponent;\n kind: 'raw';\n open: boolean;\n options?: RawModalOptions<PropertyKey, PropertyKey>;\n props: Record<string, unknown>;\n};\n\ntype TModalStackItem = ModalStackItemModal | ModalStackItemRaw;\n\ntype ModalStackProps = {\n stack: TModalStackItem[];\n};\n\nexport type ModalHostProps = {\n root?: HTMLElement | ShadowRoot | null;\n};\n\nlet modalStack: TModalStackItem[] = [];\nlet modalSeed = 0;\nconst listeners = new Set<() => void>();\nconst rawDestroyTimers = new Map<string, number>();\n\nconst notify = () => {\n listeners.forEach((listener) => listener());\n};\n\nconst subscribe = (listener: () => void) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n};\n\nconst EMPTY_STACK: TModalStackItem[] = [];\nconst getSnapshot = () => modalStack;\nconst getServerSnapshot = () => EMPTY_STACK;\n\nconst ModalPortal = ({\n children,\n root,\n}: {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | null;\n}) => {\n const appElement = useAppElement();\n const container = root ?? appElement ?? document.body;\n\n return createPortal(children, container);\n};\n\nconst updateModal = (id: string, nextProps: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n if (item.kind !== 'modal') return item;\n changed = true;\n return {\n ...item,\n props: { ...item.props, ...nextProps },\n };\n });\n\n if (changed) notify();\n};\n\nconst updateRawProps = (id: string, nextProps: Record<string, unknown>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n if (item.kind !== 'raw') return item;\n changed = true;\n return {\n ...item,\n props: { ...item.props, ...nextProps },\n };\n });\n\n if (changed) notify();\n};\n\nconst setRawOpen = (id: string, open: boolean) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n if (item.kind !== 'raw') return item;\n if (item.open === open) return item;\n changed = true;\n return { ...item, open };\n });\n\n if (open) {\n const timer = rawDestroyTimers.get(id);\n if (timer) {\n clearTimeout(timer);\n rawDestroyTimers.delete(id);\n }\n }\n\n if (changed) notify();\n};\n\nconst closeModal = (id: string) => {\n const target = modalStack.find((item) => item.id === id);\n if (!target) return;\n\n if (target.kind === 'modal') {\n updateModal(id, { open: false });\n return;\n }\n\n setRawOpen(id, false);\n\n const shouldDestroy = target.options?.destroyOnClose ?? true;\n if (!shouldDestroy) return;\n\n const delay = target.options?.destroyDelay ?? 200;\n const existing = rawDestroyTimers.get(id);\n if (existing) clearTimeout(existing);\n const timer = window.setTimeout(() => {\n rawDestroyTimers.delete(id);\n\n destroyModal(id);\n }, delay);\n rawDestroyTimers.set(id, timer);\n};\n\nconst destroyModal = (id: string) => {\n const timer = rawDestroyTimers.get(id);\n if (timer) {\n clearTimeout(timer);\n rawDestroyTimers.delete(id);\n }\n const nextStack = modalStack.filter((item) => item.id !== id);\n if (nextStack.length === modalStack.length) return;\n modalStack = nextStack;\n notify();\n};\n\nconst ModalStack = memo(({ stack }: ModalStackProps) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((item) => {\n if (item.kind === 'modal') {\n return (\n <ModalStackItem\n id={item.id}\n key={item.id}\n props={item.props}\n onClose={closeModal}\n onDestroy={destroyModal}\n onUpdate={updateModal}\n />\n );\n }\n\n return (\n <RawModalStackItem\n component={item.component}\n id={item.id}\n key={item.id}\n open={item.open}\n options={item.options}\n props={item.props}\n onClose={closeModal}\n onUpdate={updateRawProps}\n />\n );\n });\n});\n\nModalStack.displayName = 'ModalStack';\n\nexport const ModalHost = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n // Enforce singleton per portal root (dev-only).\n const scope = root ?? document.body;\n return registerDevSingleton('ModalHost', scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortal root={root}>\n <ModalStack stack={stack} />\n </ModalPortal>\n );\n};\n\nexport const createModal = (props: ImperativeModalProps): ModalInstance => {\n const id = `modal-${Date.now()}-${modalSeed++}`;\n modalStack = [\n ...modalStack,\n { id, kind: 'modal', props: { ...props, open: props.open ?? true } },\n ];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { mask: { closable: value } }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n};\n\nexport function createRawModal<P extends RawModalComponentProps>(\n component: RawModalComponent<P>,\n props: Omit<P, 'open' | 'onClose'>,\n options?: RawModalOptions,\n): RawModalInstance<P>;\n\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n component: RawModalComponent<P>,\n props: Omit<P, OpenKey | CloseKey>,\n options: RawModalKeyOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey>;\n\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n component: RawModalComponent<P>,\n props: Omit<P, OpenKey | CloseKey>,\n options?: RawModalOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey> {\n const id = `modal-${Date.now()}-${modalSeed++}`;\n modalStack = [\n ...modalStack,\n {\n component,\n id,\n kind: 'raw',\n open: true,\n options,\n props: props as Record<string, unknown>,\n },\n ];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateRawProps(id, { mask: { closable: value } }),\n update: (nextProps) => updateRawProps(id, nextProps as Record<string, unknown>),\n };\n}\n"],"mappings":";;;;;;;;;;AAiDA,IAAI,aAAgC,CAAC;AACrC,IAAI,YAAY;AAChB,MAAM,4BAAY,IAAI,IAAgB;AACtC,MAAM,mCAAmB,IAAI,IAAoB;AAEjD,MAAM,eAAe;CACnB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC5C;AAEA,MAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,MAAM,cAAiC,CAAC;AACxC,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAEhC,MAAM,eAAe,EACnB,UACA,WAII;CACJ,MAAM,aAAa,cAAc;CAGjC,OAAO,aAAa,UAFF,QAAQ,cAAc,SAAS,IAEV;AACzC;AAEA,MAAM,eAAe,IAAY,cAA6C;CAC5E,IAAI,UAAU;CACd,aAAa,WAAW,KAAK,SAAS;EACpC,IAAI,KAAK,OAAO,IAAI,OAAO;EAC3B,IAAI,KAAK,SAAS,SAAS,OAAO;EAClC,UAAU;EACV,OAAO;GACL,GAAG;GACH,OAAO;IAAE,GAAG,KAAK;IAAO,GAAG;GAAU;EACvC;CACF,CAAC;CAED,IAAI,SAAS,OAAO;AACtB;AAEA,MAAM,kBAAkB,IAAY,cAAuC;CACzE,IAAI,UAAU;CACd,aAAa,WAAW,KAAK,SAAS;EACpC,IAAI,KAAK,OAAO,IAAI,OAAO;EAC3B,IAAI,KAAK,SAAS,OAAO,OAAO;EAChC,UAAU;EACV,OAAO;GACL,GAAG;GACH,OAAO;IAAE,GAAG,KAAK;IAAO,GAAG;GAAU;EACvC;CACF,CAAC;CAED,IAAI,SAAS,OAAO;AACtB;AAEA,MAAM,cAAc,IAAY,SAAkB;CAChD,IAAI,UAAU;CACd,aAAa,WAAW,KAAK,SAAS;EACpC,IAAI,KAAK,OAAO,IAAI,OAAO;EAC3B,IAAI,KAAK,SAAS,OAAO,OAAO;EAChC,IAAI,KAAK,SAAS,MAAM,OAAO;EAC/B,UAAU;EACV,OAAO;GAAE,GAAG;GAAM;EAAK;CACzB,CAAC;CAED,IAAI,MAAM;EACR,MAAM,QAAQ,iBAAiB,IAAI,EAAE;EACrC,IAAI,OAAO;GACT,aAAa,KAAK;GAClB,iBAAiB,OAAO,EAAE;EAC5B;CACF;CAEA,IAAI,SAAS,OAAO;AACtB;AAEA,MAAM,cAAc,OAAe;CACjC,MAAM,SAAS,WAAW,MAAM,SAAS,KAAK,OAAO,EAAE;CACvD,IAAI,CAAC,QAAQ;CAEb,IAAI,OAAO,SAAS,SAAS;EAC3B,YAAY,IAAI,EAAE,MAAM,MAAM,CAAC;EAC/B;CACF;CAEA,WAAW,IAAI,KAAK;CAGpB,IAAI,EADkB,OAAO,SAAS,kBAAkB,OACpC;CAEpB,MAAM,QAAQ,OAAO,SAAS,gBAAgB;CAC9C,MAAM,WAAW,iBAAiB,IAAI,EAAE;CACxC,IAAI,UAAU,aAAa,QAAQ;CACnC,MAAM,QAAQ,OAAO,iBAAiB;EACpC,iBAAiB,OAAO,EAAE;EAE1B,aAAa,EAAE;CACjB,GAAG,KAAK;CACR,iBAAiB,IAAI,IAAI,KAAK;AAChC;AAEA,MAAM,gBAAgB,OAAe;CACnC,MAAM,QAAQ,iBAAiB,IAAI,EAAE;CACrC,IAAI,OAAO;EACT,aAAa,KAAK;EAClB,iBAAiB,OAAO,EAAE;CAC5B;CACA,MAAM,YAAY,WAAW,QAAQ,SAAS,KAAK,OAAO,EAAE;CAC5D,IAAI,UAAU,WAAW,WAAW,QAAQ;CAC5C,aAAa;CACb,OAAO;AACT;AAEA,MAAM,aAAa,MAAM,EAAE,YAA6B;CAEtD,IAAI,CADa,YACL,GAAG,OAAO;CACtB,OAAO,MAAM,KAAK,SAAS;EACzB,IAAI,KAAK,SAAS,SAChB,OACE,oBAAC,gBAAD;GACE,IAAI,KAAK;GAET,OAAO,KAAK;GACZ,SAAS;GACT,WAAW;GACX,UAAU;EACX,GALM,KAAK,EAKX;EAIL,OACE,oBAAC,mBAAD;GACE,WAAW,KAAK;GAChB,IAAI,KAAK;GAET,MAAM,KAAK;GACX,SAAS,KAAK;GACd,OAAO,KAAK;GACZ,SAAS;GACT,UAAU;EACX,GANM,KAAK,EAMX;CAEL,CAAC;AACH,CAAC;AAED,WAAW,cAAc;AAEzB,MAAa,aAAa,EAAE,WAA2B;CACrD,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAC5E,MAAM,WAAW,YAAY;CAE7B,gBAAgB;EACd,IAAI,CAAC,UAAU;EAGf,OAAO,qBAAqB,aADd,QAAQ,SAAS,IACe;CAChD,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,IAAI,CAAC,UAAU,OAAO;CACtB,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,aAAD;EAAmB;YACjB,oBAAC,YAAD,EAAmB,MAAQ,CAAA;CAChB,CAAA;AAEjB;AAEA,MAAa,eAAe,UAA+C;CACzE,MAAM,KAAK,SAAS,KAAK,IAAI,EAAE,GAAG;CAClC,aAAa,CACX,GAAG,YACH;EAAE;EAAI,MAAM;EAAS,OAAO;GAAE,GAAG;GAAO,MAAM,MAAM,QAAQ;EAAK;CAAE,CACrE;CACA,OAAO;CAEP,OAAO;EACL,aAAa,WAAW,EAAE;EAC1B,eAAe,aAAa,EAAE;EAC9B,8BAA8B,UAAU,YAAY,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE,CAAC;EACrF,SAAS,cAAc,YAAY,IAAI,SAAS;CAClD;AACF;AAcA,SAAgB,eACd,WACA,OACA,SACwC;CACxC,MAAM,KAAK,SAAS,KAAK,IAAI,EAAE,GAAG;CAClC,aAAa,CACX,GAAG,YACH;EACE;EACA;EACA,MAAM;EACN,MAAM;EACN;EACO;CACT,CACF;CACA,OAAO;CAEP,OAAO;EACL,aAAa,WAAW,EAAE;EAC1B,eAAe,aAAa,EAAE;EAC9B,8BAA8B,UAAU,eAAe,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE,CAAC;EACxF,SAAS,cAAc,eAAe,IAAI,SAAoC;CAChF;AACF"}
|
|
1
|
+
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../src/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { ModalStackItem } from './ModalStackItem';\nimport { RawModalStackItem } from './RawModalStackItem';\nimport type {\n ImperativeModalProps,\n ModalInstance,\n RawModalComponent,\n RawModalComponentProps,\n RawModalInstance,\n RawModalKeyOptions,\n RawModalOptions,\n} from './type';\n\ntype ModalStackItemBase = {\n id: string;\n};\n\ntype ModalStackItemModal = ModalStackItemBase & {\n kind: 'modal';\n props: ImperativeModalProps;\n};\n\ntype ModalStackItemRaw = ModalStackItemBase & {\n component: RawModalComponent;\n kind: 'raw';\n open: boolean;\n options?: RawModalOptions<PropertyKey, PropertyKey>;\n props: Record<string, unknown>;\n};\n\ntype TModalStackItem = ModalStackItemModal | ModalStackItemRaw;\n\ntype ModalStackProps = {\n stack: TModalStackItem[];\n};\n\nexport type ModalHostProps = {\n root?: HTMLElement | ShadowRoot | null;\n};\n\nlet modalStack: TModalStackItem[] = [];\nlet modalSeed = 0;\nconst listeners = new Set<() => void>();\nconst rawDestroyTimers = new Map<string, number>();\n\nconst notify = () => {\n listeners.forEach((listener) => listener());\n};\n\nconst subscribe = (listener: () => void) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n};\n\nconst EMPTY_STACK: TModalStackItem[] = [];\nconst getSnapshot = () => modalStack;\nconst getServerSnapshot = () => EMPTY_STACK;\n\nconst ModalPortal = ({\n children,\n root,\n}: {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | null;\n}) => {\n const appElement = useAppElement();\n const container = root ?? appElement ?? document.body;\n\n return createPortal(children, container);\n};\n\nconst updateModal = (id: string, nextProps: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n if (item.kind !== 'modal') return item;\n changed = true;\n return {\n ...item,\n props: { ...item.props, ...nextProps },\n };\n });\n\n if (changed) notify();\n};\n\nconst updateRawProps = (id: string, nextProps: Record<string, unknown>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n if (item.kind !== 'raw') return item;\n changed = true;\n return {\n ...item,\n props: { ...item.props, ...nextProps },\n };\n });\n\n if (changed) notify();\n};\n\nconst setRawOpen = (id: string, open: boolean) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n if (item.kind !== 'raw') return item;\n if (item.open === open) return item;\n changed = true;\n return { ...item, open };\n });\n\n if (open) {\n const timer = rawDestroyTimers.get(id);\n if (timer) {\n clearTimeout(timer);\n rawDestroyTimers.delete(id);\n }\n }\n\n if (changed) notify();\n};\n\nconst closeModal = (id: string) => {\n const target = modalStack.find((item) => item.id === id);\n if (!target) return;\n\n if (target.kind === 'modal') {\n updateModal(id, { open: false });\n return;\n }\n\n setRawOpen(id, false);\n\n const shouldDestroy = target.options?.destroyOnClose ?? true;\n if (!shouldDestroy) return;\n\n const delay = target.options?.destroyDelay ?? 200;\n const existing = rawDestroyTimers.get(id);\n if (existing) clearTimeout(existing);\n const timer = window.setTimeout(() => {\n rawDestroyTimers.delete(id);\n\n destroyModal(id);\n }, delay);\n rawDestroyTimers.set(id, timer);\n};\n\nconst destroyModal = (id: string) => {\n const timer = rawDestroyTimers.get(id);\n if (timer) {\n clearTimeout(timer);\n rawDestroyTimers.delete(id);\n }\n const nextStack = modalStack.filter((item) => item.id !== id);\n if (nextStack.length === modalStack.length) return;\n modalStack = nextStack;\n notify();\n};\n\nconst ModalStack = memo(({ stack }: ModalStackProps) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((item) => {\n if (item.kind === 'modal') {\n return (\n <ModalStackItem\n id={item.id}\n key={item.id}\n props={item.props}\n onClose={closeModal}\n onDestroy={destroyModal}\n onUpdate={updateModal}\n />\n );\n }\n\n return (\n <RawModalStackItem\n component={item.component}\n id={item.id}\n key={item.id}\n open={item.open}\n options={item.options}\n props={item.props}\n onClose={closeModal}\n onUpdate={updateRawProps}\n />\n );\n });\n});\n\nModalStack.displayName = 'ModalStack';\n\nexport const ModalHost = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n // Enforce singleton per portal root (dev-only).\n const scope = root ?? document.body;\n return registerDevSingleton('ModalHost', scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortal root={root}>\n <ModalStack stack={stack} />\n </ModalPortal>\n );\n};\n\nexport const createModal = (props: ImperativeModalProps): ModalInstance => {\n const id = `modal-${Date.now()}-${modalSeed++}`;\n modalStack = [\n ...modalStack,\n { id, kind: 'modal', props: { ...props, open: props.open ?? true } },\n ];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { mask: { closable: value } }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n};\n\nexport function createRawModal<P extends RawModalComponentProps>(\n component: RawModalComponent<P>,\n props: Omit<P, 'open' | 'onClose'>,\n options?: RawModalOptions,\n): RawModalInstance<P>;\n\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n component: RawModalComponent<P>,\n props: Omit<P, OpenKey | CloseKey>,\n options: RawModalKeyOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey>;\n\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n component: RawModalComponent<P>,\n props: Omit<P, OpenKey | CloseKey>,\n options?: RawModalOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey> {\n const id = `modal-${Date.now()}-${modalSeed++}`;\n modalStack = [\n ...modalStack,\n {\n component,\n id,\n kind: 'raw',\n open: true,\n options,\n props: props as Record<string, unknown>,\n },\n ];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateRawProps(id, { mask: { closable: value } }),\n update: (nextProps) => updateRawProps(id, nextProps as Record<string, unknown>),\n };\n}\n"],"mappings":"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"}
|
package/es/Modal/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const HEADER_HEIGHT = 56;\nexport const FOOTER_HEIGHT = 68;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n content: css`\n [class*='ant-modal-footer'] {\n margin: 0;\n padding: 16px;\n }\n\n [class*='ant-modal-header'] {\n display: flex;\n gap: 4px;\n align-items: center;\n justify-content: center;\n\n height: 56px;\n margin-block-end: 0;\n padding: 16px;\n }\n\n [class*='ant-modal-container'] {\n overflow: hidden;\n padding: 0;\n border: 1px solid ${cssVar.colorSplit};\n border-radius: ${cssVar.borderRadiusLG};\n }\n `,\n drawerContent: css`\n [class*='ant-drawer-close'] {\n padding: 0;\n }\n\n [class*='ant-drawer-header'] {\n flex: none;\n height: ${HEADER_HEIGHT}px !important;\n padding-block: 0;\n padding-inline: 16px;\n }\n\n [class*='ant-drawer-footer'] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n padding: 16px;\n border: none;\n }\n `,\n wrap: css`\n overflow: hidden auto;\n `,\n };\n});\n"],"mappings":";AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;4BAoBY,OAAO,WAAW;yBACrB,OAAO,eAAe;;;EAG3C,eAAe,GAAG;;;;;;;
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const HEADER_HEIGHT = 56;\nexport const FOOTER_HEIGHT = 68;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n content: css`\n [class*='ant-modal-footer'] {\n margin: 0;\n padding: 16px;\n }\n\n [class*='ant-modal-header'] {\n display: flex;\n gap: 4px;\n align-items: center;\n justify-content: center;\n\n height: 56px;\n margin-block-end: 0;\n padding: 16px;\n }\n\n [class*='ant-modal-container'] {\n overflow: hidden;\n padding: 0;\n border: 1px solid ${cssVar.colorSplit};\n border-radius: ${cssVar.borderRadiusLG};\n }\n `,\n drawerContent: css`\n [class*='ant-drawer-close'] {\n padding: 0;\n }\n\n [class*='ant-drawer-header'] {\n flex: none;\n height: ${HEADER_HEIGHT}px !important;\n padding-block: 0;\n padding-inline: 16px;\n }\n\n [class*='ant-drawer-footer'] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n padding: 16px;\n border: none;\n }\n `,\n wrap: css`\n overflow: hidden auto;\n `,\n };\n});\n"],"mappings":";AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;4BAoBY,OAAO,WAAW;yBACrB,OAAO,eAAe;;;EAG3C,eAAe,GAAG;;;;;;;kBAOU,GAAA;;;;;;;;;;;;;;EAc5B,MAAM,GAAG;;;CAGX;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeuralNetworkLoading.mjs","names":[],"sources":["../../src/NeuralNetworkLoading/NeuralNetworkLoading.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, keyframes } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport type { NeuralNetworkLoadingProps } from './type';\n\nconst pulseAnim = keyframes`\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n`;\n\nconst flowAnim = keyframes`\n 0% { transform: translateX(0); opacity: 0.5; }\n 50% { opacity: 1; }\n 100% { transform: translateX(var(--flow-distance)); opacity: 0.5; }\n`;\n\nconst rotateAnim = keyframes`\n 100% { transform: rotate(360deg); }\n`;\n\nconst scaleAnim = keyframes`\n 0%, 100% { transform: scale(0.8); opacity: 0.5; }\n 50% { transform: scale(1); opacity: 1; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n center: css`\n fill: ${cssVar.colorTextSecondary};\n animation: ${scaleAnim} 2s infinite;\n `,\n connection: css`\n opacity: 0.3;\n stroke: ${cssVar.colorTextSecondary};\n stroke-width: 0.5;\n `,\n container: css`\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n node: css`\n fill: ${cssVar.colorTextSecondary};\n animation: ${pulseAnim} 2s infinite;\n `,\n particle: css`\n fill: ${cssVar.colorTextSecondary};\n animation: ${flowAnim} 2s infinite;\n `,\n ring: css`\n transform-origin: center;\n\n fill: none;\n stroke: ${cssVar.colorFill};\n stroke-dasharray: 0 8;\n stroke-width: 1;\n\n animation: ${rotateAnim} 20s infinite linear;\n `,\n svg: css`\n width: 100%;\n height: 100%;\n `,\n}));\n\nconst LAYER_COUNT = 3;\nconst NODE_COUNT = 3;\n\nconst NeuralNetworkLoading = memo<NeuralNetworkLoadingProps>(({ size = 16, className, style }) => {\n const nodes = [];\n for (let layerIndex = 0; layerIndex < LAYER_COUNT; layerIndex++) {\n for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n const x = 25 + layerIndex * 25;\n const y = 25 + nodeIndex * 25;\n const delay = (layerIndex * NODE_COUNT + nodeIndex) * 0.2;\n nodes.push(\n <circle\n className={styles.node}\n cx={x}\n cy={y}\n key={`node-${layerIndex}-${nodeIndex}`}\n r=\"3\"\n style={{ animationDelay: `${delay}s` }}\n />,\n );\n }\n }\n\n const connections = [];\n for (let layerIndex = 0; layerIndex < LAYER_COUNT - 1; layerIndex++) {\n for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n const x1 = 25 + layerIndex * 25;\n const y1 = 25 + nodeIndex * 25;\n for (let targetIndex = 0; targetIndex < NODE_COUNT; targetIndex++) {\n const x2 = 25 + (layerIndex + 1) * 25;\n const y2 = 25 + targetIndex * 25;\n connections.push(\n <line\n className={styles.connection}\n key={`connection-${layerIndex}-${nodeIndex}-${targetIndex}`}\n x1={x1}\n x2={x2}\n y1={y1}\n y2={y2}\n />,\n );\n }\n }\n }\n\n const particles = [0, 1, 2].map((index) => (\n <circle\n className={styles.particle}\n cx={25}\n cy={50}\n key={`particle-${index}`}\n r=\"1.5\"\n style={\n {\n '--flow-distance': '50px',\n 'animationDelay': `${index * 0.6}s`,\n } as CSSProperties\n }\n />\n ));\n\n return (\n <div\n className={[styles.container, className].filter(Boolean).join(' ')}\n style={{ height: size, width: size, ...style }}\n >\n <svg className={styles.svg} viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n {connections}\n {nodes}\n {particles}\n <rect className={styles.center} height=\"6\" width=\"6\" x=\"47\" y=\"47\" />\n <circle className={styles.ring} cx=\"50\" cy=\"50\" r=\"40\" />\n </svg>\n </div>\n );\n});\n\nNeuralNetworkLoading.displayName = 'NeuralNetworkLoading';\n\nexport default NeuralNetworkLoading;\n"],"mappings":";;;;;AAOA,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,WAAW,SAAS;;;;;AAM1B,MAAM,aAAa,SAAS;;;AAI5B,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,QAAQ,GAAG;YACD,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,YAAY,GAAG;;cAEH,OAAO,mBAAmB;;;CAGtC,WAAW,GAAG;;;;;CAKd,MAAM,GAAG;YACC,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,UAAU,GAAG;YACH,OAAO,mBAAmB;iBACrB,SAAS;;CAExB,MAAM,GAAG;;;;cAIG,OAAO,UAAU;;;;iBAId,WAAW;;CAE1B,KAAK,GAAG;;;;AAIV,EAAE;AAEF,MAAM,cAAc;AACpB,MAAM,aAAa;AAEnB,MAAM,uBAAuB,MAAiC,EAAE,OAAO,IAAI,WAAW,YAAY;CAChG,MAAM,QAAQ,CAAC;CACf,KAAK,IAAI,aAAa,GAAG,aAAa,aAAa,cACjD,KAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,IAAI,KAAK,aAAa;EAC5B,MAAM,IAAI,KAAK,YAAY;EAC3B,MAAM,SAAS,aAAa,aAAa,aAAa;EACtD,MAAM,KACJ,oBAAC,UAAD;GACE,WAAW,OAAO;GAClB,IAAI;GACJ,IAAI;GAEJ,GAAE;GACF,OAAO,EAAE,gBAAgB,GAAG,MAAM,GAAG;EACtC,GAHM,QAAQ,WAAW,GAAG,WAG5B,CACH;CACF;CAGF,MAAM,cAAc,CAAC;CACrB,KAAK,IAAI,aAAa,GAAG,aAAa,cAAc,GAAG,cACrD,KAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,KAAK,KAAK,aAAa;EAC7B,MAAM,KAAK,KAAK,YAAY;EAC5B,KAAK,IAAI,cAAc,GAAG,cAAc,YAAY,eAAe;GACjE,MAAM,KAAK,MAAM,aAAa,KAAK;GACnC,MAAM,KAAK,KAAK,cAAc;GAC9B,YAAY,KACV,oBAAC,QAAD;IACE,WAAW,OAAO;IAEd;IACA;IACA;IACA;GACL,GALM,cAAc,WAAW,GAAG,UAAU,GAAG,aAK/C,CACH;EACF;CACF;CAGF,MAAM,YAAY;EAAC;EAAG;EAAG;CAAC,CAAC,CAAC,KAAK,UAC/B,oBAAC,UAAD;EACE,WAAW,OAAO;EAClB,IAAI;EACJ,IAAI;EAEJ,GAAE;EACF,OACE;GACE,mBAAmB;GACnB,kBAAkB,GAAG,QAAQ,GAAI;EACnC;CAEH,GARM,YAAY,OAQlB,CACF;CAED,OACE,oBAAC,OAAD;EACE,WAAW,CAAC,OAAO,WAAW,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACjE,OAAO;GAAE,QAAQ;GAAM,OAAO;GAAM,GAAG;EAAM;
|
|
1
|
+
{"version":3,"file":"NeuralNetworkLoading.mjs","names":[],"sources":["../../src/NeuralNetworkLoading/NeuralNetworkLoading.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, keyframes } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport type { NeuralNetworkLoadingProps } from './type';\n\nconst pulseAnim = keyframes`\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n`;\n\nconst flowAnim = keyframes`\n 0% { transform: translateX(0); opacity: 0.5; }\n 50% { opacity: 1; }\n 100% { transform: translateX(var(--flow-distance)); opacity: 0.5; }\n`;\n\nconst rotateAnim = keyframes`\n 100% { transform: rotate(360deg); }\n`;\n\nconst scaleAnim = keyframes`\n 0%, 100% { transform: scale(0.8); opacity: 0.5; }\n 50% { transform: scale(1); opacity: 1; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n center: css`\n fill: ${cssVar.colorTextSecondary};\n animation: ${scaleAnim} 2s infinite;\n `,\n connection: css`\n opacity: 0.3;\n stroke: ${cssVar.colorTextSecondary};\n stroke-width: 0.5;\n `,\n container: css`\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n node: css`\n fill: ${cssVar.colorTextSecondary};\n animation: ${pulseAnim} 2s infinite;\n `,\n particle: css`\n fill: ${cssVar.colorTextSecondary};\n animation: ${flowAnim} 2s infinite;\n `,\n ring: css`\n transform-origin: center;\n\n fill: none;\n stroke: ${cssVar.colorFill};\n stroke-dasharray: 0 8;\n stroke-width: 1;\n\n animation: ${rotateAnim} 20s infinite linear;\n `,\n svg: css`\n width: 100%;\n height: 100%;\n `,\n}));\n\nconst LAYER_COUNT = 3;\nconst NODE_COUNT = 3;\n\nconst NeuralNetworkLoading = memo<NeuralNetworkLoadingProps>(({ size = 16, className, style }) => {\n const nodes = [];\n for (let layerIndex = 0; layerIndex < LAYER_COUNT; layerIndex++) {\n for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n const x = 25 + layerIndex * 25;\n const y = 25 + nodeIndex * 25;\n const delay = (layerIndex * NODE_COUNT + nodeIndex) * 0.2;\n nodes.push(\n <circle\n className={styles.node}\n cx={x}\n cy={y}\n key={`node-${layerIndex}-${nodeIndex}`}\n r=\"3\"\n style={{ animationDelay: `${delay}s` }}\n />,\n );\n }\n }\n\n const connections = [];\n for (let layerIndex = 0; layerIndex < LAYER_COUNT - 1; layerIndex++) {\n for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n const x1 = 25 + layerIndex * 25;\n const y1 = 25 + nodeIndex * 25;\n for (let targetIndex = 0; targetIndex < NODE_COUNT; targetIndex++) {\n const x2 = 25 + (layerIndex + 1) * 25;\n const y2 = 25 + targetIndex * 25;\n connections.push(\n <line\n className={styles.connection}\n key={`connection-${layerIndex}-${nodeIndex}-${targetIndex}`}\n x1={x1}\n x2={x2}\n y1={y1}\n y2={y2}\n />,\n );\n }\n }\n }\n\n const particles = [0, 1, 2].map((index) => (\n <circle\n className={styles.particle}\n cx={25}\n cy={50}\n key={`particle-${index}`}\n r=\"1.5\"\n style={\n {\n '--flow-distance': '50px',\n 'animationDelay': `${index * 0.6}s`,\n } as CSSProperties\n }\n />\n ));\n\n return (\n <div\n className={[styles.container, className].filter(Boolean).join(' ')}\n style={{ height: size, width: size, ...style }}\n >\n <svg className={styles.svg} viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n {connections}\n {nodes}\n {particles}\n <rect className={styles.center} height=\"6\" width=\"6\" x=\"47\" y=\"47\" />\n <circle className={styles.ring} cx=\"50\" cy=\"50\" r=\"40\" />\n </svg>\n </div>\n );\n});\n\nNeuralNetworkLoading.displayName = 'NeuralNetworkLoading';\n\nexport default NeuralNetworkLoading;\n"],"mappings":";;;;;AAOA,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,WAAW,SAAS;;;;;AAM1B,MAAM,aAAa,SAAS;;;AAI5B,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,QAAQ,GAAG;YACD,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,YAAY,GAAG;;cAEH,OAAO,mBAAmB;;;CAGtC,WAAW,GAAG;;;;;CAKd,MAAM,GAAG;YACC,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,UAAU,GAAG;YACH,OAAO,mBAAmB;iBACrB,SAAS;;CAExB,MAAM,GAAG;;;;cAIG,OAAO,UAAU;;;;iBAId,WAAW;;CAE1B,KAAK,GAAG;;;;AAIV,EAAE;AAEF,MAAM,cAAc;AACpB,MAAM,aAAa;AAEnB,MAAM,uBAAuB,MAAiC,EAAE,OAAO,IAAI,WAAW,YAAY;CAChG,MAAM,QAAQ,CAAC;CACf,KAAK,IAAI,aAAa,GAAG,aAAa,aAAa,cACjD,KAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,IAAI,KAAK,aAAa;EAC5B,MAAM,IAAI,KAAK,YAAY;EAC3B,MAAM,SAAS,aAAa,aAAa,aAAa;EACtD,MAAM,KACJ,oBAAC,UAAD;GACE,WAAW,OAAO;GAClB,IAAI;GACJ,IAAI;GAEJ,GAAE;GACF,OAAO,EAAE,gBAAgB,GAAG,MAAM,GAAG;EACtC,GAHM,QAAQ,WAAW,GAAG,WAG5B,CACH;CACF;CAGF,MAAM,cAAc,CAAC;CACrB,KAAK,IAAI,aAAa,GAAG,aAAa,cAAc,GAAG,cACrD,KAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,KAAK,KAAK,aAAa;EAC7B,MAAM,KAAK,KAAK,YAAY;EAC5B,KAAK,IAAI,cAAc,GAAG,cAAc,YAAY,eAAe;GACjE,MAAM,KAAK,MAAM,aAAa,KAAK;GACnC,MAAM,KAAK,KAAK,cAAc;GAC9B,YAAY,KACV,oBAAC,QAAD;IACE,WAAW,OAAO;IAEd;IACA;IACA;IACA;GACL,GALM,cAAc,WAAW,GAAG,UAAU,GAAG,aAK/C,CACH;EACF;CACF;CAGF,MAAM,YAAY;EAAC;EAAG;EAAG;CAAC,CAAC,CAAC,KAAK,UAC/B,oBAAC,UAAD;EACE,WAAW,OAAO;EAClB,IAAI;EACJ,IAAI;EAEJ,GAAE;EACF,OACE;GACE,mBAAmB;GACnB,kBAAkB,GAAG,QAAQ,GAAI;EACnC;CAEH,GARM,YAAY,OAQlB,CACF;CAED,OACE,oBAAC,OAAD;EACE,WAAW,CAAC,OAAO,WAAW,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACjE,OAAO;GAAE,QAAQ;GAAM,OAAO;GAAM,GAAG;EAAM;EAE7C,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAK,SAAQ;GAAc,OAAM;GAAxD,UAAA;IACG;IACA;IACA;IACD,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAQ,QAAO;KAAI,OAAM;KAAI,GAAE;KAAK,GAAE;IAAM,CAAA;IACpE,oBAAC,UAAD;KAAQ,WAAW,OAAO;KAAM,IAAG;KAAK,IAAG;KAAK,GAAE;IAAM,CAAA;GACrD;;CACF,CAAA;AAET,CAAC;AAED,qBAAqB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n className,\n children,\n orientation = 'vertical',\n hideScrollBar = false,\n size = 16,\n offset = 8,\n visibility = 'auto',\n isEnabled = true,\n onVisibilityChange,\n style,\n ref,\n ...rest\n}) => {\n // Convert size prop to CSS variable\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--scroll-shadow-size': `${size}%`,\n }),\n [size],\n );\n const domRef = useRef<HTMLDivElement>(null);\n\n const onVisibilityChangeEvent = useEventCallback<\n NonNullable<ScrollShadowProps['onVisibilityChange']>\n >((visibility) => {\n onVisibilityChange?.(visibility);\n });\n // 使用滚动检测钩子\n const scrollState = useScrollOverflow({\n domRef,\n isEnabled: isEnabled && visibility === 'auto',\n offset,\n onVisibilityChange: onVisibilityChangeEvent,\n orientation,\n updateDeps: [children],\n });\n\n // 决定最终的滚动状态\n const finalScrollState = useMemo(() => {\n if (visibility === 'always') {\n return {\n bottom: true,\n left: true,\n right: true,\n top: true,\n };\n }\n\n if (visibility === 'never') {\n return {\n bottom: false,\n left: false,\n right: false,\n top: false,\n };\n }\n\n return scrollState;\n }, [visibility, scrollState]);\n\n // 计算数据属性\n const dataAttributes = useMemo(() => {\n const attributes: Record<string, boolean | string> = {\n 'data-orientation': orientation,\n };\n\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) {\n attributes['data-top-bottom-scroll'] = true;\n } else if (finalScrollState.top) {\n attributes['data-top-scroll'] = true;\n } else if (finalScrollState.bottom) {\n attributes['data-bottom-scroll'] = true;\n }\n } else {\n if (finalScrollState.left && finalScrollState.right) {\n attributes['data-left-right-scroll'] = true;\n } else if (finalScrollState.left) {\n attributes['data-left-scroll'] = true;\n } else if (finalScrollState.right) {\n attributes['data-right-scroll'] = true;\n }\n }\n\n return attributes;\n }, [orientation, finalScrollState]);\n\n // 计算滚动位置变体\n const scrollPosition = useMemo(() => {\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n if (finalScrollState.top) return 'top';\n if (finalScrollState.bottom) return 'bottom';\n } else {\n if (finalScrollState.left && finalScrollState.right) return 'left-right';\n if (finalScrollState.left) return 'left';\n if (finalScrollState.right) return 'right';\n }\n return 'none';\n }, [orientation, finalScrollState]);\n\n return (\n <Flexbox\n className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB;
|
|
1
|
+
{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n className,\n children,\n orientation = 'vertical',\n hideScrollBar = false,\n size = 16,\n offset = 8,\n visibility = 'auto',\n isEnabled = true,\n onVisibilityChange,\n style,\n ref,\n ...rest\n}) => {\n // Convert size prop to CSS variable\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--scroll-shadow-size': `${size}%`,\n }),\n [size],\n );\n const domRef = useRef<HTMLDivElement>(null);\n\n const onVisibilityChangeEvent = useEventCallback<\n NonNullable<ScrollShadowProps['onVisibilityChange']>\n >((visibility) => {\n onVisibilityChange?.(visibility);\n });\n // 使用滚动检测钩子\n const scrollState = useScrollOverflow({\n domRef,\n isEnabled: isEnabled && visibility === 'auto',\n offset,\n onVisibilityChange: onVisibilityChangeEvent,\n orientation,\n updateDeps: [children],\n });\n\n // 决定最终的滚动状态\n const finalScrollState = useMemo(() => {\n if (visibility === 'always') {\n return {\n bottom: true,\n left: true,\n right: true,\n top: true,\n };\n }\n\n if (visibility === 'never') {\n return {\n bottom: false,\n left: false,\n right: false,\n top: false,\n };\n }\n\n return scrollState;\n }, [visibility, scrollState]);\n\n // 计算数据属性\n const dataAttributes = useMemo(() => {\n const attributes: Record<string, boolean | string> = {\n 'data-orientation': orientation,\n };\n\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) {\n attributes['data-top-bottom-scroll'] = true;\n } else if (finalScrollState.top) {\n attributes['data-top-scroll'] = true;\n } else if (finalScrollState.bottom) {\n attributes['data-bottom-scroll'] = true;\n }\n } else {\n if (finalScrollState.left && finalScrollState.right) {\n attributes['data-left-right-scroll'] = true;\n } else if (finalScrollState.left) {\n attributes['data-left-scroll'] = true;\n } else if (finalScrollState.right) {\n attributes['data-right-scroll'] = true;\n }\n }\n\n return attributes;\n }, [orientation, finalScrollState]);\n\n // 计算滚动位置变体\n const scrollPosition = useMemo(() => {\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n if (finalScrollState.top) return 'top';\n if (finalScrollState.bottom) return 'bottom';\n } else {\n if (finalScrollState.left && finalScrollState.right) return 'left-right';\n if (finalScrollState.left) return 'left';\n if (finalScrollState.right) return 'right';\n }\n return 'none';\n }, [orientation, finalScrollState]);\n\n return (\n <Flexbox\n className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB,YACd;OAAA,iBAAiB,OAAO,iBAAiB,QAC3C,WAAW,4BAA4B;QAClC,IAAI,iBAAiB,KAC1B,WAAW,qBAAqB;QAC3B,IAAI,iBAAiB,QAC1B,WAAW,wBAAwB;EAAA,OAGrC,IAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,WAAW,4BAA4B;OAClC,IAAI,iBAAiB,MAC1B,WAAW,sBAAsB;OAC5B,IAAI,iBAAiB,OAC1B,WAAW,uBAAuB;EAItC,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAgBlC,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;IACnC,IAAI,gBAAgB,YAAY;KAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAAQ,OAAO;KAC5D,IAAI,iBAAiB,KAAK,OAAO;KACjC,IAAI,iBAAiB,QAAQ,OAAO;IACtC,OAAO;KACL,IAAI,iBAAiB,QAAQ,iBAAiB,OAAO,OAAO;KAC5D,IAAI,iBAAiB,MAAM,OAAO;KAClC,IAAI,iBAAiB,OAAO,OAAO;IACrC;IACA,OAAO;GACT,GAAG,CAAC,aAAa,gBAAgB,CAIqC;EAAE,CAAC,GAAG,SAAS;EACjF,KAAK,UAA0B,CAAC,QAAQ,GAAG,CAAC;EAC5C,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EACJ,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.mjs","names":["useControlledState"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n ({\n defaultValue = '',\n spotlight,\n className,\n value,\n onInputChange,\n placeholder,\n enableShortKey,\n shortKey = 'mod+k',\n onSearch,\n loading,\n style,\n onChange,\n onBlur,\n onPressEnter,\n onFocus,\n styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n ...rest\n }) => {\n const [inputValue, setInputValue] = useControlledState(defaultValue, {\n defaultValue,\n onChange: onInputChange,\n value,\n });\n\n const [showTag, setShowTag] = useState<boolean>(true);\n const inputReference: any = useRef<HTMLInputElement>(null);\n const hotkey = useMemo(\n () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n [shortKey],\n );\n\n useHotkeys(\n hotkey,\n () => {\n if (!enableShortKey) return;\n inputReference.current?.focus();\n },\n {\n enableOnFormTags: true,\n enabled: !!enableShortKey && !!shortKey,\n preventDefault: true,\n },\n );\n\n return (\n <div className={cx(styles.search, className)} style={style}>\n {spotlight && <Spotlight />}\n <Input\n allowClear\n className={inputClassName}\n placeholder={placeholder ?? 'Type keywords...'}\n ref={inputReference}\n style={inputStyle}\n value={inputValue}\n prefix={\n <Icon\n className={styles.icon}\n icon={loading ? LucideLoader2 : Search}\n size=\"small\"\n spin={loading}\n style={{ marginRight: 4 }}\n />\n }\n onBlur={(e) => {\n onBlur?.(e);\n setInputValue(e.target.value);\n setShowTag(true);\n }}\n onChange={(e) => {\n setInputValue(e.target.value);\n onChange?.(e);\n }}\n onFocus={(e) => {\n onFocus?.(e);\n setShowTag(false);\n }}\n onPressEnter={(e) => {\n onPressEnter?.(e);\n onSearch?.(inputValue);\n }}\n {...rest}\n />\n {enableShortKey && showTag && !inputValue && (\n <Hotkey\n compact\n className={cx(styles.tag, shortKeyClassName)}\n keys={hotkey}\n style={shortKeyStyle}\n />\n )}\n </div>\n );\n },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;
|
|
1
|
+
{"version":3,"file":"SearchBar.mjs","names":["useControlledState"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n ({\n defaultValue = '',\n spotlight,\n className,\n value,\n onInputChange,\n placeholder,\n enableShortKey,\n shortKey = 'mod+k',\n onSearch,\n loading,\n style,\n onChange,\n onBlur,\n onPressEnter,\n onFocus,\n styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n ...rest\n }) => {\n const [inputValue, setInputValue] = useControlledState(defaultValue, {\n defaultValue,\n onChange: onInputChange,\n value,\n });\n\n const [showTag, setShowTag] = useState<boolean>(true);\n const inputReference: any = useRef<HTMLInputElement>(null);\n const hotkey = useMemo(\n () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n [shortKey],\n );\n\n useHotkeys(\n hotkey,\n () => {\n if (!enableShortKey) return;\n inputReference.current?.focus();\n },\n {\n enableOnFormTags: true,\n enabled: !!enableShortKey && !!shortKey,\n preventDefault: true,\n },\n );\n\n return (\n <div className={cx(styles.search, className)} style={style}>\n {spotlight && <Spotlight />}\n <Input\n allowClear\n className={inputClassName}\n placeholder={placeholder ?? 'Type keywords...'}\n ref={inputReference}\n style={inputStyle}\n value={inputValue}\n prefix={\n <Icon\n className={styles.icon}\n icon={loading ? LucideLoader2 : Search}\n size=\"small\"\n spin={loading}\n style={{ marginRight: 4 }}\n />\n }\n onBlur={(e) => {\n onBlur?.(e);\n setInputValue(e.target.value);\n setShowTag(true);\n }}\n onChange={(e) => {\n setInputValue(e.target.value);\n onChange?.(e);\n }}\n onFocus={(e) => {\n onFocus?.(e);\n setShowTag(false);\n }}\n onPressEnter={(e) => {\n onPressEnter?.(e);\n onSearch?.(inputValue);\n }}\n {...rest}\n />\n {enableShortKey && showTag && !inputValue && (\n <Hotkey\n compact\n className={cx(styles.tag, shortKeyClassName)}\n keys={hotkey}\n style={shortKeyStyle}\n />\n )}\n </div>\n );\n },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;EAArD,UAAA;GACG,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAAC,OAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,EAAE;IACzB,CAAA;IAEH,SAAS,MAAM;KACb,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IACA,WAAW,MAAM;KACf,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IACA,UAAU,MAAM;KACd,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IACA,eAAe,MAAM;KACnB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IACA,GAAI;GACL,CAAA;GACA,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,iBAAiB;IAC3C,MAAM;IACN,OAAO;GACR,CAAA;EAEA;;AAET,CACF;AAEA,UAAU,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.mjs","names":["Flexbox"],"sources":["../../src/SideNav/SideNav.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { SideNavProps } from './type';\n\nconst SideNav = memo<SideNavProps>(({ className, avatar, topActions, bottomActions, ...rest }) => {\n return (\n <Flexbox\n align={'center'}\n className={cx(styles, className)}\n flex={'none'}\n justify={'space-between'}\n {...rest}\n >\n <Flexbox align=\"center\" direction=\"vertical\" gap={12}>\n {avatar}\n <Flexbox align=\"center\" direction=\"vertical\" gap={8}>\n {topActions}\n </Flexbox>\n </Flexbox>\n <Flexbox align=\"center\" direction=\"vertical\" gap={4}>\n {bottomActions}\n </Flexbox>\n </Flexbox>\n );\n});\n\nSideNav.displayName = 'SideNav';\n\nexport default SideNav;\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU,MAAoB,EAAE,WAAW,QAAQ,YAAY,eAAe,GAAG,WAAW;CAChG,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,QAAQ,SAAS;EAC/B,MAAM;EACN,SAAS;EACT,GAAI;
|
|
1
|
+
{"version":3,"file":"SideNav.mjs","names":["Flexbox"],"sources":["../../src/SideNav/SideNav.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { SideNavProps } from './type';\n\nconst SideNav = memo<SideNavProps>(({ className, avatar, topActions, bottomActions, ...rest }) => {\n return (\n <Flexbox\n align={'center'}\n className={cx(styles, className)}\n flex={'none'}\n justify={'space-between'}\n {...rest}\n >\n <Flexbox align=\"center\" direction=\"vertical\" gap={12}>\n {avatar}\n <Flexbox align=\"center\" direction=\"vertical\" gap={8}>\n {topActions}\n </Flexbox>\n </Flexbox>\n <Flexbox align=\"center\" direction=\"vertical\" gap={4}>\n {bottomActions}\n </Flexbox>\n </Flexbox>\n );\n});\n\nSideNav.displayName = 'SideNav';\n\nexport default SideNav;\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU,MAAoB,EAAE,WAAW,QAAQ,YAAY,eAAe,GAAG,WAAW;CAChG,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,QAAQ,SAAS;EAC/B,MAAM;EACN,SAAS;EACT,GAAI;EALN,UAAA,CAOE,qBAACA,mBAAD;GAAS,OAAM;GAAS,WAAU;GAAW,KAAK;GAAlD,UAAA,CACG,QACD,oBAACA,mBAAD;IAAS,OAAM;IAAS,WAAU;IAAW,KAAK;IAC/C,UAAA;GACM,CAAA,CACF;EACT,CAAA,GAAA,oBAACA,mBAAD;GAAS,OAAM;GAAS,WAAU;GAAW,KAAK;GAC/C,UAAA;EACM,CAAA,CACF;;AAEb,CAAC;AAED,QAAQ,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\nconst Skeleton: FC<SkeletonProps> = ({\n active,\n avatar = false,\n title = true,\n paragraph = true,\n className,\n classNames,\n styles: customStyles,\n style,\n width,\n height,\n gap = 16,\n ...rest\n}) => {\n const showAvatar = Boolean(avatar);\n const showTitle = Boolean(title);\n const showParagraph = Boolean(paragraph);\n const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n const titleProps = typeof title === 'object' ? title : undefined;\n const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n const rootStyle = {\n ...style,\n ...customStyles?.root,\n ...(width !== undefined ? { width } : {}),\n ...(height !== undefined ? { height } : {}),\n };\n\n const avatarActive = avatarProps?.active ?? active;\n const titleActive = titleProps?.active ?? active;\n const paragraphActive = paragraphProps?.active ?? active;\n\n return (\n <Flexbox\n horizontal\n align={showParagraph ? 'flex-start' : 'center'}\n className={cx(className, classNames?.root)}\n gap={gap}\n style={rootStyle}\n width={'100%'}\n {...rest}\n >\n {showAvatar && (\n <SkeletonAvatar\n {...avatarProps}\n active={avatarActive}\n className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n style={{\n ...avatarProps?.style,\n ...customStyles?.avatar,\n }}\n />\n )}\n <Flexbox gap={gap} width={'100%'}>\n {showTitle && (\n <SkeletonTitle\n {...titleProps}\n active={titleActive}\n className={cx(classNames?.title, titleProps?.className)}\n style={{\n ...titleProps?.style,\n ...customStyles?.title,\n }}\n />\n )}\n {showParagraph && (\n <SkeletonParagraph\n {...paragraphProps}\n active={paragraphActive}\n className={cx(classNames?.paragraph, paragraphProps?.className)}\n style={{\n ...paragraphProps?.style,\n ...customStyles?.paragraph,\n }}\n />\n )}\n </Flexbox>\n </Flexbox>\n );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;AAaA,MAAM,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,aAAa,QAAQ,MAAM;CACjC,MAAM,YAAY,QAAQ,KAAK;CAC/B,MAAM,gBAAgB,QAAQ,SAAS;CACvC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS,KAAA;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ,KAAA;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY,KAAA;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC3C;CAEA,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;CAElD,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,IAAI;EACpC;EACL,OAAO;EACP,OAAO;EACP,GAAI;
|
|
1
|
+
{"version":3,"file":"Skeleton.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\nconst Skeleton: FC<SkeletonProps> = ({\n active,\n avatar = false,\n title = true,\n paragraph = true,\n className,\n classNames,\n styles: customStyles,\n style,\n width,\n height,\n gap = 16,\n ...rest\n}) => {\n const showAvatar = Boolean(avatar);\n const showTitle = Boolean(title);\n const showParagraph = Boolean(paragraph);\n const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n const titleProps = typeof title === 'object' ? title : undefined;\n const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n const rootStyle = {\n ...style,\n ...customStyles?.root,\n ...(width !== undefined ? { width } : {}),\n ...(height !== undefined ? { height } : {}),\n };\n\n const avatarActive = avatarProps?.active ?? active;\n const titleActive = titleProps?.active ?? active;\n const paragraphActive = paragraphProps?.active ?? active;\n\n return (\n <Flexbox\n horizontal\n align={showParagraph ? 'flex-start' : 'center'}\n className={cx(className, classNames?.root)}\n gap={gap}\n style={rootStyle}\n width={'100%'}\n {...rest}\n >\n {showAvatar && (\n <SkeletonAvatar\n {...avatarProps}\n active={avatarActive}\n className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n style={{\n ...avatarProps?.style,\n ...customStyles?.avatar,\n }}\n />\n )}\n <Flexbox gap={gap} width={'100%'}>\n {showTitle && (\n <SkeletonTitle\n {...titleProps}\n active={titleActive}\n className={cx(classNames?.title, titleProps?.className)}\n style={{\n ...titleProps?.style,\n ...customStyles?.title,\n }}\n />\n )}\n {showParagraph && (\n <SkeletonParagraph\n {...paragraphProps}\n active={paragraphActive}\n className={cx(classNames?.paragraph, paragraphProps?.className)}\n style={{\n ...paragraphProps?.style,\n ...customStyles?.paragraph,\n }}\n />\n )}\n </Flexbox>\n </Flexbox>\n );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;AAaA,MAAM,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,aAAa,QAAQ,MAAM;CACjC,MAAM,YAAY,QAAQ,KAAK;CAC/B,MAAM,gBAAgB,QAAQ,SAAS;CACvC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS,KAAA;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ,KAAA;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY,KAAA;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC3C;CAEA,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;CAElD,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,IAAI;EACpC;EACL,OAAO;EACP,OAAO;EACP,GAAI;EAPN,UAAA,CASG,cACC,oBAAC,gBAAD;GACE,GAAI;GACJ,QAAQ;GACR,WAAW,GAAG,OAAO,QAAQ,YAAY,QAAQ,aAAa,SAAS;GACvE,OAAO;IACL,GAAG,aAAa;IAChB,GAAG,cAAc;GACnB;EACD,CAAA,GAEH,qBAACA,mBAAD;GAAc;GAAK,OAAO;GAA1B,UAAA,CACG,aACC,oBAAC,eAAD;IACE,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,OAAO,YAAY,SAAS;IACtD,OAAO;KACL,GAAG,YAAY;KACf,GAAG,cAAc;IACnB;GACD,CAAA,GAEF,iBACC,oBAAC,mBAAD;IACE,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,WAAW,gBAAgB,SAAS;IAC9D,OAAO;KACL,GAAG,gBAAgB;KACnB,GAAG,cAAc;IACnB;GACD,CAAA,CAEI;EACF,CAAA,CAAA;;AAEb;AAEA,SAAS,cAAc"}
|