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

package/src/packages/components/CascadePanel/list/CascadeListPanelNode.tsx

@@ -1,69 +1,69 @@
-import {computed, designComponent, iHTMLDivElement, useClasses} from "plain-design-composition";
-import {iTreeNode} from "../../TreeCore/createTreeNode";
-import {Icon} from "../../Icon";
-import {Empty} from "../../Empty";
-import {CascadePanel} from "../index";
-import {CheckboxStatus} from "../../../utils/constant";
-import {Radio} from "../../Radio";
-import {Checkbox} from "../../Checkbox";
-import {Loading} from "../../Loading";
-import {CascadePanelNodePropsOption} from "../cascade-panel.utils";
-
-export const CascadeListPanelNode = designComponent({
-  name: 'cascade-panel-node',
-  inheritPropsType: iHTMLDivElement,
-  props: CascadePanelNodePropsOption,
-  scopeSlots: {
-    label: (scope: { treeNode: iTreeNode, index: number }) => {},
-  },
-  setup({ props, scopeSlots }) {
-
-    const panel = CascadePanel.use.inject();
-
-    const isChecked = computed(() => props.treeNode.checkStatus() === CheckboxStatus.check);
-
-    const classes = useClasses(() => [
-      `cascade-panel-node`,
-      {
-        'cascade-panel-node-expanded': props.treeNode.isExpanded(),
-        'cascade-panel-node-empty': props.treeNode.empty,
-        'cascade-panel-node-checked': isChecked.value,
-        'cascade-panel-node-leaf': props.treeNode.isLeaf() && !panel.props.multiple,
-      }
-    ]);
-
-    const handler = {
-      onClickRadio: () => {
-        panel.treeCore.methods.singleSelect(props.treeNode);
-      },
-      onClickCheckbox: () => {
-        panel.treeCore.methods.toggleCheck(props.treeNode);
-      },
-      onClick: () => {
-        props.handleClickNode({ treeNode: props.treeNode, index: props.index, treeNodes: props.treeNodes });
-      },
-    };
-    return () => {
-      const { checkLast } = panel.treeCore.state.singleCheckType;
-      return (
-        <div className={classes.value} onClick={handler.onClick}>
-          {props.treeNode.empty ? <Empty noData label={panel.props.noDataText}/> : <>
-            <div className="cascade-panel-node-content">
-              {!panel.props.multiple && !checkLast && <Radio modelValue={isChecked.value} customReadonly onClick={handler.onClickRadio}/>}
-              {panel.props.multiple && <Checkbox disabled={!props.treeNode.isCheckAble()} checkStatus={props.treeNode.checkStatus()} customReadonly onClick={handler.onClickCheckbox}/>}
-              {scopeSlots.label({ treeNode: props.treeNode, index: props.index }, <span>{panel.scopeSlots.default({ treeNode: props.treeNode, index: props.index }, props.treeNode.label())}</span>)}
-            </div>
-            <div className="cascade-node-arrow-container">
-              {!props.noArrow && (
-                props.treeNode.isLoading() ? (
-                    <Loading type="beta"/>
-                  ) :
-                  !props.treeNode.isLeaf() && <Icon icon="pi-right"/>
-              )}
-            </div>
-          </>}
-        </div>
-      );
-    };
-  },
-});
+import {computed, designComponent, iHTMLDivElement, useClasses} from "plain-design-composition";
+import {iTreeNode} from "../../TreeCore/createTreeNode";
+import {Icon} from "../../Icon";
+import {Empty} from "../../Empty";
+import {CascadePanel} from "../index";
+import {CheckboxStatus} from "../../../utils/constant";
+import {Radio} from "../../Radio";
+import {Checkbox} from "../../Checkbox";
+import {Loading} from "../../Loading";
+import {CascadePanelNodePropsOption} from "../cascade-panel.utils";
+
+export const CascadeListPanelNode = designComponent({
+  name: 'cascade-panel-node',
+  inheritPropsType: iHTMLDivElement,
+  props: CascadePanelNodePropsOption,
+  scopeSlots: {
+    label: (scope: { treeNode: iTreeNode, index: number }) => {},
+  },
+  setup({ props, scopeSlots }) {
+
+    const panel = CascadePanel.use.inject();
+
+    const isChecked = computed(() => props.treeNode.checkStatus() === CheckboxStatus.check);
+
+    const classes = useClasses(() => [
+      `cascade-panel-node`,
+      {
+        'cascade-panel-node-expanded': props.treeNode.isExpanded(),
+        'cascade-panel-node-empty': props.treeNode.empty,
+        'cascade-panel-node-checked': isChecked.value,
+        'cascade-panel-node-leaf': props.treeNode.isLeaf() && !panel.props.multiple,
+      }
+    ]);
+
+    const handler = {
+      onClickRadio: () => {
+        panel.treeCore.methods.singleSelect(props.treeNode);
+      },
+      onClickCheckbox: () => {
+        panel.treeCore.methods.toggleCheck(props.treeNode);
+      },
+      onClick: () => {
+        props.handleClickNode({ treeNode: props.treeNode, index: props.index, treeNodes: props.treeNodes });
+      },
+    };
+    return () => {
+      const { checkLast } = panel.treeCore.state.singleCheckType;
+      return (
+        <div className={classes.value} onClick={handler.onClick}>
+          {props.treeNode.empty ? <Empty noData label={panel.props.noDataText}/> : <>
+            <div className="cascade-panel-node-content">
+              {!panel.props.multiple && !checkLast && <Radio modelValue={isChecked.value} customReadonly onClick={handler.onClickRadio}/>}
+              {panel.props.multiple && <Checkbox disabled={!props.treeNode.isCheckAble()} checkStatus={props.treeNode.checkStatus()} customReadonly onClick={handler.onClickCheckbox}/>}
+              {scopeSlots.label({ treeNode: props.treeNode, index: props.index }, <span>{panel.scopeSlots.default({ treeNode: props.treeNode, index: props.index }, props.treeNode.label())}</span>)}
+            </div>
+            <div className="cascade-node-arrow-container">
+              {!props.noArrow && (
+                props.treeNode.isLoading() ? (
+                    <Loading type="beta"/>
+                  ) :
+                  !props.treeNode.isLeaf() && <Icon icon="pi-right"/>
+              )}
+            </div>
+          </>}
+        </div>
+      );
+    };
+  },
+});

package/src/packages/components/CascadePanel/list/createCascadeListRender.tsx

@@ -1,27 +1,27 @@
-import {unit} from "plain-utils/string/unit";
-import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
-import {CascadeListPanelItem} from "./CascadeListPanelItem";
-
-export function createCascadeListRender(
-  {
-    panels,
-    props,
-    handleClickNode,
-  }: iCascadePanelItemPublicParam
-) {
-
-  const render = () => (
-    panels.value
-      .map(({ parent, treeNodes }) => (
-        <CascadeListPanelItem
-          style={{ width: unit(props.virtual ? props.panelWidth : undefined) }}
-          key={treeNodes[0]?.id || 'empty'}
-          parent={parent}
-          treeNodes={treeNodes}
-          handleClickNode={handleClickNode}
-        />
-      ))
-  );
-
-  return { render };
-}
+import {unit} from "plain-utils/string/unit";
+import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
+import {CascadeListPanelItem} from "./CascadeListPanelItem";
+
+export function createCascadeListRender(
+  {
+    panels,
+    props,
+    handleClickNode,
+  }: iCascadePanelItemPublicParam
+) {
+
+  const render = () => (
+    panels.value
+      .map(({ parent, treeNodes }) => (
+        <CascadeListPanelItem
+          style={{ width: unit(props.virtual ? props.panelWidth : undefined) }}
+          key={treeNodes[0]?.id || 'empty'}
+          parent={parent}
+          treeNodes={treeNodes}
+          handleClickNode={handleClickNode}
+        />
+      ))
+  );
+
+  return { render };
+}

package/src/packages/components/Checkbox/checkbox.scss

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

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

@@ -1,141 +1,141 @@
-import './checkbox.scss';
-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 {useClickWave} from "../../directives/ClickWave";
-import {CheckboxInner} from "../CheckboxInner";
-import {CheckboxGroupCollector} from "../CheckboxGroup";
-import {i18n} from "../../i18n";
-import {getKey, KEY} from "../KeyboardService";
-import {Transition} from "../Transition";
-
-export const Checkbox = designComponent({
-  name: 'checkbox',
-  props: {
-    ...EditProps,
-    ...StyleProps,
-
-    modelValue: {},
-    val: {},                                                      // 多选时选中值
-    width: { type: [String, Number] },                            // 宽度
-    trueValue: { default: true as any },                          // 选中实际值
-    falseValue: { default: false as any },                        // 非选中值
-    label: { type: String },                                      // 复选框文本
-
-    checkboxForAll: { type: Boolean },                            // 是否为 checkbox 全选按钮
-    checkStatus: { type: String as PropType<typeof CheckboxStatus.TYPE> },// checkbox 自定义状态
-  },
-  emits: {
-    onUpdateModelValue: (val: any) => true,
-    onClick: (e?: iMouseEvent) => true,
-  },
-  slots: ['labelContent'],
-  inheritPropsType: HTMLDivElement,
-  scopeSlots: {
-    default: (scope: { checked: boolean, status: typeof CheckboxStatus.TYPE, click: SimpleFunction }) => {},
-  },
-  setup({ props, slots, scopeSlots, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    /*group父组件*/
-    const checkboxGroup = CheckboxGroupCollector.child({ injectDefaultValue: null });
-    /*绑定值*/
-    const modelValue = useModel(() => props.modelValue, emit.onUpdateModelValue);
-
-    /*可编辑控制*/
-    const { editComputed } = useEdit();
-    /*样式控制*/
-    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
-    /*当前组件内部变量引用*/
-    const refer = { refs, innerState: { props, editComputed } };
-    /*当前选中状态*/
-    const checkStatus = computed((): typeof CheckboxStatus.TYPE => {
-      if (!!props.checkStatus) {
-        return props.checkStatus;
-      }
-      if (!!checkboxGroup) {
-        return checkboxGroup.utils.getCheckStatus(refer);
-      } else {
-        return modelValue.value === props.trueValue ? CheckboxStatus.check : CheckboxStatus.uncheck;
-      }
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('checkbox'),
-      `checkbox-status-${styleComputed.value.status}`,
-      `checkbox-size-${styleComputed.value.size}`,
-      `checkbox-check-status-${checkStatus.value}`,
-      { 'checkbox-disabled': editComputed.value.disabled },
-    ]);
-
-    /*当前选项宽度*/
-    const targetWidth = computed(() => {
-      if (!!props.width) return props.width;
-      if (!!checkboxGroup && !!checkboxGroup.props.itemWidth) return checkboxGroup.props.itemWidth;
-      return null;
-    });
-
-    const styles = useStyles(style => {style.width = unit(targetWidth.value);});
-
-    const handler = {
-      click: (e?: iMouseEvent) => {
-        /*if (!!e) {
-          e.stopPropagation();
-        }*/
-        emit.onClick(e);
-        if (!editComputed.value.editable || props.customReadonly) {
-          return;
-        }
-        if (!!checkboxGroup) {
-          return checkboxGroup.handler.clickCheckbox(refer);
-        }
-        modelValue.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,
-      render: () => scopeSlots.default(
-        {
-          checked: checkStatus.value === CheckboxStatus.check,
-          status: checkStatus.value,
-          click: handler.click,
-        },
-        (<div
-          className={classes.value}
-          style={styles.value}
-          tabIndex={0}
-          onClick={handler.click}
-          onKeyDown={handler.keydown}
-          ref={onRef.el}>
-          <span className="plain-click-node">
-            <Transition switch name={getComponentCls("transition-fade")} mode="out-in">
-              <CheckboxInner
-                checkStatus={checkStatus.value}
-                key={checkStatus.value}
-                disabled={editComputed.value.disabled!}/>
-            </Transition>
-          </span>
-          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n('base.select.all').d('全选') : '')}</span>)}
-        </div>))
-    };
-  },
-});
-
-export default Checkbox;
+import './checkbox.scss';
+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 {useClickWave} from "../../directives/ClickWave";
+import {CheckboxInner} from "../CheckboxInner";
+import {CheckboxGroupCollector} from "../CheckboxGroup";
+import {i18n} from "../../i18n";
+import {getKey, KEY} from "../KeyboardService";
+import {Transition} from "../Transition";
+
+export const Checkbox = designComponent({
+  name: 'checkbox',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+
+    modelValue: {},
+    val: {},                                                      // 多选时选中值
+    width: { type: [String, Number] },                            // 宽度
+    trueValue: { default: true as any },                          // 选中实际值
+    falseValue: { default: false as any },                        // 非选中值
+    label: { type: String },                                      // 复选框文本
+
+    checkboxForAll: { type: Boolean },                            // 是否为 checkbox 全选按钮
+    checkStatus: { type: String as PropType<typeof CheckboxStatus.TYPE> },// checkbox 自定义状态
+  },
+  emits: {
+    onUpdateModelValue: (val: any) => true,
+    onClick: (e?: iMouseEvent) => true,
+  },
+  slots: ['labelContent'],
+  inheritPropsType: HTMLDivElement,
+  scopeSlots: {
+    default: (scope: { checked: boolean, status: typeof CheckboxStatus.TYPE, click: SimpleFunction }) => {},
+  },
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    /*group父组件*/
+    const checkboxGroup = CheckboxGroupCollector.child({ injectDefaultValue: null });
+    /*绑定值*/
+    const modelValue = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    /*可编辑控制*/
+    const { editComputed } = useEdit();
+    /*样式控制*/
+    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
+    /*当前组件内部变量引用*/
+    const refer = { refs, innerState: { props, editComputed } };
+    /*当前选中状态*/
+    const checkStatus = computed((): typeof CheckboxStatus.TYPE => {
+      if (!!props.checkStatus) {
+        return props.checkStatus;
+      }
+      if (!!checkboxGroup) {
+        return checkboxGroup.utils.getCheckStatus(refer);
+      } else {
+        return modelValue.value === props.trueValue ? CheckboxStatus.check : CheckboxStatus.uncheck;
+      }
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('checkbox'),
+      `checkbox-status-${styleComputed.value.status}`,
+      `checkbox-size-${styleComputed.value.size}`,
+      `checkbox-check-status-${checkStatus.value}`,
+      { 'checkbox-disabled': editComputed.value.disabled },
+    ]);
+
+    /*当前选项宽度*/
+    const targetWidth = computed(() => {
+      if (!!props.width) return props.width;
+      if (!!checkboxGroup && !!checkboxGroup.props.itemWidth) return checkboxGroup.props.itemWidth;
+      return null;
+    });
+
+    const styles = useStyles(style => {style.width = unit(targetWidth.value);});
+
+    const handler = {
+      click: (e?: iMouseEvent) => {
+        /*if (!!e) {
+          e.stopPropagation();
+        }*/
+        emit.onClick(e);
+        if (!editComputed.value.editable || props.customReadonly) {
+          return;
+        }
+        if (!!checkboxGroup) {
+          return checkboxGroup.handler.clickCheckbox(refer);
+        }
+        modelValue.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,
+      render: () => scopeSlots.default(
+        {
+          checked: checkStatus.value === CheckboxStatus.check,
+          status: checkStatus.value,
+          click: handler.click,
+        },
+        (<div
+          className={classes.value}
+          style={styles.value}
+          tabIndex={0}
+          onClick={handler.click}
+          onKeyDown={handler.keydown}
+          ref={onRef.el}>
+          <span className="plain-click-node">
+            <Transition switch name={getComponentCls("transition-fade")} mode="out-in">
+              <CheckboxInner
+                checkStatus={checkStatus.value}
+                key={checkStatus.value}
+                disabled={editComputed.value.disabled!}/>
+            </Transition>
+          </span>
+          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n('base.select.all').d('全选') : '')}</span>)}
+        </div>))
+    };
+  },
+});
+
+export default Checkbox;