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

package/src/pages/index/components/table/DemoVirtualTable.tsx

@@ -1,274 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import SourceData from '../../../data/data-2.json';
-import {DemoRow} from "../../Demo/DemoRow";
-import {Form, FormItem, Plc, Table, Toggle, VirtualTable} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    state: {
-      hasSummaryData: true,
-      disabled: false,
-    } as any
-  }).state;
-
-  const DATA = SourceData.slice(0, SourceData.length - 2);
-  const summaryData = SourceData.slice(SourceData.length - 2);
-
-  const headData = [
-    [
-      { title: '编号', field: 'id' },
-      { title: '颜色', field: 'color' },
-      { title: '名称', field: 'name' },
-      { title: '日期', field: 'date' },
-      { title: '评分', field: 'star' },
-      { title: '尺寸', field: 'size' },
-      { title: '地址', field: 'addr' },
-      { title: '链接', field: 'url' },
-      { title: '域名', field: 'domain' },
-      { title: '协议', field: 'protocol' },
-      { title: '邮箱', field: 'email' },
-      { title: 'IP', field: 'ip' },
-      { title: '开关', field: 'flag' },
-    ]
-  ];
-
-  return () => (
-    <>
-      <DemoRow title="设置">
-        <Form>
-          <FormItem label={'禁用虚拟滚动'}>
-            <Toggle v-model={state.disabled}/>
-          </FormItem>
-          <FormItem label={'合计行'}>
-            <Toggle v-model={state.hasSummaryData}/>
-          </FormItem>
-        </Form>
-      </DemoRow>
-      <DemoRow title={'基本用法'}>
-        <div style={{
-          overflow: 'hidden',
-          height: '410px',
-        }}>
-          <VirtualTable
-            height={412}
-            data={DATA}
-            summaryData={state.hasSummaryData ? summaryData : undefined}
-            headData={headData}
-            size={40}
-            headSize={40}
-            width={3000}
-            disabled={state.disabled}
-            v-slots={{
-              head: () => (
-                headData.map((headRows, index) => (
-                  <tr style={{ height: '40px', borderBottom: 'solid 1px #ececec', }} key={index}>
-                    {headRows.map(col => (
-                      <td key={col.field}>{col.title}</td>
-                    ))}
-                  </tr>
-                ))
-              ),
-              default: ({ item, vid, vIndex }) => (
-                <tr key={vIndex} data-vid={vid} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
-                  {Object.keys(DATA[0] as any).map((key: string) => (
-                    <td key={key}>{(item as any)[key]}</td>
-                  ))}
-                </tr>
-              ),
-            }}
-          />
-        </div>
-
-        <div style={{
-          overflow: 'hidden',
-          height: '410px',
-          marginTop: '100px'
-        }}>
-          <VirtualTable
-            height={412}
-            data={DATA.slice(0, 200)}
-            summaryData={state.hasSummaryData ? summaryData : undefined}
-            headData={headData}
-            size={40}
-            headSize={40}
-            width={3000}
-            disabled={true}
-            v-slots={{
-              head: () => (
-                headData.map((headRows, index) => (
-                  <tr style={{ height: '40px', borderBottom: 'solid 1px #ececec', }} key={index}>
-                    {headRows.map(col => (
-                      <td key={col.field}>{col.title}</td>
-                    ))}
-                  </tr>
-                ))
-              ),
-              default: ({ item, vIndex, vid }) => (
-                <tr key={vIndex} data-vid={vid} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
-                  {Object.keys(DATA[0] as any).map((key: string) => (
-                    <td key={key}>{(item as any)[key]}</td>
-                  ))}
-                </tr>
-              ),
-            }}
-          />
-        </div>
-      </DemoRow>
-    </>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({
-    virtualRowFlag: true,
-  });
-
-  const DATA = SourceData.slice(0, SourceData.length - 2);
-  const summaryData = SourceData.slice(SourceData.length - 2);
-
-  return () => (
-    <DemoRow title="行虚拟滚动">
-      <Form>
-        <FormItem label="开启行虚拟滚动"><Toggle v-model={state.virtualRowFlag}/></FormItem>
-      </Form>
-      <Table
-        data={DATA}
-        summaryData={summaryData}
-        virtual={state.virtualRowFlag}
-        showRows={10}
-      >
-        <Plc title={'编号'} field={'id'}/>
-        <Plc title={'颜色'} field={'color'}/>
-        <Plc title={'名称'} field={'name'}/>
-        <Plc title={'日期'} field={'date'}/>
-        <Plc title={'评分'} field={'star'}/>
-        <Plc title={'尺寸'} field={'size'}/>
-        <Plc title={'地址'} field={'addr'}/>
-        <Plc title={'URL'} field={'url'}/>
-        <Plc title={'域名'} field={'domain'}/>
-        <Plc title={'协议'} field={'protocol'}/>
-        <Plc title={'邮箱'} field={'email'}/>
-        <Plc title={'IP'} field={'ip'}/>
-        <Plc title={'标识'} field={'flag'}/>
-        <Plc title={'开始时间'} field={'dateStart'}/>
-        <Plc title={'结束时间'} field={'dateEnd'}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    virtualRowFlag: true,
-    virtualColFlag: true,
-  });
-
-  const DATA = SourceData.slice(0, SourceData.length - 2);
-  const summaryData = SourceData.slice(SourceData.length - 2);
-
-  return () => (
-    <DemoRow title="行列虚拟滚动">
-      <Form>
-        <FormItem label="开启行虚拟滚动"><Toggle v-model={state.virtualRowFlag}/></FormItem>
-        <FormItem label="开启列虚拟滚动"><Toggle v-model={state.virtualColFlag}/></FormItem>
-      </Form>
-      <Table
-        data={DATA}
-        summaryData={summaryData}
-        virtual={state.virtualRowFlag}
-        virtualColumn={state.virtualColFlag}
-        showRows={10}
-      >
-        <Plc title={'编号'} field={'id'}/>
-        <Plc title={'颜色'} field={'color'}/>
-        <Plc title={'名称'} field={'name'}/>
-        <Plc title={'日期'} field={'date'}/>
-        <Plc title={'评分'} field={'star'}/>
-        <Plc title={'尺寸'} field={'size'}/>
-        <Plc title={'地址'} field={'addr'}/>
-        <Plc title={'URL'} field={'url'}/>
-        <Plc title={'域名'} field={'domain'}/>
-        <Plc title={'协议'} field={'protocol'}/>
-        <Plc title={'邮箱'} field={'email'}/>
-        <Plc title={'IP'} field={'ip'}/>
-        <Plc title={'标识'} field={'flag'}/>
-        <Plc title={'开始时间'} field={'dateStart'}/>
-        <Plc title={'结束时间'} field={'dateEnd'}/>
-        <Plc title={'编号'} field={'id'}/>
-        <Plc title={'颜色'} field={'color'}/>
-        <Plc title={'名称'} field={'name'}/>
-        <Plc title={'日期'} field={'date'}/>
-        <Plc title={'评分'} field={'star'}/>
-        <Plc title={'尺寸'} field={'size'}/>
-        <Plc title={'地址'} field={'addr'}/>
-        <Plc title={'URL'} field={'url'}/>
-        <Plc title={'域名'} field={'domain'}/>
-        <Plc title={'协议'} field={'protocol'}/>
-        <Plc title={'邮箱'} field={'email'}/>
-        <Plc title={'IP'} field={'ip'}/>
-        <Plc title={'标识'} field={'flag'}/>
-        <Plc title={'开始时间'} field={'dateStart'}/>
-        <Plc title={'结束时间'} field={'dateEnd'}/>
-        <Plc title={'编号'} field={'id'}/>
-        <Plc title={'颜色'} field={'color'}/>
-        <Plc title={'名称'} field={'name'}/>
-        <Plc title={'日期'} field={'date'}/>
-        <Plc title={'评分'} field={'star'}/>
-        <Plc title={'尺寸'} field={'size'}/>
-        <Plc title={'地址'} field={'addr'}/>
-        <Plc title={'URL'} field={'url'}/>
-        <Plc title={'域名'} field={'domain'}/>
-        <Plc title={'协议'} field={'protocol'}/>
-        <Plc title={'邮箱'} field={'email'}/>
-        <Plc title={'IP'} field={'ip'}/>
-        <Plc title={'标识'} field={'flag'}/>
-        <Plc title={'开始时间'} field={'dateStart'}/>
-        <Plc title={'结束时间'} field={'dateEnd'}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const state = reactive({
-    virtualRowFlag: true,
-  });
-
-  const DATA = SourceData.slice(0, 2);
-  const summaryData = SourceData.slice(SourceData.length - 2);
-
-  return () => (
-    <DemoRow title="数据不够时有个最小高度">
-      <Form>
-        <FormItem label="开启行虚拟滚动"><Toggle v-model={state.virtualRowFlag}/></FormItem>
-      </Form>
-      <Table
-        data={DATA}
-        summaryData={summaryData}
-        virtual={state.virtualRowFlag}
-        showRows={10}
-      >
-        <Plc title={'编号'} field={'id'}/>
-        <Plc title={'颜色'} field={'color'}/>
-        <Plc title={'名称'} field={'name'}/>
-        <Plc title={'日期'} field={'date'}/>
-        <Plc title={'评分'} field={'star'}/>
-        <Plc title={'尺寸'} field={'size'}/>
-        <Plc title={'地址'} field={'addr'}/>
-        <Plc title={'URL'} field={'url'}/>
-        <Plc title={'域名'} field={'domain'}/>
-        <Plc title={'协议'} field={'protocol'}/>
-        <Plc title={'邮箱'} field={'email'}/>
-        <Plc title={'IP'} field={'ip'}/>
-        <Plc title={'标识'} field={'flag'}/>
-        <Plc title={'开始时间'} field={'dateStart'}/>
-        <Plc title={'结束时间'} field={'dateEnd'}/>
-      </Table>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/test/DemoI18n.tsx

@@ -1,27 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {Button, i18n} from "../../../../packages";
-// @ts-ignore
-import {DemoI18n2} from './DemoI18n2';
-import {ZhCnLocale} from "../../../../packages/i18n/lang/zh-cn";
-import {EnUsLocale} from "../../../../packages/i18n/lang/en-us";
-
-export const demo1 = designPage(() => {
-
-  const locales = [{ name: '中文', data: ZhCnLocale }, { name: 'English', data: EnUsLocale }];
-
-  return () => (
-    <div>
-      <div>
-        {locales.map((locale) => (
-          <Button key={locale.name} label={locale.name} onClick={() => i18n.setLocale(locale.data)}/>
-        ))}
-      </div>
-      <div>
-        {i18n("base.select.reverse").d()}
-      </div>
-      <div>
-        <DemoI18n2/>
-      </div>
-    </div>
-  );
-});

package/src/pages/index/components/test/DemoI18n2.jsx

@@ -1,11 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {i18n} from "@/packages";
-import React from "react";
-
-export const DemoI18n2 = designPage(() => {
-  return () => (
-    <div>
-      {i18n('base.confirm.select.data').d('description默认文本')}
-    </div>
-  );
-});

package/src/pages/index/home/AppContent.tsx

@@ -1,69 +0,0 @@
-import {designPage, Fragment, nextTick, onMounted, reactive, RendererNode, watch} from "plain-design-composition";
-import {$nav} from "../nav/$nav";
-import {Illustration} from "../../../packages";
-import {Menu, MenuGroups} from "./menus";
-
-export const AppContent = designPage(() => {
-
-  const isReady = (() => {
-    const flag = reactive({ value: false });
-    onMounted(() => {
-      setTimeout(() => flag.value = true, 1000);
-    });
-    return flag;
-  })();
-
-  const state = reactive({
-    current: null as null | { render: () => RendererNode, name: string, title?: string, menu: Menu }
-  });
-
-  watch(() => $nav.state.route, async route => {
-    const { path } = route;
-    const menu = MenuGroups.map(i => i.children).flat(1).find(i => i.page === path);
-    if (!menu) {
-      state.current = null;
-      nextTick().then(() => $nav.setScrollTop(0));
-      return;
-    }
-    try {
-      const Module = await import('../components' + menu.page);
-      state.current = {
-        menu,
-        render: () => <>
-          {Object.values(Module).map((Component, index) => (
-            <Fragment key={index}>
-              {/*@ts-ignore*/}
-              <Component/>
-            </Fragment>
-          ))}
-        </>,
-        name: menu.name,
-        title: menu.title,
-      };
-      nextTick().then(() => $nav.setScrollTop(0));
-    } catch (e) {
-      state.current = null;
-      nextTick().then(() => $nav.setScrollTop(0));
-    }
-  }, { immediate: true });
-
-  return () => (
-    <div className="app-content">
-      {!state.current ? (
-        !!isReady.value && <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
-          <Illustration style={{ width: '33.33%' }} code="404"/>
-          <span className="app-empty-text" style={{ fontWeight: 500, fontSize: '40px', fontFamily: 'fantasy', position: 'relative', top: '-60px' }}>404</span>
-        </div>
-      ) : (
-        <>
-          {!state.current.menu.noHeader && (
-            <div style={{ fontSize: '30px', fontWeight: 500, color: 'var(--app-title-color)', marginBottom: '40px' }}>
-              {state.current.name} {state.current.title}
-            </div>
-          )}
-          {state.current.render()}
-        </>
-      )}
-    </div>
-  );
-});

package/src/pages/index/home/AppHead.tsx

@@ -1,18 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-import logoImage from './plain-design.png';
-import {ThemeEditor} from "../../../packages/components/ThemeEditor";
-
-export const AppHead = designPage(() => {
-  return () => (
-    <div className="app-head">
-      <div className="app-head-logo">
-        <PlainLogo style={{ fontSize: '28px', marginRight: '0.4em' }}/>
-        <img src={logoImage}/>
-      </div>
-      <div className="app-head-operation">
-        <ThemeEditor/>
-      </div>
-    </div>
-  );
-});

package/src/pages/index/home/AppHome.tsx

@@ -1,31 +0,0 @@
-import {designPage, onBeforeUnmount, reactive} from "plain-design-composition";
-import {AppMenu} from "./AppMenu";
-import {AppHead} from "./AppHead";
-import {AppContent} from "./AppContent";
-import {clearDeviceInfo, eDeviceType, getDeviceInfo} from "../../../packages/utils/getDeviceInfo";
-import {addWindowListener} from "plain-utils/dom/addWindowListener";
-import {delay} from "plain-utils/utils/delay";
-
-export const AppHome = designPage(() => {
-
-  const state = reactive({
-    deviceType: getDeviceInfo().deviceType
-  });
-
-  onBeforeUnmount(
-    addWindowListener('resize', async () => {
-      clearDeviceInfo();
-      state.deviceType = getDeviceInfo().deviceType;
-    })
-  );
-
-  return () => (
-    <div className="app-home">
-      <AppHead/>
-      <div className="app-body" style={{ paddingLeft: state.deviceType !== eDeviceType.desktop ? '0' : undefined }}>
-        {state.deviceType === eDeviceType.desktop && <AppMenu/>}
-        <AppContent/>
-      </div>
-    </div>
-  );
-});

package/src/pages/index/home/AppMenu.tsx

@@ -1,38 +0,0 @@
-import {designPage, onMounted, useRefs} from "plain-design-composition";
-import {MenuGroups} from "./menus";
-import {$nav} from "../nav/$nav";
-import {Icon, Scroll} from "../../../packages";
-
-export const AppMenu = designPage(() => {
-
-  const { refs, onRef } = useRefs({ scroll: Scroll });
-
-  onMounted(async () => {
-    const activeEl = refs.scroll?.refs.content?.querySelector('[data-active=true]') as HTMLElement;
-    !!activeEl && refs.scroll?.methods.scrollTop(activeEl.offsetTop - 100);
-  });
-
-  return () => (
-    <div className="app-menu">
-      <Scroll ref={onRef.scroll}>
-        {MenuGroups.map((group, groupIndex) => (
-          <div className="app-menu-group" key={groupIndex}>
-            <div className="app-menu-group-name">{group.name}</div>
-            {group.children.map((child, childIndex) => (
-              <div className="app-menu-item" data-active={String(child.page === $nav.state.route.path)} key={childIndex} onClick={() => {
-                $nav.history.push(child.page);
-              }}>
-                <div>
-                  <span>{child.name}</span>
-                  <span>{child.title}</span>
-                </div>
-                {!!child.complete && <Icon icon="pi-check"/>}
-              </div>
-            ))}
-          </div>
-        ))}
-        <div style={{ height: '200px' }}/>
-      </Scroll>
-    </div>
-  );
-});