plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -0,0 +1,207 @@
+import {computed, designComponent, iMouseEvent, PropType, reactive, useRefs} from "plain-design-composition";
+import {iSearchDataMeta, iSearchServiceConfig, SearchOptionButton, SearchTreeIcon, SearchType2Icon} from "./search.utils";
+import {createListUtils} from "../../utils/createListUtils";
+import {delay} from "plain-utils/utils/delay";
+import {VirtualList} from "../VirtualList";
+import {i18n} from "../i18n";
+
+export const SearchList = designComponent({
+  props: {
+    data: { type: Array as PropType<iSearchDataMeta[]>, required: true },
+    config: { type: Object as PropType<iSearchServiceConfig>, required: true }
+  },
+  slots: ['default'],
+  emits: {
+    /*选中选项事件*/
+    onSelect: (val: iSearchDataMeta) => true,
+    /*删除选项事件，选项可能是历史选项，也可能是收藏选项*/
+    onRemoveItem: (val: iSearchDataMeta) => true,
+    /*添加选项为收藏选项*/
+    onAddFavorite: (val: iSearchDataMeta) => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ virtual: VirtualList });
+
+    const state = reactive({
+      /*当前选中的选项位置索引*/
+      selectIndex: null as null | number
+    });
+
+    /*有效可选中的选项数组*/
+    const availableList = computed(() => props.data.filter(i => i.type !== 'group'));
+    /*选中选项在有效选项数组中的位置索引*/
+    const availableIndex = computed(() => state.selectIndex == null ? null : availableList.value.indexOf(props.data[state.selectIndex]));
+
+    const listUtils = createListUtils({ getList: () => availableList.value, current: () => availableIndex.value, });
+
+    const methods = {
+      /**
+       * 选中上一个节点
+       * @author  韦胜健
+       * @date    2024.6.23 21:27
+       */
+      selectPrev: async () => {
+        const newAvailableIndex = listUtils.prevIndex();
+        if (newAvailableIndex == -1) {return;}
+        const newSelectIndex = props.data.indexOf(availableList.value[newAvailableIndex]);
+        if (!!refs.virtual && availableIndex.value == 0 && newAvailableIndex == availableList.value.length - 1) {
+          /*滚动到底部再选中选项*/
+          refs.virtual.refs.scroll?.methods.scrollEnd();
+          await delay(78);
+        } else {
+          refs.virtual?.refs.scroll?.methods.showElement(`[data-index="_${newSelectIndex}"]`);
+        }
+        state.selectIndex = newSelectIndex;
+      },
+      /**
+       * 选中下一个节点
+       * @author  韦胜健
+       * @date    2024.6.23 21:28
+       */
+      selectNext: async () => {
+        const newAvailableIndex = listUtils.nextIndex();
+        if (newAvailableIndex == -1) {return;}
+        const newSelectIndex = props.data.indexOf(availableList.value[newAvailableIndex]);
+        if (!!refs.virtual && availableIndex.value == availableList.value.length - 1 && newAvailableIndex == 0) {
+          /*滚动到顶部再选中选项*/
+          refs.virtual.refs.scroll?.methods.scrollTop(0);
+          await delay(78);
+        } else {
+          refs.virtual?.refs.scroll?.methods.showElement(`[data-index="_${newSelectIndex}"]`);
+        }
+        state.selectIndex = newSelectIndex;
+      },
+      /**
+       * 获取当前选中的节点
+       * @author  韦胜健
+       * @date    2024.6.23 21:28
+       */
+      getSelected: (): iSearchDataMeta | null => {
+        return state.selectIndex == null ? null : props.data[state.selectIndex];
+      },
+      /**
+       * 选中节点
+       * @author  韦胜健
+       * @date    2024.6.23 21:28
+       */
+      selectItem: (dataMeta: iSearchDataMeta) => {
+        emit.onSelect(dataMeta);
+      },
+      /**
+       * 删除收藏或者历史
+       * @author  韦胜健
+       * @date    2024.6.23 21:58
+       */
+      removeItem: (e: iMouseEvent, dataMeta: iSearchDataMeta) => {
+        e.stopPropagation();
+        emit.onRemoveItem(dataMeta);
+      },
+      /**
+       * 添加收藏
+       * @author  韦胜健
+       * @date    2024.6.23 21:58
+       */
+      addFavorite: (e: iMouseEvent, dataMeta: iSearchDataMeta) => {
+        e.stopPropagation();
+        emit.onAddFavorite(dataMeta);
+      },
+      /**
+       * 重置选中节点
+       * @author  韦胜健
+       * @date    2024.6.23 23:42
+       */
+      resetSelectIndex: async () => {
+        await delay();
+        state.selectIndex = !availableList.value.length ? null : props.data.indexOf(availableList.value[0]);
+      },
+    };
+
+    const renderItem = (
+      { item, vid, index }: {
+        item: iSearchDataMeta, vid: string, index: number
+      }
+    ) => {
+
+      /**
+       * 是否为最后一个subHeader，如果返回值为null，表明不是sub_header，否则true为最后一个sub_header，false为普通sub_header
+       * @author  韦胜健
+       * @date    2024.6.23 23:49
+       */
+      const isLastSubHeader = (() => {
+        if (item.type !== 'sub_header') {return null;}
+        const nextItem = index + 1 > props.data.length - 1 ? null : props.data[index + 1];
+        return !(!!nextItem && nextItem.type === 'sub_header');
+      })();
+
+      return (
+        <div
+          className={`search-service-option-item`}
+          data-active={String(state.selectIndex === index)}
+          key={vid}
+          data-vid={vid}
+          data-index={`_${index}`}
+          onMouseEnter={() => item.type != 'group' && (state.selectIndex = index)}
+        >
+          {(props.config.render || ((item: iSearchDataMeta) => {
+            return (
+              <div className="search-service-option-item-default" data-service-item-type={item.type}>
+                {item.type == 'group' ? (
+                  <div className="search-service-option-item-default-title">{i18n.$intl(item.title || '').d(item.title || '')}</div>
+                ) : (
+                  <div className="search-service-option-item-default-box" onClick={() => methods.selectItem(item)}>
+                    {isLastSubHeader != null && SearchTreeIcon[isLastSubHeader ? 'last' : 'normal']()}
+                    {SearchType2Icon[item.type]()}
+                    <div className="search-service-option-item-default-label">
+                      {item.title && <span>{i18n.$intl(item.title).d(item.title)}</span>}
+                      {item.desc && <span>{i18n.$intl(item.desc).d(item.desc)}</span>}
+                    </div>
+                    {item.type === 'favorite' ?
+                      SearchOptionButton.remove((e) => methods.removeItem(e, item)) :
+                      item.type === 'history' ? <>
+                        {SearchOptionButton.favorite((e) => methods.addFavorite(e, item))}
+                        {SearchOptionButton.remove((e) => methods.removeItem(e, item))}
+                      </> : SearchOptionButton.normal()}
+                  </div>
+                )}
+              </div>
+            );
+          }))(item)}
+        </div>
+      );
+    };
+
+    return {
+      refer: {
+        refs,
+        methods,
+      },
+      render: () => (
+        !props.data.length ? (
+          <div className="search-service-empty" key="empty">
+            {slots.default()}
+          </div>
+        ) : (
+          <div className="search-service-list" key="list">
+            {availableList.value.length <= 6 ? (
+              /*不超过6个元素，就直接渲染选项数组*/
+              props.data.map((item, index) => (renderItem({ item, vid: `_${(item.title || String(index)) + (item.desc || String(index))}`, index })))
+            ) : (
+              /*超过6个就渲染虚拟列表*/
+              <div className="search-service-option-virtual-list">
+                <VirtualList
+                  ref={onRef.virtual}
+                  size={56}
+                  dynamicSize
+                  data={props.data}
+                  alwaysShowScrollbar
+                  v-slots={{ default: ({ item, vid, index }) => renderItem({ item, vid, index }) }}
+                />
+              </div>
+            )}
+          </div>
+        )
+      )
+    };
+  },
+});

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

@@ -0,0 +1,233 @@
+import {computed, createStore, designComponent, getComponentCls, onMounted, PropType, reactive, useClassCache, useRefs} from "plain-design-composition";
+import {iSearchDataMeta, iSearchServiceConfig} from "./search.utils";
+import {debounce} from "plain-utils/utils/debounce";
+import {handleKeyboard} from "../KeyboardService";
+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({
+        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

@@ -0,0 +1,43 @@
+import {iSearchServiceConfig, iSearchServiceCustomConfig, iSearchServiceDefaultConfig} from "./search.utils";
+import $dialog from "../$dialog";
+import {getComponentCls} from "plain-design-composition";
+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

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