@factoringplus/pl-components-pack-v3 0.5.28 → 0.5.30-pre-1

package/dist/pl-components-pack-v3.es.js

@@ -1,4 +1,4 @@
-import { unref, getCurrentScope, onScopeDispose, ref, watch, getCurrentInstance, onMounted, nextTick, readonly, shallowRef, watchEffect, computed as computed$1, openBlock, createElementBlock, createElementVNode, warn, isVNode, provide, inject, onBeforeUnmount, toRef, onUnmounted, isRef, onBeforeMount, defineComponent, mergeProps, renderSlot, useAttrs as useAttrs$1, useSlots, withDirectives, createCommentVNode, Fragment, normalizeClass, createBlock, withCtx, resolveDynamicComponent, withModifiers, createVNode, toDisplayString, normalizeStyle, vShow, Transition, reactive, onUpdated, cloneVNode, Text, Comment, Teleport, onDeactivated, renderList, createTextVNode, toRaw as toRaw$1, vModelCheckbox, toRefs, withKeys, h as h$2, createSlots, triggerRef, resolveComponent, resolveDirective, vModelText, TransitionGroup, createApp, shallowReactive, render, useCssVars, pushScopeId, popScopeId, normalizeProps, guardReactiveProps, createStaticVNode } from "vue";
+import { unref, getCurrentScope, onScopeDispose, ref, watch, getCurrentInstance, onMounted, nextTick, readonly, shallowRef, watchEffect, computed as computed$1, openBlock, createElementBlock, createElementVNode, warn, isVNode, provide, inject, onBeforeUnmount, toRef, onUnmounted, isRef, onBeforeMount, defineComponent, mergeProps, renderSlot, useAttrs as useAttrs$1, useSlots, withDirectives, createCommentVNode, Fragment, normalizeClass, createBlock, withCtx, resolveDynamicComponent, withModifiers, createVNode, toDisplayString, normalizeStyle, vShow, Transition, reactive, onUpdated, cloneVNode, Text, Comment, Teleport, onDeactivated, renderList, createTextVNode, toRaw as toRaw$1, vModelCheckbox, toRefs, withKeys, h as h$2, createSlots, triggerRef, resolveComponent, resolveDirective, vModelText, TransitionGroup, createApp, shallowReactive, render, useCssVars, vModelDynamic, pushScopeId, popScopeId, normalizeProps, guardReactiveProps, createStaticVNode } from "vue";
 import moment from "moment";
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 var freeGlobal$1 = freeGlobal;
@@ -3833,12 +3833,12 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     const props = __props;
     const ns2 = useNamespace("icon");
     const style = computed$1(() => {
-      const { size, color: color2 } = props;
-      if (!size && !color2)
+      const { size, color } = props;
+      if (!size && !color)
         return {};
       return {
         fontSize: isUndefined$1(size) ? void 0 : addUnit(size),
-        "--color": color2
+        "--color": color
       };
     });
     return (_ctx, _cache) => {
@@ -7238,11 +7238,11 @@ function convertHexToDecimal(h2) {
 function parseIntFromHex(val) {
   return parseInt(val, 16);
 }
-function numberInputToObject(color2) {
+function numberInputToObject(color) {
   return {
-    r: color2 >> 16,
-    g: (color2 & 65280) >> 8,
-    b: color2 & 255
+    r: color >> 16,
+    g: (color & 65280) >> 8,
+    b: color & 255
   };
 }
 var names = {
@@ -7395,7 +7395,7 @@ var names = {
   yellow: "#ffff00",
   yellowgreen: "#9acd32"
 };
-function inputToRGB(color2) {
+function inputToRGB(color) {
   var rgb = { r: 0, g: 0, b: 0 };
   var a2 = 1;
   var s2 = null;
@@ -7403,35 +7403,35 @@ function inputToRGB(color2) {
   var l2 = null;
   var ok = false;
   var format2 = false;
-  if (typeof color2 === "string") {
-    color2 = stringInputToObject(color2);
+  if (typeof color === "string") {
+    color = stringInputToObject(color);
   }
-  if (typeof color2 === "object") {
-    if (isValidCSSUnit(color2.r) && isValidCSSUnit(color2.g) && isValidCSSUnit(color2.b)) {
-      rgb = rgbToRgb(color2.r, color2.g, color2.b);
+  if (typeof color === "object") {
+    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+      rgb = rgbToRgb(color.r, color.g, color.b);
       ok = true;
-      format2 = String(color2.r).substr(-1) === "%" ? "prgb" : "rgb";
-    } else if (isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.v)) {
-      s2 = convertToPercentage(color2.s);
-      v2 = convertToPercentage(color2.v);
-      rgb = hsvToRgb(color2.h, s2, v2);
+      format2 = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+      s2 = convertToPercentage(color.s);
+      v2 = convertToPercentage(color.v);
+      rgb = hsvToRgb(color.h, s2, v2);
       ok = true;
       format2 = "hsv";
-    } else if (isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.l)) {
-      s2 = convertToPercentage(color2.s);
-      l2 = convertToPercentage(color2.l);
-      rgb = hslToRgb(color2.h, s2, l2);
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+      s2 = convertToPercentage(color.s);
+      l2 = convertToPercentage(color.l);
+      rgb = hslToRgb(color.h, s2, l2);
       ok = true;
       format2 = "hsl";
     }
-    if (Object.prototype.hasOwnProperty.call(color2, "a")) {
-      a2 = color2.a;
+    if (Object.prototype.hasOwnProperty.call(color, "a")) {
+      a2 = color.a;
     }
   }
   a2 = boundAlpha(a2);
   return {
     ok,
-    format: color2.format || format2,
+    format: color.format || format2,
     r: Math.min(255, Math.max(rgb.r, 0)),
     g: Math.min(255, Math.max(rgb.g, 0)),
     b: Math.min(255, Math.max(rgb.b, 0)),
@@ -7456,43 +7456,43 @@ var matchers = {
   hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
   hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
 };
-function stringInputToObject(color2) {
-  color2 = color2.trim().toLowerCase();
-  if (color2.length === 0) {
+function stringInputToObject(color) {
+  color = color.trim().toLowerCase();
+  if (color.length === 0) {
     return false;
   }
   var named = false;
-  if (names[color2]) {
-    color2 = names[color2];
+  if (names[color]) {
+    color = names[color];
     named = true;
-  } else if (color2 === "transparent") {
+  } else if (color === "transparent") {
     return { r: 0, g: 0, b: 0, a: 0, format: "name" };
   }
-  var match = matchers.rgb.exec(color2);
+  var match = matchers.rgb.exec(color);
   if (match) {
     return { r: match[1], g: match[2], b: match[3] };
   }
-  match = matchers.rgba.exec(color2);
+  match = matchers.rgba.exec(color);
   if (match) {
     return { r: match[1], g: match[2], b: match[3], a: match[4] };
   }
-  match = matchers.hsl.exec(color2);
+  match = matchers.hsl.exec(color);
   if (match) {
     return { h: match[1], s: match[2], l: match[3] };
   }
-  match = matchers.hsla.exec(color2);
+  match = matchers.hsla.exec(color);
   if (match) {
     return { h: match[1], s: match[2], l: match[3], a: match[4] };
   }
-  match = matchers.hsv.exec(color2);
+  match = matchers.hsv.exec(color);
   if (match) {
     return { h: match[1], s: match[2], v: match[3] };
   }
-  match = matchers.hsva.exec(color2);
+  match = matchers.hsva.exec(color);
   if (match) {
     return { h: match[1], s: match[2], v: match[3], a: match[4] };
   }
-  match = matchers.hex8.exec(color2);
+  match = matchers.hex8.exec(color);
   if (match) {
     return {
       r: parseIntFromHex(match[1]),
@@ -7502,7 +7502,7 @@ function stringInputToObject(color2) {
       format: named ? "name" : "hex8"
     };
   }
-  match = matchers.hex6.exec(color2);
+  match = matchers.hex6.exec(color);
   if (match) {
     return {
       r: parseIntFromHex(match[1]),
@@ -7511,7 +7511,7 @@ function stringInputToObject(color2) {
       format: named ? "name" : "hex"
     };
   }
-  match = matchers.hex4.exec(color2);
+  match = matchers.hex4.exec(color);
   if (match) {
     return {
       r: parseIntFromHex(match[1] + match[1]),
@@ -7521,7 +7521,7 @@ function stringInputToObject(color2) {
       format: named ? "name" : "hex8"
     };
   }
-  match = matchers.hex3.exec(color2);
+  match = matchers.hex3.exec(color);
   if (match) {
     return {
       r: parseIntFromHex(match[1] + match[1]),
@@ -7532,27 +7532,27 @@ function stringInputToObject(color2) {
   }
   return false;
 }
-function isValidCSSUnit(color2) {
-  return Boolean(matchers.CSS_UNIT.exec(String(color2)));
+function isValidCSSUnit(color) {
+  return Boolean(matchers.CSS_UNIT.exec(String(color)));
 }
 var TinyColor = function() {
-  function TinyColor2(color2, opts) {
-    if (color2 === void 0) {
-      color2 = "";
+  function TinyColor2(color, opts) {
+    if (color === void 0) {
+      color = "";
     }
     if (opts === void 0) {
       opts = {};
     }
     var _a2;
-    if (color2 instanceof TinyColor2) {
-      return color2;
+    if (color instanceof TinyColor2) {
+      return color;
     }
-    if (typeof color2 === "number") {
-      color2 = numberInputToObject(color2);
+    if (typeof color === "number") {
+      color = numberInputToObject(color);
     }
-    this.originalInput = color2;
-    var rgb = inputToRGB(color2);
-    this.originalInput = color2;
+    this.originalInput = color;
+    var rgb = inputToRGB(color);
+    this.originalInput = color;
     this.r = rgb.r;
     this.g = rgb.g;
     this.b = rgb.b;
@@ -7821,12 +7821,12 @@ var TinyColor = function() {
     hsl.h = hue < 0 ? 360 + hue : hue;
     return new TinyColor2(hsl);
   };
-  TinyColor2.prototype.mix = function(color2, amount) {
+  TinyColor2.prototype.mix = function(color, amount) {
     if (amount === void 0) {
       amount = 50;
     }
     var rgb1 = this.toRgb();
-    var rgb2 = new TinyColor2(color2).toRgb();
+    var rgb2 = new TinyColor2(color).toRgb();
     var p2 = amount / 100;
     var rgba = {
       r: (rgb2.r - rgb1.r) * p2 + rgb1.r,
@@ -7907,13 +7907,13 @@ var TinyColor = function() {
     }
     return result;
   };
-  TinyColor2.prototype.equals = function(color2) {
-    return this.toRgbString() === new TinyColor2(color2).toRgbString();
+  TinyColor2.prototype.equals = function(color) {
+    return this.toRgbString() === new TinyColor2(color).toRgbString();
   };
   return TinyColor2;
 }();
-function darken(color2, amount = 20) {
-  return color2.mix("#141414", amount).toString();
+function darken(color, amount = 20) {
+  return color.mix("#141414", amount).toString();
 }
 function useButtonCustomStyle(props) {
   const _disabled = useDisabled();
@@ -7922,13 +7922,13 @@ function useButtonCustomStyle(props) {
     let styles = {};
     const buttonColor = props.color;
     if (buttonColor) {
-      const color2 = new TinyColor(buttonColor);
-      const activeBgColor = props.dark ? color2.tint(20).toString() : darken(color2, 20);
+      const color = new TinyColor(buttonColor);
+      const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
       if (props.plain) {
         styles = ns2.cssVarBlock({
-          "bg-color": props.dark ? darken(color2, 90) : color2.tint(90).toString(),
+          "bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(),
           "text-color": buttonColor,
-          "border-color": props.dark ? darken(color2, 50) : color2.tint(50).toString(),
+          "border-color": props.dark ? darken(color, 50) : color.tint(50).toString(),
           "hover-text-color": `var(${ns2.cssVarName("color-white")})`,
           "hover-bg-color": buttonColor,
           "hover-border-color": buttonColor,
@@ -7937,13 +7937,13 @@ function useButtonCustomStyle(props) {
           "active-border-color": activeBgColor
         });
         if (_disabled.value) {
-          styles[ns2.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color2, 90) : color2.tint(90).toString();
-          styles[ns2.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color2, 50) : color2.tint(50).toString();
-          styles[ns2.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color2, 80) : color2.tint(80).toString();
+          styles[ns2.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color, 90) : color.tint(90).toString();
+          styles[ns2.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString();
+          styles[ns2.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString();
         }
       } else {
-        const hoverBgColor = props.dark ? darken(color2, 30) : color2.tint(30).toString();
-        const textColor = color2.isDark() ? `var(${ns2.cssVarName("color-white")})` : `var(${ns2.cssVarName("color-black")})`;
+        const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
+        const textColor = color.isDark() ? `var(${ns2.cssVarName("color-white")})` : `var(${ns2.cssVarName("color-black")})`;
         styles = ns2.cssVarBlock({
           "bg-color": buttonColor,
           "text-color": textColor,
@@ -7955,7 +7955,7 @@ function useButtonCustomStyle(props) {
           "active-border-color": activeBgColor
         });
         if (_disabled.value) {
-          const disabledButtonColor = props.dark ? darken(color2, 50) : color2.tint(50).toString();
+          const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString();
           styles[ns2.cssVarBlockName("disabled-bg-color")] = disabledButtonColor;
           styles[ns2.cssVarBlockName("disabled-text-color")] = props.dark ? "rgba(255, 255, 255, 0.5)" : `var(${ns2.cssVarName("color-white")})`;
           styles[ns2.cssVarBlockName("disabled-border-color")] = disabledButtonColor;
@@ -17660,7 +17660,7 @@ const _hoisted_2$B = ["aria-current", "tabindex"];
 const _hoisted_3$t = ["tabindex"];
 const _hoisted_4$l = ["aria-current", "tabindex"];
 const _hoisted_5$f = ["tabindex"];
-const _hoisted_6$8 = ["aria-current", "tabindex"];
+const _hoisted_6$9 = ["aria-current", "tabindex"];
 const __default__$i = defineComponent({
   name: "ElPaginationPager"
 });
@@ -17850,7 +17850,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           ], "number"]),
           "aria-current": _ctx.currentPage === _ctx.pageCount,
           tabindex: unref(tabindex)
-        }, toDisplayString(_ctx.pageCount), 11, _hoisted_6$8)) : createCommentVNode("v-if", true)
+        }, toDisplayString(_ctx.pageCount), 11, _hoisted_6$9)) : createCommentVNode("v-if", true)
       ], 42, _hoisted_1$J);
     };
   }
@@ -18249,9 +18249,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
     });
     const content = computed$1(() => props.format(props.percentage));
-    function getColors(color2) {
-      const span = 100 / color2.length;
-      const seriesColors = color2.map((seriesColor, index) => {
+    function getColors(color) {
+      const span = 100 / color.length;
+      const seriesColors = color.map((seriesColor, index) => {
         if (isString$1(seriesColor)) {
           return {
             color: seriesColor,
@@ -18264,16 +18264,16 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     }
     const getCurrentColor = (percentage) => {
       var _a2;
-      const { color: color2 } = props;
-      if (isFunction$1(color2)) {
-        return color2(percentage);
-      } else if (isString$1(color2)) {
-        return color2;
+      const { color } = props;
+      if (isFunction$1(color)) {
+        return color(percentage);
+      } else if (isString$1(color)) {
+        return color;
       } else {
-        const colors = getColors(color2);
-        for (const color22 of colors) {
-          if (color22.percentage > percentage)
-            return color22.color;
+        const colors = getColors(color);
+        for (const color2 of colors) {
+          if (color2.percentage > percentage)
+            return color2.color;
         }
         return (_a2 = colors[colors.length - 1]) == null ? void 0 : _a2.color;
       }
@@ -25358,25 +25358,117 @@ const PlCurrencyPlugin = {
     app.component("PlCurrency", _sfc_main$F);
   }
 };
-var form = "";
 const _sfc_main$E = {
   __name: "pl-form",
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    rules: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
   setup(__props, { expose }) {
-    const elFormRef = ref(null);
-    expose({
-      elFormRef
+    const props = __props;
+    const { model, rules: rules2 } = toRefs(props);
+    const errorsState = ref([]);
+    provide("errorsState", errorsState);
+    const validate = async (callback) => {
+      return new Promise((resolve, reject) => {
+        const validator2 = new Schema(rules2.value);
+        validator2.validate(model.value, (errors, fields) => {
+          if (errors) {
+            errorsState.value = errors;
+            callback == null ? void 0 : callback(false);
+            reject();
+            return;
+          }
+          errorsState.value = [];
+          callback == null ? void 0 : callback(true);
+          resolve();
+        });
+      });
+    };
+    const clearValidate = (props2 = []) => {
+      if (Array.isArray(props2) && props2.length > 0) {
+        props2.forEach((prop) => {
+          errorsState.value = errorsState.value.filter((error2) => error2.field !== prop);
+        });
+      } else if (!Array.isArray(props2)) {
+        errorsState.value = errorsState.value.filter((error2) => error2.field !== props2);
+      } else {
+        errorsState.value = [];
+      }
+    };
+    const resetFields = (props2 = []) => {
+      if (Array.isArray(props2) && props2.length > 0) {
+        props2.forEach((prop) => {
+          clearValidate(prop);
+          model.value[prop] = null;
+        });
+      } else if (!Array.isArray(props2)) {
+        clearValidate(props2);
+        model.value[props2] = null;
+      } else {
+        for (let prop in model.value) {
+          model.value[prop] = null;
+        }
+        clearValidate(props2);
+      }
+    };
+    const validateField = (prop) => {
+      const rulesValidate = {};
+      const source2 = {};
+      rulesValidate[prop] = rules2.value[prop];
+      source2[prop] = model.value[prop];
+      const validator2 = new Schema(rulesValidate);
+      validator2.validate(source2, (errors, fields) => {
+        errorsState.value = errorsState.value.filter((error2) => error2.field !== prop);
+        if (errors) {
+          errorsState.value = errorsState.value.concat(errors);
+        }
+      });
+    };
+    const plFormRef = ref(null);
+    onMounted(() => {
+      const ref2 = plFormRef.value;
+      for (let index = 0; index < ref2.length; index++) {
+        const element = ref2[index];
+        const prop = element.__vueParentComponent.ctx.prop;
+        if (prop in rules2.value) {
+          rules2.value[prop].forEach((rule) => {
+            if (rule.trigger) {
+              const triggers = rule.trigger.replace(/\s/g, "").split(",");
+              triggers.forEach((trigger) => {
+                useEventListener(element, trigger, (evt) => {
+                  validateField(prop);
+                });
+              });
+            } else {
+              const triggers = ["blur", "change", "input"];
+              triggers.forEach((trigger) => {
+                useEventListener(element, trigger, (evt) => {
+                  validateField(prop);
+                });
+              });
+            }
+          });
+        }
+      }
     });
+    expose({ validate, validateField, clearValidate, resetFields });
     return (_ctx, _cache) => {
-      const _component_el_form = ElForm;
-      return openBlock(), createBlock(_component_el_form, mergeProps({
-        ref_key: "elFormRef",
-        ref: elFormRef
-      }, _ctx.$attrs), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
+      return openBlock(), createElementBlock("form", {
+        ref_key: "plFormRef",
+        ref: plFormRef,
+        onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["prevent"]))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 544);
     };
   }
 };
@@ -25385,6 +25477,7 @@ const PlFormPlugin = {
     app.component("PlForm", _sfc_main$E);
   }
 };
+var form = "";
 var formItem = "";
 var _imports_0$9 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi41OTk5IDguMDAwMzlDMi41OTk5IDUuMDE3NzYgNS4wMTcyNyAyLjYwMDM5IDcuOTk5OSAyLjYwMDM5QzEwLjk4MjUgMi42MDAzOSAxMy4zOTk5IDUuMDE3NzYgMTMuMzk5OSA4LjAwMDM5QzEzLjM5OTkgMTAuOTgzIDEwLjk4MjUgMTMuNDAwNCA3Ljk5OTkgMTMuNDAwNEM1LjAxNzI3IDEzLjQwMDQgMi41OTk5IDEwLjk4MyAyLjU5OTkgOC4wMDAzOVpNNy45OTk5IDEuNDAwMzlDNC4zNTQ1MyAxLjQwMDM5IDEuMzk5OSA0LjM1NTAyIDEuMzk5OSA4LjAwMDM5QzEuMzk5OSAxMS42NDU4IDQuMzU0NTMgMTQuNjAwNCA3Ljk5OTkgMTQuNjAwNEMxMS42NDUzIDE0LjYwMDQgMTQuNTk5OSAxMS42NDU4IDE0LjU5OTkgOC4wMDAzOUMxNC41OTk5IDQuMzU1MDIgMTEuNjQ1MyAxLjQwMDM5IDcuOTk5OSAxLjQwMDM5Wk04LjU5OTkgNS4wMDAzOUM4LjU5OTkgNC42NjkwMiA4LjMzMTI3IDQuNDAwMzkgNy45OTk5IDQuNDAwMzlDNy42Njg1MyA0LjQwMDM5IDcuMzk5OSA0LjY2OTAyIDcuMzk5OSA1LjAwMDM5VjguMzMzNzJDNy4zOTk5IDguNjY1MDkgNy42Njg1MyA4LjkzMzcyIDcuOTk5OSA4LjkzMzcyQzguMzMxMjcgOC45MzM3MiA4LjU5OTkgOC42NjUwOSA4LjU5OTkgOC4zMzM3MlY1LjAwMDM5Wk03Ljk5OTkgMTEuNDkyNkM4LjM4NTYxIDExLjQ5MjYgOC42OTgyOCAxMS4xNzk5IDguNjk4MjggMTAuNzk0MkM4LjY5ODI4IDEwLjQwODUgOC4zODU2MSAxMC4wOTU4IDcuOTk5OSAxMC4wOTU4QzcuNjE0MiAxMC4wOTU4IDcuMzAxNTIgMTAuNDA4NSA3LjMwMTUyIDEwLjc5NDJDNy4zMDE1MiAxMS4xNzk5IDcuNjE0MiAxMS40OTI2IDcuOTk5OSAxMS40OTI2WiIgZmlsbD0iIzY1NjU2NyIvPg0KPC9zdmc+DQo=";
 var _imports_2$3 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik03Ljk5OTAyIDhMMTUuOTk5IDE2IiBzdHJva2U9IiM1MDUwNTEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xNS45OTkgOEw3Ljk5OTAyIDE2IiBzdHJva2U9IiM1MDUwNTEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K";
@@ -25808,7 +25901,7 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _withScopeId$1 = (n2) => (pushScopeId("data-v-134b1af5"), n2 = n2(), popScopeId(), n2);
+const _withScopeId$1 = (n2) => (pushScopeId("data-v-50fa79da"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$y = { class: "pl-input__container" };
 const _hoisted_2$t = {
   key: 0,
@@ -25820,12 +25913,25 @@ const _hoisted_3$o = {
 };
 const _hoisted_4$i = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "pl-input__currency" }, "\u20BD", -1));
 const _hoisted_5$c = {
+  key: 1,
+  class: "el-input"
+};
+const _hoisted_6$8 = { class: "el-input__wrapper" };
+const _hoisted_7$6 = ["type"];
+const _hoisted_8$5 = {
   key: 0,
   class: "pl-input__eye-container"
 };
+const _hoisted_9$5 = { class: "pl-input__helpertext" };
+const _hoisted_10$4 = { key: 0 };
+const _hoisted_11$4 = { key: 1 };
 const _sfc_main$B = {
   __name: "pl-input-plus",
   props: {
+    prop: {
+      type: String,
+      default: ""
+    },
     modelValue: {
       required: true
     },
@@ -25873,6 +25979,10 @@ const _sfc_main$B = {
       type: Object,
       default: () => ({ min: 0 })
     },
+    id: {
+      type: String,
+      default: ""
+    },
     currencyInputOptions: {
       type: Object,
       default: () => ({})
@@ -25882,9 +25992,14 @@ const _sfc_main$B = {
   setup(__props, { emit: emit2 }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "4828fd83": props.width
+      "56b7b87d": props.width
     }));
     const attrs = useAttrs$1();
+    const errors = ref([]);
+    const errorsState = inject("errorsState");
+    watch(errorsState, () => {
+      errors.value = errorsState.value.filter((error2) => error2.field === props.prop);
+    }, { deep: true });
     const id = `id-${Math.random()}`;
     const options = reactive({
       currency: "RUB",
@@ -25964,27 +26079,23 @@ const _sfc_main$B = {
               _hoisted_4$i
             ])
           } : void 0
-        ]), 1040, ["modelValue"])) : (openBlock(), createBlock(_component_el_input, mergeProps({
-          key: 1,
-          id,
-          name: id,
-          type: unref(passwordType) ? "password" : "text"
-        }, unref(attrs), {
-          modelValue: unref(modelValue),
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(modelValue) ? modelValue.value = $event : null)
-        }), createSlots({ _: 2 }, [
-          props.leftIcon ? {
-            name: "prefix",
-            fn: withCtx(() => [
-              createVNode(_component_inline_svg, {
-                src: props.leftIcon
-              }, null, 8, ["src"])
-            ])
-          } : void 0,
-          props.password || unref(showRightIcon) ? {
-            name: "suffix",
-            fn: withCtx(() => [
-              props.password ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
+        ]), 1040, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_5$c, [
+          createElementVNode("div", _hoisted_6$8, [
+            props.leftIcon ? (openBlock(), createBlock(_component_inline_svg, {
+              key: 0,
+              src: props.leftIcon
+            }, null, 8, ["src"])) : createCommentVNode("", true),
+            withDirectives(createElementVNode("input", mergeProps({
+              id,
+              name: id,
+              type: unref(passwordType) ? "password" : "text"
+            }, unref(attrs), {
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(modelValue) ? modelValue.value = $event : null)
+            }), null, 16, _hoisted_7$6), [
+              [vModelDynamic, unref(modelValue)]
+            ]),
+            props.password || unref(showRightIcon) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              props.password ? (openBlock(), createElementBlock("div", _hoisted_8$5, [
                 createVNode(Transition, { name: "el-zoom-in-top" }, {
                   default: withCtx(() => [
                     unref(passwordType) ? (openBlock(), createBlock(_component_inline_svg, {
@@ -26011,17 +26122,19 @@ const _sfc_main$B = {
                 key: 1,
                 src: props.rightIcon
               }, null, 8, ["src"])) : createCommentVNode("", true)
-            ])
-          } : void 0
-        ]), 1040, ["type", "modelValue"])),
-        withDirectives(createElementVNode("span", { class: "pl-input__helpertext" }, toDisplayString(props.helpertext), 513), [
-          [vShow, props.helpertext]
+            ], 64)) : createCommentVNode("", true)
+          ])
+        ])),
+        withDirectives(createElementVNode("span", _hoisted_9$5, [
+          errors.value.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_10$4, toDisplayString(errors.value[0].message), 1)) : props.helpertext ? (openBlock(), createElementBlock("span", _hoisted_11$4, toDisplayString(props.helpertext), 1)) : createCommentVNode("", true)
+        ], 512), [
+          [vShow, props.helpertext || errors.value.length > 0]
         ])
       ]);
     };
   }
 };
-var PlInputPlus = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-134b1af5"]]);
+var PlInputPlus = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-50fa79da"]]);
 const PlInputPlusPlugin = {
   install(app) {
     app.component("PlInputPlus", PlInputPlus);
@@ -38913,7 +39026,7 @@ const _hoisted_4$b = { class: "demo-progress" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "pl-form-progress",
   setup(__props) {
-    const color2 = "#FF7D1F";
+    const color = "#FF7D1F";
     return (_ctx, _cache) => {
       const _component_el_progress = ElProgress;
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
@@ -38921,7 +39034,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           _hoisted_3$g,
           createElementVNode("div", _hoisted_4$b, [
             createVNode(_component_el_progress, {
-              color: color2,
+              color,
               percentage: 50
             })
           ])
@@ -42796,7 +42909,6 @@ const PlTooltipPlugin = {
 var bootstrapCustom = "";
 var root = "";
 var inter = "";
-var color = "";
 const PlPlugin = {
   install(app) {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w;