plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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-left" style={{ transform: 'rotate(-90deg)' }}/>
-            </div>
-            <div onClick={() => methods.changeAll(true)}>
-              <span>全部展开</span>
-              <Icon icon="pi-left" style={{ transform: 'rotate(90deg)' }}/>
-            </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/PageThemeUtils.tsx

@@ -1,125 +0,0 @@
-import {computed, getComponentCls, reactive} from "plain-design-composition";
-import {iApplicationConfiguration} from "../../packages";
-import {DeepPartial} from "../../packages/utils/type";
-import {createCache} from "../../packages/utils/createCache";
-import {ThemeShape, ThemeSize} from "../../packages/uses/useStyle";
-
-export const PageThemeUtils = (() => {
-
-  const darkCache = createCache<boolean>(getComponentCls('@@PAGE_THEME_IS_DARK'));
-  const primaryCache = createCache<string>(getComponentCls('@@PAGE_THEME_PRIMARY'));
-  const sizeCache = createCache<typeof ThemeSize.TYPE>(getComponentCls('@@PAGE_THEME_SIZE'));
-  const shapeCache = createCache<typeof ThemeShape.TYPE>(getComponentCls('@@PAGE_THEME_SHAPE'));
-  const inputModeCache = createCache<'flat' | 'stroke'>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
-  const zoomCache = createCache<number | undefined>(getComponentCls('@@PAGE_THEME_ZOOM'));
-
-  const state = reactive({
-    dark: darkCache.get(),
-    primaryKey: primaryCache.get(),
-    size: sizeCache.get(),
-    shape: shapeCache.get(),
-    inputMode: inputModeCache.get(),
-    zoom: zoomCache.get(),
-  });
-
-  const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
-    const config: DeepPartial<iApplicationConfiguration> = {};
-    if (!config.theme) {
-      config.theme = {};
-    }
-    if (!config.theme.base) {
-      config.theme.base = {};
-    }
-    config.theme.dark = !!state.dark;
-    config.theme.base.primary = !state.primaryKey ? undefined : ThemePrimaryColors[state.primaryKey]?.primary;
-    if (!config.default) {
-      config.default = {};
-    }
-    if (!!state.size) {
-      config.default.size = state.size;
-    }
-    if (!!state.shape) {
-      config.default.shape = state.shape;
-      if (!config.theme.vars) {
-        config.theme.vars = {};
-      }
-      if (state.shape === 'square') {
-        Object.assign(config.theme.vars, {
-          'box-size-mini-border-radius': '2px',
-          'box-size-small-border-radius': '2px',
-          'box-size-normal-border-radius': '4px',
-          'box-size-large-border-radius': '4px',
-        });
-      }
-      if (state.shape === 'none') {
-        Object.assign(config.theme.vars, {
-          'box-size-mini-border-radius': '0',
-          'box-size-small-border-radius': '0',
-          'box-size-normal-border-radius': '0',
-          'box-size-large-border-radius': '0',
-        });
-      }
-    }
-    if (!!state.inputMode) {
-      config.default.inputMode = state.inputMode;
-    }
-    return config;
-  });
-
-  const toggle = (isDark?: boolean) => {
-    state.dark = isDark == null ? !state.dark : isDark;
-    darkCache.set(state.dark);
-  };
-
-  const primary = (val: string | null) => {
-    state.primaryKey = val;
-    primaryCache.set(val);
-  };
-
-  const size = (val: typeof ThemeSize.TYPE | null) => {
-    state.size = val;
-    sizeCache.set(val);
-  };
-
-  const shape = (val: typeof ThemeShape.TYPE | null) => {
-    state.shape = val;
-    shapeCache.set(val);
-  };
-
-  const inputMode = (val: 'flat' | 'stroke' | null) => {
-    state.inputMode = val;
-    inputModeCache.set(val);
-  };
-
-  const zoom = (val: number | null) => {
-    state.zoom = val;
-    zoomCache.set(val);
-  };
-
-  return {
-    configuration,
-    toggle,
-    state,
-    primary,
-    size,
-    shape,
-    inputMode,
-    zoom,
-  };
-})();
-
-export const ThemePrimaryColors: Record<string, { label: string, primary: string | undefined } | undefined> = {
-  default: { label: '默认主题', primary: undefined, },
-  dustRed: { label: '薄暮', primary: '#f5222d', },
-  volcano: { label: '火山', primary: '#fa541c', },
-  subset: { label: '日暮', primary: '#fa8c16', },
-  gold: { label: '金盏花', primary: '#faad14', },
-  sunrise: { label: '日出', primary: '#fadb14', },
-  lime: { label: '青柠', primary: '#a0d911', },
-  polar: { label: '极光绿', primary: '#52c41a', },
-  cyan: { label: '明青', primary: '#13c2c2', },
-  daybreak: { label: '拂晓蓝', primary: '#1677ff', },
-  geek: { label: '极客蓝', primary: '#2f54eb', },
-  purple: { label: '酱紫', primary: '#722ed1', },
-  magenta: { label: '洋红', primary: '#eb2f96', },
-};

package/src/pages/index/app.scss

@@ -1,192 +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: 10;
-    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;
-      }
-    }
-
-    .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,51 +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',
-    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>
-  </>;
-
-});