@lobehub/ui 6.0.0-beta.10 → 6.0.0-beta.11
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/README.md +3 -3
- package/es/Accordion/style.d.mts +2 -2
- package/es/CodeDiff/DiffPanel.mjs +2 -2
- package/es/CodeDiff/DiffPanel.mjs.map +1 -1
- package/es/Form/Form.mjs +6 -2
- package/es/Form/Form.mjs.map +1 -1
- package/es/Form/style.mjs +3 -3
- package/es/Form/style.mjs.map +1 -1
- package/es/Form/type.d.mts +7 -0
- package/es/ProTable/hooks/useFetchData.mjs +1 -1
- package/es/ProTable/hooks/useFetchData.mjs.map +1 -1
- package/es/ProTable/parts/FieldControl.mjs +28 -11
- package/es/ProTable/parts/FieldControl.mjs.map +1 -1
- package/es/ProTable/style.mjs +9 -0
- package/es/ProTable/style.mjs.map +1 -1
- package/es/ProTable/type.d.mts +5 -2
- package/es/Switch/Switch.mjs +8 -1
- package/es/Switch/Switch.mjs.map +1 -1
- package/es/Switch/atoms.d.mts +7 -1
- package/es/Switch/atoms.mjs +20 -4
- package/es/Switch/atoms.mjs.map +1 -1
- package/es/Switch/style.mjs +33 -2
- package/es/Switch/style.mjs.map +1 -1
- package/es/Table/Table.mjs +14 -5
- package/es/Table/Table.mjs.map +1 -1
- package/es/Table/render/FixedFrost.mjs +11 -2
- package/es/Table/render/FixedFrost.mjs.map +1 -1
- package/es/Table/style.mjs +4 -0
- package/es/Table/style.mjs.map +1 -1
- package/es/Tabs/style.d.mts +1 -1
- package/es/Text/style.d.mts +3 -3
- package/es/color/index.d.mts +2 -1
- package/es/color/index.mjs +2 -1
- package/es/color/status/index.d.mts +11 -0
- package/es/index.d.mts +3 -2
- package/es/index.mjs +3 -2
- package/es/style.css +102 -11
- package/es/styles/index.d.mts +3 -2
- package/es/styles/index.mjs +3 -2
- package/es/styles/theme/createLobeToken.d.mts +2 -1
- package/es/styles/theme/createLobeToken.mjs +3 -2
- package/es/styles/theme/createLobeToken.mjs.map +1 -1
- package/es/styles/theme/customPalette.d.mts +6 -0
- package/es/styles/theme/customPalette.mjs +28 -0
- package/es/styles/theme/customPalette.mjs.map +1 -0
- package/es/styles/theme/customPrimary.mjs +52 -17
- package/es/styles/theme/customPrimary.mjs.map +1 -1
- package/es/styles/theme/scope.d.mts +4 -2
- package/es/styles/theme/scope.mjs +53 -20
- package/es/styles/theme/scope.mjs.map +1 -1
- package/es/styles/theme/themeCss.d.mts +1 -0
- package/es/styles/theme/themeCss.mjs +16 -1
- package/es/styles/theme/themeCss.mjs.map +1 -1
- package/es/styles/theme/token/palette.mjs +6 -6
- package/es/styles/theme/token/palette.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
4
|
|
|
5
|
-
<img height="120" src="https://
|
|
6
|
-
<img height="120" src="https://
|
|
7
|
-
<img height="120" src="https://
|
|
5
|
+
<img height="120" src="https://raw.githubusercontent.com/lobehub/lobe-assets/master/packages/assets-logo/assets/logo-3d.webp">
|
|
6
|
+
<img height="120" src="https://raw.githubusercontent.com/lobehub/lobe-assets/master/packages/assets-logo/assets/split.svg">
|
|
7
|
+
<img height="120" src="https://raw.githubusercontent.com/lobehub/lobe-assets/master/packages/assets-emoji/assets/lollipop.webp">
|
|
8
8
|
|
|
9
9
|
<h1>Lobe UI</h1>
|
|
10
10
|
|
package/es/Accordion/style.d.mts
CHANGED
|
@@ -6,9 +6,9 @@ export declare const accordionStyles: {
|
|
|
6
6
|
action: string;
|
|
7
7
|
content: string;
|
|
8
8
|
trigger: string;
|
|
9
|
-
root: string;
|
|
10
|
-
item: string;
|
|
11
9
|
indicator: string;
|
|
10
|
+
item: string;
|
|
11
|
+
root: string;
|
|
12
12
|
itemOutlined: string;
|
|
13
13
|
rootOutlined: string;
|
|
14
14
|
actionAlwaysVisible: string;
|
|
@@ -6,7 +6,7 @@ import Text from "../Text/Text.mjs";
|
|
|
6
6
|
import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
|
|
7
7
|
import Tag from "../Tag/Tag.mjs";
|
|
8
8
|
import { stopPropagation } from "../utils/dom.mjs";
|
|
9
|
-
import { compactActionsCls,
|
|
9
|
+
import { compactActionsCls, prefix, styles, variantStyles } from "./style.mjs";
|
|
10
10
|
import { memo, useCallback, useState } from "react";
|
|
11
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
12
|
import clsx$1 from "clsx";
|
|
@@ -34,7 +34,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
|
|
|
34
34
|
children: actions
|
|
35
35
|
}),
|
|
36
36
|
showHeader && /* @__PURE__ */ jsx(Tag, {
|
|
37
|
-
className:
|
|
37
|
+
className: "lobe-code-diff-lang",
|
|
38
38
|
children: displayName
|
|
39
39
|
}),
|
|
40
40
|
/* @__PURE__ */ jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DiffPanel.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n actions?: ReactNode;\n additions: number;\n body: ReactNode;\n classNames?: {\n body?: string;\n header?: string;\n };\n dataCodeType: string;\n defaultExpand?: boolean;\n deletions: number;\n displayName: string;\n fileName?: string;\n fullFeatured?: boolean;\n showHeader?: boolean;\n styles?: {\n body?: CSSProperties;\n header?: CSSProperties;\n };\n variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n ({\n actions,\n body,\n className,\n classNames,\n dataCodeType,\n defaultExpand = true,\n deletions,\n displayName,\n fileName,\n fullFeatured = true,\n showHeader = true,\n styles: customStyles,\n variant = 'filled',\n additions,\n ...rest\n }) => {\n const [expand, setExpand] = useState(defaultExpand);\n const rootStyles = [styles.root, variantStyles[variant]];\n\n const handleToggleExpand = useCallback(() => {\n setExpand((prev) => !prev);\n }, []);\n\n if (!fullFeatured)\n return (\n <Flexbox\n data-code-type={dataCodeType}\n width={'100%'}\n {...rest}\n {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n >\n <Flexbox\n horizontal\n align=\"center\"\n flex=\"none\"\n gap={4}\n {...styleProps(styles.actionsCompact, compactActionsCls)}\n >\n {actions}\n </Flexbox>\n {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n </Flexbox>\n );\n\n return (\n <Flexbox\n data-code-type={dataCodeType}\n width={'100%'}\n {...rest}\n {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n >\n {showHeader && (\n <Flexbox\n horizontal\n align=\"center\"\n gap={8}\n justify=\"space-between\"\n padding={4}\n paddingInline={variant === 'borderless' ? 0 : undefined}\n onClick={handleToggleExpand}\n {...styleProps(\n [styles.header, variant === 'filled' && styles.headerFilled],\n classNames?.header,\n customStyles?.header,\n )}\n >\n <Flexbox\n horizontal\n align=\"center\"\n className=\"language-title\"\n flex={1}\n gap={4}\n justify=\"flex-start\"\n paddingInline={8}\n >\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={fileName || displayName}\n size={18}\n type=\"file\"\n variant=\"raw\"\n />\n <Text ellipsis fontSize={13}>\n {displayName}\n </Text>\n </Flexbox>\n <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n {actions && (\n <Flexbox\n horizontal\n align=\"center\"\n flex=\"none\"\n gap={4}\n {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n >\n {actions}\n </Flexbox>\n )}\n {(deletions > 0 || additions > 0) && (\n <Flexbox horizontal align=\"center\" gap={8}>\n {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n </Flexbox>\n )}\n <ActionIcon\n icon={expand ? ChevronDown : ChevronRight}\n size=\"small\"\n onClick={handleToggleExpand}\n />\n </Flexbox>\n </Flexbox>\n )}\n <div\n {...styleProps(\n [\n styles.bodyRoot,\n !expand && styles.bodyCollapsed,\n styles.body,\n showHeader && variant !== 'borderless' && styles.bodyDivider,\n ],\n clsx(`${prefix}-body`, classNames?.body),\n customStyles?.body,\n )}\n >\n {body}\n </div>\n </Flexbox>\n );\n },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAa,YAAY,MAAsB,EAC7C,SACA,MACA,WACA,YACA,cACA,gBAAgB,MAChB,WACA,aACA,UACA,eAAe,MACf,aAAa,MACb,QAAQ,cACR,UAAU,UACV,WACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,CAAC,OAAO,MAAM,cAAc,QAAQ;CACvD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAU,SAAQ,CAAC,IAAI;CACzB,GAAG,CAAC,CAAC;CACL,IAAI,CAAC,cAAc,OAAO,qBAACA,mBAAD;EAAS,kBAAgB;EAAc,OAAO;EAAQ,GAAI;EAAM,GAAI,WAAW,YAAYC,OAAK,QAAQ,SAAS,GAAG,KAAK,KAAK;EAA9H,UAAA;GAClB,oBAACD,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,MAAK;IAAO,KAAK;IAAG,GAAI,WAAW,OAAO,gBAAgB,iBAAiB;IAC3G,UAAA;GACM,CAAA;GACR,cAAc,oBAAC,KAAD;IAAK,
|
|
1
|
+
{"version":3,"file":"DiffPanel.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n actions?: ReactNode;\n additions: number;\n body: ReactNode;\n classNames?: {\n body?: string;\n header?: string;\n };\n dataCodeType: string;\n defaultExpand?: boolean;\n deletions: number;\n displayName: string;\n fileName?: string;\n fullFeatured?: boolean;\n showHeader?: boolean;\n styles?: {\n body?: CSSProperties;\n header?: CSSProperties;\n };\n variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n ({\n actions,\n body,\n className,\n classNames,\n dataCodeType,\n defaultExpand = true,\n deletions,\n displayName,\n fileName,\n fullFeatured = true,\n showHeader = true,\n styles: customStyles,\n variant = 'filled',\n additions,\n ...rest\n }) => {\n const [expand, setExpand] = useState(defaultExpand);\n const rootStyles = [styles.root, variantStyles[variant]];\n\n const handleToggleExpand = useCallback(() => {\n setExpand((prev) => !prev);\n }, []);\n\n if (!fullFeatured)\n return (\n <Flexbox\n data-code-type={dataCodeType}\n width={'100%'}\n {...rest}\n {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n >\n <Flexbox\n horizontal\n align=\"center\"\n flex=\"none\"\n gap={4}\n {...styleProps(styles.actionsCompact, compactActionsCls)}\n >\n {actions}\n </Flexbox>\n {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n </Flexbox>\n );\n\n return (\n <Flexbox\n data-code-type={dataCodeType}\n width={'100%'}\n {...rest}\n {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n >\n {showHeader && (\n <Flexbox\n horizontal\n align=\"center\"\n gap={8}\n justify=\"space-between\"\n padding={4}\n paddingInline={variant === 'borderless' ? 0 : undefined}\n onClick={handleToggleExpand}\n {...styleProps(\n [styles.header, variant === 'filled' && styles.headerFilled],\n classNames?.header,\n customStyles?.header,\n )}\n >\n <Flexbox\n horizontal\n align=\"center\"\n className=\"language-title\"\n flex={1}\n gap={4}\n justify=\"flex-start\"\n paddingInline={8}\n >\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={fileName || displayName}\n size={18}\n type=\"file\"\n variant=\"raw\"\n />\n <Text ellipsis fontSize={13}>\n {displayName}\n </Text>\n </Flexbox>\n <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n {actions && (\n <Flexbox\n horizontal\n align=\"center\"\n flex=\"none\"\n gap={4}\n {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n >\n {actions}\n </Flexbox>\n )}\n {(deletions > 0 || additions > 0) && (\n <Flexbox horizontal align=\"center\" gap={8}>\n {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n </Flexbox>\n )}\n <ActionIcon\n icon={expand ? ChevronDown : ChevronRight}\n size=\"small\"\n onClick={handleToggleExpand}\n />\n </Flexbox>\n </Flexbox>\n )}\n <div\n {...styleProps(\n [\n styles.bodyRoot,\n !expand && styles.bodyCollapsed,\n styles.body,\n showHeader && variant !== 'borderless' && styles.bodyDivider,\n ],\n clsx(`${prefix}-body`, classNames?.body),\n customStyles?.body,\n )}\n >\n {body}\n </div>\n </Flexbox>\n );\n },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}
|
package/es/Form/Form.mjs
CHANGED
|
@@ -17,7 +17,9 @@ const serializeForm = (form) => {
|
|
|
17
17
|
const entries = [...new FormData(form).entries()].filter(([, value]) => typeof value === "string");
|
|
18
18
|
return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));
|
|
19
19
|
};
|
|
20
|
-
const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, ...rest }) => {
|
|
20
|
+
const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, compact, itemPadding, ...rest }) => {
|
|
21
|
+
const resolvedGap = gap ?? (compact ? 12 : void 0);
|
|
22
|
+
const resolvedItemPadding = itemPadding ?? (compact ? 10 : void 0);
|
|
21
23
|
const { mobile } = useResponsive();
|
|
22
24
|
const formRef = useRef(null);
|
|
23
25
|
const [submitLoading, setSubmitLoading] = useState(false);
|
|
@@ -124,7 +126,9 @@ const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, it
|
|
|
124
126
|
rootStyles.root,
|
|
125
127
|
variant === "borderless" && rootStyles.borderless
|
|
126
128
|
], className, {
|
|
127
|
-
gap,
|
|
129
|
+
gap: resolvedGap,
|
|
130
|
+
...resolvedGap === void 0 ? void 0 : { "--lobe-form-gap": typeof resolvedGap === "number" ? `${resolvedGap}px` : resolvedGap },
|
|
131
|
+
...resolvedItemPadding === void 0 ? void 0 : { "--lobe-form-item-padding-block": typeof resolvedItemPadding === "number" ? `${resolvedItemPadding}px` : resolvedItemPadding },
|
|
128
132
|
...style
|
|
129
133
|
}),
|
|
130
134
|
onFormSubmit: async (values, eventDetails) => {
|
package/es/Form/Form.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n if (!form) return '';\n const entries = [...new FormData(form).entries()].filter(\n ([, value]) => typeof value === 'string',\n ) as [string, string][];\n return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n ({\n className,\n itemMinWidth,\n footer,\n items = [],\n children,\n itemsType = 'group',\n variant = 'borderless',\n classNames,\n styles: customStyles,\n gap,\n style,\n collapsible,\n defaultActiveKey,\n initialValues,\n activeKey,\n onCollapse,\n onFinish,\n onFormSubmit,\n layout,\n ref,\n ...rest\n }) => {\n const { mobile } = useResponsive();\n const formRef = useRef<HTMLFormElement>(null);\n const [submitLoading, setSubmitLoading] = useState(false);\n const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n const snapshotRef = useRef('');\n\n const syncUnsaved = useCallback(() => {\n setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n }, []);\n\n useEffect(() => {\n const form = formRef.current;\n if (!form) return;\n snapshotRef.current = serializeForm(form);\n let resetTimer: ReturnType<typeof setTimeout>;\n const handleMutation = () => syncUnsaved();\n const handleReset = () => {\n resetTimer = setTimeout(() => {\n snapshotRef.current = serializeForm(formRef.current);\n syncUnsaved();\n }, 0);\n };\n form.addEventListener('input', handleMutation);\n form.addEventListener('change', handleMutation);\n form.addEventListener('reset', handleReset);\n return () => {\n clearTimeout(resetTimer);\n form.removeEventListener('input', handleMutation);\n form.removeEventListener('change', handleMutation);\n form.removeEventListener('reset', handleReset);\n };\n }, [syncUnsaved]);\n\n const requestReset = useCallback(() => {\n formRef.current?.reset();\n }, []);\n\n const mergedRef = useCallback(\n (node: HTMLFormElement | null) => {\n formRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const context = useMemo(\n () => ({\n hasUnsavedChanges,\n initialValues,\n itemMinWidth,\n layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n requestReset,\n submitLoading,\n variant,\n }),\n [\n hasUnsavedChanges,\n initialValues,\n itemMinWidth,\n layout,\n mobile,\n requestReset,\n submitLoading,\n variant,\n ],\n );\n\n const mapFlat = useCallback(\n (item: FormFieldProps, itemIndex: number) => (\n <FormField\n className={classNames?.item}\n divider={itemIndex !== 0}\n key={itemIndex}\n style={customStyles?.item}\n variant={variant}\n {...item}\n />\n ),\n [variant, classNames, customStyles],\n );\n\n const mapTree = useCallback(\n (group: FormGroupItemType, groupIndex: number) => {\n const key = group?.key || groupIndex;\n return (\n <FormGroup\n active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n className={classNames?.group}\n collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n desc={group?.desc}\n extra={group?.extra}\n icon={group?.icon}\n key={key}\n style={customStyles?.group}\n title={group.title}\n variant={group?.variant || variant}\n defaultActive={\n defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n }\n onCollapse={(active) => {\n let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n keys = keys.filter((k) => k !== key);\n onCollapse?.(active ? [...keys, key] : keys);\n }}\n >\n {Array.isArray(group.children)\n ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n : group.children}\n </FormGroup>\n );\n },\n [\n activeKey,\n collapsible,\n defaultActiveKey,\n onCollapse,\n variant,\n classNames,\n customStyles,\n mapFlat,\n ],\n );\n\n return (\n <FormContext value={context}>\n <BaseForm\n ref={mergedRef}\n {...styleProps(\n [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n className,\n { gap, ...style },\n )}\n onFormSubmit={async (values, eventDetails) => {\n onFormSubmit?.(values, eventDetails);\n if (!onFinish) return;\n setSubmitLoading(true);\n try {\n await onFinish(values, eventDetails);\n snapshotRef.current = serializeForm(formRef.current);\n syncUnsaved();\n } finally {\n setSubmitLoading(false);\n }\n }}\n {...rest}\n >\n {items && items.length > 0 ? (\n itemsType === 'group' ? (\n (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n ) : (\n <FormFlatGroup\n className={classNames?.group}\n style={customStyles?.group}\n variant={variant}\n >\n {(items as FormFieldProps[])\n .filter((item) => !item.hidden)\n .map((item, i) => mapFlat(item, i))}\n </FormFlatGroup>\n )\n ) : undefined}\n {children}\n {footer}\n </BaseForm>\n </FormContext>\n );\n },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n if (!form) return '';\n const entries = [...new FormData(form).entries()].filter(\n ([, value]) => typeof value === 'string',\n ) as [string, string][];\n return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n ({\n className,\n itemMinWidth,\n footer,\n items = [],\n children,\n itemsType = 'group',\n variant = 'borderless',\n classNames,\n styles: customStyles,\n gap,\n style,\n collapsible,\n defaultActiveKey,\n initialValues,\n activeKey,\n onCollapse,\n onFinish,\n onFormSubmit,\n layout,\n ref,\n compact,\n itemPadding,\n ...rest\n }) => {\n const resolvedGap = gap ?? (compact ? 12 : undefined);\n const resolvedItemPadding = itemPadding ?? (compact ? 10 : undefined);\n const { mobile } = useResponsive();\n const formRef = useRef<HTMLFormElement>(null);\n const [submitLoading, setSubmitLoading] = useState(false);\n const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n const snapshotRef = useRef('');\n\n const syncUnsaved = useCallback(() => {\n setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n }, []);\n\n useEffect(() => {\n const form = formRef.current;\n if (!form) return;\n snapshotRef.current = serializeForm(form);\n let resetTimer: ReturnType<typeof setTimeout>;\n const handleMutation = () => syncUnsaved();\n const handleReset = () => {\n resetTimer = setTimeout(() => {\n snapshotRef.current = serializeForm(formRef.current);\n syncUnsaved();\n }, 0);\n };\n form.addEventListener('input', handleMutation);\n form.addEventListener('change', handleMutation);\n form.addEventListener('reset', handleReset);\n return () => {\n clearTimeout(resetTimer);\n form.removeEventListener('input', handleMutation);\n form.removeEventListener('change', handleMutation);\n form.removeEventListener('reset', handleReset);\n };\n }, [syncUnsaved]);\n\n const requestReset = useCallback(() => {\n formRef.current?.reset();\n }, []);\n\n const mergedRef = useCallback(\n (node: HTMLFormElement | null) => {\n formRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const context = useMemo(\n () => ({\n hasUnsavedChanges,\n initialValues,\n itemMinWidth,\n layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n requestReset,\n submitLoading,\n variant,\n }),\n [\n hasUnsavedChanges,\n initialValues,\n itemMinWidth,\n layout,\n mobile,\n requestReset,\n submitLoading,\n variant,\n ],\n );\n\n const mapFlat = useCallback(\n (item: FormFieldProps, itemIndex: number) => (\n <FormField\n className={classNames?.item}\n divider={itemIndex !== 0}\n key={itemIndex}\n style={customStyles?.item}\n variant={variant}\n {...item}\n />\n ),\n [variant, classNames, customStyles],\n );\n\n const mapTree = useCallback(\n (group: FormGroupItemType, groupIndex: number) => {\n const key = group?.key || groupIndex;\n return (\n <FormGroup\n active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n className={classNames?.group}\n collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n desc={group?.desc}\n extra={group?.extra}\n icon={group?.icon}\n key={key}\n style={customStyles?.group}\n title={group.title}\n variant={group?.variant || variant}\n defaultActive={\n defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n }\n onCollapse={(active) => {\n let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n keys = keys.filter((k) => k !== key);\n onCollapse?.(active ? [...keys, key] : keys);\n }}\n >\n {Array.isArray(group.children)\n ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n : group.children}\n </FormGroup>\n );\n },\n [\n activeKey,\n collapsible,\n defaultActiveKey,\n onCollapse,\n variant,\n classNames,\n customStyles,\n mapFlat,\n ],\n );\n\n return (\n <FormContext value={context}>\n <BaseForm\n ref={mergedRef}\n {...styleProps(\n [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n className,\n {\n gap: resolvedGap,\n ...(resolvedGap === undefined\n ? undefined\n : {\n '--lobe-form-gap':\n typeof resolvedGap === 'number' ? `${resolvedGap}px` : resolvedGap,\n }),\n ...(resolvedItemPadding === undefined\n ? undefined\n : {\n '--lobe-form-item-padding-block':\n typeof resolvedItemPadding === 'number'\n ? `${resolvedItemPadding}px`\n : resolvedItemPadding,\n }),\n ...style,\n },\n )}\n onFormSubmit={async (values, eventDetails) => {\n onFormSubmit?.(values, eventDetails);\n if (!onFinish) return;\n setSubmitLoading(true);\n try {\n await onFinish(values, eventDetails);\n snapshotRef.current = serializeForm(formRef.current);\n syncUnsaved();\n } finally {\n setSubmitLoading(false);\n }\n }}\n {...rest}\n >\n {items && items.length > 0 ? (\n itemsType === 'group' ? (\n (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n ) : (\n <FormFlatGroup\n className={classNames?.group}\n style={customStyles?.group}\n variant={variant}\n >\n {(items as FormFieldProps[])\n .filter((item) => !item.hidden)\n .map((item, i) => mapFlat(item, i))}\n </FormFlatGroup>\n )\n ) : undefined}\n {children}\n {footer}\n </BaseForm>\n </FormContext>\n );\n },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}
|
package/es/Form/style.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
//#region src/Form/style.ts
|
|
2
2
|
const rootStyles = {
|
|
3
3
|
borderless: {
|
|
4
|
-
kOIVth: "lb1y9zxd1
|
|
4
|
+
kOIVth: "lb1y9zxd1 lbcptdvr",
|
|
5
5
|
$$css: true
|
|
6
6
|
},
|
|
7
7
|
root: {
|
|
8
|
-
kOIVth: "lbou54vl
|
|
8
|
+
kOIVth: "lbou54vl lbcptdvr",
|
|
9
9
|
k1xSpc: "lb78zum5",
|
|
10
10
|
kXwgrk: "lbdt5ytf",
|
|
11
11
|
kVAEAm: "lb1n2onr6",
|
|
@@ -47,7 +47,7 @@ const fieldStyles = {
|
|
|
47
47
|
},
|
|
48
48
|
root: {
|
|
49
49
|
kOIVth: "lb1v2ro7d",
|
|
50
|
-
k8WAf4: "
|
|
50
|
+
k8WAf4: "lby0ca47",
|
|
51
51
|
kB7OPa: "lb9f619",
|
|
52
52
|
k1xSpc: "lb78zum5",
|
|
53
53
|
kzqmXN: "lbh8yej3",
|
package/es/Form/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Form/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { formGroupTriggerMarker, formMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const rootStyles = stylex.create({\n borderless: {\n gap: { default: 48, [media.sm]: '0 !important' },\n },\n root: {\n gap: { default: 16, [media.sm]: '0 !important' },\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n width: '100%',\n },\n});\n\nexport const fieldStyles = stylex.create({\n control: {\n gap: 4,\n alignItems: 'flex-end',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 'var(--form-field-min-width, unset)',\n },\n controlVertical: {\n alignItems: 'stretch',\n width: '100%',\n },\n error: {\n color: cssVar.colorError,\n fontSize: 12,\n },\n horizontal: {\n alignItems: 'center',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n label: {\n flex: '1',\n display: 'block',\n textAlign: 'start',\n maxWidth: '100%',\n },\n root: {\n gap: 12,\n paddingBlock:
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Form/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { formGroupTriggerMarker, formMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const rootStyles = stylex.create({\n borderless: {\n gap: { default: 48, [media.sm]: 'var(--lobe-form-gap, 0) !important' },\n },\n root: {\n gap: { default: 16, [media.sm]: 'var(--lobe-form-gap, 0) !important' },\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n width: '100%',\n },\n});\n\nexport const fieldStyles = stylex.create({\n control: {\n gap: 4,\n alignItems: 'flex-end',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 'var(--form-field-min-width, unset)',\n },\n controlVertical: {\n alignItems: 'stretch',\n width: '100%',\n },\n error: {\n color: cssVar.colorError,\n fontSize: 12,\n },\n horizontal: {\n alignItems: 'center',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n label: {\n flex: '1',\n display: 'block',\n textAlign: 'start',\n maxWidth: '100%',\n },\n root: {\n gap: 12,\n paddingBlock: 'var(--lobe-form-item-padding-block,16px)',\n boxSizing: 'border-box',\n display: 'flex',\n width: '100%',\n },\n vertical: {\n gap: 8,\n alignItems: 'stretch',\n flexDirection: 'column',\n },\n});\n\nexport const fieldLayoutStyles = {\n horizontal: fieldStyles.horizontal,\n vertical: fieldStyles.vertical,\n};\n\nexport const dividerStyles = stylex.create({\n root: {\n margin: 0,\n borderColor: 'currentcolor',\n borderStyle: 'none',\n borderWidth: 'medium',\n backgroundColor: cssVar.colorBorderSecondary,\n height: 1,\n width: '100%',\n },\n});\n\nexport const groupStyles = stylex.create({\n body: {\n display: 'flex',\n flexDirection: 'column',\n },\n bodyBoxed: {\n paddingBlock: { default: 16, [stylex.when.ancestor(':is(*)', formMarker)]: 0 },\n paddingInline: 16,\n },\n bodyFilled: {\n borderRadius: cssVar.borderRadius,\n marginInline: 3,\n marginBlockEnd: 3,\n },\n bodyFilledLight: {\n boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n },\n chevron: {\n flex: 'none',\n transition: `transform 200ms ${cssVar.motionEaseOut}`,\n color: cssVar.colorTextDescription,\n transform: {\n default: null,\n [stylex.when.ancestor('[data-panel-open]', formGroupTriggerMarker)]: 'rotate(180deg)',\n },\n },\n desc: {\n color: cssVar.colorTextDescription,\n fontSize: 12,\n fontWeight: 400,\n },\n header: {\n gap: 12,\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n },\n headerBorderless: {\n borderBlockEndColor: cssVar.colorBorderSecondary,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: 1,\n paddingBlockEnd: 16,\n },\n headerBoxed: {\n padding: 16,\n },\n mobileBody: {\n paddingBlock: 0,\n paddingInline: 16,\n backgroundColor: cssVar.colorBgContainer,\n },\n mobileHeader: {\n padding: 16,\n backgroundColor: cssVar.colorBgLayout,\n },\n mobileTitle: {\n fontSize: 14,\n fontWeight: 400,\n opacity: 0.5,\n },\n panel: {\n overflow: 'hidden',\n transition: `height 200ms ${cssVar.motionEaseOut}`,\n transitionDuration: { default: null, [reducedMotion]: '0s' },\n height: {\n 'default': 'var(--collapsible-panel-height)',\n ':is([data-starting-style], [data-ending-style])': 0,\n },\n },\n rootFilled: {\n borderRadius: cssVar.borderRadiusLG,\n backgroundColor: cssVar.colorFillQuaternary,\n },\n rootFilledDark: {\n backgroundColor: cssVar.colorBgLayout,\n },\n rootOutlined: {\n borderRadius: cssVar.borderRadiusLG,\n },\n title: {\n gap: 8,\n alignItems: 'center',\n color: cssVar.colorText,\n display: 'flex',\n flexShrink: 0,\n fontSize: 16,\n fontWeight: 'bold',\n },\n titleBorderless: {\n fontSize: 18,\n },\n trigger: {\n margin: 0,\n padding: 0,\n borderColor: 'currentcolor',\n borderRadius: cssVar.borderRadius,\n borderStyle: 'none',\n borderWidth: 'medium',\n flex: '1',\n gap: 12,\n outline: 'none',\n alignItems: 'center',\n backgroundColor: 'transparent',\n backgroundImage: 'none',\n cursor: 'pointer',\n display: 'flex',\n textAlign: 'start',\n },\n});\n\nexport const flatGroupStyles = stylex.create({\n borderless: {\n paddingInline: 0,\n },\n filled: {\n backgroundColor: cssVar.colorFillQuaternary,\n },\n mobile: {\n borderRadius: 0,\n paddingBlock: 0,\n paddingInline: 16,\n backgroundColor: cssVar.colorBgContainer,\n },\n root: {\n borderRadius: cssVar.borderRadiusLG,\n paddingInline: 16,\n },\n});\n\nexport const footerStyles = stylex.create({\n root: {\n padding: { default: null, [media.sm]: 16 },\n backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n borderBlockStartWidth: { default: null, [media.sm]: 1 },\n },\n});\n\nexport const submitFooterStyles = stylex.create({\n floatFooter: {\n padding: 8,\n borderColor: cssVar.colorBorderSecondary,\n borderRadius: 48,\n borderStyle: 'solid',\n borderWidth: 1,\n backgroundColor: cssVar.colorBgContainer,\n boxShadow: cssVar.boxShadowSecondary,\n insetBlockEnd: 24,\n insetInlineStart: '50%',\n position: 'fixed',\n transform: 'translateX(-50%)',\n zIndex: 1000,\n width: 'max-content',\n },\n footer: {\n padding: { default: null, [media.sm]: 16 },\n backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n borderBlockStartWidth: { default: null, [media.sm]: 1 },\n marginBlockStart: { default: null, [media.sm]: `calc(-1 * ${cssVar.borderRadius})` },\n },\n});\n\nexport const titleStyles = stylex.create({\n content: {\n position: 'relative',\n textAlign: 'start',\n },\n desc: {\n color: cssVar.colorTextDescription,\n display: 'block',\n fontSize: 12,\n fontWeight: 400,\n lineHeight: 1.44,\n overflowWrap: 'break-word',\n whiteSpace: 'pre-wrap',\n },\n title: {\n color: cssVar.colorText,\n fontWeight: 500,\n lineHeight: 1,\n },\n});\n"],"mappings":"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"}
|
package/es/Form/type.d.mts
CHANGED
|
@@ -24,6 +24,11 @@ export interface FormProps extends BaseFormProps {
|
|
|
24
24
|
item?: string;
|
|
25
25
|
};
|
|
26
26
|
collapsible?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Compact spacing for narrow containers (Drawer / Modal): `gap` 12px and `itemPadding` 10px
|
|
29
|
+
* unless set explicitly. Default `false` (unchanged spacing).
|
|
30
|
+
*/
|
|
31
|
+
compact?: boolean;
|
|
27
32
|
defaultActiveKey?: (string | number)[];
|
|
28
33
|
footer?: ReactNode;
|
|
29
34
|
gap?: number | string;
|
|
@@ -33,6 +38,8 @@ export interface FormProps extends BaseFormProps {
|
|
|
33
38
|
*/
|
|
34
39
|
initialValues?: FormValues;
|
|
35
40
|
itemMinWidth?: FormFieldProps['minWidth'];
|
|
41
|
+
/** Block (top / bottom) padding of every Form.Field. Default `16px`. */
|
|
42
|
+
itemPadding?: number | string;
|
|
36
43
|
items?: FormGroupItemType[] | FormFieldProps[];
|
|
37
44
|
itemsType?: ItemsType;
|
|
38
45
|
layout?: FormLayout;
|
|
@@ -24,7 +24,7 @@ const useFetchData = (options) => {
|
|
|
24
24
|
params.current = opts.pageInfo.current;
|
|
25
25
|
params.pageSize = opts.pageInfo.pageSize;
|
|
26
26
|
}
|
|
27
|
-
const response = await opts.request(params, opts.sort, opts.filter);
|
|
27
|
+
const response = await opts.request(params, opts.sort, opts.filter) ?? { data: [] };
|
|
28
28
|
if (id !== requestId.current) return;
|
|
29
29
|
if (response.success === false) return;
|
|
30
30
|
const raw = response.data ?? [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFetchData.mjs","names":[],"sources":["../../../src/ProTable/hooks/useFetchData.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SortOrder } from '@/Table/type';\n\nimport type {
|
|
1
|
+
{"version":3,"file":"useFetchData.mjs","names":[],"sources":["../../../src/ProTable/hooks/useFetchData.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SortOrder } from '@/Table/type';\n\nimport type {\n ProTablePageInfo,\n ProTableRequest,\n ProTableRequestData,\n ProTableRequestFilter,\n} from '../type';\n\ntype Filter = Record<string, (string | number | boolean)[] | null>;\n\nexport interface UseFetchDataOptions<T> {\n debounceTime: number;\n defaultData?: T[];\n depsKey: string;\n filter: Filter;\n getParams: () => Record<string, any>;\n manual: boolean;\n onDataSourceChange?: (data: T[]) => void;\n onLoad?: (data: T[]) => void;\n onLoadingChange?: (loading: boolean) => void;\n onRequestError?: (error: Error) => void;\n pageInfo: ProTablePageInfo;\n paginated: boolean;\n polling?: number | ((data: T[]) => number);\n postData?: (data: T[]) => T[];\n request?: ProTableRequest<T, any>;\n setTotal: (total: number) => void;\n sort: Record<string, SortOrder>;\n}\n\nexport const useFetchData = <T>(options: UseFetchDataOptions<T>) => {\n const [data, setData] = useState<T[]>(options.defaultData ?? []);\n const [loading, setLoading] = useState(false);\n const latest = useRef(options);\n latest.current = options;\n const requestId = useRef(0);\n const [enabled, setEnabled] = useState(!options.manual);\n const [token, setToken] = useState(0);\n const pending = useRef<(() => void)[]>([]);\n\n const updateLoading = (next: boolean) => {\n setLoading(next);\n latest.current.onLoadingChange?.(next);\n };\n\n const run = useCallback(async () => {\n const opts = latest.current;\n if (!opts.request) return;\n const id = ++requestId.current;\n updateLoading(true);\n try {\n const params: Record<string, any> = { ...opts.getParams() };\n if (opts.paginated) {\n params.current = opts.pageInfo.current;\n params.pageSize = opts.pageInfo.pageSize;\n }\n // A `request` resolving `null` / `undefined` (e.g. an empty API body) is treated as empty data.\n const response: Partial<ProTableRequestData<T>> = (await opts.request(\n params as any,\n opts.sort,\n opts.filter as ProTableRequestFilter,\n )) ?? { data: [] };\n if (id !== requestId.current) return;\n if (response.success === false) {\n // Pro keeps the previous data when the request reports failure.\n return;\n }\n const raw = response.data ?? [];\n const next = opts.postData ? opts.postData(raw) : raw;\n setData(next);\n opts.setTotal(response.total ?? next.length);\n opts.onLoad?.(next);\n opts.onDataSourceChange?.(next);\n } catch (error) {\n if (id !== requestId.current) return;\n if (opts.onRequestError) opts.onRequestError(error as Error);\n else console.error(error);\n } finally {\n if (id === requestId.current) updateLoading(false);\n const resolvers = pending.current;\n pending.current = [];\n resolvers.forEach((resolve) => resolve());\n }\n }, []);\n\n const { current, pageSize } = options.pageInfo;\n useEffect(() => {\n if (!enabled || !latest.current.request) return;\n const delay = latest.current.debounceTime;\n if (delay <= 0) {\n void run();\n return;\n }\n const timer = setTimeout(() => void run(), delay);\n return () => clearTimeout(timer);\n }, [enabled, token, options.depsKey, current, pageSize, run]);\n\n useEffect(() => {\n const { polling } = latest.current;\n if (!polling || loading || !enabled) return;\n const interval = typeof polling === 'function' ? polling(data) : polling;\n if (!interval) return;\n const timer = setTimeout(() => void run(), Math.max(interval, 2000));\n return () => clearTimeout(timer);\n }, [data, loading, enabled, options.polling, run]);\n\n const reload = useCallback(\n () =>\n new Promise<void>((resolve) => {\n if (!latest.current.request) {\n resolve();\n return;\n }\n pending.current.push(resolve);\n setEnabled(true);\n setToken((value) => value + 1);\n }),\n [],\n );\n\n return { data, loading, reload, setData };\n};\n"],"mappings":";;AAiCA,MAAa,gBAAmB,YAAoC;CAClE,MAAM,CAAC,MAAM,WAAW,SAAc,QAAQ,eAAe,CAAC,CAAC;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,OAAO,OAAO;CAC7B,OAAO,UAAU;CACjB,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,QAAQ,MAAM;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,UAAU,OAAuB,CAAC,CAAC;CAEzC,MAAM,iBAAiB,SAAkB;EACvC,WAAW,IAAI;EACf,OAAO,QAAQ,kBAAkB,IAAI;CACvC;CAEA,MAAM,MAAM,YAAY,YAAY;EAClC,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,KAAK,SAAS;EACnB,MAAM,KAAK,EAAE,UAAU;EACvB,cAAc,IAAI;EAClB,IAAI;GACF,MAAM,SAA8B,EAAE,GAAG,KAAK,UAAU,EAAE;GAC1D,IAAI,KAAK,WAAW;IAClB,OAAO,UAAU,KAAK,SAAS;IAC/B,OAAO,WAAW,KAAK,SAAS;GAClC;GAEA,MAAM,WAA6C,MAAM,KAAK,QAC5D,QACA,KAAK,MACL,KAAK,MACP,KAAM,EAAE,MAAM,CAAC,EAAE;GACjB,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,SAAS,YAAY,OAEvB;GAEF,MAAM,MAAM,SAAS,QAAQ,CAAC;GAC9B,MAAM,OAAO,KAAK,WAAW,KAAK,SAAS,GAAG,IAAI;GAClD,QAAQ,IAAI;GACZ,KAAK,SAAS,SAAS,SAAS,KAAK,MAAM;GAC3C,KAAK,SAAS,IAAI;GAClB,KAAK,qBAAqB,IAAI;EAChC,SAAS,OAAO;GACd,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,KAAK,gBAAgB,KAAK,eAAe,KAAc;QACtD,QAAQ,MAAM,KAAK;EAC1B,UAAU;GACR,IAAI,OAAO,UAAU,SAAS,cAAc,KAAK;GACjD,MAAM,YAAY,QAAQ;GAC1B,QAAQ,UAAU,CAAC;GACnB,UAAU,SAAS,YAAY,QAAQ,CAAC;EAC1C;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,SAAS,aAAa,QAAQ;CACtC,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,OAAO,QAAQ,SAAS;EACzC,MAAM,QAAQ,OAAO,QAAQ;EAC7B,IAAI,SAAS,GAAG;GACd,IAAS;GACT;EACF;EACA,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK;EAChD,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAO,QAAQ;EAAS;EAAS;EAAU;CAAG,CAAC;CAE5D,gBAAgB;EACd,MAAM,EAAE,YAAY,OAAO;EAC3B,IAAI,CAAC,WAAW,WAAW,CAAC,SAAS;EACrC,MAAM,WAAW,OAAO,YAAY,aAAa,QAAQ,IAAI,IAAI;EACjE,IAAI,CAAC,UAAU;EACf,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,GAAI,CAAC;EACnE,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAM;EAAS;EAAS,QAAQ;EAAS;CAAG,CAAC;CAgBjD,OAAO;EAAE;EAAM;EAAS,QAdT,kBAEX,IAAI,SAAe,YAAY;GAC7B,IAAI,CAAC,OAAO,QAAQ,SAAS;IAC3B,QAAQ;IACR;GACF;GACA,QAAQ,QAAQ,KAAK,OAAO;GAC5B,WAAW,IAAI;GACf,UAAU,UAAU,QAAQ,CAAC;EAC/B,CAAC,GACH,CAAC,CAG0B;EAAG;CAAQ;AAC1C"}
|
|
@@ -6,8 +6,9 @@ import Select from "../../Select/Select.mjs";
|
|
|
6
6
|
import DayjsDatePicker from "../../DatePicker/DayjsDatePicker.mjs";
|
|
7
7
|
import DayjsDateRangePicker from "../../DatePicker/DayjsDateRangePicker.mjs";
|
|
8
8
|
import { resolveValueEnum, resolveValueType, valueEnumToList } from "../utils.mjs";
|
|
9
|
+
import { styles } from "../style.mjs";
|
|
9
10
|
import { useColumnRequest } from "../hooks/useColumnRequest.mjs";
|
|
10
|
-
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
12
|
import dayjs from "dayjs";
|
|
12
13
|
//#region src/ProTable/parts/FieldControl.tsx
|
|
13
14
|
const SELECT_TYPES = /* @__PURE__ */ new Set([
|
|
@@ -21,11 +22,16 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
|
|
|
21
22
|
const valueType = resolveValueType(column) ?? "text";
|
|
22
23
|
const valueEnum = resolveValueEnum(column);
|
|
23
24
|
const { fieldProps = {} } = column;
|
|
24
|
-
const label = typeof column.title === "string" ? column.title : void 0;
|
|
25
25
|
const size = light ? "small" : void 0;
|
|
26
26
|
const { isDarkMode } = useThemeMode();
|
|
27
27
|
const variant = light ? isDarkMode ? "filled" : "outlined" : void 0;
|
|
28
28
|
const remote = useColumnRequest(column);
|
|
29
|
+
const lightLabel = light && column.title !== void 0 && column.title !== null && typeof column.title !== "function" ? /* @__PURE__ */ jsx("span", {
|
|
30
|
+
className: styles.lightFilterLabel,
|
|
31
|
+
"data-pro-table-light-label": "",
|
|
32
|
+
children: column.title
|
|
33
|
+
}) : void 0;
|
|
34
|
+
const labelProps = lightLabel ? { prefix: lightLabel } : {};
|
|
29
35
|
if (column.renderFormItem) return column.renderFormItem(column, {
|
|
30
36
|
form,
|
|
31
37
|
isQuery: !light,
|
|
@@ -43,8 +49,9 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
|
|
|
43
49
|
loading: remote.loading,
|
|
44
50
|
mode: valueType === "checkbox" ? "multiple" : void 0,
|
|
45
51
|
options,
|
|
46
|
-
placeholder:
|
|
52
|
+
placeholder: placeholder.select,
|
|
47
53
|
size,
|
|
54
|
+
...labelProps,
|
|
48
55
|
style: { width: "100%" },
|
|
49
56
|
value: value ?? (valueType === "checkbox" ? [] : null),
|
|
50
57
|
variant,
|
|
@@ -61,24 +68,32 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
|
|
|
61
68
|
case "money":
|
|
62
69
|
case "percent":
|
|
63
70
|
case "progress": return /* @__PURE__ */ jsx(InputNumber_default, {
|
|
64
|
-
placeholder:
|
|
71
|
+
placeholder: placeholder.input,
|
|
65
72
|
size,
|
|
73
|
+
...labelProps,
|
|
66
74
|
style: { width: "100%" },
|
|
67
75
|
value: value ?? null,
|
|
68
76
|
variant,
|
|
69
77
|
...fieldProps,
|
|
70
78
|
onChange: (next) => onChange(next ?? void 0)
|
|
71
79
|
});
|
|
72
|
-
case "switch":
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
case "switch": {
|
|
81
|
+
const control = /* @__PURE__ */ jsx(Switch, {
|
|
82
|
+
checked: !!value,
|
|
83
|
+
...fieldProps,
|
|
84
|
+
onChange: (next) => onChange(next)
|
|
85
|
+
});
|
|
86
|
+
return lightLabel ? /* @__PURE__ */ jsxs("span", {
|
|
87
|
+
className: styles.lightFilterSwitch,
|
|
88
|
+
children: [lightLabel, control]
|
|
89
|
+
}) : control;
|
|
90
|
+
}
|
|
77
91
|
case "date":
|
|
78
92
|
case "dateTime": return /* @__PURE__ */ jsx(DayjsDatePicker, {
|
|
79
93
|
allowClear: true,
|
|
80
|
-
placeholder:
|
|
94
|
+
placeholder: placeholder.select,
|
|
81
95
|
size,
|
|
96
|
+
...labelProps,
|
|
82
97
|
style: { width: "100%" },
|
|
83
98
|
value: toDayjs(value),
|
|
84
99
|
variant,
|
|
@@ -89,6 +104,7 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
|
|
|
89
104
|
case "dateTimeRange": return /* @__PURE__ */ jsx(DayjsDateRangePicker, {
|
|
90
105
|
allowClear: true,
|
|
91
106
|
size,
|
|
107
|
+
...labelProps,
|
|
92
108
|
style: { width: "100%" },
|
|
93
109
|
value: value ? [toDayjs(value[0]), toDayjs(value[1])] : null,
|
|
94
110
|
variant,
|
|
@@ -97,8 +113,9 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
|
|
|
97
113
|
});
|
|
98
114
|
default: return /* @__PURE__ */ jsx(Input_default, {
|
|
99
115
|
allowClear: true,
|
|
100
|
-
placeholder:
|
|
116
|
+
placeholder: placeholder.input,
|
|
101
117
|
size,
|
|
118
|
+
...labelProps,
|
|
102
119
|
type: valueType === "password" ? "password" : void 0,
|
|
103
120
|
value: value ?? "",
|
|
104
121
|
variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/DatePicker/DayjsDateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n column: ProColumnType<any>;\n form: ProTableFormInstance;\n light?: boolean;\n onChange: (value: any) => void;\n placeholder: { input: string; select: string };\n value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n const valueType = resolveValueType(column) ?? 'text';\n const valueEnum = resolveValueEnum(column);\n const { fieldProps = {} } = column;\n const
|
|
1
|
+
{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/DatePicker/DayjsDateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport { styles } from '../style';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n column: ProColumnType<any>;\n form: ProTableFormInstance;\n light?: boolean;\n onChange: (value: any) => void;\n placeholder: { input: string; select: string };\n value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n const valueType = resolveValueType(column) ?? 'text';\n const valueEnum = resolveValueEnum(column);\n const { fieldProps = {} } = column;\n const size = light ? 'small' : undefined;\n const { isDarkMode } = useThemeMode();\n // Light filter: outlined on light backgrounds, filled in dark mode.\n const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n const remote = useColumnRequest(column);\n // Light filter: the field label always stays visible inside the control (Pro `FieldLabel`\n // style, \"Status: All\"), so a placeholder such as \"All\" is never ambiguous.\n const lightLabel =\n light &&\n column.title !== undefined &&\n column.title !== null &&\n typeof column.title !== 'function' ? (\n <span className={styles.lightFilterLabel} data-pro-table-light-label=\"\">\n {column.title as ReactNode}\n </span>\n ) : undefined;\n const labelProps = lightLabel ? { prefix: lightLabel } : {};\n\n if (column.renderFormItem) {\n return column.renderFormItem(\n column,\n { form, isQuery: !light, onChange, value },\n form,\n ) as ReactNode;\n }\n\n if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n const options =\n remote.options ??\n fieldProps.options ??\n valueEnumToList(valueEnum).map((item) => ({\n disabled: item.disabled,\n label: item.text,\n value: item.value,\n }));\n return (\n <Select\n allowClear\n loading={remote.loading}\n mode={valueType === 'checkbox' ? 'multiple' : undefined}\n options={options as any}\n placeholder={placeholder.select}\n size={size}\n {...labelProps}\n style={{ width: '100%' }}\n value={value ?? (valueType === 'checkbox' ? [] : null)}\n variant={variant}\n {...fieldProps}\n onChange={(next) => onChange(next ?? undefined)}\n onSearch={\n remote.onSearch\n ? (keyWords: string) => {\n remote.onSearch!(keyWords);\n fieldProps.onSearch?.(keyWords);\n }\n : fieldProps.onSearch\n }\n />\n );\n }\n\n switch (valueType) {\n case 'digit':\n case 'money':\n case 'percent':\n case 'progress': {\n return (\n <InputNumber\n placeholder={placeholder.input}\n size={size}\n {...labelProps}\n style={{ width: '100%' }}\n value={value ?? null}\n variant={variant}\n {...fieldProps}\n onChange={(next) => onChange(next ?? undefined)}\n />\n );\n }\n case 'switch': {\n const control = (\n <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />\n );\n return lightLabel ? (\n <span className={styles.lightFilterSwitch}>\n {lightLabel}\n {control}\n </span>\n ) : (\n control\n );\n }\n case 'date':\n case 'dateTime': {\n return (\n <DatePicker\n allowClear\n placeholder={placeholder.select}\n size={size}\n {...labelProps}\n style={{ width: '100%' }}\n value={toDayjs(value)}\n variant={variant}\n {...fieldProps}\n onChange={(next) => onChange(toDate(next) ?? undefined)}\n />\n );\n }\n case 'dateRange':\n case 'dateTimeRange': {\n return (\n <DateRangePicker\n allowClear\n size={size}\n {...labelProps}\n style={{ width: '100%' }}\n value={value ? [toDayjs(value[0]), toDayjs(value[1])] : null}\n variant={variant}\n {...fieldProps}\n onChange={(next) =>\n onChange(next && (next[0] || next[1]) ? [toDate(next[0]), toDate(next[1])] : undefined)\n }\n />\n );\n }\n default: {\n return (\n <Input\n allowClear\n placeholder={placeholder.input}\n size={size}\n {...labelProps}\n type={valueType === 'password' ? 'password' : undefined}\n value={value ?? ''}\n variant={variant}\n {...fieldProps}\n onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n onClear={() => {\n onChange(undefined);\n fieldProps.onClear?.();\n }}\n />\n );\n }\n }\n};\n\nexport default FieldControl;\n"],"mappings":"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"}
|
package/es/ProTable/style.mjs
CHANGED
|
@@ -77,9 +77,17 @@ const raw = {
|
|
|
77
77
|
$$css: true
|
|
78
78
|
},
|
|
79
79
|
lightFilterLabel: {
|
|
80
|
+
kUk6DE: "lb1okw0bk",
|
|
80
81
|
kMwMTN: "lbc77et8",
|
|
81
82
|
kGuDYH: "lbxobqjj",
|
|
82
83
|
khDVqt: "lbuxw1ft",
|
|
84
|
+
k5JduY: "lbbg6shv",
|
|
85
|
+
$$css: true
|
|
86
|
+
},
|
|
87
|
+
lightFilterSwitch: {
|
|
88
|
+
kOIVth: "lb167g77z",
|
|
89
|
+
kGNEyG: "lb6s0dn4",
|
|
90
|
+
k1xSpc: "lb3nfvp2",
|
|
83
91
|
$$css: true
|
|
84
92
|
},
|
|
85
93
|
optionCell: {
|
|
@@ -244,6 +252,7 @@ const styles = {
|
|
|
244
252
|
lightFilter: cls(raw.lightFilter),
|
|
245
253
|
lightFilterItem: `${PRO_PREFIX_CLS}-light-filter-item`,
|
|
246
254
|
lightFilterLabel: cls(raw.lightFilterLabel),
|
|
255
|
+
lightFilterSwitch: cls(raw.lightFilterSwitch),
|
|
247
256
|
optionCell: cls(raw.optionCell),
|
|
248
257
|
part: cls(raw.part),
|
|
249
258
|
partBordered: cls(raw.partBordered),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/ProTable/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nconst raw = stylex.create({\n alert: {\n borderRadius: cssVar.borderRadius,\n gap: 12,\n paddingBlock: 6,\n paddingInline: 12,\n alignItems: 'center',\n backgroundColor: `color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent)`,\n color: cssVar.colorText,\n display: 'flex',\n fontSize: cssVar.fontSize,\n justifyContent: 'space-between',\n marginBlockEnd: 12,\n minHeight: 40,\n },\n alertInfo: {\n flex: '1',\n gap: 12,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n minWidth: 0,\n },\n alertOption: {\n flex: 'none',\n gap: 8,\n alignItems: 'center',\n display: 'flex',\n },\n code: {\n borderRadius: cssVar.borderRadiusSM,\n paddingBlock: 1,\n paddingInline: 6,\n backgroundColor: cssVar.colorFillTertiary,\n fontFamily: cssVar.fontFamilyCode,\n fontSize: '0.9em',\n },\n copyable: {\n gap: 4,\n alignItems: 'center',\n display: 'inline-flex',\n maxWidth: '100%',\n },\n copyableText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minWidth: 0,\n },\n density: {\n padding: 4,\n display: 'flex',\n flexDirection: 'column',\n minWidth: 140,\n },\n enumList: {\n gap: 8,\n display: 'inline-flex',\n flexWrap: 'wrap',\n },\n lightFilter: {\n gap: 8,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n },\n lightFilterLabel: {\n color: cssVar.colorTextSecondary,\n fontSize: cssVar.fontSizeSM,\n whiteSpace: 'nowrap',\n },\n optionCell: {\n gap: 4,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'flex-end',\n },\n part: {\n minWidth: 0,\n },\n partBordered: {\n padding: 16,\n borderColor: cssVar.colorBorderSecondary,\n borderRadius: cssVar.borderRadiusLG,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n search: {\n alignItems: 'center',\n columnGap: 24,\n display: 'grid',\n rowGap: 16,\n },\n searchFieldControl: {\n flex: '1',\n minWidth: 0,\n },\n searchLabelText: {\n overflow: 'hidden',\n display: 'block',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n maxWidth: '100%',\n minWidth: 0,\n },\n setting: {\n paddingBlock: 4,\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 420,\n width: 260,\n },\n settingGroupTitle: {\n paddingInline: 12,\n color: cssVar.colorTextDescription,\n fontSize: cssVar.fontSizeSM,\n paddingBlockEnd: 2,\n paddingBlockStart: 6,\n },\n settingHeader: {\n paddingInline: 12,\n alignItems: 'center',\n borderBlockEndColor: cssVar.colorSplit,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: 1,\n display: 'flex',\n justifyContent: 'space-between',\n paddingBlockEnd: 8,\n paddingBlockStart: 4,\n },\n settingItemTitle: {\n flex: '1',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n minWidth: 0,\n },\n settingList: {\n flex: '1',\n overflow: 'auto',\n paddingBlock: 4,\n },\n status: {\n gap: 8,\n alignItems: 'center',\n display: 'inline-flex',\n },\n statusDot: {\n borderRadius: '50%',\n flex: 'none',\n height: 6,\n width: 6,\n },\n title: {\n flex: 'none',\n gap: 4,\n alignItems: 'center',\n color: cssVar.colorText,\n display: 'flex',\n fontSize: cssVar.fontSizeLG,\n fontWeight: 600,\n minWidth: 0,\n },\n titleSub: {\n color: cssVar.colorTextDescription,\n fontSize: cssVar.fontSize,\n fontWeight: 'normal',\n },\n titleTooltip: {\n gap: 4,\n alignItems: 'center',\n display: 'inline-flex',\n },\n toolbar: {\n gap: 12,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'nowrap',\n justifyContent: 'space-between',\n marginBlockEnd: 16,\n },\n toolbarActions: {\n flex: '1',\n gap: 8,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'flex-end',\n marginInlineStart: 'auto',\n minWidth: 0,\n },\n toolbarOptions: {\n flex: 'none',\n gap: 2,\n alignItems: 'center',\n display: 'flex',\n },\n});\n\nconst cls = (style: stylex.StyleXStyles) => stylex.props(style).className ?? '';\n\nexport const styles = {\n alert: cls(raw.alert),\n alertInfo: cls(raw.alertInfo),\n alertOption: cls(raw.alertOption),\n code: cls(raw.code),\n copyable: cls(raw.copyable),\n copyableText: cls(raw.copyableText),\n density: cls(raw.density),\n densityItem: `${PRO_PREFIX_CLS}-density-item`,\n enumList: cls(raw.enumList),\n indexBorder: `${PRO_PREFIX_CLS}-index-border`,\n lightFilter: cls(raw.lightFilter),\n lightFilterItem: `${PRO_PREFIX_CLS}-light-filter-item`,\n lightFilterLabel: cls(raw.lightFilterLabel),\n optionCell: cls(raw.optionCell),\n part: cls(raw.part),\n partBordered: cls(raw.partBordered),\n root: `${PRO_PREFIX_CLS}-root`,\n search: cls(raw.search),\n searchActions: `${PRO_PREFIX_CLS}-search-actions`,\n searchField: `${PRO_PREFIX_CLS}-search-field`,\n searchFieldControl: cls(raw.searchFieldControl),\n searchLabel: `${PRO_PREFIX_CLS}-search-label`,\n searchLabelText: cls(raw.searchLabelText),\n setting: cls(raw.setting),\n settingGroupTitle: cls(raw.settingGroupTitle),\n settingHeader: cls(raw.settingHeader),\n settingItem: `${PRO_PREFIX_CLS}-setting-item`,\n settingItemActions: `${PRO_PREFIX_CLS}-setting-item-actions`,\n settingItemTitle: cls(raw.settingItemTitle),\n settingList: cls(raw.settingList),\n status: cls(raw.status),\n statusDot: cls(raw.statusDot),\n statusProcessing: `${PRO_PREFIX_CLS}-status-processing`,\n title: cls(raw.title),\n titleSub: cls(raw.titleSub),\n titleTooltip: cls(raw.titleTooltip),\n toolbar: cls(raw.toolbar),\n toolbarActions: cls(raw.toolbarActions),\n toolbarOptions: cls(raw.toolbarOptions),\n};\n\nexport const partClass = (\n cardBordered: boolean | { search?: boolean; table?: boolean } | undefined,\n part: 'search' | 'table',\n) =>\n clsx(\n styles.part,\n (typeof cardBordered === 'object' ? cardBordered[part] : cardBordered) && styles.partBordered,\n `${PRO_PREFIX_CLS}-${part}`,\n );\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/ProTable/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nconst raw = stylex.create({\n alert: {\n borderRadius: cssVar.borderRadius,\n gap: 12,\n paddingBlock: 6,\n paddingInline: 12,\n alignItems: 'center',\n backgroundColor: `color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent)`,\n color: cssVar.colorText,\n display: 'flex',\n fontSize: cssVar.fontSize,\n justifyContent: 'space-between',\n marginBlockEnd: 12,\n minHeight: 40,\n },\n alertInfo: {\n flex: '1',\n gap: 12,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n minWidth: 0,\n },\n alertOption: {\n flex: 'none',\n gap: 8,\n alignItems: 'center',\n display: 'flex',\n },\n code: {\n borderRadius: cssVar.borderRadiusSM,\n paddingBlock: 1,\n paddingInline: 6,\n backgroundColor: cssVar.colorFillTertiary,\n fontFamily: cssVar.fontFamilyCode,\n fontSize: '0.9em',\n },\n copyable: {\n gap: 4,\n alignItems: 'center',\n display: 'inline-flex',\n maxWidth: '100%',\n },\n copyableText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minWidth: 0,\n },\n density: {\n padding: 4,\n display: 'flex',\n flexDirection: 'column',\n minWidth: 140,\n },\n enumList: {\n gap: 8,\n display: 'inline-flex',\n flexWrap: 'wrap',\n },\n lightFilter: {\n gap: 8,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n },\n lightFilterLabel: {\n 'flex': 'none',\n 'color': cssVar.colorTextSecondary,\n 'fontSize': cssVar.fontSizeSM,\n 'whiteSpace': 'nowrap',\n '::after': { content: \"':'\" },\n },\n lightFilterSwitch: {\n gap: 8,\n alignItems: 'center',\n display: 'inline-flex',\n },\n optionCell: {\n gap: 4,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'flex-end',\n },\n part: {\n minWidth: 0,\n },\n partBordered: {\n padding: 16,\n borderColor: cssVar.colorBorderSecondary,\n borderRadius: cssVar.borderRadiusLG,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n search: {\n alignItems: 'center',\n columnGap: 24,\n display: 'grid',\n rowGap: 16,\n },\n searchFieldControl: {\n flex: '1',\n minWidth: 0,\n },\n searchLabelText: {\n overflow: 'hidden',\n display: 'block',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n maxWidth: '100%',\n minWidth: 0,\n },\n setting: {\n paddingBlock: 4,\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 420,\n width: 260,\n },\n settingGroupTitle: {\n paddingInline: 12,\n color: cssVar.colorTextDescription,\n fontSize: cssVar.fontSizeSM,\n paddingBlockEnd: 2,\n paddingBlockStart: 6,\n },\n settingHeader: {\n paddingInline: 12,\n alignItems: 'center',\n borderBlockEndColor: cssVar.colorSplit,\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: 1,\n display: 'flex',\n justifyContent: 'space-between',\n paddingBlockEnd: 8,\n paddingBlockStart: 4,\n },\n settingItemTitle: {\n flex: '1',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n minWidth: 0,\n },\n settingList: {\n flex: '1',\n overflow: 'auto',\n paddingBlock: 4,\n },\n status: {\n gap: 8,\n alignItems: 'center',\n display: 'inline-flex',\n },\n statusDot: {\n borderRadius: '50%',\n flex: 'none',\n height: 6,\n width: 6,\n },\n title: {\n flex: 'none',\n gap: 4,\n alignItems: 'center',\n color: cssVar.colorText,\n display: 'flex',\n fontSize: cssVar.fontSizeLG,\n fontWeight: 600,\n minWidth: 0,\n },\n titleSub: {\n color: cssVar.colorTextDescription,\n fontSize: cssVar.fontSize,\n fontWeight: 'normal',\n },\n titleTooltip: {\n gap: 4,\n alignItems: 'center',\n display: 'inline-flex',\n },\n toolbar: {\n gap: 12,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'nowrap',\n justifyContent: 'space-between',\n marginBlockEnd: 16,\n },\n toolbarActions: {\n flex: '1',\n gap: 8,\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'flex-end',\n marginInlineStart: 'auto',\n minWidth: 0,\n },\n toolbarOptions: {\n flex: 'none',\n gap: 2,\n alignItems: 'center',\n display: 'flex',\n },\n});\n\nconst cls = (style: stylex.StyleXStyles) => stylex.props(style).className ?? '';\n\nexport const styles = {\n alert: cls(raw.alert),\n alertInfo: cls(raw.alertInfo),\n alertOption: cls(raw.alertOption),\n code: cls(raw.code),\n copyable: cls(raw.copyable),\n copyableText: cls(raw.copyableText),\n density: cls(raw.density),\n densityItem: `${PRO_PREFIX_CLS}-density-item`,\n enumList: cls(raw.enumList),\n indexBorder: `${PRO_PREFIX_CLS}-index-border`,\n lightFilter: cls(raw.lightFilter),\n lightFilterItem: `${PRO_PREFIX_CLS}-light-filter-item`,\n lightFilterLabel: cls(raw.lightFilterLabel),\n lightFilterSwitch: cls(raw.lightFilterSwitch),\n optionCell: cls(raw.optionCell),\n part: cls(raw.part),\n partBordered: cls(raw.partBordered),\n root: `${PRO_PREFIX_CLS}-root`,\n search: cls(raw.search),\n searchActions: `${PRO_PREFIX_CLS}-search-actions`,\n searchField: `${PRO_PREFIX_CLS}-search-field`,\n searchFieldControl: cls(raw.searchFieldControl),\n searchLabel: `${PRO_PREFIX_CLS}-search-label`,\n searchLabelText: cls(raw.searchLabelText),\n setting: cls(raw.setting),\n settingGroupTitle: cls(raw.settingGroupTitle),\n settingHeader: cls(raw.settingHeader),\n settingItem: `${PRO_PREFIX_CLS}-setting-item`,\n settingItemActions: `${PRO_PREFIX_CLS}-setting-item-actions`,\n settingItemTitle: cls(raw.settingItemTitle),\n settingList: cls(raw.settingList),\n status: cls(raw.status),\n statusDot: cls(raw.statusDot),\n statusProcessing: `${PRO_PREFIX_CLS}-status-processing`,\n title: cls(raw.title),\n titleSub: cls(raw.titleSub),\n titleTooltip: cls(raw.titleTooltip),\n toolbar: cls(raw.toolbar),\n toolbarActions: cls(raw.toolbarActions),\n toolbarOptions: cls(raw.toolbarOptions),\n};\n\nexport const partClass = (\n cardBordered: boolean | { search?: boolean; table?: boolean } | undefined,\n part: 'search' | 'table',\n) =>\n clsx(\n styles.part,\n (typeof cardBordered === 'object' ? cardBordered[part] : cardBordered) && styles.partBordered,\n `${PRO_PREFIX_CLS}-${part}`,\n );\n"],"mappings":"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"}
|
package/es/ProTable/type.d.mts
CHANGED
|
@@ -185,13 +185,16 @@ export interface ProTableRequestData<T> {
|
|
|
185
185
|
export type ProTableRequestSort = Record<string, SortOrder>;
|
|
186
186
|
/** `filter` argument of `request`: column key → selected filter values (ProComponents shape). */
|
|
187
187
|
export type ProTableRequestFilter = Record<string, (string | number)[] | null>;
|
|
188
|
-
/**
|
|
188
|
+
/**
|
|
189
|
+
* `request(params, sort, filter)`; resolves `{ data, total, success }` (all optional). A `null` /
|
|
190
|
+
* `undefined` result is treated as empty data.
|
|
191
|
+
*/
|
|
189
192
|
export type ProTableRequest<T, Params = Record<string, any>> = (params: Params & {
|
|
190
193
|
[key: string]: any;
|
|
191
194
|
current?: number;
|
|
192
195
|
keyword?: string;
|
|
193
196
|
pageSize?: number;
|
|
194
|
-
}, sort: ProTableRequestSort, filter: ProTableRequestFilter) => Promise<Partial<ProTableRequestData<T
|
|
197
|
+
}, sort: ProTableRequestSort, filter: ProTableRequestFilter) => Promise<Partial<ProTableRequestData<T>> | null | undefined>;
|
|
195
198
|
/**
|
|
196
199
|
* `loading` as an object: Spin options of the table overlay (`tip`, `variant`, …) plus `delay`
|
|
197
200
|
* (ms before the overlay shows). Without `spinning` the overlay follows the `request` state.
|
package/es/Switch/Switch.mjs
CHANGED
|
@@ -13,10 +13,11 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
|
|
|
13
13
|
const isDisabled = disabled || loading;
|
|
14
14
|
const resolvedChecked = value ?? checked;
|
|
15
15
|
const resolvedDefaultChecked = defaultValue ?? defaultChecked;
|
|
16
|
+
const hasText = !!(checkedChildren || unCheckedChildren);
|
|
16
17
|
return /* @__PURE__ */ jsxs(SwitchRoot, {
|
|
17
18
|
autoFocus,
|
|
18
19
|
checked: resolvedChecked,
|
|
19
|
-
className: clsx$1(className, rootClassName, classNames?.root),
|
|
20
|
+
className: clsx$1(hasText && "lobe-switch-text", className, rootClassName, classNames?.root),
|
|
20
21
|
defaultChecked: resolvedDefaultChecked,
|
|
21
22
|
disabled: isDisabled,
|
|
22
23
|
id,
|
|
@@ -29,6 +30,7 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
|
|
|
29
30
|
},
|
|
30
31
|
tabIndex,
|
|
31
32
|
title,
|
|
33
|
+
xstyle: hasText && (size === "small" ? styles.rootTextSmall : styles.rootText),
|
|
32
34
|
onCheckedChange: onChange,
|
|
33
35
|
onClick,
|
|
34
36
|
children: [
|
|
@@ -46,6 +48,11 @@ const Switch = memo(({ autoFocus, checked, checkedChildren, className, className
|
|
|
46
48
|
style: customStyles?.content,
|
|
47
49
|
children: unCheckedChildren
|
|
48
50
|
}),
|
|
51
|
+
hasText && /* @__PURE__ */ jsxs("span", {
|
|
52
|
+
"aria-hidden": true,
|
|
53
|
+
...stylex.props(styles.textSizer, size === "small" && styles.textSizerSmall),
|
|
54
|
+
children: [/* @__PURE__ */ jsx("span", { children: checkedChildren }), /* @__PURE__ */ jsx("span", { children: unCheckedChildren })]
|
|
55
|
+
}),
|
|
49
56
|
/* @__PURE__ */ jsx(SwitchThumb, {
|
|
50
57
|
className: classNames?.thumb,
|
|
51
58
|
size,
|
package/es/Switch/Switch.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","names":["clsx"],"sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { SwitchIcon, SwitchRoot, SwitchThumb } from './atoms';\nimport { styles } from './style';\nimport type { SwitchProps } from './type';\n\nconst Switch = memo<SwitchProps>(\n ({\n autoFocus,\n checked,\n checkedChildren,\n className,\n classNames,\n defaultChecked,\n defaultValue,\n disabled,\n id,\n loading,\n name,\n onChange,\n onClick,\n ref,\n rootClassName,\n size = 'default',\n style,\n styles: customStyles,\n tabIndex,\n title,\n unCheckedChildren,\n value,\n }) => {\n const isDisabled = disabled || loading;\n const resolvedChecked = value ?? checked;\n const resolvedDefaultChecked = defaultValue ?? defaultChecked;\n\n return (\n <SwitchRoot\n autoFocus={autoFocus}\n checked={resolvedChecked}\n className={clsx(className, rootClassName, classNames?.root)}\n defaultChecked={resolvedDefaultChecked}\n disabled={isDisabled}\n id={id}\n name={name}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n tabIndex={tabIndex}\n title={title}\n onCheckedChange={onChange}\n onClick={onClick}\n >\n {checkedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"left\"\n size={size}\n style={customStyles?.content}\n >\n {checkedChildren}\n </SwitchIcon>\n )}\n {unCheckedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"right\"\n size={size}\n style={customStyles?.content}\n >\n {unCheckedChildren}\n </SwitchIcon>\n )}\n <SwitchThumb className={classNames?.thumb} size={size} style={customStyles?.thumb}>\n {loading && (\n <Icon\n {...stylex.props(styles.loading)}\n icon={Loader2}\n size={size === 'small' ? 8 : 12}\n style={{ color: cssVar.colorPrimary }}\n />\n )}\n </SwitchThumb>\n </SwitchRoot>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAS,MAAmB,EAChC,WACA,SACA,iBACA,WACA,YACA,gBACA,cACA,UACA,IACA,SACA,MACA,UACA,SACA,KACA,eACA,OAAO,WACP,OACA,QAAQ,cACR,UACA,OACA,mBACA,YACI;CACJ,MAAM,aAAa,YAAY;CAC/B,MAAM,kBAAkB,SAAS;CACjC,MAAM,yBAAyB,gBAAgB;
|
|
1
|
+
{"version":3,"file":"Switch.mjs","names":["clsx"],"sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { SwitchIcon, SwitchRoot, SwitchThumb } from './atoms';\nimport { styles } from './style';\nimport type { SwitchProps } from './type';\n\nconst Switch = memo<SwitchProps>(\n ({\n autoFocus,\n checked,\n checkedChildren,\n className,\n classNames,\n defaultChecked,\n defaultValue,\n disabled,\n id,\n loading,\n name,\n onChange,\n onClick,\n ref,\n rootClassName,\n size = 'default',\n style,\n styles: customStyles,\n tabIndex,\n title,\n unCheckedChildren,\n value,\n }) => {\n const isDisabled = disabled || loading;\n const resolvedChecked = value ?? checked;\n const resolvedDefaultChecked = defaultValue ?? defaultChecked;\n\n // With inner text the switch grows to fit it (antd): an invisible sizer reserves the width\n // of the longer label and the thumb travels the measured track.\n const hasText = !!(checkedChildren || unCheckedChildren);\n\n return (\n <SwitchRoot\n autoFocus={autoFocus}\n checked={resolvedChecked}\n className={clsx(hasText && 'lobe-switch-text', className, rootClassName, classNames?.root)}\n defaultChecked={resolvedDefaultChecked}\n disabled={isDisabled}\n id={id}\n name={name}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n tabIndex={tabIndex}\n title={title}\n xstyle={hasText && (size === 'small' ? styles.rootTextSmall : styles.rootText)}\n onCheckedChange={onChange}\n onClick={onClick}\n >\n {checkedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"left\"\n size={size}\n style={customStyles?.content}\n >\n {checkedChildren}\n </SwitchIcon>\n )}\n {unCheckedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"right\"\n size={size}\n style={customStyles?.content}\n >\n {unCheckedChildren}\n </SwitchIcon>\n )}\n {hasText && (\n <span\n aria-hidden\n {...stylex.props(styles.textSizer, size === 'small' && styles.textSizerSmall)}\n >\n <span>{checkedChildren}</span>\n <span>{unCheckedChildren}</span>\n </span>\n )}\n <SwitchThumb className={classNames?.thumb} size={size} style={customStyles?.thumb}>\n {loading && (\n <Icon\n {...stylex.props(styles.loading)}\n icon={Loader2}\n size={size === 'small' ? 8 : 12}\n style={{ color: cssVar.colorPrimary }}\n />\n )}\n </SwitchThumb>\n </SwitchRoot>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAS,MAAmB,EAChC,WACA,SACA,iBACA,WACA,YACA,gBACA,cACA,UACA,IACA,SACA,MACA,UACA,SACA,KACA,eACA,OAAO,WACP,OACA,QAAQ,cACR,UACA,OACA,mBACA,YACI;CACJ,MAAM,aAAa,YAAY;CAC/B,MAAM,kBAAkB,SAAS;CACjC,MAAM,yBAAyB,gBAAgB;CAI/C,MAAM,UAAU,CAAC,EAAE,mBAAmB;CACtC,OAAO,qBAAC,YAAD;EAAuB;EAAW,SAAS;EAAiB,WAAWA,OAAK,WAAW,oBAAoB,WAAW,eAAe,YAAY,IAAI;EAAG,gBAAgB;EAAwB,UAAU;EAAgB;EAAU;EAAW;EAAW;EAAM,OAAO;GAC5Q,GAAG;GACH,GAAG,cAAc;EACnB;EAAa;EAAiB;EAAO,QAAQ,YAAY,SAAS,UAAU,OAAO,gBAAgB,OAAO;EAAW,iBAAiB;EAAmB;EAHlJ,UAAA;GAIA,mBAAmB,oBAAC,YAAD;IAAY,WAAW,YAAY;IAAS,UAAS;IAAa;IAAM,OAAO,cAAc;IAC5G,UAAA;GACS,CAAA;GACb,qBAAqB,oBAAC,YAAD;IAAY,WAAW,YAAY;IAAS,UAAS;IAAc;IAAM,OAAO,cAAc;IAC/G,UAAA;GACS,CAAA;GACb,WAAW,qBAAC,QAAD;IAAM,eAAA;IAAY,GAAI,OAAO,MAAM,OAAO,WAAW,SAAS,WAAW,OAAO,cAAc;IAA9F,UAAA,CACR,oBAAC,QAAD,EAAA,UAAO,gBAAsB,CAAA,GAC7B,oBAAC,QAAD,EAAA,UAAO,kBAAwB,CAAA,CAC3B;;GACR,oBAAC,aAAD;IAAa,WAAW,YAAY;IAAa;IAAM,OAAO,cAAc;IACzE,UAAA,WAAW,oBAAC,MAAD;KAAM,GAAI,OAAO,MAAM,OAAO,OAAO;KAAG,MAAM;KAAS,MAAM,SAAS,UAAU,IAAI;KAAI,OAAO,EAC7G,OAAO,OAAO,aAChB;IAAI,CAAA;GACW,CAAA;EACH;;AAClB,CAAC;AACD,OAAO,cAAc"}
|