plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/packages/components/ProgressMini/progress-mini.scss

@@ -1,17 +1,17 @@
-@include prefix(progress-mini) {
-  vertical-align: middle;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-
-  svg {
-    flex-shrink: 0;
-    width: 200%;
-    height: 200%;
-  }
-
-  &.progress-mini-round {
-    border-radius: 1000px;
-  }
-}
+@include prefix(progress-mini) {
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  svg {
+    flex-shrink: 0;
+    width: 200%;
+    height: 200%;
+  }
+
+  &.progress-mini-round {
+    border-radius: 1000px;
+  }
+}

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

@@ -1,137 +1,137 @@
-import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {CheckboxStatus} from "../../utils/constant";
-import {unit} from "plain-utils/string/unit";
-import {getKey, KEY} from "../KeyboardService";
-import {useClickWave} from "../../directives/ClickWave";
-import {RadioInner} from "../RadioInner";
-import {RadioGroup} from "../RadioGroup";
-import './radio.scss';
-import Transition from "../Transition";
-
-export const Radio = designComponent({
-  name: 'radio',
-  props: {
-    ...EditProps,
-    ...StyleProps,
-
-    modelValue: {},                                               // 双向绑定值
-    val: {},                                                      // 在group中的唯一标识
-    width: { type: [String, Number] },                            // 宽度
-    trueValue: { default: true as any },                          // 真值
-    falseValue: { default: false as any },                        // 假值
-    checkStatus: { type: String as PropType<'check' | 'uncheck'> }, // 自定义选中状态
-    label: { type: String },                                      // 单选框文本
-  },
-  slots: ['labelContent'],
-  scopeSlots: {
-    default: (scope: { checked: boolean, status: 'check' | 'uncheck', click: SimpleFunction }) => {},
-  },
-  inheritPropsType: HTMLDivElement,
-  emits: {
-    onUpdateModelValue: (val: any) => true,
-    onClick: (e?: iMouseEvent) => true,
-  },
-  setup({ props, slots, scopeSlots, event: { emit } }) {
-
-    const group = RadioGroup.use.inject(null);
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const { editComputed } = useEdit();
-    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-    const checkStatus = computed(() => {
-      if (!!props.checkStatus) {
-        return props.checkStatus;
-      }
-      if (!!group) {
-        return group.utils.getCheckStatus(props.val);
-      } else {
-        return model.value === props.trueValue ? CheckboxStatus.check : CheckboxStatus.uncheck;
-      }
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('radio'),
-      `radio-status-${styleComputed.value.status}`,
-      `radio-size-${styleComputed.value.size}`,
-      {
-        'radio-checked': checkStatus.value === CheckboxStatus.check,
-        'radio-disabled': editComputed.value.disabled,
-      },
-    ]);
-
-    const styles = useStyles(style => {
-      let width: number | null | string = null;
-      if (!!props.width) {
-        width = props.width as number;
-      }
-      if (!!group && !!group.props.itemWidth) {
-        width = group.props.itemWidth;
-      }
-      if (width != null) {
-        style.width = unit(width);
-      }
-    });
-
-    const handler = {
-      click: (e?: iMouseEvent) => {
-        /*if (!!e) {
-          e.stopPropagation();
-        }*/
-        emit.onClick(e);
-        if (!editComputed.value.editable || props.customReadonly) {
-          return;
-        }
-        if (!!group) {
-          group.handler.onClickRadio(props.val);
-        } else {
-          model.value = checkStatus.value === CheckboxStatus.check ? props.falseValue : props.trueValue;
-        }
-
-        /*if (!!e) {
-          e.stopPropagation();
-          e.preventDefault();
-        }*/
-      },
-      keydown: (e: iKeyboardEvent) => {
-        if (getKey(e) === KEY.space) {
-          e.preventDefault();
-          e.stopPropagation();
-          handler.click(e as any);
-        }
-      },
-    };
-
-    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }) });
-
-    return {
-      refer: { refs },
-      render: () => {
-        return scopeSlots.default({
-          checked: checkStatus.value === CheckboxStatus.check,
-          status: checkStatus.value,
-          click: handler.click,
-        }, (
-          <div
-            ref={onRef.el}
-            className={classes.value}
-            style={styles.value}
-            tabIndex={0}
-            onClick={handler.click}
-            onKeyDown={handler.keydown}
-          >
-            <span className="plain-click-node">
-              <Transition switch name={getComponentCls('transition-fade')} mode="out-in">
-                <RadioInner checkStatus={checkStatus.value} key={checkStatus.value}/>
-              </Transition>
-            </span>
-            {(!!props.label || slots.labelContent.isExist()) && slots.labelContent(<span className="radio-label">{props.label}</span>)}
-          </div>
-        ));
-      }
-    };
-  },
-});
-
-export default Radio;
+import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {CheckboxStatus} from "../../utils/constant";
+import {unit} from "plain-utils/string/unit";
+import {getKey, KEY} from "../KeyboardService";
+import {useClickWave} from "../../directives/ClickWave";
+import {RadioInner} from "../RadioInner";
+import {RadioGroup} from "../RadioGroup";
+import './radio.scss';
+import Transition from "../Transition";
+
+export const Radio = designComponent({
+  name: 'radio',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+
+    modelValue: {},                                               // 双向绑定值
+    val: {},                                                      // 在group中的唯一标识
+    width: { type: [String, Number] },                            // 宽度
+    trueValue: { default: true as any },                          // 真值
+    falseValue: { default: false as any },                        // 假值
+    checkStatus: { type: String as PropType<'check' | 'uncheck'> }, // 自定义选中状态
+    label: { type: String },                                      // 单选框文本
+  },
+  slots: ['labelContent'],
+  scopeSlots: {
+    default: (scope: { checked: boolean, status: 'check' | 'uncheck', click: SimpleFunction }) => {},
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onUpdateModelValue: (val: any) => true,
+    onClick: (e?: iMouseEvent) => true,
+  },
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const group = RadioGroup.use.inject(null);
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const { editComputed } = useEdit();
+    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+    const checkStatus = computed(() => {
+      if (!!props.checkStatus) {
+        return props.checkStatus;
+      }
+      if (!!group) {
+        return group.utils.getCheckStatus(props.val);
+      } else {
+        return model.value === props.trueValue ? CheckboxStatus.check : CheckboxStatus.uncheck;
+      }
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('radio'),
+      `radio-status-${styleComputed.value.status}`,
+      `radio-size-${styleComputed.value.size}`,
+      {
+        'radio-checked': checkStatus.value === CheckboxStatus.check,
+        'radio-disabled': editComputed.value.disabled,
+      },
+    ]);
+
+    const styles = useStyles(style => {
+      let width: number | null | string = null;
+      if (!!props.width) {
+        width = props.width as number;
+      }
+      if (!!group && !!group.props.itemWidth) {
+        width = group.props.itemWidth;
+      }
+      if (width != null) {
+        style.width = unit(width);
+      }
+    });
+
+    const handler = {
+      click: (e?: iMouseEvent) => {
+        /*if (!!e) {
+          e.stopPropagation();
+        }*/
+        emit.onClick(e);
+        if (!editComputed.value.editable || props.customReadonly) {
+          return;
+        }
+        if (!!group) {
+          group.handler.onClickRadio(props.val);
+        } else {
+          model.value = checkStatus.value === CheckboxStatus.check ? props.falseValue : props.trueValue;
+        }
+
+        /*if (!!e) {
+          e.stopPropagation();
+          e.preventDefault();
+        }*/
+      },
+      keydown: (e: iKeyboardEvent) => {
+        if (getKey(e) === KEY.space) {
+          e.preventDefault();
+          e.stopPropagation();
+          handler.click(e as any);
+        }
+      },
+    };
+
+    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }) });
+
+    return {
+      refer: { refs },
+      render: () => {
+        return scopeSlots.default({
+          checked: checkStatus.value === CheckboxStatus.check,
+          status: checkStatus.value,
+          click: handler.click,
+        }, (
+          <div
+            ref={onRef.el}
+            className={classes.value}
+            style={styles.value}
+            tabIndex={0}
+            onClick={handler.click}
+            onKeyDown={handler.keydown}
+          >
+            <span className="plain-click-node">
+              <Transition switch name={getComponentCls('transition-fade')} mode="out-in">
+                <RadioInner checkStatus={checkStatus.value} key={checkStatus.value}/>
+              </Transition>
+            </span>
+            {(!!props.label || slots.labelContent.isExist()) && slots.labelContent(<span className="radio-label">{props.label}</span>)}
+          </div>
+        ));
+      }
+    };
+  },
+});
+
+export default Radio;

package/src/packages/components/Radio/radio.scss

@@ -1,79 +1,79 @@
-@include prefix(radio) {
-  @include public-style;
-  display: inline-block;
-  outline: none;
-  font-size: 14px;
-  cursor: pointer;
-  user-select: none;
-
-  .plain-click-node {
-    display: inline-block;
-
-    width: 1.1em;
-    height: 1.1em;
-    border-radius: 100px;
-    vertical-align: -0.1em;
-
-    @include prefix(radio-inner) {
-      transition: all 150ms linear;
-      float: left;
-      color: plv(secondary-3);
-    }
-
-    & + .radio-label {
-      margin-left: 0.5em;
-    }
-  }
-
-  .radio-label {
-    display: inline-block;
-    color: plv(text-2);
-  }
-
-  @include statusMixin(radio) {
-    .plain-click-node {
-      &:after {
-        border-color: $color-6;
-      }
-    }
-    &.radio-checked {
-      .plain-click-node {
-        color: $color-6;
-      }
-
-      @include prefix(radio-inner) {
-        color: $color-6;
-      }
-    }
-  }
-
-  @include sizeMixin(radio, (font-size)) {
-    line-height: 1.7em;
-  }
-
-  &:focus {
-    .radio-label {
-      text-decoration: underline;
-    }
-  }
-
-  &.radio-disabled {
-    cursor: not-allowed;
-    color: plv(text-4);
-
-    .radio-label {
-      color: inherit;
-    }
-
-    @include prefix(radio-inner) {
-      border-color: plv(secondary-2) !important;
-      background-color: plv(secondary-2) !important;
-      color: plv(secondary-4) !important;
-    }
-  }
-
-}
-
-@include prefix(radio-group) {
-  width: 100%;
-}
+@include prefix(radio) {
+  @include public-style;
+  display: inline-block;
+  outline: none;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+
+  .plain-click-node {
+    display: inline-block;
+
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: 100px;
+    vertical-align: -0.1em;
+
+    @include prefix(radio-inner) {
+      transition: all 150ms linear;
+      float: left;
+      color: plv(secondary-3);
+    }
+
+    & + .radio-label {
+      margin-left: 0.5em;
+    }
+  }
+
+  .radio-label {
+    display: inline-block;
+    color: plv(text-2);
+  }
+
+  @include statusMixin(radio) {
+    .plain-click-node {
+      &:after {
+        border-color: $color-6;
+      }
+    }
+    &.radio-checked {
+      .plain-click-node {
+        color: $color-6;
+      }
+
+      @include prefix(radio-inner) {
+        color: $color-6;
+      }
+    }
+  }
+
+  @include sizeMixin(radio, (font-size)) {
+    line-height: 1.7em;
+  }
+
+  &:focus {
+    .radio-label {
+      text-decoration: underline;
+    }
+  }
+
+  &.radio-disabled {
+    cursor: not-allowed;
+    color: plv(text-4);
+
+    .radio-label {
+      color: inherit;
+    }
+
+    @include prefix(radio-inner) {
+      border-color: plv(secondary-2) !important;
+      background-color: plv(secondary-2) !important;
+      color: plv(secondary-4) !important;
+    }
+  }
+
+}
+
+@include prefix(radio-group) {
+  width: 100%;
+}

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

@@ -1,62 +1,62 @@
-import {designComponent, getComponentCls, inject, useModel, useRefs} from "plain-design-composition";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {CheckboxStatus} from "../../utils/constant";
-import {createIsMatch, IsMatchPropsOption} from "../../utils/isObjectCommonMatch";
-
-export const RadioGroup = designComponent({
-  name: 'radio-group',
-  props: {
-    ...EditProps,
-    ...StyleProps,
-    ...IsMatchPropsOption,
-    modelValue: {},
-    itemWidth: { type: [String, Number] },                       // 每一个单选框的宽度
-  },
-  slots: ['default'],
-  emits: {
-    onUpdateModelValue: (val: any) => true
-  },
-  inheritPropsType: HTMLDivElement,
-  provideRefer: true,
-  setup({ props, slots, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const formItem = inject('@@form-item', null);
-
-    useEdit();
-    useStyle({ status: ThemeStatus.primary });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-    const isMatch = createIsMatch(props);
-
-    const handler = {
-      onClickRadio: (val: any) => {
-        if (utils.getCheckStatus(val) === CheckboxStatus.check) {
-          return;
-        }
-        model.value = val;
-      },
-    };
-    const utils = {
-      getCheckStatus: (val: any) => {
-        return isMatch({ value: model.value, option: val }) ? CheckboxStatus.check : CheckboxStatus.uncheck;
-      }
-    };
-
-    return {
-      refer: {
-        refs,
-        props,
-        handler,
-        utils,
-      },
-      render: () => !formItem ? slots.default() : (
-        <div className={getComponentCls('radio-group')} ref={onRef.el}>
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-export default RadioGroup;
+import {designComponent, getComponentCls, inject, useModel, useRefs} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {CheckboxStatus} from "../../utils/constant";
+import {createIsMatch, IsMatchPropsOption} from "../../utils/isObjectCommonMatch";
+
+export const RadioGroup = designComponent({
+  name: 'radio-group',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    ...IsMatchPropsOption,
+    modelValue: {},
+    itemWidth: { type: [String, Number] },                       // 每一个单选框的宽度
+  },
+  slots: ['default'],
+  emits: {
+    onUpdateModelValue: (val: any) => true
+  },
+  inheritPropsType: HTMLDivElement,
+  provideRefer: true,
+  setup({ props, slots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const formItem = inject('@@form-item', null);
+
+    useEdit();
+    useStyle({ status: ThemeStatus.primary });
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+    const isMatch = createIsMatch(props);
+
+    const handler = {
+      onClickRadio: (val: any) => {
+        if (utils.getCheckStatus(val) === CheckboxStatus.check) {
+          return;
+        }
+        model.value = val;
+      },
+    };
+    const utils = {
+      getCheckStatus: (val: any) => {
+        return isMatch({ value: model.value, option: val }) ? CheckboxStatus.check : CheckboxStatus.uncheck;
+      }
+    };
+
+    return {
+      refer: {
+        refs,
+        props,
+        handler,
+        utils,
+      },
+      render: () => !formItem ? slots.default() : (
+        <div className={getComponentCls('radio-group')} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default RadioGroup;

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

@@ -1,31 +1,31 @@
-import './radio-inner.scss';
-import {designComponent, getComponentCls, PropType, useClasses, useRefs} from "plain-design-composition";
-import {CheckboxStatus} from "../../utils/constant";
-
-export const RadioInner = designComponent({
-  name: 'radio-inner',
-  props: {
-    checkStatus: { type: String as PropType<typeof CheckboxStatus.TYPE> },                // check,uncheck
-  },
-  inheritPropsType: SVGElement,
-  setup({ props }) {
-
-    const { refs, onRef } = useRefs({ el: SVGElement });
-
-    const classes = useClasses(() => [
-      getComponentCls('radio-inner'),
-      `radio-inner-${props.checkStatus}`,
-    ]);
-
-    return {
-      refer: { refs },
-      render: () => (
-        <svg className={classes.value} viewBox="0 0 100 100" ref={onRef.el}>
-          {props.checkStatus === 'check' && <circle cx="50" cy="50" r="30"/>}
-        </svg>
-      )
-    };
-  },
-});
-
-export default RadioInner;
+import './radio-inner.scss';
+import {designComponent, getComponentCls, PropType, useClasses, useRefs} from "plain-design-composition";
+import {CheckboxStatus} from "../../utils/constant";
+
+export const RadioInner = designComponent({
+  name: 'radio-inner',
+  props: {
+    checkStatus: { type: String as PropType<typeof CheckboxStatus.TYPE> },                // check,uncheck
+  },
+  inheritPropsType: SVGElement,
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: SVGElement });
+
+    const classes = useClasses(() => [
+      getComponentCls('radio-inner'),
+      `radio-inner-${props.checkStatus}`,
+    ]);
+
+    return {
+      refer: { refs },
+      render: () => (
+        <svg className={classes.value} viewBox="0 0 100 100" ref={onRef.el}>
+          {props.checkStatus === 'check' && <circle cx="50" cy="50" r="30"/>}
+        </svg>
+      )
+    };
+  },
+});
+
+export default RadioInner;