plain-design 1.0.0-beta.22 → 1.0.0-beta.23

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

@@ -1,695 +1,695 @@
-import {designComponent, designPage, getComponentCls, inject, onBeforeUnmount, onMounted, provide, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ButtonGroup, Checkbox, Icon, Input, Popup} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-import {iPopupAlign, iPopupDirection, iPopupTrigger} from "../../../../packages/components/usePopup/utils/popup.utils";
-import treeData from '../../../data/tree.data.json';
-import button from "../../../../packages/components/Button";
-
-export const demo1 = designPage(() => {
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Popup>
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>popper content</div>
-          </>
-        }}
-      </Popup>
-
-      <Popup message="popper content" title="Title">
-        <span>Span</span>
-      </Popup>
-      <Popup message="popper content" title="Title">
-        <Icon icon="pi-search"/>
-      </Popup>
-
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const directions = ['top', 'bottom', 'left', 'right'] as iPopupDirection[];
-  const aligns = ['start', 'center', 'end'] as iPopupAlign[];
-
-  return () => (
-    <DemoRow title="方向位置">
-      {directions.map(direction => (
-        <DemoLine key={direction}>
-          <ButtonGroup>
-            <Popup placement={direction} key="default">
-              {{
-                default: () => <Button label={direction}/>,
-                popper: () => <>
-                  <div style={{ height: '100px' }}>popper content</div>
-                </>
-              }}
-            </Popup>
-            {aligns.map(align => (
-              <Popup placement={`${direction}-${align}`} key={align}>
-                {{
-                  default: () => <Button label={`${direction}-${align}`}/>,
-                  popper: () => <>
-                    <div style={{ height: '100px' }}>popper content</div>
-                  </>
-                }}
-              </Popup>
-            ))}
-          </ButtonGroup>
-        </DemoLine>
-      ))}
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    manualValue: false,
-  });
-
-  return () => (
-    <DemoRow title="触发动作">
-      <Popup trigger="hover">
-        {{
-          default: () => <Button label="Hover"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup trigger="click">
-        {{
-          default: () => <Button label="Click"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup trigger="focus">
-        {{
-          default: () => <Button label="Focus"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup trigger="contextmenu">
-        {{
-          default: () => <Button label="Contextmenu"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup trigger="manual" v-model={state.manualValue}>
-        {{
-          default: () => <Button label="Manual(Click)" onClick={() => state.manualValue = !state.manualValue}/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-
-    </DemoRow>
-  );
-});
-
-
-export const demoSize = designPage(() => {
-
-  return () => (
-    <DemoRow title="大小尺寸">
-      <Popup popperSize="mini">
-        {{
-          default: () => <Button label="Mini" size="mini"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup popperSize="small">
-        {{
-          default: () => <Button label="Small" size="small"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup popperSize="normal">
-        {{
-          default: () => <Button label="Normal" size="normal"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup popperSize="large">
-        {{
-          default: () => <Button label="Large" size="large"/>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ button: Button });
-
-  return () => (
-    <DemoRow title="外部Reference">
-
-      <Button label="Outer reference" ref={onRef.button}/>
-
-      <Popup reference={refs.button?.refs.el}>
-        {{ popper: () => <div>popper content</div> }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demo5 = designPage(() => {
-
-  return () => (
-    <DemoRow title="SizeEqual">
-
-      <Popup sizeEqual>
-        {{
-          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-6')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Vertical</div>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-      <Popup placement="right" sizeEqual>
-        {{
-          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-6')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Horizontal</div>,
-          popper: () => <div>popper content</div>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demo6 = designPage(() => {
-
-  return () => (
-    <DemoRow title="过度动画">
-
-      <p>fade动画一般用于Tooltip</p>
-      <p>drop动画一般用于dropdown</p>
-      <p>slide动画一般用于下拉表单组件</p>
-      <p>scale一般用于提示信息</p>
-      <p>direction-scale一般不用</p>
-
-      <Popup animation="fade">
-        {{
-          default: () => <Button label="fade"/>,
-          popper: () => <div>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        }}
-      </Popup>
-      <Popup animation="slide">
-        {{
-          default: () => <Button label="slide"/>,
-          popper: () => <div>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        }}
-      </Popup>
-      <Popup animation="scale">
-        {{
-          default: () => <Button label="scale"/>,
-          popper: () => <div>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        }}
-      </Popup>
-      <Popup animation="scale-y">
-        {{
-          default: () => <Button label="scale-y"/>,
-          popper: () => <div>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        }}
-      </Popup>
-      <Popup animation="drop">
-        {{
-          default: () => <Button label="drop"/>,
-          popper: () => <div>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demo7 = designPage(() => {
-
-  const state = reactive({
-    show: false,
-    open: false,
-  });
-
-  return () => (
-    <DemoRow title="show & open">
-      <Checkbox label="show" v-model={state.show}/>
-      <Checkbox label="open" v-model={state.open}/>
-
-      <Popup v-model={state.show} v-model:open={state.open}>
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>popper content</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demo8 = designPage(() => {
-
-  const state = reactive({
-    isShow: false,
-    config: {
-      direction: 'bottom' as any,
-      align: 'start' as any,
-      animation: 'drop' as any,
-      showArrow: true,
-      trigger: 'click' as any,
-    }
-  });
-
-  const directions = ['top', 'bottom', 'left', 'right'];
-  const aligns = ['start', 'center', 'end'];
-  const animations = [
-    'fade',
-    'slide',
-    'drop',
-    'scale',
-    'scale-y',
-  ];
-
-  return () => (
-    <DemoRow title="综合示例">
-      <Popup
-        placement={`${state.config.direction}-${state.config.align}` as any}
-        trigger={state.config.trigger}
-        animation={state.config.animation}
-        arrowSize={state.config.showArrow ? undefined : 0}
-      >
-        {{
-          default: () => <Button label="Button" onClick={() => {state.config.trigger === 'manual' && (state.isShow = !state.isShow);}}/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>popper content</div>
-          </>
-        }}
-      </Popup>
-
-      <DemoLine title="directions">
-        <ButtonGroup>
-          {directions.map(direction => <Button label={direction} onClick={() => state.config.direction = direction} key={direction} mode={state.config.direction === direction ? 'fill' : undefined}/>)}
-        </ButtonGroup>
-      </DemoLine>
-
-      <DemoLine title="aligns">
-        <ButtonGroup>
-          {aligns.map(align => <Button label={align} onClick={() => state.config.align = align} key={align} mode={state.config.align === align ? 'fill' : undefined}/>)}
-        </ButtonGroup>
-      </DemoLine>
-
-      <DemoLine title="animations">
-        <ButtonGroup>
-          {animations.map(animation => <Button label={animation} onClick={() => state.config.animation = animation} key={animation} mode={state.config.animation === animation ? 'fill' : undefined}/>)}
-        </ButtonGroup>
-      </DemoLine>
-
-      <DemoLine title="show arrow">
-        <Checkbox label="arrow" v-model={state.config.showArrow}/>
-      </DemoLine>
-
-    </DemoRow>
-  );
-});
-
-
-export const demo10 = designPage(() => {
-
-  return () => (
-    <DemoRow title="设置宽高">
-      <p>只有设置高度的时候使用Scroll滚动条容器</p>
-      <Popup height="100px" width="200px">
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-            ---
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demo11 = designPage(() => {
-
-  return () => (
-    <DemoRow title="去掉默认内边距">
-      <Popup noPadding>
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demo12 = designPage(() => {
-
-  const state = reactive({
-    disabled: false,
-  });
-
-  return () => (
-    <DemoRow title="禁用">
-      <Checkbox v-model={state.disabled} label="disabled"/>
-      <Popup disabled={state.disabled}>
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demoDestroy = designPage(() => {
-
-  const state = reactive({
-    destroyOnClose: true,
-  });
-
-  return () => (
-    <DemoRow title="关闭的时候销毁内容">
-      <Checkbox label="destroyOnClose" v-model={state.destroyOnClose}/>
-      <Popup key={String(state.destroyOnClose)} destroyOnClose={state.destroyOnClose} animation="slide" trigger="click">
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-            <Input style={{ margin: '16px 0' }}/>
-          </>
-        }}
-      </Popup>
-      {/*{directions.map(direction => (
-        <DemoLine key={direction}>
-          <ButtonGroup>
-            <Popup placement={direction as any} key="default" destroyOnClose>
-              {{
-                default: () => <Button label={direction}/>,
-                popper: () => <>
-                  <div style={{ height: '100px' }}>popper content</div>
-                </>
-              }}
-            </Popup>
-            {aligns.map(align => (
-              <Popup placement={`${direction}-${align}` as any} key={align} destroyOnClose>
-                {{
-                  default: () => <Button label={`${direction}-${align}`}/>,
-                  popper: () => <>
-                    <div style={{ height: '100px' }}>popper content</div>
-                  </>
-                }}
-              </Popup>
-            ))}
-          </ButtonGroup>
-        </DemoLine>
-      ))}*/}
-    </DemoRow>
-  );
-});
-
-export const demoContext = designPage(() => {
-
-  const Parent = designComponent({
-    slots: ['default'],
-    setup({ slots }) {
-      const state = reactive({ count: 100 });
-      provide('demo_context', state);
-      let timer: any;
-      onMounted(() => {
-        timer = setInterval(() => {state.count++;}, 1000);
-      });
-      onBeforeUnmount(() => {
-        clearInterval(timer);
-      });
-      return () => slots.default();
-    },
-  });
-
-  const Child = designComponent({
-    setup() {
-      const parentState = inject<null | { count: number }>('demo_context', null);
-      return () => (
-        <button>{parentState?.count || '无'}</button>
-      );
-    },
-  });
-
-  return () => (
-    <DemoRow title="组件上下文">
-      <Parent>
-        <Popup>
-          {{
-            default: () => <Button label="Button"/>,
-            popper: () => <>
-              <Child/>
-              <div>桃花坞里桃花庵；</div>
-              <div>桃花庵里桃花仙；</div>
-              <div>桃花仙人种桃树；</div>
-              <div>又摘桃花换酒钱；</div>
-            </>
-          }}
-        </Popup>
-      </Parent>
-    </DemoRow>
-  );
-});
-
-interface iDemoTreeMeta {
-  id: string,
-  name: string,
-  subs?: iDemoTreeMeta[]
-}
-
-export const demoCascade = designPage(() => {
-
-  const state = reactive({
-    showClickDemo: false,
-    showHoverDemo: false,
-    demo3: false,
-    demo4: false,
-  });
-
-  const renderList = (list: iDemoTreeMeta[], trigger?: iPopupTrigger) => (
-    list.map(item => (
-      !!item.subs?.length ? (
-          <Popup key={item.name} placement="right-start" arrowSize={0} offset={12} hideOnClickReference={false} trigger={trigger}>
-            {{
-              default: () => (
-                <div
-                  style={{
-                    minWidth: '100px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    padding: '4px 0',
-                  }}>
-                  <span>{item.name}</span>
-                  <Icon icon="pi-right"/>
-                </div>
-              ),
-              popper: () => renderList(item.subs!)
-            }}
-          </Popup>
-        )
-        : (
-          <div
-            key={item.name}
-            style={{
-              minWidth: '100px',
-              padding: '4px 0',
-            }} onClick={() => handleClickItem(item)}>
-            <span>{item.name}</span>
-          </div>
-        )
-    ))
-  );
-
-  const handleClickItem = (item: iDemoTreeMeta) => {
-    $message(item.name);
-    state.showClickDemo = false;
-    state.showHoverDemo = false;
-    state.demo3 = false;
-    state.demo4 = false;
-  };
-
-  return () => (
-    <DemoRow title="父子级联">
-      <Popup trigger="hover" v-model={state.showHoverDemo}>
-        {{
-          default: () => <Button label="Hover"/>,
-          popper: () => renderList(treeData)
-        }}
-      </Popup>
-      <Popup trigger="click" v-model={state.showClickDemo}>
-        {{
-          default: () => <Button label="Click"/>,
-          popper: () => renderList(treeData)
-        }}
-      </Popup>
-      <Popup trigger="click" v-model={state.demo3}>
-        {{
-          default: () => <Button label="ParentClick, ChildHover"/>,
-          popper: () => renderList(treeData, "hover")
-        }}
-      </Popup>
-      <Popup trigger="contextmenu" v-model={state.demo4}>
-        {{
-          default: () => <Button label="ParentContextmenu, ChildHover"/>,
-          popper: () => renderList(treeData, "hover")
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-export const demoMinWidth = designPage(() => {
-  return () => (
-    <DemoRow title="最小宽度">
-      <Popup minHeight={150} placement="right-start">
-        {{
-          default: () => <Button label="Button"/>,
-          head: () => <span>Title</span>,
-          popper: () => <>
-            <div>popper content</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-export const demoDark = designPage(() => {
-  return () => (
-    <DemoRow title="黑色主题">
-      <Popup dark>
-        {{
-          default: () => <Button label="Button"/>,
-          popper: () => <>
-            <div>Ctrl + Shift + A</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demoStatus = designPage(() => {
-  return () => (
-    <DemoRow title="状态">
-      {(['primary', 'success', 'warn', 'error'] as const).map(status => (
-        <Popup status={status} key={status}>
-          {{
-            default: () => <Button status={status} label={status}/>,
-            popper: () => <>
-              <div>输入有误，不是合法的表达式</div>
-            </>
-          }}
-        </Popup>
-      ))}
-    </DemoRow>
-  );
-});
-
-export const demoCover = designPage(() => {
-  return () => (
-    <DemoRow title="覆盖reference">
-      <Popup cover modelValue trigger="manual">
-        {{
-          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-1')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>,
-          popper: () => (
-            <div style={{ height: '100%', width: '100%', boxSizing: 'border-box', border: `solid 1px var(--${getComponentCls('primary-6')})`, pointerEvents: 'none' }}>
-              <div style={{ position: 'absolute', right: 0, bottom: 0, padding: '8px', pointerEvents: 'auto' }}>
-                1/6
-              </div>
-            </div>
-          )
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
-
-
-export const demoNoBg = designPage(() => {
-  return () => (
-    <DemoRow title="取消背景色">
-      <Popup noBackground>
-        {{
-          default: () => <Button label="Button"/>,
-          popper: () => <>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </>
-        }}
-      </Popup>
-    </DemoRow>
-  );
-});
+import {designComponent, designPage, getComponentCls, inject, onBeforeUnmount, onMounted, provide, reactive, useRefs} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Button, ButtonGroup, Checkbox, Icon, Input, Popup} from "../../../../packages";
+import {DemoLine} from "../../Demo/DemoLine";
+import {iPopupAlign, iPopupDirection, iPopupTrigger} from "../../../../packages/components/usePopup/utils/popup.utils";
+import treeData from '../../../data/tree.data.json';
+import button from "../../../../packages/components/Button";
+
+export const demo1 = designPage(() => {
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Popup>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+
+      <Popup message="popper content" title="Title">
+        <span>Span</span>
+      </Popup>
+      <Popup message="popper content" title="Title">
+        <Icon icon="pi-search"/>
+      </Popup>
+
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+
+  const directions = ['top', 'bottom', 'left', 'right'] as iPopupDirection[];
+  const aligns = ['start', 'center', 'end'] as iPopupAlign[];
+
+  return () => (
+    <DemoRow title="方向位置">
+      {directions.map(direction => (
+        <DemoLine key={direction}>
+          <ButtonGroup>
+            <Popup placement={direction} key="default">
+              {{
+                default: () => <Button label={direction}/>,
+                popper: () => <>
+                  <div style={{ height: '100px' }}>popper content</div>
+                </>
+              }}
+            </Popup>
+            {aligns.map(align => (
+              <Popup placement={`${direction}-${align}`} key={align}>
+                {{
+                  default: () => <Button label={`${direction}-${align}`}/>,
+                  popper: () => <>
+                    <div style={{ height: '100px' }}>popper content</div>
+                  </>
+                }}
+              </Popup>
+            ))}
+          </ButtonGroup>
+        </DemoLine>
+      ))}
+    </DemoRow>
+  );
+});
+
+
+export const demo3 = designPage(() => {
+
+  const state = reactive({
+    manualValue: false,
+  });
+
+  return () => (
+    <DemoRow title="触发动作">
+      <Popup trigger="hover">
+        {{
+          default: () => <Button label="Hover"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="click">
+        {{
+          default: () => <Button label="Click"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="focus">
+        {{
+          default: () => <Button label="Focus"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="contextmenu">
+        {{
+          default: () => <Button label="Contextmenu"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="manual" v-model={state.manualValue}>
+        {{
+          default: () => <Button label="Manual(Click)" onClick={() => state.manualValue = !state.manualValue}/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+
+    </DemoRow>
+  );
+});
+
+
+export const demoSize = designPage(() => {
+
+  return () => (
+    <DemoRow title="大小尺寸">
+      <Popup popperSize="mini">
+        {{
+          default: () => <Button label="Mini" size="mini"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup popperSize="small">
+        {{
+          default: () => <Button label="Small" size="small"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup popperSize="normal">
+        {{
+          default: () => <Button label="Normal" size="normal"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup popperSize="large">
+        {{
+          default: () => <Button label="Large" size="large"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+
+    </DemoRow>
+  );
+});
+
+export const demo4 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ button: Button });
+
+  return () => (
+    <DemoRow title="外部Reference">
+
+      <Button label="Outer reference" ref={onRef.button}/>
+
+      <Popup reference={refs.button?.refs.el}>
+        {{ popper: () => <div>popper content</div> }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo5 = designPage(() => {
+
+  return () => (
+    <DemoRow title="SizeEqual">
+
+      <Popup sizeEqual>
+        {{
+          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-6')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Vertical</div>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup placement="right" sizeEqual>
+        {{
+          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-6')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Horizontal</div>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo6 = designPage(() => {
+
+  return () => (
+    <DemoRow title="过度动画">
+
+      <p>fade动画一般用于Tooltip</p>
+      <p>drop动画一般用于dropdown</p>
+      <p>slide动画一般用于下拉表单组件</p>
+      <p>scale一般用于提示信息</p>
+      <p>direction-scale一般不用</p>
+
+      <Popup animation="fade">
+        {{
+          default: () => <Button label="fade"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="slide">
+        {{
+          default: () => <Button label="slide"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="scale">
+        {{
+          default: () => <Button label="scale"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="scale-y">
+        {{
+          default: () => <Button label="scale-y"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="drop">
+        {{
+          default: () => <Button label="drop"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo7 = designPage(() => {
+
+  const state = reactive({
+    show: false,
+    open: false,
+  });
+
+  return () => (
+    <DemoRow title="show & open">
+      <Checkbox label="show" v-model={state.show}/>
+      <Checkbox label="open" v-model={state.open}/>
+
+      <Popup v-model={state.show} v-model:open={state.open}>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo8 = designPage(() => {
+
+  const state = reactive({
+    isShow: false,
+    config: {
+      direction: 'bottom' as any,
+      align: 'start' as any,
+      animation: 'drop' as any,
+      showArrow: true,
+      trigger: 'click' as any,
+    }
+  });
+
+  const directions = ['top', 'bottom', 'left', 'right'];
+  const aligns = ['start', 'center', 'end'];
+  const animations = [
+    'fade',
+    'slide',
+    'drop',
+    'scale',
+    'scale-y',
+  ];
+
+  return () => (
+    <DemoRow title="综合示例">
+      <Popup
+        placement={`${state.config.direction}-${state.config.align}` as any}
+        trigger={state.config.trigger}
+        animation={state.config.animation}
+        arrowSize={state.config.showArrow ? undefined : 0}
+      >
+        {{
+          default: () => <Button label="Button" onClick={() => {state.config.trigger === 'manual' && (state.isShow = !state.isShow);}}/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+
+      <DemoLine title="directions">
+        <ButtonGroup>
+          {directions.map(direction => <Button label={direction} onClick={() => state.config.direction = direction} key={direction} mode={state.config.direction === direction ? 'fill' : undefined}/>)}
+        </ButtonGroup>
+      </DemoLine>
+
+      <DemoLine title="aligns">
+        <ButtonGroup>
+          {aligns.map(align => <Button label={align} onClick={() => state.config.align = align} key={align} mode={state.config.align === align ? 'fill' : undefined}/>)}
+        </ButtonGroup>
+      </DemoLine>
+
+      <DemoLine title="animations">
+        <ButtonGroup>
+          {animations.map(animation => <Button label={animation} onClick={() => state.config.animation = animation} key={animation} mode={state.config.animation === animation ? 'fill' : undefined}/>)}
+        </ButtonGroup>
+      </DemoLine>
+
+      <DemoLine title="show arrow">
+        <Checkbox label="arrow" v-model={state.config.showArrow}/>
+      </DemoLine>
+
+    </DemoRow>
+  );
+});
+
+
+export const demo10 = designPage(() => {
+
+  return () => (
+    <DemoRow title="设置宽高">
+      <p>只有设置高度的时候使用Scroll滚动条容器</p>
+      <Popup height="100px" width="200px">
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+            ---
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo11 = designPage(() => {
+
+  return () => (
+    <DemoRow title="去掉默认内边距">
+      <Popup noPadding>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo12 = designPage(() => {
+
+  const state = reactive({
+    disabled: false,
+  });
+
+  return () => (
+    <DemoRow title="禁用">
+      <Checkbox v-model={state.disabled} label="disabled"/>
+      <Popup disabled={state.disabled}>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demoDestroy = designPage(() => {
+
+  const state = reactive({
+    destroyOnClose: true,
+  });
+
+  return () => (
+    <DemoRow title="关闭的时候销毁内容">
+      <Checkbox label="destroyOnClose" v-model={state.destroyOnClose}/>
+      <Popup key={String(state.destroyOnClose)} destroyOnClose={state.destroyOnClose} animation="slide" trigger="click">
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+            <Input style={{ margin: '16px 0' }}/>
+          </>
+        }}
+      </Popup>
+      {/*{directions.map(direction => (
+        <DemoLine key={direction}>
+          <ButtonGroup>
+            <Popup placement={direction as any} key="default" destroyOnClose>
+              {{
+                default: () => <Button label={direction}/>,
+                popper: () => <>
+                  <div style={{ height: '100px' }}>popper content</div>
+                </>
+              }}
+            </Popup>
+            {aligns.map(align => (
+              <Popup placement={`${direction}-${align}` as any} key={align} destroyOnClose>
+                {{
+                  default: () => <Button label={`${direction}-${align}`}/>,
+                  popper: () => <>
+                    <div style={{ height: '100px' }}>popper content</div>
+                  </>
+                }}
+              </Popup>
+            ))}
+          </ButtonGroup>
+        </DemoLine>
+      ))}*/}
+    </DemoRow>
+  );
+});
+
+export const demoContext = designPage(() => {
+
+  const Parent = designComponent({
+    slots: ['default'],
+    setup({ slots }) {
+      const state = reactive({ count: 100 });
+      provide('demo_context', state);
+      let timer: any;
+      onMounted(() => {
+        timer = setInterval(() => {state.count++;}, 1000);
+      });
+      onBeforeUnmount(() => {
+        clearInterval(timer);
+      });
+      return () => slots.default();
+    },
+  });
+
+  const Child = designComponent({
+    setup() {
+      const parentState = inject<null | { count: number }>('demo_context', null);
+      return () => (
+        <button>{parentState?.count || '无'}</button>
+      );
+    },
+  });
+
+  return () => (
+    <DemoRow title="组件上下文">
+      <Parent>
+        <Popup>
+          {{
+            default: () => <Button label="Button"/>,
+            popper: () => <>
+              <Child/>
+              <div>桃花坞里桃花庵；</div>
+              <div>桃花庵里桃花仙；</div>
+              <div>桃花仙人种桃树；</div>
+              <div>又摘桃花换酒钱；</div>
+            </>
+          }}
+        </Popup>
+      </Parent>
+    </DemoRow>
+  );
+});
+
+interface iDemoTreeMeta {
+  id: string,
+  name: string,
+  subs?: iDemoTreeMeta[]
+}
+
+export const demoCascade = designPage(() => {
+
+  const state = reactive({
+    showClickDemo: false,
+    showHoverDemo: false,
+    demo3: false,
+    demo4: false,
+  });
+
+  const renderList = (list: iDemoTreeMeta[], trigger?: iPopupTrigger) => (
+    list.map(item => (
+      !!item.subs?.length ? (
+          <Popup key={item.name} placement="right-start" arrowSize={0} offset={12} hideOnClickReference={false} trigger={trigger}>
+            {{
+              default: () => (
+                <div
+                  style={{
+                    minWidth: '100px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '4px 0',
+                  }}>
+                  <span>{item.name}</span>
+                  <Icon icon="pi-right"/>
+                </div>
+              ),
+              popper: () => renderList(item.subs!)
+            }}
+          </Popup>
+        )
+        : (
+          <div
+            key={item.name}
+            style={{
+              minWidth: '100px',
+              padding: '4px 0',
+            }} onClick={() => handleClickItem(item)}>
+            <span>{item.name}</span>
+          </div>
+        )
+    ))
+  );
+
+  const handleClickItem = (item: iDemoTreeMeta) => {
+    $message(item.name);
+    state.showClickDemo = false;
+    state.showHoverDemo = false;
+    state.demo3 = false;
+    state.demo4 = false;
+  };
+
+  return () => (
+    <DemoRow title="父子级联">
+      <Popup trigger="hover" v-model={state.showHoverDemo}>
+        {{
+          default: () => <Button label="Hover"/>,
+          popper: () => renderList(treeData)
+        }}
+      </Popup>
+      <Popup trigger="click" v-model={state.showClickDemo}>
+        {{
+          default: () => <Button label="Click"/>,
+          popper: () => renderList(treeData)
+        }}
+      </Popup>
+      <Popup trigger="click" v-model={state.demo3}>
+        {{
+          default: () => <Button label="ParentClick, ChildHover"/>,
+          popper: () => renderList(treeData, "hover")
+        }}
+      </Popup>
+      <Popup trigger="contextmenu" v-model={state.demo4}>
+        {{
+          default: () => <Button label="ParentContextmenu, ChildHover"/>,
+          popper: () => renderList(treeData, "hover")
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+export const demoMinWidth = designPage(() => {
+  return () => (
+    <DemoRow title="最小宽度">
+      <Popup minHeight={150} placement="right-start">
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+export const demoDark = designPage(() => {
+  return () => (
+    <DemoRow title="黑色主题">
+      <Popup dark>
+        {{
+          default: () => <Button label="Button"/>,
+          popper: () => <>
+            <div>Ctrl + Shift + A</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demoStatus = designPage(() => {
+  return () => (
+    <DemoRow title="状态">
+      {(['primary', 'success', 'warn', 'error'] as const).map(status => (
+        <Popup status={status} key={status}>
+          {{
+            default: () => <Button status={status} label={status}/>,
+            popper: () => <>
+              <div>输入有误，不是合法的表达式</div>
+            </>
+          }}
+        </Popup>
+      ))}
+    </DemoRow>
+  );
+});
+
+export const demoCover = designPage(() => {
+  return () => (
+    <DemoRow title="覆盖reference">
+      <Popup cover modelValue trigger="manual">
+        {{
+          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-1')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>,
+          popper: () => (
+            <div style={{ height: '100%', width: '100%', boxSizing: 'border-box', border: `solid 1px var(--${getComponentCls('primary-6')})`, pointerEvents: 'none' }}>
+              <div style={{ position: 'absolute', right: 0, bottom: 0, padding: '8px', pointerEvents: 'auto' }}>
+                1/6
+              </div>
+            </div>
+          )
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demoNoBg = designPage(() => {
+  return () => (
+    <DemoRow title="取消背景色">
+      <Popup noBackground>
+        {{
+          default: () => <Button label="Button"/>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});