@milaboratories/uikit 2.3.25 → 2.3.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +22 -21
- package/.turbo/turbo-type-check.log +1 -1
- package/CHANGELOG.md +13 -0
- package/dist/components/DataTable/TableComponent.vue.js +1 -1
- package/dist/components/PlFileDialog/Local.vue.js +7 -7
- package/dist/components/PlFileInput/PlFileInput.vue.js +7 -7
- package/dist/components/PlNumberField/PlNumberField.vue.d.ts +47 -24
- package/dist/components/PlNumberField/PlNumberField.vue.d.ts.map +1 -1
- package/dist/components/PlNumberField/PlNumberField.vue.js +97 -109
- package/dist/components/PlNumberField/PlNumberField.vue.js.map +1 -1
- package/dist/components/PlNumberField/parseNumber.d.ts +12 -0
- package/dist/components/PlNumberField/parseNumber.d.ts.map +1 -0
- package/dist/components/PlNumberField/parseNumber.js +77 -0
- package/dist/components/PlNumberField/parseNumber.js.map +1 -0
- package/dist/components/PlSlideModal/PlPureSlideModal.vue.js +1 -1
- package/dist/lib/model/common/dist/index.js +34 -34
- package/dist/lib/model/common/dist/index.js.map +1 -1
- package/dist/sdk/model/dist/index.js +15 -15
- package/dist/sdk/model/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/PlNumberField/PlNumberField.vue +89 -80
- package/src/components/PlNumberField/__tests__/PlNumberField.spec.ts +66 -9
- package/src/components/PlNumberField/parseNumber.ts +121 -0
- package/src/components/PlNumberField/pl-number-field.scss +9 -1
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".
|
|
2
|
-
import { defineComponent as
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".pl-number-field{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);--color-hint: #9d9eae}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{padding-left:12px;border-radius:6px}.pl-number-field__wrapper.withoutArrows{padding-right:12px}.pl-number-field__icons{width:40px;border-radius:0 6px 6px 0;border-left:1px solid var(--contour-color)}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;position:relative;z-index:1}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__hint{margin-top:3px;color:var(--color-hint)}.pl-number-field__error{margin-top:3px;color:var(--txt-error);font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{outline:none;border:none;width:100%;background:unset;text-overflow:ellipsis}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-number-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--color-hint: var(--txt-error)}.pl-number-field.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);display:flex;align-items:center;padding:0 4px;overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);transition:color .3s}.pl-number-field label .required{display:inline-block;font-weight:500;font-size:12px;line-height:16px;color:var(--txt-error);margin-right:4px}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
2
|
+
import { defineComponent as S, mergeModels as A, useModel as R, useSlots as F, ref as f, computed as i, watch as $, createElementBlock as c, openBlock as d, normalizeClass as p, createElementVNode as r, createCommentVNode as m, createVNode as j, withDirectives as T, createTextVNode as U, createBlock as K, toDisplayString as _, unref as C, withCtx as P, renderSlot as Z, vModelText as q } from "vue";
|
|
3
3
|
|
|
4
|
-
import
|
|
5
|
-
import { useLabelNotch as
|
|
4
|
+
import z from "../../utils/DoubleContour.vue.js";
|
|
5
|
+
import { useLabelNotch as G } from "../../utils/useLabelNotch.js";
|
|
6
6
|
import H from "../PlTooltip/PlTooltip.vue.js";
|
|
7
|
-
|
|
7
|
+
import { parseNumber as M } from "./parseNumber.js";
|
|
8
|
+
const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
|
|
8
9
|
key: 0,
|
|
9
10
|
class: "text-description"
|
|
10
|
-
}, W = ["disabled", "placeholder"],
|
|
11
|
+
}, W = ["disabled", "placeholder"], X = {
|
|
11
12
|
key: 0,
|
|
12
|
-
class: "
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
class: "pl-number-field__error"
|
|
14
|
+
}, Y = {
|
|
15
|
+
name: "PlNumberField"
|
|
16
|
+
}, ue = /* @__PURE__ */ S({
|
|
17
|
+
...Y,
|
|
18
|
+
props: /* @__PURE__ */ A({
|
|
16
19
|
disabled: { type: Boolean },
|
|
17
20
|
label: { default: void 0 },
|
|
18
21
|
placeholder: { default: void 0 },
|
|
@@ -28,144 +31,129 @@ const J = { class: "mi-number-field__main-wrapper d-flex" }, Q = {
|
|
|
28
31
|
modelModifiers: {}
|
|
29
32
|
}),
|
|
30
33
|
emits: ["update:modelValue"],
|
|
31
|
-
setup(
|
|
32
|
-
const t =
|
|
33
|
-
|
|
34
|
-
function V(e) {
|
|
35
|
-
return e === void 0 ? "" : String(+e);
|
|
36
|
-
}
|
|
37
|
-
function h(e) {
|
|
38
|
-
return e === "." || e === "," || e === "-";
|
|
39
|
-
}
|
|
34
|
+
setup(g) {
|
|
35
|
+
const t = g, n = R(g, "modelValue"), D = F(), V = f(), v = f();
|
|
36
|
+
G(V);
|
|
40
37
|
function x(e) {
|
|
41
|
-
|
|
42
|
-
return;
|
|
43
|
-
if (h(e))
|
|
44
|
-
return 0;
|
|
45
|
-
let l = e;
|
|
46
|
-
return l = l.replace(",", "."), l = l.replace("−", "-"), l = l.replace("–", "-"), l = l.replace("+", ""), parseFloat(l);
|
|
38
|
+
return e === void 0 ? "" : String(+e);
|
|
47
39
|
}
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
const u = i(() => M(t, s.value)), w = f(void 0), O = () => w.value = void 0;
|
|
41
|
+
$(n, (e) => {
|
|
42
|
+
const l = u.value;
|
|
43
|
+
(l.error || e !== l.value) && O();
|
|
51
44
|
});
|
|
52
|
-
const
|
|
45
|
+
const s = i({
|
|
53
46
|
get() {
|
|
54
|
-
return
|
|
47
|
+
return w.value ?? x(n.value);
|
|
55
48
|
},
|
|
56
49
|
set(e) {
|
|
57
|
-
const l =
|
|
58
|
-
|
|
50
|
+
const l = M(t, e);
|
|
51
|
+
w.value = l.cleanInput, l.error || t.updateOnEnterOrClickOutside ? v.value.value = l.cleanInput : n.value = l.value;
|
|
59
52
|
}
|
|
60
|
-
}),
|
|
61
|
-
function
|
|
62
|
-
|
|
63
|
-
a.value = void 0;
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
a.value = r.value;
|
|
53
|
+
}), h = f(!1);
|
|
54
|
+
function E() {
|
|
55
|
+
u.value.error === void 0 && (n.value = u.value.value);
|
|
67
56
|
}
|
|
68
|
-
const b =
|
|
57
|
+
const b = i(() => {
|
|
69
58
|
let e = [];
|
|
70
59
|
t.errorMessage && e.push(t.errorMessage);
|
|
71
|
-
const l =
|
|
72
|
-
if (l
|
|
73
|
-
e.push(
|
|
74
|
-
else if (t.validate && l !== void 0) {
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
t.minValue !== void 0 && l !== void 0 && l < t.minValue && e.push(`Value must be higher than ${t.minValue}`), t.maxValue !== void 0 && l !== void 0 && l > t.maxValue && e.push(`Value must be less than ${t.maxValue}`);
|
|
60
|
+
const l = u.value;
|
|
61
|
+
if (l.error)
|
|
62
|
+
e.push(l.error.message);
|
|
63
|
+
else if (t.validate && l.value !== void 0) {
|
|
64
|
+
const o = t.validate(l.value);
|
|
65
|
+
o && e.push(o);
|
|
66
|
+
}
|
|
79
67
|
return e = [...e], e.join(" ");
|
|
80
|
-
}),
|
|
81
|
-
const e =
|
|
82
|
-
return t.maxValue !== void 0 && e !== void 0 ? e >= t.maxValue : !1;
|
|
83
|
-
}),
|
|
84
|
-
const e =
|
|
85
|
-
return t.minValue !== void 0 && e !== void 0 ? e <= t.minValue : !1;
|
|
86
|
-
}),
|
|
68
|
+
}), y = i(() => {
|
|
69
|
+
const e = u.value;
|
|
70
|
+
return t.maxValue !== void 0 && e.value !== void 0 ? e.value >= t.maxValue : !1;
|
|
71
|
+
}), k = i(() => {
|
|
72
|
+
const e = u.value;
|
|
73
|
+
return t.minValue !== void 0 && e.value !== void 0 ? e.value <= t.minValue : !1;
|
|
74
|
+
}), a = i(
|
|
87
75
|
() => {
|
|
88
76
|
var e;
|
|
89
77
|
return 10 ** (((e = t.step.toString().split(".").at(1)) == null ? void 0 : e.length) ?? 0);
|
|
90
78
|
}
|
|
91
79
|
);
|
|
92
|
-
function
|
|
93
|
-
const
|
|
94
|
-
if (!
|
|
95
|
-
let
|
|
96
|
-
|
|
80
|
+
function B() {
|
|
81
|
+
const l = u.value.value;
|
|
82
|
+
if (!y.value) {
|
|
83
|
+
let o;
|
|
84
|
+
l === void 0 ? o = t.minValue ? t.minValue : 0 : o = ((l || 0) * a.value + t.step * a.value) / a.value, n.value = t.maxValue !== void 0 ? Math.min(t.maxValue, o) : o;
|
|
97
85
|
}
|
|
98
86
|
}
|
|
99
|
-
function
|
|
100
|
-
const
|
|
101
|
-
if (!
|
|
102
|
-
let
|
|
103
|
-
|
|
87
|
+
function L() {
|
|
88
|
+
const l = u.value.value;
|
|
89
|
+
if (!k.value) {
|
|
90
|
+
let o;
|
|
91
|
+
l === void 0 ? o = 0 : o = ((l || 0) * a.value - t.step * a.value) / a.value, n.value = t.minValue !== void 0 ? Math.max(t.minValue, o) : o;
|
|
104
92
|
}
|
|
105
93
|
}
|
|
106
|
-
function
|
|
107
|
-
var l,
|
|
108
|
-
t.updateOnEnterOrClickOutside && (e.code === "Escape" && (
|
|
94
|
+
function I(e) {
|
|
95
|
+
var l, o;
|
|
96
|
+
t.updateOnEnterOrClickOutside && (e.code === "Escape" && (s.value = x(n.value), (l = v.value) == null || l.blur()), e.code === "Enter" && ((o = v.value) == null || o.blur())), e.code === "Enter" && (s.value = String(n.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), t.useIncrementButtons && e.code === "ArrowUp" && B(), t.useIncrementButtons && e.code === "ArrowDown" && L();
|
|
109
97
|
}
|
|
110
|
-
const
|
|
98
|
+
const N = (e) => {
|
|
111
99
|
e.detail > 1 && e.preventDefault();
|
|
112
100
|
};
|
|
113
|
-
return (e, l) => (
|
|
114
|
-
ref_key: "
|
|
115
|
-
ref:
|
|
116
|
-
class:
|
|
117
|
-
onKeydown: l[3] || (l[3] = (
|
|
101
|
+
return (e, l) => (d(), c("div", {
|
|
102
|
+
ref_key: "rootRef",
|
|
103
|
+
ref: V,
|
|
104
|
+
class: p([{ error: !!b.value.trim(), disabled: e.disabled }, "pl-number-field d-flex-column"]),
|
|
105
|
+
onKeydown: l[3] || (l[3] = (o) => I(o))
|
|
118
106
|
}, [
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
class:
|
|
107
|
+
r("div", J, [
|
|
108
|
+
j(z, { class: "pl-number-field__contour" }),
|
|
109
|
+
r("div", {
|
|
110
|
+
class: p(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !e.useIncrementButtons }])
|
|
123
111
|
}, [
|
|
124
|
-
e.label ? (
|
|
125
|
-
|
|
126
|
-
|
|
112
|
+
e.label ? (d(), c("label", Q, [
|
|
113
|
+
U(_(e.label) + " ", 1),
|
|
114
|
+
C(D).tooltip ? (d(), K(C(H), {
|
|
127
115
|
key: 0,
|
|
128
116
|
class: "info",
|
|
129
117
|
position: "top"
|
|
130
118
|
}, {
|
|
131
|
-
tooltip:
|
|
132
|
-
|
|
119
|
+
tooltip: P(() => [
|
|
120
|
+
Z(e.$slots, "tooltip")
|
|
133
121
|
]),
|
|
134
122
|
_: 3
|
|
135
|
-
})) :
|
|
136
|
-
])) :
|
|
137
|
-
|
|
138
|
-
ref_key: "
|
|
139
|
-
ref:
|
|
140
|
-
"onUpdate:modelValue": l[0] || (l[0] = (
|
|
123
|
+
})) : m("", !0)
|
|
124
|
+
])) : m("", !0),
|
|
125
|
+
T(r("input", {
|
|
126
|
+
ref_key: "inputRef",
|
|
127
|
+
ref: v,
|
|
128
|
+
"onUpdate:modelValue": l[0] || (l[0] = (o) => s.value = o),
|
|
141
129
|
disabled: e.disabled,
|
|
142
130
|
placeholder: e.placeholder,
|
|
143
131
|
class: "text-s flex-grow",
|
|
144
|
-
onFocusin: l[1] || (l[1] = (
|
|
145
|
-
onFocusout: l[2] || (l[2] = (
|
|
146
|
-
|
|
132
|
+
onFocusin: l[1] || (l[1] = (o) => h.value = !0),
|
|
133
|
+
onFocusout: l[2] || (l[2] = (o) => {
|
|
134
|
+
h.value = !1, E();
|
|
147
135
|
})
|
|
148
136
|
}, null, 40, W), [
|
|
149
|
-
[
|
|
137
|
+
[q, s.value]
|
|
150
138
|
])
|
|
151
139
|
], 2),
|
|
152
|
-
e.useIncrementButtons ? (
|
|
140
|
+
e.useIncrementButtons ? (d(), c("div", {
|
|
153
141
|
key: 0,
|
|
154
|
-
class: "
|
|
155
|
-
onMousedown:
|
|
142
|
+
class: "pl-number-field__icons d-flex-column",
|
|
143
|
+
onMousedown: N
|
|
156
144
|
}, [
|
|
157
|
-
|
|
158
|
-
class:
|
|
159
|
-
onClick:
|
|
145
|
+
r("div", {
|
|
146
|
+
class: p([{ disabled: y.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
|
|
147
|
+
onClick: B
|
|
160
148
|
}, l[4] || (l[4] = [
|
|
161
|
-
|
|
149
|
+
r("svg", {
|
|
162
150
|
xmlns: "http://www.w3.org/2000/svg",
|
|
163
151
|
width: "16",
|
|
164
152
|
height: "16",
|
|
165
153
|
viewBox: "0 0 16 16",
|
|
166
154
|
fill: "none"
|
|
167
155
|
}, [
|
|
168
|
-
|
|
156
|
+
r("path", {
|
|
169
157
|
"fill-rule": "evenodd",
|
|
170
158
|
"clip-rule": "evenodd",
|
|
171
159
|
d: "M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z",
|
|
@@ -173,18 +161,18 @@ const J = { class: "mi-number-field__main-wrapper d-flex" }, Q = {
|
|
|
173
161
|
})
|
|
174
162
|
], -1)
|
|
175
163
|
]), 2),
|
|
176
|
-
|
|
177
|
-
class:
|
|
178
|
-
onClick:
|
|
164
|
+
r("div", {
|
|
165
|
+
class: p([{ disabled: k.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
|
|
166
|
+
onClick: L
|
|
179
167
|
}, l[5] || (l[5] = [
|
|
180
|
-
|
|
168
|
+
r("svg", {
|
|
181
169
|
xmlns: "http://www.w3.org/2000/svg",
|
|
182
170
|
width: "16",
|
|
183
171
|
height: "16",
|
|
184
172
|
viewBox: "0 0 16 16",
|
|
185
173
|
fill: "none"
|
|
186
174
|
}, [
|
|
187
|
-
|
|
175
|
+
r("path", {
|
|
188
176
|
"fill-rule": "evenodd",
|
|
189
177
|
"clip-rule": "evenodd",
|
|
190
178
|
d: "M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z",
|
|
@@ -192,13 +180,13 @@ const J = { class: "mi-number-field__main-wrapper d-flex" }, Q = {
|
|
|
192
180
|
})
|
|
193
181
|
], -1)
|
|
194
182
|
]), 2)
|
|
195
|
-
], 32)) :
|
|
183
|
+
], 32)) : m("", !0)
|
|
196
184
|
]),
|
|
197
|
-
b.value.trim() ? (
|
|
185
|
+
b.value.trim() ? (d(), c("div", X, _(b.value), 1)) : m("", !0)
|
|
198
186
|
], 34));
|
|
199
187
|
}
|
|
200
188
|
});
|
|
201
189
|
export {
|
|
202
|
-
|
|
190
|
+
ue as default
|
|
203
191
|
};
|
|
204
192
|
//# sourceMappingURL=PlNumberField.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlNumberField.vue.js","sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-number-field.scss';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\n\ntype NumberInputProps = {\n /** Input is disabled if true */\n disabled?: boolean;\n /** Label on the top border of the field, empty by default */\n label?: string;\n /** Input placeholder, empty by default */\n placeholder?: string;\n /** Step for increment/decrement buttons, 1 by default */\n step?: number;\n /** If defined - show an error if value is lower */\n minValue?: number;\n /** If defined - show an error if value is higher */\n maxValue?: number;\n /** If false - remove buttons on the right */\n useIncrementButtons?: boolean;\n /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside) */\n updateOnEnterOrClickOutside?: boolean;\n /** Error message that shows always when it's provided, without other checks */\n errorMessage?: string;\n /** Additional validity check for input value that must return an error text if failed */\n validate?: (v: number) => string | undefined;\n};\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n step: 1,\n label: undefined,\n placeholder: undefined,\n minValue: undefined,\n maxValue: undefined,\n useIncrementButtons: true,\n updateOnEnter: false,\n errorMessage: undefined,\n validate: undefined,\n});\n\nconst modelValue = defineModel<number | undefined>({ required: true });\n\nconst root = ref<HTMLElement>();\nconst slots = useSlots();\nconst input = ref<HTMLInputElement>();\n\nuseLabelNotch(root);\n\nfunction modelToString(v: number | undefined) {\n return v === undefined ? '' : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model\n}\n\nfunction isPartial(v: string) {\n return v === '.' || v === ',' || v === '-';\n}\nfunction stringToModel(v: string) {\n if (v === '') {\n return undefined;\n }\n if (isPartial(v)) {\n return 0;\n }\n let forParsing = v;\n forParsing = forParsing.replace(',', '.');\n forParsing = forParsing.replace('−', '-'); // minus, replacing for the case of input the whole copied value\n forParsing = forParsing.replace('–', '-'); // dash, replacing for the case of input the whole copied value\n forParsing = forParsing.replace('+', '');\n return parseFloat(forParsing);\n}\n\nconst innerTextValue = ref(modelToString(modelValue.value));\nconst innerNumberValue = computed(() => stringToModel(innerTextValue.value));\n\nwatch(() => modelValue.value, (outerValue) => { // update inner value if outer value is changed\n if (parseFloat(innerTextValue.value) !== outerValue) {\n innerTextValue.value = modelToString(outerValue);\n }\n});\n\nconst NUMBER_REGEX = /^[-−–+]?(\\d+)?[\\\\.,]?(\\d+)?$/; // parseFloat works without errors on strings with multiple dots, or letters in value\nconst inputValue = computed({\n get() {\n return innerTextValue.value;\n },\n set(nextValue: string) {\n const parsedValue = stringToModel(nextValue);\n // we allow to set empty value or valid numeric value, otherwise reset input value to previous valid\n if (parsedValue === undefined\n || (nextValue.match(NUMBER_REGEX) && !isNaN(parsedValue))\n ) {\n innerTextValue.value = nextValue;\n if (!props.updateOnEnterOrClickOutside && !isPartial(nextValue)) { // to avoid applying '-' or '.'\n applyChanges();\n }\n } else if (input.value) {\n input.value.value = innerTextValue.value;\n }\n },\n});\nconst focused = ref(false);\n\nfunction applyChanges() {\n if (innerTextValue.value === '') {\n modelValue.value = undefined;\n return;\n }\n modelValue.value = innerNumberValue.value;\n}\n\nconst errors = computed(() => {\n let ers: string[] = [];\n if (props.errorMessage) {\n ers.push(props.errorMessage);\n }\n const parsedValue = innerNumberValue.value;\n if (parsedValue !== undefined && isNaN(parsedValue)) {\n ers.push('Value is not a number');\n } else if (props.validate && parsedValue !== undefined) {\n const error = props.validate(parsedValue);\n if (error) {\n ers.push(error);\n }\n } else {\n if (props.minValue !== undefined && parsedValue !== undefined && parsedValue < props.minValue) {\n ers.push(`Value must be higher than ${props.minValue}`);\n }\n if (props.maxValue !== undefined && parsedValue !== undefined && parsedValue > props.maxValue) {\n ers.push(`Value must be less than ${props.maxValue}`);\n }\n }\n\n ers = [...ers];\n\n return ers.join(' ');\n});\n\nconst isIncrementDisabled = computed(() => {\n const parsedValue = innerNumberValue.value;\n if (props.maxValue !== undefined && parsedValue !== undefined) {\n return parsedValue >= props.maxValue;\n }\n return false;\n});\n\nconst isDecrementDisabled = computed(() => {\n const parsedValue = innerNumberValue.value;\n if (props.minValue !== undefined && parsedValue !== undefined) {\n return parsedValue <= props.minValue;\n }\n return false;\n});\n\nconst multiplier = computed(() =>\n 10 ** (props.step.toString().split('.').at(1)?.length ?? 0),\n);\n\nfunction increment() {\n const parsedValue = innerNumberValue.value;\n if (!isIncrementDisabled.value) {\n let nV;\n if (parsedValue === undefined) {\n nV = props.minValue ? props.minValue : 0;\n } else {\n nV = ((parsedValue || 0) * multiplier.value\n + props.step * multiplier.value)\n / multiplier.value;\n }\n modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;\n }\n}\n\nfunction decrement() {\n const parsedValue = innerNumberValue.value;\n if (!isDecrementDisabled.value) {\n let nV;\n if (parsedValue === undefined) {\n nV = 0;\n } else {\n nV = ((parsedValue || 0) * multiplier.value\n - props.step * multiplier.value)\n / multiplier.value;\n }\n modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;\n }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if (props.updateOnEnterOrClickOutside) {\n if (e.code === 'Escape') {\n innerTextValue.value = modelToString(modelValue.value);\n input.value?.blur();\n }\n if (e.code === 'Enter') {\n input.value?.blur();\n }\n }\n\n if (e.code === 'Enter') {\n innerTextValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n e.preventDefault();\n }\n if (props.useIncrementButtons && e.code === 'ArrowUp') {\n increment();\n }\n if (props.useIncrementButtons && e.code === 'ArrowDown') {\n decrement();\n }\n}\n\n// https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.\n// this prevents selecting of more than input content in some cases,\n// but also disable selecting input content by double-click (useful feature)\nconst onMousedown = (ev: MouseEvent) => {\n if (ev.detail > 1) {\n ev.preventDefault();\n }\n};\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"{ error: !!errors.trim(), disabled: disabled }\"\n class=\"mi-number-field d-flex-column\"\n @keydown=\"handleKeyPress($event)\"\n >\n <div class=\"mi-number-field__main-wrapper d-flex\">\n <DoubleContour class=\"mi-number-field__contour\"/>\n <div\n class=\"mi-number-field__wrapper flex-grow d-flex flex-align-center\"\n :class=\"{withoutArrows: !useIncrementButtons}\"\n >\n <label v-if=\"label\" class=\"text-description\">\n {{ label }}\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\"/>\n </template>\n </PlTooltip>\n </label>\n <input\n ref=\"input\"\n v-model=\"inputValue\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n class=\"text-s flex-grow\"\n @focusin=\"focused = true\"\n @focusout=\"focused = false; applyChanges()\"\n />\n </div>\n <div v-if=\"useIncrementButtons\" class=\"mi-number-field__icons d-flex-column\" @mousedown=\"onMousedown\">\n <div\n :class=\"{ disabled: isIncrementDisabled }\"\n class=\"mi-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n @click=\"increment\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n fill=\"#110529\"\n />\n </svg>\n </div>\n <div\n :class=\"{ disabled: isDecrementDisabled }\"\n class=\"mi-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n @click=\"decrement\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n fill=\"#110529\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div v-if=\"errors.trim()\" class=\"mi-number-field__hint text-description\">\n {{ errors }}\n </div>\n </div>\n</template>\n"],"names":["props","__props","modelValue","_useModel","root","ref","slots","useSlots","input","useLabelNotch","modelToString","v","isPartial","stringToModel","forParsing","innerTextValue","innerNumberValue","computed","watch","outerValue","NUMBER_REGEX","inputValue","nextValue","parsedValue","applyChanges","focused","errors","ers","error","isIncrementDisabled","isDecrementDisabled","multiplier","_a","increment","nV","decrement","handleKeyPress","_b","onMousedown","ev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PlNumberField.vue.js","sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n * v-model=\"evenNumber\"\n * :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n * :update-on-enter-or-click-outside=\"true\"\n * label=\"Even Number\"\n * />\n */\nexport default {\n name: 'PlNumberField',\n};\n</script>\n\n<script setup lang=\"ts\">\nimport './pl-number-field.scss';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { parseNumber } from './parseNumber';\n\nconst props = withDefaults(defineProps<{\n /** Input is disabled if true */\n disabled?: boolean;\n /** Label on the top border of the field, empty by default */\n label?: string;\n /** Input placeholder, empty by default */\n placeholder?: string;\n /** Step for increment/decrement buttons, 1 by default */\n step?: number;\n /** If defined - show an error if value is lower */\n minValue?: number;\n /** If defined - show an error if value is higher */\n maxValue?: number;\n /** If false - remove buttons on the right */\n useIncrementButtons?: boolean;\n /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside) */\n updateOnEnterOrClickOutside?: boolean;\n /** Error message that shows always when it's provided, without other checks */\n errorMessage?: string;\n /** Additional validity check for input value that must return an error text if failed */\n validate?: (v: number) => string | undefined;\n}>(), {\n step: 1,\n label: undefined,\n placeholder: undefined,\n minValue: undefined,\n maxValue: undefined,\n useIncrementButtons: true,\n updateOnEnter: false,\n errorMessage: undefined,\n validate: undefined,\n});\n\nconst modelValue = defineModel<number | undefined>({ required: true });\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\nconst inputRef = ref<HTMLInputElement>();\n\nuseLabelNotch(rootRef);\n\nfunction modelToString(v: number | undefined) {\n return v === undefined ? '' : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model\n}\n\nconst parsedResult = computed(() => parseNumber(props, inputValue.value));\n\nconst cachedValue = ref<string | undefined>(undefined);\n\nconst resetCachedValue = () => cachedValue.value = undefined;\n\nwatch(modelValue, (n) => {\n const r = parsedResult.value;\n if (r.error || n !== r.value) {\n resetCachedValue();\n }\n});\n\nconst inputValue = computed({\n get() {\n return cachedValue.value ?? modelToString(modelValue.value);\n },\n set(nextValue: string) {\n const r = parseNumber(props, nextValue);\n\n cachedValue.value = r.cleanInput;\n\n if (r.error || props.updateOnEnterOrClickOutside) {\n inputRef.value!.value = r.cleanInput;\n } else {\n modelValue.value = r.value;\n }\n },\n});\n\nconst focused = ref(false);\n\nfunction applyChanges() {\n if (parsedResult.value.error === undefined) {\n modelValue.value = parsedResult.value.value;\n }\n}\n\nconst errors = computed(() => {\n let ers: string[] = [];\n\n if (props.errorMessage) {\n ers.push(props.errorMessage);\n }\n\n const r = parsedResult.value;\n\n if (r.error) {\n ers.push(r.error.message);\n } else if (props.validate && r.value !== undefined) {\n const error = props.validate(r.value);\n if (error) {\n ers.push(error);\n }\n }\n\n ers = [...ers];\n\n return ers.join(' ');\n});\n\nconst isIncrementDisabled = computed(() => {\n const r = parsedResult.value;\n\n if (props.maxValue !== undefined && r.value !== undefined) {\n return r.value >= props.maxValue;\n }\n\n return false;\n});\n\nconst isDecrementDisabled = computed(() => {\n const r = parsedResult.value;\n\n if (props.minValue !== undefined && r.value !== undefined) {\n return r.value <= props.minValue;\n }\n\n return false;\n});\n\nconst multiplier = computed(() =>\n 10 ** (props.step.toString().split('.').at(1)?.length ?? 0),\n);\n\nfunction increment() {\n const r = parsedResult.value;\n\n const parsedValue = r.value;\n\n if (!isIncrementDisabled.value) {\n let nV;\n if (parsedValue === undefined) {\n nV = props.minValue ? props.minValue : 0;\n } else {\n nV = ((parsedValue || 0) * multiplier.value\n + props.step * multiplier.value)\n / multiplier.value;\n }\n modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;\n }\n}\n\nfunction decrement() {\n const r = parsedResult.value;\n\n const parsedValue = r.value;\n\n if (!isDecrementDisabled.value) {\n let nV;\n if (parsedValue === undefined) {\n nV = 0;\n } else {\n nV = ((parsedValue || 0) * multiplier.value\n - props.step * multiplier.value)\n / multiplier.value;\n }\n modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;\n }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if (props.updateOnEnterOrClickOutside) {\n if (e.code === 'Escape') {\n inputValue.value = modelToString(modelValue.value);\n inputRef.value?.blur();\n }\n if (e.code === 'Enter') {\n inputRef.value?.blur();\n }\n }\n\n if (e.code === 'Enter') {\n inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (props.useIncrementButtons && e.code === 'ArrowUp') {\n increment();\n }\n\n if (props.useIncrementButtons && e.code === 'ArrowDown') {\n decrement();\n }\n}\n\n// https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.\n// this prevents selecting of more than input content in some cases,\n// but also disable selecting input content by double-click (useful feature)\nconst onMousedown = (ev: MouseEvent) => {\n if (ev.detail > 1) {\n ev.preventDefault();\n }\n};\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"{ error: !!errors.trim(), disabled: disabled }\"\n class=\"pl-number-field d-flex-column\"\n @keydown=\"handleKeyPress($event)\"\n >\n <div class=\"pl-number-field__main-wrapper d-flex\">\n <DoubleContour class=\"pl-number-field__contour\"/>\n <div\n class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\"\n :class=\"{withoutArrows: !useIncrementButtons}\"\n >\n <label v-if=\"label\" class=\"text-description\">\n {{ label }}\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\"/>\n </template>\n </PlTooltip>\n </label>\n <input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n class=\"text-s flex-grow\"\n @focusin=\"focused = true\"\n @focusout=\"focused = false; applyChanges()\"\n />\n </div>\n <div v-if=\"useIncrementButtons\" class=\"pl-number-field__icons d-flex-column\" @mousedown=\"onMousedown\">\n <div\n :class=\"{ disabled: isIncrementDisabled }\"\n class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n @click=\"increment\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n fill=\"#110529\"\n />\n </svg>\n </div>\n <div\n :class=\"{ disabled: isDecrementDisabled }\"\n class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n @click=\"decrement\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n fill=\"#110529\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div v-if=\"errors.trim()\" class=\"pl-number-field__error\">\n {{ errors }}\n </div>\n </div>\n</template>\n"],"names":["__default__","props","__props","modelValue","_useModel","slots","useSlots","rootRef","ref","inputRef","useLabelNotch","modelToString","v","parsedResult","computed","parseNumber","inputValue","cachedValue","resetCachedValue","watch","n","r","nextValue","focused","applyChanges","errors","ers","error","isIncrementDisabled","isDecrementDisabled","multiplier","_a","increment","parsedValue","nV","decrement","handleKeyPress","_b","onMousedown","ev"],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type ParseResult = {
|
|
2
|
+
error?: Error;
|
|
3
|
+
value?: number;
|
|
4
|
+
cleanInput: string;
|
|
5
|
+
};
|
|
6
|
+
export declare function parseNumber(props: {
|
|
7
|
+
minValue?: number;
|
|
8
|
+
maxValue?: number;
|
|
9
|
+
validate?: (v: number) => string | undefined;
|
|
10
|
+
}, str: string): ParseResult;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=parseNumber.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parseNumber.d.ts","sourceRoot":"","sources":["../../../src/components/PlNumberField/parseNumber.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AA8CF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAC9C,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,CAkE3B"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
const a = /^[-−–+]?(\d+)?[.,]?(\d+)?$/;
|
|
2
|
+
function i(r) {
|
|
3
|
+
return r === "." || r === "," || r === "-";
|
|
4
|
+
}
|
|
5
|
+
function l(r) {
|
|
6
|
+
return r = r.trim(), r = r.replace(",", "."), r = r.replace("−", "-"), r = r.replace("–", "-"), r = r.replace("+", ""), r;
|
|
7
|
+
}
|
|
8
|
+
function o(r) {
|
|
9
|
+
return parseFloat(l(r));
|
|
10
|
+
}
|
|
11
|
+
function c(r) {
|
|
12
|
+
if (r = r.trim(), i(r))
|
|
13
|
+
return r;
|
|
14
|
+
if (/^-[^0-9.]/.test(r))
|
|
15
|
+
return "-";
|
|
16
|
+
const n = r.match(/^(.*)[.,][^0-9].*$/);
|
|
17
|
+
if (n)
|
|
18
|
+
return n[1] + ".";
|
|
19
|
+
if (r.match(a))
|
|
20
|
+
return l(r);
|
|
21
|
+
const e = o(r);
|
|
22
|
+
return isNaN(e) ? "" : String(+e);
|
|
23
|
+
}
|
|
24
|
+
function m(r, n) {
|
|
25
|
+
n = n.trim();
|
|
26
|
+
const e = c(n);
|
|
27
|
+
if (n === "")
|
|
28
|
+
return {
|
|
29
|
+
value: void 0,
|
|
30
|
+
cleanInput: e
|
|
31
|
+
};
|
|
32
|
+
if (!n.match(a))
|
|
33
|
+
return {
|
|
34
|
+
error: Error("Value is not a number"),
|
|
35
|
+
cleanInput: e
|
|
36
|
+
};
|
|
37
|
+
if (i(n))
|
|
38
|
+
return {
|
|
39
|
+
error: Error("Enter a number"),
|
|
40
|
+
cleanInput: e
|
|
41
|
+
};
|
|
42
|
+
const t = o(n);
|
|
43
|
+
if (isNaN(t))
|
|
44
|
+
return {
|
|
45
|
+
error: Error("Value is not a number"),
|
|
46
|
+
cleanInput: e
|
|
47
|
+
};
|
|
48
|
+
if (r.minValue !== void 0 && t < r.minValue)
|
|
49
|
+
return {
|
|
50
|
+
error: Error(`Value must be higher than ${r.minValue}`),
|
|
51
|
+
value: t,
|
|
52
|
+
cleanInput: e
|
|
53
|
+
};
|
|
54
|
+
if (r.maxValue !== void 0 && t > r.maxValue)
|
|
55
|
+
return {
|
|
56
|
+
error: Error(`Value must be less than ${r.maxValue}`),
|
|
57
|
+
value: t,
|
|
58
|
+
cleanInput: e
|
|
59
|
+
};
|
|
60
|
+
if (r.validate) {
|
|
61
|
+
const u = r.validate(t);
|
|
62
|
+
if (u)
|
|
63
|
+
return {
|
|
64
|
+
error: Error(u),
|
|
65
|
+
value: t,
|
|
66
|
+
cleanInput: e
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
return {
|
|
70
|
+
value: t,
|
|
71
|
+
cleanInput: e
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
export {
|
|
75
|
+
m as parseNumber
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=parseNumber.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parseNumber.js","sources":["../../../src/components/PlNumberField/parseNumber.ts"],"sourcesContent":["type ParseResult = {\n error?: Error;\n value?: number;\n cleanInput: string;\n};\n\nconst NUMBER_REGEX = /^[-−–+]?(\\d+)?[.,]?(\\d+)?$/; // parseFloat works without errors on strings with multiple dots, or letters in value\n\nfunction isPartial(v: string) {\n return v === '.' || v === ',' || v === '-';\n}\n\nfunction clearNumericValue(v: string) {\n v = v.trim();\n v = v.replace(',', '.');\n v = v.replace('−', '-'); // minus, replacing for the case of input the whole copied value\n v = v.replace('–', '-'); // dash, replacing for the case of input the whole copied value\n v = v.replace('+', '');\n return v;\n}\n\nfunction stringToNumber(v: string) {\n return parseFloat(clearNumericValue(v));\n}\n\nfunction clearInput(v: string): string {\n v = v.trim();\n\n if (isPartial(v)) {\n return v;\n }\n\n if (/^-[^0-9.]/.test(v)) {\n return '-';\n }\n\n const match = v.match(/^(.*)[.,][^0-9].*$/);\n if (match) {\n return match[1] + '.';\n }\n\n if (v.match(NUMBER_REGEX)) {\n return clearNumericValue(v);\n }\n\n const n = stringToNumber(v);\n\n return isNaN(n) ? '' : String(+n);\n}\n\nexport function parseNumber(props: {\n minValue?: number;\n maxValue?: number;\n validate?: (v: number) => string | undefined;\n}, str: string): ParseResult {\n str = str.trim();\n\n const cleanInput = clearInput(str);\n\n if (str === '') {\n return {\n value: undefined,\n cleanInput,\n };\n }\n\n if (!str.match(NUMBER_REGEX)) {\n return {\n error: Error('Value is not a number'),\n cleanInput,\n };\n }\n\n if (isPartial(str)) {\n return {\n error: Error('Enter a number'),\n cleanInput,\n };\n }\n\n const value = stringToNumber(str);\n\n if (isNaN(value)) {\n return {\n error: Error('Value is not a number'),\n cleanInput,\n };\n }\n\n if (props.minValue !== undefined && value < props.minValue) {\n return {\n error: Error(`Value must be higher than ${props.minValue}`),\n value,\n cleanInput,\n };\n }\n\n if (props.maxValue !== undefined && value > props.maxValue) {\n return {\n error: Error(`Value must be less than ${props.maxValue}`),\n value,\n cleanInput,\n };\n }\n\n if (props.validate) {\n const error = props.validate(value);\n if (error) {\n return {\n error: Error(error),\n value,\n cleanInput,\n };\n }\n }\n\n return {\n value,\n cleanInput,\n };\n}\n"],"names":["NUMBER_REGEX","isPartial","v","clearNumericValue","stringToNumber","clearInput","match","n","parseNumber","props","str","cleanInput","value","error"],"mappings":"AAMA,MAAMA,IAAe;AAErB,SAASC,EAAUC,GAAW;AAC5B,SAAOA,MAAM,OAAOA,MAAM,OAAOA,MAAM;AACzC;AAEA,SAASC,EAAkBD,GAAW;AACpC,SAAAA,IAAIA,EAAE,KAAK,GACPA,IAAAA,EAAE,QAAQ,KAAK,GAAG,GAClBA,IAAAA,EAAE,QAAQ,KAAK,GAAG,GAClBA,IAAAA,EAAE,QAAQ,KAAK,GAAG,GAClBA,IAAAA,EAAE,QAAQ,KAAK,EAAE,GACdA;AACT;AAEA,SAASE,EAAeF,GAAW;AAC1B,SAAA,WAAWC,EAAkBD,CAAC,CAAC;AACxC;AAEA,SAASG,EAAWH,GAAmB;AAGjC,MAFJA,IAAIA,EAAE,KAAK,GAEPD,EAAUC,CAAC;AACN,WAAAA;AAGL,MAAA,YAAY,KAAKA,CAAC;AACb,WAAA;AAGH,QAAAI,IAAQJ,EAAE,MAAM,oBAAoB;AAC1C,MAAII;AACK,WAAAA,EAAM,CAAC,IAAI;AAGhB,MAAAJ,EAAE,MAAMF,CAAY;AACtB,WAAOG,EAAkBD,CAAC;AAGtB,QAAAK,IAAIH,EAAeF,CAAC;AAE1B,SAAO,MAAMK,CAAC,IAAI,KAAK,OAAO,CAACA,CAAC;AAClC;AAEgB,SAAAC,EAAYC,GAIzBC,GAA0B;AAC3B,EAAAA,IAAMA,EAAI,KAAK;AAET,QAAAC,IAAaN,EAAWK,CAAG;AAEjC,MAAIA,MAAQ;AACH,WAAA;AAAA,MACL,OAAO;AAAA,MACP,YAAAC;AAAA,IACF;AAGF,MAAI,CAACD,EAAI,MAAMV,CAAY;AAClB,WAAA;AAAA,MACL,OAAO,MAAM,uBAAuB;AAAA,MACpC,YAAAW;AAAA,IACF;AAGE,MAAAV,EAAUS,CAAG;AACR,WAAA;AAAA,MACL,OAAO,MAAM,gBAAgB;AAAA,MAC7B,YAAAC;AAAA,IACF;AAGI,QAAAC,IAAQR,EAAeM,CAAG;AAE5B,MAAA,MAAME,CAAK;AACN,WAAA;AAAA,MACL,OAAO,MAAM,uBAAuB;AAAA,MACpC,YAAAD;AAAA,IACF;AAGF,MAAIF,EAAM,aAAa,UAAaG,IAAQH,EAAM;AACzC,WAAA;AAAA,MACL,OAAO,MAAM,6BAA6BA,EAAM,QAAQ,EAAE;AAAA,MAC1D,OAAAG;AAAA,MACA,YAAAD;AAAA,IACF;AAGF,MAAIF,EAAM,aAAa,UAAaG,IAAQH,EAAM;AACzC,WAAA;AAAA,MACL,OAAO,MAAM,2BAA2BA,EAAM,QAAQ,EAAE;AAAA,MACxD,OAAAG;AAAA,MACA,YAAAD;AAAA,IACF;AAGF,MAAIF,EAAM,UAAU;AACZ,UAAAI,IAAQJ,EAAM,SAASG,CAAK;AAClC,QAAIC;AACK,aAAA;AAAA,QACL,OAAO,MAAMA,CAAK;AAAA,QAClB,OAAAD;AAAA,QACA,YAAAD;AAAA,MACF;AAAA,EACF;AAGK,SAAA;AAAA,IACL,OAAAC;AAAA,IACA,YAAAD;AAAA,EACF;AACF;"}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
.resizable-input{position:relative;box-sizing:border-box;padding:0 8px;display:inline-block;max-width:100%;text-overflow:ellipsis;overflow:hidden}.resizable-input__size-span{font-family:inherit;white-space:pre;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;left:0;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.resizable-input input{border:none;outline:none;height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;right:0;font-size:inherit;line-height:inherit;position:absolute;box-sizing:border-box}
|
|
33
33
|
.pl-dropdown-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-multi{--options-bg: #1B1B1F}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{position:absolute;top:0;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-multi__options .option{position:relative;padding:0 10px;height:var(--control-height);line-height:20px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:12px;--base-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.5%204.5H4.5L4.5%2019.5H19.5V4.5ZM4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5Z'%20fill='%23110529'/%3e%3c/svg%3e");--checked-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20fill='%23110529'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.5431%208.51739L10.3333%2016.0877L6.45691%2012.0174L7.54312%2010.9829L10.3333%2013.9127L16.4569%207.48291L17.5431%208.51739Z'%20fill='white'/%3e%3c/svg%3e")}.pl-dropdown-multi__options .option .pl-dropdown-multi__checkmark{cursor:pointer;outline:none;border-radius:4px;background:var(--base-icon) no-repeat center;width:24px;height:24px}[data-theme=dark] .pl-dropdown-multi__options .option .pl-dropdown-multi__checkmark{--base-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.5%204.5H4.5L4.5%2019.5H19.5V4.5ZM4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5Z'%20fill='white'/%3e%3c/svg%3e");--checked-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.5431%208.51739L10.3333%2016.0877L6.45691%2012.0174L7.54312%2010.9829L10.3333%2013.9127L16.4569%207.48291L17.5431%208.51739Z'%20fill='%23110529'/%3e%3c/svg%3e")}.pl-dropdown-multi__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-multi__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-multi__options .option.selected .pl-dropdown-multi__checkmark{background:var(--checked-icon) no-repeat center;width:24px;height:24px}.pl-dropdown-multi__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-multi__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-dropdown-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}
|
|
34
34
|
.pl-log-view{--log-background: var(--bg-base-light);--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--border-color-log-view: var(--border-color-div-grey);height:100%;max-height:calc(100% - var(--contour-offset));max-width:calc(100% - var(--contour-offset));border-radius:6px;background:var(--log-background);display:flex;position:relative;min-height:44px;padding-right:40px}.pl-log-view__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--border-color-log-view);border-style:solid;box-shadow:none;z-index:0;pointer-events:none}.pl-log-view label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-log-view label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-log-view.has-error{--log-background: linear-gradient(90deg, #FFEBEB 0%, #FFFFFF 100%);--border-color-log-view: var(--border-color-error)}.pl-log-view__copy{position:absolute;top:12px;right:12px;cursor:pointer}.pl-log-view__copy .mask-24{--icon-color: var(--ic-02)}.pl-log-view__copy:hover .mask-24{--icon-color: var(--txt-01)}.pl-log-view__content{margin:12px;max-height:100%;max-width:100%;flex:1;color:var(--txt-01);font-feature-settings:"ss11" on,"ss15" on,"ss17" on;font-family:var(--font-family-monospace);white-space:pre;font-size:14px;font-weight:400;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-log-view__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-log-view__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-log-view__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-log-view__error{margin:12px;max-height:100%;max-width:100%;flex:1;color:var(--txt-01);font-feature-settings:"ss11" on,"ss15" on,"ss17" on;font-family:var(--font-family-monospace);white-space:pre;font-size:14px;font-weight:400;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-log-view__error::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-log-view__error::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-log-view__error::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}
|
|
35
|
-
.
|
|
35
|
+
.pl-number-field{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);--color-hint: #9d9eae}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{padding-left:12px;border-radius:6px}.pl-number-field__wrapper.withoutArrows{padding-right:12px}.pl-number-field__icons{width:40px;border-radius:0 6px 6px 0;border-left:1px solid var(--contour-color)}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;position:relative;z-index:1}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__hint{margin-top:3px;color:var(--color-hint)}.pl-number-field__error{margin-top:3px;color:var(--txt-error);font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{outline:none;border:none;width:100%;background:unset;text-overflow:ellipsis}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-number-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--color-hint: var(--txt-error)}.pl-number-field.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);display:flex;align-items:center;padding:0 4px;overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);transition:color .3s}.pl-number-field label .required{display:inline-block;font-weight:500;font-size:12px;line-height:16px;color:var(--txt-error);margin-right:4px}
|
|
36
36
|
.progress-cell{background-color:transparent;height:100%;position:relative;width:100%;overflow:hidden;border-radius:2px}.progress-cell .mask-error{--icon-color: var(--txt-error)}.progress-cell.not-started *{color:var(--txt-03)!important}.progress-cell.error *{color:var(--txt-error)!important}.progress-cell__white-bg{background-color:#fff}.progress-cell__indicator{position:absolute;height:100%;transition:width .4s ease-in-out;background:linear-gradient(90deg,#fff,#d8fac8);transition:width .2s ease-in-out}.progress-cell__body{padding:0 15px;display:flex;gap:12px;align-items:center;height:100%;width:100%;position:absolute;z-index:1}.progress-cell__stage{overflow:hidden;text-overflow:ellipsis;flex-shrink:1;text-wrap:nowrap}.progress-cell__percentage{flex-grow:1;flex-shrink:0;text-align:right}.progress-cell__stage--queued{color:var(--txt-03)}.progress-cell__infinity-loader{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;animation:move-gradient 2s linear infinite}.progress-cell__infinity-gradient{width:50%;height:100%;background:linear-gradient(90deg,#fff,#d8fac8,#fff)}@keyframes move-gradient{0%{transform:translate(-50%)}to{transform:translate(100%)}}
|
|
37
37
|
.pl-status-tag{border-radius:4px;border:1px solid var(--txt-01);padding:2px 8px;width:fit-content;height:24px}.pl-status-tag.ok{background:var(--notification-success)}.pl-status-tag.warn{background:var(--notification-warning)}.pl-status-tag.alert{background:var(--notification-error)}.pl-status-tag.hold{background:var(--notification-neutral)}
|
|
38
38
|
.ui-text-area{--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);width:100%;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.ui-text-area__envelope{font-family:var(--font-family-base)}.ui-text-area textarea{min-height:calc(var(--control-height) - 2px);width:100%;padding:10px 12px;border:none;font-size:inherit;background-color:transparent;color:var(--txt-01);caret-color:var(--border-color-focus);cursor:inherit;resize:none;--thumb-color: var(--ic-02);overflow-y:auto}.ui-text-area textarea::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.ui-text-area textarea::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.ui-text-area textarea::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.ui-text-area textarea:focus{outline:none}.ui-text-area textarea::placeholder{color:var(--color-placeholder)}.ui-text-area label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.ui-text-area label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.ui-text-area__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.ui-text-area__append{display:flex;flex-direction:row;align-items:center;gap:4px}.ui-text-area__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area:hover{--contour-color: var(--control-hover-color)}.ui-text-area:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.ui-text-area:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.ui-text-area.dashed .ui-text-area__contour{border-style:dashed}.ui-text-area.nonEmpty{--prefix-color: var(--txt-01)}.ui-text-area.error{--contour-color: var(--txt-error)}.ui-text-area.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.ui-text-area.disabled *{color:var(--contour-color)}
|