element-ps 1.0.4 → 1.0.8

package/dist/index.full.js

@@ -4474,6 +4474,9 @@
     },
     maxlength: {
       type: [Number, String]
+    },
+    widget: {
+      type: String
     }
   });
 
@@ -4605,32 +4608,33 @@
     }
   });
 
-  const _hoisted_1$17 = {
+  const _hoisted_1$17 = ["widget"];
+  const _hoisted_2$K = {
     key: 0,
     class: "el-input-group__prepend"
   };
-  const _hoisted_2$K = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
-  const _hoisted_3$v = {
+  const _hoisted_3$v = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
+  const _hoisted_4$n = {
     key: 1,
     class: "el-input__prefix"
   };
-  const _hoisted_4$n = { class: "el-input__prefix-inner" };
-  const _hoisted_5$i = {
+  const _hoisted_5$i = { class: "el-input__prefix-inner" };
+  const _hoisted_6$b = {
     key: 2,
     class: "el-input__suffix"
   };
-  const _hoisted_6$b = { class: "el-input__suffix-inner" };
-  const _hoisted_7$8 = {
+  const _hoisted_7$8 = { class: "el-input__suffix-inner" };
+  const _hoisted_8$5 = {
     key: 3,
     class: "el-input__count"
   };
-  const _hoisted_8$5 = { class: "el-input__count-inner" };
-  const _hoisted_9$3 = {
+  const _hoisted_9$3 = { class: "el-input__count-inner" };
+  const _hoisted_10$2 = {
     key: 3,
     class: "el-input-group__append"
   };
-  const _hoisted_10$2 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
-  const _hoisted_11$1 = {
+  const _hoisted_11$1 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
+  const _hoisted_12$1 = {
     key: 0,
     class: "el-input__count"
   };
@@ -4654,12 +4658,13 @@
         },
         _ctx.$attrs.class
       ]),
-      style: vue.normalizeStyle(_ctx.containerStyle)
+      style: vue.normalizeStyle(_ctx.containerStyle),
+      widget: _ctx.widget
     }, [
       vue.createCommentVNode(" input "),
       _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
         vue.createCommentVNode(" prepend slot "),
-        _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$17, [
+        _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$K, [
           vue.renderSlot(_ctx.$slots, "prepend")
         ])) : vue.createCommentVNode("v-if", true),
         vue.createElementVNode("input", vue.mergeProps({
@@ -4674,10 +4679,10 @@
           "aria-label": _ctx.label,
           placeholder: _ctx.placeholder,
           style: _ctx.inputStyle
-        }), null, 16, _hoisted_2$K),
+        }), null, 16, _hoisted_3$v),
         vue.createCommentVNode(" prefix slot "),
-        _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, [
-          vue.createElementVNode("span", _hoisted_4$n, [
+        _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$n, [
+          vue.createElementVNode("span", _hoisted_5$i, [
             vue.renderSlot(_ctx.$slots, "prefix"),
             _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_ps_icon, {
               key: 0,
@@ -4691,8 +4696,8 @@
           ])
         ])) : vue.createCommentVNode("v-if", true),
         vue.createCommentVNode(" suffix slot "),
-        _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$i, [
-          vue.createElementVNode("span", _hoisted_6$b, [
+        _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$b, [
+          vue.createElementVNode("span", _hoisted_7$8, [
             !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.renderSlot(_ctx.$slots, "suffix"),
               _ctx.suffixIcon ? (vue.openBlock(), vue.createBlock(_component_ps_icon, {
@@ -4723,8 +4728,8 @@
               ]),
               _: 1
             })) : vue.createCommentVNode("v-if", true),
-            _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$8, [
-              vue.createElementVNode("span", _hoisted_8$5, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)
+            _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$5, [
+              vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)
             ])) : vue.createCommentVNode("v-if", true)
           ]),
           _ctx.validateState && _ctx.validateIcon ? (vue.openBlock(), vue.createBlock(_component_ps_icon, {
@@ -4738,7 +4743,7 @@
           })) : vue.createCommentVNode("v-if", true)
         ])) : vue.createCommentVNode("v-if", true),
         vue.createCommentVNode(" append slot "),
-        _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$3, [
+        _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
           vue.renderSlot(_ctx.$slots, "append")
         ])) : vue.createCommentVNode("v-if", true)
       ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
@@ -4754,10 +4759,10 @@
           style: _ctx.computedTextareaStyle,
           "aria-label": _ctx.label,
           placeholder: _ctx.placeholder
-        }), null, 16, _hoisted_10$2),
-        _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)) : vue.createCommentVNode("v-if", true)
+        }), null, 16, _hoisted_11$1),
+        _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12$1, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)) : vue.createCommentVNode("v-if", true)
       ], 64))
-    ], 6)), [
+    ], 14, _hoisted_1$17)), [
       [vue.vShow, _ctx.type !== "hidden"]
     ]);
   }
@@ -5268,6 +5273,214 @@
   });
   const PsBreadcrumbItem = withNoopInstall(script$1w);
 
+  function tryOnScopeDispose(fn) {
+    if (vue.getCurrentScope()) {
+      vue.onScopeDispose(fn);
+      return true;
+    }
+    return false;
+  }
+
+  const isClient = typeof window !== "undefined";
+  const isString = (val) => typeof val === "string";
+  const noop = () => {
+  };
+
+  function createFilterWrapper(filter, fn) {
+    function wrapper(...args) {
+      filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+    }
+    return wrapper;
+  }
+  function throttleFilter(ms, trailing = true, leading = true) {
+    let lastExec = 0;
+    let timer;
+    let preventLeading = !leading;
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+    };
+    const filter = (invoke) => {
+      const duration = vue.unref(ms);
+      const elapsed = Date.now() - lastExec;
+      clear();
+      if (duration <= 0) {
+        lastExec = Date.now();
+        return invoke();
+      }
+      if (elapsed > duration) {
+        lastExec = Date.now();
+        if (preventLeading)
+          preventLeading = false;
+        else
+          invoke();
+      } else if (trailing) {
+        timer = setTimeout(() => {
+          lastExec = Date.now();
+          if (!leading)
+            preventLeading = true;
+          clear();
+          invoke();
+        }, duration);
+      }
+      if (!leading && !timer)
+        timer = setTimeout(() => preventLeading = true, duration);
+    };
+    return filter;
+  }
+
+  function useThrottleFn(fn, ms = 200, trailing = true, leading = true) {
+    return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
+  }
+
+  function useTimeoutFn(cb, interval, options = {}) {
+    const {
+      immediate = true
+    } = options;
+    const isPending = vue.ref(false);
+    let timer = null;
+    function clear() {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    }
+    function stop() {
+      isPending.value = false;
+      clear();
+    }
+    function start(...args) {
+      clear();
+      isPending.value = true;
+      timer = setTimeout(() => {
+        isPending.value = false;
+        timer = null;
+        cb(...args);
+      }, vue.unref(interval));
+    }
+    if (immediate) {
+      isPending.value = true;
+      if (isClient)
+        start();
+    }
+    tryOnScopeDispose(stop);
+    return {
+      isPending,
+      start,
+      stop
+    };
+  }
+
+  function unrefElement(elRef) {
+    var _a;
+    const plain = vue.unref(elRef);
+    return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  }
+
+  const defaultWindow = isClient ? window : void 0;
+  isClient ? window.document : void 0;
+  isClient ? window.navigator : void 0;
+
+  function useEventListener(...args) {
+    let target;
+    let event;
+    let listener;
+    let options;
+    if (isString(args[0])) {
+      [event, listener, options] = args;
+      target = defaultWindow;
+    } else {
+      [target, event, listener, options] = args;
+    }
+    if (!target)
+      return noop;
+    let cleanup = noop;
+    const stopWatch = vue.watch(() => vue.unref(target), (el) => {
+      cleanup();
+      if (!el)
+        return;
+      el.addEventListener(event, listener, options);
+      cleanup = () => {
+        el.removeEventListener(event, listener, options);
+        cleanup = noop;
+      };
+    }, { immediate: true, flush: "post" });
+    const stop = () => {
+      stopWatch();
+      cleanup();
+    };
+    tryOnScopeDispose(stop);
+    return stop;
+  }
+
+  function useCssVar(prop, target, { window = defaultWindow } = {}) {
+    const variable = vue.ref("");
+    const elRef = vue.computed(() => {
+      var _a;
+      return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+    });
+    vue.watch(elRef, (el) => {
+      if (el && window)
+        variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+    }, { immediate: true });
+    vue.watch(variable, (val) => {
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
+        elRef.value.style.setProperty(prop, val);
+    });
+    return variable;
+  }
+
+  var SwipeDirection;
+  (function(SwipeDirection2) {
+    SwipeDirection2["UP"] = "UP";
+    SwipeDirection2["RIGHT"] = "RIGHT";
+    SwipeDirection2["DOWN"] = "DOWN";
+    SwipeDirection2["LEFT"] = "LEFT";
+    SwipeDirection2["NONE"] = "NONE";
+  })(SwipeDirection || (SwipeDirection = {}));
+
+  function calcColorChannels(c) {
+    let rawColor = c.replace("#", "");
+    if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
+      rawColor = rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2);
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
+      return {
+        red: parseInt(rawColor.slice(0, 2), 16),
+        green: parseInt(rawColor.slice(2, 4), 16),
+        blue: parseInt(rawColor.slice(4, 6), 16)
+      };
+    }
+    return {
+      red: 255,
+      green: 255,
+      blue: 255
+    };
+  }
+  function mixColor(color, percent = 0.2) {
+    let { red, green, blue } = calcColorChannels(color);
+    if (percent > 0) {
+      red *= 1 - percent;
+      green *= 1 - percent;
+      blue *= 1 - percent;
+    } else {
+      const value = Math.abs(percent);
+      red += (255 - red) * Math.abs(percent);
+      green += (255 - green) * value;
+      blue += (255 - blue) * value;
+    }
+    return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+  }
+  function lighten(color, percent = 0.2) {
+    return mixColor(color, -percent);
+  }
+  function darken(color, percent = 0.2) {
+    return mixColor(color, percent);
+  }
+
   const buttonType = [
     "default",
     "primary",
@@ -5301,6 +5514,7 @@
     autofocus: Boolean,
     round: Boolean,
     circle: Boolean,
+    color: String,
     autoInsertSpace: {
       type: Boolean
     }
@@ -5339,7 +5553,44 @@
         size: vue.computed(() => elBtnGroup == null ? void 0 : elBtnGroup.size)
       });
       const buttonType = vue.computed(() => props.type || (elBtnGroup == null ? void 0 : elBtnGroup.type) || "default");
+      const typeColor = vue.computed(() => useCssVar(`--el-color-${props.type}`).value);
+      const buttonStyle = vue.computed(() => {
+        let styles = {};
+        const buttonColor = props.color || typeColor.value;
+        if (buttonColor) {
+          const darkenBgColor = darken(buttonColor, 0.1);
+          if (props.plain) {
+            styles = {
+              "--el-button-bg-color": lighten(buttonColor, 0.9),
+              "--el-button-text-color": buttonColor,
+              "--el-button-hover-text-color": "var(--el-color-white)",
+              "--el-button-hover-bg-color": buttonColor,
+              "--el-button-hover-border-color": buttonColor,
+              "--el-button-active-bg-color": darkenBgColor,
+              "--el-button-active-text-color": "var(--el-color-white)",
+              "--el-button-active-border-color": darkenBgColor
+            };
+          } else {
+            const lightenBgColor = lighten(buttonColor);
+            styles = {
+              "--el-button-bg-color": buttonColor,
+              "--el-button-border-color": buttonColor,
+              "--el-button-hover-bg-color": lightenBgColor,
+              "--el-button-hover-border-color": lightenBgColor,
+              "--el-button-active-bg-color": darkenBgColor,
+              "--el-button-active-border-color": darkenBgColor
+            };
+          }
+          if (buttonDisabled.value) {
+            const disabledButtonColor = lighten(buttonColor, 0.5);
+            styles["--el-button-disabled-bg-color"] = disabledButtonColor;
+            styles["--el-button-disabled-border-color"] = disabledButtonColor;
+          }
+        }
+        return styles;
+      });
       return {
+        buttonStyle,
         buttonSize,
         buttonType,
         buttonDisabled,
@@ -5367,7 +5618,8 @@
       ]),
       disabled: _ctx.buttonDisabled || _ctx.loading,
       autofocus: _ctx.autofocus,
-      type: _ctx.nativeType
+      type: _ctx.nativeType,
+      style: vue.normalizeStyle(_ctx.buttonStyle)
     }, [
       _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_ps_icon, {
         key: 0,
@@ -5389,7 +5641,7 @@
       }, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 2)) : vue.createCommentVNode("v-if", true)
-    ], 10, _hoisted_1$11);
+    ], 14, _hoisted_1$11);
   }
 
   script$1v.render = render$1o;
@@ -10547,149 +10799,6 @@
     }
   });
 
-  function tryOnScopeDispose(fn) {
-    if (vue.getCurrentScope()) {
-      vue.onScopeDispose(fn);
-      return true;
-    }
-    return false;
-  }
-
-  const isClient = typeof window !== "undefined";
-  const isString = (val) => typeof val === "string";
-  const noop = () => {
-  };
-
-  function createFilterWrapper(filter, fn) {
-    function wrapper(...args) {
-      filter(() => fn.apply(this, args), { fn, thisArg: this, args });
-    }
-    return wrapper;
-  }
-  function throttleFilter(ms, trailing = true, leading = true) {
-    let lastExec = 0;
-    let timer;
-    let preventLeading = !leading;
-    const clear = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = void 0;
-      }
-    };
-    const filter = (invoke) => {
-      const duration = vue.unref(ms);
-      const elapsed = Date.now() - lastExec;
-      clear();
-      if (duration <= 0) {
-        lastExec = Date.now();
-        return invoke();
-      }
-      if (elapsed > duration) {
-        lastExec = Date.now();
-        if (preventLeading)
-          preventLeading = false;
-        else
-          invoke();
-      } else if (trailing) {
-        timer = setTimeout(() => {
-          lastExec = Date.now();
-          if (!leading)
-            preventLeading = true;
-          clear();
-          invoke();
-        }, duration);
-      }
-      if (!leading && !timer)
-        timer = setTimeout(() => preventLeading = true, duration);
-    };
-    return filter;
-  }
-
-  function useThrottleFn(fn, ms = 200, trailing = true, leading = true) {
-    return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
-  }
-
-  function useTimeoutFn(cb, interval, options = {}) {
-    const {
-      immediate = true
-    } = options;
-    const isPending = vue.ref(false);
-    let timer = null;
-    function clear() {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-    }
-    function stop() {
-      isPending.value = false;
-      clear();
-    }
-    function start(...args) {
-      clear();
-      isPending.value = true;
-      timer = setTimeout(() => {
-        isPending.value = false;
-        timer = null;
-        cb(...args);
-      }, vue.unref(interval));
-    }
-    if (immediate) {
-      isPending.value = true;
-      if (isClient)
-        start();
-    }
-    tryOnScopeDispose(stop);
-    return {
-      isPending,
-      start,
-      stop
-    };
-  }
-
-  const defaultWindow = isClient ? window : void 0;
-
-  function useEventListener(...args) {
-    let target;
-    let event;
-    let listener;
-    let options;
-    if (isString(args[0])) {
-      [event, listener, options] = args;
-      target = defaultWindow;
-    } else {
-      [target, event, listener, options] = args;
-    }
-    if (!target)
-      return noop;
-    let cleanup = noop;
-    const stopWatch = vue.watch(() => vue.unref(target), (el) => {
-      cleanup();
-      if (!el)
-        return;
-      el.addEventListener(event, listener, options);
-      cleanup = () => {
-        el.removeEventListener(event, listener, options);
-        cleanup = noop;
-      };
-    }, { immediate: true, flush: "post" });
-    const stop = () => {
-      stopWatch();
-      cleanup();
-    };
-    tryOnScopeDispose(stop);
-    return stop;
-  }
-
-  var SwipeDirection;
-  (function(SwipeDirection2) {
-    SwipeDirection2["UP"] = "UP";
-    SwipeDirection2["RIGHT"] = "RIGHT";
-    SwipeDirection2["DOWN"] = "DOWN";
-    SwipeDirection2["LEFT"] = "LEFT";
-    SwipeDirection2["NONE"] = "NONE";
-  })(SwipeDirection || (SwipeDirection = {}));
-
   const onTouchMove = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -14382,14 +14491,10 @@
       });
       vue.onMounted(() => {
         if (props.prop) {
-          elForm == null ? void 0 : elForm.addField(elFormItem);
           const value = fieldValue.value;
           Array.isArray(value) ? [...value] : value;
         }
       });
-      vue.onBeforeUnmount(() => {
-        elForm == null ? void 0 : elForm.removeField(elFormItem);
-      });
       vue.provide(elFormItemKey, elFormItem);
       const formItemClass = vue.computed(() => [
         {
@@ -15279,42 +15384,6 @@
     };
   }
 
-  function calcColorChannels(c) {
-    let rawColor = c.replace("#", "");
-    if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
-      rawColor = rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2);
-    }
-    if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
-      return {
-        red: parseInt(rawColor.slice(0, 2), 16),
-        green: parseInt(rawColor.slice(2, 4), 16),
-        blue: parseInt(rawColor.slice(4, 6), 16)
-      };
-    }
-    return {
-      red: 255,
-      green: 255,
-      blue: 255
-    };
-  }
-  function mixColor(color, percent = 0.2) {
-    let { red, green, blue } = calcColorChannels(color);
-    if (percent > 0) {
-      red *= 1 - percent;
-      green *= 1 - percent;
-      blue *= 1 - percent;
-    } else {
-      const value = Math.abs(percent);
-      red += (255 - red) * Math.abs(percent);
-      green += (255 - green) * value;
-      blue += (255 - blue) * value;
-    }
-    return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
-  }
-  function darken(color, percent = 0.2) {
-    return mixColor(color, percent);
-  }
-
   function useMenuColor(props) {
     const menuBarColor = vue.computed(() => {
       const color = props.backgroundColor;
@@ -24506,12 +24575,10 @@
           panes.value = [];
         }
       };
-      vue.onUpdated(() => {
-        setPaneInstances();
-      });
-      vue.onMounted(() => {
-        setPaneInstances();
-      });
+      vue.onUpdated(() => setPaneInstances());
+      vue.onMounted(() => setPaneInstances());
+      vue.watch(() => props.activeName, (modelValue) => currentName.value = modelValue);
+      vue.watch(() => props.modelValue, (modelValue) => currentName.value = modelValue);
       return {
         nav$,
         currentName,