plain-design 1.0.0-beta.11 → 1.0.0-beta.111

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

@@ -1,338 +0,0 @@
-import {designPage, Fragment, getComponentCls, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Input, Radio, RadioGroup, Tab, TabGroup, useDialog} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const DemoBasic = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <TabGroup headType="text">
-        <Tab title="用户管理" style={{ backgroundColor: `var(--${getComponentCls('gray-1')})` }}>
-          <div style={{ height: '100px', padding: '20px 0' }}>
-            用户管理：
-            <Input width="300" onMounted={() => console.log('111 mounted')}/>
-          </div>
-        </Tab>
-        <Tab title="配置管理">
-          <div style={{ height: '200px', padding: '20px 0' }}>
-            配置管理：
-            <Input width="300" onMounted={() => console.log('222 mounted')}/>
-          </div>
-        </Tab>
-        <Tab title="数据集管理">
-          <div style={{ height: '300px', padding: '20px 0' }}>
-            数据集管理：
-            <Input width="300" onMounted={() => console.log('333 mounted')}/>
-          </div>
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoDirection = designPage(() => {
-  const state = reactive({
-    position: 'top'
-  });
-
-  return () => (
-    <DemoRow title="方向">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <TabGroup headPosition={state.position as any}>
-        <Tab title="用户管理">
-          <div style={{ height: '100px', padding: '20px 0' }}>
-            用户管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="配置管理">
-          <div style={{ height: '200px', padding: '20px 0' }}>
-            配置管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="数据集管理">
-          <div style={{ height: '300px', padding: '20px 0' }}>
-            数据集管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoHeadType = designPage(() => {
-  const state = reactive({
-    position: 'top',
-    headType: 'text',
-  });
-
-  return () => (
-    <DemoRow title="页签类型">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <DemoLine>
-        <RadioGroup v-model={state.headType}>
-          <Radio val="text" label="text"/>
-          <Radio val="card" label="card"/>
-          <Radio val="shadow" label="shadow"/>
-        </RadioGroup>
-      </DemoLine>
-      <TabGroup headPosition={state.position as any} headType={state.headType as any}>
-        <Tab title="用户管理">
-          <div style={{ height: '100px', padding: '20px 0' }}>
-            用户管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="配置管理">
-          <div style={{ height: '200px', padding: '20px 0' }}>
-            配置管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="数据集管理">
-          <div style={{ height: '300px', padding: '20px 0' }}>
-            数据集管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoLongTabs = designPage(() => {
-
-  const state = reactive({
-    position: 'top',
-    headType: 'text',
-  });
-
-  return () => (
-    <DemoRow title="超长页签">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <DemoLine>
-        <RadioGroup v-model={state.headType}>
-          <Radio val="text" label="text"/>
-          <Radio val="card" label="card"/>
-          <Radio val="shadow" label="shadow"/>
-        </RadioGroup>
-      </DemoLine>
-      <TabGroup headPosition={state.position as any} headType={state.headType as any}>
-        {new Array(10).fill(0).map((_, index) => (
-          <Fragment key={index}>
-            <Tab title={`用户管理_${index}`}>
-              <div style={{ height: '100px', backgroundColor: `var(--${getComponentCls('gray-3')})` }}>
-                {`user management_${index}`}
-              </div>
-            </Tab>
-            <Tab title={`配置管理_${index}`}>
-              <div style={{ height: '200px', backgroundColor: `var(--${getComponentCls('gray-2')})` }}>
-                {`config management_${index}`}
-              </div>
-            </Tab>
-            <Tab title={`数据集管理_${index}`}>
-              <div style={{ height: '300px', backgroundColor: `var(--${getComponentCls('gray-1')})` }}>
-                {`data map_${index}`}
-              </div>
-            </Tab>
-          </Fragment>
-        ))}
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-
-export const DemoDynamic = designPage(() => {
-
-  const state = reactive({
-    tabs: [
-      '用户管理',
-      '配置管理',
-      '数据集管理',
-      '网点管理',
-      // 以下数据用来模拟超长数据
-      /*'价格配置',
-      '系统配置',
-      '开发配置',
-      '参数配置',
-      '装修配置',
-      '源点配置',
-      '网站地图',
-      '黑名单',
-      '白名单',
-      '工作流',
-      '审批流',*/
-    ],
-  });
-
-  const { $dialog } = useDialog();
-
-  const addTab = () => {
-    $dialog({
-      editType: 'input',
-      confirmButton: true,
-      cancelButton: true,
-      handleConfirm: ({ editValue }) => {
-        editValue = String(editValue || "").trim();
-        if (!editValue) {
-          return;
-        }
-        if (state.tabs.indexOf(editValue) > -1) {
-          $dialog.warn('唯一性冲突！');
-          return;
-        }
-        state.tabs.unshift(editValue);
-      }
-    });
-  };
-
-  const resetTabData = () => {
-    const data = [
-      '用户管理',
-      '配置管理',
-      '数据集管理',
-      '网点管理',
-      '价格配置',
-      '系统配置',
-      '开发配置',
-      '参数配置',
-      '装修配置',
-      '源点配置',
-      '网站地图',
-      '黑名单',
-      '白名单',
-      '工作流',
-      '审批流',
-    ];
-    state.tabs = state.tabs.length <= 4 ? data : data.slice(0, 4);
-  };
-
-  return () => (
-    <DemoRow title="动态增减标签页">
-      <TabGroup closeable>
-        {{
-          default: () => state.tabs.map((tab, index) => (
-            <Tab key={tab} title={tab} onClose={() => state.tabs.splice(index, 1)}>
-              <div style={{ height: '100px', padding: '20px 0' }}>
-                {tab}：
-                <Input width="300"/>
-              </div>
-            </Tab>
-          )),
-          operator: () => (
-            <>
-              <Button label="新页签" icon="pi-plus" onClick={addTab}/>
-              <Button mode="outline" label={state.tabs.length > 4 ? '短页签' : '长页签'} status="error" onClick={resetTabData}/>
-            </>
-          )
-        }}
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoFitHeight = designPage(() => {
-  const state = reactive({
-    position: 'top',
-    headType: 'text',
-
-  });
-
-  return () => (
-    <DemoRow title="固定高度">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <DemoLine>
-        <RadioGroup v-model={state.headType}>
-          <Radio val="text" label="text"/>
-          <Radio val="card" label="card"/>
-          <Radio val="shadow" label="shadow"/>
-        </RadioGroup>
-      </DemoLine>
-      <div style={{ height: '200px' }}>
-        <TabGroup headPosition={state.position as any} headType={state.headType as any} fitHeight>
-          {new Array(10).fill(0).map((_, index) => (
-            <Fragment key={index}>
-              <Tab title={`用户管理_${index}`}>
-                <div style={{ height: '200px', backgroundColor: `var(--${getComponentCls('gray-1')})` }}>
-                  {`user management_${index}`}
-                </div>
-              </Tab>
-              <Tab title={`配置管理_${index}`}>
-                <div style={{ height: '400px', backgroundColor: `var(--${getComponentCls('gray-2')})` }}>
-                  {`config management_${index}`}
-                </div>
-              </Tab>
-              <Tab title={`数据集管理_${index}`}>
-                <div style={{ height: '600px', backgroundColor: `var(--${getComponentCls('gray-3')})` }}>
-                  {`data map_${index}`}
-                </div>
-              </Tab>
-            </Fragment>
-          ))}
-        </TabGroup>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoInit = designPage(() => {
-  return () => <>
-    <DemoRow title="标签初始化控制">
-      <TabGroup>
-        <Tab title="用户管理" style={{ padding: '20px 0' }}>
-          <span>用户管理：</span>
-          <Input
-            onMounted={() => console.log('用户管理 mouinted',)}
-            onBeforeMount={() => console.log('用户管理 unmount',)}
-          />
-        </Tab>
-        <Tab title="立即初始化" style={{ padding: '20px 0' }} init>
-          <span>子模块数据管理：</span>
-          <Input
-            onMounted={() => console.log('立即初始化 mouinted',)}
-            onBeforeMount={() => console.log('立即初始化 unmount',)}
-          />
-        </Tab>
-        <Tab title="关闭的时候销毁" style={{ padding: '20px 0' }} destroyOnHide>
-          <span>数据集：</span>
-          <Input
-            modelValue={'初始值'}
-            onMounted={() => console.log('关闭的时候销毁 mouinted',)}
-            onBeforeMount={() => console.log('关闭的时候销毁 unmount',)}
-          />
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  </>;
-});

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

@@ -1,100 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Tag} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <Tag label="gray"/>
-      <Tag label="用户标签"/>
-    </DemoRow>
-  );
-});
-export const demoClose = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <Tag label="gray" closeable onClose={() => $message('close')} onClick={() => $message('click')}/>
-    </DemoRow>
-  );
-});
-export const demoChecked = designPage(() => {
-
-  const state = reactive({
-    checked: {
-      1: true,
-      2: false,
-      3: false,
-    }
-  });
-
-  return () => (
-    <DemoRow title="可选中">
-      <div>
-        <Tag label="标签一" checked={state.checked[1]} onClick={() => state.checked[1] = !state.checked[1]}/>
-        <Tag label="标签二" checked={state.checked[2]} onClick={() => state.checked[2] = !state.checked[2]}/>
-        <Tag label="标签三" checked={state.checked[3]} onClick={() => state.checked[3] = !state.checked[3]}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoColor = designPage(() => {
-  return () => (
-    <DemoRow title="颜色">
-      <Tag label="red" color="red"/>
-      <Tag label="orangered" color="orangered"/>
-      <Tag label="orange" color="orange"/>
-      <Tag label="gold" color="gold"/>
-      <Tag label="yellow" color="yellow"/>
-      <Tag label="lime" color="lime"/>
-      <Tag label="green" color="green"/>
-      <Tag label="cyan" color="cyan"/>
-      <Tag label="blue" color="blue"/>
-      <Tag label="purple" color="purple"/>
-      <Tag label="pinkpurple" color="pinkpurple"/>
-      <Tag label="magenta" color="magenta"/>
-      <Tag label="gray" color="gray"/>
-
-      <p>自定义颜色</p>
-      <Tag label="#f53f3f" color="#f53f3f"/>
-      <Tag label="#7816ff" color="#7816ff"/>
-      <Tag label="#00b42a" color="#00b42a"/>
-      <Tag label="#165dff" color="#165dff"/>
-      <Tag label="#ff7d00" color="#ff7d00"/>
-      <Tag label="#eb0aa4" color="#eb0aa4"/>
-      <Tag label="#7bc616" color="#7bc616"/>
-      <Tag label="#86909c" color="#86909c"/>
-      <Tag label="#b71de8" color="#b71de8"/>
-      <Tag label="#0fc6c2" color="#0fc6c2"/>
-      <Tag label="#ffb400" color="#ffb400"/>
-      <Tag label="#168cff" color="#168cff"/>
-      <Tag label="#ff5722" color="#ff5722"/>
-    </DemoRow>
-  );
-});
-export const demoSize = designPage(() => {
-  return () => (
-    <DemoRow title="尺寸">
-      <Tag label="Large" size="large"/>
-      <Tag label="Normal" size="normal"/>
-      <Tag label="Small" size="small"/>
-      <Tag label="mini" size="mini"/>
-    </DemoRow>
-  );
-});
-
-
-export const demoLoading = designPage(() => {
-  return () => (
-    <DemoRow title="加载状态">
-      <Tag label="用户标签" loading/>
-    </DemoRow>
-  );
-});
-export const demoIcon = designPage(() => {
-  return () => (
-    <DemoRow title="图标">
-      <Tag label="用户标签" icon="pi-user"/>
-    </DemoRow>
-  );
-});