@milaboratories/uikit 2.6.1 → 2.6.3

package/dist/components/PlNumberField/PlNumberField.vue.js

@@ -1,10 +1,12 @@
-(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)}})();
-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";
+(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}
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}`)),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { defineComponent as _, mergeModels as A, useModel as R, useSlots as $, ref as c, computed as s, watch as F, createElementBlock as m, openBlock as v, normalizeClass as p, createElementVNode as r, createCommentVNode as g, createVNode as P, withDirectives as j, createTextVNode as T, createBlock as U, toDisplayString as M, unref as C, withCtx as K, renderSlot as Z, vModelText as q } from "vue";
 
 import z from "../../utils/DoubleContour.vue.js";
+
 import { useLabelNotch as G } from "../../utils/useLabelNotch.js";
 import H from "../PlTooltip/PlTooltip.vue.js";
-import { parseNumber as M } from "./parseNumber.js";
+import { parseNumber as D } from "./parseNumber.js";
 const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
   key: 0,
   class: "text-description"
@@ -13,7 +15,7 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
   class: "pl-number-field__error"
 }, Y = {
   name: "PlNumberField"
-}, ue = /* @__PURE__ */ S({
+}, ie = /* @__PURE__ */ _({
   ...Y,
   props: /* @__PURE__ */ A({
     disabled: { type: Boolean },
@@ -25,39 +27,40 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
     useIncrementButtons: { type: Boolean, default: !0 },
     updateOnEnterOrClickOutside: { type: Boolean },
     errorMessage: { default: void 0 },
-    validate: { type: Function, default: void 0 }
+    validate: { type: Function, default: void 0 },
+    groupPosition: { default: void 0 }
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(g) {
-    const t = g, n = R(g, "modelValue"), D = F(), V = f(), v = f();
+  setup(n) {
+    const t = n, u = R(n, "modelValue"), O = $(), V = c(), f = c();
     G(V);
-    function x(e) {
+    function b(e) {
       return e === void 0 ? "" : String(+e);
     }
-    const u = i(() => M(t, s.value)), w = f(void 0), O = () => w.value = void 0;
-    $(n, (e) => {
-      const l = u.value;
-      (l.error || e !== l.value) && O();
+    const i = s(() => D(t, d.value)), w = c(void 0), E = () => w.value = void 0;
+    F(u, (e) => {
+      const l = i.value;
+      (l.error || e !== l.value) && E();
     });
-    const s = i({
+    const d = s({
       get() {
-        return w.value ?? x(n.value);
+        return w.value ?? b(u.value);
       },
       set(e) {
-        const l = M(t, e);
-        w.value = l.cleanInput, l.error || t.updateOnEnterOrClickOutside ? v.value.value = l.cleanInput : n.value = l.value;
+        const l = D(t, e);
+        w.value = l.cleanInput, l.error || t.updateOnEnterOrClickOutside ? f.value.value = l.cleanInput : u.value = l.value;
       }
-    }), h = f(!1);
-    function E() {
-      u.value.error === void 0 && (n.value = u.value.value);
+    }), h = c(!1);
+    function I() {
+      i.value.error === void 0 && (u.value = i.value.value);
     }
-    const b = i(() => {
+    const x = s(() => {
       let e = [];
       t.errorMessage && e.push(t.errorMessage);
-      const l = u.value;
+      const l = i.value;
       if (l.error)
         e.push(l.error.message);
       else if (t.validate && l.value !== void 0) {
@@ -65,87 +68,90 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
         o && e.push(o);
       }
       return e = [...e], e.join(" ");
-    }), y = i(() => {
-      const e = u.value;
+    }), y = s(() => {
+      const e = i.value;
       return t.maxValue !== void 0 && e.value !== void 0 ? e.value >= t.maxValue : !1;
-    }), k = i(() => {
-      const e = u.value;
+    }), k = s(() => {
+      const e = i.value;
       return t.minValue !== void 0 && e.value !== void 0 ? e.value <= t.minValue : !1;
-    }), a = i(
+    }), a = s(
       () => {
         var e;
         return 10 ** (((e = t.step.toString().split(".").at(1)) == null ? void 0 : e.length) ?? 0);
       }
     );
     function B() {
-      const l = u.value.value;
+      const l = i.value.value;
       if (!y.value) {
         let o;
-        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;
+        l === void 0 ? o = t.minValue ? t.minValue : 0 : o = ((l || 0) * a.value + t.step * a.value) / a.value, u.value = t.maxValue !== void 0 ? Math.min(t.maxValue, o) : o;
       }
     }
     function L() {
-      const l = u.value.value;
+      const l = i.value.value;
       if (!k.value) {
         let o;
-        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;
+        l === void 0 ? o = 0 : o = ((l || 0) * a.value - t.step * a.value) / a.value, u.value = t.minValue !== void 0 ? Math.max(t.minValue, o) : o;
       }
     }
-    function I(e) {
+    function N(e) {
       var l, o;
-      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();
+      t.updateOnEnterOrClickOutside && (e.code === "Escape" && (d.value = b(u.value), (l = f.value) == null || l.blur()), e.code === "Enter" && ((o = f.value) == null || o.blur())), e.code === "Enter" && (d.value = String(u.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), t.useIncrementButtons && e.code === "ArrowUp" && B(), t.useIncrementButtons && e.code === "ArrowDown" && L();
     }
-    const N = (e) => {
+    const S = (e) => {
       e.detail > 1 && e.preventDefault();
     };
-    return (e, l) => (d(), c("div", {
+    return (e, l) => (v(), m("div", {
       ref_key: "rootRef",
       ref: V,
-      class: p([{ error: !!b.value.trim(), disabled: e.disabled }, "pl-number-field d-flex-column"]),
-      onKeydown: l[3] || (l[3] = (o) => I(o))
+      class: p([{ error: !!x.value.trim(), disabled: n.disabled }, "pl-number-field d-flex-column"]),
+      onKeydown: l[3] || (l[3] = (o) => N(o))
     }, [
       r("div", J, [
-        j(z, { class: "pl-number-field__contour" }),
+        P(z, {
+          class: "pl-number-field__contour",
+          "group-position": n.groupPosition
+        }, null, 8, ["group-position"]),
         r("div", {
-          class: p(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !e.useIncrementButtons }])
+          class: p(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !n.useIncrementButtons }])
         }, [
-          e.label ? (d(), c("label", Q, [
-            U(_(e.label) + " ", 1),
-            C(D).tooltip ? (d(), K(C(H), {
+          n.label ? (v(), m("label", Q, [
+            T(M(n.label) + " ", 1),
+            C(O).tooltip ? (v(), U(C(H), {
               key: 0,
               class: "info",
               position: "top"
             }, {
-              tooltip: P(() => [
+              tooltip: K(() => [
                 Z(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : m("", !0)
-          ])) : m("", !0),
-          T(r("input", {
+            })) : g("", !0)
+          ])) : g("", !0),
+          j(r("input", {
             ref_key: "inputRef",
-            ref: v,
-            "onUpdate:modelValue": l[0] || (l[0] = (o) => s.value = o),
-            disabled: e.disabled,
-            placeholder: e.placeholder,
+            ref: f,
+            "onUpdate:modelValue": l[0] || (l[0] = (o) => d.value = o),
+            disabled: n.disabled,
+            placeholder: n.placeholder,
             class: "text-s flex-grow",
             onFocusin: l[1] || (l[1] = (o) => h.value = !0),
             onFocusout: l[2] || (l[2] = (o) => {
-              h.value = !1, E();
+              h.value = !1, I();
             })
           }, null, 40, W), [
-            [q, s.value]
+            [q, d.value]
           ])
         ], 2),
-        e.useIncrementButtons ? (d(), c("div", {
+        n.useIncrementButtons ? (v(), m("div", {
           key: 0,
           class: "pl-number-field__icons d-flex-column",
-          onMousedown: N
+          onMousedown: S
         }, [
           r("div", {
             class: p([{ disabled: y.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
             onClick: B
-          }, l[4] || (l[4] = [
+          }, [...l[4] || (l[4] = [
             r("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               width: "16",
@@ -160,11 +166,11 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
                 fill: "#110529"
               })
             ], -1)
-          ]), 2),
+          ])], 2),
           r("div", {
             class: p([{ disabled: k.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
             onClick: L
-          }, l[5] || (l[5] = [
+          }, [...l[5] || (l[5] = [
             r("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               width: "16",
@@ -179,14 +185,14 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
                 fill: "#110529"
               })
             ], -1)
-          ]), 2)
-        ], 32)) : m("", !0)
+          ])], 2)
+        ], 32)) : g("", !0)
       ]),
-      b.value.trim() ? (d(), c("div", X, _(b.value), 1)) : m("", !0)
+      x.value.trim() ? (v(), m("div", X, M(x.value), 1)) : g("", !0)
     ], 34));
   }
 });
 export {
-  ue as default
+  ie as default
 };
 //# sourceMappingURL=PlNumberField.vue.js.map

package/dist/components/PlNumberField/PlNumberField.vue.js.map

@@ -1 +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":";;;;;;;;;;;;GAeAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;AAWA,UAAMC,IAAQC,GAiCRC,IAAaC,iBAAkD,GAE/DC,IAAQC,EAAA,GAERC,IAAUC,EAAA,GACVC,IAAWD,EAAA;AAEjB,IAAAE,EAAcH,CAAO;AAErB,aAASI,EAAcC,GAAuB;AAC5C,aAAOA,MAAM,SAAY,KAAK,OAAO,CAACA,CAAC;AAAA,IACzC;AAEA,UAAMC,IAAeC,EAAS,MAAMC,EAAYd,GAAOe,EAAW,KAAK,CAAC,GAElEC,IAAcT,EAAwB,MAAS,GAE/CU,IAAmB,MAAMD,EAAY,QAAQ;AAEnD,IAAAE,EAAMhB,GAAY,CAACiB,MAAM;AACvB,YAAMC,IAAIR,EAAa;AACvB,OAAIQ,EAAE,SAASD,MAAMC,EAAE,UACrBH,EAAA;AAAA,IAEJ,CAAC;AAED,UAAMF,IAAaF,EAAS;AAAA,MAC1B,MAAM;AACJ,eAAOG,EAAY,SAASN,EAAcR,EAAW,KAAK;AAAA,MAC5D;AAAA,MACA,IAAImB,GAAmB;AACrB,cAAMD,IAAIN,EAAYd,GAAOqB,CAAS;AAEtC,QAAAL,EAAY,QAAQI,EAAE,YAElBA,EAAE,SAASpB,EAAM,8BACnBQ,EAAS,MAAO,QAAQY,EAAE,aAE1BlB,EAAW,QAAQkB,EAAE;AAAA,MAEzB;AAAA,IAAA,CACD,GAEKE,IAAUf,EAAI,EAAK;AAEzB,aAASgB,IAAe;AACtB,MAAIX,EAAa,MAAM,UAAU,WAC/BV,EAAW,QAAQU,EAAa,MAAM;AAAA,IAE1C;AAEA,UAAMY,IAASX,EAAS,MAAM;AAC5B,UAAIY,IAAgB,CAAA;AAEpB,MAAIzB,EAAM,gBACRyB,EAAI,KAAKzB,EAAM,YAAY;AAG7B,YAAMoB,IAAIR,EAAa;AAEvB,UAAIQ,EAAE;AACJ,QAAAK,EAAI,KAAKL,EAAE,MAAM,OAAO;AAAA,eACfpB,EAAM,YAAYoB,EAAE,UAAU,QAAW;AAClD,cAAMM,IAAQ1B,EAAM,SAASoB,EAAE,KAAK;AACpC,QAAIM,KACFD,EAAI,KAAKC,CAAK;AAAA,MAElB;AAEA,aAAAD,IAAM,CAAC,GAAGA,CAAG,GAENA,EAAI,KAAK,GAAG;AAAA,IACrB,CAAC,GAEKE,IAAsBd,EAAS,MAAM;AACzC,YAAMO,IAAIR,EAAa;AAEvB,aAAIZ,EAAM,aAAa,UAAaoB,EAAE,UAAU,SACvCA,EAAE,SAASpB,EAAM,WAGnB;AAAA,IACT,CAAC,GAEK4B,IAAsBf,EAAS,MAAM;AACzC,YAAMO,IAAIR,EAAa;AAEvB,aAAIZ,EAAM,aAAa,UAAaoB,EAAE,UAAU,SACvCA,EAAE,SAASpB,EAAM,WAGnB;AAAA,IACT,CAAC,GAEK6B,IAAahB;AAAA,MAAS,MAAA;;AAC1B,wBAAOiB,IAAA9B,EAAM,KAAK,SAAA,EAAW,MAAM,GAAG,EAAE,GAAG,CAAC,MAArC,gBAAA8B,EAAwC,WAAU;AAAA;AAAA,IAAA;AAG3D,aAASC,IAAY;AAGnB,YAAMC,IAFIpB,EAAa,MAED;AAEtB,UAAI,CAACe,EAAoB,OAAO;AAC9B,YAAIM;AACJ,QAAID,MAAgB,SAClBC,IAAKjC,EAAM,WAAWA,EAAM,WAAW,IAEvCiC,MAAOD,KAAe,KAAKH,EAAW,QAClC7B,EAAM,OAAO6B,EAAW,SAC1BA,EAAW,OAEf3B,EAAW,QAAQF,EAAM,aAAa,SAAY,KAAK,IAAIA,EAAM,UAAUiC,CAAE,IAAIA;AAAA,MACnF;AAAA,IACF;AAEA,aAASC,IAAY;AAGnB,YAAMF,IAFIpB,EAAa,MAED;AAEtB,UAAI,CAACgB,EAAoB,OAAO;AAC9B,YAAIK;AACJ,QAAID,MAAgB,SAClBC,IAAK,IAELA,MAAOD,KAAe,KAAKH,EAAW,QAClC7B,EAAM,OAAO6B,EAAW,SAC1BA,EAAW,OAEf3B,EAAW,QAAQF,EAAM,aAAa,SAAY,KAAK,IAAIA,EAAM,UAAUiC,CAAE,IAAIA;AAAA,MACnF;AAAA,IACF;AAEA,aAASE,EAAe,GAA6C;;AACnE,MAAInC,EAAM,gCACJ,EAAE,SAAS,aACbe,EAAW,QAAQL,EAAcR,EAAW,KAAK,IACjD4B,IAAAtB,EAAS,UAAT,QAAAsB,EAAgB,SAEd,EAAE,SAAS,aACbM,IAAA5B,EAAS,UAAT,QAAA4B,EAAgB,UAIhB,EAAE,SAAS,YACbrB,EAAW,QAAQ,OAAOb,EAAW,KAAK,IAGxC,CAAC,aAAa,SAAS,EAAE,SAAS,EAAE,IAAI,KAC1C,EAAE,eAAA,GAGAF,EAAM,uBAAuB,EAAE,SAAS,aAC1C+B,EAAA,GAGE/B,EAAM,uBAAuB,EAAE,SAAS,eAC1CkC,EAAA;AAAA,IAEJ;AAKA,UAAMG,IAAc,CAACC,MAAmB;AACtC,MAAIA,EAAG,SAAS,KACdA,EAAG,eAAA;AAAA,IAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  /** Makes some of corners not rounded */\n  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\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  groupPosition: 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\" :group-position=\"groupPosition\"/>\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","_createElementBlock","_cache","$event","_createElementVNode","_hoisted_1","_createVNode","DoubleContour","_normalizeClass","_openBlock","_hoisted_2","_createTextVNode","_toDisplayString","_unref","_createBlock","PlTooltip","_renderSlot","_ctx","_hoisted_4"],"mappings":"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"}

package/dist/components/PlProgressBar/PlProgressBar.vue.js

@@ -1,26 +1,26 @@
-import { defineComponent as l, computed as n, createElementBlock as p, createCommentVNode as i, openBlock as c, createElementVNode as e, normalizeStyle as d, toDisplayString as o } from "vue";
-const g = {
+import { defineComponent as a, computed as l, createElementBlock as n, createCommentVNode as c, openBlock as i, createElementVNode as s, normalizeStyle as d, toDisplayString as o } from "vue";
+const p = {
   key: 0,
   class: "ui-progress-bar"
-}, _ = { class: "ui-progress-bar__messages d-flex align-center pl-6 pr-6" }, m = { class: "ui-progress-bar__message flex-grow-1" }, u = { class: "ui-progress-bar__percent" }, v = /* @__PURE__ */ l({
+}, g = { class: "ui-progress-bar__messages d-flex align-center pl-6 pr-6" }, m = { class: "ui-progress-bar__message flex-grow-1" }, _ = { class: "ui-progress-bar__percent" }, v = /* @__PURE__ */ a({
   __name: "PlProgressBar",
   props: {
     loading: { type: Boolean },
     progress: { default: 0 },
     completeMessage: { default: "Completed" }
   },
-  setup(t) {
-    const r = t, a = n(() => r.progress === 100 ? r.completeMessage : "");
-    return (s, f) => s.loading ? (c(), p("div", g, [
-      e("div", {
+  setup(e) {
+    const r = e, t = l(() => r.progress === 100 ? r.completeMessage : "");
+    return (u, f) => e.loading ? (i(), n("div", p, [
+      s("div", {
         class: "ui-progress-bar__indicator",
-        style: d({ width: s.progress + "%" })
+        style: d({ width: e.progress + "%" })
       }, null, 4),
-      e("div", _, [
-        e("div", m, o(a.value), 1),
-        e("div", u, o(s.progress + "%"), 1)
+      s("div", g, [
+        s("div", m, o(t.value), 1),
+        s("div", _, o(e.progress + "%"), 1)
       ])
-    ])) : i("", !0);
+    ])) : c("", !0);
   }
 });
 export {

package/dist/components/PlProgressBar/PlProgressBar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlProgressBar.vue.js","sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    loading: boolean;\n    progress: number;\n    completeMessage: string;\n  }>(),\n  { progress: 0, completeMessage: 'Completed' },\n);\n\nconst readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : ''));\n</script>\n\n<template>\n  <div v-if=\"loading\" class=\"ui-progress-bar\">\n    <div class=\"ui-progress-bar__indicator\" :style=\"{ width: progress + '%' }\"/>\n    <div class=\"ui-progress-bar__messages d-flex align-center pl-6 pr-6\">\n      <div class=\"ui-progress-bar__message flex-grow-1\">{{ readyMsg }}</div>\n      <div class=\"ui-progress-bar__percent\">{{ progress + '%' }}</div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","readyMsg","computed"],"mappings":";;;;;;;;;;;;AAGA,UAAMA,IAAQC,GASRC,IAAWC,EAAS,MAAOH,EAAM,aAAa,MAAMA,EAAM,kBAAkB,EAAG;;;;;;;;;;;;;"}
+{"version":3,"file":"PlProgressBar.vue.js","sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    loading: boolean;\n    progress: number;\n    completeMessage: string;\n  }>(),\n  { progress: 0, completeMessage: 'Completed' },\n);\n\nconst readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : ''));\n</script>\n\n<template>\n  <div v-if=\"loading\" class=\"ui-progress-bar\">\n    <div class=\"ui-progress-bar__indicator\" :style=\"{ width: progress + '%' }\"/>\n    <div class=\"ui-progress-bar__messages d-flex align-center pl-6 pr-6\">\n      <div class=\"ui-progress-bar__message flex-grow-1\">{{ readyMsg }}</div>\n      <div class=\"ui-progress-bar__percent\">{{ progress + '%' }}</div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","readyMsg","computed","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4"],"mappings":";;;;;;;;;;;;AAGA,UAAMA,IAAQC,GASRC,IAAWC,EAAS,MAAOH,EAAM,aAAa,MAAMA,EAAM,kBAAkB,EAAG;qBAIxEC,EAAA,WAAXG,EAAA,GAAAC,EAMM,OANNC,GAMM;AAAA,MALJC,EAA4E,OAAA;AAAA,QAAvE,OAAM;AAAA,QAA8B,kBAAgBN,EAAA,WAAQ,KAAA;AAAA,MAAA;MACjEM,EAGM,OAHNC,GAGM;AAAA,QAFJD,EAAsE,OAAtEE,GAAsEC,EAAjBR,EAAA,KAAQ,GAAA,CAAA;AAAA,QAC7DK,EAAgE,OAAhEI,GAAgED,EAAvBT,EAAA,WAAQ,GAAA,GAAA,CAAA;AAAA,MAAA;;;;"}

package/dist/components/PlProgressCell/PlProgressCell.vue.js

@@ -1,12 +1,12 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".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%)}}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as _, computed as n, createElementBlock as t, openBlock as s, normalizeClass as m, createCommentVNode as o, createElementVNode as l, normalizeStyle as f, toDisplayString as d, unref as g, createBlock as v, Fragment as y, createTextVNode as h } from "vue";
+import { defineComponent as m, computed as n, createElementBlock as s, openBlock as t, normalizeClass as f, createCommentVNode as o, createElementVNode as l, normalizeStyle as p, toDisplayString as c, unref as d, createBlock as v, Fragment as _, createTextVNode as y } from "vue";
 
-import k from "../PlIcon24/PlIcon24.vue.js";
-import { getErrorMessage as S } from "../../helpers/error.js";
-const w = {
+import h from "../PlIcon24/PlIcon24.vue.js";
+import { getErrorMessage as k } from "../../helpers/error.js";
+const x = {
   key: 0,
   class: "progress-cell__infinity-loader"
-}, B = { class: "progress-cell__body" }, C = { class: "progress-cell__stage text-s" }, P = { class: "progress-cell__percentage text-s d-flex align-center justify-end" }, b = /* @__PURE__ */ _({
+}, S = { class: "progress-cell__body" }, w = { class: "progress-cell__stage text-s" }, B = { class: "progress-cell__percentage text-s d-flex align-center justify-end" }, V = /* @__PURE__ */ m({
   __name: "PlProgressCell",
   props: {
     stage: { default: "not_started" },
@@ -15,28 +15,28 @@ const w = {
     progress: { default: void 0 },
     error: { default: void 0 }
   },
-  setup(c) {
-    const e = c, p = n(() => e.stage !== "not_started"), u = n(() => e.stage === "done" ? 100 : Math.min(100, e.progress || 0)), a = n(() => e.progress === void 0 && e.stage !== "done" && e.stage !== "not_started" && !e.error);
-    return (r, i) => (s(), t("div", {
-      class: m({ "progress-cell": !0, "progress-cell__white-bg": p.value, error: r.error, "not-started": e.stage === "not_started" })
+  setup(e) {
+    const r = e, g = n(() => r.stage !== "not_started"), u = n(() => r.stage === "done" ? 100 : Math.min(100, r.progress || 0)), a = n(() => r.progress === void 0 && r.stage !== "done" && r.stage !== "not_started" && !r.error);
+    return (C, i) => (t(), s("div", {
+      class: f({ "progress-cell": !0, "progress-cell__white-bg": g.value, error: e.error, "not-started": r.stage === "not_started" })
     }, [
-      a.value ? (s(), t("div", w, i[0] || (i[0] = [
+      a.value ? (t(), s("div", x, [...i[0] || (i[0] = [
         l("div", { class: "progress-cell__infinity-gradient" }, null, -1)
-      ]))) : o("", !0),
-      !a.value && !r.error ? (s(), t("div", {
+      ])])) : o("", !0),
+      !a.value && !e.error ? (t(), s("div", {
         key: 1,
         class: "progress-cell__indicator",
-        style: f({ width: u.value + "%" })
+        style: p({ width: u.value + "%" })
       }, null, 4)) : o("", !0),
-      l("div", B, [
-        l("div", C, d(r.error ? g(S)(r.error) : r.step), 1),
-        l("div", P, [
-          r.error ? (s(), v(g(k), {
+      l("div", S, [
+        l("div", w, c(e.error ? d(k)(e.error) : e.step), 1),
+        l("div", B, [
+          e.error ? (t(), v(d(h), {
             key: 0,
             name: "error"
           })) : o("", !0),
-          r.error ? o("", !0) : (s(), t(y, { key: 1 }, [
-            h(d(r.progressString), 1)
+          e.error ? o("", !0) : (t(), s(_, { key: 1 }, [
+            y(c(e.progressString), 1)
           ], 64))
         ])
       ])
@@ -44,6 +44,6 @@ const w = {
   }
 });
 export {
-  b as default
+  V as default
 };
 //# sourceMappingURL=PlProgressCell.vue.js.map

package/dist/components/PlProgressCell/PlProgressCell.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlProgressCell.vue.js","sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-progress-cell.scss';\nimport { computed } from 'vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport type { PlProgressCellProps } from './types';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n  stage: 'not_started',\n  step: '', // main text (left)\n  progressString: '', // appended text on the right side (right)\n  progress: undefined,\n  error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== 'not_started');\n\nconst currentProgress = computed(() => props.stage === 'done' ? 100 : Math.min(100, props.progress || 0));\n\nconst canShowInfinityLoader = computed(() => props.progress === undefined && props.stage !== 'done' && props.stage !== 'not_started' && !props.error);\n</script>\n\n<template>\n  <div :class=\"{'progress-cell':true, 'progress-cell__white-bg': canShowWhiteBg, error, 'not-started': props.stage === 'not_started' }\">\n    <div v-if=\"canShowInfinityLoader\" class=\"progress-cell__infinity-loader\">\n      <div class=\"progress-cell__infinity-gradient\"/>\n    </div>\n    <div v-if=\"!canShowInfinityLoader && !error\" class=\"progress-cell__indicator\" :style=\"{ width: currentProgress + '%' }\"/>\n    <div class=\"progress-cell__body\">\n      <div class=\"progress-cell__stage text-s\">\n        {{ error ? getErrorMessage(error) : step }}\n      </div>\n      <div class=\"progress-cell__percentage text-s d-flex align-center justify-end\">\n        <PlMaskIcon24 v-if=\"error\" name=\"error\" />\n        <template v-if=\"!error\">\n          {{ progressString }}\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","canShowWhiteBg","computed","currentProgress","canShowInfinityLoader"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAiBC,EAAS,MAAMH,EAAM,UAAU,aAAa,GAE7DI,IAAkBD,EAAS,MAAMH,EAAM,UAAU,SAAS,MAAM,KAAK,IAAI,KAAKA,EAAM,YAAY,CAAC,CAAC,GAElGK,IAAwBF,EAAS,MAAMH,EAAM,aAAa,UAAaA,EAAM,UAAU,UAAUA,EAAM,UAAU,iBAAiB,CAACA,EAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlProgressCell.vue.js","sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-progress-cell.scss';\nimport { computed } from 'vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport type { PlProgressCellProps } from './types';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n  stage: 'not_started',\n  step: '', // main text (left)\n  progressString: '', // appended text on the right side (right)\n  progress: undefined,\n  error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== 'not_started');\n\nconst currentProgress = computed(() => props.stage === 'done' ? 100 : Math.min(100, props.progress || 0));\n\nconst canShowInfinityLoader = computed(() => props.progress === undefined && props.stage !== 'done' && props.stage !== 'not_started' && !props.error);\n</script>\n\n<template>\n  <div :class=\"{'progress-cell':true, 'progress-cell__white-bg': canShowWhiteBg, error, 'not-started': props.stage === 'not_started' }\">\n    <div v-if=\"canShowInfinityLoader\" class=\"progress-cell__infinity-loader\">\n      <div class=\"progress-cell__infinity-gradient\"/>\n    </div>\n    <div v-if=\"!canShowInfinityLoader && !error\" class=\"progress-cell__indicator\" :style=\"{ width: currentProgress + '%' }\"/>\n    <div class=\"progress-cell__body\">\n      <div class=\"progress-cell__stage text-s\">\n        {{ error ? getErrorMessage(error) : step }}\n      </div>\n      <div class=\"progress-cell__percentage text-s d-flex align-center justify-end\">\n        <PlMaskIcon24 v-if=\"error\" name=\"error\" />\n        <template v-if=\"!error\">\n          {{ progressString }}\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","canShowWhiteBg","computed","currentProgress","canShowInfinityLoader","_createElementBlock","_openBlock","_hoisted_1","_cache","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_unref","getErrorMessage","_hoisted_4","_createBlock","PlMaskIcon24","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAiBC,EAAS,MAAMH,EAAM,UAAU,aAAa,GAE7DI,IAAkBD,EAAS,MAAMH,EAAM,UAAU,SAAS,MAAM,KAAK,IAAI,KAAKA,EAAM,YAAY,CAAC,CAAC,GAElGK,IAAwBF,EAAS,MAAMH,EAAM,aAAa,UAAaA,EAAM,UAAU,UAAUA,EAAM,UAAU,iBAAiB,CAACA,EAAM,KAAK;2BAIlJM,EAgBM,OAAA;AAAA,MAhBA,2DAAyDJ,EAAA,OAAc,OAAED,SAAK,eAAiBD,EAAM,UAAK,eAAA;AAAA,IAAA;MACnGK,EAAA,SAAXE,KAAAD,EAEM,OAFNE,GAEM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,QADJC,EAA+C,OAAA,EAA1C,OAAM,mCAAA,GAAkC,MAAA,EAAA;AAAA,MAAA;MAEnC,CAAAL,EAAA,UAA0BJ,EAAA,cAAtCK,EAAyH,OAAA;AAAA;QAA5E,OAAM;AAAA,QAA4B,kBAAgBF,EAAA,QAAe,KAAA;AAAA,MAAA;MAC9GM,EAUM,OAVNC,GAUM;AAAA,QATJD,EAEM,OAFNE,GAEMC,EADDZ,EAAA,QAAQa,EAAAC,CAAA,EAAgBd,EAAA,KAAK,IAAIA,EAAA,IAAI,GAAA,CAAA;AAAA,QAE1CS,EAKM,OALNM,GAKM;AAAA,UAJgBf,EAAA,cAApBgB,EAA0CH,EAAAI,CAAA,GAAA;AAAA;YAAf,MAAK;AAAA,UAAA;UACfjB,EAAA,0BAAjBK,EAEWa,GAAA,EAAA,KAAA,KAAA;AAAA,gBADNlB,EAAA,cAAc,GAAA,CAAA;AAAA,UAAA;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlRadio.vue2.js","sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from 'vue';\nimport { radioGroupModelKey, radioGroupNameKey } from './keys';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from './PlRadioGroup.vue';\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\">\n    <input v-model=\"model\" :class=\"$style.input\" type=\"radio\" :name v-bind=\"props\" />\n    <span :class=\"$style.label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n  .container {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px;\n    border-radius: 6px;\n    transition: all 200ms ease-in-out;\n    color: var(--txt-01);\n    user-select: none;\n    &:hover:not(:has(:disabled)) {\n      background: var(--btn-sec-hover-grey);\n    }\n    &:has(:disabled) {\n      color: var(--dis-01);\n    }\n  }\n\n  .input {\n    appearance: none;\n    position: relative;\n    block-size: 24px;\n    aspect-ratio: 1;\n    margin: 0;\n    border-radius: 50%;\n    outline: 2px solid transparent;\n    color: inherit;\n    transition: inherit;\n    &:focus {\n      outline-color: var(--border-color-focus);\n    }\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset: 2px;\n      border-radius: 50%;\n      border: 2px solid;\n    }\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 7.5px;\n      border-radius: 50%;\n      background-color: currentColor;\n      scale: 0;\n      transition: inherit;\n    }\n    &:checked::after {\n      scale: 1;\n    }\n  }\n\n  .label {\n    padding-inline: 4px;\n    line-height: calc(20 / 14);\n    font-weight: 500;\n    text-box: trim-both cap alphabetic;\n  }\n</style>\n"],"names":["standaloneModel","_useModel","__props","props","_createPropsRestProxy","name","inject","radioGroupNameKey","model","radioGroupModelKey"],"mappings":";;;;;;;;;;;;;;AAMA,UAAMA,IAAkBC,EAAcC,GAAA,YAAC,GAEjCC,IAAqCC,EAAAF,GAAA,CAAA,MAAA,CAAA,GAcrCG,IAAOC,EAAOC,GAAmBL,MAAc,GAC/CM,IAAQF,EAA+BG,GAAoBT,CAAe;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlRadio.vue2.js","sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from 'vue';\nimport { radioGroupModelKey, radioGroupNameKey } from './keys';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from './PlRadioGroup.vue';\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\">\n    <input v-model=\"model\" :class=\"$style.input\" type=\"radio\" :name v-bind=\"props\" />\n    <span :class=\"$style.label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n  .container {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px;\n    border-radius: 6px;\n    transition: all 200ms ease-in-out;\n    color: var(--txt-01);\n    user-select: none;\n    &:hover:not(:has(:disabled)) {\n      background: var(--btn-sec-hover-grey);\n    }\n    &:has(:disabled) {\n      color: var(--dis-01);\n    }\n  }\n\n  .input {\n    appearance: none;\n    position: relative;\n    block-size: 24px;\n    aspect-ratio: 1;\n    margin: 0;\n    border-radius: 50%;\n    outline: 2px solid transparent;\n    color: inherit;\n    transition: inherit;\n    &:focus {\n      outline-color: var(--border-color-focus);\n    }\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset: 2px;\n      border-radius: 50%;\n      border: 2px solid;\n    }\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 7.5px;\n      border-radius: 50%;\n      background-color: currentColor;\n      scale: 0;\n      transition: inherit;\n    }\n    &:checked::after {\n      scale: 1;\n    }\n  }\n\n  .label {\n    padding-inline: 4px;\n    line-height: calc(20 / 14);\n    font-weight: 500;\n    text-box: trim-both cap alphabetic;\n  }\n</style>\n"],"names":["standaloneModel","_useModel","__props","props","_createPropsRestProxy","name","inject","radioGroupNameKey","model","radioGroupModelKey","_createElementBlock","_normalizeClass","$style","_withDirectives","_createElementVNode","_mergeProps","$event","_unref","_hoisted_1","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;AAMA,UAAMA,IAAkBC,EAAcC,GAAA,YAAC,GAEjCC,IAAqCC,EAAAF,GAAA,CAAA,MAAA,CAAA,GAcrCG,IAAOC,EAAOC,GAAmBL,MAAc,GAC/CM,IAAQF,EAA+BG,GAAoBT,CAAe;2BAI9EU,EAGQ,SAAA;AAAA,MAHA,OAAKC,EAAEC,EAAAA,OAAO,SAAS;AAAA,IAAA;MAC7BC,EAAAC,EAAiF,SAAjFC,EAAiF;AAAA,6DAAjEP,EAAK,QAAAQ,IAAA;AAAA,QAAG,OAAOJ,EAAAA,OAAO;AAAA,QAAO,MAAK;AAAA,QAAS,MAAAK,EAAAZ,CAAA;AAAA,MAAA,GAAaF,CAAK,GAAA,MAAA,IAAAe,CAAA,GAAA;AAAA,YAA7DD,EAAAT,CAAA,CAAK;AAAA,MAAA;MACrBM,EAA2C,QAAA;AAAA,QAApC,OAAKH,EAAEC,EAAAA,OAAO,KAAK;AAAA,MAAA;QAAEO,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/components/PlRadio/PlRadioGroup.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, mergeModels as f, useModel as y, useSlots as k, provide as s, createElementBlock as d, openBlock as o, normalizeClass as n, createElementVNode as b, renderSlot as u, Fragment as v, renderList as E, createBlock as V, unref as g, withCtx as M, createTextVNode as $, toDisplayString as B } from "vue";
-import { radioGroupNameKey as C, radioGroupModelKey as G } from "./keys.js";
-import N from "./PlRadio.vue.js";
+import { defineComponent as p, mergeModels as f, useModel as y, useSlots as k, provide as s, createElementBlock as d, openBlock as t, normalizeClass as n, createElementVNode as b, renderSlot as u, Fragment as v, renderList as E, createBlock as V, unref as g, withCtx as M, createTextVNode as $, toDisplayString as x } from "vue";
+import { radioGroupNameKey as B, radioGroupModelKey as C } from "./keys.js";
+import G from "./PlRadio.vue.js";
 const F = /* @__PURE__ */ p({
   __name: "PlRadioGroup",
   props: /* @__PURE__ */ f({
@@ -12,11 +12,11 @@ const F = /* @__PURE__ */ p({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(t) {
-    const i = y(t, "modelValue"), a = t;
+  setup(o) {
+    const i = y(o, "modelValue"), a = o;
     k();
     const m = a.keyExtractor ?? ((e, r) => r);
-    return s(C, a.name), s(G, i), (e, r) => (o(), d("fieldset", {
+    return s(B, a.name), s(C, i), (e, r) => (t(), d("fieldset", {
       class: n(e.$style.container)
     }, [
       b("legend", {
@@ -24,13 +24,13 @@ const F = /* @__PURE__ */ p({
       }, [
         u(e.$slots, "label")
       ], 2),
-      (o(!0), d(v, null, E(e.options, (l, c) => (o(), V(N, {
+      (t(!0), d(v, null, E(o.options, (l, c) => (t(), V(G, {
         key: g(m)(l.value, c),
         value: l.value,
         disabled: l.disabled
       }, {
         default: M(() => [
-          $(B(l.label), 1)
+          $(x(l.label), 1)
         ]),
         _: 2
       }, 1032, ["value", "disabled"]))), 128)),

package/dist/components/PlRadio/PlRadioGroup.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadioGroup.vue2.js","sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from 'vue';\nimport { radioGroupModelKey, radioGroupNameKey } from './keys';\nimport PlRadio from './PlRadio.vue';\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\">\n    <legend :class=\"$style.label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n  .container {\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  .label {\n    margin-block-end: 12px;\n    padding: 0;\n    color: var(--txt-01);\n    line-height: calc(20 / 14);\n    font-weight: 500;\n    text-box: trim-both cap alphabetic;\n  }\n</style>\n"],"names":["model","_useModel","props","__props","_useSlots","keyExtractor","_","i","provide","radioGroupNameKey","radioGroupModelKey"],"mappings":";;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,iBAAe,GAEvBC,IAAQC;AAaAC,IAAAA,EAAA;AAUd,UAAMC,IAAeH,EAAM,iBAAiB,CAACI,GAAGC,MAAMA;AAEtD,WAAAC,EAAQC,GAAmBP,EAAM,IAAI,GACrCM,EAAQE,GAAoBV,CAAK;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlRadioGroup.vue2.js","sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from 'vue';\nimport { radioGroupModelKey, radioGroupNameKey } from './keys';\nimport PlRadio from './PlRadio.vue';\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\">\n    <legend :class=\"$style.label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n  .container {\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  .label {\n    margin-block-end: 12px;\n    padding: 0;\n    color: var(--txt-01);\n    line-height: calc(20 / 14);\n    font-weight: 500;\n    text-box: trim-both cap alphabetic;\n  }\n</style>\n"],"names":["model","_useModel","props","__props","_useSlots","keyExtractor","_","i","provide","radioGroupNameKey","radioGroupModelKey","_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","option","_createBlock","PlRadio","_unref","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,iBAAe,GAEvBC,IAAQC;AAaAC,IAAAA,EAAA;AAUd,UAAMC,IAAeH,EAAM,iBAAiB,CAACI,GAAGC,MAAMA;AAEtD,WAAAC,EAAQC,GAAmBP,EAAM,IAAI,GACrCM,EAAQE,GAAoBV,CAAK,mBAI/BW,EAaW,YAAA;AAAA,MAbA,OAAKC,EAAEC,EAAAA,OAAO,SAAS;AAAA,IAAA;MAChCC,EAES,UAAA;AAAA,QAFA,OAAKF,EAAEC,EAAAA,OAAO,KAAK;AAAA,MAAA;QAC1BE,EAAqBC,EAAA,QAAA,OAAA;AAAA,MAAA;OAEvBC,EAAA,EAAA,GAAAN,EAOUO,GAAA,MAAAC,EANchB,EAAA,SAAO,CAArBiB,GAAQb,YADlBc,EAOUC,GAAA;AAAA,QALP,KAAKC,EAAAlB,CAAA,EAAae,EAAO,OAAOb,CAAC;AAAA,QACjC,OAAOa,EAAO;AAAA,QACd,UAAUA,EAAO;AAAA,MAAA;mBAElB,MAAkB;AAAA,UAAfI,EAAAC,EAAAL,EAAO,KAAK,GAAA,CAAA;AAAA,QAAA;;;MAEjBL,EAAQC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

package/dist/components/PlSearchField/PlSearchField.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as V, ref as r, computed as n, createElementBlock as y, openBlock as s, normalizeClass as d, createVNode as v, withDirectives as b, createBlock as B, createCommentVNode as C, unref as c, createElementVNode as M, vModelText as E, withModifiers as N } from "vue";
+import { defineComponent as V, ref as r, computed as c, createElementBlock as y, openBlock as d, normalizeClass as s, createVNode as v, withDirectives as b, createBlock as B, createCommentVNode as C, unref as i, createElementVNode as M, vModelText as E, withModifiers as N } from "vue";
 import P from "../PlIcon16/PlIcon16.vue.js";
-import _ from "../PlIcon24/PlIcon24.vue.js";
-const w = ["disabled", "placeholder"], g = /* @__PURE__ */ V({
+import w from "../PlIcon24/PlIcon24.vue.js";
+const x = ["disabled", "placeholder"], g = /* @__PURE__ */ V({
   __name: "PlSearchField",
   props: {
     modelValue: {},
@@ -10,35 +10,35 @@ const w = ["disabled", "placeholder"], g = /* @__PURE__ */ V({
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: i }) {
-    const l = i, o = p, m = r(void 0), u = r(), t = n({
+  setup(e, { emit: m }) {
+    const o = m, t = e, u = r(void 0), p = r(), a = c({
       get() {
-        return o.modelValue ?? "";
+        return t.modelValue ?? "";
       },
-      set(e) {
-        l("update:modelValue", e);
+      set(l) {
+        o("update:modelValue", l);
       }
-    }), f = n(() => !!o.modelValue), h = () => l("update:modelValue", "");
-    return (e, a) => (s(), y("div", {
+    }), f = c(() => !!t.modelValue), h = () => o("update:modelValue", "");
+    return (l, n) => (d(), y("div", {
       ref_key: "root",
-      ref: m,
-      class: d(["pl-search-field", [e.$style.component]])
+      ref: u,
+      class: s(["pl-search-field", [l.$style.component]])
     }, [
-      v(c(_), { name: "search" }),
+      v(i(w), { name: "search" }),
       b(M("input", {
         ref_key: "input",
-        ref: u,
-        "onUpdate:modelValue": a[0] || (a[0] = (k) => t.value = k),
+        ref: p,
+        "onUpdate:modelValue": n[0] || (n[0] = (k) => a.value = k),
         disabled: e.disabled,
         type: "text",
         placeholder: e.placeholder || "Find...",
         spellcheck: "false"
-      }, null, 8, w), [
-        [E, t.value]
+      }, null, 8, x), [
+        [E, a.value]
       ]),
-      e.clearable && f.value ? (s(), B(c(P), {
+      e.clearable && f.value ? (d(), B(i(P), {
         key: 0,
-        class: d(e.$style.clear),
+        class: s(l.$style.clear),
         name: "delete-clear",
         onClick: N(h, ["stop"])
       }, null, 8, ["class"])) : C("", !0)