@whitesev/pops 2.6.0 → 3.0.0

package/src/components/tooltip/index.ts

@@ -5,8 +5,8 @@ import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import { PopsTooltipConfig } from "./config";
-import type { PopsToolTipDetails } from "./types/index";
+import { PopsTooltipDefaultConfig } from "./defaultConfig";
+import type { PopsToolTipConfig } from "./types/index";
 
 type ToolTipEventTypeName = "MouseEvent" | "TouchEvent";
 
@@ -19,13 +19,13 @@ export class ToolTip {
     $arrow: null as unknown as HTMLElement,
   };
   $data = {
-    config: null as any as Required<PopsToolTipDetails>,
+    config: null as any as Required<PopsToolTipConfig>,
     guid: null as any as string,
     timeId_close_TouchEvent: <number[]>[],
     timeId_close_MouseEvent: <number[]>[],
   };
   constructor(
-    config: Required<PopsToolTipDetails>,
+    config: Required<PopsToolTipConfig>,
     guid: string,
     ShadowInfo: {
       $shadowContainer: HTMLDivElement;
@@ -86,7 +86,7 @@ export class ToolTip {
     // 添加z-index
     $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
     if (this.$data.config.style != null) {
-      /* 添加自定义style */
+      // 添加自定义style
       const cssNode = popsDOMUtils.createElement("style", {
         type: "text/css",
         innerHTML: this.$data.config.style,
@@ -173,9 +173,9 @@ export class ToolTip {
 
     const toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
     const toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
-    /* 目标元素的x轴的中间位置 */
+    // 目标元素的x轴的中间位置
     const targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
-    /* 目标元素的Y轴的中间位置 */
+    // 目标元素的Y轴的中间位置
     const targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
 
     let mouseX = 0;
@@ -235,7 +235,7 @@ export class ToolTip {
    */
   changePosition(event?: MouseEvent | TouchEvent | PointerEvent) {
     const positionInfo = this.calcToolTipPosition(
-      this.$data.config.target,
+      this.$data.config.$target,
       this.$data.config.arrowDistance,
       this.$data.config.otherDistance,
       event
@@ -348,7 +348,7 @@ export class ToolTip {
    */
   onShowEvent() {
     popsDOMUtils.on(
-      this.$data.config.target,
+      this.$data.config.$target,
       this.$data.config.triggerShowEventName,
       this.show,
       this.$data.config.eventOption
@@ -358,7 +358,7 @@ export class ToolTip {
    * 取消绑定 显示事件
    */
   offShowEvent() {
-    popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, {
+    popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, {
       capture: true,
     });
   }
@@ -373,7 +373,7 @@ export class ToolTip {
     if (event && event instanceof MouseEvent) {
       const $target = event.composedPath()[0];
       // 如果是目标元素的子元素/tooltip元素的子元素触发的话，那就不管
-      if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
+      if ($target != this.$data.config.$target && $target != this.$el.$toolTip) {
         return;
       }
     }
@@ -418,7 +418,7 @@ export class ToolTip {
    */
   onCloseEvent() {
     popsDOMUtils.on(
-      this.$data.config.target,
+      this.$data.config.$target,
       this.$data.config.triggerCloseEventName,
       this.close,
       this.$data.config.eventOption
@@ -428,7 +428,7 @@ export class ToolTip {
    * 取消绑定 关闭事件
    */
   offCloseEvent() {
-    popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, {
+    popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, {
       capture: true,
     });
   }
@@ -537,7 +537,7 @@ export class ToolTip {
   }
 }
 
-export type PopsTooltipResult<T extends PopsToolTipDetails> = {
+export type PopsTooltipResult<T extends PopsToolTipConfig> = {
   guid: string;
   config: T;
   $shadowContainer: HTMLDivElement;
@@ -546,15 +546,15 @@ export type PopsTooltipResult<T extends PopsToolTipDetails> = {
 };
 
 export const PopsTooltip = {
-  init(details: PopsToolTipDetails) {
+  init(__config__: PopsToolTipConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "tooltip";
 
-    let config = PopsTooltipConfig();
+    let config = PopsTooltipDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, details);
-    if (!(config.target instanceof HTMLElement)) {
+    config = popsUtils.assign(config, __config__);
+    if (!(config.$target instanceof HTMLElement)) {
       throw new TypeError("config.target 必须是HTMLElement类型");
     }
     config = PopsHandler.handleOnly(popsType, config);
@@ -584,11 +584,11 @@ export const PopsTooltip = {
       $shadowRoot,
     });
     if (config.alwaysShow) {
-      /* 总是显示 */
-      /* 直接显示 */
+      // 总是显示
+      // 直接显示
       toolTip.show();
     } else {
-      /* 事件触发才显示 */
+      // 事件触发才显示
     }
 
     return {

package/src/components/tooltip/types/index.ts

@@ -1,5 +1,5 @@
-import type { PopsCommonConfig } from "../../../types/components";
-import type { PopsPanelCommonDetails } from "../../panel/types/components-common";
+import type { PopsGeneralConfig } from "../../../types/components";
+import type { PopsPanelGeneralConfig } from "../../panel/types/components-common";
 
 /** tooltip的出现位置 */
 export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow";
@@ -7,12 +7,12 @@ export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow"
 /**
  * pops.tooltip
  */
-export interface PopsToolTipDetails
-  extends Pick<PopsCommonConfig, "useShadowRoot" | "only" | "zIndex" | "style" | "beforeAppendToPageCallBack"> {
+export interface PopsToolTipConfig
+  extends Pick<PopsGeneralConfig, "useShadowRoot" | "only" | "zIndex" | "style" | "beforeAppendToPageCallBack"> {
   /**
    * 目标元素
    */
-  target: HTMLElement;
+  $target: HTMLElement;
   /**
    * 显示的文字
    */
@@ -36,7 +36,7 @@ export interface PopsToolTipDetails
    * + `github-tooltip` github的样式
    * @default ""
    */
-  className?: PopsPanelCommonDetails<any>["className"];
+  className?: PopsPanelGeneralConfig<any>["className"];
   /**
    * 是否使用fixed定位，false则是absolute定位
    *
@@ -69,7 +69,9 @@ export interface PopsToolTipDetails
    * 监听的事件配置
    */
   eventOption?: {
-    [P in keyof AddEventListenerOptions]: AddEventListenerOptions[P];
+    once?: boolean;
+    passive?: boolean;
+    capture?: boolean;
   };
   /**
    * 触发显示前的回调

package/src/config/GlobalConfig.ts

@@ -1,11 +1,11 @@
-import type { PopsCommonConfig, PopsDragConfig } from "../types/components";
+import type { PopsGeneralConfig, PopsDragConfig } from "../types/components";
 
 type EnterReturnType<T> = null | T | (() => T);
 
 type GlobalConfigOption = {
   style?: EnterReturnType<string>;
   zIndex?: EnterReturnType<number> | EnterReturnType<string>;
-} & Partial<PopsCommonConfig> &
+} & Partial<PopsGeneralConfig> &
   Partial<PopsDragConfig>;
 
 type ResultGlobalConfigOption<T> = T extends null | undefined ? never : T extends (...args: any) => infer R ? R : T;

package/src/css/common.css

@@ -33,9 +33,15 @@
   align-content: center;
 }
 .pops-width-fill {
+  width: 100%;
   width: -webkit-fill-available;
   width: -moz-available;
 }
+.pops-height-fill {
+  height: 100%;
+  height: -webkit-fill-available;
+  height: -moz-available;
+}
 .pops-text-is-disabled {
   --pops-text-is-disabled-color: #a8abb2;
   color: var(--pops-text-is-disabled-color);

package/src/handler/PopsElementHandler.ts

@@ -1,16 +1,16 @@
-import type { PopsAlertDetails } from "../components/alert/types";
-import type { PopsConfirmDetails } from "../components/confirm/types";
-import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsAlertConfig } from "../components/alert/types";
+import type { PopsConfirmConfig } from "../components/confirm/types";
+import type { PopsIframeConfig } from "../components/iframe/types";
 import type { PopsIconType } from "../types/icon";
 import type {
-  PopsSupportAnimDetails,
-  PopsSupportBottomBtnDetails,
-  PopsSupportContentDetails,
-  PopsSupportHeaderTitleDetails,
-  PopsSupportAnimDetailsType,
-  PopsSupportBottomBtnDetailsType,
-  PopsSupportContentDetailsType,
-  PopsSupportHeaderTitleDetailsType,
+  PopsSupportAnimConfig,
+  PopsSupportBottomButtonConfig,
+  PopsSupportContentConfig,
+  PopsSupportHeaderTitleConfig,
+  PopsSupportAnimConfigType,
+  PopsSupportBottomButtonConfigType,
+  PopsSupportContentConfigType,
+  PopsSupportHeaderTitleConfigType,
 } from "../types/main";
 import { PopsIcon } from "../PopsIcon";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
@@ -40,13 +40,13 @@ export const PopsElementHandler = {
    */
   createAnim(
     guid: string,
-    type: PopsSupportAnimDetailsType,
-    config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails],
+    type: PopsSupportAnimConfigType,
+    config: PopsSupportAnimConfig[keyof PopsSupportAnimConfig],
     html = "",
     bottomBtnHTML = "",
     zIndex: number
   ) {
-    const __config = config as PopsAlertDetails;
+    const __config = config as PopsAlertConfig;
     let popsAnimStyle = "";
     let popsStyle = "";
     const popsPosition = __config.position || "";
@@ -76,22 +76,22 @@ export const PopsElementHandler = {
    * @param config
    */
   createHeader(
-    type: PopsSupportHeaderTitleDetailsType,
-    config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
+    type: PopsSupportHeaderTitleConfigType,
+    config: PopsSupportHeaderTitleConfig[keyof PopsSupportHeaderTitleConfig]
   ): string {
     if (!config.btn) {
       return "";
     }
-    const confirm_config = config as PopsConfirmDetails;
+    const confirm_config = config as PopsConfirmConfig;
     if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
       return "";
     }
     let resultHTML = "";
     // let btnStyle = "";
     let closeHTML = "";
-    const iframe_config = config as PopsIframeDetails;
+    const iframe_config = config as PopsIframeConfig;
     if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
-      /* iframe的 */
+      // iframe的
       let topRightButtonHTML = "";
       iframe_config.topRightButton.split("|").forEach((item: string) => {
         // 最小化、最大化、窗口化、关闭按钮
@@ -124,8 +124,8 @@ export const PopsElementHandler = {
    * @param config 弹窗配置
    */
   createHeaderStyle(
-    type: PopsSupportHeaderTitleDetailsType,
-    config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
+    type: PopsSupportHeaderTitleConfigType,
+    config: PopsSupportHeaderTitleConfig[keyof PopsSupportHeaderTitleConfig]
   ) {
     return {
       headerStyle: config?.title?.html ? config?.title?.style || "" : "",
@@ -138,14 +138,14 @@ export const PopsElementHandler = {
    * @param config
    */
   createBottom(
-    type: PopsSupportBottomBtnDetailsType,
-    config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">
+    type: PopsSupportBottomButtonConfigType,
+    config: Omit<PopsSupportBottomButtonConfig[keyof PopsSupportBottomButtonConfig], "content">
   ): string {
     if (config.btn == null) {
       // 未设置btn参数
       return "";
     }
-    const confirm_config = config as Required<PopsConfirmDetails>;
+    const confirm_config = config as Required<PopsConfirmConfig>;
     if (!(config.btn?.ok?.enable || confirm_config.btn?.cancel?.enable || confirm_config.btn?.other?.enable)) {
       // 确定、取消、其它按钮都未启用直接返回
       return "";
@@ -164,7 +164,7 @@ export const PopsElementHandler = {
       btnStyle += "flex-direction: row-reverse;";
     }
     if (config.btn?.ok?.enable) {
-      /* 处理确定按钮的尺寸问题 */
+      // 处理确定按钮的尺寸问题
       let okButtonSizeClassName = "";
       if (config.btn.ok.size === "large") {
         okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
@@ -196,7 +196,7 @@ export const PopsElementHandler = {
     }
 
     if (confirm_config.btn?.cancel?.enable) {
-      /* 处理取消按钮的尺寸问题 */
+      // 处理取消按钮的尺寸问题
       let cancelButtonSizeClassName = "";
 
       if (confirm_config.btn.cancel.size === "large") {
@@ -229,7 +229,7 @@ export const PopsElementHandler = {
     }
 
     if (confirm_config.btn?.other?.enable) {
-      /* 处理其它按钮的尺寸问题 */
+      // 处理其它按钮的尺寸问题
       let otherButtonSizeClassName = "";
 
       if (confirm_config.btn.other.size === "large") {
@@ -285,12 +285,11 @@ export const PopsElementHandler = {
    * @param config 弹窗配置
    */
   createContentStyle(
-    type: PopsSupportContentDetailsType,
-    config: PopsSupportContentDetails[keyof PopsSupportContentDetails]
+    type: PopsSupportContentConfigType,
+    config: PopsSupportContentConfig[keyof PopsSupportContentConfig]
   ) {
     return {
       contentStyle: (config?.content as any)?.html ? config?.content?.style || "" : "",
-
       contentPStyle: (config?.content as any)?.html ? "" : config?.content?.style || "",
     };
   },

package/src/handler/PopsHandler.ts

@@ -1,18 +1,18 @@
-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 type { PopsAlertConfig } from "../components/alert/types";
+import type { PopsConfirmConfig } from "../components/confirm/types";
+import type { PopsDrawerConfig } from "../components/drawer/types";
+import type { PopsFolderConfig } from "../components/folder/types";
+import type { PopsIframeConfig } from "../components/iframe/types";
+import type { PopsLoadingConfig } from "../components/loading/types";
+import type { PopsPanelConfig } from "../components/panel/types";
+import type { PopsPromptConfig } 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 { PopsGeneralConfig } from "../types/components";
 import type { PopsEventConfig, PopsHandlerEventConfig } from "../types/event";
-import type { PopsInstCommonConfig } from "../types/inst";
-import type { PopsInstStoreType, PopsType, PopsSupportAnimDetailsType, PopsSupportOnlyDetails } from "../types/main";
+import type { PopsInstGeneralConfig } from "../types/inst";
+import type { PopsInstStoreType, PopsType, PopsSupportAnimConfigType, PopsSupportOnlyConfig } from "../types/main";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
 import { popsUtils } from "../utils/PopsUtils";
@@ -21,7 +21,7 @@ export const PopsHandler = {
   /**
    * 创建shadow
    */
-  handlerShadow(config: Pick<PopsCommonConfig, "useShadowRoot">) {
+  handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot">) {
     const $shadowContainer = popsDOMUtils.createElement("div", {
       className: "pops-shadow-container",
     });
@@ -110,12 +110,12 @@ export const PopsHandler = {
       type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
       guid: string;
       config:
-        | Required<PopsAlertDetails>
-        | Required<PopsLoadingDetails>
-        | Required<PopsIframeDetails>
-        | Required<PopsDrawerDetails>
-        | Required<PopsPanelDetails>
-        | Required<PopsFolderDetails>;
+        | Required<PopsAlertConfig>
+        | Required<PopsLoadingConfig>
+        | Required<PopsIframeConfig>
+        | Required<PopsDrawerConfig>
+        | Required<PopsPanelConfig>
+        | Required<PopsFolderConfig>;
       animElement: HTMLElement;
       maskHTML: string;
     }
@@ -134,10 +134,10 @@ export const PopsHandler = {
       const targetInst = PopsInstData[config.type];
       function originalRun() {
         if (config.config.mask!.clickEvent!.toClose) {
-          /* 关闭 */
+          // 关闭
           return PopsInstanceUtils.close(config.config, config.type, targetInst, config.guid, config.animElement);
         } else if (config.config.mask!.clickEvent!.toHide) {
-          /* 隐藏 */
+          // 隐藏
           return PopsInstanceUtils.hide(
             config.config,
             config.type,
@@ -170,20 +170,20 @@ export const PopsHandler = {
             element.hasAttribute("anim")
         );
       }
-      /* 判断按下的元素是否是pops-anim */
+      // 判断按下的元素是否是pops-anim
       popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], void 0, (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
         isMaskClick = isAnimElement($click);
       });
-      /* 如果有动画层，在动画层上监听点击事件 */
+      // 如果有动画层，在动画层上监听点击事件
       popsDOMUtils.on<MouseEvent | PointerEvent>(config.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);
@@ -196,7 +196,7 @@ export const PopsHandler = {
    * @param animElement
    * @param type
    */
-  handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimDetailsType) {
+  handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimConfigType) {
     return {
       /**
        * 主元素
@@ -351,14 +351,14 @@ export const PopsHandler = {
    */
   handleEventConfig(
     config:
-      | PopsAlertDetails
-      | PopsDrawerDetails
-      | PopsPromptDetails
-      | PopsConfirmDetails
-      | PopsIframeDetails
-      | PopsLoadingDetails
-      | PopsPanelDetails
-      | PopsFolderDetails,
+      | PopsAlertConfig
+      | PopsDrawerConfig
+      | PopsPromptConfig
+      | PopsConfirmConfig
+      | PopsIframeConfig
+      | PopsLoadingConfig
+      | PopsPanelConfig
+      | PopsFolderConfig,
     guid: string,
     $shadowContainer: HTMLDivElement,
     $shadowRoot: ShadowRoot | HTMLElement,
@@ -398,14 +398,14 @@ export const PopsHandler = {
    */
   handleLoadingEventConfig(
     config:
-      | PopsAlertDetails
-      | PopsDrawerDetails
-      | PopsPromptDetails
-      | PopsConfirmDetails
-      | PopsIframeDetails
-      | PopsLoadingDetails
-      | PopsPanelDetails
-      | PopsFolderDetails,
+      | PopsAlertConfig
+      | PopsDrawerConfig
+      | PopsPromptConfig
+      | PopsConfirmConfig
+      | PopsIframeConfig
+      | PopsLoadingConfig
+      | PopsPanelConfig
+      | PopsFolderConfig,
     guid: string,
     mode: "loading",
     $anim: HTMLDivElement,
@@ -560,7 +560,7 @@ export const PopsHandler = {
    * @param type 当前弹窗类型
    * @param config 配置
    */
-  handleOnly<T extends Required<PopsSupportOnlyDetails[keyof PopsSupportOnlyDetails]>>(type: PopsType, config: T): T {
+  handleOnly<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(type: PopsType, config: T): T {
     if (config.only) {
       // .loading
       // .tooltip
@@ -602,7 +602,7 @@ export const PopsHandler = {
    * @param type 当前弹窗类型
    * @param value
    */
-  handlePush(type: PopsInstStoreType, value: PopsInstCommonConfig) {
+  handlePush(type: PopsInstStoreType, value: PopsInstGeneralConfig) {
     PopsInstData[type].push(value);
   },
 };

package/src/svg/cpu.svg

@@ -1,8 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="cpu">
+  <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

@@ -1,5 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="delete">
+  <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

@@ -1,5 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="documentCopy">
+  <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

@@ -1,8 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="edit">
+  <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

@@ -1,5 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="eleme">
+  <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

@@ -1,5 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="elemePlus">
+  <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

@@ -1,5 +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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-type="headset">
+  <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>

package/src/svg/hide.svg

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-	<path
-		fill="currentColor"
-		d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"></path>
-	<path
-		fill="currentColor"
-		d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-type="hide">
+  <path
+    fill="currentColor"
+    d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"></path>
+  <path
+    fill="currentColor"
+    d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"></path>
 </svg>