@whitesev/pops 2.4.6 → 2.4.7

package/src/handler/PopsHandler.ts

@@ -0,0 +1,589 @@
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
+import { PopsCore } from "../PopsCore";
+import { PopsAnimation } from "../PopsAnimation";
+import { PopsInstData } from "../PopsInst";
+import type { PopsCommonConfig } from "../types/components";
+import type { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
+import type { PopsInstCommonConfig } from "../types/inst";
+import type { PopsInstStoreType, PopsType, PopsSupportAnimDetailsType, PopsSupportOnlyDetails } from "../types/main";
+import { popsDOMUtils } from "../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
+import { popsUtils } from "../utils/PopsUtils";
+
+export const PopsHandler = {
+  /**
+   * 创建shadow
+   */
+  handlerShadow(config: Pick<PopsCommonConfig, "useShadowRoot">) {
+    const $shadowContainer = document.createElement("div");
+    $shadowContainer.className = "pops-shadow-container";
+    if (config.useShadowRoot) {
+      const $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
+      return {
+        $shadowContainer,
+        $shadowRoot,
+      };
+    } else {
+      return {
+        $shadowContainer,
+        $shadowRoot: $shadowContainer,
+      };
+    }
+  },
+  /**
+   * 处理初始化
+   * @param $styleParent style元素的父元素
+   * @param css 添加进ShadowRoot的CSS
+   */
+  handleInit(
+    $styleParent?: ShadowRoot | HTMLElement,
+    css?:
+      | string
+      | string[]
+      | {
+          name?: string;
+          css: string;
+        }[]
+  ) {
+    PopsAnimation.init();
+    if (!arguments.length) {
+      return;
+    }
+    if ($styleParent == null) {
+      return;
+    }
+    if (css == null) {
+      return;
+    }
+
+    if (typeof css === "string") {
+      if (css.trim() === "") {
+        return;
+      }
+      css = [
+        {
+          css: css,
+        },
+      ];
+    } else {
+      css = css.map((item) => {
+        if (typeof item === "string") {
+          return {
+            css: item,
+          };
+        } else {
+          return item;
+        }
+      });
+    }
+    for (const cssItem of css) {
+      const $css = popsDOMUtils.createElement(
+        "style",
+        {},
+        {
+          "data-type": "PopsHandler.handleInit",
+        }
+      );
+      $css.textContent = cssItem.css;
+      if (typeof cssItem.name === "string") {
+        $css.setAttribute("data-name", cssItem.name);
+      }
+      $styleParent.appendChild($css);
+    }
+  },
+  /**
+   * 处理遮罩层
+   *
+   * + 设置遮罩层的点击事件
+   * @param details 传递的配置
+   */
+  handleMask(
+    details = {} as {
+      type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
+      guid: string;
+      config:
+        | Required<PopsAlertDetails>
+        | Required<PopsLoadingDetails>
+        | Required<PopsIframeDetails>
+        | Required<PopsDrawerDetails>
+        | Required<PopsPanelDetails>
+        | Required<PopsFolderDetails>;
+      animElement: HTMLElement;
+      maskHTML: string;
+    }
+  ) {
+    const result = {
+      maskElement: popsDOMUtils.parseTextToDOM<HTMLDivElement>(details.maskHTML),
+    };
+    let isMaskClick = false;
+    /**
+     * 点击其它区域的事件
+     * @param event
+     */
+    function clickEvent(event: MouseEvent | PointerEvent) {
+      popsDOMUtils.preventEvent(event);
+      // 获取该类型实例存储列表
+      const targetInst = PopsInstData[details.type];
+      function originalRun() {
+        if (details.config.mask!.clickEvent!.toClose) {
+          /* 关闭 */
+          return PopsInstanceUtils.close(details.type, targetInst, details.guid, details.config, details.animElement);
+        } else if (details.config.mask!.clickEvent!.toHide) {
+          /* 隐藏 */
+          return PopsInstanceUtils.hide(
+            details.type,
+            targetInst,
+            details.guid,
+            details.config,
+            details.animElement,
+            result.maskElement
+          );
+        }
+      }
+      if (typeof details.config.mask.clickCallBack === "function") {
+        details.config.mask.clickCallBack(originalRun, details.config);
+      } else {
+        originalRun();
+      }
+      return false;
+    }
+    // 判断是否启用了遮罩层点击动作
+    if (details.config.mask.clickEvent!.toClose || details.config.mask.clickEvent!.toHide) {
+      /**
+       * 判断点击的元素是否是动画层的元素
+       * @param element
+       * @returns
+       */
+      function isAnimElement(element: HTMLElement) {
+        return Boolean(
+          element?.localName?.toLowerCase() === "div" &&
+            element.className &&
+            element.className === "pops-anim" &&
+            element.hasAttribute("anim")
+        );
+      }
+      /* 判断按下的元素是否是pops-anim */
+      popsDOMUtils.on(details.animElement, ["touchstart", "mousedown"], void 0, (event) => {
+        const $click = event.composedPath()[0] as HTMLElement;
+        isMaskClick = isAnimElement($click);
+      });
+      /* 如果有动画层，在动画层上监听点击事件 */
+      popsDOMUtils.on<MouseEvent | PointerEvent>(details.animElement, "click", void 0, (event) => {
+        const $click = event.composedPath()[0] as HTMLElement;
+        if (isAnimElement($click) && isMaskClick) {
+          return clickEvent(event);
+        }
+      });
+      /* 在遮罩层监听点击事件 */
+      /* 如果有动画层，那么该点击事件触发不了 */
+      popsDOMUtils.on<MouseEvent | PointerEvent>(result.maskElement, "click", void 0, (event) => {
+        isMaskClick = true;
+        clickEvent(event);
+      });
+    }
+    return result;
+  },
+  /**
+   * 处理获取元素
+   * @param animElement
+   * @param type
+   */
+  handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimDetailsType) {
+    return {
+      /**
+       * 主元素
+       */
+      popsElement: animElement.querySelector<HTMLDivElement>(".pops[type-value")!,
+      /**
+       * 确认按钮
+       */
+      btnOkElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-btn-ok`)!,
+      /**
+       * 取消按钮
+       */
+      btnCancelElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-btn-cancel`)!,
+      /**
+       * 其它按钮
+       */
+      btnOtherElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-btn-other`)!,
+      /**
+       * 标题元素
+       */
+      titleElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-title`)!,
+      /**
+       * 输入框元素
+       */
+      inputElement: animElement.querySelector<HTMLTextAreaElement>(`.pops-${type}-content textarea[pops]`)
+        ? animElement.querySelector<HTMLTextAreaElement>(`.pops-${type}-content textarea[pops]`)!
+        : animElement.querySelector<HTMLInputElement>(`.pops-${type}-content input[pops]`)!,
+      /**
+       * 顶部按钮控制层元素
+       */
+      headerControlsElement: animElement.querySelector<HTMLDivElement>(".pops-header-controls")!,
+      /**
+       * iframe元素
+       */
+      iframeElement: animElement.querySelector<HTMLIFrameElement>("iframe[pops]")!,
+      /**
+       * 加载中元素
+       */
+      loadingElement: animElement.querySelector<HTMLDivElement>(".pops-loading")!,
+      /**
+       * 内容元素
+       */
+      contentElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-content`)!,
+      /**
+       * panel的右侧容器元素
+       */
+      panelSectionWrapper: animElement.querySelector<HTMLDivElement>(`.pops-${type}-section-wrapper`)!,
+      /**
+       * 内容侧边栏容器元素
+       */
+      contentAsideElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-content aside.pops-${type}-aside`)!,
+      /**
+       * 内容主要区域容器元素
+       */
+      contentSectionContainerElement: animElement.querySelector<HTMLDivElement>(
+        `.pops-${type}-content section.pops-${type}-container`
+      )!,
+      /**
+       * 内容加载中元素
+       */
+      contentLoadingElement: animElement.querySelector<HTMLDivElement>(`.pops-${type}-content-global-loading`)!,
+      /**
+       * 顶部缩小按钮
+       */
+      headerMinBtnElement: animElement.querySelector<HTMLDivElement>(".pops-header-control[data-type='min']")!,
+      /**
+       * 顶部放大按钮
+       */
+      headerMaxBtnElement: animElement.querySelector<HTMLDivElement>(".pops-header-control[data-type='max']")!,
+      /**
+       * 顶部恢复原样按钮
+       */
+      headerMiseBtnElement: animElement.querySelector<HTMLDivElement>(".pops-header-control[data-type='mise']")!,
+      /**
+       * 顶部关闭按钮
+       */
+      headerCloseBtnElement: animElement.querySelector<HTMLDivElement>(".pops-header-control[data-type='close']")!,
+      /**
+       * 文件夹列表元素
+       */
+      folderListElement: animElement.querySelector<HTMLDivElement>(".pops-folder-list")!,
+      /**
+       * 文件夹列表顶部元素
+       */
+      folderListHeaderElement: animElement.querySelector<HTMLDivElement>(
+        ".pops-folder-list .pops-folder-list-table__header-div"
+      )!,
+      /**
+       * 文件夹列表行元素
+       */
+      folderListHeaderRowElement: animElement.querySelector<HTMLTableRowElement>(
+        ".pops-folder-list .pops-folder-list-table__header-div .pops-folder-list-table__header-row"
+      )!,
+      /**
+       * 文件夹列表tbody元素
+       */
+      folderListBodyElement: animElement.querySelector<HTMLTableElement>(
+        ".pops-folder-list .pops-folder-list-table__body-div tbody"
+      )!,
+      /**
+       * 文件夹列表primary元素
+       */
+      folderFileListBreadcrumbPrimaryElement: animElement.querySelector<HTMLDivElement>(
+        ".pops-folder-list .pops-folder-file-list-breadcrumb-primary"
+      )!,
+      /**
+       * 文件夹排序按钮-文件名
+       */
+      folderListSortFileNameElement: animElement.querySelector<HTMLDivElement>(
+        '.pops-folder-list-table__sort[data-sort="fileName"]'
+      )!,
+      /**
+       * 文件夹排序按钮-修改时间
+       */
+      folderListSortLatestTimeElement: animElement.querySelector<HTMLDivElement>(
+        '.pops-folder-list-table__sort[data-sort="latestTime"]'
+      )!,
+      /**
+       * 文件夹排序按钮-文件大小
+       */
+      folderListSortFileSizeElement: animElement.querySelector<HTMLDivElement>(
+        '.pops-folder-list-table__sort[data-sort="fileSize"]'
+      )!,
+    };
+  },
+  /**
+   * 获取事件配置
+   * @param guid
+   * @param $shadowContainer
+   * @param $shadowRoot
+   * @param mode 当前弹窗类型
+   * @param animElement 动画层
+   * @param popsElement 主元素
+   * @param maskElement 遮罩层
+   * @param config 当前配置
+   */
+  handleEventDetails(
+    guid: string,
+    $shadowContainer: HTMLDivElement,
+    $shadowRoot: ShadowRoot | HTMLElement,
+    mode: PopsInstStoreType,
+    animElement: HTMLDivElement,
+    popsElement: HTMLDivElement,
+    maskElement: HTMLDivElement,
+    config:
+      | PopsAlertDetails
+      | PopsDrawerDetails
+      | PopsPromptDetails
+      | PopsConfirmDetails
+      | PopsIframeDetails
+      | PopsLoadingDetails
+      | PopsPanelDetails
+      | PopsFolderDetails
+  ): PopsEventDetails {
+    return {
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+      element: animElement,
+      animElement: animElement,
+      popsElement: popsElement,
+      maskElement: maskElement,
+      mode: mode,
+      guid: guid,
+      close() {
+        return PopsInstanceUtils.close(mode, PopsInstData[mode], guid, config, animElement);
+      },
+      hide() {
+        return PopsInstanceUtils.hide(mode, PopsInstData[mode], guid, config, animElement, maskElement);
+      },
+      show() {
+        return PopsInstanceUtils.show(mode, PopsInstData[mode], guid, config, animElement, maskElement);
+      },
+    };
+  },
+  /**
+   * 获取loading的事件配置
+   * @param guid
+   * @param mode 当前弹窗类型
+   * @param animElement 动画层
+   * @param popsElement 主元素
+   * @param maskElement 遮罩层
+   * @param config 当前配置
+   */
+  handleLoadingEventDetails(
+    guid: string,
+    mode: "loading",
+    animElement: HTMLDivElement,
+    popsElement: HTMLDivElement,
+    maskElement: HTMLDivElement,
+    config:
+      | PopsAlertDetails
+      | PopsDrawerDetails
+      | PopsPromptDetails
+      | PopsConfirmDetails
+      | PopsIframeDetails
+      | PopsLoadingDetails
+      | PopsPanelDetails
+      | PopsFolderDetails
+  ): Omit<PopsEventDetails, "$shadowContainer" | "$shadowRoot"> {
+    return {
+      element: animElement,
+      animElement: animElement,
+      popsElement: popsElement,
+      maskElement: maskElement,
+      mode: mode,
+      guid: guid,
+      close() {
+        return PopsInstanceUtils.close(mode, PopsInstData[mode], guid, config, animElement);
+      },
+      hide() {
+        return PopsInstanceUtils.hide(mode, PopsInstData[mode], guid, config, animElement, maskElement);
+      },
+      show() {
+        return PopsInstanceUtils.show(mode, PopsInstData[mode], guid, config, animElement, maskElement);
+      },
+    };
+  },
+  /**
+   * 处理返回的配置，针对popsHandler.handleEventDetails
+   */
+  handleResultDetails<T>(details: T): Omit<T, "type" | "function"> {
+    const resultDetails = Object.assign({}, details);
+    popsUtils.delete(resultDetails, "type");
+    popsUtils.delete(resultDetails, "function");
+    return resultDetails;
+  },
+  /**
+   * 处理点击事件
+   * @param type 当前按钮类型
+   * @param $btn 按钮元素
+   * @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
+   * @param callback 点击回调
+   */
+  handleClickEvent(
+    type: "cancel" | "close" | "ok" | "other",
+    $btn: HTMLElement,
+    eventDetails: PopsEventDetails,
+    callback: (details: PopsHandlerEventDetails, event: PointerEvent | MouseEvent) => void
+  ) {
+    popsDOMUtils.on<PointerEvent | MouseEvent>(
+      $btn,
+      "click",
+      (event) => {
+        const extraParam = {
+          type: type,
+        };
+        callback(Object.assign(eventDetails, extraParam), event);
+      },
+      {
+        capture: true,
+      }
+    );
+  },
+  /**
+   * 全局监听键盘事件
+   * @param keyName 键名|键值
+   * @param otherKeyList 组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
+   * @param callback 回调函数
+   */
+  handleKeyboardEvent(keyName: string | number, otherKeyList: string[] = [], callback: (event: KeyboardEvent) => void) {
+    const keyboardEvent = function (event: KeyboardEvent) {
+      const _keyName = event.code || event.key;
+      const _keyValue = event.charCode || event.keyCode || event.which;
+      if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
+        return;
+      }
+      if (otherKeyList.includes("alt") && !event.altKey) {
+        return;
+      }
+      if (otherKeyList.includes("meta") && !event.metaKey) {
+        return;
+      }
+      if (otherKeyList.includes("shift") && !event.shiftKey) {
+        return;
+      }
+      if (typeof keyName === "string" && keyName === _keyName) {
+        callback && callback(event);
+      } else if (typeof keyName === "number" && keyName === _keyValue) {
+        callback && callback(event);
+      }
+    };
+    popsDOMUtils.on(PopsCore.globalThis, "keydown", keyboardEvent, {
+      capture: true,
+    });
+    return {
+      removeKeyboardEvent() {
+        popsDOMUtils.off(globalThis, "keydown", keyboardEvent, {
+          capture: true,
+        });
+      },
+    };
+  },
+  /**
+   * 处理prompt的点击事件
+   * @param type 触发事件类型
+   * @param inputElement 输入框
+   * @param  $btn 按钮元素
+   * @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
+   * @param callback 点击回调
+   */
+  handlePromptClickEvent(
+    type: "ok" | "close" | "cancel" | "other",
+    inputElement: HTMLInputElement | HTMLTextAreaElement,
+    $btn: HTMLElement,
+    eventDetails: PopsEventDetails,
+    callback: (
+      details: PopsEventDetails & {
+        type: any;
+        text: string;
+      },
+      event: MouseEvent | PointerEvent
+    ) => void
+  ) {
+    popsDOMUtils.on<MouseEvent | PointerEvent>(
+      $btn,
+      "click",
+      (event) => {
+        // 额外参数
+        const extraParam = {
+          type: type,
+          text: inputElement.value,
+        };
+        callback(Object.assign(eventDetails, extraParam), event);
+      },
+      {
+        capture: true,
+      }
+    );
+  },
+  /**
+   * 把配置的z-index配置转为数字
+   * @param zIndex
+   */
+  handleZIndex(zIndex: number | (() => number)): number {
+    if (typeof zIndex === "function") {
+      return zIndex();
+    } else {
+      return zIndex;
+    }
+  },
+  /**
+   * 处理config.only
+   * @param type 当前弹窗类型
+   * @param config 配置
+   */
+  handleOnly<T extends Required<PopsSupportOnlyDetails[keyof PopsSupportOnlyDetails]>>(type: PopsType, config: T): T {
+    if (config.only) {
+      // .loading
+      // .tooltip
+      // .rightClickMenu
+      // 单独处理
+      if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
+        const inst = PopsInstData[type as keyof typeof PopsInstData];
+        if (inst) {
+          PopsInstanceUtils.removeInstance([inst], "", true);
+        }
+      } else {
+        PopsInstanceUtils.removeInstance(
+          [
+            PopsInstData.alert,
+            PopsInstData.confirm,
+            PopsInstData.prompt,
+            PopsInstData.iframe,
+            PopsInstData.drawer,
+            PopsInstData.folder,
+            PopsInstData.panel,
+          ],
+          "",
+          true
+        );
+      }
+    } else {
+      // 对配置进行处理
+      // 选择配置的z-index和已有的pops实例的最大z-index值
+      const originZIndex = config.zIndex;
+      config.zIndex = () => {
+        const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
+        return maxZIndex;
+      };
+    }
+    return config;
+  },
+  /**
+   * 处理把已创建的元素保存到内部环境中
+   * @param type 当前弹窗类型
+   * @param value
+   */
+  handlePush(type: PopsInstStoreType, value: PopsInstCommonConfig) {
+    PopsInstData[type].push(value);
+  },
+};

package/src/svg/arrowLeft.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-type="arrowLeft">
+	<path
+		d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path>
+</svg>

package/src/svg/arrowRight.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-type="arrowRight">
+	<path
+		d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
+</svg>

package/src/svg/chromeFilled.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" xml:space="preserve" data-type="chromeFilled">
+	<path
+		d="M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z"
+		fill="currentColor"></path>
+	<path
+		d="M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61 127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46 127.957 127.957 0 0 0-46.36-46.91z"
+		fill="currentColor"></path>
+	<path
+		d="M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98 425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zM512.01 938.68H512zM414.76 701.95a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42 0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z"
+		fill="currentColor"></path>
+</svg>

package/src/svg/circleClose.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-type="circleClose">
+	<path
+		fill="currentColor"
+		d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z"></path>
+	<path
+		fill="currentColor"
+		d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path>
+</svg>

package/src/svg/close.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="close">
+	<path
+		fill="currentColor"
+		d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
+</svg>

package/src/svg/cpu.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="currentColor"
+		d="M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z"></path>
+	<path
+		fill="currentColor"
+		d="M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z"></path>
+</svg>

package/src/svg/delete.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="currentColor"
+		d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"></path>
+</svg>

package/src/svg/documentCopy.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="currentColor"
+		d="M128 320v576h576V320H128zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32zM960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z"></path>
+</svg>

package/src/svg/edit.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="currentColor"
+		d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path>
+	<path
+		fill="currentColor"
+		d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path>
+</svg>

package/src/svg/eleme.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="currentColor"
+		d="M300.032 188.8c174.72-113.28 408-63.36 522.24 109.44 5.76 10.56 11.52 20.16 17.28 30.72v.96a22.4 22.4 0 0 1-7.68 26.88l-352.32 228.48c-9.6 6.72-22.08 3.84-28.8-5.76l-18.24-27.84a54.336 54.336 0 0 1 16.32-74.88l225.6-146.88c9.6-6.72 12.48-19.2 5.76-28.8-.96-1.92-1.92-3.84-3.84-4.8a267.84 267.84 0 0 0-315.84-17.28c-123.84 81.6-159.36 247.68-78.72 371.52a268.096 268.096 0 0 0 370.56 78.72 54.336 54.336 0 0 1 74.88 16.32l17.28 26.88c5.76 9.6 3.84 21.12-4.8 27.84-8.64 7.68-18.24 14.4-28.8 21.12a377.92 377.92 0 0 1-522.24-110.4c-113.28-174.72-63.36-408 111.36-522.24zm526.08 305.28a22.336 22.336 0 0 1 28.8 5.76l23.04 35.52a63.232 63.232 0 0 1-18.24 87.36l-35.52 23.04c-9.6 6.72-22.08 3.84-28.8-5.76l-46.08-71.04c-6.72-9.6-3.84-22.08 5.76-28.8l71.04-46.08z"></path>
+</svg>

package/src/svg/elemePlus.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z"
+		fill="currentColor"></path>
+</svg>

package/src/svg/headset.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="currentColor"
+		d="M896 529.152V512a384 384 0 1 0-768 0v17.152A128 128 0 0 1 320 640v128a128 128 0 1 1-256 0V512a448 448 0 1 1 896 0v256a128 128 0 1 1-256 0V640a128 128 0 0 1 192-110.848zM896 640a64 64 0 0 0-128 0v128a64 64 0 0 0 128 0V640zm-768 0v128a64 64 0 0 0 128 0V640a64 64 0 1 0-128 0z"></path>
+</svg>