plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/components/normal/DemoCheckbox.scss

@@ -0,0 +1,24 @@
+.demo-checkbox-row {
+  & > * {
+    margin-right: 1em;
+  }
+}
+
+.demo-checkbox-custom-item {
+  display: inline-flex;
+  height: 80px;
+  width: 80px;
+  border-radius: 4px;
+  border: solid 1px plv(border-color);
+  align-items: center;
+  justify-content: center;
+  background-color: plv(background-lite);
+  cursor: pointer;
+  user-select: none;
+  transition: all 300ms ease;
+
+  &.demo-checkbox-custom-item-active {
+    background-color: plv(primary-7);
+    color: white;
+  }
+}

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

@@ -0,0 +1,294 @@
+import {classnames, designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Button, Checkbox, CheckboxGroup} from "../../../../packages";
+import './DemoCheckbox.scss';
+import {DemoLine} from "../../Demo/DemoLine";
+
+export const demo1 = designPage(() => {
+
+  const state = reactive({ flag: null });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Checkbox v-model={state.flag} label="订阅邮件"/>
+      <br/>
+      <div>{String(state.flag)}</div>
+    </DemoRow>
+  );
+});
+
+export const demo2 = designPage(() => {
+
+  const state = reactive({ flag: true });
+
+  return () => (
+    <DemoRow title="状态">
+      <Checkbox v-model={state.flag} label="Primary" status="primary"/>
+      <Checkbox v-model={state.flag} label="Success" status="success"/>
+      <Checkbox v-model={state.flag} label="Warn" status="warn"/>
+      <Checkbox v-model={state.flag} label="Error" status="error"/>
+    </DemoRow>
+  );
+});
+export const demo3 = designPage(() => {
+
+  const state = reactive({ flag: true });
+
+  return () => (
+    <DemoRow title="禁用状态">
+      <Checkbox v-model={state.flag} label="Primary" status="primary" disabled/>
+      <Checkbox v-model={state.flag} label="Success" status="success" disabled/>
+      <Checkbox v-model={state.flag} label="Warn" status="warn" disabled/>
+      <Checkbox v-model={state.flag} label="Error" status="error" disabled/>
+      <Checkbox label="uncheck" status="primary" disabled/>
+    </DemoRow>
+  );
+});
+
+export const demo4 = designPage(() => {
+
+  const state = reactive({ flag: null });
+
+  return () => (
+    <DemoRow title="真假值">
+      <Checkbox v-model={state.flag} label="订阅邮件" trueValue="Y" falseValue="N"/>
+      <br/>
+      <div>{String(state.flag)}</div>
+    </DemoRow>
+  );
+});
+
+export const demo5 = designPage(() => {
+
+  const state = reactive({ flag: null });
+
+  return () => (
+    <DemoRow title={'大小'}>
+      <Checkbox label={'mini'} size={'mini'} v-model={state.flag}/>
+      <Checkbox label={'small'} size={'small'} v-model={state.flag}/>
+      <Checkbox label={'normal'} size={'normal'} v-model={state.flag}/>
+      <Checkbox label={'large'} size={'large'} v-model={state.flag}/>
+      <Checkbox label={'32px'} v-model={state.flag} style={{ fontSize: '32px' }}/>
+    </DemoRow>
+  );
+});
+
+export const demo6 = designPage(() => {
+
+  const state = reactive({ val: undefined });
+
+  return () => (
+    <DemoRow title={'复选框组'}>
+      <CheckboxGroup v-model={state.val}>
+        <Checkbox checkboxForAll/>
+        <Checkbox label={'标签一'} val={'tag1'}/>
+        <Checkbox label={'标签二'} val={'tag2'}/>
+        <Checkbox label={'标签三'} val={'tag3'}/>
+      </CheckboxGroup>
+      {String(state.val)}
+    </DemoRow>
+  );
+});
+export const demo7 = designPage(() => {
+
+  const state = reactive({ val: undefined });
+
+  return () => (
+    <DemoRow title={'复选框组：自定义渲染内容'} className="demo-checkbox-row">
+      <CheckboxGroup v-model={state.val}>
+        <Checkbox checkboxForAll v-slots={{
+          default: ({ status, click }) => (
+            <div onClick={click} className={classnames(
+              ['demo-checkbox-custom-item', { 'demo-checkbox-custom-item-active': status === 'check' }]
+            )}>
+              {({
+                check: '以全选',
+                uncheck: '未选中',
+                minus: '半选',
+              })[status]}
+            </div>
+          )
+        }}/>
+        {['tag1', 'tag2', 'tag3'].map(tag => (
+          <Checkbox val={tag} key={tag} v-slots={{
+            default: ({ checked, click }) => (
+              <div
+                onClick={click}
+                className={classnames(
+                  [
+                    'demo-checkbox-custom-item',
+                    { 'demo-checkbox-custom-item-active': checked },
+                  ]
+                )}>
+                {tag}
+              </div>
+            )
+          }}/>
+        ))}
+      </CheckboxGroup>
+    </DemoRow>
+  );
+});
+
+
+export const demo8 = designPage(() => {
+
+  const state = reactive({ val: ['tag1', 'tag2'] });
+
+  return () => (
+    <DemoRow title={'复选框组：状态大小'}>
+      <DemoLine>
+        <Button label="mini button" size="mini" style={{ width: '180px' }}/>
+        <CheckboxGroup v-model={state.val} status={'primary'} size="mini">
+          <Checkbox checkboxForAll/>
+          <Checkbox label={'标签一'} val={'tag1'}/>
+          <Checkbox label={'标签二'} val={'tag2'}/>
+          <Checkbox label={'标签三'} val={'tag3'}/>
+        </CheckboxGroup>
+      </DemoLine>
+      <DemoLine>
+        <Button label="small button" size="small" style={{ width: '180px' }}/>
+        <CheckboxGroup v-model={state.val} status={'success'} size="small">
+          <Checkbox checkboxForAll/>
+          <Checkbox label={'标签一'} val={'tag1'}/>
+          <Checkbox label={'标签二'} val={'tag2'}/>
+          <Checkbox label={'标签三'} val={'tag3'}/>
+        </CheckboxGroup>
+      </DemoLine>
+      <DemoLine>
+        <Button label="normal button" size="normal" style={{ width: '180px' }}/>
+        <CheckboxGroup v-model={state.val} status={'warn'} size="normal">
+          <Checkbox checkboxForAll/>
+          <Checkbox label={'标签一'} val={'tag1'}/>
+          <Checkbox label={'标签二'} val={'tag2'}/>
+          <Checkbox label={'标签三'} val={'tag3'}/>
+        </CheckboxGroup>
+      </DemoLine>
+      <DemoLine>
+        <Button size="large" label="large button" style={{ width: '180px' }}/>
+        <CheckboxGroup v-model={state.val} status={'error'} size={'large'}>
+          <Checkbox checkboxForAll/>
+          <Checkbox label={'标签一'} val={'tag1'}/>
+          <Checkbox label={'标签二'} val={'tag2'}/>
+          <Checkbox label={'标签三'} val={'tag3'}/>
+        </CheckboxGroup>
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+
+export const demo9 = designPage(() => {
+  return () => (
+    <DemoRow title={'复选框组：禁用以及只读'}>
+      <CheckboxGroup disabled modelValue={['tag1', 'tag2']}>
+        <Checkbox checkboxForAll/>
+        <Checkbox label={'标签一'} val={'tag1'}/>
+        <Checkbox label={'标签二'} val={'tag2'}/>
+        <Checkbox label={'标签三'} val={'tag3'}/>
+      </CheckboxGroup>
+      <br/>
+      <br/>
+      <CheckboxGroup readonly modelValue={['tag1', 'tag2']}>
+        <Checkbox checkboxForAll/>
+        <Checkbox label={'标签一'} val={'tag1'}/>
+        <Checkbox label={'标签二'} val={'tag2'}/>
+        <Checkbox label={'标签三'} val={'tag3'}/>
+      </CheckboxGroup>
+    </DemoRow>
+  );
+});
+
+export const demo10 = designPage(() => {
+
+  const state = reactive({ val: undefined });
+
+  return () => (
+    <DemoRow title={'复选框组：最大最小勾选个数(全选会勾选最大可勾选个数)'}>
+      <CheckboxGroup v-model={state.val} max={2} min={1}>
+        <Checkbox checkboxForAll/>
+        <Checkbox label={'标签一'} val={'tag1'}/>
+        <Checkbox label={'标签二'} val={'tag2'}/>
+        <Checkbox label={'标签三'} val={'tag3'}/>
+      </CheckboxGroup>
+      {String(state.val)}
+    </DemoRow>
+  );
+});
+
+export const demo11 = designPage(() => {
+
+  const state = reactive({ val: undefined });
+
+  return () => (
+    <DemoRow title={'复选框组：设置选项宽度使其对其'}>
+      <div style={{ width: '300px' }}>
+        <CheckboxGroup v-model={state.val} itemWidth="50%">
+          <Checkbox checkboxForAll/>
+          <Checkbox label={'标签一'} val={'tag1'}/>
+          <Checkbox label={'标签二'} val={'tag2'}/>
+          <Checkbox label={'标签三'} val={'tag3'}/>
+        </CheckboxGroup>
+        {JSON.stringify(state.val)}
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demo12 = designPage(() => {
+
+  const state = reactive({ val: undefined });
+
+  return () => (
+    <DemoRow title={'复选框组：arraystring'}>
+      <div style={{ width: '300px' }}>
+        <CheckboxGroup v-model={state.val} valueType="arraystring" itemWidth="50%">
+          <Checkbox checkboxForAll/>
+          <Checkbox label={'标签一'} val={'tag1'}/>
+          <Checkbox label={'标签二'} val={'tag2'}/>
+          <Checkbox label={'标签三'} val={'tag3'}/>
+        </CheckboxGroup>
+        {JSON.stringify(state.val)}
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demo13 = designPage(() => {
+
+  const options = [
+    { name: '支付宝', code: 'alipay', version: '1' },
+    { name: '微信支付', code: 'wechat_pay', version: '1' },
+    { name: '财付通', code: 'qq_pay', version: '1' },
+    { name: '快支付', code: 'fast_pay', version: '1' },
+    { name: '云闪付', code: 'cloud_pay', version: '1' },
+    { name: '网银支付', code: 'net_pay', version: '1' },
+    { name: '快捷支付', code: 'convince_pay', version: '1' },
+    { name: 'paypal', code: 'paypal', version: '1' },
+  ] as any[];
+
+  const state = reactive({
+    val: [
+      { name: '支付宝', code: 'alipay', version: '2' },
+      { name: '微信支付', code: 'wechat_pay', version: '2' },
+    ] as any[],
+  });
+
+  const isMatch = ({ value, option }: any) => !!value && !!option && (value.code == option.code);
+
+  return () => (
+    <DemoRow title={'复选框组：绑定值为对象'}>
+      <div style={{ width: '300px' }}>
+        <CheckboxGroup v-model={state.val} itemWidth="50%" isMatch={isMatch}>
+          <Checkbox checkboxForAll/>
+          {options.map((option) => (
+            <Checkbox label={option.name} val={option} key={option.code}/>
+          ))}
+        </CheckboxGroup>
+        <div>{JSON.stringify(state.val)}</div>
+      </div>
+    </DemoRow>
+  );
+});

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

@@ -0,0 +1,104 @@
+import {designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Collapse, CollapseGroup, Icon} from "../../../../packages";
+
+export default designPage(() => {
+
+  const val = reactive({
+    val: {} as any
+  }).val;
+
+  return () => (
+    <div>
+      <DemoRow title={'Collapse：基本用法'}>
+        <Collapse title={'前端工程师'}>
+          <div>
+            <p>前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色；</p>
+            <p>从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题；</p>
+            <p>从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。</p>
+          </div>
+        </Collapse>
+      </DemoRow>
+      <DemoRow title={'Collapse:自定义标题'}>
+        <Collapse>
+          {{
+            default: () => <>
+              <div>
+                <p>前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色；</p>
+                <p>从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题；</p>
+                <p>从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。</p>
+              </div>
+            </>,
+            head: () => <>
+              <div style={{ lineHeight: '1.5715' }}>
+                <span>前端工程师</span>
+                <Icon icon={'pi-info-circle-fill'} style={{ marginLeft: '4px' }}/>
+              </div>
+            </>
+          }}
+        </Collapse>
+      </DemoRow>
+      <DemoRow title={'CollapseGroup：基本用法'}>
+        <CollapseGroup>
+          <Collapse title={'专家方向'}>
+            <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
+            <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
+            <p>走专家路线可能是大多数技术人的选择；</p>
+          </Collapse>
+          <Collapse title={'管理方向'}>
+            <p>另一个职业方向就是技术管理；</p>
+            <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
+            <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
+            <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
+          </Collapse>
+          <Collapse title={'产品&业务方向'}>
+            <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
+            <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
+            <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
+          </Collapse>
+        </CollapseGroup>
+      </DemoRow>
+
+      <DemoRow title={'CollapseGroup：限制展开的个数'}>
+        <p>{JSON.stringify(val[2] || [])}</p>
+        <CollapseGroup v-model={val[2]} style={{ marginBottom: '20px' }} limit={2}>
+          <Collapse title={'专家方向'}>
+            <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
+            <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
+            <p>走专家路线可能是大多数技术人的选择；</p>
+          </Collapse>
+          <Collapse title={'管理方向'}>
+            <p>另一个职业方向就是技术管理；</p>
+            <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
+            <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
+            <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
+          </Collapse>
+          <Collapse title={'产品&业务方向'}>
+            <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
+            <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
+            <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
+          </Collapse>
+        </CollapseGroup>
+        <p>禁用的 CollapseGroup</p>
+        <CollapseGroup v-model={val[2]} disabled>
+          <Collapse title={'专家方向'}>
+            <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
+            <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
+            <p>走专家路线可能是大多数技术人的选择；</p>
+          </Collapse>
+          <Collapse title={'管理方向'}>
+            <p>另一个职业方向就是技术管理；</p>
+            <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
+            <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
+            <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
+          </Collapse>
+          <Collapse title={'产品&业务方向'}>
+            <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
+            <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
+            <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
+          </Collapse>
+        </CollapseGroup>
+      </DemoRow>
+    </div>
+  );
+});

package/src/pages/index/components/normal/DemoColor.scss

@@ -0,0 +1,20 @@
+.demo-color-palette-container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  & > div {
+    padding: 16px 18px;
+    font-size: 12px;
+  }
+
+  .text {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    padding: 16px 18px;
+  }
+}

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

@@ -0,0 +1,82 @@
+import './DemoColor.scss';
+import {computed, designPage, getComponentCls, getComponentPrefix, reactive} from "plain-design-composition";
+import {$message, ApplicationConfigurationProvider, Button, ColorPicker} from "../../../../packages";
+import {copyToClipboard} from 'plain-utils/dom/copyToClipboard';
+import {ThemeColorNum} from "../../../../packages/components/Application/theme/theme.utils";
+import {DemoRow} from "../../Demo/DemoRow";
+import {buildColor} from "../../../../packages/utils/color.utils";
+import {BaseColors} from "../../../../packages/components/Application/theme/theme";
+
+export const demoGenerate = designPage(() => {
+
+  const configuration = ApplicationConfigurationProvider.inject();
+
+  const defaultColor = '#888888';
+
+  const state = reactive({
+    text: defaultColor,
+    color: defaultColor,
+  });
+
+  const colors = computed(() => {
+    // return new Array(10).fill(null).map((_, i) => (configuration.value.theme.dark ? darken : lighter)(state.color, i));
+    return buildColor({
+      color: state.text,
+      isDark: configuration.value.theme.dark
+    });
+  });
+
+  const generateColor = () => {
+    if (!state.text) {
+      return $message.warn('请输入颜色！');
+    }
+    state.color = state.text;
+  };
+
+  return () => (
+    <DemoRow title="颜色生成器">
+      <ColorPicker v-model={state.text} width="200px"/>
+      <Button label="生成" onClick={generateColor}/>
+      <div className="demo-color-palette-container">
+        {colors.value.map((color, index) => {
+          return (
+            <div key={color} style={{ backgroundColor: color, color: index >= colors.value.length / 2 || configuration.value.theme.dark ? 'white' || 'black' : 'black' || 'white', position: 'relative' }}>
+              <span onClick={() => copyToClipboard(color)}>{color}</span>
+              <span className="text" style={{ color }}>{color}</span>
+            </div>
+          );
+        })}
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demo1 = designPage(() => {
+
+  const configuration = ApplicationConfigurationProvider.inject();
+
+  const renderPalette = (baseColorName: string, arr: Readonly<any[]>, options?: { prevColor?: string, lastColor?: string }) => (
+    <div className="demo-color-palette-container" key={baseColorName}>
+      {arr.map((index) => {
+        const varName = `${baseColorName}-${index}`;
+        const varFullName = `${getComponentPrefix()}-${varName}`;
+        const value = (configuration.value.theme.vars as any)[varName];
+        return (
+          <div key={index} style={{ backgroundColor: `var(--${varFullName})`, color: index > 6 ? options?.prevColor || `var(--${getComponentCls('gray-1')})` : options?.lastColor || `var(--${getComponentCls('gray-10')})` }}>
+            <span onClick={() => copyToClipboard(value)}>{value}</span>
+            <span onClick={() => copyToClipboard(varFullName)}>{varFullName}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return () => <>
+    <DemoRow title="以下为可用的css变量颜色">
+      {Object.keys(BaseColors).map((baseColorName) => renderPalette(baseColorName, ThemeColorNum))}
+      {Object.keys(BaseColors).map((baseColorName) => renderPalette(`${baseColorName}-light`, ThemeColorNum))}
+      {renderPalette('text', [4, 3, 2, 1], { lastColor: 'white' })}
+    </DemoRow>
+
+  </>;
+});