plain-design 1.0.0-beta.34 → 1.0.0-beta.35

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

@@ -1,39 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {Icon} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import icons from 'plain-icons/dist/icons.json';
-import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-
-export const demo1 = designPage(() => {
-  return () => (
-    <div>
-      <DemoRow title="基本用法">
-        <Icon icon="pi-arrow-down"/>
-      </DemoRow>
-      <DemoRow title="大小颜色">
-        <Icon icon="pi-arrow-down" style={{ fontSize: '32px', color: 'var(--plain-color-primary)' }}/>
-      </DemoRow>
-      <DemoRow title="strokeWidth, strokeLinecap">
-        <Icon icon="pi-arrow-down" style={{ fontSize: '32px', color: 'var(--plain-color-primary)' }} strokeLinecap="round" strokeWidth={4}/>
-      </DemoRow>
-      <DemoRow title="LOGO">
-        <PlainLogo style={{ fontSize: '40px' }}/>
-        <PlainLogo style={{ fontSize: '40px' }} loading/>
-      </DemoRow>
-      <DemoRow title="iconfont font class icon">
-        <Icon icon="fontcls-gitee"/> <span>码云</span>
-        <Icon icon="fontcls-git"/> <span>GITHUB</span>
-      </DemoRow>
-      <DemoRow title="iconfont symbol icon">
-        <Icon icon="symbol-gitee"/> <span>码云</span>
-        <Icon icon="symbol-git"/> <span>GITHUB</span>
-      </DemoRow>
-
-      <DemoRow title="所有图标">
-        {icons.map(icon => (
-          <Icon icon={`pi-${icon}`} key={`pi-${icon}`} style={{ fontSize: '50px', color: '#565656' }}/>
-        ))}
-      </DemoRow>
-    </div>
-  );
-});

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

@@ -1,122 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$image, Button, Image, ImageUploader} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-  const img2 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-eberhard-grossgasteiger-1624438.jpg';
-  const img3 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-262367.jpg';
-  const img4 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-262367.jpg';
-  const img5 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-2623671.jpg';
-
-  const previewMoreImage = () => {
-    $image.preview([
-      img1,
-      img2,
-      img3,
-      'error.jpg',
-      null,
-    ]);
-  };
-
-  return () => (
-    <DemoRow title="图片服务：预览图片">
-      <Button label={'放大预览多张图片'} onClick={previewMoreImage}/>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-  return () => (
-    <DemoRow title="图片展示">
-      <Image src={img1} width={100}/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-  return () => (
-    <DemoRow title="限制图片大小">
-      <Image src={img1} height={60} width={60}/>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-  return () => (
-    <DemoRow title="限制图片大小，设置图片缩放形式">
-      {(['fill', 'contain', 'cover', 'none', 'scale-down'] as const).map(fit => (
-        <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }} key={fit}>
-          <Image fit={fit} src={img1} height={60} width={60}/>
-          <span style={{ marginTop: '8px' }}>{fit}</span>
-        </div>
-      ))}
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-  return () => (
-    <DemoRow title="自定义缩放位置">
-      {(['center top', 'center', 'center bottom'] as const).map(position => (
-        <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }} key={position}>
-          <Image fit={'cover'} position={position} src={img1} height={60} width={60}/>
-          <span style={{ marginTop: '8px' }}>{position}</span>
-        </div>
-      ))}
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-  return () => (
-    <DemoRow title="四种状态">
-      <Image status={'empty'}/>
-      <Image status={'pending'}/>
-      <Image status={'success'} src={img1} height={60} width={60}/>
-      <Image status={'error'}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo7 = designPage(() => {
-  const img1 = 'https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-burst-373965.jpg';
-
-  const state = reactive({
-    uploadConfig: {
-      action: 'http://1.116.13.72:7001/saveFile',
-      filename: 'file',
-      data: {
-        headId: '123',
-        module: 'single',
-        attr1: 'single',
-      },
-    },
-    val: {
-      0: img1,
-      1: 'error.png',
-      2: undefined,
-    },
-  });
-  return () => (
-    <DemoRow title={'ImageUploader图片上传'}>
-      <DemoLine title={'图片有效'}>
-        <ImageUploader v-model={state.val[0]} uploadConfig={state.uploadConfig}/>
-      </DemoLine>
-      <DemoLine title={'图片无效'}>
-        <ImageUploader v-model={state.val[1]} uploadConfig={state.uploadConfig}/>
-      </DemoLine>
-      <DemoLine title={'上传失败'}>
-        <ImageUploader v-model={state.val[2]} uploadConfig={{ action: '', filename: '' }}/>
-      </DemoLine>
-    </DemoRow>
-  );
-});