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

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

@@ -1,247 +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.toLowerCase().indexOf(searchText.toLowerCase()) > -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,
-};
+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.toLowerCase().indexOf(searchText.toLowerCase()) > -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

@@ -1,30 +1,30 @@
-import {designComponent} from "plain-design-composition";
-import {createSelectOptionDecoder} from "../Select/createSelectOptionDecoder";
-import {pick} from "plain-utils/object/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;
+import {designComponent} from "plain-design-composition";
+import {createSelectOptionDecoder} from "../Select/createSelectOptionDecoder";
+import {pick} from "plain-utils/object/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/SelectGroup/index.tsx

@@ -1,37 +1,37 @@
-import {designComponent, inject, provide} from "plain-design-composition";
-import DropdownGroup from "../DropdownGroup";
-
-export const SelectGroup = designComponent({
-  name: 'select-group',
-  props: {
-    title: { type: String },
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const searchText = useSearchText.inject();
-
-    return () => {
-      return (
-        /*有搜索关键词的时候不显示分组标题*/
-        !searchText?.()?.length && (
-          <DropdownGroup>
-            {slots.default(props.title)}
-          </DropdownGroup>
-        )
-      );
-    };
-  },
-});
-
-export const useSearchText = (() => {
-  const PROVIDE_NAME = '@@SEARCH_TEXT_PROVIDER';
-  return {
-    provide: (getSearchText: () => string | null | undefined) => {
-      provide(PROVIDE_NAME, getSearchText);
-    },
-    inject: () => {
-      return inject(PROVIDE_NAME) as (() => string | null | undefined) | undefined | null;
-    },
-  };
-})();
+import {designComponent, inject, provide} from "plain-design-composition";
+import DropdownGroup from "../DropdownGroup";
+
+export const SelectGroup = designComponent({
+  name: 'select-group',
+  props: {
+    title: { type: String },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const searchText = useSearchText.inject();
+
+    return () => {
+      return (
+        /*有搜索关键词的时候不显示分组标题*/
+        !searchText?.()?.length && (
+          <DropdownGroup>
+            {slots.default(props.title)}
+          </DropdownGroup>
+        )
+      );
+    };
+  },
+});
+
+export const useSearchText = (() => {
+  const PROVIDE_NAME = '@@SEARCH_TEXT_PROVIDER';
+  return {
+    provide: (getSearchText: () => string | null | undefined) => {
+      provide(PROVIDE_NAME, getSearchText);
+    },
+    inject: () => {
+      return inject(PROVIDE_NAME) as (() => string | null | undefined) | undefined | null;
+    },
+  };
+})();