plain-design 1.0.0-beta.8 → 1.0.0-beta.80

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

@@ -1,72 +1,72 @@
-import {designComponent} from "plain-design-composition";
-import {renderDropdownOption} from "../Dropdown/dropdown.utils";
-import {SelectPanel} from "../Select/SelectPanel";
-import {SelectOptionPropOptions, SelectUtils} from "../Select/select.utils";
-import {Icon} from "../Icon";
-import {classnames} from "plain-utils/dom/classnames";
-
-export const SelectOption = designComponent({
-  name: 'select-option',
-  props: SelectOptionPropOptions,
-  emits: {
-    onClick: (e: MouseEvent) => true,
-    onMouseenter: (e: MouseEvent) => true,
-  },
-  slots: ['default'],
-  setup({ props, slots, event: { emit } }) {
-
-    const selectPanel = SelectPanel.use.inject();
-
-    const handler = {
-      onClick: (e: MouseEvent) => {
-        selectPanel.handler.onClickOption(props, e);
-        emit.onClick(e);
-      },
-      onMouseenter: (e: MouseEvent) => {
-        selectPanel.handler.onEnterOption(props, e);
-        emit.onMouseenter(e);
-      },
-    };
-
-    return () => {
-      /*不匹配搜索关键字的话就不渲染*/
-      if (!SelectUtils.isMatchSearch(selectPanel.props.searchText, props, selectPanel.props)) {
-        return null;
-      }
-      /*当前是否hover*/
-      const isHover = props.index === selectPanel.props.current;
-      /*当前是否已经选中*/
-      const isActivated = Boolean(selectPanel.props.isActivated?.(props));
-      return (
-        renderDropdownOption({
-          disabled: props.disabled,
-          externalClass: classnames([
-            'select-option',
-            {
-              'select-option-hover': isHover,
-              'select-option-activated': isActivated,
-            },
-          ]),
-          content: <>
-            <span>
-              {!!props.icon && <Icon icon={props.icon}/>}
-              {slots.default(props.label)}
-            </span>
-            {selectPanel.props.multiple && <>
-              {isActivated ?
-                <Icon
-                  className="check-icon"
-                  icon="pi-check"
-                />
-                :
-                null
-              }
-            </>}
-            {/*[{props.index}]*/}
-          </>,
-          attrs: { onClick: handler.onClick, onMouseEnter: handler.onMouseenter, ['data-sdi']: props.index },
-        })
-      );
-    };
-  },
-});
+import {designComponent} from "plain-design-composition";
+import {renderDropdownOption} from "../Dropdown/dropdown.utils";
+import {SelectPanel} from "../Select/SelectPanel";
+import {SelectOptionPropOptions, SelectUtils} from "../Select/select.utils";
+import {Icon} from "../Icon";
+import {classnames} from "plain-utils/dom/classnames";
+
+export const SelectOption = designComponent({
+  name: 'select-option',
+  props: SelectOptionPropOptions,
+  emits: {
+    onClick: (e: MouseEvent) => true,
+    onMouseenter: (e: MouseEvent) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const selectPanel = SelectPanel.use.inject();
+
+    const handler = {
+      onClick: (e: MouseEvent) => {
+        selectPanel.handler.onClickOption(props, e);
+        emit.onClick(e);
+      },
+      onMouseenter: (e: MouseEvent) => {
+        selectPanel.handler.onEnterOption(props, e);
+        emit.onMouseenter(e);
+      },
+    };
+
+    return () => {
+      /*不匹配搜索关键字的话就不渲染*/
+      if (!SelectUtils.isMatchSearch(selectPanel.props.searchText, props, selectPanel.props)) {
+        return null;
+      }
+      /*当前是否hover*/
+      const isHover = props.index === selectPanel.props.current;
+      /*当前是否已经选中*/
+      const isActivated = Boolean(selectPanel.props.isActivated?.(props));
+      return (
+        renderDropdownOption({
+          disabled: props.disabled,
+          externalClass: classnames([
+            'select-option',
+            {
+              'select-option-hover': isHover,
+              'select-option-activated': isActivated,
+            },
+          ]),
+          content: <>
+            <span>
+              {!!props.icon && <Icon icon={props.icon}/>}
+              {slots.default(props.label)}
+            </span>
+            {selectPanel.props.multiple && <>
+              {isActivated ?
+                <Icon
+                  className="check-icon"
+                  icon="pi-check"
+                />
+                :
+                null
+              }
+            </>}
+            {/*[{props.index}]*/}
+          </>,
+          attrs: { onClick: handler.onClick, onMouseEnter: handler.onMouseenter, ['data-sdi']: props.index },
+        })
+      );
+    };
+  },
+});

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

@@ -1,123 +1,123 @@
-import {computed, designComponent, Fragment, getComponentCls, reactive, useClasses, useMounted, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import './slider.scss';
-import {useEdit} from "../../uses/useEdit";
-import {ThemeStatus, useStyle} from "../../uses/useStyle";
-import {createSliderHooks, createSliderUtils, iSliderPublicParams, SliderEmitsOption, SliderPropsOption} from "./slider.utils";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {useSliderRange} from "./useSlider.range";
-import {useSliderSingle} from "./useSlider.single";
-import {doNothing} from "../../utils/doNothing";
-
-export const Slider = designComponent({
-  name: 'slider',
-  props: SliderPropsOption,
-  inheritPropsType: HTMLDivElement,
-  emits: SliderEmitsOption,
-  setup({ props, event }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement, });
-    const hooks = createSliderHooks();
-    const { editComputed } = useEdit();
-    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
-
-    /**
-     * 总长度
-     * @author  韦胜健
-     * @date    2022.12.10 11:59
-     */
-    const totalLength = ((): { value: number } => {
-      const isMounted = useMounted();
-      const innerState = reactive({ value: null as null | number });
-      return computed(() => {
-        if (!isMounted.value) return 0;
-        if (innerState.value == null) innerState.value = refs.el![!!props.vertical ? 'offsetHeight' : 'offsetWidth'];
-        return innerState.value;
-      });
-    })();
-
-    /**
-     * 内部工具函数
-     * @author  韦胜健
-     * @date    2022.12.10 12:50
-     */
-    const utils = createSliderUtils({ props, hooks, });
-
-    /**
-     * 公共组合参数
-     * @author  韦胜健
-     * @date    2022.12.10 12:50
-     */
-    const params: iSliderPublicParams = {
-      props,
-      event,
-      hooks,
-      totalLength,
-      utils,
-      editComputed,
-    };
-
-    /**
-     * 根节点类名
-     * @author  韦胜健
-     * @date    2022.12.10 12:02
-     */
-    const classes = useClasses(() => [
-      getComponentCls('slider'),
-      `slider-status-${styleComputed.value.status}`,
-      props.vertical ? 'slider-vertical' : 'slider-horizontal',
-      {
-        'slider-disabled': editComputed.value.disabled
-      },
-      ...hooks.onClasses.exec([]),
-    ]);
-
-    /**
-     * 根节点行内样式
-     * @author  韦胜健
-     * @date    2022.12.10 12:02
-     */
-    const styles = useStyles(() => ({
-      [props.vertical ? 'height' : 'width']: !!props.full ? '100%' : unit(props.width),
-      [props.vertical ? 'width' : 'height']: unit(props.size),
-    }));
-
-    /**
-     * 选择模式
-     * @author  韦胜健
-     * @date    2022.12.10 15:14
-     */
-    useWatchAutoClear(() => props.range, range => range ? useSliderRange(params) : useSliderSingle(params));
-
-    /**
-     * 分块
-     * @author  韦胜健
-     * @date    2022.12.10 15:14
-     */
-    useWatchAutoClear(() => props.step, step => {
-      return step == null ? doNothing : hooks.onCheckValue.use((value) => {
-        let length = value / props.total * totalLength.value;
-        const stepLength = totalLength.value / step;
-        const divisor = Number((length / stepLength).toFixed(0)) + 1;
-        if (length > stepLength * divisor) length = stepLength * divisor;
-        else length = stepLength * (divisor - 1);
-        return length / totalLength.value * props.total;
-      });
-    });
-
-    return {
-      refer: { refs },
-      render: () => (
-        <div className={classes.value} style={styles.value} ref={onRef.el}>
-          {hooks.onRender.exec([]).sort((a, b) => a.seq - b.seq).map(i => (
-            <Fragment key={i.key}>
-              {i.render()}
-            </Fragment>
-          ))}
-        </div>
-      )
-    };
-  },
-});
-
-export default Slider;
+import {computed, designComponent, Fragment, getComponentCls, reactive, useClasses, useMounted, useRefs, useStyles} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import './slider.scss';
+import {useEdit} from "../../uses/useEdit";
+import {ThemeStatus, useStyle} from "../../uses/useStyle";
+import {createSliderHooks, createSliderUtils, iSliderPublicParams, SliderEmitsOption, SliderPropsOption} from "./slider.utils";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {useSliderRange} from "./useSlider.range";
+import {useSliderSingle} from "./useSlider.single";
+import {doNothing} from "plain-utils/utils/doNothing";
+
+export const Slider = designComponent({
+  name: 'slider',
+  props: SliderPropsOption,
+  inheritPropsType: HTMLDivElement,
+  emits: SliderEmitsOption,
+  setup({ props, event }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement, });
+    const hooks = createSliderHooks();
+    const { editComputed } = useEdit();
+    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
+
+    /**
+     * 总长度
+     * @author  韦胜健
+     * @date    2022.12.10 11:59
+     */
+    const totalLength = ((): { value: number } => {
+      const isMounted = useMounted();
+      const innerState = reactive({ value: null as null | number });
+      return computed(() => {
+        if (!isMounted.value) return 0;
+        if (innerState.value == null) innerState.value = refs.el![!!props.vertical ? 'offsetHeight' : 'offsetWidth'];
+        return innerState.value;
+      });
+    })();
+
+    /**
+     * 内部工具函数
+     * @author  韦胜健
+     * @date    2022.12.10 12:50
+     */
+    const utils = createSliderUtils({ props, hooks, });
+
+    /**
+     * 公共组合参数
+     * @author  韦胜健
+     * @date    2022.12.10 12:50
+     */
+    const params: iSliderPublicParams = {
+      props,
+      event,
+      hooks,
+      totalLength,
+      utils,
+      editComputed,
+    };
+
+    /**
+     * 根节点类名
+     * @author  韦胜健
+     * @date    2022.12.10 12:02
+     */
+    const classes = useClasses(() => [
+      getComponentCls('slider'),
+      `slider-status-${styleComputed.value.status}`,
+      props.vertical ? 'slider-vertical' : 'slider-horizontal',
+      {
+        'slider-disabled': editComputed.value.disabled
+      },
+      ...hooks.onClasses.exec([]),
+    ]);
+
+    /**
+     * 根节点行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 12:02
+     */
+    const styles = useStyles(() => ({
+      [props.vertical ? 'height' : 'width']: !!props.full ? '100%' : unit(props.width),
+      [props.vertical ? 'width' : 'height']: unit(props.size),
+    }));
+
+    /**
+     * 选择模式
+     * @author  韦胜健
+     * @date    2022.12.10 15:14
+     */
+    useWatchAutoClear(() => props.range, range => range ? useSliderRange(params) : useSliderSingle(params));
+
+    /**
+     * 分块
+     * @author  韦胜健
+     * @date    2022.12.10 15:14
+     */
+    useWatchAutoClear(() => props.step, step => {
+      return step == null ? doNothing : hooks.onCheckValue.use((value) => {
+        let length = value / props.total * totalLength.value;
+        const stepLength = totalLength.value / step;
+        const divisor = Number((length / stepLength).toFixed(0)) + 1;
+        if (length > stepLength * divisor) length = stepLength * divisor;
+        else length = stepLength * (divisor - 1);
+        return length / totalLength.value * props.total;
+      });
+    });
+
+    return {
+      refer: { refs },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {hooks.onRender.exec([]).sort((a, b) => a.seq - b.seq).map(i => (
+            <Fragment key={i.key}>
+              {i.render()}
+            </Fragment>
+          ))}
+        </div>
+      )
+    };
+  },
+});
+
+export default Slider;

package/src/packages/components/Slider/slider.scss

@@ -1,128 +1,128 @@
-@include prefix(slider) {
-  @include public-style;
-  cursor: pointer;
-  display: inline-block;
-  position: relative;
-  background-color: plv(secondary-light-2);
-  border-radius: 100px;
-  vertical-align: 0.2em;
-
-  & > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  .slider-dot-wrapper {
-    .slider-dot {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .slider-dot-inner {
-        height: 12px;
-        width: 12px;
-        background-color: plv(background-color);
-        flex-shrink: 0;
-        border-radius: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all linear 100ms;
-
-        &:hover {
-          height: 16px;
-          width: 16px;
-          border-radius: 16px;
-        }
-      }
-
-      .slider-dot-tooltip {
-        transition: all 300ms ease;
-        opacity: 0;
-        background-color: rgba(black, 0.8);
-        color: white;
-        padding: 3px 6px;
-        line-height: initial;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: calc(100% + 16px);
-        border-radius: plv(box-size-nromal-broder-radius);
-        font-size: plv(font-size-small);
-        pointer-events: none;
-        min-width: 20px;
-        text-align: center;
-
-        &:after {
-          position: absolute;
-          content: '';
-          display: inline-block;
-          box-sizing: content-box;
-          height: 0;
-          width: 0;
-          top: 100%;
-          left: calc(50% - 4px);
-          border: solid 4px transparent;
-          border-top-color: rgba(black, 0.8);
-        }
-
-        &:hover {
-          opacity: 0.5;
-        }
-      }
-
-      &:hover {
-        .slider-dot-tooltip {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &.slider-horizontal {
-    & > div {
-      flex-direction: row;
-    }
-  }
-
-  &.slider-vertical {
-    & > div {
-      flex-direction: column;
-    }
-  }
-
-  &.slider-dragging {
-    .slider-dot-tooltip {
-      opacity: 1 !important;
-    }
-  }
-
-  @include statusMixin(slider) {
-    &:not(.slider-disabled) {
-      .slider-progress {
-        background-color: $color-6;
-      }
-
-      .slider-dot-inner {
-        border: solid 2px $color-6;
-      }
-    }
-
-    &.slider-disabled {
-      .slider-progress {
-        background-color: $color-3;
-      }
-
-      .slider-dot-inner {
-        border: solid 2px $color-3;
-      }
-    }
-  }
-}
+@include prefix(slider) {
+  @include public-style;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  background-color: plv(secondary-light-2);
+  border-radius: 100px;
+  vertical-align: 0.2em;
+
+  & > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .slider-dot-wrapper {
+    .slider-dot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .slider-dot-inner {
+        height: 12px;
+        width: 12px;
+        background-color: plv(background-color);
+        flex-shrink: 0;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all linear 100ms;
+
+        &:hover {
+          height: 16px;
+          width: 16px;
+          border-radius: 16px;
+        }
+      }
+
+      .slider-dot-tooltip {
+        transition: all 300ms ease;
+        opacity: 0;
+        background-color: rgba(black, 0.8);
+        color: #ffffff;
+        padding: 3px 6px;
+        line-height: initial;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: calc(100% + 16px);
+        border-radius: plv(box-size-nromal-broder-radius);
+        font-size: plv(font-size-small);
+        pointer-events: none;
+        min-width: 20px;
+        text-align: center;
+
+        &:after {
+          position: absolute;
+          content: '';
+          display: inline-block;
+          box-sizing: content-box;
+          height: 0;
+          width: 0;
+          top: 100%;
+          left: calc(50% - 4px);
+          border: solid 4px transparent;
+          border-top-color: rgba(black, 0.8);
+        }
+
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+
+      &:hover {
+        .slider-dot-tooltip {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &.slider-horizontal {
+    & > div {
+      flex-direction: row;
+    }
+  }
+
+  &.slider-vertical {
+    & > div {
+      flex-direction: column;
+    }
+  }
+
+  &.slider-dragging {
+    .slider-dot-tooltip {
+      opacity: 1 !important;
+    }
+  }
+
+  @include statusMixin(slider) {
+    &:not(.slider-disabled) {
+      .slider-progress {
+        background-color: $color-6;
+      }
+
+      .slider-dot-inner {
+        border: solid 2px $color-6;
+      }
+    }
+
+    &.slider-disabled {
+      .slider-progress {
+        background-color: $color-3;
+      }
+
+      .slider-dot-inner {
+        border: solid 2px $color-3;
+      }
+    }
+  }
+}