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

package/src/pages/index/Demo/DemoRow.utils.ts

@@ -1,23 +0,0 @@
-const DEMO_ROW_STORAGE_KEY = 'DEMO_ROW';
-
-export const DemoRowCache = (() => {
-  let str = localStorage.getItem(DEMO_ROW_STORAGE_KEY);
-  const cache: Record<string, boolean> = !!str ? JSON.parse(str) : {};
-
-  return {
-    get: (id: string) => {
-      const flag = cache[id];
-      return flag == null ? true : flag;
-    },
-    set: (id: string, flag: boolean) => {
-      cache[id] = flag;
-      localStorage.setItem(DEMO_ROW_STORAGE_KEY, JSON.stringify(cache));
-    },
-    setAll: (flag: boolean) => {
-      for (const key in cache) {
-        cache[key] = flag;
-      }
-      localStorage.setItem(DEMO_ROW_STORAGE_KEY, JSON.stringify(cache));
-    },
-  };
-})();

package/src/pages/index/Demo/DemoRowController.tsx

@@ -1,45 +0,0 @@
-import {designComponent, useCollect} from "plain-design-composition";
-import {DemoRow} from "./DemoRow";
-import {Icon} from "../../../packages";
-
-export const DemoRowController = designComponent({
-  name: 'demo-row-controller',
-  slots: ['default'],
-  setup({ slots }) {
-
-    const children = DemoRowCollector.parent();
-
-    const methods = {
-      changeAll: (flag: boolean) => {
-        children.forEach(child => child.methods.set(flag));
-        // DemoRowCache.setAll(flag);
-      }
-    };
-
-    return {
-      refer: {
-        name: 'i am row controller'
-      },
-      render: () => (
-        <>
-          {slots.default()}
-          <div className="demo-row-collector-operator">
-            <div onClick={() => methods.changeAll(false)}>
-              <span>全部收起</span>
-              <Icon icon="pi-fullscreen-exit"/>
-            </div>
-            <div onClick={() => methods.changeAll(true)}>
-              <span>全部展开</span>
-              <Icon icon="pi-fullscreen"/>
-            </div>
-          </div>
-        </>
-      )
-    };
-  },
-});
-
-export const DemoRowCollector = useCollect(() => ({
-  parent: DemoRowController,
-  child: DemoRow,
-}));

package/src/pages/index/Demo/index.ts

@@ -1,8 +0,0 @@
-import {App} from "plain-design-composition";
-import {DemoLine} from "./DemoLine";
-import {DemoRow} from "./DemoRow";
-
-export const installDemoComponent = (app: App) => {
-  app.component('demo-line', DemoLine);
-  app.component('demo-row', DemoRow);
-};

package/src/pages/index/app.scss

@@ -1,197 +0,0 @@
-html, body {
-  margin: 0;
-  padding: 0;
-  background-color: plv(background-color);
-  font-family: plv(font-family);
-}
-
-:root {
-
-  --app-head-height: 64px;
-  --app-menu-padding-left: 40px;
-  --app-menu-padding-top: 40px;
-  --app-border-color: #{plv(border-color)};
-  --app-title-color: #{plv(text-1)};
-
-  @media screen and(min-width: 1920px) {
-    --app-menu-wdith: 325px;
-  }
-  @media screen and(min-width: 1366px) and (max-width: 1919px) {
-    --app-menu-wdith: 265px;
-  }
-  @media screen and(max-width: 1365px) {
-    --app-menu-wdith: 225px;
-  }
-}
-
-html, body, #app {
-  /*height: 100%;
-  width: 100%;*/
-}
-
-.app-home {
-
-  .app-head {
-    height: var(--app-head-height);
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    position: sticky;
-    top: 0;
-    z-index: 50;
-    border-bottom: solid 1px plv(border-color);
-    background-color: plv(background-color);
-
-    .app-head-logo {
-      font-size: 24px;
-      width: var(--app-menu-wdith);
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      padding: 0 var(--app-menu-padding-left);
-      position: relative;
-      font-weight: 700;
-
-      &:after {
-        position: absolute;
-        right: 0;
-        top: 30%;
-        bottom: 30%;
-        width: 1px;
-        background-color: var(--app-border-color);
-        content: '';
-      }
-
-      span {
-        background: linear-gradient(#c41d7f, #08979c, #096dd9);
-        -webkit-background-clip: text;
-        color: transparent;
-        font-weight: 700;
-        white-space: nowrap;
-      }
-
-      img {
-        height: 18px;
-        transform: translateY(0.3em);
-      }
-    }
-
-    .app-head-operation {
-      display: flex;
-      align-items: center;
-      padding: 0 var(--app-menu-padding-left) 0 0;
-    }
-  }
-
-  .app-body {
-    padding-left: var(--app-menu-wdith);
-    min-height: calc(100vh - var(--app-head-height) - 2px);
-    position: relative;
-
-    .app-menu {
-      width: var(--app-menu-wdith);
-      position: fixed;
-      top: var(--app-head-height);
-      left: 0;
-      bottom: 0;
-      box-sizing: border-box;
-      padding-top: var(--app-menu-padding-top);
-
-      &:after {
-        position: absolute;
-        top: var(--app-menu-padding-top);
-        bottom: 0;
-        right: 0;
-        width: 1px;
-        background-color: var(--app-border-color);
-        content: '';
-      }
-
-      .app-menu-group {
-        font-size: 14px;
-
-        .app-menu-group-name {
-          height: 36px;
-          line-height: 36px;
-          margin: 16px 0;
-          color: plv(text-1);
-          position: relative;
-          padding: 8px 0 8px var(--app-menu-padding-left);
-          font-weight: bold;
-
-          &:after {
-            position: absolute;
-            bottom: 0;
-            left: var(--app-menu-padding-left);
-            right: var(--app-menu-padding-left);
-            height: 1px;
-            background-color: var(--app-border-color);
-            content: '';
-          }
-        }
-
-        .app-menu-item {
-          height: 40px;
-          line-height: 40px;
-          box-sizing: border-box;
-          padding-left: var(--app-menu-padding-left);
-          margin: 4px 0 8px 0;
-          color: plv(text-2);
-          cursor: pointer;
-          border-right: solid 4px transparent;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-
-          & > div:first-child {
-            span + span {
-              margin-left: 8px;
-            }
-          }
-
-          & > .#{componentName('icon')} {
-            color: plv('primary-6');
-            margin-right: var(--app-menu-padding-left);
-          }
-
-          &[data-active=true] {
-            border-right: solid 4px plv(primary-6);
-            background-color: plv(primary-1);
-            transition: all ease 200ms;
-          }
-
-          &:not([data-active=true]) {
-            transition: all ease-out 500ms;
-          }
-        }
-
-        &:first-child {
-          .app-menu-group-name {
-            margin-top: 0;
-            padding-top: 0;
-          }
-        }
-      }
-    }
-
-    .app-content {
-      min-height: inherit;
-      box-sizing: border-box;
-      padding: var(--app-menu-padding-top) 50px 50px;
-      color: plv(text-2);
-
-      .app-empty-text {
-        color: plv('text-1');
-      }
-    }
-  }
-}
-
-
-
-
-

package/src/pages/index/components/AutoTable/AutoHeightAutoRow.tsx

@@ -1,56 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-import TableOptionSpace from "../../../../packages/components/TableOptionSpace";
-
-let option: TableOptionSpace.iTableOption;
-
-export const demo1 = designPage(() => {
-
-  if (!option) {
-    option = useTableOption({
-      url: '/demo',
-      showRowsMode: 'auto',
-      fill: true,
-    });
-  }
-
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日"/>
-      <PlcNumber title="计数" field="count" required/>
-      <PlcInput
-        title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
-        v-slots={{
-          normal: ({ row }) => (
-            <span>[{row.normalText}]</span>
-          )
-        }}
-      />
-      <PlcNumber title="数字" field="numberVal"/>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-    </AutoTable>
-  );
-});

package/src/pages/index/components/AutoTable/AutoHeightFixedRow.tsx

@@ -1,50 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    showRowsMode: 'auto',
-  });
-
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日"/>
-      <PlcNumber title="计数" field="count" required/>
-      <PlcInput
-        title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
-        v-slots={{
-          normal: ({ row }) => (
-            <span>[{row.normalText}]</span>
-          )
-        }}
-      />
-      <PlcNumber title="数字" field="numberVal"/>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-    </AutoTable>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableBasicUsage.tsx

@@ -1,75 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcAddress, PlcDate, PlcInput, PlcNumber, PlcOv, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    // size: 'normal',
-    // showRows: 1,
-    // loadOnStart: false,
-    // filterFormColumn: 2,
-    /*permit: {
-      show: {
-        // insert: false,
-        // update: false,
-        // delete: false,
-        // other: false,
-        codes: {
-          'outer-update': false,
-        }
-      },
-      disabled: {
-        insert: true,
-      },
-    },*/
-  });
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <DemoRow title="基本用法">
-      <AutoTable option={option}>
-        <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-        <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-        <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-        <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
-        <PlcOv title="选项值" field="ovVal" ov="promotion"/>
-        <PlcAddress
-          provinceField="provinceVal"
-          cityField="cityVal"
-          districtField="districtVal"
-        />
-        <PlcNumber title="计数" field="count" required/>
-        <PlcInput title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
-                  v-slots={{
-                    normal: ({ row }) => (
-                      <span>[{row.normalText}]</span>
-                    )
-                  }}
-        />
-        <PlcNumber title="数字" field="numberVal"/>
-        <PlcSelect title="下拉选择" field="selectVal">
-          {selectOptions.map((item) => (
-            <SelectOption label={item.label} val={item.status} key={item.status}/>
-          ))}
-        </PlcSelect>
-        <PlcInput title="邮箱(校验测试)" field="email" validateType="email"/>
-      </AutoTable>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableCascade.tsx

@@ -1,99 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {$configuration, $notice, AutoTable, PlcInput, Segment, SegmentGroup} from "../../../../packages";
-import {PlainObject} from "plain-utils/utils/event";
-import {useTableOption} from "../../../module/useTableOption";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    show: true,
-  });
-
-  const http = $configuration.use('http');
-  const checkNewCode = async (row: PlainObject) => {
-    const { code, name, id } = row;
-
-    const filterCode = { id: 'check_code', field: 'code', value: code, operator: '=' };
-    const filterName = { id: 'check_name', field: 'name', value: name, operator: '=' };
-    const filterId = { id: 'check_id', field: 'id', value: [id], operator: '!=' };
-
-    const { list } = await http.post<{ list: any[] }>('/address/list', {
-      ...!id ? {
-        filters: [filterCode, filterName],
-        filterExpression: '(check_code or check_name)',
-      } : {
-        filters: [filterCode, filterName, filterId],
-        filterExpression: '(check_code or check_name) and (check_id)',
-      },
-    });
-    if (list.length > 0) {
-      $notice.error('地址代码或者地址名称唯一性冲突！');
-      return Promise.reject();
-    }
-  };
-
-  const provinceOption = useTableOption({
-    url: '/address',
-    param: { queries: [{ field: 'deep', value: '0', operator: '=' }] },
-    defaultNewRow: { deep: 0, },
-    showRows: 5,
-  });
-
-  const cityOption = useTableOption({
-    url: '/address',
-    showRows: 5,
-    defaultNewRow: { deep: 1, },
-    parentOption: provinceOption,
-    parentMap: { parentName: 'name', parentCode: 'code' },
-  });
-
-  const districtOption = useTableOption({
-    url: '/address',
-    showRows: 5,
-    defaultNewRow: { deep: 2, },
-    parentOption: cityOption,
-    parentMap: { parentName: 'name', parentCode: 'code' },
-  });
-
-  provinceOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
-  cityOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
-  districtOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
-
-  return () => <>
-    <DemoRow title="基本用法">
-      <AutoTable option={provinceOption}>
-        <PlcInput title="地址代码" field="code" required/>
-        <PlcInput title="地址名称" field="name" required defaultSearch/>
-        <PlcInput title="经度" field="longitude"/>
-        <PlcInput title="纬度" field="latitude"/>
-      </AutoTable>
-      {state.show && <>
-        <AutoTable option={cityOption}>
-          <PlcInput title="地址代码" field="code" required/>
-          <PlcInput title="地址名称" field="name" required defaultSearch/>
-          <PlcInput title="经度" field="longitude"/>
-          <PlcInput title="纬度" field="latitude"/>
-          {/*<PlcInput title="父级地址名称" field="parentName"/>*/}
-          {/*<PlcInput title="父级地址代码" field="parentCode"/>*/}
-        </AutoTable>
-        <AutoTable option={districtOption}>
-          <PlcInput title="地址代码" field="code" required/>
-          <PlcInput title="地址名称" field="name" required defaultSearch/>
-          <PlcInput title="经度" field="longitude"/>
-          <PlcInput title="纬度" field="latitude"/>
-          {/*<PlcInput title="父级地址名称" field="parentName"/>*/}
-          {/*<PlcInput title="父级地址代码" field="parentCode"/>*/}
-        </AutoTable>
-      </>}
-      <div>
-        <span>子表控制：</span>
-        <SegmentGroup v-model={state.show}>
-          <Segment val={true} label="显示"/>
-          <Segment val={false} label="隐藏"/>
-        </SegmentGroup>
-      </div>
-    </DemoRow>
-  </>;
-
-});

package/src/pages/index/components/AutoTable/AutoTableDefaultSearch.tsx

@@ -1,73 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    fill: true,
-    // showRows: 1,
-    // loadOnStart: false,
-    // filterFormColumn: 2,
-    /*permit: {
-      show: {
-        // insert: false,
-        // update: false,
-        // delete: false,
-        // other: false,
-        codes: {
-          'outer-update': false,
-        }
-      },
-      disabled: {
-        insert: true,
-      },
-    },*/
-  });
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
-      <PlcNumber title="计数" field="count" required/>
-      <PlcInput title="文本"
-                field="normalText"
-                required
-                width={150}
-                fixed="left"
-                filterConfig={filterConfig}
-                defaultSearch
-                defaultSearchValue="da"
-                v-slots={{
-                  normal: ({ row }) => (
-                    <span>[{row.normalText}]</span>
-                  )
-                }}
-      />
-      <PlcNumber title="数字" field="numberVal"/>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-      <PlcInput title="邮箱(校验测试)" field="email" validateType="email"/>
-    </AutoTable>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableFiles.tsx

@@ -1,26 +0,0 @@
-import {designPage} from 'plain-design-composition';
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/upload',
-    fill: true,
-    permit: {
-      show: {
-        insert: false,
-        update: false,
-      },
-    }
-  });
-
-  return () => <>
-    <AutoTable option={option}>
-      <Plc title="文件名称" field="name" width={200}/>
-      <PlcDate title="上传时间" field="createdAt" width={200}/>
-      <Plc title="文件地址" field="path"/>
-    </AutoTable>
-  </>;
-
-});