@platforma-sdk/ui-vue 1.37.0 → 1.37.1

package/dist/lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js

@@ -0,0 +1,227 @@
+import { defineComponent as Q, useSlots as W, ref as N, useTemplateRef as X, reactive as oo, computed as c, unref as a, createElementBlock as d, watch as eo, watchPostEffect as lo, openBlock as i, createElementVNode as s, createCommentVNode as u, normalizeClass as ro, createBlock as m, createVNode as to, withDirectives as io, vModelText as no, Fragment as C, renderList as V, withModifiers as z, withCtx as b, createTextVNode as O, toDisplayString as v, renderSlot as I } from "vue";
+import { tap as ao } from "../../helpers/functions.js";
+import po from "../PlTooltip/PlTooltip.vue.js";
+import P from "../PlChip/PlChip.vue.js";
+import so from "../../utils/DoubleContour.vue.js";
+import { useLabelNotch as co } from "../../utils/useLabelNotch.js";
+import uo from "../DropdownListItem.vue.js";
+import { deepEqual as _, deepIncludes as T } from "../../helpers/objects.js";
+import { normalizeListOptions as ho } from "../../helpers/utils.js";
+import mo from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import vo from "../PlIcon24/PlIcon24.vue.js";
+import wo from "../../generated/components/svg/images/SvgRequired.vue2.js";
+import { getErrorMessage as fo } from "../../helpers/error.js";
+(function() {
+  try {
+    if (typeof document < "u") {
+      var w = document.createElement("style");
+      w.appendChild(document.createTextNode(`.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}`)), document.head.appendChild(w);
+    }
+  } catch (k) {
+    console.error("vite-plugin-css-injected-by-js", k);
+  }
+})();
+const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = { class: "pl-dropdown-multi__field" }, _o = ["disabled", "placeholder"], ko = {
+  key: 0,
+  class: "chips-container"
+}, Lo = { class: "pl-dropdown-multi__controls" }, yo = { key: 0 }, Co = { class: "pl-dropdown-multi__open-chips-container" }, Vo = {
+  key: 0,
+  class: "nothing-found"
+}, zo = {
+  key: 0,
+  class: "pl-dropdown-multi__error"
+}, Bo = {
+  key: 1,
+  class: "pl-dropdown-multi__helper"
+}, Mo = {
+  name: "PlDropdownMulti"
+}, qo = /* @__PURE__ */ Q({
+  ...Mo,
+  props: {
+    modelValue: { default: () => [] },
+    label: { default: void 0 },
+    options: { default: void 0 },
+    helper: { default: void 0 },
+    error: { default: void 0 },
+    placeholder: { default: "..." },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(w, { emit: k }) {
+    const U = k, B = (o) => U("update:modelValue", o), q = W(), n = w, h = N(), M = N(), f = X("overlay"), l = oo({
+      search: "",
+      activeOption: -1,
+      open: !1,
+      optionsHeight: 0
+    }), g = c(() => Array.isArray(n.modelValue) ? n.modelValue : []), R = c(() => l.open && n.modelValue.length > 0 ? n.placeholder : n.modelValue.length > 0 ? "" : n.placeholder), E = c(() => ho(n.options ?? [])), Z = c(() => g.value.map((o) => E.value.find((r) => _(r.value, o))).filter((o) => o !== void 0)), x = c(() => {
+      const o = a(g), r = a(E);
+      return (l.search ? r.filter((e) => {
+        const t = l.search.toLowerCase();
+        return e.label.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === l.search;
+      }) : [...r]).map((e) => ({
+        ...e,
+        selected: T(o, e.value)
+      }));
+    }), $ = c(() => n.options === void 0), L = c(() => $.value ? !0 : n.disabled), j = c(() => L.value ? void 0 : "0"), S = () => {
+      l.activeOption = ao(
+        x.value.findIndex((o) => _(o.value, n.modelValue)),
+        (o) => o < 0 ? 0 : o
+      );
+    }, A = (o) => {
+      var r;
+      const e = a(g);
+      B(T(e, o) ? e.filter((t) => !_(t, o)) : [...e, o]), l.search = "", (r = h == null ? void 0 : h.value) == null || r.focus();
+    }, H = (o) => B(a(g).filter((r) => !_(r, o))), K = () => {
+      var o;
+      return (o = M.value) == null ? void 0 : o.focus();
+    }, Y = () => {
+      l.open = !l.open, l.open || (l.search = "");
+    }, D = (o) => {
+      var r, e, t;
+      const p = o.relatedTarget;
+      !((r = h.value) != null && r.contains(p)) && !((t = (e = f.value) == null ? void 0 : e.listRef) != null && t.contains(p)) && (l.search = "", l.open = !1);
+    }, G = (o) => {
+      var r;
+      const { open: e, activeOption: t } = l;
+      if (!e) {
+        o.code === "Enter" && (l.open = !0);
+        return;
+      }
+      o.code === "Escape" && (l.open = !1, (r = h.value) == null || r.focus());
+      const p = a(x), { length: y } = p;
+      if (!y)
+        return;
+      ["ArrowDown", "ArrowUp", "Enter"].includes(o.code) && o.preventDefault(), o.code === "Enter" && A(p[t].value);
+      const J = o.code === "ArrowDown" ? 1 : o.code === "ArrowUp" ? -1 : 0;
+      l.activeOption = Math.abs(t + J + y) % y, requestAnimationFrame(() => {
+        var F;
+        return (F = f.value) == null ? void 0 : F.scrollIntoActive();
+      });
+    };
+    return co(h), eo(
+      () => n.modelValue,
+      () => S(),
+      { immediate: !0 }
+    ), lo(() => {
+      var o;
+      l.search, l.open && ((o = f.value) == null || o.scrollIntoActive());
+    }), (o, r) => (i(), d("div", {
+      class: "pl-dropdown-multi__envelope",
+      onClick: K
+    }, [
+      s("div", {
+        ref_key: "rootRef",
+        ref: h,
+        tabindex: j.value,
+        class: ro(["pl-dropdown-multi", { open: l.open, error: o.error, disabled: L.value }]),
+        onKeydown: G,
+        onFocusout: D
+      }, [
+        s("div", xo, [
+          s("div", bo, [
+            io(s("input", {
+              ref_key: "input",
+              ref: M,
+              "onUpdate:modelValue": r[0] || (r[0] = (e) => l.search = e),
+              type: "text",
+              tabindex: "-1",
+              disabled: L.value,
+              placeholder: R.value,
+              spellcheck: "false",
+              autocomplete: "chrome-off",
+              onFocus: r[1] || (r[1] = (e) => l.open = !0)
+            }, null, 40, _o), [
+              [no, l.search]
+            ]),
+            l.open ? u("", !0) : (i(), d("div", ko, [
+              (i(!0), d(C, null, V(Z.value, (e, t) => (i(), m(a(P), {
+                key: t,
+                closeable: "",
+                small: "",
+                onClick: r[2] || (r[2] = z((p) => l.open = !0, ["stop"])),
+                onClose: (p) => H(e.value)
+              }, {
+                default: b(() => [
+                  O(v(e.label || e.value), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClose"]))), 128))
+            ])),
+            s("div", Lo, [
+              $.value ? (i(), m(a(vo), {
+                key: 0,
+                name: "loading"
+              })) : u("", !0),
+              I(o.$slots, "append"),
+              s("div", {
+                class: "pl-dropdown-multi__arrow-wrapper",
+                onClick: z(Y, ["stop"])
+              }, r[3] || (r[3] = [
+                s("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
+              ]))
+            ])
+          ]),
+          o.label ? (i(), d("label", yo, [
+            o.required ? (i(), m(wo, { key: 0 })) : u("", !0),
+            s("span", null, v(o.label), 1),
+            a(q).tooltip ? (i(), m(a(po), {
+              key: 1,
+              class: "info",
+              position: "top"
+            }, {
+              tooltip: b(() => [
+                I(o.$slots, "tooltip")
+              ]),
+              _: 3
+            })) : u("", !0)
+          ])) : u("", !0),
+          l.open ? (i(), m(mo, {
+            key: 1,
+            ref_key: "overlay",
+            ref: f,
+            root: h.value,
+            class: "pl-dropdown-multi__options",
+            gap: 5,
+            tabindex: "-1",
+            onFocusout: D
+          }, {
+            default: b(() => [
+              s("div", Co, [
+                (i(!0), d(C, null, V(Z.value, (e, t) => (i(), m(a(P), {
+                  key: t,
+                  closeable: "",
+                  small: "",
+                  onClose: (p) => H(e.value)
+                }, {
+                  default: b(() => [
+                    O(v(e.label || e.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClose"]))), 128))
+              ]),
+              (i(!0), d(C, null, V(x.value, (e, t) => (i(), m(uo, {
+                key: t,
+                option: e,
+                "text-item": "text",
+                "is-selected": e.selected,
+                "is-hovered": l.activeOption == t,
+                size: "medium",
+                "use-checkbox": "",
+                onClick: z((p) => A(e.value), ["stop"])
+              }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
+              x.value.length ? u("", !0) : (i(), d("div", Vo, "Nothing found"))
+            ]),
+            _: 1
+          }, 8, ["root"])) : u("", !0),
+          to(so, { class: "pl-dropdown-multi__contour" })
+        ])
+      ], 42, go),
+      o.error ? (i(), d("div", zo, v(a(fo)(o.error)), 1)) : o.helper ? (i(), d("div", Bo, v(o.helper), 1)) : u("", !0)
+    ]));
+  }
+});
+export {
+  qo as default
+};
+//# sourceMappingURL=PlDropdownMulti.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: 'PlDropdownMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown-multi.scss';\nimport { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport { PlChip } from '../PlChip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption } from '../../types';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value.map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n        const search = data.search.toLowerCase();\n\n        if (opt.label.toLowerCase().includes(search)) {\n          return true;\n        }\n\n        if (typeof opt.value === 'string') {\n          return opt.value.toLowerCase().includes(search);\n        }\n\n        return opt.value === data.search;\n      })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n  data.activeOption = tap(\n    filteredOptionsRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = '';\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = '';\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = '';\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\">\n            <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <SvgRequired v-if=\"required\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-multi__open-chips-container\">\n            <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @close=\"unselectOption(opt.value)\">\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["Ee","emit","emitModel","v","P","S","V","e","U","Y","s","z","c","N","$","h","Z","t","ee","_","selectedValues","options","unref","K","p","A","pe","E","l","k","w","a","search","o","opt","n","deepIncludes","x","isLoadingOptions","D","tap","filteredOptionsRef","ae","selectOption","values","deepEqual","data","event","rootRef","i","L","length","filteredOptions","d","M","W","I","useLabelNotch","oe","updateActiveOption"],"mappings":"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"}

package/dist/lib/ui/uikit/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent as p, useSlots as u, computed as i, createBlock as n, openBlock as s, mergeProps as f, createSlots as m, withCtx as v, unref as c, renderSlot as b } from "vue";
+import k from "../PlDropdownMulti/PlDropdownMulti.vue.js";
+const h = /* @__PURE__ */ p({
+  __name: "PlDropdownMultiRef",
+  props: {
+    modelValue: { default: () => [] },
+    label: { default: void 0 },
+    options: { default: void 0 },
+    helper: { default: void 0 },
+    error: { default: void 0 },
+    placeholder: { default: "..." },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const a = u(), l = t, d = i(
+      () => {
+        var e;
+        return (e = l.options) == null ? void 0 : e.map((o) => ({
+          label: o.label,
+          value: o.ref
+        }));
+      }
+    );
+    return (e, o) => (s(), n(k, f(l, {
+      options: d.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (r) => e.$emit("update:modelValue", r))
+    }), m({ _: 2 }, [
+      c(a).tooltip ? {
+        name: "tooltip",
+        fn: v(() => [
+          b(e.$slots, "tooltip")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["options"]));
+  }
+});
+export {
+  h as default
+};
+//# sourceMappingURL=PlDropdownMultiRef.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownMultiRef.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"names":["slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAMA,IAAaC,EASbC,GAAAA,IAAQC,GA+CRC,IAAUC;AAAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA,EAAA;AAAA,MAAA;AAAA,IAEf;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlDropdownRef/PlDropdownRef.vue.js

@@ -0,0 +1,50 @@
+import { defineComponent as u, useSlots as s, computed as a, createBlock as f, openBlock as m, unref as t, mergeProps as c, createSlots as v, withCtx as b, renderSlot as g } from "vue";
+import h from "../PlDropdown/PlDropdown.vue.js";
+const k = {
+  name: "PlDropdownRef"
+}, y = /* @__PURE__ */ u({
+  ...k,
+  props: {
+    modelValue: {},
+    label: { default: "" },
+    options: { default: void 0 },
+    helper: { default: void 0 },
+    loadingOptionsHelper: { default: void 0 },
+    error: { default: void 0 },
+    placeholder: { default: "..." },
+    clearable: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    optionSize: { default: "small" }
+  },
+  emits: ["update:modelValue"],
+  setup(d) {
+    const i = s(), l = d, r = a(
+      () => {
+        var e;
+        return (e = l.options) == null ? void 0 : e.map((o) => ({
+          label: o.label,
+          value: o.ref
+        }));
+      }
+    ), n = a(() => l.disabled ? "icon-link-disabled" : "icon-link");
+    return (e, o) => (m(), f(t(h), c(l, {
+      options: r.value,
+      "loading-options-helper": e.loadingOptionsHelper,
+      "arrow-icon-large": n.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (p) => e.$emit("update:modelValue", p))
+    }), v({ _: 2 }, [
+      t(i).tooltip ? {
+        name: "tooltip",
+        fn: b(() => [
+          g(e.$slots, "tooltip")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["options", "loading-options-helper", "arrow-icon-large"]));
+  }
+});
+export {
+  y as default
+};
+//# sourceMappingURL=PlDropdownRef.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlDropdownRef/PlDropdownRef.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: ModelRef | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n\nconst arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-link'));\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"arrowIcon\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","h","s","slots","useSlots","props","__props","options","computed","_a","opt","arrowIcon"],"mappings":";;AAIA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR,GAAAC,IAAAC,gBAAAA,EAAA;AAAA;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EASbC,GAAAA,IAAQC,GA8DRC,IAAUC;AAAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA,EAAA;AAAA,MAAA;AAAA,IAAA,GAITC,IAAYH,EAAS,MAAOH,EAAM,WAAW,uBAAuB,WAAY;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlEditableTitle/PlEditableTitle.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent as L, mergeModels as M, useModel as k, computed as w, ref as E, createElementBlock as i, openBlock as u, normalizeStyle as V, normalizeClass as d, unref as t, createElementVNode as f, createCommentVNode as c, withDirectives as b, toDisplayString as v, withKeys as g, vModelText as C } from "vue";
+import { useTransformedModel as T } from "../../composition/useTransformedModel.js";
+import s from "./pl-editable-title.module.scss.js";
+const W = { key: 0 }, K = ["placeholder"], B = /* @__PURE__ */ L({
+  __name: "PlEditableTitle",
+  props: /* @__PURE__ */ M({
+    placeholder: { default: "Title" },
+    maxWidth: { default: "80%" },
+    prefix: { default: void 0 },
+    maxLength: { default: 1e3 },
+    minLength: { default: void 0 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(m) {
+    const n = k(m, "modelValue"), o = m, e = T(n, {
+      update() {
+        return !1;
+      },
+      parse: (r) => {
+        if (typeof r != "string")
+          throw Error("value should be a string");
+        if (o.maxLength && r.length > o.maxLength)
+          throw Error(`Max title length is ${o.maxLength} characters`);
+        if (o.minLength && r.length < o.minLength)
+          throw Error(`Min title length is ${o.minLength} characters`);
+        return r.trim();
+      }
+    }), x = w(() => ({
+      maxWidth: o.maxWidth ?? "80%"
+    })), y = () => {
+      n.value = e.value && !e.error ? e.value : n.value, e.reset();
+    }, p = E();
+    return (r, l) => (u(), i("div", {
+      class: d(["pl-editable-title", t(s).component]),
+      style: V(x.value)
+    }, [
+      f("div", {
+        class: d(t(s).container),
+        onClick: l[3] || (l[3] = () => {
+          var a;
+          return (a = p.value) == null ? void 0 : a.focus();
+        })
+      }, [
+        r.prefix ? (u(), i("span", W, v(r.prefix.trim()) + " ", 1)) : c("", !0),
+        b(f("input", {
+          ref_key: "inputRef",
+          ref: p,
+          "onUpdate:modelValue": l[0] || (l[0] = (a) => t(e).value = a),
+          placeholder: r.placeholder,
+          onFocusout: y,
+          onKeydown: [
+            l[1] || (l[1] = g(
+              //@ts-ignore
+              (...a) => t(e).reset && t(e).reset(...a),
+              ["escape"]
+            )),
+            l[2] || (l[2] = g((a) => {
+              var h;
+              return (h = a.target) == null ? void 0 : h.blur();
+            }, ["enter"]))
+          ]
+        }, null, 40, K), [
+          [C, t(e).value]
+        ])
+      ], 2),
+      t(e).error ? (u(), i("div", {
+        key: 0,
+        class: d(t(s).error)
+      }, v(t(e).error), 3)) : c("", !0)
+    ], 6));
+  }
+});
+export {
+  B as default
+};
+//# sourceMappingURL=PlEditableTitle.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlEditableTitle/PlEditableTitle.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nconst inputRef = ref<HTMLInputElement>();\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","computedStyle","computed","save","inputRef","ref"],"mappings":";;;;;;;;;;;;;;;;;AAKMA,UAAAA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAgCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACA,eAAA;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AAChB,YAAA,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAK;AAAA,MAAA;AAAA,IAAA,CAEjB,GAEKC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUL,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIM,IAAO,MAAM;AACXT,MAAAA,EAAA,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAM;AAAA,IAAA,GAGRM,IAAWC,EAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlEditableTitle/pl-editable-title.module.scss.js

@@ -0,0 +1,22 @@
+(function() {
+  try {
+    if (typeof document < "u") {
+      var e = document.createElement("style");
+      e.appendChild(document.createTextNode(`._component_1w6b3_1{position:relative;display:flex;flex-direction:column;gap:0;--mask-icon-bg-color: transparent;--mask-size: 24px}._component_1w6b3_1:hover{--mask-icon-bg-color: var(--ic-02)}._component_1w6b3_1:focus-within:not(._component_1w6b3_1:hover){--mask-icon-bg-color: transparent}._component_1w6b3_1 ._container_1w6b3_15{position:relative;display:flex;flex-direction:row;gap:0;align-items:center;margin-right:calc(var(--mask-size))}._component_1w6b3_1 ._container_1w6b3_15 span{font-size:28px;font-weight:500;line-height:32px;letter-spacing:-.56px;white-space:nowrap}._component_1w6b3_1 ._container_1w6b3_15 input{outline:none;border:none;cursor:text;field-sizing:content;font-size:28px;font-weight:500;line-height:38px;letter-spacing:-.56px;padding-top:4px;padding-bottom:4px;padding-right:4px;margin:0;font-family:var(--font-family-base);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._component_1w6b3_1 ._container_1w6b3_15 input::placeholder{color:var(--txt-mask)}._component_1w6b3_1 ._container_1w6b3_15:before{content:"";-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;-webkit-mask-size:var(--mask-size);mask-size:var(--mask-size);width:var(--mask-size);height:var(--mask-size);position:absolute;right:calc((var(--mask-size)) * -1);bottom:6px;background-color:var(--mask-icon-bg-color);cursor:pointer}._component_1w6b3_1 ._error_1w6b3_69{position:absolute;bottom:-4px;transform:translateY(100%);white-space:nowrap;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}`)), document.head.appendChild(e);
+    }
+  } catch (o) {
+    console.error("vite-plugin-css-injected-by-js", o);
+  }
+})();
+const t = "_component_1w6b3_1", n = "_container_1w6b3_15", i = "_error_1w6b3_69", a = {
+  component: t,
+  container: n,
+  error: i
+};
+export {
+  t as component,
+  n as container,
+  a as default,
+  i as error
+};
+//# sourceMappingURL=pl-editable-title.module.scss.js.map

package/dist/lib/ui/uikit/dist/components/PlEditableTitle/pl-editable-title.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pl-editable-title.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlErrorAlert/PlErrorAlert.vue.js

@@ -0,0 +1,10 @@
+import o from "./PlErrorAlert.vue2.js";
+import t from "./PlErrorAlert.vue3.js";
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const s = {
+  $style: t
+}, l = /* @__PURE__ */ r(o, [["__cssModules", s]]);
+export {
+  l as default
+};
+//# sourceMappingURL=PlErrorAlert.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlErrorAlert/PlErrorAlert.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlErrorAlert.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlErrorAlert/PlErrorAlert.vue2.js

@@ -0,0 +1,52 @@
+import { defineComponent as m, createElementBlock as d, openBlock as p, normalizeClass as t, normalizeStyle as y, createVNode as o, renderSlot as a, unref as i, createElementVNode as l, toDisplayString as r } from "vue";
+import g from "../PlClipboard/PlClipboard.vue.js";
+import f from "../PlIcon16/PlIcon16.vue.js";
+const u = {
+  name: "PlErrorAlert"
+}, k = /* @__PURE__ */ m({
+  ...u,
+  props: {
+    title: { default: void 0 },
+    message: { default: void 0 },
+    maxHeight: { default: "300px" },
+    copyMessage: { default: void 0 }
+  },
+  setup(n) {
+    const s = n;
+    function c() {
+      const e = s.copyMessage ?? s.message;
+      typeof e == "string" && navigator.clipboard.writeText(e);
+    }
+    return (e, v) => (p(), d("div", {
+      style: y({ maxHeight: s.maxHeight }),
+      class: t(e.$style.root)
+    }, [
+      o(i(g), {
+        class: t(e.$style.copy),
+        onCopy: c
+      }, null, 8, ["class"]),
+      a(e.$slots, "title", {}, () => [
+        l("div", {
+          class: t(e.$style.title)
+        }, [
+          o(i(f), {
+            class: t(e.$style.titleIcon),
+            name: "warning"
+          }, null, 8, ["class"]),
+          l("div", {
+            class: t(e.$style.titleText)
+          }, r(s.title), 3)
+        ], 2)
+      ]),
+      a(e.$slots, "message", {}, () => [
+        l("div", {
+          class: t(e.$style.message)
+        }, r(s.message), 3)
+      ])
+    ], 6));
+  }
+});
+export {
+  k as default
+};
+//# sourceMappingURL=PlErrorAlert.vue2.js.map

package/dist/lib/ui/uikit/dist/components/PlErrorAlert/PlErrorAlert.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlErrorAlert.vue2.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: 'PlErrorAlert',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from '../PlClipboard';\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: '300px',\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === 'string') {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"names":["__default__","c","props","__props","onCopy","value"],"mappings":";;;AACA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR,GAAA,IAAAC,gBAAAA,EAAA;AAAA;;;;;;;;AAOA,UAAMC,IAAQC;AAed,aAASC,IAAS;AACVC,YAAAA,IAAQH,EAAM,eAAeA,EAAM;AACrC,aAAOG,KAAU,YACT,UAAA,UAAU,UAAUA,CAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlErrorAlert/PlErrorAlert.vue3.js

@@ -0,0 +1,28 @@
+(function() {
+  try {
+    if (typeof document < "u") {
+      var o = document.createElement("style");
+      o.appendChild(document.createTextNode("._root_o15c5_2{position:relative;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:12px;background:var(--bg-error);border:1px var(--border-color-error) solid;border-radius:var(--border-radius-control)}._copy_o15c5_15{position:absolute;right:12px;top:12px;opacity:.4;transition:opacity .3s}._copy_o15c5_15:hover{opacity:1}._title_o15c5_27{display:flex;align-items:center;gap:10px;max-width:calc(100% - 20px);min-height:24px;line-height:24px;font-weight:700;overflow:hidden}._titleIcon_o15c5_38{--icon-color: var(--txt-error)}._titleText_o15c5_42{width:100%;overflow:hidden;text-overflow:ellipsis}._message_o15c5_48{overflow:auto;max-height:100%;white-space:pre-wrap;word-break:break-word;font-family:var(--font-family-monospace)}")), document.head.appendChild(o);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const t = "_root_o15c5_2", r = "_copy_o15c5_15", i = "_title_o15c5_27", a = "_titleIcon_o15c5_38", c = "_titleText_o15c5_42", l = "_message_o15c5_48", _ = {
+  root: t,
+  copy: r,
+  title: i,
+  titleIcon: a,
+  titleText: c,
+  message: l
+};
+export {
+  r as copy,
+  _ as default,
+  l as message,
+  t as root,
+  i as title,
+  a as titleIcon,
+  c as titleText
+};
+//# sourceMappingURL=PlErrorAlert.vue3.js.map

package/dist/lib/ui/uikit/dist/components/PlErrorAlert/PlErrorAlert.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlErrorAlert.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}