@lark-apaas/client-toolkit 1.2.26 → 1.2.28-alpha.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/lib/components/ui/badge.d.ts +1 -1
- package/lib/components/ui/button.d.ts +2 -2
- package/lib/components/ui/button.js +1 -1
- package/lib/components/ui/confirm.d.ts +28 -0
- package/lib/components/ui/confirm.js +83 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +2 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const badgeVariants: (props?: {
|
|
4
|
-
variant?: "default" | "destructive" | "
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary";
|
|
5
5
|
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
6
6
|
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
7
7
|
asChild?: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const buttonVariants: (props?: {
|
|
4
|
-
variant?: "default" | "link" | "destructive" | "
|
|
5
|
-
size?: "default" | "
|
|
4
|
+
variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost";
|
|
5
|
+
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
|
|
6
6
|
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
7
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
8
8
|
asChild?: boolean;
|
|
@@ -8,7 +8,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
|
|
|
8
8
|
variant: {
|
|
9
9
|
default: "bg-primary text-primary-foreground not-disabled:hover:bg-primary/90",
|
|
10
10
|
destructive: "bg-destructive text-white not-disabled:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
11
|
-
outline: "border bg-
|
|
11
|
+
outline: "border border-input bg-transparent text-foreground not-disabled:hover:bg-accent not-disabled:hover:text-accent-foreground",
|
|
12
12
|
secondary: "bg-secondary text-secondary-foreground not-disabled:hover:bg-secondary/80",
|
|
13
13
|
ghost: "not-disabled:hover:bg-accent not-disabled:hover:text-accent-foreground dark:not-disabled:hover:bg-accent/50",
|
|
14
14
|
link: "text-primary underline-offset-4 not-disabled:hover:underline"
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface ConfirmOptions {
|
|
2
|
+
/** 标题,默认 "提示" */
|
|
3
|
+
title?: string;
|
|
4
|
+
/** 内容描述 */
|
|
5
|
+
message: string;
|
|
6
|
+
/** 确认按钮文案,默认 "确认" */
|
|
7
|
+
confirmText?: string;
|
|
8
|
+
/** 取消按钮文案,默认 "取消" */
|
|
9
|
+
cancelText?: string;
|
|
10
|
+
/** 确认按钮样式变体 */
|
|
11
|
+
variant?: 'default' | 'destructive';
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* 函数式确认弹窗,作为 window.confirm 的直接平替。
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // 简单用法(兼容 window.confirm 传参)
|
|
18
|
+
* const ok = await showConfirm('确定删除吗?');
|
|
19
|
+
*
|
|
20
|
+
* // 完整用法
|
|
21
|
+
* const ok = await showConfirm({
|
|
22
|
+
* title: '确认删除',
|
|
23
|
+
* message: '删除后不可恢复',
|
|
24
|
+
* confirmText: '删除',
|
|
25
|
+
* variant: 'destructive',
|
|
26
|
+
* });
|
|
27
|
+
*/
|
|
28
|
+
export declare function showConfirm(options: string | ConfirmOptions): Promise<boolean>;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { createRoot } from "react-dom/client";
|
|
4
|
+
import { Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
|
|
5
|
+
import { Button } from "./button.js";
|
|
6
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
7
|
+
function showConfirm(options) {
|
|
8
|
+
const opts = 'string' == typeof options ? {
|
|
9
|
+
message: options
|
|
10
|
+
} : options;
|
|
11
|
+
const { title = '提示', message, confirmText = '确认', cancelText = '取消', variant = 'default' } = opts;
|
|
12
|
+
return new Promise((resolve)=>{
|
|
13
|
+
const container = document.createElement('div');
|
|
14
|
+
document.body.appendChild(container);
|
|
15
|
+
const root = createRoot(container);
|
|
16
|
+
function cleanup() {
|
|
17
|
+
root.unmount();
|
|
18
|
+
container.remove();
|
|
19
|
+
}
|
|
20
|
+
function handleConfirm() {
|
|
21
|
+
cleanup();
|
|
22
|
+
resolve(true);
|
|
23
|
+
}
|
|
24
|
+
function handleCancel() {
|
|
25
|
+
cleanup();
|
|
26
|
+
resolve(false);
|
|
27
|
+
}
|
|
28
|
+
root.render(/*#__PURE__*/ jsx(ConfirmDialog, {
|
|
29
|
+
title: title,
|
|
30
|
+
message: message,
|
|
31
|
+
confirmText: confirmText,
|
|
32
|
+
cancelText: cancelText,
|
|
33
|
+
variant: variant,
|
|
34
|
+
onConfirm: handleConfirm,
|
|
35
|
+
onCancel: handleCancel
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function ConfirmDialog({ title, message, confirmText, cancelText, variant, onConfirm, onCancel }) {
|
|
40
|
+
return /*#__PURE__*/ jsx(Root, {
|
|
41
|
+
defaultOpen: true,
|
|
42
|
+
onOpenChange: (open)=>{
|
|
43
|
+
if (!open) onCancel();
|
|
44
|
+
},
|
|
45
|
+
children: /*#__PURE__*/ jsxs(Portal, {
|
|
46
|
+
children: [
|
|
47
|
+
/*#__PURE__*/ jsx(Overlay, {
|
|
48
|
+
className: clsxWithTw('fixed inset-0 z-[99999] bg-black/40', 'data-[state=open]:animate-in data-[state=open]:fade-in-0', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0')
|
|
49
|
+
}),
|
|
50
|
+
/*#__PURE__*/ jsxs(Content, {
|
|
51
|
+
className: clsxWithTw('fixed left-1/2 top-1/2 z-[99999] -translate-x-1/2 -translate-y-1/2', 'w-[90vw] max-w-[400px] rounded-lg', 'bg-[var(--popover,var(--color-neutral-00,#fff))] text-[var(--popover-foreground,var(--color-neutral-950,#1f2329))]', 'border border-[var(--border,var(--color-neutral-300,#dee0e3))]', 'shadow-lg p-6', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'),
|
|
52
|
+
children: [
|
|
53
|
+
/*#__PURE__*/ jsx(Title, {
|
|
54
|
+
className: clsxWithTw('text-base font-medium leading-6', 'text-[var(--foreground,var(--color-neutral-950,#1f2329))]'),
|
|
55
|
+
children: title
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsx(Description, {
|
|
58
|
+
className: clsxWithTw('mt-2 text-sm leading-5', 'text-[var(--muted-foreground,var(--color-neutral-700,#646a73))]'),
|
|
59
|
+
children: message
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsxs("div", {
|
|
62
|
+
className: clsxWithTw('mt-6 flex justify-end gap-2'),
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ jsx(Button, {
|
|
65
|
+
variant: "outline",
|
|
66
|
+
className: "!bg-transparent !text-inherit",
|
|
67
|
+
onClick: onCancel,
|
|
68
|
+
children: cancelText
|
|
69
|
+
}),
|
|
70
|
+
/*#__PURE__*/ jsx(Button, {
|
|
71
|
+
variant: variant,
|
|
72
|
+
onClick: onConfirm,
|
|
73
|
+
children: confirmText
|
|
74
|
+
})
|
|
75
|
+
]
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
})
|
|
79
|
+
]
|
|
80
|
+
})
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
export { showConfirm };
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export declare const capabilityClient: import("@lark-apaas/client-capability").CapabilityClient;
|
|
2
|
+
export { showConfirm } from './components/ui/confirm';
|
|
3
|
+
export type { ConfirmOptions } from './components/ui/confirm';
|
|
2
4
|
declare const _default: {
|
|
3
5
|
version: string;
|
|
4
6
|
};
|
package/lib/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import { isNewPathEnabled } from "./utils/apiPath.js";
|
|
|
5
5
|
import { logger } from "./logger/index.js";
|
|
6
6
|
import { showToast } from "./components/ui/toast.js";
|
|
7
7
|
import { version } from "../package.json";
|
|
8
|
+
import { showConfirm } from "./components/ui/confirm.js";
|
|
8
9
|
const _appId = getAppId();
|
|
9
10
|
const _acquireUploadUrl = isNewPathEnabled() ? `/app/${_appId}/__runtime__/api/v1/studio/plugins/tmp_files/acquire_upload_url` : "/af/api/v1/studio/plugins/tmp_files/acquire_upload_url";
|
|
10
11
|
const _acquireDownloadUrl = isNewPathEnabled() ? `/app/${_appId}/__runtime__/api/v1/studio/plugins/tmp_files/acquire_download_url` : "/af/api/v1/studio/plugins/tmp_files/acquire_download_url";
|
|
@@ -25,4 +26,4 @@ const capabilityClient = createClient({
|
|
|
25
26
|
const src = {
|
|
26
27
|
version: version
|
|
27
28
|
};
|
|
28
|
-
export { capabilityClient, src as default };
|
|
29
|
+
export { capabilityClient, src as default, showConfirm };
|