plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,85 @@
+import {designComponent, getComponentCls, reactive, useClasses} from "plain-design-composition";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {createSingleSelectRender} from "./createSingleSelectRender";
+import {createMultipleSelectRender} from "./createMultipleSelectRender";
+import {iSelectCompositionParams, SelectEmitsOption, SelectPropOptions, SelectScopeSlotsOption, SelectSlotsOption, useSelectHook} from "./select.utils";
+import './select.scss';
+import {useEdit} from "../../uses/useEdit";
+import {useStyle} from "../../uses/useStyle";
+import {createIsMatch} from "../../utils/isObjectCommonMatch";
+import Input from "../Input";
+import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
+import {useParentPopupId} from "../usePopup/utils/popup.utils";
+
+export const Select = designComponent({
+  name: '-select',
+  props: SelectPropOptions,
+  emits: SelectEmitsOption,
+  slots: SelectSlotsOption,
+  scopeSlots: SelectScopeSlotsOption,
+  inheritPropsType: Input,
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const parentPopupId = useParentPopupId();
+
+    const { editComputed } = useEdit();
+    const { styleComputed } = useStyle();
+
+    const hooks = useSelectHook();
+
+    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({
+      offset: 2,
+      noArrow: true,
+      sizeEqual: true,
+      animation: 'drop',
+      noPadding: true,
+      popperSize: styleComputed.value.size,
+      ...((props.popperAttrs as any) || {}),
+      externalClass: [getComponentCls('select-popup'), (props.popperAttrs as any)?.externalClass],
+      parentId: parentPopupId,
+    }));
+
+    const isPopperShow = (() => {
+      const state = reactive({ value: false });
+      hooks.onPopperShow.use(() => {state.value = true;});
+      hooks.onPopperHide.use(() => {state.value = false;});
+      return state;
+    })();
+
+    const classes = useClasses(() => [
+      getComponentCls('select'),
+      {
+        [`select-popper-show`]: isPopperShow.value
+      }
+    ]);
+
+    const selectCompositionParams: iSelectCompositionParams = {
+      props,
+      classes,
+      hooks,
+      emit,
+      slots,
+      scopeSlots,
+      editComputed,
+      styleComputed,
+      isMatch: createIsMatch(props),
+      getPublicPopperAttrs,
+    };
+
+    const methods = {
+      show: () => {hooks.onTriggerShow.exec(undefined);},
+      hide: () => {hooks.onTriggerHide.exec(undefined);},
+    };
+
+    useWatchAutoClear(() => props.multiple, multiple => {
+      return multiple ? createMultipleSelectRender(selectCompositionParams) : createSingleSelectRender(selectCompositionParams);
+    });
+
+    return {
+      refer: {
+        methods,
+      },
+      render: () => hooks.renderInput.exec(null),
+    };
+  },
+});

package/src/packages/components/Select/select.scss

@@ -0,0 +1,101 @@
+.#{componentName(popup-item)}.#{componentName(select-popup)} {
+  .popup-item-content {
+    overflow-y: hidden;
+  }
+
+  .select-option {
+    justify-content: space-between;
+
+    .check-icon {
+      color: inherit;
+      margin-right: 0;
+    }
+
+    &:not(.select-option-hover) {
+      background-color: initial !important;
+    }
+
+    .hover-icon {
+      display: inline-flex;
+      width: 1em;
+      height: 1em;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.5em;
+      opacity: 0;
+
+      &:after {
+        display: inline-block;
+        content: '';
+        width: 4px;
+        height: 4px;
+        border-radius: 4px;
+        background-color: currentColor;
+        opacity: 0.5;
+      }
+    }
+
+    &.select-option-hover {
+      .hover-icon {
+        opacity: 1;
+      }
+    }
+
+    @include hover(select-option) {
+      background-color: plv(background-hover) !important;
+    }
+
+    &.select-option-activated {
+      background-color: plv(primary-light-2) !important;
+      color: plv(primary-6);
+      @include prefix(icon) {
+        color: inherit;
+      }
+    }
+  }
+
+  .select-panel-no-data, .select-panel-no-match, .select-panel-loading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 0;
+    font-size: 12px;
+    color: plv(text-3);
+
+    .#{componentName(icon)}, .#{componentName(loading)} {
+      margin-bottom: 4px;
+      font-size: 2em;
+    }
+  }
+
+  &.popup-item-dark-app {
+    .select-option.select-option-activated {
+      color: plv(primary-9);
+    }
+  }
+}
+
+@include comp(select) {
+  &.select-popper-show {
+    .input-suffix-icon {
+      transition: none;
+      transform-origin: center;
+      transform: rotateX(-180deg);
+    }
+  }
+}
+
+@include prefix(dropdown-panel) {
+  @include sizeMixin(dropdown-panel, ()) {
+    &.select-panel-multiple {
+      .select-panel-header {
+        padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
+        border-bottom: solid 1px plv(border-color);
+        @include comp(button) {
+          margin-right: #{plv(dropdown-size-#{$name}-padding-y)};
+        }
+      }
+    }
+  }
+}

package/src/packages/components/Select/select.utils.tsx

@@ -0,0 +1,247 @@
+import {ComponentEvent, createSyncHooks, ExtractPropTypes, PropType, reactive, RenderNode, tScopeSlotsType, tSlotsType} from "plain-design-composition";
+import {EditProps, tEditComputed} from "../../uses/useEdit";
+import {StyleProps, ThemeSize} from "../../uses/useStyle";
+import {Scroll} from "../Scroll";
+import {PlainObject} from "plain-utils/utils/event";
+import {iIsMatch, IsMatchPropsOption} from "../../utils/isObjectCommonMatch";
+
+/**
+ * 是否匹配搜索关键字判断函数类型
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export interface iIsMatchSearch {
+  (searchText: string, optionProps: iSelectOptionProps): boolean;
+}
+
+/**
+ * SelectPanel额外属性定义
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export const SelectPanelOptionPropOptions = {
+  size: StyleProps.size,                                                  // 大小尺寸
+  optionAlign: { type: String },                                          // 每个option的对其方式
+  searchText: { type: String },                                           // 当前搜索关键字
+  isMatchSearch: { type: Function as PropType<iIsMatchSearch> },          // 判断是否匹配搜索结果函数
+  multiple: { type: Boolean },                                            // 是否多选
+  disableAutoSetOptionIndex: { type: Boolean },                           // 禁用自动给SelectOption设置props.index索引
+  noMatchLabel: { type: String },                                         // 筛选无匹配的时候展示文本
+  noDataLabel: { type: String },                                          // 没有选项的时候展示文本
+  handleCheckAll: { type: Function as PropType<(options: iSelectOptionProps[]) => void> }, // 手动处理全选
+  handleUncheckAll: { type: Function as PropType<(options: iSelectOptionProps[]) => void> }, // 手动处理清空
+  handleCheckReverse: { type: Function as PropType<(options: iSelectOptionProps[]) => void> }, // 手动处理反选
+} as const;
+
+/**
+ * Select属性定义
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export const SelectPropOptions = {
+  ...EditProps,
+  ...StyleProps,
+  ...IsMatchPropsOption,
+  modelValue: {},
+
+  disableFilter: { type: Boolean },         // 是否可以输入筛选
+  inputAttrs: { type: Object as PropType<PlainObject> },// Input组件额外属性
+  inputSlots: { type: Object as PropType<Record<string, any>> },// Input组件的插槽
+  popperAttrs: {},                          // Popper组件额外属性
+  noClear: { type: Boolean },               // Popper组件额外属性
+  suffixIcon: { type: String, default: 'pi-down' },// Popper组件额外属性
+  handleFilterChange: { type: Function as PropType<(text: string) => void> },// 手动处理搜索值变化
+
+  scrollNum: { type: Number, default: 6 },  // 最多显示的下拉个数，超过这个数就会滚动展示
+  scrollHeight: { type: Number, default: 150 },// 滚动展示下拉选项的时候的高度
+
+  virtualData: { type: Array as PropType<iSelectOptionProps[]> },
+  virtualRowSize: { type: Number },// 虚拟滚动的时候的行高
+
+  ...SelectPanelOptionPropOptions,
+} as const;
+
+/**
+ * Select属性类型
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export type iSelectProps = ExtractPropTypes<typeof SelectPropOptions>
+
+/**
+ * SelectOption属性定义
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export const SelectOptionPropOptions = {
+  label: { type: String },
+  val: {},
+  icon: { type: String },
+  disabled: { type: Boolean },
+  index: { type: Number },
+  data: { type: Object as PropType<PlainObject> },
+} as const;
+
+/**
+ * SelectOption属性类型
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+type _iSelectOptionProps = Readonly<ExtractPropTypes<typeof SelectOptionPropOptions>>
+export type iSelectOptionProps = Partial<{ -readonly [k in keyof _iSelectOptionProps]: _iSelectOptionProps[k] }>
+
+/**
+ * Select hooks内部公共钩子函数
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export function useSelectHook() {
+  return {
+    renderInput: createSyncHooks<(content: RenderNode) => void>(),
+    onPopperClose: createSyncHooks<() => void>(),
+    onPopperShow: createSyncHooks<() => void>(),
+    onPopperHide: createSyncHooks<() => void>(),
+    onInputTextChange: createSyncHooks<(val: any) => void>(),
+    onInputClear: createSyncHooks<() => void>(),
+    onTriggerShow: createSyncHooks<() => void>(),
+    onTriggerHide: createSyncHooks<() => void>(),
+  };
+}
+
+export const SelectEmitsOption = {
+  onUpdateModelValue: (val?: any) => true,
+  onBlur: (e: FocusEvent) => true,
+  onFocus: (e: FocusEvent) => true,
+} as const;
+
+export const SelectSlotsOption = ['default', 'noData', 'noMatch', 'loadingContent'] as const;
+
+export const SelectScopeSlotsOption = {
+  reference: (scope: { checked: iSelectOptionProps | iSelectOptionProps[] | null | undefined }) => null,
+} as const;
+
+/**
+ * Select内部组合函数公共参数类型
+ * @author  韦胜健
+ * @date    2022/7/25 10:52
+ */
+export type iSelectCompositionParams = {
+  props: iSelectProps,
+  hooks: ReturnType<typeof useSelectHook>,
+  isMatch: iIsMatch,
+  emit: ComponentEvent<typeof SelectEmitsOption>["emit"],
+  getPublicPopperAttrs: () => any,
+  slots: tSlotsType<typeof SelectSlotsOption>,
+  scopeSlots: tScopeSlotsType<typeof SelectScopeSlotsOption>,
+  editComputed: tEditComputed,
+  styleComputed: { value: { size: typeof ThemeSize.TYPE } },
+  classes: { value: any, }
+}
+
+/**
+ * Select内部工具对象
+ * @author  韦胜健
+ * @date    2022/7/25 10:53
+ */
+export const SelectUtils = {
+  isMatchSearch: (searchText: string | null | undefined, optionProps: iSelectOptionProps, props: { isMatchSearch?: iIsMatchSearch }) => {
+    if (searchText == null) {
+      return true;
+    }
+    if (!!props.isMatchSearch) {
+      return props.isMatchSearch(searchText, optionProps);
+    }
+    return !!optionProps.label && optionProps.label.indexOf(searchText) > -1;
+  },
+};
+
+export function createSelectHover(
+  {
+    defaultCurrent,
+    refs,
+    scrollHeight,
+    getMatchOptionsLength,
+  }: {
+    defaultCurrent?: number,
+    refs: { scroll: typeof Scroll.use.class | null | undefined },
+    scrollHeight: () => number,
+    getMatchOptionsLength: () => number,
+  }
+) {
+  /*当前hover的index*/
+  const state = reactive({ current: defaultCurrent as undefined | number, });
+  const resetCurrent = () => state.current = defaultCurrent;
+
+  /*上下移动的时候，令滚动到目标位置*/
+  const scrollToOption = () => {
+    if (!refs.scroll) {
+      return;
+    }
+
+    /**
+     * 找到目标option的dom元素
+     * - 如果当前scrollTop已经大于option的offsetTop，则滚动到option的offsetTop
+     * - 如果当前scrollTop以及小于option的bottom，则滚动到option的bottom
+     * @author  韦胜健
+     * @date    2022/8/8 20:00
+     */
+    const optionEl = refs.scroll.refs.wrapper?.querySelector(`[data-sdi="${state.current}"]`) as HTMLElement;
+    if (optionEl != null) {
+      let top: number;
+      top = optionEl.offsetTop;
+      if (refs.scroll.refs.wrapper!.scrollTop > top) {
+        refs.scroll.methods.scrollTop(top);
+      }
+      top = optionEl.offsetTop - (scrollHeight() - optionEl.offsetHeight);
+      if (refs.scroll.refs.wrapper!.scrollTop < top) {
+        refs.scroll.methods.scrollTop(top);
+      }
+    }
+  };
+
+  /*hover上一个option*/
+  const prev = () => {
+    if (state.current == null) {
+      /*如果没有hover的元素，则hover最后一个元素*/
+      state.current = getMatchOptionsLength() - 1;
+    } else {
+      if (state.current === 0) {
+        /*如果当前hover元素为第一个元素，则hover最后一个元素*/
+        state.current = getMatchOptionsLength() - 1;
+      } else {
+        /*否则hover上一个元素*/
+        state.current--;
+      }
+    }
+    scrollToOption();
+  };
+
+  /*hover下一个option*/
+  const next = () => {
+    /*如果没有hover的元素，则hover第一个元素*/
+    if (state.current == null) {
+      state.current = 0;
+    } else {
+      if (state.current === getMatchOptionsLength() - 1) {
+        /*如果当前hover为最后一个元素，则hover第一个元素*/
+        state.current = 0;
+      } else {
+        /*否则hover下一个元素*/
+        state.current++;
+      }
+    }
+    scrollToOption();
+  };
+  /*enter某个option的时候，令这个option为hover的元素*/
+  const onEnterOption = (props: iSelectOptionProps) => {
+    state.current = props.index!;
+  };
+  return { state, prev, next, onEnterOption, resetCurrent };
+}
+
+export const SelectDefaultVirtualRowSize: Record<typeof ThemeSize.TYPE, number> = {
+  [ThemeSize.mini]: 27,
+  [ThemeSize.small]: 31,
+  [ThemeSize.normal]: 34,
+  [ThemeSize.large]: 34,
+};

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

@@ -0,0 +1,30 @@
+import {designComponent} from "plain-design-composition";
+import {createSelectOptionDecoder} from "../Select/createSelectOptionDecoder";
+import {pick} from "../../utils/pick";
+import {EditProps} from "../../uses/useEdit";
+import {useMultipleModel} from "../../uses/useMultipleModel";
+import {toArray} from "plain-utils/utils/toArray";
+
+export const SelectDisplay = designComponent({
+  name: 'select-display',
+  props: {
+    modelValue: {},
+    ...pick(EditProps, ['valueType', 'multiple']),
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const model = useMultipleModel(() => props.modelValue, () => {}, props);
+    const selectOptionDecoder = createSelectOptionDecoder();
+
+    return () => {
+      if (model.value == null) {return null;}
+      selectOptionDecoder.decode(slots.default());
+      return toArray(model.value).map(val => {
+        return selectOptionDecoder.options.find(i => i.props.val === val)?.props.label;
+      }).join(',');
+    };
+  },
+});
+
+export default SelectDisplay;

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

@@ -0,0 +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 },
+        })
+      );
+    };
+  },
+});

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

@@ -0,0 +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;