plain-design 1.0.0-beta.160 → 1.0.0-beta.162

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

@@ -1,178 +1,178 @@
-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;
+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.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/NumberRange/index.tsx

@@ -1,93 +1,94 @@
-import {computed, designComponent, PropType, useModel} from "@peryl/react-compose";
-import {InputGroup} from "../InputGroup";
-import {InputNumber} from "../InputNumber";
-import {Input} from "../Input";
-import {PlainObject} from "@peryl/utils/event";
-
-export const NumberRange = designComponent({
-  name: 'number-range',
-  props: {
-    start: { type: [String, Number] },
-    end: { type: [String, Number] },
-    startAttrs: { type: Object as PropType<PlainObject> },
-    endAttrs: { type: Object as PropType<PlainObject> },
-    noGroupWrapper: { type: Boolean },
-  },
-  emits: {
-    onUpdateStart: (val?: string | number) => true,
-    onUpdateEnd: (val?: string | number) => true,
-    onBlur: () => true,
-    onEnter: () => true,
-    onClear: () => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const startModel = useModel(() => props.start, emit.onUpdateStart);
-    const endModel = useModel(() => props.end, emit.onUpdateEnd);
-
-    const placeValue = computed(() => {
-      let start = startModel.value == null ? '' : String(startModel.value).trim();
-      let end = endModel.value == null ? '' : String(endModel.value).trim();
-      return start + end;
-    });
-
-    const checkRange = () => {
-      let start = startModel.value;
-      let end = endModel.value;
-      let startNum = Number(start);
-      let endNum = Number(end);
-      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
-        return;
-      }
-      if (startNum > endNum) {
-        [startNum, endNum] = [endNum, startNum];
-        startModel.value = startNum;
-        endModel.value = endNum;
-      }
-    };
-
-    const handler = {
-      onBlur: (): void => {
-        checkRange();
-        emit.onBlur();
-      },
-      onEnter: () => {
-        checkRange();
-        emit.onEnter();
-      },
-      onClear: () => {
-        startModel.value = undefined;
-        endModel.value = undefined;
-        emit.onClear();
-      },
-    };
-
-    return () => {
-      const content = (
-        <Input
-          suffixIcon="pi-original-size"
-          placeValue={placeValue.value}
-          clearHandler={handler.onClear}
-        >
-          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.startAttrs || {},
-            inputAttrs: {
-              ...props.startAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.endAttrs || {},
-            inputAttrs: {
-              ...props.endAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-        </Input>
-      );
-      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
-    };
-  },
-});
-
-export default NumberRange;
+import {computed, designComponent, PropType, useModel} from "@peryl/react-compose";
+import {InputGroup} from "../InputGroup";
+import {InputNumber} from "../InputNumber";
+import {Input} from "../Input";
+import {PlainObject} from "@peryl/utils/event";
+
+export const NumberRange = designComponent({
+  name: 'number-range',
+  props: {
+    start: { type: [String, Number] },
+    end: { type: [String, Number] },
+    startAttrs: { type: Object as PropType<PlainObject> },
+    endAttrs: { type: Object as PropType<PlainObject> },
+    noGroupWrapper: { type: Boolean },
+  },
+  emits: {
+    onUpdateStart: (val?: string | number) => true,
+    onUpdateEnd: (val?: string | number) => true,
+    onBlur: () => true,
+    onClear: () => true,
+    onEnterStart: () => true,
+    onEnterEnd: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const startModel = useModel(() => props.start, emit.onUpdateStart);
+    const endModel = useModel(() => props.end, emit.onUpdateEnd);
+
+    const placeValue = computed(() => {
+      let start = startModel.value == null ? '' : String(startModel.value).trim();
+      let end = endModel.value == null ? '' : String(endModel.value).trim();
+      return start + end;
+    });
+
+    const checkRange = () => {
+      let start = startModel.value;
+      let end = endModel.value;
+      let startNum = Number(start);
+      let endNum = Number(end);
+      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
+        return;
+      }
+      if (startNum > endNum) {
+        [startNum, endNum] = [endNum, startNum];
+        startModel.value = startNum;
+        endModel.value = endNum;
+      }
+    };
+
+    const handler = {
+      onBlur: (): void => {
+        checkRange();
+        emit.onBlur();
+      },
+      onEnter: (type: 'start' | 'end') => {
+        checkRange();
+        type === "start" ? emit.onEnterStart() : emit.onEnterEnd();
+      },
+      onClear: () => {
+        startModel.value = undefined;
+        endModel.value = undefined;
+        emit.onClear();
+      },
+    };
+
+    return () => {
+      const content = (
+        <Input
+          suffixIcon="pi-original-size"
+          placeValue={placeValue.value}
+          clearHandler={handler.onClear}
+        >
+          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={() => handler.onEnter('start')} {...{
+            ...props.startAttrs || {},
+            inputAttrs: {
+              ...props.startAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={() => handler.onEnter('end')} {...{
+            ...props.endAttrs || {},
+            inputAttrs: {
+              ...props.endAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+        </Input>
+      );
+      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
+    };
+  },
+});
+
+export default NumberRange;

package/src/packages/entry.tsx

@@ -136,7 +136,7 @@ export {Corner} from './components/Corner';
 export {useContextmenuOptions} from './components/useContextmenuOptions';
 export type {iContextmenuOption} from './components/useContextmenuOptions';
 export {AiChatBox} from './components/AiChatBox';
-export type {iChatBoxHistory} from './components/AiChatBox';
+export type {iChatBoxHandleMessage, iChatBoxHistory} from './components/AiChatBox';
 export {$ai} from './components/$ai';
 export type {iAiChoice, iAiChatResponse, iAiConfiguration, iAiHistory} from './components/$ai';
 export {IconPicker} from './components/IconPicker';