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

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

@@ -1,163 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {ColorPicker, Input, Tag} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export const demo1 = designPage(() => {
-  const state = reactive({
-    alpha: 50,
-  });
-
-  return () => (
-    <DemoRow title="ColorAlphaSlider">
-      <div style={{ width: '225px', display: 'inline-block' }}>
-        <ColorPicker.ColorAlphaSlider v-model={state.alpha} color="black"/>
-      </div>
-      <span>{state.alpha}</span>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-  const state = reactive({
-    hue: 250,
-  });
-
-  return () => (
-    <DemoRow title="ColorHueSlider">
-      <div style={{ width: '225px', display: 'inline-block' }}>
-        <ColorPicker.ColorHueSlider v-model={state.hue}/>
-      </div>
-      <span>{state.hue}</span>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPanel">
-      <ColorPicker.ColorPanel v-model={state.color} format={'hex'}/>
-      <Tag color={state.color} label={state.color}/>
-    </DemoRow>
-  );
-});
-export const demo4 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPanel：透明度">
-      <ColorPicker.ColorPanel v-model={state.color} format={'rgb'} enableAlpha/>
-      <Tag color={state.color} label={state.color}/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPicker基本用法">
-      <Input v-model={state.color} style={{ width: '200px' }}/>
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }}/>
-      <Tag color={state.color} label={state.color} style={{ marginTop: '8px' }}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo6 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPicker尺寸">
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} size="large"/>
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} size="normal"/>
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} size="small"/>
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} size="mini"/>
-    </DemoRow>
-  );
-});
-
-
-export const demo7 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPicker focus">
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} onFocus={() => console.log('focus')} onBlur={() => console.log('blur')}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo8 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPicker 启用透明度">
-      <Input v-model={state.color} style={{ width: '200px' }}/>
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} enableAlpha/>
-      <Tag color={state.color} label={state.color} style={{ marginTop: '8px' }}/>
-    </DemoRow>
-  );
-});
-
-export const demo9 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPicker 禁用只读">
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} disabled/>
-      <ColorPicker v-model={state.color} style={{ width: '200px', marginTop: '8px' }} readonly/>
-    </DemoRow>
-  );
-});
-
-export const demo10 = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-  return () => (
-    <DemoRow title="ColorPicker 按钮类型">
-      <ColorPicker v-model={state.color} type="button"/>
-    </DemoRow>
-  );
-});
-
-export const demoScopeSlot = designPage(() => {
-  const state = reactive({
-    color: '#A1ABB5',
-  });
-
-  return () => (
-    <DemoRow title="ColorPicker 自定义内容">
-      <Input v-model={state.color} width="200px"/>
-      <ColorPicker v-model={state.color}>
-        {{
-          default: ({ color }: { color?: string }) => (
-            <span>
-              <span style={{ display: 'inline-block', verticalAlign: 'sub', height: '20px', width: '20px', marginRight: '8px', backgroundColor: color }}/>
-              <span>{color}</span>
-            </span>
-          )
-        }}
-      </ColorPicker>
-      <span>{state.color}</span>
-    </DemoRow>
-  );
-});

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

@@ -1,443 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, DatePicker} from '../../../../packages';
-import {DemoLine} from "../../Demo/DemoLine";
-import {PDate} from "../../../../packages/utils/plainDate";
-import {UseDateType} from "../../../../packages/components/DatePicker/panel/useDatePanel";
-
-const { DatePanel, DatePanelWeek, DatePanelYear, DatePanelMonth, DatePanelQuarter, DatePanelRange, DatePanelDate } = DatePicker;
-
-export const demo1 = designPage(() => {
-
-  const val = reactive({ val: {} as any }).val;
-
-  return () => (
-    <DemoRow title={'panel'}>
-      <DemoRow title={'panel year'}>
-        <DemoLine>{val[0]}</DemoLine>
-        <DatePanelYear v-model={val[0]}/>
-      </DemoRow>
-      <DemoRow title={'panel month'}>
-        <DemoLine>{val[1]}</DemoLine>
-        <DatePanelMonth v-model={val[1]}/>
-      </DemoRow>
-      <DemoRow title={'panel date'}>
-        <DemoLine>{val[2]}</DemoLine>
-        <DatePanelDate v-model={val[2]}/>
-      </DemoRow>
-    </DemoRow>
-
-  );
-});
-
-export const demoBasicDate = designPage(() => {
-  const state = reactive({
-    year: null as any,
-    month: null as any,
-    date: null as any,
-    week: null as any,
-    quarter: null as any,
-    datetime: null as any,
-  });
-
-  return () => (
-    <DemoRow title="single render">
-      <DatePicker v-model={state.year} panel="year" style={{ width: "200px" }} placeholder="年"/>
-      <DatePicker v-model={state.year} panel="year" style={{ width: "200px" }} placeholder="年" displayFormat="YYYY年"/>
-      <DatePicker v-model={state.year} panel="year" style={{ width: "200px" }} placeholder="年" displayFormat="YYYY年" max="2050" min="2002"/>
-      &nbsp; {state.year}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.month} panel="month" style={{ width: "200px" }} placeholder="年月"/>
-      <DatePicker v-model={state.month} panel="month" style={{ width: "200px" }} placeholder="年月" displayFormat="YYYY年MM月"/>
-      <DatePicker v-model={state.month} panel="month" style={{ width: "200px" }} placeholder="年月" displayFormat="YYYY年MM月" max="2050-05" min="2002-02"/>
-      &nbsp; {state.month}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.date} panel="date" style={{ width: "200px" }} placeholder="年月日"/>
-      <DatePicker v-model={state.date} panel="date" style={{ width: "200px" }} placeholder="年月日" displayFormat="YYYY年MM月DD日"/>
-      <DatePicker v-model={state.date} panel="date" style={{ width: "200px" }} placeholder="年月日" displayFormat="YYYY年MM月DD日" max="2050-05-05" min="2002-02-02"/>
-      &nbsp; {state.date}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.week} panel="week" style={{ width: "200px" }} placeholder="周"/>
-      <DatePicker v-model={state.week} panel="week" style={{ width: "200px" }} placeholder="周" displayFormat="gggg年，第ww周"/>
-      <DatePicker v-model={state.week} panel="week" style={{ width: "200px" }} placeholder="周" displayFormat="gggg年，第ww周" max="2050-05-09" min="2002-02-04"/>
-      &nbsp; {state.week}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.quarter} panel="quarter" style={{ width: "200px" }} placeholder="季度"/>
-      <DatePicker v-model={state.quarter} panel="quarter" style={{ width: "200px" }} placeholder="季度" displayFormat="YYYY年，第Q季度"/>
-      <DatePicker v-model={state.quarter} panel="quarter" style={{ width: "200px" }} placeholder="季度" displayFormat="YYYY年，第Q季度" max="2050-07" min="2002-04"/>
-      &nbsp; {state.quarter}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.datetime} datetime style={{ width: "200px" }} placeholder="日期时间"/>
-      <DatePicker v-model={state.datetime} datetime style={{ width: "200px" }} placeholder="日期时间" displayFormat="YYYY年YY月DD日 HH时mm分ss秒"/>
-      <DatePicker v-model={state.datetime} datetime style={{ width: "200px" }} placeholder="日期时间" displayFormat="YYYY年YY月DD日 HH时mm分ss秒" max="2050-05-05 18:55:55" min="2002-02-02 06:22:22"/>
-      &nbsp; {state.datetime}
-    </DemoRow>
-  );
-});
-
-
-export const demoDange = designPage(() => {
-  const state = reactive({
-    year: {
-      start: null as any,
-      end: null as any,
-    },
-    month: {
-      start: null as any,
-      end: null as any,
-    },
-    date: {
-      start: null as any,
-      end: null as any,
-    },
-    week: {
-      start: null as any,
-      end: null as any,
-    },
-    quarter: {
-      start: null as any,
-      end: null as any,
-    },
-    datetime: {
-      start: null as any,
-      end: null as any,
-    },
-  });
-
-  return () => (
-    <DemoRow title="range render">
-      <DatePicker v-model:start={state.year.start} v-model:end={state.year.end} range panel="year" style={{ width: "400px" }} startPlaceholder="开始年" endPlaceholder="结束年"/>
-      <DatePicker v-model:start={state.year.start} v-model:end={state.year.end} range panel="year" style={{ width: "400px" }} startPlaceholder="开始年" endPlaceholder="结束年" displayFormat="YYYY年"/>
-      <DatePicker v-model:start={state.year.start} v-model:end={state.year.end} range panel="year" style={{ width: "400px" }} startPlaceholder="开始年" endPlaceholder="结束年" displayFormat="YYYY年" max="2050" min="2002"/>
-      &nbsp; {state.year.start} / {state.year.end}
-      <br/>
-      <br/>
-      <DatePicker v-model:start={state.month.start} v-model:end={state.month.end} range panel="month" style={{ width: "400px" }} startPlaceholder="开始年月" endPlaceholder="结束年月"/>
-      <DatePicker v-model:start={state.month.start} v-model:end={state.month.end} range panel="month" style={{ width: "400px" }} startPlaceholder="开始年月" endPlaceholder="结束年月" displayFormat="YYYY年MM月"/>
-      <DatePicker v-model:start={state.month.start} v-model:end={state.month.end} range panel="month" style={{ width: "400px" }} startPlaceholder="开始年月" endPlaceholder="结束年月" displayFormat="YYYY年MM月" max="2050-05" min="2002-02"/>
-      &nbsp; {state.month.start} / {state.month.end}
-      <br/>
-      <br/>
-      <DatePicker v-model:start={state.date.start} v-model:end={state.date.end} range panel="date" style={{ width: "400px" }} startPlaceholder="开始年月日" endPlaceholder="结束年月日"/>
-      <DatePicker v-model:start={state.date.start} v-model:end={state.date.end} range panel="date" style={{ width: "400px" }} startPlaceholder="开始年月日" endPlaceholder="结束年月日" displayFormat="YYYY年MM月DD日"/>
-      <DatePicker v-model:start={state.date.start} v-model:end={state.date.end} range panel="date" style={{ width: "400px" }} startPlaceholder="开始年月日" endPlaceholder="结束年月日" displayFormat="YYYY年MM月DD日" max="2050-05-05" min="2002-02-02"/>
-      &nbsp; {state.date.start} / {state.date.end}
-      <br/>
-      <br/>
-      <DatePicker v-model:start={state.week.start} v-model:end={state.week.end} range panel="week" style={{ width: "400px" }} startPlaceholder="开始周" endPlaceholder="结束周"/>
-      <DatePicker v-model:start={state.week.start} v-model:end={state.week.end} range panel="week" style={{ width: "400px" }} startPlaceholder="开始周" endPlaceholder="结束周" displayFormat="gggg年，第ww周"/>
-      <DatePicker v-model:start={state.week.start} v-model:end={state.week.end} range panel="week" style={{ width: "400px" }} startPlaceholder="开始周" endPlaceholder="结束周" displayFormat="gggg年，第ww周" max="2050-05-09" min="2002-02-04"/>
-      &nbsp; {state.week.start} / {state.week.end}
-      <br/>
-      <br/>
-      <DatePicker v-model:start={state.quarter.start} v-model:end={state.quarter.end} range panel="quarter" style={{ width: "400px" }} startPlaceholder="开始季度" endPlaceholder="结束季度"/>
-      <DatePicker v-model:start={state.quarter.start} v-model:end={state.quarter.end} range panel="quarter" style={{ width: "400px" }} startPlaceholder="开始季度" endPlaceholder="结束季度" displayFormat="YYYY年，第Q季度"/>
-      <DatePicker v-model:start={state.quarter.start} v-model:end={state.quarter.end} range panel="quarter" style={{ width: "400px" }} startPlaceholder="开始季度" endPlaceholder="结束季度" displayFormat="YYYY年，第Q季度" max="2050-07" min="2002-04"/>
-      &nbsp; {state.quarter.start} / {state.quarter.end}
-      <br/>
-      <br/>
-      <DatePicker v-model:start={state.datetime.start} v-model:end={state.datetime.end} range datetime style={{ width: "400px" }} startPlaceholder="开始日期时间" endPlaceholder="结束日期时间"/>
-      <DatePicker v-model:start={state.datetime.start} v-model:end={state.datetime.end} range datetime style={{ width: "400px" }} startPlaceholder="开始日期时间" endPlaceholder="结束日期时间" displayFormat="YYYY年YY月DD日 HH时mm分ss秒"/>
-      <DatePicker v-model:start={state.datetime.start} v-model:end={state.datetime.end} range datetime style={{ width: "400px" }} startPlaceholder="开始日期时间" endPlaceholder="结束日期时间" displayFormat="YYYY年YY月DD日 HH时mm分ss秒" max="2050-05-05 18:55:55" min="2002-02-02 06:22:22"/>
-      &nbsp; {state.datetime.start} / {state.datetime.end}
-    </DemoRow>
-  );
-});
-
-
-export const demoSeparateDange = designPage(() => {
-
-  const state = reactive({
-    year: {
-      start: null as any,
-      end: null as any,
-    },
-    month: {
-      start: null as any,
-      end: null as any,
-    },
-    date: {
-      start: null as any,
-      end: null as any,
-    },
-    week: {
-      start: null as any,
-      end: null as any,
-    },
-    quarter: {
-      start: null as any,
-      end: null as any,
-    },
-    datetime: {
-      start: null as any,
-      end: null as any,
-    },
-  });
-
-  return () => (
-    <DemoRow title="separate range render">
-      <DatePicker separate v-model:start={state.year.start} v-model:end={state.year.end} range panel="year" style={{ width: "400px" }} startPlaceholder="开始年" endPlaceholder="结束年"/>
-      <DatePicker separate v-model:start={state.year.start} v-model:end={state.year.end} range panel="year" style={{ width: "400px" }} startPlaceholder="开始年" endPlaceholder="结束年" displayFormat="YYYY年"/>
-      <DatePicker separate v-model:start={state.year.start} v-model:end={state.year.end} range panel="year" style={{ width: "400px" }} startPlaceholder="开始年" endPlaceholder="结束年" displayFormat="YYYY年" max="2050" min="2002"/>
-      &nbsp; {state.year.start} / {state.year.end}
-      <br/>
-      <br/>
-      <DatePicker separate v-model:start={state.month.start} v-model:end={state.month.end} range panel="month" style={{ width: "400px" }} startPlaceholder="开始年月" endPlaceholder="结束年月"/>
-      <DatePicker separate v-model:start={state.month.start} v-model:end={state.month.end} range panel="month" style={{ width: "400px" }} startPlaceholder="开始年月" endPlaceholder="结束年月" displayFormat="YYYY年MM月"/>
-      <DatePicker separate v-model:start={state.month.start} v-model:end={state.month.end} range panel="month" style={{ width: "400px" }} startPlaceholder="开始年月" endPlaceholder="结束年月" displayFormat="YYYY年MM月" max="2050-05" min="2002-02"/>
-      &nbsp; {state.month.start} / {state.month.end}
-      <br/>
-      <br/>
-      <DatePicker separate v-model:start={state.date.start} v-model:end={state.date.end} range panel="date" style={{ width: "400px" }} startPlaceholder="开始年月日" endPlaceholder="结束年月日"/>
-      <DatePicker separate v-model:start={state.date.start} v-model:end={state.date.end} range panel="date" style={{ width: "400px" }} startPlaceholder="开始年月日" endPlaceholder="结束年月日" displayFormat="YYYY年MM月DD日"/>
-      <DatePicker separate v-model:start={state.date.start} v-model:end={state.date.end} range panel="date" style={{ width: "400px" }} startPlaceholder="开始年月日" endPlaceholder="结束年月日" displayFormat="YYYY年MM月DD日" max="2050-05-05" min="2002-02-02"/>
-      &nbsp; {state.date.start} / {state.date.end}
-      <br/>
-      <br/>
-      <DatePicker separate v-model:start={state.week.start} v-model:end={state.week.end} range panel="week" style={{ width: "400px" }} startPlaceholder="开始周" endPlaceholder="结束周"/>
-      <DatePicker separate v-model:start={state.week.start} v-model:end={state.week.end} range panel="week" style={{ width: "400px" }} startPlaceholder="开始周" endPlaceholder="结束周" displayFormat="gggg年，第ww周"/>
-      <DatePicker separate v-model:start={state.week.start} v-model:end={state.week.end} range panel="week" style={{ width: "400px" }} startPlaceholder="开始周" endPlaceholder="结束周" displayFormat="gggg年，第ww周" max="2050-05-09" min="2002-02-04"/>
-      &nbsp; {state.week.start} / {state.week.end}
-      <br/>
-      <br/>
-      <DatePicker separate v-model:start={state.quarter.start} v-model:end={state.quarter.end} range panel="quarter" style={{ width: "400px" }} startPlaceholder="开始季度" endPlaceholder="结束季度"/>
-      <DatePicker separate v-model:start={state.quarter.start} v-model:end={state.quarter.end} range panel="quarter" style={{ width: "400px" }} startPlaceholder="开始季度" endPlaceholder="结束季度" displayFormat="YYYY年，第Q季度"/>
-      <DatePicker separate v-model:start={state.quarter.start} v-model:end={state.quarter.end} range panel="quarter" style={{ width: "400px" }} startPlaceholder="开始季度" endPlaceholder="结束季度" displayFormat="YYYY年，第Q季度" max="2050-07" min="2002-04"/>
-      &nbsp; {state.quarter.start} / {state.quarter.end}
-      <br/>
-      <br/>
-      <DatePicker separate v-model:start={state.datetime.start} v-model:end={state.datetime.end} range datetime style={{ width: "400px" }} startPlaceholder="开始日期时间" endPlaceholder="结束日期时间"/>
-      <DatePicker separate v-model:start={state.datetime.start} v-model:end={state.datetime.end} range datetime style={{ width: "400px" }} startPlaceholder="开始日期时间" endPlaceholder="结束日期时间" displayFormat="YYYY年YY月DD日 HH时mm分ss秒"/>
-      <DatePicker separate v-model:start={state.datetime.start} v-model:end={state.datetime.end} range datetime style={{ width: "400px" }} startPlaceholder="开始日期时间" endPlaceholder="结束日期时间" displayFormat="YYYY年YY月DD日 HH时mm分ss秒" max="2050-05-05 18:55:55" min="2002-02-02 06:22:22"/>
-      &nbsp; {state.datetime.start} / {state.datetime.end}
-    </DemoRow>
-  );
-});
-
-
-export const demoMultiple = designPage(() => {
-
-  const state = reactive({
-    year: [] as any[],
-    month: [] as any[],
-    date: [] as any[],
-    week: [] as any[],
-    quarter: [] as any[],
-    datetime: [] as any[],
-  });
-
-  return () => (
-    <DemoRow title="multiple render">
-      <DatePicker v-model={state.year} multiple panel="year" style={{ width: "400px" }} placeholder="年"/>
-      <DatePicker v-model={state.year} multiple panel="year" style={{ width: "400px" }} placeholder="年" displayFormat="YYYY年"/>
-      <DatePicker v-model={state.year} multiple panel="year" style={{ width: "400px" }} placeholder="年" displayFormat="YYYY年" max="2050" min="2002"/>
-      &nbsp; {state.year?.join(',')}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.month} multiple panel="month" style={{ width: "400px" }} placeholder="年月"/>
-      <DatePicker v-model={state.month} multiple panel="month" style={{ width: "400px" }} placeholder="年月" displayFormat="YYYY年MM月"/>
-      <DatePicker v-model={state.month} multiple panel="month" style={{ width: "400px" }} placeholder="年月" displayFormat="YYYY年MM月" max="2050-05" min="2002-02"/>
-      &nbsp; {state.month?.join(',')}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.date} multiple panel="date" style={{ width: "400px" }} placeholder="年月日"/>
-      <DatePicker v-model={state.date} multiple panel="date" style={{ width: "400px" }} placeholder="年月日" displayFormat="YYYY年MM月DD日"/>
-      <DatePicker v-model={state.date} multiple panel="date" style={{ width: "400px" }} placeholder="年月日" displayFormat="YYYY年MM月DD日" max="2050-05-05" min="2002-02-02"/>
-      &nbsp; {state.date?.join(',')}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.week} multiple panel="week" style={{ width: "400px" }} placeholder="周"/>
-      <DatePicker v-model={state.week} multiple panel="week" style={{ width: "400px" }} placeholder="周" displayFormat="gggg年，第ww周"/>
-      <DatePicker v-model={state.week} multiple panel="week" style={{ width: "400px" }} placeholder="周" displayFormat="gggg年，第ww周" max="2050-05-09" min="2002-02-04"/>
-      &nbsp; {state.week?.join(',')}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.quarter} multiple panel="quarter" style={{ width: "400px" }} placeholder="季度"/>
-      <DatePicker v-model={state.quarter} multiple panel="quarter" style={{ width: "400px" }} placeholder="季度" displayFormat="YYYY年，第Q季度"/>
-      <DatePicker v-model={state.quarter} multiple panel="quarter" style={{ width: "400px" }} placeholder="季度" displayFormat="YYYY年，第Q季度" max="2050-07" min="2002-04"/>
-      &nbsp; {state.quarter?.join(',')}
-    </DemoRow>
-  );
-});
-
-
-export const demoMultipleArrayString = designPage(() => {
-
-  const state = reactive({
-    year: [] as any[],
-    month: [] as any[],
-    date: [] as any[],
-    week: [] as any[],
-    quarter: [] as any[],
-    datetime: [] as any[],
-  });
-
-  return () => (
-    <DemoRow title="multiple render(arraystring)">
-      <DatePicker v-model={state.year} valueType="arraystring" multiple panel="year" style={{ width: "400px" }} placeholder="年"/>
-      <DatePicker v-model={state.year} valueType="arraystring" multiple panel="year" style={{ width: "400px" }} placeholder="年" displayFormat="YYYY年"/>
-      <DatePicker v-model={state.year} valueType="arraystring" multiple panel="year" style={{ width: "400px" }} placeholder="年" displayFormat="YYYY年" max="2050" min="2002"/>
-      &nbsp; {JSON.stringify(state.year)}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.month} valueType="arraystring" multiple panel="month" style={{ width: "400px" }} placeholder="年月"/>
-      <DatePicker v-model={state.month} valueType="arraystring" multiple panel="month" style={{ width: "400px" }} placeholder="年月" displayFormat="YYYY年MM月"/>
-      <DatePicker v-model={state.month} valueType="arraystring" multiple panel="month" style={{ width: "400px" }} placeholder="年月" displayFormat="YYYY年MM月" max="2050-05" min="2002-02"/>
-      &nbsp; {JSON.stringify(state.month)}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.date} valueType="arraystring" multiple panel="date" style={{ width: "400px" }} placeholder="年月日"/>
-      <DatePicker v-model={state.date} valueType="arraystring" multiple panel="date" style={{ width: "400px" }} placeholder="年月日" displayFormat="YYYY年MM月DD日"/>
-      <DatePicker v-model={state.date} valueType="arraystring" multiple panel="date" style={{ width: "400px" }} placeholder="年月日" displayFormat="YYYY年MM月DD日" max="2050-05-05" min="2002-02-02"/>
-      &nbsp; {JSON.stringify(state.date)}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.week} valueType="arraystring" multiple panel="week" style={{ width: "400px" }} placeholder="周"/>
-      <DatePicker v-model={state.week} valueType="arraystring" multiple panel="week" style={{ width: "400px" }} placeholder="周" displayFormat="gggg年，第ww周"/>
-      <DatePicker v-model={state.week} valueType="arraystring" multiple panel="week" style={{ width: "400px" }} placeholder="周" displayFormat="gggg年，第ww周" max="2050-05-09" min="2002-02-04"/>
-      &nbsp; {JSON.stringify(state.week)}
-      <br/>
-      <br/>
-      <DatePicker v-model={state.quarter} valueType="arraystring" multiple panel="quarter" style={{ width: "400px" }} placeholder="季度"/>
-      <DatePicker v-model={state.quarter} valueType="arraystring" multiple panel="quarter" style={{ width: "400px" }} placeholder="季度" displayFormat="YYYY年，第Q季度"/>
-      <DatePicker v-model={state.quarter} valueType="arraystring" multiple panel="quarter" style={{ width: "400px" }} placeholder="季度" displayFormat="YYYY年，第Q季度" max="2050-07" min="2002-04"/>
-      &nbsp; {JSON.stringify(state.quarter)}
-    </DemoRow>
-  );
-});
-
-
-export const demoFoot = designPage(() => {
-  const state = reactive({
-    date: null as any,
-    start: null as any,
-    end: null as any,
-  });
-
-  const setDate = (dateNum: number) => {
-    const today = DatePicker.plainDate.today('YYYY-MM-DD', 'YYYY-MM-DD');
-    state.date = today.useMonthDate(today.month, today.date + dateNum).getValue();
-  };
-
-  const setDatetime = (dateNum: number) => {
-    const today = DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
-    state.start = today.useMonthDate(today.month, today.date + dateNum).useHms([0, 0, 0]).getValue();
-    state.end = today.useMonthDate(today.month, today.date + dateNum).useHms([23, 59, 59]).getValue();
-  };
-
-  return () => (
-    <DemoRow title="额外内容">
-      <DatePicker v-model={state.date} style={{ width: "200px" }}>
-        {{
-          foot: () => <>
-            <Button mode="text" size="mini" label="昨天" onClick={() => setDate(-1)}/>
-            <Button mode="text" size="mini" label="今天" onClick={() => setDate(0)}/>
-            <Button mode="text" size="mini" label="明天" onClick={() => setDate(1)}/>
-          </>,
-        }}
-      </DatePicker>
-      <DatePicker v-model:start={state.start} v-model:end={state.end} range datetime style={{ width: "400px" }}>
-        {{
-          foot: () => <>
-            <Button mode="text" size="mini" label="昨天" onClick={() => setDatetime(-1)}/>
-            <Button mode="text" size="mini" label="今天" onClick={() => setDatetime(0)}/>
-            <Button mode="text" size="mini" label="明天" onClick={() => setDatetime(1)}/>
-          </>,
-        }}
-      </DatePicker>
-
-    </DemoRow>
-  );
-});
-
-export const demoDisabledItem = designPage(() => {
-  const state = reactive({
-    date: null as any,
-  });
-
-  const isItemDisabled = (pd: PDate, jdView: string) => {
-    if (jdView !== 'YMD') {return false;}
-    const today = DatePicker.plainDate.today('YYYY-MM-DD', 'YYY-MM-DD');
-    if (today.YMD > pd.YMD) {return true;}
-    return false;
-  };
-
-  return () => (
-    <DemoRow title="自定义禁用">
-      <p>小于今天的日期都不可选</p>
-      <DatePicker style={{ width: '200px' }} v-model={state.date} isItemDisabled={isItemDisabled}/>
-    </DemoRow>
-  );
-});
-
-
-export const demoDynamicDisabled = designPage(() => {
-  const state = reactive({
-    start: null as any,
-    end: null as any,
-    useDateData: null as null | UseDateType,
-  });
-
-  const isItemDisabled = (pd: PDate) => {
-    if (!state.useDateData) {return false;}
-    if (!!state.useDateData.state.range.value) {
-      const [spd, epd] = state.useDateData.state.range.value;
-      if (spd.YMD === epd.YMD) {
-        if (Math.abs(pd.YMD - spd.YMD) >= 7) {return true;}
-      }
-    }
-    return false;
-  };
-
-  return () => (
-    <DemoRow title="动态控制可选范围">
-      <p>时间范围不能超过7天</p>
-      <DatePicker style={{ width: '400px' }} range v-model:start={state.start} v-model:end={state.end} isItemDisabled={isItemDisabled} onReady={val => state.useDateData = val}/>
-    </DemoRow>
-  );
-});
-
-
-export const demoCustomReference = designPage(() => {
-
-  const state = reactive({
-    date: null as any,
-    dates: [] as any[],
-    start: null as any,
-    end: null as any,
-  });
-
-  return () => (
-    <DemoRow title="自定义触发元素">
-      <DatePicker v-model={state.date}>
-        <Button label={state.date || '选择日期'}/>
-      </DatePicker>
-      <DatePicker v-model={state.dates} multiple>
-        <Button label={state.dates.join(',') || '选择多个日期'}/>
-      </DatePicker>
-      <DatePicker v-model:start={state.start} v-model:end={state.end} range>
-        <Button label={[state.start, state.end].filter(Boolean).join(',') || '选择日期范围'}/>
-      </DatePicker>
-    </DemoRow>
-  );
-
-});
-
-export const demoCustomInputAttrs = designPage(() => {
-
-  const state = reactive({
-    dates: [] as any[],
-  });
-
-  return () => (
-    <DemoRow title="设置Input属性">
-      <DatePicker v-model={state.dates} multiple inputAttrs={{ tagsWrap: true, width: '300px' }}/>
-    </DemoRow>
-  );
-
-});