plain-design 1.0.0-beta.78 → 1.0.0-beta.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.78",
+  "version": "1.0.0-beta.79",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

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

@@ -0,0 +1,32 @@
+import {designPage} from "plain-design-composition";
+import {i18n} from "../i18n";
+
+export const SearchFooter = designPage(() => {
+  return () => (
+    <>
+      <svg width="15" height="15" aria-label="Enter key" role="img">
+        <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2">
+          <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
+        </g>
+      </svg>
+      <span>{i18n.$it('search.select').d('选择')}</span>
+      <svg width="15" height="15" aria-label="Arrow down" role="img">
+        <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2">
+          <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path>
+        </g>
+      </svg>
+      <svg width="15" height="15" aria-label="Arrow up" role="img">
+        <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2">
+          <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path>
+        </g>
+      </svg>
+      <span>{i18n.$it('search.switch').d('切换')}</span>
+      <svg width="15" height="15" aria-label="Escape key" role="img">
+        <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2">
+          <path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path>
+        </g>
+      </svg>
+      <span>{i18n.$it('base.close').d('关闭')}</span>
+    </>
+  );
+});

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

@@ -0,0 +1,206 @@
+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";
+
+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">{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>{item.title}</span>}
+                      {item.desc && <span>{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>) {
+
+  const _defaultConfig: iSearchServiceDefaultConfig = {
+    width: defaultConfig?.width || 560,
+    footer: defaultConfig?.footer,
+    render: defaultConfig?.render,
+    placeholder: defaultConfig?.placeholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')
+  };
+
+  return (customConfig: iSearchServiceCustomConfig & Partial<iSearchServiceDefaultConfig>) => {
+
+    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;
+