@lobehub/ui 5.51.2 → 5.52.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 +1 -1
- package/es/Accordion/Accordion.mjs.map +1 -1
- package/es/ActionIconGroup/type.d.mts +2 -1
- package/es/Alert/Alert.mjs +1 -1
- package/es/AutoComplete/Select.mjs +1 -1
- package/es/Avatar/Avatar.mjs +2 -2
- package/es/Burger/Burger.mjs +2 -2
- package/es/Burger/Burger.mjs.map +1 -1
- package/es/Button/Button.mjs +1 -1
- package/es/CodeDiff/DiffPanel.mjs +1 -1
- package/es/CodeDiff/DiffPanel.mjs.map +1 -1
- package/es/Collapse/Collapse.mjs +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +21 -21
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/ColorSwatches/style.mjs +3 -12
- package/es/ColorSwatches/style.mjs.map +1 -1
- package/es/DatePicker/DatePicker.mjs +1 -1
- package/es/DraggablePanel/DraggablePanel.mjs +1 -1
- package/es/Drawer/Drawer.mjs +1 -1
- package/es/EditableText/ControlInput.d.mts +2 -2
- package/es/EditableText/ControlInput.mjs +1 -1
- package/es/EditableText/ControlInput.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs +1 -0
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EditableText/type.d.mts +5 -1
- package/es/EmojiPicker/AvatarUploader.mjs +76 -71
- package/es/EmojiPicker/AvatarUploader.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs +12 -6
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/EmojiPicker/style.mjs +32 -9
- package/es/EmojiPicker/style.mjs.map +1 -1
- package/es/EmojiPicker/type.d.mts +2 -1
- package/es/Form/Form.mjs +1 -1
- package/es/Form/components/FormDivider.mjs +1 -1
- package/es/Form/components/FormItem.mjs +1 -1
- package/es/Form/components/FormSubmitFooter.mjs +1 -1
- package/es/Form/components/FormTitle.mjs +1 -1
- package/es/GroupAvatar/GroupAvatar.mjs +1 -1
- package/es/GroupAvatar/GroupAvatar.mjs.map +1 -1
- package/es/GroupAvatar/type.d.mts +2 -1
- package/es/Highlighter/Highlighter.mjs +1 -1
- package/es/Highlighter/Highlighter.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs +23 -13
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/style.mjs +1 -1
- package/es/Highlighter/style.mjs.map +1 -1
- package/es/HtmlPreview/HtmlPreview.mjs +28 -1
- package/es/HtmlPreview/HtmlPreview.mjs.map +1 -1
- package/es/Image/viewer/ImageViewer.mjs +1 -1
- package/es/Image/viewer/ImageViewer.mjs.map +1 -1
- package/es/Image/viewer/Toolbar.mjs +1 -1
- package/es/Input/Input.mjs +1 -1
- package/es/Input/InputNumber.mjs +1 -1
- package/es/Input/InputOPT.mjs +1 -1
- package/es/Input/InputPassword.mjs +1 -1
- package/es/Input/TextArea.mjs +1 -1
- package/es/Menu/Menu.mjs +1 -1
- package/es/Menu/index.d.mts +2 -1
- package/es/Menu/index.mjs +1 -1
- package/es/Menu/itemInterface.d.mts +71 -0
- package/es/Menu/type.d.mts +8 -8
- package/es/Mermaid/Mermaid.mjs +1 -1
- package/es/Mermaid/Mermaid.mjs.map +1 -1
- package/es/Modal/Modal.mjs +1 -1
- package/es/SearchBar/SearchBar.mjs +1 -1
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/SearchBar/type.d.mts +2 -2
- package/es/Segmented/Segmented.mjs +1 -1
- package/es/Select/Select.mjs +1 -1
- package/es/SliderWithInput/SliderWithInput.mjs +1 -1
- package/es/Tabs/Tabs.mjs +1 -1
- package/es/Tag/Tag.mjs +1 -1
- package/es/ThemeProvider/ConfigProvider.mjs +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs +1 -1
- package/es/ThemeSwitch/ThemeSwitch.mjs +1 -1
- package/es/Toc/Toc.mjs +1 -1
- package/es/Toc/TocMobile.mjs +1 -1
- package/es/awesome/AgentSkillCard/AgentSkillCard.mjs +1 -1
- package/es/awesome/Hero/Hero.mjs +1 -1
- package/es/awesome/LandingSection/LandingSection.mjs +1 -1
- package/es/base-ui/Anchor/Anchor.d.mts +6 -0
- package/es/base-ui/Anchor/Anchor.mjs +141 -0
- package/es/base-ui/Anchor/Anchor.mjs.map +1 -0
- package/es/base-ui/Anchor/index.d.mts +3 -0
- package/es/base-ui/Anchor/style.mjs +80 -0
- package/es/base-ui/Anchor/style.mjs.map +1 -0
- package/es/base-ui/Anchor/type.d.mts +20 -0
- package/es/base-ui/AutoComplete/AutoComplete.mjs.map +1 -1
- package/es/base-ui/Avatar/Avatar.mjs +1 -1
- package/es/base-ui/Breadcrumb/Breadcrumb.d.mts +6 -0
- package/es/base-ui/Breadcrumb/Breadcrumb.mjs +58 -0
- package/es/base-ui/Breadcrumb/Breadcrumb.mjs.map +1 -0
- package/es/base-ui/Breadcrumb/index.d.mts +3 -0
- package/es/base-ui/Breadcrumb/style.mjs +65 -0
- package/es/base-ui/Breadcrumb/style.mjs.map +1 -0
- package/es/base-ui/Breadcrumb/type.d.mts +24 -0
- package/es/base-ui/Burger/Burger.d.mts +6 -0
- package/es/base-ui/Burger/Burger.mjs +69 -0
- package/es/base-ui/Burger/Burger.mjs.map +1 -0
- package/es/base-ui/Burger/index.d.mts +3 -0
- package/es/base-ui/Burger/style.mjs +63 -0
- package/es/base-ui/Burger/style.mjs.map +1 -0
- package/es/base-ui/Burger/type.d.mts +23 -0
- package/es/base-ui/Carousel/Carousel.d.mts +6 -0
- package/es/base-ui/Carousel/Carousel.mjs +157 -0
- package/es/base-ui/Carousel/Carousel.mjs.map +1 -0
- package/es/base-ui/Carousel/index.d.mts +3 -0
- package/es/base-ui/Carousel/style.mjs +88 -0
- package/es/base-ui/Carousel/style.mjs.map +1 -0
- package/es/base-ui/Carousel/type.d.mts +23 -0
- package/es/base-ui/ColorPicker/ColorPicker.d.mts +6 -0
- package/es/base-ui/ColorPicker/ColorPicker.mjs +227 -0
- package/es/base-ui/ColorPicker/ColorPicker.mjs.map +1 -0
- package/es/base-ui/ColorPicker/SaturationArea.mjs +64 -0
- package/es/base-ui/ColorPicker/SaturationArea.mjs.map +1 -0
- package/es/base-ui/ColorPicker/color.mjs +28 -0
- package/es/base-ui/ColorPicker/color.mjs.map +1 -0
- package/es/base-ui/ColorPicker/index.d.mts +3 -0
- package/es/base-ui/ColorPicker/style.mjs +180 -0
- package/es/base-ui/ColorPicker/style.mjs.map +1 -0
- package/es/base-ui/ColorPicker/type.d.mts +20 -0
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.d.mts +0 -1
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/DatePicker/CalendarPanel.mjs +188 -0
- package/es/base-ui/DatePicker/CalendarPanel.mjs.map +1 -0
- package/es/base-ui/DatePicker/DatePicker.d.mts +6 -0
- package/es/base-ui/DatePicker/DatePicker.mjs +88 -0
- package/es/base-ui/DatePicker/DatePicker.mjs.map +1 -0
- package/es/base-ui/DatePicker/DateRangePicker.d.mts +6 -0
- package/es/base-ui/DatePicker/DateRangePicker.mjs +128 -0
- package/es/base-ui/DatePicker/DateRangePicker.mjs.map +1 -0
- package/es/base-ui/DatePicker/PickerShell.mjs +43 -0
- package/es/base-ui/DatePicker/PickerShell.mjs.map +1 -0
- package/es/base-ui/DatePicker/calendar.d.mts +5 -0
- package/es/base-ui/DatePicker/calendar.mjs +46 -0
- package/es/base-ui/DatePicker/calendar.mjs.map +1 -0
- package/es/base-ui/DatePicker/index.d.mts +5 -0
- package/es/base-ui/DatePicker/style.mjs +193 -0
- package/es/base-ui/DatePicker/style.mjs.map +1 -0
- package/es/base-ui/DatePicker/type.d.mts +35 -0
- package/es/base-ui/Descriptions/Descriptions.d.mts +6 -0
- package/es/base-ui/Descriptions/Descriptions.mjs +62 -0
- package/es/base-ui/Descriptions/Descriptions.mjs.map +1 -0
- package/es/base-ui/Descriptions/index.d.mts +3 -0
- package/es/base-ui/Descriptions/style.mjs +64 -0
- package/es/base-ui/Descriptions/style.mjs.map +1 -0
- package/es/base-ui/Descriptions/type.d.mts +28 -0
- package/es/base-ui/Divider/Divider.d.mts +6 -0
- package/es/base-ui/Divider/Divider.mjs +30 -0
- package/es/base-ui/Divider/Divider.mjs.map +1 -0
- package/es/base-ui/Divider/index.d.mts +3 -0
- package/es/base-ui/Divider/style.mjs +59 -0
- package/es/base-ui/Divider/style.mjs.map +1 -0
- package/es/base-ui/Divider/type.d.mts +12 -0
- package/es/base-ui/Drawer/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/atoms.mjs +1 -1
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.d.mts +0 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/Form/components/FormTitle.mjs +1 -1
- package/es/base-ui/Form/components/FormTitle.mjs.map +1 -1
- package/es/base-ui/Form/type.d.mts +2 -2
- package/es/base-ui/Input/ClearButton.mjs +32 -0
- package/es/base-ui/Input/ClearButton.mjs.map +1 -0
- package/es/base-ui/Input/Input.mjs +30 -4
- package/es/base-ui/Input/Input.mjs.map +1 -1
- package/es/base-ui/Input/InputNumber.mjs +43 -22
- package/es/base-ui/Input/InputNumber.mjs.map +1 -1
- package/es/base-ui/Input/TextArea.mjs +50 -13
- package/es/base-ui/Input/TextArea.mjs.map +1 -1
- package/es/base-ui/Input/clearNativeValue.mjs +12 -0
- package/es/base-ui/Input/clearNativeValue.mjs.map +1 -0
- package/es/base-ui/Input/pressEnter.mjs +6 -0
- package/es/base-ui/Input/pressEnter.mjs.map +1 -0
- package/es/base-ui/Input/style.d.mts +5 -1
- package/es/base-ui/Input/style.mjs +67 -4
- package/es/base-ui/Input/style.mjs.map +1 -1
- package/es/base-ui/Input/type.d.mts +13 -2
- package/es/base-ui/List/List.d.mts +6 -0
- package/es/base-ui/List/List.mjs +50 -0
- package/es/base-ui/List/List.mjs.map +1 -0
- package/es/base-ui/List/ListRow.mjs +74 -0
- package/es/base-ui/List/ListRow.mjs.map +1 -0
- package/es/base-ui/List/index.d.mts +3 -0
- package/es/base-ui/List/style.mjs +146 -0
- package/es/base-ui/List/style.mjs.map +1 -0
- package/es/base-ui/List/type.d.mts +48 -0
- package/es/base-ui/Modal/atoms.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs +1 -1
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Modal/type.d.mts +1 -0
- package/es/base-ui/Popover/PopoverPortal.mjs.map +1 -1
- package/es/base-ui/Progress/Progress.mjs +16 -14
- package/es/base-ui/Progress/Progress.mjs.map +1 -1
- package/es/base-ui/Progress/style.mjs +16 -25
- package/es/base-ui/Progress/style.mjs.map +1 -1
- package/es/base-ui/QRCode/QRCode.d.mts +6 -0
- package/es/base-ui/QRCode/QRCode.mjs +105 -0
- package/es/base-ui/QRCode/QRCode.mjs.map +1 -0
- package/es/base-ui/QRCode/index.d.mts +3 -0
- package/es/base-ui/QRCode/qrPath.mjs +16 -0
- package/es/base-ui/QRCode/qrPath.mjs.map +1 -0
- package/es/base-ui/QRCode/style.mjs +52 -0
- package/es/base-ui/QRCode/style.mjs.map +1 -0
- package/es/base-ui/QRCode/type.d.mts +19 -0
- package/es/base-ui/Rate/Rate.d.mts +6 -0
- package/es/base-ui/Rate/Rate.mjs +111 -0
- package/es/base-ui/Rate/Rate.mjs.map +1 -0
- package/es/base-ui/Rate/index.d.mts +3 -0
- package/es/base-ui/Rate/style.mjs +81 -0
- package/es/base-ui/Rate/style.mjs.map +1 -0
- package/es/base-ui/Rate/type.d.mts +19 -0
- package/es/base-ui/Select/atoms.mjs.map +1 -1
- package/es/base-ui/Select/hooks.mjs.map +1 -1
- package/es/base-ui/Statistic/Statistic.d.mts +6 -0
- package/es/base-ui/Statistic/Statistic.mjs +42 -0
- package/es/base-ui/Statistic/Statistic.mjs.map +1 -0
- package/es/base-ui/Statistic/formatValue.d.mts +5 -0
- package/es/base-ui/Statistic/formatValue.mjs +23 -0
- package/es/base-ui/Statistic/formatValue.mjs.map +1 -0
- package/es/base-ui/Statistic/index.d.mts +4 -0
- package/es/base-ui/Statistic/style.mjs +34 -0
- package/es/base-ui/Statistic/style.mjs.map +1 -0
- package/es/base-ui/Statistic/type.d.mts +23 -0
- package/es/base-ui/Steps/Steps.d.mts +6 -0
- package/es/base-ui/Steps/Steps.mjs +74 -0
- package/es/base-ui/Steps/Steps.mjs.map +1 -0
- package/es/base-ui/Steps/index.d.mts +3 -0
- package/es/base-ui/Steps/style.mjs +155 -0
- package/es/base-ui/Steps/style.mjs.map +1 -0
- package/es/base-ui/Steps/type.d.mts +32 -0
- package/es/base-ui/Table/FilterMenu.mjs +45 -0
- package/es/base-ui/Table/FilterMenu.mjs.map +1 -0
- package/es/base-ui/Table/Table.d.mts +10 -0
- package/es/base-ui/Table/Table.mjs +134 -0
- package/es/base-ui/Table/Table.mjs.map +1 -0
- package/es/base-ui/Table/TableBody.mjs +59 -0
- package/es/base-ui/Table/TableBody.mjs.map +1 -0
- package/es/base-ui/Table/TableHead.mjs +50 -0
- package/es/base-ui/Table/TableHead.mjs.map +1 -0
- package/es/base-ui/Table/features.mjs +12 -0
- package/es/base-ui/Table/features.mjs.map +1 -0
- package/es/base-ui/Table/fixedOffsets.mjs +29 -0
- package/es/base-ui/Table/fixedOffsets.mjs.map +1 -0
- package/es/base-ui/Table/index.d.mts +3 -0
- package/es/base-ui/Table/style.mjs +168 -0
- package/es/base-ui/Table/style.mjs.map +1 -0
- package/es/base-ui/Table/toColumnDefs.mjs +26 -0
- package/es/base-ui/Table/toColumnDefs.mjs.map +1 -0
- package/es/base-ui/Table/type.d.mts +68 -0
- package/es/base-ui/Table/useTableState.mjs +99 -0
- package/es/base-ui/Table/useTableState.mjs.map +1 -0
- package/es/base-ui/Toast/imperative.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 +66 -21
- package/es/base-ui/index.mjs +42 -26
- package/es/base-ui/panelStyles.mjs +95 -0
- package/es/base-ui/panelStyles.mjs.map +1 -0
- package/es/chat/ChatList/components/HistoryDivider.mjs +9 -6
- package/es/chat/ChatList/components/HistoryDivider.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +1 -1
- package/es/chat/TokenTag/TokenTag.mjs +1 -1
- package/es/color/CssVar/VarRow.mjs +1 -1
- package/es/color/CssVar/index.mjs +1 -1
- package/es/dashboard/FilterSidebar/FilterSidebar.mjs +1 -1
- package/es/i18n/resources/en/burger.d.mts +8 -0
- package/es/i18n/resources/en/burger.mjs +9 -0
- package/es/i18n/resources/en/burger.mjs.map +1 -0
- package/es/i18n/resources/en/colorPicker.d.mts +12 -0
- package/es/i18n/resources/en/colorPicker.mjs +13 -0
- package/es/i18n/resources/en/colorPicker.mjs.map +1 -0
- package/es/i18n/resources/en/common.d.mts +1 -0
- package/es/i18n/resources/en/common.mjs +1 -0
- package/es/i18n/resources/en/common.mjs.map +1 -1
- package/es/i18n/resources/en/datePicker.d.mts +13 -0
- package/es/i18n/resources/en/datePicker.mjs +14 -0
- package/es/i18n/resources/en/datePicker.mjs.map +1 -0
- package/es/i18n/resources/en/index.d.mts +15 -11
- package/es/i18n/resources/en/index.mjs +9 -1
- package/es/i18n/resources/en/index.mjs.map +1 -1
- package/es/i18n/resources/en/qrCode.d.mts +9 -0
- package/es/i18n/resources/en/qrCode.mjs +10 -0
- package/es/i18n/resources/en/qrCode.mjs.map +1 -0
- package/es/i18n/resources/zhCn/burger.d.mts +8 -0
- package/es/i18n/resources/zhCn/burger.mjs +9 -0
- package/es/i18n/resources/zhCn/burger.mjs.map +1 -0
- package/es/i18n/resources/zhCn/colorPicker.d.mts +12 -0
- package/es/i18n/resources/zhCn/colorPicker.mjs +13 -0
- package/es/i18n/resources/zhCn/colorPicker.mjs.map +1 -0
- package/es/i18n/resources/zhCn/common.d.mts +1 -0
- package/es/i18n/resources/zhCn/common.mjs +1 -0
- package/es/i18n/resources/zhCn/common.mjs.map +1 -1
- package/es/i18n/resources/zhCn/datePicker.d.mts +13 -0
- package/es/i18n/resources/zhCn/datePicker.mjs +14 -0
- package/es/i18n/resources/zhCn/datePicker.mjs.map +1 -0
- package/es/i18n/resources/zhCn/index.d.mts +15 -11
- package/es/i18n/resources/zhCn/index.mjs +9 -1
- package/es/i18n/resources/zhCn/index.mjs.map +1 -1
- package/es/i18n/resources/zhCn/qrCode.d.mts +9 -0
- package/es/i18n/resources/zhCn/qrCode.mjs +10 -0
- package/es/i18n/resources/zhCn/qrCode.mjs.map +1 -0
- package/es/i18n/types.d.mts +14 -10
- package/es/index.d.mts +12 -11
- package/es/index.mjs +23 -23
- package/es/mdx/Cards/Card.d.mts +2 -2
- package/es/mdx/Cards/Card.mjs +1 -1
- package/es/mdx/Cards/Card.mjs.map +1 -1
- package/es/mdx/Mdx/index.mjs +1 -1
- package/es/mdx/Mdx/index.mjs.map +1 -1
- package/es/mdx/Tabs/index.d.mts +2 -2
- package/es/mdx/Tabs/index.mjs +7 -2
- package/es/mdx/Tabs/index.mjs.map +1 -1
- package/es/mdx/Tabs/style.mjs +33 -1
- package/es/mdx/Tabs/style.mjs.map +1 -1
- package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs +1 -1
- package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs.map +1 -1
- package/es/static-css/baseline.mjs +1 -4
- package/es/static-css/baseline.mjs.map +1 -1
- package/es/static-css/buildAntdStaticCss.mjs +1 -1
- package/package.json +3 -1
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { focusRing } from "../focusRing.mjs";
|
|
2
|
+
import { createStaticStyles } from "antd-style";
|
|
3
|
+
//#region src/base-ui/List/style.ts
|
|
4
|
+
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
5
|
+
actions: css`
|
|
6
|
+
position: absolute;
|
|
7
|
+
inset-block-start: 50%;
|
|
8
|
+
inset-inline-end: 8px;
|
|
9
|
+
transform: translateY(-50%);
|
|
10
|
+
|
|
11
|
+
display: none;
|
|
12
|
+
gap: 4px;
|
|
13
|
+
align-items: center;
|
|
14
|
+
`,
|
|
15
|
+
active: css`
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
color: ${cssVar.colorText};
|
|
18
|
+
background: ${cssVar.colorFillSecondary};
|
|
19
|
+
|
|
20
|
+
&:hover {
|
|
21
|
+
background: ${cssVar.colorFillSecondary};
|
|
22
|
+
}
|
|
23
|
+
`,
|
|
24
|
+
body: css`
|
|
25
|
+
display: flex;
|
|
26
|
+
flex: 1;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
gap: 1px;
|
|
29
|
+
|
|
30
|
+
min-width: 0;
|
|
31
|
+
`,
|
|
32
|
+
compact: css`
|
|
33
|
+
gap: 2px;
|
|
34
|
+
|
|
35
|
+
& > li > a,
|
|
36
|
+
& > li > button {
|
|
37
|
+
padding-inline: 8px;
|
|
38
|
+
}
|
|
39
|
+
`,
|
|
40
|
+
danger: css`
|
|
41
|
+
color: ${cssVar.colorError};
|
|
42
|
+
|
|
43
|
+
&:hover {
|
|
44
|
+
color: ${cssVar.colorError};
|
|
45
|
+
}
|
|
46
|
+
`,
|
|
47
|
+
description: css`
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
|
|
50
|
+
font-size: 12px;
|
|
51
|
+
font-weight: 400;
|
|
52
|
+
line-height: 1.4;
|
|
53
|
+
color: ${cssVar.colorTextDescription};
|
|
54
|
+
text-overflow: ellipsis;
|
|
55
|
+
white-space: nowrap;
|
|
56
|
+
`,
|
|
57
|
+
disabled: css`
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
opacity: 0.45;
|
|
60
|
+
`,
|
|
61
|
+
divider: css`
|
|
62
|
+
height: 1px;
|
|
63
|
+
margin-block: 4px;
|
|
64
|
+
background: ${cssVar.colorBorderSecondary};
|
|
65
|
+
`,
|
|
66
|
+
extra: css`
|
|
67
|
+
flex: none;
|
|
68
|
+
font-size: 12px;
|
|
69
|
+
color: ${cssVar.colorTextDescription};
|
|
70
|
+
`,
|
|
71
|
+
filled: css`
|
|
72
|
+
padding: 4px;
|
|
73
|
+
border-radius: ${cssVar.borderRadiusLG};
|
|
74
|
+
background: ${cssVar.colorFillQuaternary};
|
|
75
|
+
`,
|
|
76
|
+
item: css`
|
|
77
|
+
position: relative;
|
|
78
|
+
|
|
79
|
+
&:hover > span:last-child,
|
|
80
|
+
&:focus-within > span:last-child {
|
|
81
|
+
display: inline-flex;
|
|
82
|
+
}
|
|
83
|
+
`,
|
|
84
|
+
label: css`
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
text-overflow: ellipsis;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
|
|
89
|
+
a {
|
|
90
|
+
color: inherit;
|
|
91
|
+
}
|
|
92
|
+
`,
|
|
93
|
+
outlined: css`
|
|
94
|
+
padding: 4px;
|
|
95
|
+
border: 1px solid ${cssVar.colorBorderSecondary};
|
|
96
|
+
border-radius: ${cssVar.borderRadiusLG};
|
|
97
|
+
`,
|
|
98
|
+
root: css`
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
gap: 2px;
|
|
102
|
+
|
|
103
|
+
margin: 0;
|
|
104
|
+
padding: 0;
|
|
105
|
+
|
|
106
|
+
list-style: none;
|
|
107
|
+
`,
|
|
108
|
+
row: css`
|
|
109
|
+
${focusRing};
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
|
|
112
|
+
display: flex;
|
|
113
|
+
gap: 12px;
|
|
114
|
+
align-items: center;
|
|
115
|
+
|
|
116
|
+
box-sizing: border-box;
|
|
117
|
+
width: 100%;
|
|
118
|
+
min-height: 32px;
|
|
119
|
+
padding-block: 6px;
|
|
120
|
+
padding-inline: 12px;
|
|
121
|
+
border: 0;
|
|
122
|
+
border-radius: ${cssVar.borderRadius};
|
|
123
|
+
|
|
124
|
+
font: inherit;
|
|
125
|
+
font-size: 14px;
|
|
126
|
+
color: ${cssVar.colorTextSecondary};
|
|
127
|
+
text-align: start;
|
|
128
|
+
text-decoration: none;
|
|
129
|
+
|
|
130
|
+
background: none;
|
|
131
|
+
|
|
132
|
+
&:hover {
|
|
133
|
+
color: ${cssVar.colorText};
|
|
134
|
+
background: ${cssVar.colorFillTertiary};
|
|
135
|
+
}
|
|
136
|
+
`,
|
|
137
|
+
showAction: css`
|
|
138
|
+
& > span:last-child {
|
|
139
|
+
display: inline-flex;
|
|
140
|
+
}
|
|
141
|
+
`
|
|
142
|
+
}));
|
|
143
|
+
//#endregion
|
|
144
|
+
export { styles };
|
|
145
|
+
|
|
146
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/List/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n actions: css`\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: 8px;\n transform: translateY(-50%);\n\n display: none;\n gap: 4px;\n align-items: center;\n `,\n active: css`\n font-weight: 500;\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n\n &:hover {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n body: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 1px;\n\n min-width: 0;\n `,\n compact: css`\n gap: 2px;\n\n & > li > a,\n & > li > button {\n padding-inline: 8px;\n }\n `,\n danger: css`\n color: ${cssVar.colorError};\n\n &:hover {\n color: ${cssVar.colorError};\n }\n `,\n description: css`\n overflow: hidden;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 1.4;\n color: ${cssVar.colorTextDescription};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n disabled: css`\n cursor: not-allowed;\n opacity: 0.45;\n `,\n divider: css`\n height: 1px;\n margin-block: 4px;\n background: ${cssVar.colorBorderSecondary};\n `,\n extra: css`\n flex: none;\n font-size: 12px;\n color: ${cssVar.colorTextDescription};\n `,\n filled: css`\n padding: 4px;\n border-radius: ${cssVar.borderRadiusLG};\n background: ${cssVar.colorFillQuaternary};\n `,\n item: css`\n position: relative;\n\n &:hover > span:last-child,\n &:focus-within > span:last-child {\n display: inline-flex;\n }\n `,\n label: css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n a {\n color: inherit;\n }\n `,\n outlined: css`\n padding: 4px;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n `,\n root: css`\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n margin: 0;\n padding: 0;\n\n list-style: none;\n `,\n row: css`\n ${focusRing};\n cursor: pointer;\n\n display: flex;\n gap: 12px;\n align-items: center;\n\n box-sizing: border-box;\n width: 100%;\n min-height: 32px;\n padding-block: 6px;\n padding-inline: 12px;\n border: 0;\n border-radius: ${cssVar.borderRadius};\n\n font: inherit;\n font-size: 14px;\n color: ${cssVar.colorTextSecondary};\n text-align: start;\n text-decoration: none;\n\n background: none;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillTertiary};\n }\n `,\n showAction: css`\n & > span:last-child {\n display: inline-flex;\n }\n `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;;;;;;CAUZ,QAAQ,GAAG;;aAEA,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,mBAAmB;;;CAG5C,MAAM,GAAG;;;;;;;;CAQT,SAAS,GAAG;;;;;;;;CAQZ,QAAQ,GAAG;aACA,OAAO,WAAW;;;eAGhB,OAAO,WAAW;;;CAG/B,aAAa,GAAG;;;;;;aAML,OAAO,qBAAqB;;;;CAIvC,UAAU,GAAG;;;;CAIb,SAAS,GAAG;;;kBAGI,OAAO,qBAAqB;;CAE5C,OAAO,GAAG;;;aAGC,OAAO,qBAAqB;;CAEvC,QAAQ,GAAG;;qBAEQ,OAAO,eAAe;kBACzB,OAAO,oBAAoB;;CAE3C,MAAM,GAAG;;;;;;;;CAQT,OAAO,GAAG;;;;;;;;;CASV,UAAU,GAAG;;wBAES,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,MAAM,GAAG;;;;;;;;;;CAUT,KAAK,GAAG;MACJ,UAAU;;;;;;;;;;;;;qBAaK,OAAO,aAAa;;;;aAI5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;CAG3C,YAAY,GAAG;;;;;AAKjB,EAAE"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { IconProps } from "../../Icon/type.mjs";
|
|
2
|
+
import "../../Icon/index.mjs";
|
|
3
|
+
import { CSSProperties, ComponentProps, Key, MouseEvent, ReactNode, Ref } from "react";
|
|
4
|
+
//#region src/base-ui/List/type.d.ts
|
|
5
|
+
interface ListClickInfo {
|
|
6
|
+
domEvent: MouseEvent<HTMLElement>;
|
|
7
|
+
item: ListItemType;
|
|
8
|
+
key: Key;
|
|
9
|
+
}
|
|
10
|
+
interface ListItemType {
|
|
11
|
+
actions?: ReactNode;
|
|
12
|
+
avatar?: ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
danger?: boolean;
|
|
15
|
+
description?: ReactNode;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
extra?: ReactNode;
|
|
18
|
+
href?: string;
|
|
19
|
+
icon?: IconProps['icon'];
|
|
20
|
+
key: Key;
|
|
21
|
+
label: ReactNode;
|
|
22
|
+
onClick?: (info: ListClickInfo) => void;
|
|
23
|
+
showAction?: boolean;
|
|
24
|
+
style?: CSSProperties;
|
|
25
|
+
type?: undefined;
|
|
26
|
+
}
|
|
27
|
+
interface ListDividerType {
|
|
28
|
+
key?: Key;
|
|
29
|
+
type: 'divider';
|
|
30
|
+
}
|
|
31
|
+
type ListItem = ListItemType | ListDividerType;
|
|
32
|
+
type ListSemanticName = 'actions' | 'description' | 'extra' | 'item' | 'label';
|
|
33
|
+
interface ListProps extends Omit<ComponentProps<'ul'>, 'onClick'> {
|
|
34
|
+
activeKey?: Key | null;
|
|
35
|
+
classNames?: Partial<Record<ListSemanticName, string>>;
|
|
36
|
+
compact?: boolean;
|
|
37
|
+
defaultActiveKey?: Key;
|
|
38
|
+
items: ListItem[];
|
|
39
|
+
onActiveChange?: (key: Key) => void;
|
|
40
|
+
onClick?: (info: ListClickInfo) => void;
|
|
41
|
+
ref?: Ref<HTMLUListElement>;
|
|
42
|
+
selectable?: boolean;
|
|
43
|
+
styles?: Partial<Record<ListSemanticName, CSSProperties>>;
|
|
44
|
+
variant?: 'borderless' | 'filled' | 'outlined';
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
export { ListClickInfo, ListDividerType, ListItem, ListItemType, ListProps, ListSemanticName };
|
|
48
|
+
//# sourceMappingURL=type.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n cloneElement,\n createContext,\n isValidElement,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n onExitComplete?: () => void;\n zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n open,\n children,\n onExitComplete: onExitCompleteProp,\n zIndex: explicitZIndex,\n ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n const [isPresent, setIsPresent] = useState(!!open);\n\n useEffect(() => {\n if (open) setIsPresent(true);\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsPresent(false);\n onExitCompleteProp?.();\n }, [onExitCompleteProp]);\n\n const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n\n if (!isPresent) return null;\n\n return (\n <ModalOpenContext value={open}>\n <ModalActionsContext value={actions}>\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal open {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n </ModalActionsContext>\n </ModalOpenContext>\n );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n return (\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n if (open !== undefined) {\n return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n }\n return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n const appElement = useAppElement();\n return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n <Dialog.Viewport\n {...rest}\n className={mergeStateClassName(styles.viewport, className as any) as any}\n />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n const open = useModalOpen();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n if (open !== null) {\n return (\n <Dialog.Backdrop\n {...rest}\n className={cx(styles.backdrop, className as string)}\n style={{ ...layerStyle, ...style, transition: 'none' }}\n render={\n <Motion.div\n animate={{ opacity: open ? 1 : 0 }}\n initial={{ opacity: 0 }}\n transition={backdropTransition}\n />\n }\n />\n );\n }\n\n return (\n <Dialog.Backdrop\n {...rest}\n className={mergeStateClassName(styles.backdrop, className as any) as any}\n style={{ ...layerStyle, ...style }}\n />\n );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n motionProps?: Record<string, any>;\n panelClassName?: string;\n popupStyle?: React.CSSProperties;\n width?: number | string;\n};\nexport const ModalPopup = ({\n className,\n children,\n width,\n style,\n motionProps,\n panelClassName,\n popupStyle,\n ref: forwardedRef,\n ...rest\n}: ModalPopupProps) => {\n const open = useModalOpen();\n const actions = useModalActions();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n if (open !== null && actions) {\n return (\n <Dialog.Popup\n {...rest}\n className={cx(styles.popup, className as string)}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <AnimatePresence onExitComplete={actions.onExitComplete}>\n {open ? (\n <Motion.div\n {...modalMotionConfig}\n {...motionProps}\n className={cx(styles.popupInner, panelClassName)}\n key=\"modal-popup-panel\"\n style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n >\n {children}\n </Motion.div>\n ) : null}\n </AnimatePresence>\n </Dialog.Popup>\n );\n }\n\n return (\n <Dialog.Popup\n {...rest}\n className={mergeStateClassName(styles.popup, className as any) as any}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <div\n className={cx(styles.popupInner, panelClassName)}\n style={{ maxWidth: width ?? undefined, ...style }}\n >\n {children}\n </div>\n </Dialog.Popup>\n );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n {children ?? <X size={16} />}\n </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n 'children' | 'render'\n> & {\n children?: React.ReactNode;\n nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: ModalTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n render={renderer as any}\n />\n );\n }\n\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Dialog.Trigger>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAKA,MAAM,mBAAmB,cAA8B,IAAI;AAM3D,MAAM,sBAAsB,cAA4C,IAAI;AAE5E,MAAa,qBAAqB,IAAI,gBAAgB;AACtD,MAAa,wBAAwB,IAAI,mBAAmB;AAQ5D,MAAM,qBAAqB,EACzB,MACA,UACA,gBAAgB,oBAChB,QAAQ,gBACR,GAAG,WACmD;CACtD,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,CAAC,IAAI;CAEjD,gBAAgB;EACd,IAAI,MAAM,aAAa,IAAI;CAC7B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,qBAAqB,kBAAkB;EAC3C,aAAa,KAAK;EAClB,qBAAqB;CACvB,GAAG,CAAC,kBAAkB,CAAC;CAEvB,MAAM,UAAU,eAAe,EAAE,gBAAgB,mBAAmB,IAAI,CAAC,kBAAkB,CAAC;CAE5F,MAAM,EAAE,QAAQ,KAAK,aAAa,eAA+B,SAAS,cAAc;CACxF,MAAM,QAAQ,eACL;EAAY;EAAgD;CAAO,IAC1E,CAAC,QAAQ,QAAQ,CACnB;CAEA,IAAI,CAAC,WAAW,OAAO;CAEvB,OACE,oBAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,oBAAC,qBAAD;GAAqB,OAAO;GAC1B,UAAA,oBAAC,oBAAD;IAAoB,OAAO;IACzB,UAAA,oBAAC,OAAO,MAAR;KAAa,OAAA;KAAM,MAAA;KAAK,GAAI;KACzB;IACU,CAAA;GACK,CAAA;EACD,CAAA;CACL,CAAA;AAEtB;AAEA,MAAM,wBAAwB,EAAE,QAAQ,gBAAgB,UAAU,GAAG,WAA2B;CAC9F,MAAM,EAAE,QAAQ,KAAK,aAAa,eAA+B,SAAS,cAAc;CACxF,MAAM,QAAQ,eACL;EAAY;EAAgD;CAAO,IAC1E,CAAC,QAAQ,QAAQ,CACnB;CACA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,OAAO,MAAR;GAAa,OAAA;GAAM,GAAI;GACpB;EACU,CAAA;CACK,CAAA;AAExB;AAEA,MAAa,aAAa,EAAE,MAAM,gBAAgB,GAAG,WAA2B;CAC9E,IAAI,SAAS,KAAA,GACX,OAAO,oBAAC,mBAAD;EAAyB;EAAsB;EAAgB,GAAI;CAAO,CAAA;CAEnF,OAAO,oBAAC,sBAAD,EAAsB,GAAI,KAAO,CAAA;AAC1C;AAMA,MAAa,eAAe,EAAE,WAAW,GAAG,WAA6B;CACvE,MAAM,aAAa,cAAc;CACjC,OAAO,oBAAC,OAAO,QAAR;EAAe,WAAW,aAAa,cAAc,KAAA;EAAW,GAAI;CAAO,CAAA;AACpF;AAIA,MAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,OAAO,UAAR;CACE,GAAI;CACJ,WAAW,oBAAoB,OAAO,UAAU,SAAgB;AACjE,CAAA;AAKH,MAAa,iBAAiB,EAAE,WAAW,OAAO,GAAG,WAA+B;CAClF,MAAM,OAAO,aAAa;CAC1B,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,mBAAmB;CAClC,MAAM,aAAa,OAAO,WAAW,KAAA,IAAY,EAAE,QAAQ,MAAM,OAAO,IAAI,KAAA;CAE5E,IAAI,SAAS,MACX,OACE,oBAAC,OAAO,UAAR;EACE,GAAI;EACJ,WAAW,GAAG,OAAO,UAAU,SAAmB;EAClD,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO,YAAY;EAAO;EACrD,QACE,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,OAAO,IAAI,EAAE;GACjC,SAAS,EAAE,SAAS,EAAE;GACtB,YAAY;EACb,CAAA;CAEJ,CAAA;CAIL,OACE,oBAAC,OAAO,UAAR;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,UAAU,SAAgB;EAChE,OAAO;GAAE,GAAG;GAAY,GAAG;EAAM;CAClC,CAAA;AAEL;AASA,MAAa,cAAc,EACzB,WACA,UACA,OACA,OACA,aACA,gBACA,YACA,KAAK,cACL,GAAG,WACkB;CACrB,MAAM,OAAO,aAAa;CAC1B,MAAM,UAAU,gBAAgB;CAChC,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,mBAAmB;CAClC,MAAM,mBAAmB,OAAO,WAAW,KAAA,IAAY,EAAE,QAAQ,MAAM,SAAS,EAAE,IAAI,KAAA;CACtF,MAAM,cAAc,aAAa,CAAC,cAAc,OAAO,QAAQ,CAAC;CAEhE,IAAI,SAAS,QAAQ,SACnB,OACE,oBAAC,OAAO,OAAR;EACE,GAAI;EACJ,WAAW,GAAG,OAAO,OAAO,SAAmB;EAC/C,KAAK;EACL,OAAO;GAAE,GAAG;GAAkB,GAAG;EAAW;EAE5C,UAAA,oBAAC,iBAAD;GAAiB,gBAAgB,QAAQ;GACtC,UAAA,OACC,8BAAC,OAAO,KAAR;IACE,GAAI;IACJ,GAAI;IACJ,WAAW,GAAG,OAAO,YAAY,cAAc;IAC/C,KAAI;IACJ,OAAO;KAAE,UAAU,SAAS,KAAA;KAAW,YAAY;KAAQ,GAAG;IAAM;GAG1D,GADT,QACS,IACV;EACW,CAAA;CACL,CAAA;CAIlB,OACE,oBAAC,OAAO,OAAR;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAgB;EAC7D,KAAK;EACL,OAAO;GAAE,GAAG;GAAkB,GAAG;EAAW;EAE5C,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,YAAY,cAAc;GAC/C,OAAO;IAAE,UAAU,SAAS,KAAA;IAAW,GAAG;GAAM;GAE/C;EACE,CAAA;CACO,CAAA;AAElB;AAMA,MAAa,eAAe,EAAE,WAAW,GAAG,WAC1C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAI,CAAA;AAK3D,MAAa,cAAc,EAAE,WAAW,GAAG,WACzC,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;AAAW,CAAA;AAKlG,MAAa,mBAAoD,OAAO;AAMxE,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAC3C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,SAAS,SAAS;AAAI,CAAA;AAO5D,MAAa,eAAe,EAAE,WAAW,GAAG,WAC1C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAI,CAAA;AAK3D,MAAa,cAAc,EAAE,WAAW,UAAU,GAAG,WACnD,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;CAClF,UAAA,YAAY,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;AACf,CAAA;AAYhB,MAAa,gBAAgB,EAC3B,UACA,WACA,cACA,KAAK,SACL,GAAG,WACoB;CACvB,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAAe;EAC/B,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EAAE,MAAM,GAAG,cAAc;GAC/B,OAAO;EACT,EAAA,CAAG;EAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;EACrE,OAAO,aAAa,UAAiB;GACnC,GAAG;GACH,KAAK,UAAU;IAAE,SAAiB;IAAM,MAAc;IAAK;GAAO,CAAC;EACrE,CAAC;CACH;CAEA,IAAI,eAAe,QAAQ,GACzB,OACE,oBAAC,OAAO,SAAR;EACE,GAAI;EACO;EACX,cAAc;EACd,QAAQ;CACT,CAAA;CAIL,OACE,oBAAC,OAAO,SAAR;EACE,GAAI;EACO;EACX,cAAc;EACd,KAAK;EAEJ;CACa,CAAA;AAEpB"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n cloneElement,\n createContext,\n isValidElement,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n onExitComplete?: () => void;\n zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n open,\n children,\n onExitComplete: onExitCompleteProp,\n zIndex: explicitZIndex,\n ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n const [isPresent, setIsPresent] = useState(!!open);\n\n useEffect(() => {\n if (open) setIsPresent(true);\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsPresent(false);\n onExitCompleteProp?.();\n }, [onExitCompleteProp]);\n\n const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n\n if (!isPresent) return null;\n\n return (\n <ModalOpenContext value={open}>\n <ModalActionsContext value={actions}>\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal open {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n </ModalActionsContext>\n </ModalOpenContext>\n );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n return (\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n if (open !== undefined) {\n return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n }\n return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n const appElement = useAppElement();\n return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n <Dialog.Viewport\n {...rest}\n className={mergeStateClassName(styles.viewport, className as any) as any}\n />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n const open = useModalOpen();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n if (open !== null) {\n return (\n <Dialog.Backdrop\n {...rest}\n className={cx(styles.backdrop, className as string)}\n style={{ ...layerStyle, ...style, transition: 'none' }}\n render={\n <Motion.div\n animate={{ opacity: open ? 1 : 0 }}\n initial={{ opacity: 0 }}\n transition={backdropTransition}\n />\n }\n />\n );\n }\n\n return (\n <Dialog.Backdrop\n {...rest}\n className={mergeStateClassName(styles.backdrop, className as any) as any}\n style={{ ...layerStyle, ...style }}\n />\n );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n motionProps?: Record<string, any>;\n panelClassName?: string;\n popupStyle?: React.CSSProperties;\n width?: number | string;\n};\nexport const ModalPopup = ({\n className,\n children,\n width,\n style,\n motionProps,\n panelClassName,\n popupStyle,\n ref: forwardedRef,\n ...rest\n}: ModalPopupProps) => {\n const open = useModalOpen();\n const actions = useModalActions();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n if (open !== null && actions) {\n return (\n <Dialog.Popup\n {...rest}\n className={cx(styles.popup, className as string)}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <AnimatePresence onExitComplete={actions.onExitComplete}>\n {open ? (\n <Motion.div\n {...modalMotionConfig}\n {...motionProps}\n className={cx(styles.popupInner, panelClassName)}\n key=\"modal-popup-panel\"\n style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n >\n {children}\n </Motion.div>\n ) : null}\n </AnimatePresence>\n </Dialog.Popup>\n );\n }\n\n return (\n <Dialog.Popup\n {...rest}\n className={mergeStateClassName(styles.popup, className as any) as any}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <div\n className={cx(styles.popupInner, panelClassName)}\n style={{ maxWidth: width ?? undefined, ...style }}\n >\n {children}\n </div>\n </Dialog.Popup>\n );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n {children ?? <X size={16} />}\n </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n 'children' | 'render'\n> & {\n children?: React.ReactNode;\n nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: ModalTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n render={renderer as any}\n />\n );\n }\n\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Dialog.Trigger>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, 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 { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n id: string;\n props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\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 return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n const { close } = useModalContext();\n const [loading, setLoading] = useState(false);\n\n const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n const handleCancel = useCallback(() => {\n close();\n onCancel?.();\n }, [close, onCancel]);\n\n const handleOk = useCallback(async () => {\n if (onOk) {\n try {\n const result = onOk();\n if (result && typeof (result as any).then === 'function') {\n setLoading(true);\n await result;\n setLoading(false);\n }\n } catch {\n setLoading(false);\n return;\n }\n }\n close();\n }, [close, onOk]);\n\n return (\n <>\n {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n <ModalFooter>\n <Button onClick={handleCancel}>{cancelText}</Button>\n <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n {okText}\n </Button>\n </ModalFooter>\n </>\n );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n createModal: (props: ImperativeModalProps) => ModalInstance;\n ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n const systemId = systemSeed++;\n const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n // --- Stack state (isolated per system) ---\n let modalStack: ModalStackEntry[] = [];\n let modalSeed = 0;\n const listeners = new Set<() => void>();\n\n const notify = () => listeners.forEach((l) => l());\n const subscribe = (l: () => void) => {\n listeners.add(l);\n return () => listeners.delete(l);\n };\n const EMPTY: ModalStackEntry[] = [];\n const getSnapshot = () => modalStack;\n const getServerSnapshot = () => EMPTY;\n\n // --- Stack operations ---\n\n const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n changed = true;\n return { ...item, props: { ...item.props, ...next } };\n });\n if (changed) notify();\n };\n\n const closeModal = (id: string) => {\n updateModal(id, { open: false });\n };\n\n const destroyModal = (id: string) => {\n const next = modalStack.filter((item) => item.id !== id);\n if (next.length === modalStack.length) return;\n modalStack = next;\n notify();\n };\n\n // --- Stack Item (captures operations via closure) ---\n\n const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n const { id, props } = entry;\n const {\n children,\n classNames,\n content,\n footer,\n maskClosable,\n onOpenChange,\n onOpenChangeComplete,\n open,\n styles: semanticStyles,\n title,\n width,\n } = props;\n\n const isOpen = open ?? true;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { reason: string }) => {\n if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n if (!nextOpen) closeModal(id);\n onOpenChange?.(nextOpen);\n },\n [id, maskClosable, onOpenChange],\n );\n\n const handleExitComplete = useCallback(() => {\n onOpenChangeComplete?.(false);\n destroyModal(id);\n }, [id, onOpenChangeComplete]);\n\n const close = useCallback(() => closeModal(id), [id]);\n const setCanDismissByClickOutside = useCallback(\n (value: boolean) => updateModal(id, { maskClosable: value }),\n [id],\n );\n\n const showTitle = title !== undefined && title !== false && title !== null;\n\n return (\n <ModalContext value={{ close, setCanDismissByClickOutside }}>\n <ModalRoot\n open={isOpen}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal>\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n <ModalPopup\n className={classNames?.popup}\n popupStyle={semanticStyles?.popup}\n width={width}\n >\n {showTitle && (\n <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n </ModalHeader>\n )}\n <ModalContent\n className={cx(!showTitle && styles.contentNoHeader, classNames?.content)}\n style={semanticStyles?.content}\n >\n {content ?? children}\n </ModalContent>\n {footer}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n </ModalContext>\n );\n });\n StackItem.displayName = 'ModalStackItem';\n\n const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n });\n StackRenderer.displayName = 'ModalStackRenderer';\n\n // --- ModalHost ---\n\n const Host = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n const scope = root ?? document.body;\n return registerDevSingleton(singletonName, scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortalWrapper root={root}>\n <StackRenderer stack={stack} />\n </ModalPortalWrapper>\n );\n };\n\n // --- createModal ---\n\n const create = (props: ImperativeModalProps): ModalInstance => {\n const id = `base-modal-${Date.now()}-${modalSeed++}`;\n modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n };\n\n // --- confirmModal ---\n\n const confirm = (config: ModalConfirmConfig) => {\n const instance = create({\n content: <ConfirmBody config={config} />,\n styles: { content: { padding: 0 } },\n title: config.title,\n width: 420,\n });\n\n return {\n close: instance.close,\n destroy: instance.destroy,\n };\n };\n\n return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n id: string;\n props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\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 return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n const { close } = useModalContext();\n const [loading, setLoading] = useState(false);\n\n const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n const handleCancel = useCallback(() => {\n close();\n onCancel?.();\n }, [close, onCancel]);\n\n const handleOk = useCallback(async () => {\n if (onOk) {\n try {\n const result = onOk();\n if (result && typeof (result as any).then === 'function') {\n setLoading(true);\n await result;\n setLoading(false);\n }\n } catch {\n setLoading(false);\n return;\n }\n }\n close();\n }, [close, onOk]);\n\n return (\n <>\n {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n <ModalFooter>\n <Button onClick={handleCancel}>{cancelText}</Button>\n <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n {okText}\n </Button>\n </ModalFooter>\n </>\n );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n createModal: (props: ImperativeModalProps) => ModalInstance;\n ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n const systemId = systemSeed++;\n const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n // --- Stack state (isolated per system) ---\n let modalStack: ModalStackEntry[] = [];\n let modalSeed = 0;\n const listeners = new Set<() => void>();\n\n const notify = () => listeners.forEach((l) => l());\n const subscribe = (l: () => void) => {\n listeners.add(l);\n return () => listeners.delete(l);\n };\n const EMPTY: ModalStackEntry[] = [];\n const getSnapshot = () => modalStack;\n const getServerSnapshot = () => EMPTY;\n\n // --- Stack operations ---\n\n const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n changed = true;\n return { ...item, props: { ...item.props, ...next } };\n });\n if (changed) notify();\n };\n\n const closeModal = (id: string) => {\n updateModal(id, { open: false });\n };\n\n const destroyModal = (id: string) => {\n const next = modalStack.filter((item) => item.id !== id);\n if (next.length === modalStack.length) return;\n modalStack = next;\n notify();\n };\n\n // --- Stack Item (captures operations via closure) ---\n\n const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n const { id, props } = entry;\n const {\n children,\n classNames,\n content,\n footer,\n maskClosable,\n onOpenChange,\n onOpenChangeComplete,\n open,\n styles: semanticStyles,\n title,\n width,\n } = props;\n\n const isOpen = open ?? true;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { reason: string }) => {\n if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n if (!nextOpen) closeModal(id);\n onOpenChange?.(nextOpen);\n },\n [id, maskClosable, onOpenChange],\n );\n\n const handleExitComplete = useCallback(() => {\n onOpenChangeComplete?.(false);\n destroyModal(id);\n }, [id, onOpenChangeComplete]);\n\n const close = useCallback(() => closeModal(id), [id]);\n const setCanDismissByClickOutside = useCallback(\n (value: boolean) => updateModal(id, { maskClosable: value }),\n [id],\n );\n\n const showTitle = title !== undefined && title !== false && title !== null;\n\n return (\n <ModalContext value={{ close, setCanDismissByClickOutside }}>\n <ModalRoot\n open={isOpen}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal>\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n <ModalPopup\n className={classNames?.popup}\n popupStyle={semanticStyles?.popup}\n width={width}\n >\n {showTitle && (\n <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n </ModalHeader>\n )}\n <ModalContent\n className={cx(!showTitle && styles.contentNoHeader, classNames?.content)}\n style={semanticStyles?.content}\n >\n {content ?? children}\n </ModalContent>\n {footer}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n </ModalContext>\n );\n });\n StackItem.displayName = 'ModalStackItem';\n\n const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n });\n StackRenderer.displayName = 'ModalStackRenderer';\n\n // --- ModalHost ---\n\n const Host = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n const scope = root ?? document.body;\n return registerDevSingleton(singletonName, scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortalWrapper root={root}>\n <StackRenderer stack={stack} />\n </ModalPortalWrapper>\n );\n };\n\n // --- createModal ---\n\n const create = (props: ImperativeModalProps): ModalInstance => {\n const id = `base-modal-${Date.now()}-${modalSeed++}`;\n modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n };\n\n // --- confirmModal ---\n\n const confirm = (config: ModalConfirmConfig) => {\n const instance = create({\n content: <ConfirmBody config={config} />,\n styles: { content: { padding: 0 } },\n title: config.title,\n width: config.width ?? 420,\n });\n\n return {\n close: instance.close,\n destroy: instance.destroy,\n };\n };\n\n return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
|
|
@@ -101,6 +101,7 @@ interface ModalConfirmConfig {
|
|
|
101
101
|
onCancel?: () => void;
|
|
102
102
|
onOk?: (() => void) | (() => Promise<void>);
|
|
103
103
|
title?: ReactNode;
|
|
104
|
+
width?: number | string;
|
|
104
105
|
}
|
|
105
106
|
//#endregion
|
|
106
107
|
export { BaseModalProps, ImperativeModalProps, ModalComponentProps, ModalConfirmConfig, ModalContextValue, ModalInstance };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverPortal.mjs","names":[],"sources":["../../../src/base-ui/Popover/PopoverPortal.tsx"],"sourcesContent":["'use client';\n\nimport { useAppElement } from '@/ThemeProvider';\n\nexport const usePopoverPortalContainer = (\n root?: HTMLElement | ShadowRoot | null,\n): HTMLElement | null => {\n const appElement = useAppElement();\n if (typeof document === 'undefined') return null;\n return (root as HTMLElement | null) ?? appElement ?? document.body;\n};\n"],"mappings":";;;AAIA,MAAa,6BACX,SACuB;CACvB,MAAM,aAAa,cAAc;CACjC,IAAI,OAAO,aAAa,aAAa,OAAO;CAC5C,OAAQ,QAA+B,cAAc,SAAS;AAChE"}
|
|
1
|
+
{"version":3,"file":"PopoverPortal.mjs","names":[],"sources":["../../../src/base-ui/Popover/PopoverPortal.tsx"],"sourcesContent":["'use client';\n\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\n\nexport const usePopoverPortalContainer = (\n root?: HTMLElement | ShadowRoot | null,\n): HTMLElement | null => {\n const appElement = useAppElement();\n if (typeof document === 'undefined') return null;\n return (root as HTMLElement | null) ?? appElement ?? document.body;\n};\n"],"mappings":";;;AAIA,MAAa,6BACX,SACuB;CACvB,MAAM,aAAa,cAAc;CACjC,IAAI,OAAO,aAAa,aAAa,OAAO;CAC5C,OAAQ,QAA+B,cAAc,SAAS;AAChE"}
|
|
@@ -11,6 +11,11 @@ const circleDiameterMap = {
|
|
|
11
11
|
middle: 40,
|
|
12
12
|
small: 20
|
|
13
13
|
};
|
|
14
|
+
const blockHeightMap = {
|
|
15
|
+
large: 12,
|
|
16
|
+
middle: 8,
|
|
17
|
+
small: 4
|
|
18
|
+
};
|
|
14
19
|
const circleStrokeMap = {
|
|
15
20
|
large: 4,
|
|
16
21
|
middle: 3,
|
|
@@ -128,20 +133,17 @@ const Progress = memo(({ className, format, label, percent, ref, segments = 20,
|
|
|
128
133
|
style,
|
|
129
134
|
...progressAria,
|
|
130
135
|
...rest,
|
|
131
|
-
children: [/* @__PURE__ */
|
|
132
|
-
className: cx(styles.
|
|
136
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
137
|
+
className: cx(styles.split, heightClass("block")),
|
|
133
138
|
style: heightStyle,
|
|
134
|
-
children: /* @__PURE__ */ jsx("
|
|
135
|
-
className: styles.
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
children: /* @__PURE__ */ jsx("span", { className: styles.insetCap })
|
|
143
|
-
})
|
|
144
|
-
})
|
|
139
|
+
children: [clamped > 0 && /* @__PURE__ */ jsx("span", {
|
|
140
|
+
className: cx(styles.splitFill, status === "active" && styles.barActive),
|
|
141
|
+
style: {
|
|
142
|
+
backgroundColor: barColor,
|
|
143
|
+
minWidth: typeof size === "number" ? size : blockHeightMap[size],
|
|
144
|
+
width: clamped === 100 ? "100%" : `calc((100% - 3px) * ${clamped / 100})`
|
|
145
|
+
}
|
|
146
|
+
}), clamped < 100 && /* @__PURE__ */ jsx("span", { className: styles.splitRest })]
|
|
145
147
|
}), showInfo && /* @__PURE__ */ jsx("span", {
|
|
146
148
|
className: styles.rowInfo,
|
|
147
149
|
children: info
|
|
@@ -164,7 +166,7 @@ const Progress = memo(({ className, format, label, percent, ref, segments = 20,
|
|
|
164
166
|
style: heightStyle,
|
|
165
167
|
children: /* @__PURE__ */ jsx("div", {
|
|
166
168
|
style: {
|
|
167
|
-
|
|
169
|
+
backgroundColor: barColor,
|
|
168
170
|
width: `${clamped}%`
|
|
169
171
|
},
|
|
170
172
|
className: cx(styles.bar, variant === "line" && status === "active" && styles.barActive)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.mjs","names":[],"sources":["../../../src/base-ui/Progress/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles, trackHeight } from './style';\nimport type { ProgressProps } from './type';\n\nconst circleDiameterMap: Record<'small' | 'middle' | 'large', number> = {\n large: 72,\n middle: 40,\n small: 20,\n};\nconst circleStrokeMap: Record<'small' | 'middle' | 'large', number> = {\n large: 4,\n middle: 3,\n small: 2,\n};\n\nconst statusColor = {\n active: cssVar.colorInfo,\n exception: cssVar.colorError,\n success: cssVar.colorSuccess,\n};\n\nconst Progress = memo<ProgressProps>(\n ({\n className,\n format,\n label,\n percent,\n ref,\n segments = 20,\n showInfo = true,\n size = 'middle',\n status = 'normal',\n strokeColor,\n style,\n type = 'line',\n variant = 'line',\n ...rest\n }) => {\n const clamped = Math.min(100, Math.max(0, percent));\n const barColor =\n strokeColor ?? (status === 'normal' ? cssVar.colorPrimary : statusColor[status]);\n\n const info = useMemo(() => {\n if (status === 'success') return <Icon icon={Check} size={14} style={{ color: barColor }} />;\n if (status === 'exception') return <Icon icon={X} size={14} style={{ color: barColor }} />;\n return format ? format(clamped) : `${clamped}%`;\n }, [status, format, clamped, barColor]);\n\n const ariaValueText = useMemo(() => {\n if (!format) return undefined;\n const value = format(clamped);\n return typeof value === 'string' || typeof value === 'number' ? String(value) : undefined;\n }, [format, clamped]);\n\n const progressAria = {\n 'aria-valuemax': 100,\n 'aria-valuemin': 0,\n 'aria-valuenow': clamped,\n 'aria-valuetext': ariaValueText,\n 'role': 'progressbar' as const,\n };\n\n if (type === 'circle') {\n const isPreset = typeof size === 'string';\n const diameter = isPreset\n ? circleDiameterMap[size as 'small' | 'middle' | 'large']\n : (size as number);\n const stroke = isPreset\n ? circleStrokeMap[size as 'small' | 'middle' | 'large']\n : Math.max(2, Math.round((diameter * 3) / 40));\n const radius = diameter / 2 - stroke;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - clamped / 100);\n\n return (\n <div\n className={cx(styles.circleRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <svg\n className={styles.circleSvg}\n height={diameter}\n viewBox={`0 0 ${diameter} ${diameter}`}\n width={diameter}\n >\n <circle\n className={styles.circleTrack}\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n strokeWidth={stroke}\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n fill=\"none\"\n r={radius}\n stroke={barColor}\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n strokeLinecap=\"round\"\n strokeWidth={stroke}\n style={{ transition: 'stroke-dashoffset 0.3s' }}\n />\n </svg>\n {showInfo && diameter >= 40 && (\n <span\n className={styles.circleInfo}\n style={{ fontSize: Math.round(diameter * 0.15 + 6) }}\n >\n {info}\n </span>\n )}\n </div>\n );\n }\n\n const heightStyle = typeof size === 'number' ? { height: size } : undefined;\n const heightClass = (family: 'line' | 'block') =>\n typeof size === 'number' ? undefined : trackHeight({ family, size });\n\n if (variant === 'segments') {\n const filled = Math.round((segments * clamped) / 100);\n\n return (\n <div\n className={cx(styles.rowRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <div className={cx(styles.segments, heightClass('block'))} style={heightStyle}>\n {Array.from({ length: segments }, (_, index) => (\n <span\n className={cx(styles.segment, index < filled && styles.segmentOn)}\n key={index}\n style={index < filled ? { background: barColor } : undefined}\n />\n ))}\n </div>\n {showInfo && <span className={styles.rowInfo}>{info}</span>}\n </div>\n );\n }\n\n if (variant === 'inset') {\n return (\n <div\n className={cx(styles.rowRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <div\n className={cx(styles.rowTrack, styles.insetTrack, heightClass('block'))}\n style={heightStyle}\n >\n <div className={styles.insetBarWrapper}>\n <div className={styles.bar} style={{ background: barColor, width: `${clamped}%` }}>\n <span className={styles.insetCap} />\n </div>\n </div>\n </div>\n {showInfo && <span className={styles.rowInfo}>{info}</span>}\n </div>\n );\n }\n\n return (\n <div\n className={cx(styles.lineRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n {(label || showInfo) && (\n <div className={styles.lineMeta}>\n <span>{label}</span>\n {showInfo && <span className={styles.lineValue}>{info}</span>}\n </div>\n )}\n <div className={cx(styles.lineTrack, heightClass('line'))} style={heightStyle}>\n <div\n style={{ background: barColor, width: `${clamped}%` }}\n className={cx(\n styles.bar,\n variant === 'line' && status === 'active' && styles.barActive,\n )}\n />\n </div>\n </div>\n );\n },\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Progress.mjs","names":[],"sources":["../../../src/base-ui/Progress/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles, trackHeight } from './style';\nimport type { ProgressProps } from './type';\n\nconst circleDiameterMap: Record<'small' | 'middle' | 'large', number> = {\n large: 72,\n middle: 40,\n small: 20,\n};\nconst blockHeightMap: Record<'small' | 'middle' | 'large', number> = {\n large: 12,\n middle: 8,\n small: 4,\n};\nconst circleStrokeMap: Record<'small' | 'middle' | 'large', number> = {\n large: 4,\n middle: 3,\n small: 2,\n};\n\nconst statusColor = {\n active: cssVar.colorInfo,\n exception: cssVar.colorError,\n success: cssVar.colorSuccess,\n};\n\nconst Progress = memo<ProgressProps>(\n ({\n className,\n format,\n label,\n percent,\n ref,\n segments = 20,\n showInfo = true,\n size = 'middle',\n status = 'normal',\n strokeColor,\n style,\n type = 'line',\n variant = 'line',\n ...rest\n }) => {\n const clamped = Math.min(100, Math.max(0, percent));\n const barColor =\n strokeColor ?? (status === 'normal' ? cssVar.colorPrimary : statusColor[status]);\n\n const info = useMemo(() => {\n if (status === 'success') return <Icon icon={Check} size={14} style={{ color: barColor }} />;\n if (status === 'exception') return <Icon icon={X} size={14} style={{ color: barColor }} />;\n return format ? format(clamped) : `${clamped}%`;\n }, [status, format, clamped, barColor]);\n\n const ariaValueText = useMemo(() => {\n if (!format) return undefined;\n const value = format(clamped);\n return typeof value === 'string' || typeof value === 'number' ? String(value) : undefined;\n }, [format, clamped]);\n\n const progressAria = {\n 'aria-valuemax': 100,\n 'aria-valuemin': 0,\n 'aria-valuenow': clamped,\n 'aria-valuetext': ariaValueText,\n 'role': 'progressbar' as const,\n };\n\n if (type === 'circle') {\n const isPreset = typeof size === 'string';\n const diameter = isPreset\n ? circleDiameterMap[size as 'small' | 'middle' | 'large']\n : (size as number);\n const stroke = isPreset\n ? circleStrokeMap[size as 'small' | 'middle' | 'large']\n : Math.max(2, Math.round((diameter * 3) / 40));\n const radius = diameter / 2 - stroke;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - clamped / 100);\n\n return (\n <div\n className={cx(styles.circleRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <svg\n className={styles.circleSvg}\n height={diameter}\n viewBox={`0 0 ${diameter} ${diameter}`}\n width={diameter}\n >\n <circle\n className={styles.circleTrack}\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n strokeWidth={stroke}\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n fill=\"none\"\n r={radius}\n stroke={barColor}\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n strokeLinecap=\"round\"\n strokeWidth={stroke}\n style={{ transition: 'stroke-dashoffset 0.3s' }}\n />\n </svg>\n {showInfo && diameter >= 40 && (\n <span\n className={styles.circleInfo}\n style={{ fontSize: Math.round(diameter * 0.15 + 6) }}\n >\n {info}\n </span>\n )}\n </div>\n );\n }\n\n const heightStyle = typeof size === 'number' ? { height: size } : undefined;\n const heightClass = (family: 'line' | 'block') =>\n typeof size === 'number' ? undefined : trackHeight({ family, size });\n\n if (variant === 'segments') {\n const filled = Math.round((segments * clamped) / 100);\n\n return (\n <div\n className={cx(styles.rowRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <div className={cx(styles.segments, heightClass('block'))} style={heightStyle}>\n {Array.from({ length: segments }, (_, index) => (\n <span\n className={cx(styles.segment, index < filled && styles.segmentOn)}\n key={index}\n style={index < filled ? { background: barColor } : undefined}\n />\n ))}\n </div>\n {showInfo && <span className={styles.rowInfo}>{info}</span>}\n </div>\n );\n }\n\n if (variant === 'inset') {\n return (\n <div\n className={cx(styles.rowRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <div className={cx(styles.split, heightClass('block'))} style={heightStyle}>\n {clamped > 0 && (\n <span\n className={cx(styles.splitFill, status === 'active' && styles.barActive)}\n style={{\n backgroundColor: barColor,\n minWidth: typeof size === 'number' ? size : blockHeightMap[size],\n width: clamped === 100 ? '100%' : `calc((100% - 3px) * ${clamped / 100})`,\n }}\n />\n )}\n {clamped < 100 && <span className={styles.splitRest} />}\n </div>\n {showInfo && <span className={styles.rowInfo}>{info}</span>}\n </div>\n );\n }\n\n return (\n <div\n className={cx(styles.lineRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n {(label || showInfo) && (\n <div className={styles.lineMeta}>\n <span>{label}</span>\n {showInfo && <span className={styles.lineValue}>{info}</span>}\n </div>\n )}\n <div className={cx(styles.lineTrack, heightClass('line'))} style={heightStyle}>\n <div\n style={{ backgroundColor: barColor, width: `${clamped}%` }}\n className={cx(\n styles.bar,\n variant === 'line' && status === 'active' && styles.barActive,\n )}\n />\n </div>\n </div>\n );\n },\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":"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"}
|
|
@@ -58,28 +58,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
58
58
|
circleTrack: css`
|
|
59
59
|
fill: none;
|
|
60
60
|
stroke: ${cssVar.colorFillTertiary};
|
|
61
|
-
`,
|
|
62
|
-
insetBarWrapper: css`
|
|
63
|
-
position: relative;
|
|
64
|
-
overflow: hidden;
|
|
65
|
-
height: 100%;
|
|
66
|
-
border-radius: 999px;
|
|
67
|
-
`,
|
|
68
|
-
insetCap: css`
|
|
69
|
-
position: absolute;
|
|
70
|
-
inset-block: 0;
|
|
71
|
-
inset-inline-end: 0;
|
|
72
|
-
|
|
73
|
-
width: 4px;
|
|
74
|
-
border-radius: 999px;
|
|
75
|
-
|
|
76
|
-
opacity: 0.6;
|
|
77
|
-
background: ${cssVar.colorBgContainer};
|
|
78
|
-
`,
|
|
79
|
-
insetTrack: css`
|
|
80
|
-
padding: 2px;
|
|
81
|
-
border-radius: 999px;
|
|
82
|
-
background: ${cssVar.colorFillTertiary};
|
|
83
61
|
`,
|
|
84
62
|
lineLg: css`
|
|
85
63
|
height: 6px;
|
|
@@ -131,9 +109,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
131
109
|
align-items: center;
|
|
132
110
|
|
|
133
111
|
width: 100%;
|
|
134
|
-
`,
|
|
135
|
-
rowTrack: css`
|
|
136
|
-
flex: 1;
|
|
137
112
|
`,
|
|
138
113
|
segment: css`
|
|
139
114
|
flex: 1;
|
|
@@ -148,6 +123,22 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
148
123
|
flex: 1;
|
|
149
124
|
gap: 2px;
|
|
150
125
|
min-width: 0;
|
|
126
|
+
`,
|
|
127
|
+
split: css`
|
|
128
|
+
display: flex;
|
|
129
|
+
flex: 1;
|
|
130
|
+
gap: 3px;
|
|
131
|
+
min-width: 0;
|
|
132
|
+
`,
|
|
133
|
+
splitFill: css`
|
|
134
|
+
flex: none;
|
|
135
|
+
border-radius: 999px;
|
|
136
|
+
transition: width 0.3s;
|
|
137
|
+
`,
|
|
138
|
+
splitRest: css`
|
|
139
|
+
flex: 1;
|
|
140
|
+
border-radius: 999px;
|
|
141
|
+
background: ${cssVar.colorFillSecondary};
|
|
151
142
|
`
|
|
152
143
|
}));
|
|
153
144
|
const trackHeight = cva(void 0, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Progress/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst shimmer = keyframes`\n from {\n background-position: -80px 0;\n }\n to {\n background-position: 200px 0;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n bar: css`\n height: 100%;\n border-radius: 999px;\n transition: width 0.3s;\n `,\n barActive: css`\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),\n transparent\n );\n background-size: 80px 100%;\n animation: ${shimmer} 1.2s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n `,\n blockLg: css`\n height: 12px;\n `,\n blockMd: css`\n height: 8px;\n `,\n blockSm: css`\n height: 4px;\n `,\n circleInfo: css`\n position: absolute;\n\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: ${cssVar.colorText};\n white-space: nowrap;\n `,\n circleRoot: css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n circleSvg: css`\n rotate: -90deg;\n `,\n circleTrack: css`\n fill: none;\n stroke: ${cssVar.colorFillTertiary};\n `,\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Progress/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst shimmer = keyframes`\n from {\n background-position: -80px 0;\n }\n to {\n background-position: 200px 0;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n bar: css`\n height: 100%;\n border-radius: 999px;\n transition: width 0.3s;\n `,\n barActive: css`\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),\n transparent\n );\n background-size: 80px 100%;\n animation: ${shimmer} 1.2s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n `,\n blockLg: css`\n height: 12px;\n `,\n blockMd: css`\n height: 8px;\n `,\n blockSm: css`\n height: 4px;\n `,\n circleInfo: css`\n position: absolute;\n\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: ${cssVar.colorText};\n white-space: nowrap;\n `,\n circleRoot: css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n circleSvg: css`\n rotate: -90deg;\n `,\n circleTrack: css`\n fill: none;\n stroke: ${cssVar.colorFillTertiary};\n `,\n lineLg: css`\n height: 6px;\n `,\n lineMd: css`\n height: 4px;\n `,\n lineMeta: css`\n display: flex;\n gap: 12px;\n align-items: baseline;\n justify-content: space-between;\n\n font-size: ${cssVar.fontSizeSM};\n color: ${cssVar.colorTextSecondary};\n `,\n lineRoot: css`\n display: flex;\n flex-direction: column;\n gap: 6px;\n width: 100%;\n `,\n lineSm: css`\n height: 2px;\n `,\n lineTrack: css`\n overflow: hidden;\n border-radius: 999px;\n background: ${cssVar.colorFillTertiary};\n `,\n lineValue: css`\n font-family: ${cssVar.fontFamilyCode};\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorText};\n `,\n rowInfo: css`\n min-width: 3.5ch;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: ${cssVar.fontSizeSM};\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n text-align: end;\n `,\n rowRoot: css`\n display: flex;\n flex: 1;\n gap: 10px;\n align-items: center;\n\n width: 100%;\n `,\n segment: css`\n flex: 1;\n border-radius: 1px;\n background: ${cssVar.colorFillTertiary};\n `,\n segmentOn: css`\n background: ${cssVar.colorPrimary};\n `,\n segments: css`\n display: flex;\n flex: 1;\n gap: 2px;\n min-width: 0;\n `,\n split: css`\n display: flex;\n flex: 1;\n gap: 3px;\n min-width: 0;\n `,\n splitFill: css`\n flex: none;\n border-radius: 999px;\n transition: width 0.3s;\n `,\n splitRest: css`\n flex: 1;\n border-radius: 999px;\n background: ${cssVar.colorFillSecondary};\n `,\n}));\n\nexport const trackHeight = cva(undefined, {\n compoundVariants: [\n { className: styles.lineSm, family: 'line', size: 'small' },\n { className: styles.lineMd, family: 'line', size: 'middle' },\n { className: styles.lineLg, family: 'line', size: 'large' },\n { className: styles.blockSm, family: 'block', size: 'small' },\n { className: styles.blockMd, family: 'block', size: 'middle' },\n { className: styles.blockLg, family: 'block', size: 'large' },\n ],\n defaultVariants: {\n family: 'line',\n size: 'middle',\n },\n variants: {\n family: {\n block: null,\n line: null,\n },\n size: {\n large: null,\n middle: null,\n small: null,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAM,UAAU,SAAS;;;;;;;;AASzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,KAAK,GAAG;;;;;CAKR,WAAW,GAAG;;;;2BAIW,OAAO,WAAW;;;;iBAI5B,QAAQ;;;;;;CAMvB,SAAS,GAAG;;;CAGZ,SAAS,GAAG;;;CAGZ,SAAS,GAAG;;;CAGZ,YAAY,GAAG;;;;;aAKJ,OAAO,UAAU;;;CAG5B,YAAY,GAAG;;;;;;CAMf,WAAW,GAAG;;;CAGd,aAAa,GAAG;;cAEJ,OAAO,kBAAkB;;CAErC,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;;iBAME,OAAO,WAAW;aACtB,OAAO,mBAAmB;;CAErC,UAAU,GAAG;;;;;;CAMb,QAAQ,GAAG;;;CAGX,WAAW,GAAG;;;kBAGE,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;mBACG,OAAO,eAAe;;aAE5B,OAAO,UAAU;;CAE5B,SAAS,GAAG;;;mBAGK,OAAO,eAAe;iBACxB,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;CAGrC,SAAS,GAAG;;;;;;;;CAQZ,SAAS,GAAG;;;kBAGI,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;kBACE,OAAO,aAAa;;CAEpC,UAAU,GAAG;;;;;;CAMb,OAAO,GAAG;;;;;;CAMV,WAAW,GAAG;;;;;CAKd,WAAW,GAAG;;;kBAGE,OAAO,mBAAmB;;AAE5C,EAAE;AAEF,MAAa,cAAc,IAAI,KAAA,GAAW;CACxC,kBAAkB;EAChB;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAQ;EAC1D;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAS;EAC3D;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAQ;EAC1D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAQ;EAC5D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAS;EAC7D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAQ;CAC9D;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC"}
|