plain-design 1.0.0-beta.71 → 1.0.0-beta.72

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

@@ -1,205 +1,205 @@
-import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "plain-design-composition";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {CheckboxStatus} from "../../utils/constant";
-import Checkbox from "../Checkbox";
-import {useMessage} from "../useMessage";
-import {i18n} from "../../i18n";
-import {useMultipleModel} from "../../uses/useMultipleModel";
-import {createIsMatch, IsMatchPropsOption} from "../../utils/isObjectCommonMatch";
-
-export const CheckboxGroup = designComponent({
-  name: 'checkbox-group',
-  props: {
-    ...EditProps,
-    ...StyleProps,
-    ...IsMatchPropsOption,
-    modelValue: {},
-    multiple: { type: Boolean, default: true, },                  // 是否多选
-    min: { type: Number },                                        // 最大勾选个数
-    max: { type: Number },                                        // 最小勾选个数
-    itemWidth: { type: [String, Number] },                        // 文本宽度
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['default'],
-  emits: {
-    onUpdateModelValue: (val: any) => true,
-  },
-  setup({ props, slots, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const formItem = inject('@@form-item', null);
-    const { $message } = useMessage();
-    /*可编辑控制*/
-    const { editComputed } = useEdit();
-    /*样式控制*/
-    useStyle({ status: ThemeStatus.primary });
-    /*格式化属性*/
-    const { numberState } = useNumber(props, ['max', 'min']);
-    /*绑定值*/
-    const modelValue = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props) as { value: any[] };
-    /*子组件Checkbox*/
-    const children = CheckboxGroupCollector.parent();
-    /*可用子组件*/
-    const availableChildren = computed(() => children.filter(({ innerState: { props: { checkboxForAll, customReadonly } } }) => !checkboxForAll && !customReadonly));
-    /*可用子组件keys*/
-    const allKeys = computed((() => availableChildren.value.map(({ innerState: { props: { val } } }) => val)));
-    /*判断值是否相等*/
-    const isMatch = createIsMatch(props);
-
-    /*当前选择状态*/
-    const checkStatus = computed(() => {
-      let hasCheck = false;
-      let hasUncheck = false;
-      if (!modelValue.value) {
-        return CheckboxStatus.uncheck;
-      }
-      availableChildren
-        .value
-        .forEach(
-          child => modelValue.value!.findIndex(i => isMatch({ value: i, option: child.innerState.props.val })) > -1 ?
-            hasCheck = true : hasUncheck = true
-        );
-
-      if (hasCheck && !hasUncheck) {
-        return CheckboxStatus.check;
-      }
-      if (!hasCheck && hasUncheck) {
-        return CheckboxStatus.uncheck;
-      }
-      return CheckboxStatus.minus;
-    });
-
-    const utils = {
-      /**
-       * 子组件用来获取状态工具函数
-       * @author  韦胜健
-       * @date    2020/11/4 11:26
-       */
-      getCheckStatus: (checkbox: typeof Checkbox.use.class): typeof CheckboxStatus.TYPE => {
-        const { innerState: { props: { checkboxForAll, val } } } = checkbox;
-        if (checkboxForAll) {
-          return checkStatus.value;
-        } else {
-          return !!modelValue.value && modelValue.value.findIndex(i => isMatch({ value: i, option: val })) > -1 ? CheckboxStatus.check : CheckboxStatus.uncheck;
-        }
-      },
-      exceed: {
-        /**
-         * 是否已经超出了max
-         * @author  韦胜健
-         * @date    2020/11/4 11:26
-         */
-        max: (val: (string | number)[] | undefined) => {
-          if (numberState.max == null) {
-            return false;
-          }
-          return !!val && val.length > numberState.max;
-        },
-        /**
-         * 是否已经超出了min
-         * @author  韦胜健
-         * @date    2020/11/4 11:26
-         */
-        min: (val: (string | number)[] | undefined) => {
-          if (numberState.min == null) {
-            return false;
-          }
-          return !val || val.length < numberState.min;
-        }
-      },
-      changeValue: {
-        /**
-         * 添加选项赋值
-         * @author  韦胜健
-         * @date    2020/11/4 11:26
-         */
-        add: (val: (string | number)[]) => {
-          if (utils.exceed.max(val)) {
-            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
-          } else {
-            modelValue.value = val;
-          }
-        },
-        /**
-         * 删除选项赋值
-         * @author  韦胜健
-         * @date    2020/11/4 11:26
-         */
-        delete: (val: (string | number)[]) => {
-          if (utils.exceed.min(val)) {
-            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
-          } else {
-            modelValue.value = val;
-          }
-        }
-      },
-    };
-
-    const handler = {
-      /**
-       * 处理点击按钮事件
-       * @author  韦胜健
-       * @date    2020/11/4 11:27
-       */
-      clickCheckbox: (checkbox: typeof Checkbox.use.class) => {
-        if (!editComputed.value.editable) {
-          return;
-        }
-        const { innerState: { props: { val, checkboxForAll } } } = checkbox;
-
-        /*全选按钮*/
-        if (checkboxForAll) {
-          if (checkStatus.value !== CheckboxStatus.check) {
-            /*全选*/
-            utils.changeValue.add([...allKeys.value as string[]]);
-          } else {
-            /*取消全选*/
-            utils.changeValue.delete([]);
-          }
-          return;
-        }
-
-        /*单个按钮*/
-        if (val == null) {
-          throw new Error('Checkbox: val is necessary when Checkbox in CheckboxGroup');
-        }
-        if (!modelValue.value) {
-          return utils.changeValue.add([val as any]);
-        }
-        const value = [...modelValue.value];
-        const index = value.findIndex(i => isMatch({ value: i, option: val }));
-        if (index > -1) {
-          /*删除*/
-          value.splice(index, 1);
-          utils.changeValue.delete(value);
-        } else {
-          /*添加*/
-          utils.changeValue.add([...value, val]);
-        }
-      }
-    };
-
-    return {
-      refer: {
-        utils,
-        handler,
-        numberState,
-        props,
-        refs,
-      },
-      render: () => !formItem ? slots.default() : (
-        <div className={getComponentCls('checkbox-group')} ref={onRef.el}>
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-export const CheckboxGroupCollector = useCollect(() => ({
-  parent: CheckboxGroup,
-  child: Checkbox,
-}));
-
-export default CheckboxGroup;
+import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {CheckboxStatus} from "../../utils/constant";
+import Checkbox from "../Checkbox";
+import {useMessage} from "../useMessage";
+import {i18n} from "../../i18n";
+import {useMultipleModel} from "../../uses/useMultipleModel";
+import {createIsMatch, IsMatchPropsOption} from "../../utils/isObjectCommonMatch";
+
+export const CheckboxGroup = designComponent({
+  name: 'checkbox-group',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    ...IsMatchPropsOption,
+    modelValue: {},
+    multiple: { type: Boolean, default: true, },                  // 是否多选
+    min: { type: Number },                                        // 最大勾选个数
+    max: { type: Number },                                        // 最小勾选个数
+    itemWidth: { type: [String, Number] },                        // 文本宽度
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  emits: {
+    onUpdateModelValue: (val: any) => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const formItem = inject('@@form-item', null);
+    const { $message } = useMessage();
+    /*可编辑控制*/
+    const { editComputed } = useEdit();
+    /*样式控制*/
+    useStyle({ status: ThemeStatus.primary });
+    /*格式化属性*/
+    const { numberState } = useNumber(props, ['max', 'min']);
+    /*绑定值*/
+    const modelValue = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props) as { value: any[] };
+    /*子组件Checkbox*/
+    const children = CheckboxGroupCollector.parent();
+    /*可用子组件*/
+    const availableChildren = computed(() => children.filter(({ innerState: { props: { checkboxForAll, customReadonly } } }) => !checkboxForAll && !customReadonly));
+    /*可用子组件keys*/
+    const allKeys = computed((() => availableChildren.value.map(({ innerState: { props: { val } } }) => val)));
+    /*判断值是否相等*/
+    const isMatch = createIsMatch(props);
+
+    /*当前选择状态*/
+    const checkStatus = computed(() => {
+      let hasCheck = false;
+      let hasUncheck = false;
+      if (!modelValue.value) {
+        return CheckboxStatus.uncheck;
+      }
+      availableChildren
+        .value
+        .forEach(
+          child => modelValue.value!.findIndex(i => isMatch({ value: i, option: child.innerState.props.val })) > -1 ?
+            hasCheck = true : hasUncheck = true
+        );
+
+      if (hasCheck && !hasUncheck) {
+        return CheckboxStatus.check;
+      }
+      if (!hasCheck && hasUncheck) {
+        return CheckboxStatus.uncheck;
+      }
+      return CheckboxStatus.minus;
+    });
+
+    const utils = {
+      /**
+       * 子组件用来获取状态工具函数
+       * @author  韦胜健
+       * @date    2020/11/4 11:26
+       */
+      getCheckStatus: (checkbox: typeof Checkbox.use.class): typeof CheckboxStatus.TYPE => {
+        const { innerState: { props: { checkboxForAll, val } } } = checkbox;
+        if (checkboxForAll) {
+          return checkStatus.value;
+        } else {
+          return !!modelValue.value && modelValue.value.findIndex(i => isMatch({ value: i, option: val })) > -1 ? CheckboxStatus.check : CheckboxStatus.uncheck;
+        }
+      },
+      exceed: {
+        /**
+         * 是否已经超出了max
+         * @author  韦胜健
+         * @date    2020/11/4 11:26
+         */
+        max: (val: (string | number)[] | undefined) => {
+          if (numberState.max == null) {
+            return false;
+          }
+          return !!val && val.length > numberState.max;
+        },
+        /**
+         * 是否已经超出了min
+         * @author  韦胜健
+         * @date    2020/11/4 11:26
+         */
+        min: (val: (string | number)[] | undefined) => {
+          if (numberState.min == null) {
+            return false;
+          }
+          return !val || val.length < numberState.min;
+        }
+      },
+      changeValue: {
+        /**
+         * 添加选项赋值
+         * @author  韦胜健
+         * @date    2020/11/4 11:26
+         */
+        add: (val: (string | number)[]) => {
+          if (utils.exceed.max(val)) {
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
+          } else {
+            modelValue.value = val;
+          }
+        },
+        /**
+         * 删除选项赋值
+         * @author  韦胜健
+         * @date    2020/11/4 11:26
+         */
+        delete: (val: (string | number)[]) => {
+          if (utils.exceed.min(val)) {
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
+          } else {
+            modelValue.value = val;
+          }
+        }
+      },
+    };
+
+    const handler = {
+      /**
+       * 处理点击按钮事件
+       * @author  韦胜健
+       * @date    2020/11/4 11:27
+       */
+      clickCheckbox: (checkbox: typeof Checkbox.use.class) => {
+        if (!editComputed.value.editable) {
+          return;
+        }
+        const { innerState: { props: { val, checkboxForAll } } } = checkbox;
+
+        /*全选按钮*/
+        if (checkboxForAll) {
+          if (checkStatus.value !== CheckboxStatus.check) {
+            /*全选*/
+            utils.changeValue.add([...allKeys.value as string[]]);
+          } else {
+            /*取消全选*/
+            utils.changeValue.delete([]);
+          }
+          return;
+        }
+
+        /*单个按钮*/
+        if (val == null) {
+          throw new Error('Checkbox: val is necessary when Checkbox in CheckboxGroup');
+        }
+        if (!modelValue.value) {
+          return utils.changeValue.add([val as any]);
+        }
+        const value = [...modelValue.value];
+        const index = value.findIndex(i => isMatch({ value: i, option: val }));
+        if (index > -1) {
+          /*删除*/
+          value.splice(index, 1);
+          utils.changeValue.delete(value);
+        } else {
+          /*添加*/
+          utils.changeValue.add([...value, val]);
+        }
+      }
+    };
+
+    return {
+      refer: {
+        utils,
+        handler,
+        numberState,
+        props,
+        refs,
+      },
+      render: () => !formItem ? slots.default() : (
+        <div className={getComponentCls('checkbox-group')} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export const CheckboxGroupCollector = useCollect(() => ({
+  parent: CheckboxGroup,
+  child: Checkbox,
+}));
+
+export default CheckboxGroup;

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -1,55 +1,55 @@
-@include prefix(checkbox-inner) {
-  width: 1.1em;
-  height: 1.1em;
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: -0.15em;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: plv(box-size-small-border-radius);
-  //border-radius: 2px;
-
-  &.checkbox-inner-status-check {
-    border-color: currentColor;
-    background-color: currentColor;
-
-    .checkbox-inner-check-polyline {
-      fill: transparent;
-      stroke: plv(pbfc);
-      stroke-width: 10;
-    }
-  }
-
-  &.checkbox-inner-status-uncheck {
-    border-color: plv(secondary-4);
-    background-color: plv(secondary-1);
-  }
-
-  &.checkbox-inner-status-minus {
-    border-color: currentColor;
-    background-color: transparent;
-
-    .checkbox-inner-minus-polyline {
-      fill: currentColor;
-    }
-  }
-
-  &.checkbox-inner-disabled {
-
-    border-color: plv(secondary-2);
-    background-color: plv(secondary-2);
-
-    &.checkbox-inner-status-check {
-      .checkbox-inner-check-polyline {
-        stroke: plv(secondary-5);
-      }
-    }
-
-    &.checkbox-inner-status-minus {
-      .checkbox-inner-minus-polyline {
-        fill: plv(secondary-4);
-      }
-    }
-
-  }
-}
+@include prefix(checkbox-inner) {
+  width: 1.1em;
+  height: 1.1em;
+  display: inline-block;
+  box-sizing: border-box;
+  vertical-align: -0.15em;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: plv(box-size-small-border-radius);
+  //border-radius: 2px;
+
+  &.checkbox-inner-status-check {
+    border-color: currentColor;
+    background-color: currentColor;
+
+    .checkbox-inner-check-polyline {
+      fill: transparent;
+      stroke: plv(pbfc);
+      stroke-width: 10;
+    }
+  }
+
+  &.checkbox-inner-status-uncheck {
+    border-color: plv(secondary-4);
+    background-color: plv(secondary-1);
+  }
+
+  &.checkbox-inner-status-minus {
+    border-color: currentColor;
+    background-color: transparent;
+
+    .checkbox-inner-minus-polyline {
+      fill: currentColor;
+    }
+  }
+
+  &.checkbox-inner-disabled {
+
+    border-color: plv(secondary-2);
+    background-color: plv(secondary-2);
+
+    &.checkbox-inner-status-check {
+      .checkbox-inner-check-polyline {
+        stroke: plv(secondary-5);
+      }
+    }
+
+    &.checkbox-inner-status-minus {
+      .checkbox-inner-minus-polyline {
+        fill: plv(secondary-4);
+      }
+    }
+
+  }
+}

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

@@ -1,34 +1,34 @@
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
-import {CheckboxStatus} from "../../utils/constant";
-import './checkbox-inner.scss';
-import {SVGAttributes} from "react";
-
-export const CheckboxInner = designComponent({
-  name: 'checkbox-inner',
-  inheritPropsType: {} as SVGAttributes<any>,
-  props: {
-    disabled: { type: Boolean },
-    checkStatus: { type: String as PropType<typeof CheckboxStatus.TYPE> },
-  },
-  setup({ props }) {
-
-    const classes = useClasses(() => [
-      getComponentCls('checkbox-inner'),
-      `checkbox-inner-status-${props.checkStatus}`,
-      {
-        'checkbox-inner-disabled': props.disabled,
-      }
-    ]);
-
-    return {
-      render: () => (
-        <svg viewBox="0 0 100 100" className={classes.value}>
-          {props.checkStatus === CheckboxStatus.check && <polyline points="22,50 45,75 75,25" className="checkbox-inner-check-polyline"/>}
-          {props.checkStatus === CheckboxStatus.minus && <rect x="15" y="15" width="70" height="70" className="checkbox-inner-minus-polyline"/>}
-        </svg>
-      )
-    };
-  },
-});
-
-export default CheckboxInner;
+import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {CheckboxStatus} from "../../utils/constant";
+import './checkbox-inner.scss';
+import {SVGAttributes} from "react";
+
+export const CheckboxInner = designComponent({
+  name: 'checkbox-inner',
+  inheritPropsType: {} as SVGAttributes<any>,
+  props: {
+    disabled: { type: Boolean },
+    checkStatus: { type: String as PropType<typeof CheckboxStatus.TYPE> },
+  },
+  setup({ props }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('checkbox-inner'),
+      `checkbox-inner-status-${props.checkStatus}`,
+      {
+        'checkbox-inner-disabled': props.disabled,
+      }
+    ]);
+
+    return {
+      render: () => (
+        <svg viewBox="0 0 100 100" className={classes.value}>
+          {props.checkStatus === CheckboxStatus.check && <polyline points="22,50 45,75 75,25" className="checkbox-inner-check-polyline"/>}
+          {props.checkStatus === CheckboxStatus.minus && <rect x="15" y="15" width="70" height="70" className="checkbox-inner-minus-polyline"/>}
+        </svg>
+      )
+    };
+  },
+});
+
+export default CheckboxInner;

package/src/packages/components/ClientZoom/index.ts

@@ -1,5 +1,5 @@
-import {ClientZoom} from "../../utils/ClientZoom";
-
-export {ClientZoom};
-
-export default ClientZoom;
+import {ClientZoom} from "../../utils/ClientZoom";
+
+export {ClientZoom};
+
+export default ClientZoom;