plain-design 1.0.0-beta.73 → 1.0.0-beta.75

package/src/packages/components/FormToggle/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import Toggle from "../Toggle";
-
-export const FormToggle = createFormEditor(Toggle);
-
-export default FormToggle;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Toggle from "../Toggle";
+
+export const FormToggle = createFormEditor(Toggle);
+
+export default FormToggle;

package/src/packages/components/Formatter/index.tsx

@@ -1,64 +1,64 @@
-import i18n from "../i18n";
-
-export const Formatter: Record<string, undefined | ((...args: any[]) => string | number | null | undefined)> = {
-  /**
-   * 格式化电话号码
-   * @author  韦胜健
-   * @date    2022.12.3 10:18
-   */
-  tel: (value: string | number | null | undefined) => {
-    if (value == null) {return value;}
-    value = String(value).trim();
-    if (value.length >= 11) {
-      const charList = value.split('');
-      const part1 = charList.splice(0, 3);
-      const part2 = charList.splice(0, 4);
-      const part3 = charList.splice(0, 4);
-      return [part1.join(''), part2.join(''), part3.join('')].join(' ');
-    } else {
-      return value;
-    }
-  },
-  /**
-   * 格式化为整数
-   * @author  韦胜健
-   * @date    2022.12.3 11:04
-   */
-  int: (value: string | number | null | undefined) => {
-    if (value == null) {return value;}
-    return parseInt(String(value));
-  },
-  /**
-   * 金额格式化
-   * @author  韦胜健
-   * @date    2022.12.3 20:01
-   */
-  money: (value: string | number | null | undefined) => {
-    if (!value) {return 0;}
-    value = Number(value);
-    if (isNaN(value)) {value = 0;}
-    value = parseFloat(String(value)).toFixed(2);
-    return String(value).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
-  },
-  /**
-   * 人民币格式化
-   * @author  韦胜健
-   * @date    2022.12.3 19:59
-   */
-  cny: (value: string | number | null | undefined) => {
-    if (value == null || value === 0) {return `¥0`;}
-    value = Number(value);
-    if (isNaN(value)) {return i18n.$it('base.invalidAmount').d('无效金额');}
-    return `¥ ${Formatter.money!(value)}`;
-  },
-  /**
-   * 百分比数值显示
-   * @author  韦胜健
-   * @date    2022.12.3 20:05
-   */
-  percent: (value: string | number | null | undefined) => {
-    if (value == null) {return null;}
-    if (isNaN(Number(value))) {return null;}
-    return (parseFloat(String(value)) * 100).toFixed(2) + '%';
-  },
-};
+import i18n from "../i18n";
+
+export const Formatter: Record<string, undefined | ((...args: any[]) => string | number | null | undefined)> = {
+  /**
+   * 格式化电话号码
+   * @author  韦胜健
+   * @date    2022.12.3 10:18
+   */
+  tel: (value: string | number | null | undefined) => {
+    if (value == null) {return value;}
+    value = String(value).trim();
+    if (value.length >= 11) {
+      const charList = value.split('');
+      const part1 = charList.splice(0, 3);
+      const part2 = charList.splice(0, 4);
+      const part3 = charList.splice(0, 4);
+      return [part1.join(''), part2.join(''), part3.join('')].join(' ');
+    } else {
+      return value;
+    }
+  },
+  /**
+   * 格式化为整数
+   * @author  韦胜健
+   * @date    2022.12.3 11:04
+   */
+  int: (value: string | number | null | undefined) => {
+    if (value == null) {return value;}
+    return parseInt(String(value));
+  },
+  /**
+   * 金额格式化
+   * @author  韦胜健
+   * @date    2022.12.3 20:01
+   */
+  money: (value: string | number | null | undefined) => {
+    if (!value) {return 0;}
+    value = Number(value);
+    if (isNaN(value)) {value = 0;}
+    value = parseFloat(String(value)).toFixed(2);
+    return String(value).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
+  },
+  /**
+   * 人民币格式化
+   * @author  韦胜健
+   * @date    2022.12.3 19:59
+   */
+  cny: (value: string | number | null | undefined) => {
+    if (value == null || value === 0) {return `¥0`;}
+    value = Number(value);
+    if (isNaN(value)) {return i18n.$it('base.invalidAmount').d('无效金额');}
+    return `¥ ${Formatter.money!(value)}`;
+  },
+  /**
+   * 百分比数值显示
+   * @author  韦胜健
+   * @date    2022.12.3 20:05
+   */
+  percent: (value: string | number | null | undefined) => {
+    if (value == null) {return null;}
+    if (isNaN(Number(value))) {return null;}
+    return (parseFloat(String(value)) * 100).toFixed(2) + '%';
+  },
+};

package/src/packages/components/Grid/GridCol.tsx

@@ -1,72 +1,73 @@
-import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {GridColSize} from "./grid.utils";
-import GridRow from "./GridRow";
-
-export const GridCol = designComponent({
-  name: 'grid-col',
-  props: {
-    span: { type: [Number, String] as PropType<string | number> },
-    order: { type: [Number, String] as PropType<string | number> },
-    offset: { type: [Number, String] as PropType<string | number> },
-    push: { type: [Number, String] as PropType<string | number> },
-    pull: { type: [Number, String] as PropType<string | number> },
-    className: String,
-    xs: { type: [Number, Object] as PropType<GridColSize> },
-    sm: { type: [Number, Object] as PropType<GridColSize> },
-    md: { type: [Number, Object] as PropType<GridColSize> },
-    lg: { type: [Number, Object] as PropType<GridColSize> },
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const row = GridRow.use.inject();
-    const classes = useClasses(() => {
-      let classList = [
-        getComponentCls('grid-col'),
-        {
-          [`grid-col-span-${props.span}`]: props.span,
-          [`grid-col-order-${props.order}`]: props.order,
-          [`grid-col-offset-${props.offset}`]: props.offset,
-          [`grid-col-push-${props.push}`]: props.push,
-          [`grid-col-pull-${props.pull}`]: props.pull,
-          [`${props.className}`]: !!props.className
-        }
-      ] as SingleClass[];
-
-      const sizeProps = props;
-      (['xs', 'sm', 'md', 'lg'] as ['xs', 'sm', 'md', 'lg']).forEach(size => {
-        if (typeof sizeProps[size] === 'number') {
-          classList.push(`grid-col-${size}-${sizeProps[size]}`);
-        } else if (typeof sizeProps[size] === 'object') {
-          let obj = sizeProps[size];
-          !!obj && Object.entries(obj).forEach(([key, val]) => classList.push(key !== 'span' ? `grid-col-${size}-${key}-${val}` : `grid-col-span-${size}-${val}`));
-        }
-      });
-      return classList;
-    });
-    const styles = useStyles(style => {
-      if ((Number(row.props.gutter)) !== 0) {
-        style = {
-          paddingLeft: (Number(row.props.gutter)) / 2 + 'px',
-          paddingRight: (Number(row.props.gutter)) / 2 + 'px'
-        };
-      }
-      return style;
-    });
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} style={styles.value} ref={onRef.el}>
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-export default GridCol;
+import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {GridColSize} from "./grid.utils";
+import GridRow from "./GridRow";
+
+export const GridCol = designComponent({
+  name: 'grid-col',
+  props: {
+    span: { type: [Number, String] as PropType<string | number> },
+    order: { type: [Number, String] as PropType<string | number> },
+    offset: { type: [Number, String] as PropType<string | number> },
+    push: { type: [Number, String] as PropType<string | number> },
+    pull: { type: [Number, String] as PropType<string | number> },
+    className: String,
+    xs: { type: [Number, Object] as PropType<GridColSize> },
+    sm: { type: [Number, Object] as PropType<GridColSize> },
+    md: { type: [Number, Object] as PropType<GridColSize> },
+    lg: { type: [Number, Object] as PropType<GridColSize> },
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const row = GridRow.use.inject();
+    const classes = useClasses(() => {
+      let classList = [
+        getComponentCls('grid-col'),
+        {
+          [`grid-col-span-${props.span}`]: props.span,
+          [`grid-col-order-${props.order}`]: props.order,
+          [`grid-col-offset-${props.offset}`]: props.offset,
+          [`grid-col-push-${props.push}`]: props.push,
+          [`grid-col-pull-${props.pull}`]: props.pull,
+          [`${props.className}`]: !!props.className
+        }
+      ] as SingleClass[];
+
+      const sizeProps = props;
+      (['xs', 'sm', 'md', 'lg'] as ['xs', 'sm', 'md', 'lg']).forEach(size => {
+        if (typeof sizeProps[size] === 'number') {
+          classList.push(`grid-col-${size}-${sizeProps[size]}`);
+        } else if (typeof sizeProps[size] === 'object') {
+          let obj = sizeProps[size];
+          !!obj && Object.entries(obj).forEach(([key, val]) => classList.push(key !== 'span' ? `grid-col-${size}-${key}-${val}` : `grid-col-span-${size}-${val}`));
+        }
+      });
+      return classList;
+    });
+    const styles = useStyles(style => {
+      const gutter = row.getColGutter();
+      if (!!gutter) {
+        style = {
+          paddingLeft: (gutter) / 2 + 'px',
+          paddingRight: (gutter) / 2 + 'px'
+        };
+      }
+      return style;
+    });
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default GridCol;

package/src/packages/components/Grid/GridRow.tsx

@@ -1,55 +1,91 @@
-import {designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {eGridAlign, eGridJustify} from "./grid.utils";
-import {unit} from 'plain-utils/string/unit';
-import {removeUnit} from 'plain-utils/string/removeUnit';
-import './grid.scss';
-
-export const GridRow = designComponent({
-  name: 'grid-row',
-  props: {
-    type: { type: String as PropType<undefined | null | string> },        //类型,type
-    align: { type: String as PropType<keyof typeof eGridAlign> },         //对其方式,left|center|right
-    justify: { type: String as PropType<keyof typeof eGridJustify> },     //内容弹性布局方式,start,end,center,space-around,space-between
-    gutter: { type: [Number, String], default: 0 },                       //间隔
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['default'],
-  provideRefer: true,
-  setup({ props, slots }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const classes = useClasses(() => [
-      getComponentCls('grid-row'),
-      {
-        [`grid-row-${props.type}`]: !!props.type,
-        [`grid-row-${props.type}-${props.align}`]: !!props.align,
-        [`grid-row-${props.type}-${props.justify}`]: !!props.justify,
-      }
-    ]);
-    const styles = useStyles(style => {
-      const gutter = Number(props.gutter);
-      if (gutter !== 0) {
-        style = {
-          width: `calc(100% + ${unit(props.gutter)})`,
-          marginLeft: `-${unit(Number(removeUnit(props.gutter)) / 2)}`
-        };
-      }
-      return style;
-    });
-    // console.log(styles.value)
-
-    return {
-      refer: {
-        props,
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} style={styles.value} ref={onRef.el}>
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-export default GridRow;
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {eGridAlign, eGridJustify} from "./grid.utils";
+import {unit} from 'plain-utils/string/unit';
+import {removeUnit} from 'plain-utils/string/removeUnit';
+import './grid.scss';
+import {ThemeSize, useStyle} from "../../uses/useStyle";
+import {ApplicationConfigurationProvider} from "../ApplicationConfigurationProvider";
+
+export const GridRow = designComponent({
+  name: 'grid-row',
+  props: {
+    type: { type: String as PropType<undefined | null | string> },        //类型,type
+    align: { type: String as PropType<keyof typeof eGridAlign> },         //对其方式,left|center|right
+    justify: { type: String as PropType<keyof typeof eGridJustify> },     //内容弹性布局方式,start,end,center,space-around,space-between
+    gutter: { type: [Number, String], default: 0 },                       //列间隔
+    rowGutter: { type: [Number, String] },                                //行间隔
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  provideRefer: true,
+  setup({ props, slots }) {
+
+    const configuration = ApplicationConfigurationProvider.inject();
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const { styleComputed } = useStyle();
+
+    const formatGutter = (gutter: string | number | undefined): number | undefined => {
+      if (!gutter) {return undefined;}
+      if (typeof gutter === "string") {
+        if (gutter === 'default') {
+          gutter = styleComputed.value.size;
+        }
+        const varName = `margin-${gutter}`;
+        if (varName in configuration.value.theme.vars) {
+          // @ts-ignore
+          const varValue = configuration.value.theme.vars[varName];
+          return Number(removeUnit(varValue));
+        }
+      }
+      return Number(removeUnit(gutter));
+    };
+
+    const colGutter = computed(() => formatGutter(props.gutter));
+    const rowGutter = computed(() => formatGutter(props.rowGutter));
+
+    const classes = useClasses(() => [
+      getComponentCls('grid-row'),
+      {
+        [`grid-row-${props.type}`]: !!props.type,
+        [`grid-row-${props.type}-${props.align}`]: !!props.align,
+        [`grid-row-${props.type}-${props.justify}`]: !!props.justify,
+      }
+    ]);
+    const styles = useStyles(style => {
+
+      const gutter = colGutter.value;
+      if (!!gutter) {
+        style = {
+          width: `calc(100% + ${unit(gutter)})`,
+          marginLeft: `-${unit(gutter / 2)}`
+        };
+      }
+
+      if (rowGutter.value) {
+        if (ThemeSize.LIST.indexOf(rowGutter.value as any) == -1) {
+          style.marginBottom = unit(rowGutter.value);
+        }
+      }
+      return style;
+    });
+    // console.log(styles.value)
+
+    return {
+      refer: {
+        props,
+        refs,
+        getColGutter: () => colGutter.value,
+        getRowGutter: () => rowGutter.value,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default GridRow;

package/src/packages/components/Grid/grid.scss

@@ -1,109 +1,109 @@
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-$screen-xl: 1920px;
-$cell-num: 24;
-$flexs: (
-  start:(justify-content:flex-start),
-  center:(justify-content:center),
-  end:(justify-content:flex-end),
-  space-between:(justify-content:space-between),
-  space-around:(justify-content:space-around),
-  top:(align-items:flex-start),
-  middle:(align-items:center),
-  bottom:(align-items:flex-end),
-);
-$screens: (
-  xs:(max-width:$screen-sm),
-  sm:(min-width:$screen-sm),
-  md:(min-width:$screen-md),
-  lg:(min-width:$screen-lg),
-  xl:(min-width:$screen-xl),
-);
-
-@mixin res($key, $map: $screens) {
-  // 循环断点Map，如果存在则返回
-  @if map-has-key($map, $key) {
-    @media only screen and #{inspect(map-get($map, $key))} {
-      @content;
-    }
-  } @else {
-    @warn "Undefeined points: `#{$map}`";
-  }
-}
-
-@include prefix(grid-row) {
-  height: auto;
-  position: relative;
-  margin-right: 0 !important;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  &:not(:last-child) {
-    margin-bottom: 16px;
-  }
-
-  &, & * {
-    box-sizing: border-box;
-  }
-
-  /*flex布局*/
-  &:before,
-  &:after {
-    display: flex;
-  }
-
-  /*flex布局*/
-  @each $flexType, $flexValue in $flexs {
-    &.grid-row-flex-#{$flexType} {
-      @each $key, $value in $flexValue {
-        #{$key}: #{$value}
-      }
-    }
-  }
-
-  /*响应式*/
-  @include prefix(grid-col) {
-    display: block;
-    float: left;
-
-    @for $i from 1 through $cell-num {
-      &.grid-col-span-#{$i} {
-        width: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-offset-#{$i} {
-        margin-left: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-pull-#{$i} {
-        position: relative;
-        right: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-push-#{$i} {
-        position: relative;
-        left: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-order-#{$i} {
-        order: $i;
-      }
-    }
-
-    @each $size, $px in $screens {
-      @include res(inspect($size)) {
-        @for $i from 1 through $cell-num {
-          &.grid-col-#{$size}-#{$i} {
-            width: (1 / $cell-num * $i * 100) * 1%;
-          }
-        }
-      }
-    }
-  }
-}
-
-@each $size, $px in $screens {
-  @include res(inspect($size)) {
-    .hidden-#{$size}-only {
-      display: none;
-    }
-  }
-}
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-xl: 1920px;
+$cell-num: 24;
+$flexs: (
+  start:(justify-content:flex-start),
+  center:(justify-content:center),
+  end:(justify-content:flex-end),
+  space-between:(justify-content:space-between),
+  space-around:(justify-content:space-around),
+  top:(align-items:flex-start),
+  middle:(align-items:center),
+  bottom:(align-items:flex-end),
+);
+$screens: (
+  xs:(max-width:$screen-sm),
+  sm:(min-width:$screen-sm),
+  md:(min-width:$screen-md),
+  lg:(min-width:$screen-lg),
+  xl:(min-width:$screen-xl),
+);
+
+@mixin res($key, $map: $screens) {
+  // 循环断点Map，如果存在则返回
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
+}
+
+@include prefix(grid-row) {
+  height: auto;
+  position: relative;
+  margin-right: 0 !important;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  &, & * {
+    box-sizing: border-box;
+  }
+
+  /*flex布局*/
+  &:before,
+  &:after {
+    display: flex;
+  }
+
+  /*flex布局*/
+  @each $flexType, $flexValue in $flexs {
+    &.grid-row-flex-#{$flexType} {
+      @each $key, $value in $flexValue {
+        #{$key}: #{$value}
+      }
+    }
+  }
+
+  /*响应式*/
+  @include prefix(grid-col) {
+    display: block;
+    float: left;
+
+    @for $i from 1 through $cell-num {
+      &.grid-col-span-#{$i} {
+        width: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-offset-#{$i} {
+        margin-left: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-pull-#{$i} {
+        position: relative;
+        right: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-push-#{$i} {
+        position: relative;
+        left: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-order-#{$i} {
+        order: $i;
+      }
+    }
+
+    @each $size, $px in $screens {
+      @include res(inspect($size)) {
+        @for $i from 1 through $cell-num {
+          &.grid-col-#{$size}-#{$i} {
+            width: (1 / $cell-num * $i * 100) * 1%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@each $size, $px in $screens {
+  @include res(inspect($size)) {
+    .hidden-#{$size}-only {
+      display: none;
+    }
+  }
+}