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

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

@@ -1,52 +1,52 @@
-import {reactive} from "@peryl/react-compose";
-import {createImagePreviewerOption, iImagePreviewerOption, iImagePreviewerParamOption} from "../ImagePreviewer/image-previewer.utils";
-import {ImagePreviewerFixedContainer} from "./ImagePreviewerFixedContainer";
-import {getDeviceInfo} from "../../utils/getDeviceInfo";
-
-/**
- * 图片预览服务
- * @author  韦胜健
- * @date    2024/1/8 10:04
- */
-export const $previewer = (() => {
-
-  const state = reactive({
-    /*有service option不同，image previewer同时只能显示一个*/
-    option: null as null | iImagePreviewerOption,
-  });
-
-  /**
-   * 大图查看图片
-   * @author  韦胜健
-   * @date    2024/1/5 11:22
-   */
-  const preview = async (param: iImagePreviewerParamOption, imageElement?: HTMLImageElement) => {
-
-    const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-    state.option = createImagePreviewerOption(param, imageElement, {
-      autoHeight: false,
-      mask: true,
-      globalKeyboardEvent: true,
-      button: true,
-      ...isMobile ? {
-        gallery: false,
-        button: false,
-        swipeButton: false,
-        galleryHeight: 0,
-      } : {},
-    });
-  };
-
-  const close = (optionOrId: string | iImagePreviewerOption) => {
-    const optionId = typeof optionOrId === "string" ? optionOrId : optionOrId.id;
-    if (!!state.option && state.option.id === optionId) {state.option = null;}
-  };
-
-  const render = () => !!state.option && <ImagePreviewerFixedContainer option={state.option}/>;
-
-  return { preview, render, close };
-
-})();
-
-export default $previewer;
+import {reactive} from "@peryl/react-compose";
+import {createImagePreviewerOption, iImagePreviewerOption, iImagePreviewerParamOption} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewerFixedContainer} from "./ImagePreviewerFixedContainer";
+import {getDeviceInfo} from "../../utils/getDeviceInfo";
+
+/**
+ * 图片预览服务
+ * @author  韦胜健
+ * @date    2024/1/8 10:04
+ */
+export const $previewer = (() => {
+
+  const state = reactive({
+    /*有service option不同，image previewer同时只能显示一个*/
+    option: null as null | iImagePreviewerOption,
+  });
+
+  /**
+   * 大图查看图片
+   * @author  韦胜健
+   * @date    2024/1/5 11:22
+   */
+  const preview = async (param: iImagePreviewerParamOption, imageElement?: HTMLImageElement) => {
+
+    const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+    state.option = createImagePreviewerOption(param, imageElement, {
+      autoHeight: false,
+      mask: true,
+      globalKeyboardEvent: true,
+      button: true,
+      ...isMobile ? {
+        gallery: false,
+        button: false,
+        swipeButton: false,
+        galleryHeight: 0,
+      } : {},
+    });
+  };
+
+  const close = (optionOrId: string | iImagePreviewerOption) => {
+    const optionId = typeof optionOrId === "string" ? optionOrId : optionOrId.id;
+    if (!!state.option && state.option.id === optionId) {state.option = null;}
+  };
+
+  const render = () => !!state.option && <ImagePreviewerFixedContainer option={state.option}/>;
+
+  return { preview, render, close };
+
+})();
+
+export default $previewer;

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

@@ -1,32 +1,32 @@
-import {designPage} from "@peryl/react-compose";
-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>
-    </>
-  );
-});
+import {designPage} from "@peryl/react-compose";
+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

@@ -1,207 +1,207 @@
-import {computed, designComponent, iMouseEvent, PropType, reactive, useRefs} from "@peryl/react-compose";
-import {iSearchDataMeta, iSearchServiceConfig, SearchOptionButton, SearchTreeIcon, SearchType2Icon} from "./search.utils";
-import {createListUtils} from "../../utils/createListUtils";
-import {delay} from "@peryl/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>
-        )
-      )
-    };
-  },
-});
+import {computed, designComponent, iMouseEvent, PropType, reactive, useRefs} from "@peryl/react-compose";
+import {iSearchDataMeta, iSearchServiceConfig, SearchOptionButton, SearchTreeIcon, SearchType2Icon} from "./search.utils";
+import {createListUtils} from "../../utils/createListUtils";
+import {delay} from "@peryl/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>
+        )
+      )
+    };
+  },
+});