@milaboratories/uikit 2.10.40 → 2.10.42

package/dist/components/PlTextField/PlTextField.vue.d.ts

@@ -1,80 +1,124 @@
-import { Equal } from '@milaboratories/helpers';
 /**
  * Component for one-line string data manipulation
  */
-declare const _default: <M, E = string, C = E>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: Equal<M, E | C> extends true ? M : never) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & ({
-        modelValue: Equal<M, E | C> extends true ? M : never;
-    } & {
-        /**
-         * The label to display above the input field.
-         */
-        label?: string;
-        /**
-         * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
-         * Or you can pass a callback that returns a custom "empty" value (null | undefined | string)
-         */
-        clearable?: boolean | (() => C);
-        /**
-         * An optional callback to parse and/or cast the value, the return type overrides the model type.
-         * The callback must throw an exception if the value is invalid
-         */
-        parse?: (v: string) => E;
-        /**
-         * If `true`, the input field is marked as required.
-         */
-        required?: boolean;
-        /**
-         * An error message to display below the input field.
-         */
-        error?: unknown;
-        /**
-         * A helper text to display below the input field when there are no errors.
-         */
-        helper?: string;
-        /**
-         * A placeholder text to display inside the input field when it is empty.
-         */
-        placeholder?: string;
-        /**
-         * If `true`, the input field is disabled and cannot be interacted with.
-         */
-        disabled?: boolean;
-        /**
-         * If `true`, the input field has a dashed border.
-         */
-        dashed?: boolean;
-        /**
-         * A prefix text to display inside the input field before the value.
-         */
-        prefix?: string;
-        /**
-         * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
-         */
-        rules?: ((v: string) => boolean | string)[];
-        /**
-         * The string specifies whether the field should be a password or not, value could be "password" or undefined.
-         */
-        type?: "password";
-        /**
-         * Makes some of corners not rounded
-         * */
-        groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
-    }) & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {
-        tooltip?(_: {}): any;
-        append?(_: {}): any;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    modelValue?: string;
+} & {
+    /**
+     * The label to display above the input field.
+     */
+    label?: string;
+    /**
+     * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+     */
+    clearable?: boolean;
+    /**
+     * If `true`, the input field is marked as required.
+     */
+    required?: boolean;
+    /**
+     * An error message to display below the input field.
+     */
+    error?: unknown;
+    /**
+     * A helper text to display below the input field when there are no errors.
+     */
+    helper?: string;
+    /**
+     * A placeholder text to display inside the input field when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the input field is disabled and cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input field has a dashed border.
+     */
+    dashed?: boolean;
+    /**
+     * A prefix text to display inside the input field before the value.
+     */
+    prefix?: string;
+    /**
+     * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
+     */
+    rules?: ((v: string) => boolean | string)[];
+    /**
+     * The string specifies whether the field should be a password or not, value could be "password" or undefined.
+     */
+    type?: "password";
+    /**
+     * Makes some of corners not rounded
+     * */
+    groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string;
+} & {
+    /**
+     * The label to display above the input field.
+     */
+    label?: string;
+    /**
+     * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+     */
+    clearable?: boolean;
+    /**
+     * If `true`, the input field is marked as required.
+     */
+    required?: boolean;
+    /**
+     * An error message to display below the input field.
+     */
+    error?: unknown;
+    /**
+     * A helper text to display below the input field when there are no errors.
+     */
+    helper?: string;
+    /**
+     * A placeholder text to display inside the input field when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the input field is disabled and cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input field has a dashed border.
+     */
+    dashed?: boolean;
+    /**
+     * A prefix text to display inside the input field before the value.
+     */
+    prefix?: string;
+    /**
+     * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
+     */
+    rules?: ((v: string) => boolean | string)[];
+    /**
+     * The string specifies whether the field should be a password or not, value could be "password" or undefined.
+     */
+    type?: "password";
+    /**
+     * Makes some of corners not rounded
+     * */
+    groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+    label: HTMLLabelElement;
+    inputRef: HTMLInputElement;
+}, HTMLDivElement>, {
+    tooltip?(_: {}): any;
+    append?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
-    emit: (evt: "update:modelValue", value: Equal<M, E | C> extends true ? M : never) => void;
-}>) => import('vue').VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};
 //# sourceMappingURL=PlTextField.vue.d.ts.map

package/dist/components/PlTextField/PlTextField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AA8PA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAWrD,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;yBACc,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC,EACpC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA2YO,mBAAmB,CAAC;;;;;QA9X1B;;WAEG;gBACK,MAAM;QACd;;;WAGG;oBACS,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;QAC/B;;;WAGG;gBACK,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC;QACxB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;gBACK,OAAO;QACf;;WAEG;iBACM,MAAM;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;iBACM,OAAO;QAChB;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;QAC3C;;WAEG;eACI,UAAU;QACjB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;oBAgUgF,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAtDmB,GAAG;wBACJ,GAAG;;;EAyD5B,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAtZzE,wBAsZ4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAmNA,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;;iBAiIU,MAAM;;IArHjB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;aACM,MAAM;IACf;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;IAC3C;;OAEG;WACI,UAAU;IACjB;;SAEK;oBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;;iBA6DD,MAAM;;IArHjB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;aACM,MAAM;IACf;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;IAC3C;;OAEG;WACI,UAAU;IACjB;;SAEK;oBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;;;;;;qBA4NgB,GAAG;oBACJ,GAAG;;AAhShC,wBA8VK;AASL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/PlTextField/PlTextField.vue2.js

@@ -12,29 +12,28 @@ import "../PlIcon16/index.js";
 import s from "../../assets/images/required.js";
 import { useValidation as c } from "../../utils/useValidation.js";
 import './pl-text-field.css';/* empty css              */
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, reactive as y, ref as b, renderSlot as x, toDisplayString as S, unref as C, useModel as w, useSlots as T, vModelDynamic as E, withCtx as D, withDirectives as O, withModifiers as k } from "vue";
-var A = { class: "pl-text-field__envelope" }, j = {
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, useSlots as w, vModelDynamic as T, withCtx as E, withDirectives as D, withModifiers as O } from "vue";
+var k = { class: "pl-text-field__envelope" }, A = {
 	key: 0,
 	ref: "label"
-}, M = {
+}, j = {
 	key: 1,
 	class: "pl-text-field__prefix"
-}, N = [
+}, M = [
 	"disabled",
 	"placeholder",
 	"type"
-], P = {
+], N = {
 	key: 0,
 	class: "pl-text-field__error"
-}, F = {
+}, P = {
 	key: 1,
 	class: "pl-text-field__helper"
-}, I = /* @__PURE__ */ h({
+}, F = /* @__PURE__ */ h({
 	name: "PlTextField",
 	props: /* @__PURE__ */ g({
 		label: {},
-		clearable: { type: [Boolean, Function] },
-		parse: { type: Function },
+		clearable: { type: Boolean },
 		required: { type: Boolean },
 		error: {},
 		helper: {},
@@ -46,95 +45,77 @@ var A = { class: "pl-text-field__envelope" }, j = {
 		type: {},
 		groupPosition: {}
 	}, {
-		modelValue: { required: !0 },
+		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(h) {
-		let g = T(), I = w(h, "modelValue"), L = h, R = b(void 0), z = b(), B = b(!1), V = y({ cached: void 0 }), H = l({
-			get() {
-				return V.cached ? V.cached.value : I.value === void 0 || I.value === null ? "" : String(I.value);
-			},
-			set(e) {
-				if (V.cached = void 0, L.parse) try {
-					I.value = L.parse(e);
-				} catch (t) {
-					V.cached = {
-						error: t instanceof Error ? t.message : String(t),
-						value: e
-					};
-				}
-				else I.value = e;
-			}
-		}), U = l(() => L.type && L.type === "password" ? B.value ? "text" : L.type : "text"), W = l(() => B.value ? "view-show" : "view-hide"), G = () => {
-			L.clearable && (V.cached = void 0, I.value = L.clearable === !0 ? "" : L.clearable());
-		}, K = c(H, L.rules || []), q = l(() => L.clearable ? L.clearable === !0 ? I.value === "" : I.value === L.clearable() : I.value === ""), J = l(() => !q.value), Y = l(() => {
-			let e = [], n = t(L.error);
-			return n && e.push(n), V.cached && e.push(V.cached.error), K.value.isValid || e.push(...K.value.errors), e;
-		}), X = l(() => Y.value.length > 0), Z = l(() => L.clearable && J.value && L.type !== "password" && !L.disabled), Q = () => B.value = !B.value, $ = () => {
-			V.cached = void 0;
-		}, ee = () => z.value?.focus();
-		return o(R), (t, o) => (v(), f("div", A, [p("div", {
+		let g = w(), F = C(h, "modelValue"), I = h, L = y(void 0), R = y(), z = y(!1), B = l(() => I.type && I.type === "password" ? z.value ? "text" : I.type : "text"), V = l(() => z.value ? "view-show" : "view-hide"), H = () => {
+			I.clearable && (F.value = "");
+		}, U = c(F, I.rules || []), W = l(() => F.value === ""), G = l(() => !W.value), K = l(() => {
+			let e = [], n = t(I.error);
+			return n && e.push(n), U.value.isValid || e.push(...U.value.errors), e;
+		}), q = l(() => K.value.length > 0), J = l(() => I.clearable && G.value && I.type !== "password" && !I.disabled), Y = () => z.value = !z.value, X = () => R.value?.focus();
+		return o(L), (t, o) => (v(), f("div", k, [p("div", {
 			ref_key: "rootRef",
-			ref: R,
+			ref: L,
 			class: _(["pl-text-field", {
-				error: X.value,
+				error: q.value,
 				disabled: h.disabled,
 				dashed: h.dashed,
-				nonEmpty: J.value
+				nonEmpty: G.value
 			}])
 		}, [
-			h.label ? (v(), f("label", j, [
-				h.required ? (v(), u(C(n), {
+			h.label ? (v(), f("label", A, [
+				h.required ? (v(), u(S(n), {
 					key: 0,
-					uri: C(s)
+					uri: S(s)
 				}, null, 8, ["uri"])) : d("", !0),
-				p("span", null, S(h.label), 1),
-				C(g).tooltip ? (v(), u(C(e), {
+				p("span", null, x(h.label), 1),
+				S(g).tooltip ? (v(), u(S(e), {
 					key: 1,
 					class: "info",
 					position: "top"
 				}, {
-					tooltip: D(() => [x(t.$slots, "tooltip")]),
+					tooltip: E(() => [b(t.$slots, "tooltip")]),
 					_: 3
 				})) : d("", !0)
 			], 512)) : d("", !0),
-			h.prefix ? (v(), f("div", M, S(h.prefix), 1)) : d("", !0),
-			O(p("input", {
+			h.prefix ? (v(), f("div", j, x(h.prefix), 1)) : d("", !0),
+			D(p("input", {
 				ref_key: "inputRef",
-				ref: z,
-				"onUpdate:modelValue": o[0] ||= (e) => H.value = e,
+				ref: R,
+				"onUpdate:modelValue": o[0] ||= (e) => F.value = e,
 				disabled: h.disabled,
 				placeholder: h.placeholder || "...",
-				type: U.value,
-				spellcheck: "false",
-				onFocusout: $
-			}, null, 40, N), [[E, H.value]]),
+				type: B.value,
+				spellcheck: "false"
+			}, null, 8, M), [[T, F.value]]),
 			p("div", {
 				class: "pl-text-field__append",
-				onClick: ee
+				onClick: X
 			}, [
-				Z.value ? (v(), u(C(i), {
+				J.value ? (v(), u(S(i), {
 					key: 0,
 					class: "pl-text-field__clearable",
 					name: "delete-clear",
-					onClick: k(G, ["stop"])
+					onClick: O(H, ["stop"])
 				})) : d("", !0),
-				h.type === "password" ? (v(), u(C(r), {
+				h.type === "password" ? (v(), u(S(r), {
 					key: 1,
-					name: W.value,
+					name: V.value,
 					style: { cursor: "pointer" },
-					onClick: k(Q, ["stop"])
+					onClick: O(Y, ["stop"])
 				}, null, 8, ["name"])) : d("", !0),
-				x(t.$slots, "append")
+				b(t.$slots, "append")
 			]),
 			m(a, {
 				class: "pl-text-field__contour",
 				"group-position": h.groupPosition
 			}, null, 8, ["group-position"])
-		], 2), X.value ? (v(), f("div", P, S(Y.value.join(" ")), 1)) : h.helper ? (v(), f("div", F, S(h.helper), 1)) : d("", !0)]));
+		], 2), q.value ? (v(), f("div", N, x(K.value.join(" ")), 1)) : h.helper ? (v(), f("div", P, x(h.helper), 1)) : d("", !0)]));
 	}
 });
-export { I as default };
+export { F as default };
 
 //# sourceMappingURL=PlTextField.vue2.js.map

package/dist/components/PlTextField/PlTextField.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport type { Equal } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E | C> extends true ? M : never; // basically in === out\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<Model>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * Or you can pass a callback that returns a custom \"empty\" value (null | undefined | string)\n   */\n  clearable?: boolean | (() => C);\n  /**\n   * An optional callback to parse and/or cast the value, the return type overrides the model type.\n   * The callback must throw an exception if the value is invalid\n   */\n  parse?: (v: string) => E;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: \"password\";\n  /**\n   * Makes some of corners not rounded\n   * */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n  cached: undefined as { error: string; value: string } | undefined,\n});\n\nconst valueRef = computed<string>({\n  get() {\n    if (data.cached) {\n      return data.cached.value;\n    }\n    return model.value === undefined || model.value === null ? \"\" : String(model.value);\n  },\n  set(value) {\n    data.cached = undefined;\n\n    if (props.parse) {\n      try {\n        model.value = props.parse(value) as Model;\n      } catch (err) {\n        data.cached = {\n          error: err instanceof Error ? err.message : String(err),\n          value,\n        };\n      }\n    } else {\n      model.value = value as Model;\n    }\n  },\n});\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    data.cached = undefined;\n    model.value = props.clearable === true ? (\"\" as Model) : (props.clearable() as Model);\n  }\n};\n\nconst validationData = useValidation(valueRef, props.rules || []);\n\nconst isEmpty = computed(() => {\n  if (props.clearable) {\n    return props.clearable === true ? model.value === \"\" : model.value === props.clearable();\n  }\n\n  return model.value === \"\";\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (data.cached) {\n    errors.push(data.cached.error);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n  data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"valueRef\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        @focusout=\"onFocusOut\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<string>({\n  default: \"\",\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   */\n  clearable?: boolean;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: \"password\";\n  /**\n   * Makes some of corners not rounded\n   * */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = \"\";\n  }\n};\n\nconst validationData = useValidation(model, props.rules || []);\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAiBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAmB,GAAA,aAE/B,EAEI,IAAQ,GA4DR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAQ;KAIZ,IAAiB,EAAc,GAAO,EAAM,SAAS,EAAE,CAAC,EAExD,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAW,QAAe,CAAC,EAAQ,MAAM,EAEzC,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAO/C,UANI,KACF,EAAO,KAAK,EAAW,EAEpB,EAAe,MAAM,WACxB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEtC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,EAAS,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAoDM,OApDN,GAoDM,CAnDJ,EA8CM,OAAA;YA7CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;cAAgB,EAAA;;;GAOjE,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAOE,SAAA;aANI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAMhB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/index.js

@@ -53,42 +53,42 @@ import ne from "./components/PlSectionSeparator/PlSectionSeparator.js";
 import "./components/PlSectionSeparator/index.js";
 import re from "./components/PlAccordion/PlAccordionSection.js";
 import "./components/PlAccordion/index.js";
-import ie from "./components/PlAlert/PlAlert.js";
+import ie from "./utils/PlCloseModalBtn.js";
+import ae from "./components/PlAlert/PlAlert.js";
 import "./components/PlAlert/index.js";
-import { useLabelNotch as ae } from "./utils/useLabelNotch.js";
+import { useLabelNotch as oe } from "./utils/useLabelNotch.js";
 import "./components/PlIcon16/index.js";
 import "./components/PlMaskIcon24/index.js";
-import { useElementPosition as oe } from "./composition/usePosition.js";
-import se from "./utils/DropdownOverlay/DropdownOverlay.js";
+import { useElementPosition as se } from "./composition/usePosition.js";
+import ce from "./utils/DropdownOverlay/DropdownOverlay.js";
 import "./utils/DropdownOverlay/index.js";
-import { useWatchFetch as ce } from "./composition/useWatchFetch.js";
-import le from "./components/PlAutocomplete/PlAutocomplete.js";
+import { useWatchFetch as le } from "./composition/useWatchFetch.js";
+import ue from "./components/PlAutocomplete/PlAutocomplete.js";
 import "./components/PlAutocomplete/index.js";
-import ue from "./components/PlChip/PlChip.js";
+import de from "./components/PlChip/PlChip.js";
 import "./components/PlChip/index.js";
-import de from "./components/PlAutocompleteMulti/PlAutocompleteMulti.js";
+import fe from "./components/PlAutocompleteMulti/PlAutocompleteMulti.js";
 import "./components/PlAutocompleteMulti/index.js";
-import fe from "./components/PlBtnAccent/PlBtnAccent.js";
+import pe from "./components/PlBtnAccent/PlBtnAccent.js";
 import "./components/PlBtnAccent/index.js";
-import pe from "./components/PlBtnDanger/PlBtnDanger.js";
+import me from "./components/PlBtnDanger/PlBtnDanger.js";
 import "./components/PlBtnDanger/index.js";
-import me from "./components/PlBtnGhost/PlBtnGhost.js";
+import he from "./components/PlBtnGhost/PlBtnGhost.js";
 import "./components/PlBtnGhost/index.js";
-import he from "./components/PlBtnGroup/PlBtnGroup.js";
+import ge from "./components/PlBtnGroup/PlBtnGroup.js";
 import "./components/PlBtnGroup/index.js";
-import ge from "./components/PlBtnSecondary/PlBtnSecondary.js";
-import _e from "./components/PlBtnLink/PlBtnLink.js";
+import _e from "./components/PlBtnSecondary/PlBtnSecondary.js";
+import ve from "./components/PlBtnLink/PlBtnLink.js";
 import "./components/PlBtnLink/index.js";
-import ve from "./components/PlBtnPrimary/PlBtnPrimary.js";
+import $ from "./components/PlBtnPrimary/PlBtnPrimary.js";
 import "./components/PlBtnPrimary/index.js";
 import "./components/PlBtnSecondary/index.js";
-import $ from "./components/PlBtnSplit/PlBtnSplit.js";
+import ye from "./components/PlBtnSplit/PlBtnSplit.js";
 import "./components/PlBtnSplit/index.js";
-import ye from "./components/PlCheckbox/PlCheckbox.js";
+import be from "./components/PlCheckbox/PlCheckbox.js";
 import "./components/PlCheckbox/index.js";
-import be from "./components/PlCheckboxGroup/PlCheckboxGroup.js";
+import xe from "./components/PlCheckboxGroup/PlCheckboxGroup.js";
 import "./components/PlCheckboxGroup/index.js";
-import xe from "./utils/PlCloseModalBtn.js";
 import Se from "./components/PlDialogModal/PlDialogModal.js";
 import "./components/PlDialogModal/index.js";
 import Ce from "./components/PlDropdown/PlDropdown.js";
@@ -168,6 +168,6 @@ import { watchCached as xt } from "./composition/watchCached.js";
 import { icons16 as St } from "./generated/icons-16.js";
 import { icons24 as Ct } from "./generated/icons-24.js";
 var wt = { allCssVariables: I() };
-export { rt as Color, c as ContextProvider, r as DataTable, wt as DemoData, s as DropdownListItem, se as DropdownOverlay, it as Gradient, T as LongText, V as PL_PLACEHOLDER_TEXTS, Q as PlAccordion, re as PlAccordionSection, ie as PlAlert, le as PlAutocomplete, de as PlAutocompleteMulti, H as PlBlockPage, fe as PlBtnAccent, pe as PlBtnDanger, me as PlBtnGhost, he as PlBtnGroup, _e as PlBtnLink, ve as PlBtnPrimary, ge as PlBtnSecondary, $ as PlBtnSplit, Je as PlChartHistogram, Ye as PlChartStackedBar, Xe as PlChartStackedBarCompact, ye as PlCheckbox, be as PlCheckboxGroup, ue as PlChip, xe as PlCloseModalBtn, K as PlContainer, Se as PlDialogModal, Ce as PlDropdown, we as PlDropdownLegacy, Te as PlDropdownLine, Ee as PlDropdownMulti, De as PlDropdownMultiRef, Oe as PlDropdownRef, ke as PlEditableTitle, Ae as PlElementList, Z as PlErrorBoundary, Ue as PlFileDialog, We as PlFileInput, q as PlGrid, X as PlIcon16, R as PlIcon24, W as PlLoaderCircular, z as PlLoaderLogo, je as PlLogView, X as PlMaskIcon16, R as PlMaskIcon24, Ge as PlNotificationAlert, Me as PlNumberField, B as PlPlaceholder, Ne as PlProgressBar, Pe as PlProgressCell, Ie as PlPureSlideModal, Ze as PlRadio, Qe as PlRadioGroup, J as PlRow, Fe as PlSearchField, ne as PlSectionSeparator, Ke as PlSidebarGroup, qe as PlSidebarItem, Le as PlSlideModal, Y as PlSpacer, G as PlSplash, Re as PlStatusTag, L as PlSvg, ze as PlTabs, Be as PlTextArea, Ve as PlTextField, He as PlToggleSwitch, C as PlTooltip, N as Scrollable, w as Slider, P as SliderRange, F as SliderRangeTriple, o as ThemeSwitcher, l as animate, u as animateInfinite, d as call, $e as categoricalColors, _t as computedCached, f as delay, D as detectOutside, E as downloadContent, O as eventListener, vt as filterUiMetadata, k as getElementScrollPosition, yt as getFilterUiMetadata, bt as getFilterUiTypeOptions, St as icons16, Ct as icons24, at as interpolateColor, A as isElementVisible, p as listToOptions, et as magma, m as makeEaseInOut, h as makeEaseOut, ot as normalizeGradient, g as normalizeListOptions, tt as palettes, _ as randomInt, v as randomString, y as requestTick, j as scrollIntoView, ee as showContextMenu, b as throttle, x as timeout, S as useClickOutside, st as useComponentProp, ct as useConfirm, lt as useDraggable, te as useEventListener, ut as useFormState, t as useHover, dt as useInterval, ae as useLabelNotch, i as useLocalStorage, e as useMouse, n as useMouseCapture, U as usePlBlockPageTitleTeleportTarget, ft as usePollingQuery, oe as usePosition, pt as useQuery, M as useResizeObserver, mt as useScroll, ht as useSortable, gt as useSortable2, a as useTheme, ce as useWatchFetch, nt as viridis, xt as watchCached };
+export { rt as Color, c as ContextProvider, r as DataTable, wt as DemoData, s as DropdownListItem, ce as DropdownOverlay, it as Gradient, T as LongText, V as PL_PLACEHOLDER_TEXTS, Q as PlAccordion, re as PlAccordionSection, ae as PlAlert, ue as PlAutocomplete, fe as PlAutocompleteMulti, H as PlBlockPage, pe as PlBtnAccent, me as PlBtnDanger, he as PlBtnGhost, ge as PlBtnGroup, ve as PlBtnLink, $ as PlBtnPrimary, _e as PlBtnSecondary, ye as PlBtnSplit, Je as PlChartHistogram, Ye as PlChartStackedBar, Xe as PlChartStackedBarCompact, be as PlCheckbox, xe as PlCheckboxGroup, de as PlChip, ie as PlCloseModalBtn, K as PlContainer, Se as PlDialogModal, Ce as PlDropdown, we as PlDropdownLegacy, Te as PlDropdownLine, Ee as PlDropdownMulti, De as PlDropdownMultiRef, Oe as PlDropdownRef, ke as PlEditableTitle, Ae as PlElementList, Z as PlErrorBoundary, Ue as PlFileDialog, We as PlFileInput, q as PlGrid, X as PlIcon16, R as PlIcon24, W as PlLoaderCircular, z as PlLoaderLogo, je as PlLogView, X as PlMaskIcon16, R as PlMaskIcon24, Ge as PlNotificationAlert, Me as PlNumberField, B as PlPlaceholder, Ne as PlProgressBar, Pe as PlProgressCell, Ie as PlPureSlideModal, Ze as PlRadio, Qe as PlRadioGroup, J as PlRow, Fe as PlSearchField, ne as PlSectionSeparator, Ke as PlSidebarGroup, qe as PlSidebarItem, Le as PlSlideModal, Y as PlSpacer, G as PlSplash, Re as PlStatusTag, L as PlSvg, ze as PlTabs, Be as PlTextArea, Ve as PlTextField, He as PlToggleSwitch, C as PlTooltip, N as Scrollable, w as Slider, P as SliderRange, F as SliderRangeTriple, o as ThemeSwitcher, l as animate, u as animateInfinite, d as call, $e as categoricalColors, _t as computedCached, f as delay, D as detectOutside, E as downloadContent, O as eventListener, vt as filterUiMetadata, k as getElementScrollPosition, yt as getFilterUiMetadata, bt as getFilterUiTypeOptions, St as icons16, Ct as icons24, at as interpolateColor, A as isElementVisible, p as listToOptions, et as magma, m as makeEaseInOut, h as makeEaseOut, ot as normalizeGradient, g as normalizeListOptions, tt as palettes, _ as randomInt, v as randomString, y as requestTick, j as scrollIntoView, ee as showContextMenu, b as throttle, x as timeout, S as useClickOutside, st as useComponentProp, ct as useConfirm, lt as useDraggable, te as useEventListener, ut as useFormState, t as useHover, dt as useInterval, oe as useLabelNotch, i as useLocalStorage, e as useMouse, n as useMouseCapture, U as usePlBlockPageTitleTeleportTarget, ft as usePollingQuery, se as usePosition, pt as useQuery, M as useResizeObserver, mt as useScroll, ht as useSortable, gt as useSortable2, a as useTheme, le as useWatchFetch, nt as viridis, xt as watchCached };
 
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.10.40",
+  "version": "2.10.42",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -31,8 +31,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.24",
-    "@milaboratories/helpers": "1.13.6",
-    "@platforma-sdk/model": "1.58.11"
+    "@platforma-sdk/model": "1.58.19",
+    "@milaboratories/helpers": "1.13.7"
   },
   "devDependencies": {
     "@vitest/coverage-istanbul": "^4.0.18",
@@ -40,9 +40,9 @@
     "svgo": "^3.3.2",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
-    "@milaboratories/build-configs": "1.5.2",
     "@milaboratories/ts-builder": "1.3.0",
-    "@milaboratories/ts-configs": "1.2.2"
+    "@milaboratories/ts-configs": "1.2.2",
+    "@milaboratories/build-configs": "1.5.2"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/PlAlert/PlAlert.vue

@@ -7,6 +7,8 @@ export default {
 <script lang="ts" setup>
 import "./pl-alert.scss";
 
+import PlCloseModalBtn from "../../utils/PlCloseModalBtn.vue";
+
 defineEmits<{
   /**
    * Emitted when the model value is updated, typically when the close button is clicked.
@@ -89,11 +91,9 @@ const iconMap = {
       <label v-if="label">{{ label }}</label>
       <div class="pl-alert__main__text"><slot /></div>
     </div>
-    <div
+    <PlCloseModalBtn
       v-if="closeable"
       class="pl-alert__close-btn"
-      aria-label="Close alert"
-      role="button"
       @click="$emit('update:modelValue', false)"
     />
   </div>

package/src/components/PlAlert/pl-alert.scss

@@ -72,12 +72,5 @@
     position: absolute;
     top: 10px;
     right: 12px;
-    cursor: pointer;
-    background-color: #d3d7e0;
-    @include mask(url(../../assets/images/24_close.svg), 24px);
-    transition: all 0.1s ease-in-out;
-    &:hover {
-      background-color: var(--main-dark-color);
-    }
   }
 }

package/src/components/PlSlideModal/PlPureSlideModal.vue

@@ -7,9 +7,12 @@ export default {
 
 <script lang="ts" setup>
 import "./pl-slide-modal.scss";
+
 import { ref, useAttrs } from "vue";
+import { useClickOutside } from "../../composition/useClickOutside";
+import { useEventListener } from "../../composition/useEventListener";
+import PlCloseModalBtn from "../../utils/PlCloseModalBtn.vue";
 import TransitionSlidePanel from "../TransitionSlidePanel.vue";
-import { useClickOutside, useEventListener } from "../../index";
 import type { Props } from "./props";
 import { defaultProps } from "./props";
 
@@ -45,7 +48,7 @@ useEventListener(document, "keydown", (evt: KeyboardEvent) => {
         v-bind="attrs"
         @keyup.esc="emit('update:modelValue', false)"
       >
-        <div class="close-dialog-btn" @click="emit('update:modelValue', false)" />
+        <PlCloseModalBtn class="close-dialog-btn" @click="emit('update:modelValue', false)" />
         <slot />
       </div>
     </TransitionSlidePanel>

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -29,16 +29,8 @@
 
   .close-dialog-btn {
     position: absolute;
-    z-index: 1;
     top: 12px;
     right: 12px;
-    cursor: pointer;
-    background-color: #d3d7e0;
-    @include mask(url("../../assets/images/24_close.svg"), 24px);
-
-    &:hover {
-      background-color: var(--main-dark-color);
-    }
   }
 
   &.has-title {