plain-design 1.0.0-beta.147 → 1.0.0-beta.148

package/src/packages/components/$search/SearchServicePanel.tsx

@@ -1,233 +1,233 @@
-import {computed, createStore, designComponent, getComponentCls, iKeyboardEvent, onMounted, PropType, reactive, useClassCache, useRefs} from "@peryl/react-compose";
-import {iSearchDataMeta, iSearchServiceConfig} from "./search.utils";
-import {debounce} from "@peryl/utils/debounce";
-import {handleKeyboard} from "@peryl/utils/keyboard";
-import {Box} from "../Box";
-import Input from "../Input";
-import {SearchList} from "./SearchList";
-import {SearchFooter} from "./SearchFooter";
-import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
-import {i18n} from "../../i18n";
-
-export const SearchServicePanel = designComponent({
-  props: {
-    config: { type: Object as PropType<iSearchServiceConfig>, required: true }
-  },
-  emits: {
-    onClose: () => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const configuration = ApplicationConfigurationProvider.inject();
-
-    /*微调输入框以及footer在黑白主题下的颜色*/
-    const inputBackgroundColor = computed(() => ({ backgroundColor: configuration.value.theme.vars[configuration.value.theme.dark ? "bg-1" : 'bg-2'] }));
-
-    /**
-     * 搜索缓存
-     * @author  韦胜健
-     * @date    2024.6.23 21:21
-     */
-    const searchCache = createStore({
-      initialState: {
-        history: [] as iSearchDataMeta[],
-        favorite: [] as iSearchDataMeta[],
-      },
-      getCacheConfig: () => ({ envName: getComponentCls(''), cacheName: props.config.cacheName || `@@search_service}` })
-    });
-
-    const { refs, onRef } = useRefs({ list: SearchList });
-
-    const state = reactive({
-      /*当前输入的搜索关键词*/
-      searchText: '',
-      /*展示的选项数据*/
-      data: [] as iSearchDataMeta[],
-      /*当前是否处于加载状态*/
-      loading: false,
-      /*当前是否处于输入状态*/
-      editing: false,
-    });
-
-    const historyData = computed(() => {
-      const data: iSearchDataMeta[] = [];
-      if (!!searchCache.value.history.length) {
-        data.push({ title: i18n.$it('search.searchHistory').d('搜索历史'), type: 'group' });
-        data.push(...searchCache.value.history);
-      }
-      if (!!searchCache.value.favorite.length) {
-        data.push({ title: i18n.$it('search.favorite').d('收藏'), type: 'group' });
-        data.push(...searchCache.value.favorite);
-      }
-      return data;
-    });
-
-    const classes = useClassCache(() => [
-      getComponentCls('search-service-panel')
-    ]);
-
-    const handler = {
-      /**
-       * 每次输入搜索关键词的时候都重置数据，防抖执行
-       * @author  韦胜健
-       * @date    2024.6.23 21:23
-       */
-      resetData: debounce(async () => {
-        if (!state.searchText.trim().length) {
-          state.data = [];
-          state.editing = false;
-          refs.list?.methods.resetSelectIndex();
-          return;
-        }
-        state.loading = true;
-        try {
-          state.data = await props.config.getData(state.searchText);
-        } catch (e) {
-          state.data = [];
-          throw e;
-        } finally {
-          state.loading = false;
-          state.editing = false;
-          refs.list?.methods.resetSelectIndex();
-        }
-      }, 300),
-      /**
-       * 搜索关键词变化的话立即标识处于输入状态
-       * @author  韦胜健
-       * @date    2024.6.23 21:24
-       */
-      onInputChange: () => {
-        state.editing = true;
-        handler.resetData();
-      },
-      /**
-       * 处理上下以及enter，esc快捷键
-       * @author  韦胜健
-       * @date    2024.6.23 21:24
-       */
-      onKeydown: handleKeyboard<iKeyboardEvent>({
-        up: async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          refs.list?.methods.selectPrev();
-        },
-        down: async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          refs.list?.methods.selectNext();
-        },
-        enter: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          const target = refs.list?.methods.getSelected();
-          if (!target) {return;}
-          handler.onSelectItem(target);
-        },
-        esc: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          emit.onClose();
-        },
-      }),
-      /**
-       * 处理选中某个选项的动作
-       * @author  韦胜健
-       * @date    2024.6.23 21:24
-       */
-      onSelectItem: (dataMeta: iSearchDataMeta) => {
-        if (!historyData.value.find(i => i.title === dataMeta.title && i.desc === dataMeta.desc)) {
-          dataMeta = { ...dataMeta, type: 'history' };
-          searchCache.value.history.unshift(dataMeta);
-          if (searchCache.value.history.length > 5) {searchCache.value.history.pop();}
-          searchCache.value = { ...searchCache.value };
-        }
-        props.config.onSelect(dataMeta);
-        emit.onClose();
-      },
-      onRemoveItem: (dataMeta: iSearchDataMeta) => {
-        const historyIndex = searchCache.value.history.findIndex(i => i.title === dataMeta.title && i.desc === dataMeta.desc && i.type === 'history');
-        if (historyIndex > -1) {
-          searchCache.value.history.splice(historyIndex, 1);
-          searchCache.value = { ...searchCache.value };
-          return;
-        }
-        const favoriteIndex = searchCache.value.favorite.findIndex(i => i.title === dataMeta.title && i.desc === dataMeta.desc && i.type === 'favorite');
-        if (favoriteIndex > -1) {
-          searchCache.value.favorite.splice(favoriteIndex, 1);
-          searchCache.value = { ...searchCache.value };
-          return;
-        }
-      },
-      onAddFavorite: (dataMeta: iSearchDataMeta) => {
-        handler.onRemoveItem(dataMeta);
-        dataMeta = { ...dataMeta, type: 'favorite' };
-        searchCache.value.favorite.unshift(dataMeta);
-        searchCache.value = { ...searchCache.value };
-      },
-    };
-
-    const renderList = (data: iSearchDataMeta[], empty: () => any) => {
-      return (
-        <SearchList
-          ref={onRef.list}
-          data={data}
-          config={props.config}
-          onSelect={handler.onSelectItem}
-          onRemoveItem={handler.onRemoveItem}
-          onAddFavorite={handler.onAddFavorite}
-        >
-          {empty()}
-        </SearchList>
-      );
-    };
-
-    onMounted(() => {
-      refs.list?.methods.resetSelectIndex();
-    });
-
-    return () => (
-      <Box className={classes.value}>
-        <div className="search-service-input-box">
-          <Input
-            style={inputBackgroundColor.value}
-            autoFocus
-            prefixIcon="pi-search"
-            v-model={state.searchText}
-            placeholder={props.config.placeholder}
-            inputMode="stroke"
-            onChange={handler.onInputChange}
-            loading={state.loading}
-            loadingType="kappa"
-            onKeyDown={handler.onKeydown}
-          />
-        </div>
-        <div className="search-service-body">
-          {!state.searchText.trim().length || (state.editing && !state.data.length) ? (
-            /*如果没有搜索关键词，或者处于输入关键词状态并且没有数据的话，显示搜索历史*/
-            renderList(historyData.value, () => (
-              <div className="search-service-panel-history" key="history">
-                {i18n.$it('search.noHistory').d('没有搜索历史')}
-              </div>))
-          ) : (
-            /*否则显示具体的数据*/
-            renderList(state.data, () => {
-              return (
-                <div key="no_match">
-                  <svg width="40" height="40" viewBox="0 0 20 20" fill="none" fillRule="evenodd" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path>
-                  </svg>
-                  <div>
-                    {i18n.$it('search.noMatch', { val: state.searchText }).d(`无法找到搜索结果 "${state.searchText}"`)}
-                  </div>
-                </div>
-              );
-            })
-          )}
-        </div>
-        <div className="search-service-foot" style={inputBackgroundColor.value}>
-          {props.config.footer ? props.config.footer() : (<SearchFooter/>)}
-        </div>
-      </Box>
-    );
-  },
-});
+import {computed, createStore, designComponent, getComponentCls, iKeyboardEvent, onMounted, PropType, reactive, useClassCache, useRefs} from "@peryl/react-compose";
+import {iSearchDataMeta, iSearchServiceConfig} from "./search.utils";
+import {debounce} from "@peryl/utils/debounce";
+import {handleKeyboard} from "@peryl/utils/keyboard";
+import {Box} from "../Box";
+import Input from "../Input";
+import {SearchList} from "./SearchList";
+import {SearchFooter} from "./SearchFooter";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {i18n} from "../../i18n";
+
+export const SearchServicePanel = designComponent({
+  props: {
+    config: { type: Object as PropType<iSearchServiceConfig>, required: true }
+  },
+  emits: {
+    onClose: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const configuration = ApplicationConfigurationProvider.inject();
+
+    /*微调输入框以及footer在黑白主题下的颜色*/
+    const inputBackgroundColor = computed(() => ({ backgroundColor: configuration.value.theme.vars[configuration.value.theme.dark ? "bg-1" : 'bg-2'] }));
+
+    /**
+     * 搜索缓存
+     * @author  韦胜健
+     * @date    2024.6.23 21:21
+     */
+    const searchCache = createStore({
+      initialState: {
+        history: [] as iSearchDataMeta[],
+        favorite: [] as iSearchDataMeta[],
+      },
+      getCacheConfig: () => ({ envName: getComponentCls(''), cacheName: props.config.cacheName || `@@search_service}` })
+    });
+
+    const { refs, onRef } = useRefs({ list: SearchList });
+
+    const state = reactive({
+      /*当前输入的搜索关键词*/
+      searchText: '',
+      /*展示的选项数据*/
+      data: [] as iSearchDataMeta[],
+      /*当前是否处于加载状态*/
+      loading: false,
+      /*当前是否处于输入状态*/
+      editing: false,
+    });
+
+    const historyData = computed(() => {
+      const data: iSearchDataMeta[] = [];
+      if (!!searchCache.value.history.length) {
+        data.push({ title: i18n.$it('search.searchHistory').d('搜索历史'), type: 'group' });
+        data.push(...searchCache.value.history);
+      }
+      if (!!searchCache.value.favorite.length) {
+        data.push({ title: i18n.$it('search.favorite').d('收藏'), type: 'group' });
+        data.push(...searchCache.value.favorite);
+      }
+      return data;
+    });
+
+    const classes = useClassCache(() => [
+      getComponentCls('search-service-panel')
+    ]);
+
+    const handler = {
+      /**
+       * 每次输入搜索关键词的时候都重置数据，防抖执行
+       * @author  韦胜健
+       * @date    2024.6.23 21:23
+       */
+      resetData: debounce(async () => {
+        if (!state.searchText.trim().length) {
+          state.data = [];
+          state.editing = false;
+          refs.list?.methods.resetSelectIndex();
+          return;
+        }
+        state.loading = true;
+        try {
+          state.data = await props.config.getData(state.searchText);
+        } catch (e) {
+          state.data = [];
+          throw e;
+        } finally {
+          state.loading = false;
+          state.editing = false;
+          refs.list?.methods.resetSelectIndex();
+        }
+      }, 300),
+      /**
+       * 搜索关键词变化的话立即标识处于输入状态
+       * @author  韦胜健
+       * @date    2024.6.23 21:24
+       */
+      onInputChange: () => {
+        state.editing = true;
+        handler.resetData();
+      },
+      /**
+       * 处理上下以及enter，esc快捷键
+       * @author  韦胜健
+       * @date    2024.6.23 21:24
+       */
+      onKeydown: handleKeyboard<iKeyboardEvent>({
+        up: async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          refs.list?.methods.selectPrev();
+        },
+        down: async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          refs.list?.methods.selectNext();
+        },
+        enter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const target = refs.list?.methods.getSelected();
+          if (!target) {return;}
+          handler.onSelectItem(target);
+        },
+        esc: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          emit.onClose();
+        },
+      }),
+      /**
+       * 处理选中某个选项的动作
+       * @author  韦胜健
+       * @date    2024.6.23 21:24
+       */
+      onSelectItem: (dataMeta: iSearchDataMeta) => {
+        if (!historyData.value.find(i => i.title === dataMeta.title && i.desc === dataMeta.desc)) {
+          dataMeta = { ...dataMeta, type: 'history' };
+          searchCache.value.history.unshift(dataMeta);
+          if (searchCache.value.history.length > 5) {searchCache.value.history.pop();}
+          searchCache.value = { ...searchCache.value };
+        }
+        props.config.onSelect(dataMeta);
+        emit.onClose();
+      },
+      onRemoveItem: (dataMeta: iSearchDataMeta) => {
+        const historyIndex = searchCache.value.history.findIndex(i => i.title === dataMeta.title && i.desc === dataMeta.desc && i.type === 'history');
+        if (historyIndex > -1) {
+          searchCache.value.history.splice(historyIndex, 1);
+          searchCache.value = { ...searchCache.value };
+          return;
+        }
+        const favoriteIndex = searchCache.value.favorite.findIndex(i => i.title === dataMeta.title && i.desc === dataMeta.desc && i.type === 'favorite');
+        if (favoriteIndex > -1) {
+          searchCache.value.favorite.splice(favoriteIndex, 1);
+          searchCache.value = { ...searchCache.value };
+          return;
+        }
+      },
+      onAddFavorite: (dataMeta: iSearchDataMeta) => {
+        handler.onRemoveItem(dataMeta);
+        dataMeta = { ...dataMeta, type: 'favorite' };
+        searchCache.value.favorite.unshift(dataMeta);
+        searchCache.value = { ...searchCache.value };
+      },
+    };
+
+    const renderList = (data: iSearchDataMeta[], empty: () => any) => {
+      return (
+        <SearchList
+          ref={onRef.list}
+          data={data}
+          config={props.config}
+          onSelect={handler.onSelectItem}
+          onRemoveItem={handler.onRemoveItem}
+          onAddFavorite={handler.onAddFavorite}
+        >
+          {empty()}
+        </SearchList>
+      );
+    };
+
+    onMounted(() => {
+      refs.list?.methods.resetSelectIndex();
+    });
+
+    return () => (
+      <Box className={classes.value}>
+        <div className="search-service-input-box">
+          <Input
+            style={inputBackgroundColor.value}
+            autoFocus
+            prefixIcon="pi-search"
+            v-model={state.searchText}
+            placeholder={props.config.placeholder}
+            inputMode="stroke"
+            onChange={handler.onInputChange}
+            loading={state.loading}
+            loadingType="kappa"
+            onKeyDown={handler.onKeydown}
+          />
+        </div>
+        <div className="search-service-body">
+          {!state.searchText.trim().length || (state.editing && !state.data.length) ? (
+            /*如果没有搜索关键词，或者处于输入关键词状态并且没有数据的话，显示搜索历史*/
+            renderList(historyData.value, () => (
+              <div className="search-service-panel-history" key="history">
+                {i18n.$it('search.noHistory').d('没有搜索历史')}
+              </div>))
+          ) : (
+            /*否则显示具体的数据*/
+            renderList(state.data, () => {
+              return (
+                <div key="no_match">
+                  <svg width="40" height="40" viewBox="0 0 20 20" fill="none" fillRule="evenodd" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path>
+                  </svg>
+                  <div>
+                    {i18n.$it('search.noMatch', { val: state.searchText }).d(`无法找到搜索结果 "${state.searchText}"`)}
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+        <div className="search-service-foot" style={inputBackgroundColor.value}>
+          {props.config.footer ? props.config.footer() : (<SearchFooter/>)}
+        </div>
+      </Box>
+    );
+  },
+});

package/src/packages/components/$search/createSearchService.tsx

@@ -1,43 +1,43 @@
-import {iSearchServiceConfig, iSearchServiceCustomConfig, iSearchServiceDefaultConfig} from "./search.utils";
-import $dialog from "../$dialog";
-import {getComponentCls} from "@peryl/react-compose";
-import './search-service.scss';
-import {i18n} from "../i18n";
-
-import {SearchServicePanel} from "./SearchServicePanel";
-
-export function createSearchService(defaultConfig?: Partial<iSearchServiceDefaultConfig>) {
-
-  return (customConfig: iSearchServiceCustomConfig & Partial<iSearchServiceDefaultConfig>) => {
-
-    const _defaultConfig: iSearchServiceDefaultConfig = {
-      width: defaultConfig?.width || 560,
-      footer: defaultConfig?.footer,
-      render: defaultConfig?.render,
-      placeholder: defaultConfig?.placeholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')
-    };
-
-    const config: iSearchServiceConfig = {
-      ..._defaultConfig,
-      ...customConfig,
-    };
-
-    const closeDialog = $dialog({
-      width: config.width,
-      noHead: true,
-      noFoot: true,
-      externalClass: getComponentCls('search-service'),
-      noContentPadding: true,
-      render: () => {
-        return (
-          <SearchServicePanel config={config} onClose={closeDialog}/>
-        );
-      },
-    });
-
-    return {
-      close: closeDialog,
-    };
-  };
-}
-
+import {iSearchServiceConfig, iSearchServiceCustomConfig, iSearchServiceDefaultConfig} from "./search.utils";
+import $dialog from "../$dialog";
+import {getComponentCls} from "@peryl/react-compose";
+import './search-service.scss';
+import {i18n} from "../i18n";
+
+import {SearchServicePanel} from "./SearchServicePanel";
+
+export function createSearchService(defaultConfig?: Partial<iSearchServiceDefaultConfig>) {
+
+  return (customConfig: iSearchServiceCustomConfig & Partial<iSearchServiceDefaultConfig>) => {
+
+    const _defaultConfig: iSearchServiceDefaultConfig = {
+      width: defaultConfig?.width || 560,
+      footer: defaultConfig?.footer,
+      render: defaultConfig?.render,
+      placeholder: defaultConfig?.placeholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')
+    };
+
+    const config: iSearchServiceConfig = {
+      ..._defaultConfig,
+      ...customConfig,
+    };
+
+    const closeDialog = $dialog({
+      width: config.width,
+      noHead: true,
+      noFoot: true,
+      externalClass: getComponentCls('search-service'),
+      noContentPadding: true,
+      render: () => {
+        return (
+          <SearchServicePanel config={config} onClose={closeDialog}/>
+        );
+      },
+    });
+
+    return {
+      close: closeDialog,
+    };
+  };
+}
+

package/src/packages/components/$search/index.tsx

@@ -1,6 +1,6 @@
-import {createSearchService} from "./createSearchService";
-
-export const $search = createSearchService();
-
-export default $search;
-
+import {createSearchService} from "./createSearchService";
+
+export const $search = createSearchService();
+
+export default $search;
+