plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/normal/DemoDialog.tsx

@@ -1,507 +1,507 @@
-import {designPage, reactive} from "plain-design-composition";
-import {Button, Dialog, Icon, Input} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {delay} from "plain-utils/utils/delay";
-
-export const demo1 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="基本用法">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-export const demo2 = designPage(() => {
-  const state = reactive({
-    show: false,
-    show1: false,
-    show2: false,
-  });
-  return () => (
-    <>
-      <DemoRow title="弹框尺寸">
-        <Button label="设置宽高400*300" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} height={300} width={400} title="内容可编辑">
-          <div contentEditable={true}>
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-          </div>
-        </Dialog>
-
-        <Button label="设置最小宽高400*300" onClick={() => state.show1 = !state.show1}/>
-        <Dialog v-model={state.show1} minHeight={300} minWidth={400} title="内容可编辑">
-          <div contentEditable={true}>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        </Dialog>
-
-        <Button label="设置最大宽高400*300" onClick={() => state.show2 = !state.show2}/>
-        <Dialog v-model={state.show2} maxHeight={300} maxWidth={400} title="内容可编辑">
-          <div contentEditable={true}>
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-            桃花坞里桃花庵；
-            桃花庵里桃花仙；
-            桃花仙人种桃树；
-            又摘桃花换酒钱；
-          </div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    show: false,
-    show2: false,
-    show3: false,
-  });
-  return () => (
-    <>
-      <DemoRow title="操作按钮">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300" confirmButton cancelButton onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-
-        <Button label="居中" onClick={() => state.show2 = !state.show2}/>
-        <Dialog v-model={state.show2} minWidth="300" confirmButton cancelButton headAlign="center" contentAlign="center" footAlign="center" onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-
-        <Button label="额外按钮" onClick={() => state.show3 = !state.show3}/>
-        <Dialog v-model={state.show3} minWidth="300" confirmButton cancelButton headAlign="center" contentAlign="center" footAlign="center" onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
-          {{
-            default: () => <>
-              <div>桃花坞里桃花庵；</div>
-              <div>桃花庵里桃花仙；</div>
-              <div>桃花仙人种桃树；</div>
-              <div>又摘桃花换酒钱；</div>
-            </>,
-            foot: () => <>
-              <Button label="自定义按钮" style={{ order: 5, }}/>
-            </>
-          }}
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo4 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="去掉内容内边距">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} noContentPadding minWidth="300">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-export const demo5 = designPage(() => {
-  const state = reactive({ show: false, show2: false });
-  return () => (
-    <>
-      <DemoRow title="自定义标题">
-        <Button label="自定义标题栏" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300">
-          {{
-            default: () => <>
-              <div>桃花坞里桃花庵；</div>
-              <div>桃花庵里桃花仙；</div>
-              <div>桃花仙人种桃树；</div>
-              <div>又摘桃花换酒钱；</div>
-            </>,
-            head: () => <>
-              <Icon icon="pi-info-circle-fill" style={{ marginRight: '4px' }}/>
-              <span>系统提示</span>
-            </>
-          }}
-        </Dialog>
-
-        <Button label="无标题栏" onClick={() => state.show2 = !state.show2}/>
-        <Dialog v-model={state.show2} minWidth="300" noHead contentAlign="center">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-
-export const demo6 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="去掉关闭按钮">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300" noClose>
-          {{
-            default: () => <>
-              <div>桃花坞里桃花庵；</div>
-              <div>桃花庵里桃花仙；</div>
-              <div>桃花仙人种桃树；</div>
-              <div>又摘桃花换酒钱；</div>
-            </>,
-            head: () => <>
-              <Icon icon="pi-info-circle-fill" style={{ marginRight: '4px' }}/>
-              <span>系统提示</span>
-            </>
-          }}
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-
-export const demo7 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="全屏弹框">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} fullscreen>
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-export const demo8 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="无遮罩">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} noMask minWidth={300}>
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo9 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="继承属性">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} noMask minWidth={300} className="my-dialog" data-id="hello">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-export const demo10 = designPage(() => {
-  const state = reactive({ show: false, open: false });
-  return () => (
-    <>
-      <DemoRow title="绑定open">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Button label={state.open ? 'open' : 'close'}/>
-        <Dialog
-          v-model={state.show}
-          v-model:open={state.open}
-          minWidth={300} className="my-dialog" data-id="hello">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-
-export const demo10_1 = designPage(() => {
-  const state = reactive({ show1: false, show2: false });
-  return () => (
-    <>
-      <DemoRow title="关闭按钮类型">
-        <Button label="square" onClick={() => state.show1 = !state.show1}/>
-        <Dialog v-model={state.show1} minWidth={300} closeType="square">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-
-        <Button label="triangle" onClick={() => state.show2 = !state.show2}/>
-        <Dialog v-model={state.show2} minWidth={300} closeType="triangle">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo11 = designPage(() => {
-  const state = reactive({ show: false, show2: false, show3: false, });
-  return () => (
-    <>
-      <DemoRow title="关闭时销毁内容实例">
-        <p>比如弹框内是一个带查询表单的数据表格，查询表单的查询参数有数据表格组件自己管理。</p>
-        <p>关闭时销毁会导致每次打开，数据表格的查询参数都会重置</p>
-        <p>不销毁则，每次打开状态停留在上次关闭的状态</p>
-        <Button label="关闭时销毁内容实例" onClick={() => state.show = !state.show}/>
-        <Dialog
-          v-model={state.show}
-          destroyOnClose
-          minWidth={300}
-        >
-          <Input modelValue="hello world"/>
-        </Dialog>
-        <Button label="关闭时不销毁内容实例（默认）" onClick={() => state.show2 = !state.show2}/>
-        <Dialog
-          v-model={state.show2}
-          minWidth={300}
-        >
-          <Input modelValue="hello world2"/>
-        </Dialog>
-
-        <Button label="立即初始化弹框内容（SEO）" onClick={() => state.show3 = !state.show3}/>
-        <Dialog
-          v-model={state.show3}
-          minWidth={300}
-          className="my-dialog-1"
-          data-id="my-dialog-1"
-          initialize
-        >
-          <Input modelValue="hello world2"/>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo12 = designPage(() => {
-  const state = reactive({ show: false, loading: false });
-  return () => (
-    <>
-      <DemoRow title="加载状态">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300" loading={state.loading} footAlign="center" headAlign="center" contentAlign="center">
-          {{
-            default: () => <>
-              <div>桃花坞里桃花庵；</div>
-              <div>桃花庵里桃花仙；</div>
-              <div>桃花仙人种桃树；</div>
-              <div>又摘桃花换酒钱；</div>
-            </>,
-            foot: () => (
-              <Button label="open loading 3s" mode="fill" asyncHandler={async () => {
-                state.loading = true;
-                await delay(3000);
-                state.loading = false;
-              }}/>
-            ),
-          }}
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-export const demo13 = designPage(() => {
-  const state = reactive({
-    show: false,
-    text: ''
-  });
-
-  const handleConfirm = async (close: () => void) => {
-    await delay(2000);
-    if (!state.text) {
-      const msg = '请输入文本！';
-      alert(msg);
-      throw new Error(msg);
-    }
-  };
-
-  return () => (
-    <>
-      <DemoRow title="异步确认">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300" handleConfirm={handleConfirm} confirmButton cancelButton>
-          <Input v-model={state.text}/>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo14 = designPage(() => {
-  const state = reactive({ show: false, show2: false });
-  return () => (
-    <>
-      <DemoRow title="多个弹框">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300">
-          <Button label="打开弹框" onClick={() => state.show2 = !state.show2}/>
-        </Dialog>
-        <Dialog v-model={state.show2} minWidth="300">
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-
-export const demo15 = designPage(() => {
-  const state = reactive({ show: false, text: '' });
-
-  const handleConfirm = async (close: () => void) => {
-    await delay(2000);
-    if (!state.text) {
-      const msg = '请输入文本！';
-      alert(msg);
-      throw new Error(msg);
-    }
-  };
-
-  const handleCancel = async (close: () => void) => {
-    await delay(2000);
-    if (!state.text) {
-      if (!confirm('确定要取消吗？')) {
-        return Promise.reject('stop cancel!');
-      }
-    }
-  };
-
-  return () => (
-    <>
-      <DemoRow title="完全控制确认以及取消动作">
-        <p>用户可以通过enter按键触发确定以及esc按键触发取消动作，所以要完全控制用户的行为，仅仅去掉确认按钮、取消按钮、关闭按钮是不够的。</p>
-        <p>需要在handleConfirm以及handleCancel中处理，如果不允许关闭，请返回Promise.reject或者抛出异常</p>
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300" handleConfirm={handleConfirm} handleCancel={handleCancel} confirmButton cancelButton>
-          <Input v-model={state.text}/>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
-
-
-export const demo16 = designPage(() => {
-  const state = reactive({ val: {} as any });
-  return () => (
-    <>
-      <DemoRow title="弹框位置">
-        <p>类似于抽屉组件Drawer</p>
-        {['top', 'left', 'right', 'bottom'].map(position => (
-          <Button key={position} label={position.toUpperCase()} onClick={() => state.val[position] = !state.val[position]}/>
-        ))}
-        {(['top', 'left', 'right', 'bottom'] as const).map(position => (
-          <Dialog key={position} v-model={state.val[position]} width={position === 'left' || position == 'right' ? 300 : undefined} position={position} confirmButton cancelButton>
-            {{
-              default: () => <>
-                <div>桃花坞里桃花庵；</div>
-                <div>桃花庵里桃花仙；</div>
-                <div>桃花仙人种桃树；</div>
-                <div>又摘桃花换酒钱；</div>
-              </>,
-              foot: () => <>
-                <Button label="external" style={{ order: 5 }}/>
-              </>
-            }}
-          </Dialog>
-        ))}
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo17 = designPage(() => {
-  const state = reactive({ show: false });
-  return () => (
-    <>
-      <DemoRow title="可拖拽弹框">
-        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
-        <Dialog v-model={state.show} minWidth="300" movable>
-          <div>桃花坞里桃花庵；</div>
-          <div>桃花庵里桃花仙；</div>
-          <div>桃花仙人种桃树；</div>
-          <div>又摘桃花换酒钱；</div>
-        </Dialog>
-      </DemoRow>
-    </>
-  );
-});
+import {designPage, reactive} from "plain-design-composition";
+import {Button, Dialog, Icon, Input} from "../../../../packages";
+import {DemoRow} from "../../Demo/DemoRow";
+import {delay} from "plain-utils/utils/delay";
+
+export const demo1 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="基本用法">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+export const demo2 = designPage(() => {
+  const state = reactive({
+    show: false,
+    show1: false,
+    show2: false,
+  });
+  return () => (
+    <>
+      <DemoRow title="弹框尺寸">
+        <Button label="设置宽高400*300" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} height={300} width={400} title="内容可编辑">
+          <div contentEditable={true}>
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+          </div>
+        </Dialog>
+
+        <Button label="设置最小宽高400*300" onClick={() => state.show1 = !state.show1}/>
+        <Dialog v-model={state.show1} minHeight={300} minWidth={400} title="内容可编辑">
+          <div contentEditable={true}>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        </Dialog>
+
+        <Button label="设置最大宽高400*300" onClick={() => state.show2 = !state.show2}/>
+        <Dialog v-model={state.show2} maxHeight={300} maxWidth={400} title="内容可编辑">
+          <div contentEditable={true}>
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+            桃花坞里桃花庵；
+            桃花庵里桃花仙；
+            桃花仙人种桃树；
+            又摘桃花换酒钱；
+          </div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo3 = designPage(() => {
+  const state = reactive({
+    show: false,
+    show2: false,
+    show3: false,
+  });
+  return () => (
+    <>
+      <DemoRow title="操作按钮">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300" confirmButton cancelButton onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+
+        <Button label="居中" onClick={() => state.show2 = !state.show2}/>
+        <Dialog v-model={state.show2} minWidth="300" confirmButton cancelButton headAlign="center" contentAlign="center" footAlign="center" onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+
+        <Button label="额外按钮" onClick={() => state.show3 = !state.show3}/>
+        <Dialog v-model={state.show3} minWidth="300" confirmButton cancelButton headAlign="center" contentAlign="center" footAlign="center" onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
+          {{
+            default: () => <>
+              <div>桃花坞里桃花庵；</div>
+              <div>桃花庵里桃花仙；</div>
+              <div>桃花仙人种桃树；</div>
+              <div>又摘桃花换酒钱；</div>
+            </>,
+            foot: () => <>
+              <Button label="自定义按钮" style={{ order: 5, }}/>
+            </>
+          }}
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo4 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="去掉内容内边距">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} noContentPadding minWidth="300">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+export const demo5 = designPage(() => {
+  const state = reactive({ show: false, show2: false });
+  return () => (
+    <>
+      <DemoRow title="自定义标题">
+        <Button label="自定义标题栏" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300">
+          {{
+            default: () => <>
+              <div>桃花坞里桃花庵；</div>
+              <div>桃花庵里桃花仙；</div>
+              <div>桃花仙人种桃树；</div>
+              <div>又摘桃花换酒钱；</div>
+            </>,
+            head: () => <>
+              <Icon icon="pi-info-circle-fill" style={{ marginRight: '4px' }}/>
+              <span>系统提示</span>
+            </>
+          }}
+        </Dialog>
+
+        <Button label="无标题栏" onClick={() => state.show2 = !state.show2}/>
+        <Dialog v-model={state.show2} minWidth="300" noHead contentAlign="center">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+
+export const demo6 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="去掉关闭按钮">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300" noClose>
+          {{
+            default: () => <>
+              <div>桃花坞里桃花庵；</div>
+              <div>桃花庵里桃花仙；</div>
+              <div>桃花仙人种桃树；</div>
+              <div>又摘桃花换酒钱；</div>
+            </>,
+            head: () => <>
+              <Icon icon="pi-info-circle-fill" style={{ marginRight: '4px' }}/>
+              <span>系统提示</span>
+            </>
+          }}
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+
+export const demo7 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="全屏弹框">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} fullscreen>
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+export const demo8 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="无遮罩">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} noMask minWidth={300}>
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo9 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="继承属性">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} noMask minWidth={300} className="my-dialog" data-id="hello">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+export const demo10 = designPage(() => {
+  const state = reactive({ show: false, open: false });
+  return () => (
+    <>
+      <DemoRow title="绑定open">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Button label={state.open ? 'open' : 'close'}/>
+        <Dialog
+          v-model={state.show}
+          v-model:open={state.open}
+          minWidth={300} className="my-dialog" data-id="hello">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+
+export const demo10_1 = designPage(() => {
+  const state = reactive({ show1: false, show2: false });
+  return () => (
+    <>
+      <DemoRow title="关闭按钮类型">
+        <Button label="square" onClick={() => state.show1 = !state.show1}/>
+        <Dialog v-model={state.show1} minWidth={300} closeType="square">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+
+        <Button label="triangle" onClick={() => state.show2 = !state.show2}/>
+        <Dialog v-model={state.show2} minWidth={300} closeType="triangle">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo11 = designPage(() => {
+  const state = reactive({ show: false, show2: false, show3: false, });
+  return () => (
+    <>
+      <DemoRow title="关闭时销毁内容实例">
+        <p>比如弹框内是一个带查询表单的数据表格，查询表单的查询参数有数据表格组件自己管理。</p>
+        <p>关闭时销毁会导致每次打开，数据表格的查询参数都会重置</p>
+        <p>不销毁则，每次打开状态停留在上次关闭的状态</p>
+        <Button label="关闭时销毁内容实例" onClick={() => state.show = !state.show}/>
+        <Dialog
+          v-model={state.show}
+          destroyOnClose
+          minWidth={300}
+        >
+          <Input modelValue="hello world"/>
+        </Dialog>
+        <Button label="关闭时不销毁内容实例（默认）" onClick={() => state.show2 = !state.show2}/>
+        <Dialog
+          v-model={state.show2}
+          minWidth={300}
+        >
+          <Input modelValue="hello world2"/>
+        </Dialog>
+
+        <Button label="立即初始化弹框内容（SEO）" onClick={() => state.show3 = !state.show3}/>
+        <Dialog
+          v-model={state.show3}
+          minWidth={300}
+          className="my-dialog-1"
+          data-id="my-dialog-1"
+          initialize
+        >
+          <Input modelValue="hello world2"/>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo12 = designPage(() => {
+  const state = reactive({ show: false, loading: false });
+  return () => (
+    <>
+      <DemoRow title="加载状态">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300" loading={state.loading} footAlign="center" headAlign="center" contentAlign="center">
+          {{
+            default: () => <>
+              <div>桃花坞里桃花庵；</div>
+              <div>桃花庵里桃花仙；</div>
+              <div>桃花仙人种桃树；</div>
+              <div>又摘桃花换酒钱；</div>
+            </>,
+            foot: () => (
+              <Button label="open loading 3s" mode="fill" asyncHandler={async () => {
+                state.loading = true;
+                await delay(3000);
+                state.loading = false;
+              }}/>
+            ),
+          }}
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+export const demo13 = designPage(() => {
+  const state = reactive({
+    show: false,
+    text: ''
+  });
+
+  const handleConfirm = async (close: () => void) => {
+    await delay(2000);
+    if (!state.text) {
+      const msg = '请输入文本！';
+      alert(msg);
+      throw new Error(msg);
+    }
+  };
+
+  return () => (
+    <>
+      <DemoRow title="异步确认">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300" handleConfirm={handleConfirm} confirmButton cancelButton>
+          <Input v-model={state.text}/>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo14 = designPage(() => {
+  const state = reactive({ show: false, show2: false });
+  return () => (
+    <>
+      <DemoRow title="多个弹框">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300">
+          <Button label="打开弹框" onClick={() => state.show2 = !state.show2}/>
+        </Dialog>
+        <Dialog v-model={state.show2} minWidth="300">
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+
+export const demo15 = designPage(() => {
+  const state = reactive({ show: false, text: '' });
+
+  const handleConfirm = async (close: () => void) => {
+    await delay(2000);
+    if (!state.text) {
+      const msg = '请输入文本！';
+      alert(msg);
+      throw new Error(msg);
+    }
+  };
+
+  const handleCancel = async (close: () => void) => {
+    await delay(2000);
+    if (!state.text) {
+      if (!confirm('确定要取消吗？')) {
+        return Promise.reject('stop cancel!');
+      }
+    }
+  };
+
+  return () => (
+    <>
+      <DemoRow title="完全控制确认以及取消动作">
+        <p>用户可以通过enter按键触发确定以及esc按键触发取消动作，所以要完全控制用户的行为，仅仅去掉确认按钮、取消按钮、关闭按钮是不够的。</p>
+        <p>需要在handleConfirm以及handleCancel中处理，如果不允许关闭，请返回Promise.reject或者抛出异常</p>
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300" handleConfirm={handleConfirm} handleCancel={handleCancel} confirmButton cancelButton>
+          <Input v-model={state.text}/>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});
+
+
+export const demo16 = designPage(() => {
+  const state = reactive({ val: {} as any });
+  return () => (
+    <>
+      <DemoRow title="弹框位置">
+        <p>类似于抽屉组件Drawer</p>
+        {['top', 'left', 'right', 'bottom'].map(position => (
+          <Button key={position} label={position.toUpperCase()} onClick={() => state.val[position] = !state.val[position]}/>
+        ))}
+        {(['top', 'left', 'right', 'bottom'] as const).map(position => (
+          <Dialog key={position} v-model={state.val[position]} width={position === 'left' || position == 'right' ? 300 : undefined} position={position} confirmButton cancelButton>
+            {{
+              default: () => <>
+                <div>桃花坞里桃花庵；</div>
+                <div>桃花庵里桃花仙；</div>
+                <div>桃花仙人种桃树；</div>
+                <div>又摘桃花换酒钱；</div>
+              </>,
+              foot: () => <>
+                <Button label="external" style={{ order: 5 }}/>
+              </>
+            }}
+          </Dialog>
+        ))}
+      </DemoRow>
+    </>
+  );
+});
+
+export const demo17 = designPage(() => {
+  const state = reactive({ show: false });
+  return () => (
+    <>
+      <DemoRow title="可拖拽弹框">
+        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
+        <Dialog v-model={state.show} minWidth="300" movable>
+          <div>桃花坞里桃花庵；</div>
+          <div>桃花庵里桃花仙；</div>
+          <div>桃花仙人种桃树；</div>
+          <div>又摘桃花换酒钱；</div>
+        </Dialog>
+      </DemoRow>
+    </>
+  );
+});