plain-design 1.0.0-beta.99 → 3.0.1

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

@@ -1,173 +1,178 @@
-import {computed, designComponent, PropType, reactive, watch} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
-import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
-import {InputGroup} from "../InputGroup";
-import {Select} from "../Select";
-import {Button} from "../Button";
-import {FilterService} from "../FilterService";
-import {SelectOption} from "../SelectOption";
-import {incrementalMerge} from "../../utils/incrementalMerge";
-import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import i18n from "../i18n";
-
-export interface iFilterFormSingleState {
-  field: string,
-  filterHandler: string,
-  formData: PlainObject,
-}
-
-export type iFilterFormSingleData = iFilterFormSingleState & { filterQueryParam: iFilterQueryParam }
-
-export const FilterFormSingle = designComponent({
-  name: 'filter-form-single',
-  props: {
-    filterOptions: { type: Array as PropType<iFilterOption[]> },
-    initialState: { type: Object as PropType<iFilterFormSingleState> },
-    hideFieldSelector: { type: Boolean },
-    hideHandlerSelector: { type: Boolean },
-    hideSearchButton: { type: Boolean },
-    width: { type: String, default: '440px' },
-    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
-  },
-  emits: {
-    onSearch: (data: iFilterFormSingleData) => true,
-  },
-  slots: ['prepend', 'append'],
-  setup({ props, event: { emit }, slots }) {
-
-    const utils = {
-      createState: ({ defaultField, filterOptions }: { defaultField?: string, filterOptions: iFilterOption[] }): iFilterFormSingleState => {
-        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n.$it('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
-        const formData = FilterService.getDefaultFormData(filterOptions);
-        return {
-          field: defaultOption.field,
-          filterHandler: defaultOption.filterHandler,
-          formData,
-        };
-      }
-    };
-
-    const state = reactive(deepcopy(props.initialState) || utils.createState({ filterOptions: props.filterOptions || [] }));
-
-    /**
-     * 正在使用的目标filterOptions
-     * @author  韦胜健
-     * @date    2023.1.6 16:00
-     */
-    const usingFilterOption = computed((): iFilterOption => ({
-      ...(props.filterOptions || []).find(i => i.field === state.field)!,
-      filterHandler: state.filterHandler,
-    }));
-
-    /**
-     * props.filterOptions变化时更新内部状态
-     * @author  韦胜健
-     * @date    2023.1.6 15:57
-     */
-    watch(() => props.filterOptions, newFilterOptions => methods.updateFilterOptions(newFilterOptions || []));
-
-    const methods = {
-      /**
-       * 获取当前内部状态
-       * @author  韦胜健
-       * @date    2023.1.6 16:12
-       */
-      getState: (): iFilterFormSingleState => ({ ...state }),
-      /**
-       * 更新当前内部状态
-       * @author  韦胜健
-       * @date    2023.1.6 16:12
-       */
-      update: (newState: iFilterFormSingleState | null | undefined) => {
-        if (!!newState) {
-          Object.assign(state, newState);
-        } else {
-          Object.assign(state, utils.createState({ filterOptions: props.filterOptions || [] }));
-        }
-      },
-      /**
-       * 合并新的filterOptions
-       * @author  韦胜健
-       * @date    2023.1.6 15:49
-       */
-      updateFilterOptions: (filterOptions: iFilterOption[]) => {
-        const { formData, filterHandler } = utils.createState({ defaultField: state.field, filterOptions: filterOptions || [] });
-        state.formData = incrementalMerge(state.formData, formData);
-        state.filterHandler = filterHandler;
-      },
-      /**
-       * 获取查询数据
-       * @author  韦胜健
-       * @date    2023.1.6 18:32
-       */
-      getData: async () => {
-        const { field, formData, filterHandler } = state;
-        const queryParam = await FilterService.getQueryParam({ option: usingFilterOption.value, formData: state.formData });
-        const filterQueryParam = !queryParam ? {} : mergeQueryParam(queryParam, {});
-        return deepcopy({ field, formData, filterHandler, filterQueryParam });
-      },
-      /**
-       * 搜索
-       * @author  韦胜健
-       * @date    2023.1.6 12:46
-       */
-      search: async () => {
-        const data = await methods.getData();
-        emit.onSearch(data);
-        await props.handleSearch?.(data);
-      },
-    };
-
-    const handler = {
-      onUpdateField: (field: any) => {
-        const newState = utils.createState({ defaultField: field, filterOptions: props.filterOptions || [] });
-        const handler = FilterService.getHandler(usingFilterOption.value)!;
-        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
-        state.filterHandler = newState.filterHandler;
-        state.field = field;
-        // console.log({ ...state }, props.filterOptions);
-      },
-      onUpdateHandler: (filterHandler?: any) => {
-        const handler = FilterService.getHandler(usingFilterOption.value)!;
-        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
-        state.filterHandler = filterHandler;
-      },
-    };
-
-    const inputAttrs = { noClear: true };
-
-    return {
-      refer: {
-        state,
-        ...methods,
-      },
-      render: () => (
-        <InputGroup style={{ width: props.width }}>
-          {slots.prepend()}
-          {!props.hideFieldSelector && (
-            <Select width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
-              {(props.filterOptions || []).map((option) => (
-                <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
-              ))}
-            </Select>
-          )}
-          {!props.hideHandlerSelector && (
-            <Select width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
-              {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
-                <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
-              ))}
-            </Select>
-          )}
-          {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
-          {!props.hideSearchButton && (
-            <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
-          )}
-          {slots.append()}
-        </InputGroup>
-      )
-    };
-  },
-});
-
-export default FilterFormSingle;
+import {computed, designComponent, Fragment, PropType, reactive, watch} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
+import {InputGroup} from "../InputGroup";
+import {Select} from "../Select";
+import {Button} from "../Button";
+import {FilterService} from "../FilterService";
+import {SelectOption} from "../SelectOption";
+import {incrementalMerge} from "../../utils/incrementalMerge";
+import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import i18n from "../i18n";
+
+export interface iFilterFormSingleState {
+  field: string,
+  filterHandler: string,
+  formData: PlainObject,
+}
+
+export type iFilterFormSingleData = iFilterFormSingleState & { filterQueryParam: iFilterQueryParam }
+
+export const FilterFormSingle = designComponent({
+  name: 'filter-form-single',
+  props: {
+    filterOptions: { type: Array as PropType<iFilterOption[]> },
+    initialState: { type: Object as PropType<iFilterFormSingleState> },
+    hideFieldSelector: { type: Boolean },
+    hideHandlerSelector: { type: Boolean },
+    hideSearchButton: { type: Boolean },
+    width: { type: String, default: '440px' },
+    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
+  },
+  emits: {
+    onSearch: (data: iFilterFormSingleData) => true,
+  },
+  slots: ['prepend', 'append'],
+  setup({ props, event: { emit }, slots }) {
+
+    const utils = {
+      createState: ({ defaultField, filterOptions }: { defaultField?: string, filterOptions: iFilterOption[] }): iFilterFormSingleState => {
+        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n.$it('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
+        const formData = FilterService.getDefaultFormData(filterOptions);
+        return {
+          field: defaultOption.field,
+          filterHandler: defaultOption.filterHandler,
+          formData,
+        };
+      }
+    };
+
+    const state: iFilterFormSingleState = reactive(
+      deepcopy(props.initialState) ||
+      utils.createState({ filterOptions: props.filterOptions || [] })
+    );
+
+    /**
+     * 正在使用的目标filterOptions
+     * @author  韦胜健
+     * @date    2023.1.6 16:00
+     */
+    const usingFilterOption = computed((): iFilterOption => ({
+      ...(props.filterOptions || []).find(i => i.field === state.field)!,
+      filterHandler: state.filterHandler,
+    }));
+
+    /**
+     * props.filterOptions变化时更新内部状态
+     * @author  韦胜健
+     * @date    2023.1.6 15:57
+     */
+    watch(() => props.filterOptions, newFilterOptions => methods.updateFilterOptions(newFilterOptions || []));
+
+    const methods = {
+      /**
+       * 获取当前内部状态
+       * @author  韦胜健
+       * @date    2023.1.6 16:12
+       */
+      getState: (): iFilterFormSingleState => ({ ...state }),
+      /**
+       * 更新当前内部状态
+       * @author  韦胜健
+       * @date    2023.1.6 16:12
+       */
+      update: (newState: iFilterFormSingleState | null | undefined) => {
+        if (!!newState) {
+          Object.assign(state, newState);
+        } else {
+          Object.assign(state, utils.createState({ filterOptions: props.filterOptions || [] }));
+        }
+      },
+      /**
+       * 合并新的filterOptions
+       * @author  韦胜健
+       * @date    2023.1.6 15:49
+       */
+      updateFilterOptions: (filterOptions: iFilterOption[]) => {
+        const { formData, filterHandler } = utils.createState({ defaultField: state.field, filterOptions: filterOptions || [] });
+        state.formData = incrementalMerge(state.formData, formData);
+        state.filterHandler = filterHandler;
+      },
+      /**
+       * 获取查询数据
+       * @author  韦胜健
+       * @date    2023.1.6 18:32
+       */
+      getData: async () => {
+        const { field, formData, filterHandler } = state;
+        const queryParam = await FilterService.getQueryParam({ option: usingFilterOption.value, formData: state.formData });
+        const filterQueryParam = !queryParam ? {} : mergeQueryParam(queryParam, {});
+        return deepcopy({ field, formData, filterHandler, filterQueryParam });
+      },
+      /**
+       * 搜索
+       * @author  韦胜健
+       * @date    2023.1.6 12:46
+       */
+      search: async () => {
+        const data = await methods.getData();
+        emit.onSearch(data);
+        await props.handleSearch?.(data);
+      },
+    };
+
+    const handler = {
+      onUpdateField: (field: any) => {
+        const newState = utils.createState({ defaultField: field, filterOptions: props.filterOptions || [] });
+        const handler = FilterService.getHandler(usingFilterOption.value)!;
+        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
+        state.filterHandler = newState.filterHandler;
+        state.field = field;
+        // console.log({ ...state }, props.filterOptions);
+      },
+      onUpdateHandler: (filterHandler?: any) => {
+        const handler = FilterService.getHandler(usingFilterOption.value)!;
+        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
+        state.filterHandler = filterHandler;
+      },
+    };
+
+    const inputAttrs = { noClear: true };
+
+    return {
+      refer: {
+        state,
+        ...methods,
+      },
+      render: () => (
+        <InputGroup style={{ width: props.width }}>
+          {slots.prepend()}
+          {!props.hideFieldSelector && (
+            <Select key="field_selector" width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
+              {(props.filterOptions || []).map((option) => (
+                <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
+              ))}
+            </Select>
+          )}
+          {!props.hideHandlerSelector && (
+            <Select key={state.field} width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
+              {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
+                <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
+              ))}
+            </Select>
+          )}
+          <Fragment key={state.filterHandler}>
+            {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          </Fragment>
+          {!props.hideSearchButton && (
+            <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
+          )}
+          {slots.append()}
+        </InputGroup>
+      )
+    };
+  },
+});
+
+export default FilterFormSingle;

package/src/packages/components/FilterService/filter/filter.city.tsx

@@ -5,7 +5,7 @@ import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
 import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -54,9 +54,10 @@ export function installFilterCity(
         );
       },
       getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
+        const { isEmpty, value: _value, field } = checkEmpty(formData, option);
         if (isEmpty) {return;}
-        return { queries: [{ field, value: value.city, operator: eFilterOperator.eq }] };
+        const value = typeof _value === "string" ? _value : _value.city;
+        return { queries: [{ field, value: value, operator: eFilterOperator.eq }] };
       },
     })
     .setHandler('in', {

package/src/packages/components/FilterService/filter/filter.district.tsx

@@ -5,7 +5,7 @@ import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
 import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -55,9 +55,10 @@ export function installFilterDistrict(
         );
       },
       getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
+        const { isEmpty, value: _value, field } = checkEmpty(formData, option);
         if (isEmpty) {return;}
-        return { queries: [{ field, value: value.district, operator: eFilterOperator.eq }] };
+        const value = typeof _value === "string" ? _value : _value.city;
+        return { queries: [{ field, value: value, operator: eFilterOperator.eq }] };
       },
     })
     .setHandler('in', {

package/src/packages/components/FilterService/filter/filter.number.tsx

@@ -30,8 +30,8 @@ export function installFilterNumber(
         <NumberRange
           v-model:start={formData[option.startField]}
           v-model:end={formData[option.endField]}
-          startAttrs={{ inputAttrs: { onEnter: confirm } }}
-          endAttrs={{ inputAttrs: { onEnter: confirm } }}
+          onEnterStart={confirm}
+          onEnterEnd={confirm}
           noGroupWrapper
         />
       ),

package/src/packages/components/FilterService/filter/filter.province.tsx

@@ -4,7 +4,7 @@ import {Input} from "../../Input";
 import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**

package/src/packages/components/FilterService/filter/filter.select.tsx

@@ -1,13 +1,14 @@
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 import {iFilterService} from "../index";
 import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
 import {Select} from "../../Select";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import SelectDisplay from "../../SelectDisplay";
 import i18n from "../../i18n";
 
 export interface iFilterConfigSelect {
   renderOptions: () => RenderNode,
+  getSelectOptions: () => { label: string, val: any }[]
 }
 
 /**

package/src/packages/components/FilterService/filter/fitler.object.tsx

@@ -1,6 +1,6 @@
 import {iFilterService} from "../index";
 import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {Input} from "../../Input";
 import {_Object} from "../../Object";
 /**

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

@@ -1,6 +1,6 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 import {eFilterOperator, iFilterHandler, iFilterOption, iFilterType} from "./utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {installFilterText} from "./filter/filter.text";
 import {installFilterDate} from "./filter/filter.date";
 import {Input} from "../Input";

package/src/packages/components/FilterService/utils/filter.service.utils.ts

@@ -1,5 +1,5 @@
-import {RenderNode} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {RenderNode} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {PartialFields} from "../../../utils/type";
 
 /**

package/src/packages/components/FilterService/utils/mergeQueryParam.ts

@@ -1,7 +1,7 @@
 import {iFilterHandlerQueryMeta, iFilterHandlerQueryParam, iFilterQueryMeta, iFilterQueryParam} from "./filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {PlainObject} from "@peryl/utils/event";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {createCounter} from "@peryl/utils/createCounter";
 
 export function mergeQueryParam(...queryParamList: (iFilterQueryParam | iFilterHandlerQueryParam | null | undefined | void)[]): iFilterQueryParam {
   const requestData: PlainObject = {};

package/src/packages/components/Form/form.scss

@@ -33,6 +33,10 @@
     box-sizing: border-box;
     position: relative;
     vertical-align: top;
+    .form-item-cell-tip {
+      color: plv(text-3);
+      vertical-align: -0.15em;
+    }
     .form-item-label {
       vertical-align: top;
       display: inline-block;

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
 import './form.scss';
 import {FormValidatePropsOption} from "./validate/validate.utils";
 import {DefaultFormLabelWidth, FormLayoutPropsOption, useFormLayout} from "./layout/useFormLayout";

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -1,10 +1,10 @@
-import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {unit} from "plain-utils/string/unit";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
+import {unit} from "@peryl/utils/unit";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {InputMode, ThemeSize, tStyleComputed} from "../../../uses/useStyle";
 import ApplicationConfigurationProvider from "../../ApplicationConfigurationProvider";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 /**
  * 表单的文本以及内容对齐方式
@@ -71,6 +71,7 @@ export const FormItemLayoutPropsOption = {
   colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
   validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
   negativeInnerMarginTop: { type: Boolean },                                          // inner节点启用负的marginTop值
+  tip: { type: [String, Function] as PropType<string | (() => any)> },                // 提示说明
 } as const;
 
 /**

package/src/packages/components/Form/types/any.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import i18n from "../../i18n";
 

package/src/packages/components/Form/types/array.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";

package/src/packages/components/Form/types/date.tsx

@@ -1,5 +1,5 @@
 import {iValidation} from "../validate/createValidation";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {plainDate} from "../../../utils/plainDate";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";

package/src/packages/components/Form/types/number.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import i18n from "../../i18n";
 

package/src/packages/components/Form/types/string.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";

package/src/packages/components/Form/validate/createValidation.tsx

@@ -1,6 +1,6 @@
-import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "@peryl/react-compose";
 import {checkRules, createFormItemRules, eFormValidateTrigger, iFormItemValidatePropsType, iFormValidatePropsType, iRegistrationValidator, isMatchTrigger, iValidateRule, iValidateState} from "./validate.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {registryAnyValidationType} from "../types/any";
 import {registryStringValidationType} from "../types/string";
 import {registryNumberValidationType} from "../types/number";