plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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, index, virtualIndex }) => (
-                <tr key={virtualIndex} {...{ vid: index } as any} 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, index, virtualIndex }) => (
-                <tr key={virtualIndex} {...{ vid: index } as any} 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,105 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-import {PageThemeUtils, Select, SelectOption, ThemePrimaryColors} from "../../../packages";
-import ClientZoom from "../../../packages/components/ClientZoom";
-import logoImage from './plain-design.png';
-
-export const AppHead = designPage(() => {
-
-  const state = reactive({
-    size: PageThemeUtils.state.size || 'normal',
-    dark: PageThemeUtils.state.dark ? 'dark' : 'light',
-    shape: PageThemeUtils.state.shape || 'square',
-    zoom: PageThemeUtils.state.zoom || null,
-    primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
-    inputMode: PageThemeUtils.state.inputMode || 'flat',
-  });
-
-  const onSizeChange = () => {
-    PageThemeUtils.size(state.size);
-  };
-
-  const onShapeChange = () => {
-    PageThemeUtils.shape(state.shape);
-  };
-
-  const onZoomChange = () => {
-    PageThemeUtils.zoom(state.zoom);
-    ClientZoom.set(state.zoom);
-  };
-
-  const onDarkChange = () => {
-    const val = !state.dark ? false : state.dark === 'dark';
-    PageThemeUtils.toggle(val);
-  };
-
-  const onPrimaryChange = () => {
-    PageThemeUtils.primary(state.primaryKey);
-  };
-
-  const onInputModeChange = () => {
-    PageThemeUtils.inputMode(state.inputMode);
-  };
-
-  const publicPopperAttrs = { trigger: 'hover' };
-
-  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">
-        <Select v-model={state.inputMode} onChange={onInputModeChange} size="mini" width="100" placeholder="输入框" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="输入框:填充" val="flat"/>
-          <SelectOption label="输入框:描边" val="stroke"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.primaryKey} onChange={onPrimaryChange} size="mini" width="90" placeholder="主题色" popperAttrs={publicPopperAttrs}>
-          {Object.entries(ThemePrimaryColors).map(([key, value]) => (
-            <SelectOption label={value!.label} val={key} key={key}>
-              {!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
-              <span>{value!.label}</span>
-            </SelectOption>
-          ))}
-        </Select>
-        &nbsp;
-        <Select v-model={state.size} onChange={onSizeChange} size="mini" width="90" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="大尺寸" val="large"/>
-          <SelectOption label="中等尺寸" val="normal"/>
-          <SelectOption label="小尺寸" val="small"/>
-          <SelectOption label="极小尺寸" val="mini"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.dark} onChange={onDarkChange} size="mini" width="90" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="黑色主题" val="dark"/>
-          <SelectOption label="白色主题" val="light"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.shape} onChange={onShapeChange} size="mini" width="90" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="圆角" val="round"/>
-          <SelectOption label="小圆角" val="square"/>
-          <SelectOption label="无圆角" val="none"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.zoom} onChange={onZoomChange} size="mini" width="90" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="0.6" val={0.6}/>
-          <SelectOption label="0.7" val={0.7}/>
-          <SelectOption label="0.8" val={0.8}/>
-          <SelectOption label="0.9" val={0.9}/>
-          <SelectOption label="1.0" val={null}/>
-          <SelectOption label="1.1" val={1.1}/>
-          <SelectOption label="1.2" val={1.2}/>
-          <SelectOption label="1.3" val={1.3}/>
-          <SelectOption label="1.4" val={1.4}/>
-          <SelectOption label="1.5" val={1.5}/>
-          <SelectOption label="1.6" val={1.6}/>
-          <SelectOption label="1.7" val={1.7}/>
-          <SelectOption label="1.8" val={1.8}/>
-          <SelectOption label="1.9" val={1.9}/>
-          <SelectOption label="2.0" val={2.0}/>
-        </Select>
-      </div>
-    </div>
-  );
-});

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

@@ -1,16 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {AppMenu} from "./AppMenu";
-import {AppHead} from "./AppHead";
-import {AppContent} from "./AppContent";
-
-export const AppHome = designPage(() => {
-  return () => (
-    <div className="app-home">
-      <AppHead/>
-      <div className="app-body">
-        <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>
-  );
-});