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

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

@@ -1,378 +0,0 @@
-import {computed, designPage, getComponentCls, classnames,reactive} from "plain-design-composition";
-import data2 from '../../../data/data-2.json';
-import {DemoRow} from "../../Demo/DemoRow";
-import {Alert, ApplicationConfigurationProvider, Checkbox, VirtualList} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList
-          data={list.value} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  return () => (
-    <DemoRow title={'动态高度'}>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList data={list.value} size={60} dynamicSize v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              data-vid={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: item.size + 'px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                  color: 'white'
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
-
-  const state = reactive({ disabledVirtualScroll: false, });
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'禁用/启用虚拟滚动'}>
-      <Checkbox v-model={state.disabledVirtualScroll} label={'禁用虚拟滚动'}/>
-      <br/>
-      <br/>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }} key={state.disabledVirtualScroll ? '1' : '2'}>
-        <VirtualList data={list.value} size={40} disabled={state.disabledVirtualScroll} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                  color: 'white'
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'横向滚动'}>
-      <Alert style={{ marginBottom: '16px' }}>当需要横向滚动时，必须指定横向滚动的宽度</Alert>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
-        <VirtualList
-          data={list.value} width={200} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
-        <VirtualList
-          data={list.value} width={600} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/service/DemoDialogService.tsx

@@ -1,248 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$dialog, $message, Button, Input, useDialog} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button label="show dialog message" onClick={() => $dialog('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')}/>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  return () => (
-    <DemoRow title="超长文本，最大宽高">
-      <Button label="show dialog message" onClick={() => $dialog({
-        message: new Array(100).fill('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。').join(''),
-        maxWidth: '50vw',
-        maxHeight: '80vh',
-      })}/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  return () => (
-    <DemoRow title="状态">
-      <DemoLine>
-        <Button label="default" onClick={() => $dialog('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')}/>
-        <Button label="Primary" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', status: 'primary' })} status="primary" mode="fill"/>
-        <Button label="Success" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '提交成功', status: 'success' })} status="success" mode="fill"/>
-        <Button label="Warn" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '请先完成登记', status: 'warn' })} status="warn" mode="fill"/>
-        <Button label="Error" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '提交失败', status: 'error' })} status="error" mode="fill"/>
-        <Button label="Secondary" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '系统提示', status: 'secondary' })} status="secondary" mode="fill"/>
-      </DemoLine>
-      <br/>
-      <DemoLine>
-        <Button label="$dialog.primary" onClick={() => $dialog.primary('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="primary" mode="fill"/>
-        <Button label="$dialog.success" onClick={() => $dialog.success('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="success" mode="fill"/>
-        <Button label="$dialog.warn" onClick={() => $dialog.warn('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="warn" mode="fill"/>
-        <Button label="$dialog.error" onClick={() => $dialog.error('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="error" mode="fill"/>
-        <Button label="$dialog.secondary" onClick={() => $dialog.secondary('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="secondary" mode="fill"/>
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const removeData = async () => {
-    await $dialog.confirm('确定要删除该订单信息吗？', { title: '删除确认' });
-    console.log('remove');
-  };
-
-  return () => (
-    <DemoRow title="确认对话框">
-      <Button label="删除确认" onClick={removeData}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo5 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const custom = () => {
-    const close = $dialog({
-      position: 'right',
-      confirmButton: true,
-      cancelButton: true,
-      width: '400px',
-      render: () => <>
-        <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
-        <Button label="我知道了" onClick={close}/>
-      </>,
-      renderFoot: () => <Button label="取消订阅" onClick={close}/>,
-    });
-  };
-
-  return () => (
-    <DemoRow title="自定义参数以及内容">
-      <Button label="手动关闭" onClick={custom}/>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const newDlg = async () => {
-    await $dialog({
-      render: () => <>
-        <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
-        <br/>
-        <br/>
-        <Button block label="新弹框" onClick={newDlg}/>
-        <br/>
-        <Button block label="关闭所有弹框服务" onClick={() => $dialog.closeAll()}/>
-      </>
-    });
-  };
-
-  return () => (
-    <DemoRow title="多实例&关闭所有对话框">
-      <Button label="新弹框" onClick={newDlg}/>
-    </DemoRow>
-  );
-});
-
-export const demo7 = designPage(() => {
-  return () => (
-    <DemoRow title="默认的关闭按钮">
-      <Button label="square close button" onClick={() => {
-        $dialog({
-          closeType: null as any,
-          render: () => <>
-            <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
-          </>
-        });
-      }}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo_1 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const showDialog = () => {
-    $dialog({
-      onClose: () => {$message('close');},
-      render: () => (
-        <>
-          <Input modelValue="hello world"/>
-          <br/>
-          <Button label="open dialog" block onClick={showDialog}/>
-        </>
-      )
-    });
-  };
-
-  return () => (
-    <DemoRow title="监听onClose">
-      <Button label="open dialog" onClick={showDialog}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo_9 = designPage(() => {
-
-  const { $dialog } = useDialog();
-
-  const showDialog = $dialog.useHoldDialog({
-    render: () => (
-      <>
-        <Input modelValue="hello world"/>
-        <br/>
-        <Button label="open dialog" block onClick={showDialog}/>
-      </>
-    )
-  });
-
-  return () => (
-    <DemoRow title="占用服务实例">
-      <p>会保留持有dialog组件实例，关闭的时候不会销毁内容，其他地方在复用组件服务的时候会略过被持有的dialog实例</p>
-      <p>需要保留option，不能每次用新的option来调用</p>
-      <p>当页面销毁的时候，会自动销毁持有的dialog服务实例</p>
-      <Button label="open dialog" onClick={showDialog}/>
-    </DemoRow>
-  );
-});
-
-export const demoInput = designPage(() => {
-
-  let inputValue: string | number | null | undefined = '默认文本';
-
-  return () => (
-    <DemoRow title={'输入对话框'}>
-      <Button label={'input'} onClick={() => $dialog({
-        editType: 'input',
-        editValue: inputValue,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'input readonly'} onClick={() => $dialog({
-        editType: 'input',
-        editValue: inputValue,
-        editReadonly: true,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'textarea'} onClick={() => $dialog({
-        editType: 'textarea',
-        editValue: inputValue,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'textarea readonly'} onClick={() => $dialog({
-        editType: 'textarea',
-        editValue: inputValue,
-        editReadonly: true,
-        handleConfirm: ({ editValue }) => {
-          inputValue = editValue;
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-      <Button label={'number'} onClick={() => $dialog({
-        editType: 'number',
-        editValue: 100,
-        handleConfirm: ({ editValue }) => {
-          $message(String(editValue));
-        },
-        confirmButton: true,
-        cancelButton: true,
-      })}/>
-    </DemoRow>
-  );
-});