survey-vue3-ui 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-vue3-ui",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -19,7 +19,7 @@
     "url": "https://github.com/surveyjs/surveyjs.git"
   },
   "peerDependencies": {
-    "survey-core": "2.1.1",
+    "survey-core": "2.2.0",
     "vue": "^3.2.41"
   }
 }

package/survey-vue3-ui.es.js

@@ -1508,32 +1508,34 @@ const As = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
-    return T(e, n), (s, o) => !s.question.isReadOnlyRenderDiv() && s.question.getMaxLength() ? (i(), a("div", {
+    const e = u, n = k();
+    function s(o) {
+      n.value = o;
+    }
+    return T(e, n), (o, t) => !o.question.isReadOnlyRenderDiv() && o.question.getMaxLength() ? (i(), a("div", {
       key: 0,
       ref_key: "root",
       ref: n
     }, [
       c(m, {
         is: "sv-text-area",
-        model: s.question.textAreaModel
+        model: o.question.textAreaModel
       }, null, 8, ["model"]),
       c(m, {
         is: "sv-character-counter",
-        counter: s.question.characterCounter,
-        remainingCharacterCounter: s.question.cssClasses.remainingCharacterCounter
+        counter: o.question.characterCounter,
+        remainingCharacterCounter: o.question.cssClasses.remainingCharacterCounter
       }, null, 8, ["counter", "remainingCharacterCounter"])
-    ], 512)) : !s.question.isReadOnlyRenderDiv() && !s.question.getMaxLength() ? (i(), g(m, {
+    ], 512)) : !o.question.isReadOnlyRenderDiv() && !o.question.getMaxLength() ? (i(), g(m, {
       key: 1,
       is: "sv-text-area",
-      ref_key: "root",
-      ref: n,
-      model: s.question.textAreaModel
+      "get-ref": s,
+      model: o.question.textAreaModel
     }, null, 8, ["model"])) : (i(), a("div", {
       key: 2,
       ref_key: "root",
       ref: n
-    }, I(s.question.value), 513));
+    }, I(o.question.value), 513));
   }
 }), p1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
@@ -2898,7 +2900,7 @@ const gn = /* @__PURE__ */ y({
       ], 2))), 128))
     ], 2));
   }
-}), In = ["min", "max", "step"], Vn = ["id", "value", "min", "max", "step", "disabled", "onInput", "onFocus", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Sn = ["onPointerup"], Rn = /* @__PURE__ */ y({
+}), In = ["min", "max", "step"], Vn = ["id", "value", "min", "max", "step", "disabled", "onInput", "onFocus", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Sn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Slider",
   props: {
@@ -2956,7 +2958,7 @@ const gn = /* @__PURE__ */ y({
             class: r(o.question.cssClasses.rangeTrack),
             style: f({ left: o.question.getTrackPercentLeft() + "%", right: o.question.getTrackPercentRight() + "%" })
           }, null, 6),
-          (i(!0), a(M, null, V(o.question.getRenderedValue(), (l, d) => (i(), a(M, { key: d }, [
+          (i(!0), a(M, null, V(o.question.renderedValue, (l, d) => (i(), a(M, { key: d }, [
             v("input", {
               class: r(o.question.cssClasses.input),
               id: "sjs-slider-input-" + d,
@@ -3026,30 +3028,44 @@ const gn = /* @__PURE__ */ y({
         class: r(o.question.cssClasses.labelsContainer)
       }, [
         v("div", null, [
-          (i(!0), a(M, null, V(o.question.renderedLabels, (l, d) => (i(), a("div", {
-            key: d,
-            class: r(o.question.getLabelCss(d)),
-            style: f({ left: l.value + "%" }),
-            onPointerup: (C) => {
-              o.question.handleLabelPointerUp(C, d);
-            }
-          }, [
-            v("div", {
-              class: r(o.question.cssClasses.labelTick)
-            }, null, 2),
-            v("div", {
-              class: r(o.question.cssClasses.labelText)
-            }, [
-              c(m, {
-                is: "survey-string",
-                locString: l.locText
-              }, null, 8, ["locString"])
-            ], 2)
-          ], 46, Sn))), 128))
+          (i(!0), a(M, null, V(o.question.renderedLabels, (l) => (i(), g(m, {
+            key: l.id,
+            is: "sv-slider-label-item",
+            item: l,
+            question: o.question
+          }, null, 8, ["item", "question"]))), 128))
         ])
       ], 2)) : p("", !0)
     ], 2));
   }
+}), Rn = /* @__PURE__ */ y({
+  __name: "SliderLabelItem",
+  props: {
+    question: {},
+    item: {}
+  },
+  setup(u) {
+    const e = u;
+    return S(() => e.item), (n, s) => (i(), a("div", {
+      class: r(n.question.getLabelCss(n.item.locText)),
+      style: f({ left: n.question.getPercent(n.item.value) + "%" }),
+      onPointerup: s[0] || (s[0] = (o) => {
+        n.question.handleLabelPointerUp(o, n.item.value);
+      })
+    }, [
+      v("div", {
+        class: r(n.question.cssClasses.labelTick)
+      }, null, 2),
+      v("div", {
+        class: r(n.question.cssClasses.labelText)
+      }, [
+        c(m, {
+          is: "survey-string",
+          locString: n.item.locText
+        }, null, 8, ["locString"])
+      ], 2)
+    ], 38));
+  }
 }), Tn = { role: "radiogroup" }, Bn = { class: "sv-visuallyhidden" }, Zn = {
   key: 0,
   role: "presentation"
@@ -5001,7 +5017,7 @@ const Wt = /* @__PURE__ */ $t(Dt, [["render", Et]]), Ft = /* @__PURE__ */ v("use
   }
 });
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5069,7 +5085,7 @@ var Ro = {
   "smiley-rate9-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z"></path></svg>'
 };
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5557,52 +5573,54 @@ const ae = /* @__PURE__ */ y({
 }), Go = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Xo = /* @__PURE__ */ y({
   __name: "TextArea",
   props: {
-    model: {}
+    model: {},
+    getRef: { type: Function }
   },
   setup(u) {
     const e = u, n = k(
       null
-    ), s = H(() => e.model.getTextValue() || "");
+    ), s = function(t) {
+      n.value = t, e.getRef && e.getRef(t);
+    }, o = H(() => e.model.getTextValue() || "");
     return Z(() => {
       e.model.setElement(n.value);
     }), j(() => {
       e.model.setElement(n.value);
     }), D(() => {
       e.model.resetElement();
-    }), (o, t) => (i(), a("textarea", {
-      ref_key: "contentElement",
-      ref: n,
-      readonly: o.model.isReadOnlyAttr,
-      disabled: o.model.isDisabledAttr,
-      value: s.value,
-      id: o.model.id,
-      maxlength: o.model.maxLength,
-      cols: o.model.cols,
-      rows: o.model.rows,
-      placeholder: o.model.placeholder,
-      class: r(o.model.className),
-      onBlur: t[0] || (t[0] = (l) => {
-        o.model.onTextAreaBlur(l);
+    }), (t, l) => (i(), a("textarea", {
+      ref: (d) => s(d),
+      readonly: t.model.isReadOnlyAttr,
+      disabled: t.model.isDisabledAttr,
+      value: o.value,
+      id: t.model.id,
+      maxlength: t.model.maxLength,
+      cols: t.model.cols,
+      rows: t.model.rows,
+      placeholder: t.model.placeholder,
+      class: r(t.model.className),
+      onBlur: l[0] || (l[0] = (d) => {
+        t.model.onTextAreaBlur(d);
       }),
-      onFocus: t[1] || (t[1] = (l) => {
-        o.model.onTextAreaFocus(l);
+      onFocus: l[1] || (l[1] = (d) => {
+        t.model.onTextAreaFocus(d);
       }),
-      onChange: t[2] || (t[2] = (l) => {
-        o.model.onTextAreaChange(l);
+      onChange: l[2] || (l[2] = (d) => {
+        t.model.onTextAreaChange(d);
       }),
-      onInput: t[3] || (t[3] = (l) => {
-        o.model.onTextAreaInput(l);
+      onInput: l[3] || (l[3] = (d) => {
+        t.model.onTextAreaInput(d);
       }),
-      onKeydown: t[4] || (t[4] = (l) => {
-        o.model.onTextAreaKeyDown(l);
+      onKeydown: l[4] || (l[4] = (d) => {
+        t.model.onTextAreaKeyDown(d);
       }),
-      "aria-required": o.model.ariaRequired,
-      "aria-label": o.model.ariaLabel,
-      "aria-labelledby": o.model.ariaLabelledBy,
-      "aria-describedby": o.model.ariaDescribedBy,
-      "aria-invalid": o.model.ariaInvalid,
-      "aria-errormessage": o.model.ariaErrormessage,
-      style: f({ resize: o.model.question.resizeStyle })
+      "aria-required": t.model.ariaRequired,
+      "aria-label": t.model.ariaLabel,
+      "aria-labelledby": t.model.ariaLabelledBy,
+      "aria-describedby": t.model.ariaDescribedBy,
+      "aria-invalid": t.model.ariaInvalid,
+      "aria-errormessage": t.model.ariaErrormessage,
+      style: f({ resize: t.model.question.resizeStyle })
     }, null, 46, Go));
   }
 }), Jo = /* @__PURE__ */ y({
@@ -6284,7 +6302,7 @@ function He(u) {
     void 0,
     u
   );
-  e("sv-svg-bundle", Si), e("popup-survey", fe), e("survey-header", ns), e("sv-logo-image", Vi), e("survey-page", ss), e("survey-row", ts), e("survey-question", ls), e("survey-panel", ms), e("survey-element-header", vs), e("survey-string", Cs), e("sv-string-viewer", gs), e("sv-string-editor", hs), e("sv-skeleton", ws), e("sv-scroll", fs), e("survey-text", Is), e("survey-text-input", Rs), e("survey-checkbox", Ds), e("survey-checkbox-item", Ns), e("survey-radiogroup", Es), e("survey-radiogroup-item", Os), e("survey-signaturepad", Ks), e("survey-html", Gs), e("survey-image", _s), e("survey-expression", xs), e("survey-file", t1), e("sv-file-choose-btn", qi), e("sv-file-clean-btn", ci), e("sv-file-preview", wi), e("sv-file-page", Ti), e("sv-file-item", Di), e("sv-file-video", yi), e("survey-imagepicker", i1), e("survey-imagepicker-item", d1), e("survey-comment", m1), e("survey-dropdown", p1), e("sv-dropdown-select", g1), e("sv-dropdown-option-item", h1), e("sv-dropdown", k1), e("survey-tagbox", f1), e("sv-tagbox", I1), e("sv-tagbox-item", B1), e("sv-tagbox-filter", R1), e("survey-ranking", Z1), e("survey-ranking-item", E1), e("sv-ranking-item", W1), e("survey-rating", z1), e("sv-rating-item", K1), e("sv-rating-item-smiley", X1), e("sv-rating-item-star", _1), e("sv-rating-dropdown", tn), e("sv-rating-dropdown-item", nn), e("survey-boolean", rn), e("sv-boolean-radio", ln), e("sv-boolean-radio-item", dn), e("sv-boolean-checkbox", gn), e("survey-multipletext", yn), e("survey-multipletext-item", wn), e("sv-breadcrumbs", bn), e("sv-single-input-summary", Mn), e("survey-slider", Rn), e("survey-matrix", Pn), e("survey-matrix-row", En), e("survey-matrix-cell", On), e("survey-matrixdropdown", zn), e("survey-matrixtable", Kn), e("survey-matrixheaderrequired", Gn), e("survey-matrixdropdown-cell", Jn), e("survey-matrixdynamic", Yn), e("survey-placeholder-matrixdynamic", _n), e("sv-matrix-remove-button", et), e("sv-matrix-drag-drop-icon", nt), e("sv-matrix-detail-button", ot), e("survey-paneldynamic", rt), e("survey-paneldynamicprogress", at), e("survey-paneldynamicprogress-v2", dt), e("survey-placeholder-paneldynamic", mt), e("sv-paneldynamic-add-btn", vt), e("sv-paneldynamic-next-btn", ct), e("sv-paneldynamic-prev-btn", yt), e("sv-paneldynamic-remove-btn", qt), e("sv-paneldynamic-progress-text", wt), e("sv-components-container", wo), e("sv-progress-buttons", Vo), e("sv-navigation-toc", So), e("sv-progress-pages", Y), e("sv-progress-questions", Y), e("sv-progress-correctquestions", Y), e("sv-progress-requiredquestions", Y), e("survey-errors", Lt), e("survey-question-comment", ft), e("survey-element-title", Ht), e("survey-element-title-content", Rt), e("sv-title-actions", Zt), e("sv-brand-info", Wt), e("sv-question-error", Ut), e("sv-svg-icon", zt), e("sv-action-bar", Qt), e("sv-action", Gt), e("sv-action-bar-item", Yt), e("sv-action-bar-item-dropdown", eo), e("sv-action-bar-separator", so), e("sv-list", io), e("sv-list-item-content", uo), e("sv-list-item-group", mo), e("sv-list-item", ao), e("sv-popup", po), e("sv-popup-container", ho), e("popup-pointer", qo), e("sv-notifier", Wo), e("survey-other-choice", Oo), e("sv-nav-btn", Uo), e("survey-customwidget", Ko), e("survey-popup-modal", jo), e("survey-composite", Yo), e("survey-custom", _o), e("sv-timerpanel", si), e("sv-loading-indicator", ti), e("sv-header", ii), e("sv-header-cell", ai), e("sv-header-mobile", pi), e("sv-template-renderer", Ci), e("sv-character-counter", Jo), e("sv-text-area", Xo), e("survey-element", vi), e("survey-buttongroup", bi), e("sv-button-group-item", Hi), e("sv-buttongroup-dropdown", Mi), e("survey", ae);
+  e("sv-svg-bundle", Si), e("popup-survey", fe), e("survey-header", ns), e("sv-logo-image", Vi), e("survey-page", ss), e("survey-row", ts), e("survey-question", ls), e("survey-panel", ms), e("survey-element-header", vs), e("survey-string", Cs), e("sv-string-viewer", gs), e("sv-string-editor", hs), e("sv-skeleton", ws), e("sv-scroll", fs), e("survey-text", Is), e("survey-text-input", Rs), e("survey-checkbox", Ds), e("survey-checkbox-item", Ns), e("survey-radiogroup", Es), e("survey-radiogroup-item", Os), e("survey-signaturepad", Ks), e("survey-html", Gs), e("survey-image", _s), e("survey-expression", xs), e("survey-file", t1), e("sv-file-choose-btn", qi), e("sv-file-clean-btn", ci), e("sv-file-preview", wi), e("sv-file-page", Ti), e("sv-file-item", Di), e("sv-file-video", yi), e("survey-imagepicker", i1), e("survey-imagepicker-item", d1), e("survey-comment", m1), e("survey-dropdown", p1), e("sv-dropdown-select", g1), e("sv-dropdown-option-item", h1), e("sv-dropdown", k1), e("survey-tagbox", f1), e("sv-tagbox", I1), e("sv-tagbox-item", B1), e("sv-tagbox-filter", R1), e("survey-ranking", Z1), e("survey-ranking-item", E1), e("sv-ranking-item", W1), e("survey-rating", z1), e("sv-rating-item", K1), e("sv-rating-item-smiley", X1), e("sv-rating-item-star", _1), e("sv-rating-dropdown", tn), e("sv-rating-dropdown-item", nn), e("survey-boolean", rn), e("sv-boolean-radio", ln), e("sv-boolean-radio-item", dn), e("sv-boolean-checkbox", gn), e("survey-multipletext", yn), e("survey-multipletext-item", wn), e("sv-breadcrumbs", bn), e("sv-single-input-summary", Mn), e("survey-slider", Sn), e("sv-slider-label-item", Rn), e("survey-matrix", Pn), e("survey-matrix-row", En), e("survey-matrix-cell", On), e("survey-matrixdropdown", zn), e("survey-matrixtable", Kn), e("survey-matrixheaderrequired", Gn), e("survey-matrixdropdown-cell", Jn), e("survey-matrixdynamic", Yn), e("survey-placeholder-matrixdynamic", _n), e("sv-matrix-remove-button", et), e("sv-matrix-drag-drop-icon", nt), e("sv-matrix-detail-button", ot), e("survey-paneldynamic", rt), e("survey-paneldynamicprogress", at), e("survey-paneldynamicprogress-v2", dt), e("survey-placeholder-paneldynamic", mt), e("sv-paneldynamic-add-btn", vt), e("sv-paneldynamic-next-btn", ct), e("sv-paneldynamic-prev-btn", yt), e("sv-paneldynamic-remove-btn", qt), e("sv-paneldynamic-progress-text", wt), e("sv-components-container", wo), e("sv-progress-buttons", Vo), e("sv-navigation-toc", So), e("sv-progress-pages", Y), e("sv-progress-questions", Y), e("sv-progress-correctquestions", Y), e("sv-progress-requiredquestions", Y), e("survey-errors", Lt), e("survey-question-comment", ft), e("survey-element-title", Ht), e("survey-element-title-content", Rt), e("sv-title-actions", Zt), e("sv-brand-info", Wt), e("sv-question-error", Ut), e("sv-svg-icon", zt), e("sv-action-bar", Qt), e("sv-action", Gt), e("sv-action-bar-item", Yt), e("sv-action-bar-item-dropdown", eo), e("sv-action-bar-separator", so), e("sv-list", io), e("sv-list-item-content", uo), e("sv-list-item-group", mo), e("sv-list-item", ao), e("sv-popup", po), e("sv-popup-container", ho), e("popup-pointer", qo), e("sv-notifier", Wo), e("survey-other-choice", Oo), e("sv-nav-btn", Uo), e("survey-customwidget", Ko), e("survey-popup-modal", jo), e("survey-composite", Yo), e("survey-custom", _o), e("sv-timerpanel", si), e("sv-loading-indicator", ti), e("sv-header", ii), e("sv-header-cell", ai), e("sv-header-mobile", pi), e("sv-template-renderer", Ci), e("sv-character-counter", Jo), e("sv-text-area", Xo), e("survey-element", vi), e("survey-buttongroup", bi), e("sv-button-group-item", Hi), e("sv-buttongroup-dropdown", Mi), e("survey", ae);
 }
 He(
   (u, e) => F.Instance.registerComponent(u, e)