add tailwindcss

2024-10-19 18:25:59 +08:00
parent a7144104e8
commit 9ce91c593c
16 changed files with 989 additions and 33 deletions
--- a/apps/ui/theme/modal.mdx
+++ b/apps/ui/theme/modal.mdx
@@ -0,0 +1,131 @@
+import { message } from '../deploy/message.js'
+import { DialogModal } from '@kevisual/ui'
+import '@kevisual/ui/dist/index.css'
+
+Modal
+
+> 使用原生js实现的弹窗组件
+
+
+export const ShowModal = () => {
+  const url = 'https://kevisual.xiongxiao.me/system/theme/index.js'
+
+  const onClick = async () => {
+    console.log('theme', DialogModal)
+    // console.log('clicked')
+    // message.info('Hello, this is a message')
+    const content = document.createElement('div');
+    content.innerHTML = `
+    <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
+      <h2 class="text-2xl font-bold mb-4">Token 无效</h2>
+      <p class="mb-6">您的登录凭证已失效，请重新登录。</p>
+      <a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
+    </div>
+`;
+    const modal = DialogModal.render(content, {
+      id: 'redirect-to-login',
+      contentStyle: {
+        width: 'unset',
+      },
+      dialogTitleStyle: {
+        display: 'none',
+        padding: '0',
+      },
+      dialogContentStyle: {
+        padding: '0',
+      },
+      mask: true,
+      open: false,
+    });
+    modal.setOpen(true)
+  }
+  return <div onClick={onClick}>点击显示弹窗</div>
+}
+
+<ShowModal />
+
+使用方法
+```js
+// import { DialogModal } from 'https://kevisual.xiongxiao.me/system/theme/index.js'
+import { DialogModal } from '@kevisual/ui';
+import '@kevisual/ui/dist/index.css';
+
+const content = document.createElement('div');
+content.innerHTML = `
+    <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
+      <h2 class="text-2xl font-bold mb-4">Token 无效</h2>
+      <p class="mb-6">您的登录凭证已失效，请重新登录。</p>
+      <a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
+    </div>
+`;
+export const modal = DialogModal.render(content, {
+  id: 'redirect-to-login',
+  contentStyle: {
+    width: 'unset',
+  },
+  dialogTitleStyle: {
+    display: 'none',
+    padding: '0',
+  },
+  dialogContentStyle: {
+    padding: '0',
+  },
+  mask: true,
+  open: false,
+});
+
+```
+
+类型
+```typescript
+export type ModalOpts<
+  T = {
+    [key: string]: any;
+  },
+  U = {
+    [key: string]: any;
+  },
+> = {
+  root?: HTMLDivElement | string;
+  id?: string;
+  mask?: boolean;
+  maskClassName?: string;
+  maskStyle?: ElStyle;
+  maskClose?: boolean;
+
+  contentClassName?: string;
+  contentStyle?: ElStyle;
+  destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
+  hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
+  open?: boolean;
+
+  onClose?: () => void;
+  defaultStyle?: DefaultStyle<U>;
+} & T;
+export type DefaultStyle<T> = {
+  defaultContentStyle?: ObjCss;
+  defaultMaskStyle?: ObjCss;
+} & T;
+
+type DialogModalOpts = {
+  dialogTitle?: string;
+  dialogTitleClassName?: string;
+  dialogTitleStyle?: ElStyle;
+  dialogTitleEl?: HTMLElement;
+  dialogTitleCloseIcon?: boolean;
+
+  dialogContentClassName?: string;
+  dialogContentStyle?: ElStyle;
+
+  dialogFooterClassName?: string;
+  dialogFooterStyle?: ElStyle;
+} & ModalOpts<KV, DialogDefaultStyle>;
+
+type DialogDefaultStyle = {
+  defaultDialogTitleStyle?: ObjCss;
+  defaultDialogContentStyle?: ObjCss;
+  defaultDialogFooterStyle?: ObjCss;
+};
+
+
+```