@lobehub/ui 5.30.0 → 5.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -20,7 +20,7 @@ declare const SplitButtonMain: (props: ButtonProps) => import("react").JSX.Eleme
|
|
|
20
20
|
interface SplitButtonMenuProps extends Omit<DropdownMenuProps, 'children'> {
|
|
21
21
|
icon?: ReactNode;
|
|
22
22
|
}
|
|
23
|
-
declare const SplitButtonMenu: ({ icon, ...menuProps }: SplitButtonMenuProps) => import("react").JSX.Element;
|
|
23
|
+
declare const SplitButtonMenu: ({ icon, disabled, ...menuProps }: SplitButtonMenuProps) => import("react").JSX.Element;
|
|
24
24
|
type SplitButtonComponent = typeof SplitButton & {
|
|
25
25
|
Main: typeof SplitButtonMain;
|
|
26
26
|
Menu: typeof SplitButtonMenu;
|
|
@@ -7,7 +7,53 @@ import { createStaticStyles, cx } from "antd-style";
|
|
|
7
7
|
import { ChevronDownIcon } from "lucide-react";
|
|
8
8
|
//#region src/base-ui/Button/SplitButton.tsx
|
|
9
9
|
const SplitButtonContext = createContext({});
|
|
10
|
-
const styles = createStaticStyles(({ css }) => ({
|
|
10
|
+
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
11
|
+
interactionDisabled: css`
|
|
12
|
+
opacity: 0.5;
|
|
13
|
+
|
|
14
|
+
& > :where(button, a):disabled,
|
|
15
|
+
& > :where(button, a)[aria-disabled='true'] {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
`,
|
|
19
|
+
solid: css`
|
|
20
|
+
& > :where(button, a):last-of-type::before {
|
|
21
|
+
pointer-events: none;
|
|
22
|
+
content: '';
|
|
23
|
+
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset-block: 0;
|
|
26
|
+
inset-inline-start: 0;
|
|
27
|
+
|
|
28
|
+
width: 1px;
|
|
29
|
+
|
|
30
|
+
opacity: 0.2;
|
|
31
|
+
background: currentcolor;
|
|
32
|
+
}
|
|
33
|
+
`,
|
|
34
|
+
solidDanger: css`
|
|
35
|
+
&:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
36
|
+
border-color: ${cssVar.colorErrorHover};
|
|
37
|
+
background: ${cssVar.colorErrorHover};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
41
|
+
border-color: ${cssVar.colorErrorActive};
|
|
42
|
+
background: ${cssVar.colorErrorActive};
|
|
43
|
+
}
|
|
44
|
+
`,
|
|
45
|
+
solidPrimary: css`
|
|
46
|
+
&:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
47
|
+
border-color: ${cssVar.colorPrimaryHover};
|
|
48
|
+
background: ${cssVar.colorPrimaryHover};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
52
|
+
border-color: ${cssVar.colorPrimaryActive};
|
|
53
|
+
background: ${cssVar.colorPrimaryActive};
|
|
54
|
+
}
|
|
55
|
+
`,
|
|
56
|
+
splitButton: css`
|
|
11
57
|
display: inline-flex;
|
|
12
58
|
flex-direction: row;
|
|
13
59
|
|
|
@@ -21,7 +67,8 @@ const styles = createStaticStyles(({ css }) => ({ splitButton: css`
|
|
|
21
67
|
border-start-start-radius: 0;
|
|
22
68
|
border-end-start-radius: 0;
|
|
23
69
|
}
|
|
24
|
-
`
|
|
70
|
+
`
|
|
71
|
+
}));
|
|
25
72
|
const SplitButton = ({ children, className, style, danger, disabled, loading, size, type }) => {
|
|
26
73
|
const shared = useMemo(() => ({
|
|
27
74
|
danger,
|
|
@@ -39,8 +86,8 @@ const SplitButton = ({ children, className, style, danger, disabled, loading, si
|
|
|
39
86
|
return /* @__PURE__ */ jsx(SplitButtonContext, {
|
|
40
87
|
value: shared,
|
|
41
88
|
children: /* @__PURE__ */ jsx("div", {
|
|
42
|
-
className: cx(styles.splitButton, className),
|
|
43
89
|
style,
|
|
90
|
+
className: cx(styles.splitButton, type === "primary" && styles.solid, type === "primary" && (danger ? styles.solidDanger : styles.solidPrimary), (disabled || loading) && styles.interactionDisabled, className),
|
|
44
91
|
children
|
|
45
92
|
})
|
|
46
93
|
});
|
|
@@ -52,12 +99,15 @@ const SplitButtonMain = (props) => {
|
|
|
52
99
|
...props
|
|
53
100
|
});
|
|
54
101
|
};
|
|
55
|
-
const SplitButtonMenu = ({ icon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }), ...menuProps }) => {
|
|
102
|
+
const SplitButtonMenu = ({ icon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }), disabled, ...menuProps }) => {
|
|
56
103
|
const shared = use(SplitButtonContext);
|
|
104
|
+
const interactionDisabled = disabled || shared.disabled || shared.loading;
|
|
57
105
|
return /* @__PURE__ */ jsx(DropdownMenu, {
|
|
58
106
|
...menuProps,
|
|
107
|
+
disabled: interactionDisabled,
|
|
59
108
|
children: /* @__PURE__ */ jsx(Button, {
|
|
60
109
|
...shared,
|
|
110
|
+
disabled: interactionDisabled,
|
|
61
111
|
icon
|
|
62
112
|
})
|
|
63
113
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButton.mjs","names":[],"sources":["../../../src/base-ui/Button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { createContext, type CSSProperties, type ReactNode, use, useMemo } from 'react';\n\nimport { DropdownMenu, type DropdownMenuProps } from '@/base-ui/DropdownMenu';\n\nimport Button from './Button';\nimport type { ButtonProps } from './type';\n\ninterface SharedVisualProps {\n danger?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: ButtonProps['size'];\n type?: ButtonProps['type'];\n}\n\ninterface SplitButtonProps extends SharedVisualProps {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nconst SplitButtonContext = createContext<SharedVisualProps>({});\n\nconst styles = createStaticStyles(({ css }) => ({\n splitButton: css`\n display: inline-flex;\n flex-direction: row;\n\n & > :where(button, a):first-of-type {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n & > :where(button, a):last-of-type {\n margin-inline-start: -1px;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `,\n}));\n\nconst SplitButton = ({\n children,\n className,\n style,\n danger,\n disabled,\n loading,\n size,\n type,\n}: SplitButtonProps) => {\n const shared = useMemo<SharedVisualProps>(\n () => ({ danger, disabled, loading, size, type }),\n [danger, disabled, loading, size, type],\n );\n return (\n <SplitButtonContext value={shared}>\n <div
|
|
1
|
+
{"version":3,"file":"SplitButton.mjs","names":[],"sources":["../../../src/base-ui/Button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { createContext, type CSSProperties, type ReactNode, use, useMemo } from 'react';\n\nimport { DropdownMenu, type DropdownMenuProps } from '@/base-ui/DropdownMenu';\n\nimport Button from './Button';\nimport type { ButtonProps } from './type';\n\ninterface SharedVisualProps {\n danger?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: ButtonProps['size'];\n type?: ButtonProps['type'];\n}\n\ninterface SplitButtonProps extends SharedVisualProps {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nconst SplitButtonContext = createContext<SharedVisualProps>({});\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n interactionDisabled: css`\n opacity: 0.5;\n\n & > :where(button, a):disabled,\n & > :where(button, a)[aria-disabled='true'] {\n opacity: 1;\n }\n `,\n solid: css`\n & > :where(button, a):last-of-type::before {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n\n width: 1px;\n\n opacity: 0.2;\n background: currentcolor;\n }\n `,\n solidDanger: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n solidPrimary: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n splitButton: css`\n display: inline-flex;\n flex-direction: row;\n\n & > :where(button, a):first-of-type {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n & > :where(button, a):last-of-type {\n margin-inline-start: -1px;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `,\n}));\n\nconst SplitButton = ({\n children,\n className,\n style,\n danger,\n disabled,\n loading,\n size,\n type,\n}: SplitButtonProps) => {\n const shared = useMemo<SharedVisualProps>(\n () => ({ danger, disabled, loading, size, type }),\n [danger, disabled, loading, size, type],\n );\n return (\n <SplitButtonContext value={shared}>\n <div\n style={style}\n className={cx(\n styles.splitButton,\n type === 'primary' && styles.solid,\n type === 'primary' && (danger ? styles.solidDanger : styles.solidPrimary),\n (disabled || loading) && styles.interactionDisabled,\n className,\n )}\n >\n {children}\n </div>\n </SplitButtonContext>\n );\n};\n\nconst SplitButtonMain = (props: ButtonProps) => {\n const shared = use(SplitButtonContext);\n return <Button {...shared} {...props} />;\n};\n\ninterface SplitButtonMenuProps extends Omit<DropdownMenuProps, 'children'> {\n icon?: ReactNode;\n}\n\nconst SplitButtonMenu = ({\n icon = <ChevronDownIcon size={14} />,\n disabled,\n ...menuProps\n}: SplitButtonMenuProps) => {\n const shared = use(SplitButtonContext);\n const interactionDisabled = disabled || shared.disabled || shared.loading;\n\n return (\n <DropdownMenu {...menuProps} disabled={interactionDisabled}>\n <Button {...shared} disabled={interactionDisabled} icon={icon} />\n </DropdownMenu>\n );\n};\n\ntype SplitButtonComponent = typeof SplitButton & {\n Main: typeof SplitButtonMain;\n Menu: typeof SplitButtonMenu;\n};\n\n(SplitButton as SplitButtonComponent).Main = SplitButtonMain;\n(SplitButton as SplitButtonComponent).Menu = SplitButtonMenu;\n\nexport type { SplitButtonMenuProps, SplitButtonProps };\nexport default SplitButton as SplitButtonComponent;\n"],"mappings":";;;;;;;;AAyBA,MAAM,qBAAqB,cAAiC,CAAC,CAAC;AAE9D,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,qBAAqB,GAAG;;;;;;;;CAQxB,OAAO,GAAG;;;;;;;;;;;;;;;CAeV,aAAa,GAAG;;sBAEI,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAG1C,cAAc,GAAG;;sBAEG,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAG5C,aAAa,GAAG;;;;;;;;;;;;;;;AAelB,EAAE;AAEF,MAAM,eAAe,EACnB,UACA,WACA,OACA,QACA,UACA,SACA,MACA,WACsB;CACtB,MAAM,SAAS,eACN;EAAE;EAAQ;EAAU;EAAS;EAAM;CAAK,IAC/C;EAAC;EAAQ;EAAU;EAAS;EAAM;CAAI,CACxC;CACA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,OAAD;GACS;GACP,WAAW,GACT,OAAO,aACP,SAAS,aAAa,OAAO,OAC7B,SAAS,cAAc,SAAS,OAAO,cAAc,OAAO,gBAC3D,YAAY,YAAY,OAAO,qBAChC,SACF;GAEC;EACE,CAAA;CACa,CAAA;AAExB;AAEA,MAAM,mBAAmB,UAAuB;CAC9C,MAAM,SAAS,IAAI,kBAAkB;CACrC,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAQ,GAAI;CAAQ,CAAA;AACzC;AAMA,MAAM,mBAAmB,EACvB,OAAO,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA,GACnC,UACA,GAAG,gBACuB;CAC1B,MAAM,SAAS,IAAI,kBAAkB;CACrC,MAAM,sBAAsB,YAAY,OAAO,YAAY,OAAO;CAElE,OACE,oBAAC,cAAD;EAAc,GAAI;EAAW,UAAU;EACrC,UAAA,oBAAC,QAAD;GAAQ,GAAI;GAAQ,UAAU;GAA2B;EAAO,CAAA;CACpD,CAAA;AAElB;AAOA,YAAsC,OAAO;AAC7C,YAAsC,OAAO"}
|